Ringkasan (Dialogflow)

Interactive Canvas 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 kaya tradisional yang ada secara inline dalam percakapan Asisten, aplikasi web Canvas Interaktif merender sebagai tampilan web layar penuh.

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

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

Perangkat yang didukung

Interactive Canvas saat ini tersedia di perangkat berikut:

  • Smart Display
  • Google Nest Hub

  • Perangkat seluler Android

Cara kerja

Action yang menggunakan Canvas Interaktif bekerja mirip dengan Action percakapan reguler. Pengguna masih melakukan percakapan bolak-balik dengan Asisten untuk memenuhi sasarannya; tetapi, bukan menampilkan respons inline dalam percakapan, Interactive Canvas Action 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 Interactive Canvas:

  • Tindakan Percakapan: Tindakan yang menggunakan antarmuka percakapan untuk memenuhi permintaan pengguna. Interactive Canvas Actions menggunakan tampilan web untuk merender respons, bukan kartu informasi atau teks sederhana dan respons suara. Tindakan Percakapan menggunakan komponen berikut:
    • Agen Dialogflow: Project di Dialogflow yang Anda sesuaikan untuk berkomunikasi dengan pengguna Action.
    • 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 front-end dengan visual yang disesuaikan yang dikirim oleh Action Anda sebagai respons kepada pengguna selama percakapan. Anda membuat aplikasi web dengan standar web seperti HTML, JavaScript, dan CSS.

Action percakapan dan aplikasi web berkomunikasi satu sama lain menggunakan hal berikut:

  • Interactive Canvas API: API JavaScript yang Anda sertakan dalam aplikasi web untuk memungkinkan 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 mengilustrasikan cara kerja Canvas Interaktif, bayangkan Action hipotesis yang disebut 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 mengarahkan permintaan pengguna ke Dialogflow agar cocok dengan 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 dimuat, aplikasi web akan mendaftarkan callback dengan interactiveCanvas API. Nilai objek data ini kemudian diteruskan ke callback onUpdate yang terdaftar dari aplikasi web. Dalam contoh ini, fulfillment 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 kami, ini mengubah layar menjadi biru.
  6. interactiveCanvas mengirim update callback ke perangkat.

Langkah berikutnya

Untuk mempelajari cara mem-build Action Canvas Interaktif, lihat halaman Ringkasan Build.

Untuk melihat kode Tindakan Kanvas Interaktif lengkap, lihat contoh.