Tindakan Percakapan tidak akan digunakan lagi pada 13 Juni 2023. Untuk mengetahui informasi selengkapnya, lihat Penghentian Action Percakapan.

Kanvas Interaktif

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.
Gambar 1. Game interaktif yang dibuat menggunakan Interactive Canvas.

Interactive Canvas adalah framework yang dibuat di Asisten Google dan 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 yang ada secara inline dalam percakapan Asisten, aplikasi web Canvas Interaktif dirender sebagai tampilan web layar penuh.

Gunakan Kanvas Interaktif jika Anda ingin melakukan salah satu tindakan berikut di Action Anda:

  • Membuat visual layar penuh
  • Membuat animasi dan transisi kustom
  • Melakukan visualisasi data
  • Membuat tata letak dan GUI kustom

Perangkat yang didukung

Kanvas Interaktif saat ini tersedia di perangkat berikut:

  • Layar smart
  • Perangkat seluler Android

Cara kerja

Action yang menggunakan Canvas Interaktif terdiri dari dua komponen utama:

  • Action Percakapan: Action yang menggunakan antarmuka percakapan untuk memenuhi permintaan pengguna. Anda dapat menggunakan Actions Builder atau Actions SDK untuk membuat percakapan.
  • Aplikasi web: Aplikasi web front-end dengan visual yang disesuaikan yang dikirimkan Action Anda sebagai respons terhadap pengguna selama percakapan. Anda membuat aplikasi web dengan teknologi web seperti HTML, JavaScript, dan CSS.

Pengguna yang berinteraksi dengan Interactive Canvas Action melakukan percakapan bolak-balik dengan Asisten Google untuk memenuhi sasaran mereka. Namun, untuk Kanvas Interaktif, sebagian besar percakapan ini terjadi dalam konteks aplikasi web Anda. Saat menghubungkan Action Percakapan ke aplikasi web Anda, Anda harus menyertakan Interactive Canvas API dalam kode aplikasi web Anda.

  • Library Canvas Interaktif: Library JavaScript yang Anda sertakan dalam aplikasi web untuk mengaktifkan komunikasi antara aplikasi web dan Action Percakapan Anda menggunakan API. Untuk informasi selengkapnya, lihat dokumentasi Interactive Canvas API.

Selain menyertakan library Interactive Canvas, Anda harus menampilkan jenis respons Canvas dalam percakapan untuk membuka aplikasi web di perangkat pengguna. Anda juga dapat menggunakan respons Canvas untuk mengupdate aplikasi web berdasarkan input pengguna.

  • Canvas: Respons yang berisi URL aplikasi web dan data untuk meneruskannya. Actions Builder dapat otomatis mengisi respons Canvas dengan intent yang cocok dan data scene saat ini untuk mengupdate aplikasi web. Atau, Anda dapat mengirim respons Canvas dari webhook menggunakan library fulfillment Node.js. Untuk informasi selengkapnya, lihat Perintah kanvas.

Untuk menggambarkan cara kerja Canvas Interaktif, bayangkan Action hipotetis yang disebut Cool Colors yang mengubah warna layar perangkat menjadi warna yang ditentukan pengguna. Setelah pengguna memanggil Action, alur berikut akan terjadi:

  1. Pengguna mengucapkan, "Ubah layar menjadi biru". di perangkat Asisten.
  2. Platform Actions on Google merutekan permintaan pengguna ke logika percakapan Anda untuk mencocokkan intent.
  3. Platform ini mencocokkan intent dengan scene Action, yang memicu peristiwa dan mengirim respons Canvas ke perangkat. Perangkat memuat aplikasi web menggunakan URL yang diberikan dalam respons (jika belum dimuat).
  4. Saat dimuat, aplikasi web akan mendaftarkan callback dengan Interactive Canvas API. Jika respons Canvas berisi kolom data, nilai objek dari kolom data akan diteruskan ke callback onUpdate yang terdaftar dari aplikasi web. Dalam contoh ini, logika percakapan mengirimkan respons Canvas dengan kolom data yang menyertakan variabel dengan nilai blue.
  5. Setelah menerima nilai data dari respons Canvas, callback onUpdate dapat menjalankan logika kustom untuk aplikasi web Anda dan membuat perubahan yang ditentukan. Dalam contoh ini, callback onUpdate membaca warna dari data dan mengubah layar menjadi biru.

Pemenuhan sisi klien dan sisi server

Saat membuat Tindakan Kanvas Interaktif, Anda dapat memilih antara dua jalur implementasi fulfillment: fulfillment server atau fulfillment klien. Dengan fulfillment server, utamanya Anda menggunakan API yang memerlukan webhook. Dengan fulfillment klien, Anda dapat menggunakan API sisi klien dan, jika diperlukan, API yang memerlukan webhook untuk fitur non-Kanvas (seperti penautan akun).

Jika memilih untuk mem-build dengan fulfillment webhook server pada tahap pembuatan project, Anda harus men-deploy webhook untuk menangani logika percakapan dan JavaScript sisi klien untuk mengupdate aplikasi web dan mengelola komunikasi antara keduanya.

Jika memilih untuk mem-build dengan fulfillment klien (saat ini tersedia di Pratinjau Developer), Anda dapat menggunakan API sisi klien baru untuk mem-build logika Action secara eksklusif di aplikasi web, yang menyederhanakan pengalaman pengembangan, mengurangi latensi antar-percakapan, dan memungkinkan Anda menggunakan kemampuan di perangkat. Jika diperlukan, Anda juga dapat beralih ke logika sisi server dari klien.

Untuk informasi selengkapnya tentang kemampuan sisi klien, lihat Mem-build dengan fulfillment sisi klien.

Langkah berikutnya

Guna mempelajari cara membuat aplikasi web untuk Kanvas Interaktif, lihat Aplikasi web.

Guna melihat kode untuk Tindakan Kanvas Interaktif yang lengkap, lihat contoh di GitHub.