Ringkasan (Dialogflow)

Canvas Interaktif adalah framework yang dibuat di Asisten Google yang memungkinkan developer menambahkan pengalaman visual yang imersif ke Action percakapan. Pengalaman visual ini adalah aplikasi web interaktif yang dikirim Asisten sebagai respons kepada pengguna dalam percakapan. Tidak seperti respons multimedia tradisional yang ada secara inline dalam percakapan Asisten, aplikasi web Canvas Interaktif dirender sebagai tampilan web layar penuh.

Anda harus menggunakan Canvas Interaktif jika ingin melakukan salah satu hal berikut di Action Anda:

  • Membuat visual layar penuh
  • Membuat animasi dan transisi kustom
  • Melakukan visualisasi data
  • Membuat tata letak dan GUI kustom
Gambar 1. Game interaktif yang dibuat menggunakan Canvas Interaktif.

Perangkat yang didukung

Canvas Interaktif saat ini tersedia di perangkat berikut:

  • Smart Display
  • Google Nest Hub

  • Perangkat seluler Android

Cara kerjanya

Action yang menggunakan Canvas Interaktif cara kerjanya mirip dengan Action percakapan biasa. Pengguna masih melakukan percakapan dua arah dengan Asisten untuk memenuhi tujuannya; namun, alih-alih menampilkan respons sebaris dalam percakapan, Action Canvas Interaktif mengirimkan respons kepada pengguna yang membuka aplikasi web layar penuh. Pengguna terus berinteraksi dengan aplikasi web melalui suara atau sentuhan hingga percakapan selesai.

Ada beberapa komponen untuk Action yang menggunakan Canvas Interaktif:

  • Action Percakapan: Action yang menggunakan antarmuka percakapan untuk memenuhi permintaan pengguna. Action Canvas Interaktif menggunakan tampilan web untuk merender respons, bukan kartu multimedia atau respons teks dan suara sederhana. Action Percakapan menggunakan komponen berikut:
    • Agen Dialogflow: Project di Dialogflow yang Anda sesuaikan untuk berinteraksi dengan pengguna Action Anda.
    • Fulfillment: Kode yang di-deploy sebagai webhook yang menerapkan logika percakapan untuk agen Dialogflow Anda dan berkomunikasi dengan aplikasi web Anda.
  • Aplikasi web: Aplikasi web frontend dengan visual yang disesuaikan yang dikirim Action Anda sebagai respons kepada pengguna selama percakapan. Anda membangun aplikasi web dengan standar web seperti HTML, JavaScript, dan CSS.

Action percakapan dan aplikasi web saling berkomunikasi menggunakan berikut ini:

  • Interactive Canvas API: JavaScript API yang Anda sertakan di aplikasi web untuk mengaktifkan komunikasi antara aplikasi web dan Action percakapan Anda.
  • HtmlResponse: Respons yang berisi URL aplikasi web dan data untuk meneruskannya. Anda dapat menggunakan library klien Node.js atau Java untuk menampilkan HtmlResponse.

Untuk menggambarkan cara kerja Canvas Interaktif, bayangkan ada Action hipotetis bernama Cool Colors yang mengubah warna layar perangkat menjadi warna yang ditentukan pengguna. Setelah pengguna memanggil Action, alurnya akan terlihat seperti berikut:

  1. Pengguna mengucapkan Turn the screen blue ke perangkat Asisten.
  2. Platform Actions on Google merutekan permintaan pengguna ke Dialogflow untuk mencocokkan intent.
  3. Fulfillment untuk intent yang cocok berjalan dan HtmlResponse dikirim ke perangkat. Perangkat menggunakan URL untuk memuat aplikasi web jika belum dimuat.
  4. Saat aplikasi web dimuat, aplikasi tersebut mendaftarkan callback dengan interactiveCanvas API. Nilai objek data kemudian diteruskan ke callback onUpdate yang terdaftar di aplikasi web. Dalam contoh ini, pemenuhan mengirimkan HtmlResponse dengan data yang menyertakan variabel dengan nilai blue.
  5. Logika kustom untuk aplikasi web Anda membaca nilai data dari HtmlResponse dan membuat perubahan yang ditentukan. Dalam contoh kita, hal ini akan mengubah warna layar menjadi biru.
  6. interactiveCanvas mengirimkan update callback ke perangkat.

Langkah berikutnya

Untuk mempelajari cara membuat Action Canvas Interaktif, lihat halaman Ringkasan Pembuatan.

Untuk melihat kode untuk Action Canvas Interaktif yang lengkap, lihat contoh.