Aplikasi web adalah antarmuka pengguna (UI) untuk Action yang menggunakan Canvas Interaktif. Anda dapat menggunakan teknologi web yang ada (seperti HTML, CSS, JavaScript, dan WebAssembly) untuk mendesain dan mengembangkan aplikasi web Anda. Secara umum, Interactive Canvas dapat merender konten web seperti browser, tetapi ada beberapa batasan yang diberlakukan untuk privasi dan keamanan pengguna. Sebelum mulai mendesain UI, pertimbangkan prinsip desain yang diuraikan dalam Pedoman desain. Sebaiknya gunakan Firebase hosting untuk men-deploy aplikasi web Anda.
HTML dan JavaScript untuk aplikasi web Anda akan melakukan hal berikut:
- Lakukan inisialisasi library JavaScript Canvas Interaktif.
- Mendaftarkan callback peristiwa Canvas Interaktif.
- Menyediakan logika kustom untuk mengupdate aplikasi web Anda berdasarkan status.
Halaman ini membahas cara yang direkomendasikan untuk membuat aplikasi web, cara mengaktifkan komunikasi antara Action Percakapan dan aplikasi web Anda, serta pedoman dan batasan umum.
Library yang direkomendasikan
Meskipun Anda dapat menggunakan metode apa pun untuk mem-build UI, Google merekomendasikan penggunaan library berikut:
- Greensock: Untuk membuat animasi yang rumit.
- Pixi.js: Untuk menggambar grafis 2D di WebGL.
- Three.js: Untuk menggambar grafik 3D di WebGL.
- Gambar Canvas HTML5: Untuk gambar sederhana.
Arsitektur
Google sangat merekomendasikan penggunaan arsitektur aplikasi web satu halaman. Pendekatan ini memungkinkan performa yang optimal dan mendukung pengalaman percakapan pengguna yang berkelanjutan. Canvas Interaktif dapat digunakan bersama framework front-end seperti Vue, Angular, dan React, yang membantu pengelolaan status.
File HTML
File HTML menentukan tampilan UI Anda. File ini juga memuat Interactive Canvas API, yang memungkinkan komunikasi antara aplikasi web Anda dan Action Percakapan Anda.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interactive Canvas Sample</title> <!-- Disable favicon requests --> <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> <!-- Load Interactive Canvas JavaScript --> <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script> <!-- Load PixiJS for graphics rendering --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script> <!-- Load Stats.js for fps monitoring --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <!-- Load custom CSS --> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="view" class="view"> <div class="debug"> <div class="stats"></div> <div class="logs"></div> </div> </div> <!-- Load custom JavaScript after elements are on page --> <script src="js/log.js"></script> <script type="module" src="js/main.js"></script> </body> </html>
Berkomunikasi antara Action Percakapan dan aplikasi web
Setelah membuat aplikasi web dan Action Percakapan serta memuat di library Interactive Canvas di file aplikasi web, Anda perlu menentukan cara aplikasi web dan Action Percakapan berinteraksi. Untuk melakukannya, ubah file yang berisi logika aplikasi web.
action.js
File ini berisi kode untuk menentukan callbacks dan memanggil
metode melalui interactiveCanvas
. Callback memungkinkan aplikasi web Anda merespons informasi atau permintaan dari Action Percakapan, sedangkan metode menyediakan cara untuk mengirim informasi atau permintaan ke Action Percakapan.
Tambahkan interactiveCanvas.ready(callbacks);
ke file HTML Anda untuk melakukan inisialisasi dan mendaftarkan callbacks:
JavaScript
/** * This class is used as a wrapper for Google Assistant Canvas Action class * along with its callbacks. */ export class Action { /** * @param {Phaser.Scene} scene which serves as a container of all visual * and audio elements. */ constructor(scene) { this.canvas = window.interactiveCanvas; this.gameScene = scene; const that = this; this.intents = { GUESS: function(params) { that.gameScene.guess(params); }, DEFAULT: function() { // do nothing, when no command is found }, }; } /** * Register all callbacks used by the Interactive Canvas Action * executed during game creation time. */ setCallbacks() { const that = this; // Declare the Interactive Canvas action callbacks. const callbacks = { onUpdate(data) { const intent = data[0].google.intent; that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params); }, }; // Called by the Interactive Canvas web app once web app has loaded to // register callbacks. this.canvas.ready(callbacks); } }
main.js
Modul JavaScript main.js
mengimpor file action.js
dan scene.js
serta
membuat instance dari setiap file tersebut saat aplikasi web dimuat. Modul ini juga
mendaftarkan callback untuk Canvas Interaktif.
JavaScript
import {Action} from './action.js'; import {Scene} from './scene.js'; window.addEventListener('load', () => { window.scene = new Scene(); // Set Google Assistant Canvas Action at scene level window.scene.action = new Action(scene); // Call setCallbacks to register Interactive Canvas window.scene.action.setCallbacks(); });
scene.js
File scene.js
membuat scene untuk aplikasi web Anda. Berikut adalah
kutipan dari scene.js
:
JavaScript
const view = document.getElementById('view'); // initialize rendering and set correct sizing this.radio = window.devicePixelRatio; this.renderer = PIXI.autoDetectRenderer({ transparent: true, antialias: true, resolution: this.radio, width: view.clientWidth, height: view.clientHeight, }); this.element = this.renderer.view; this.element.style.width = `${this.renderer.width / this.radio}px`; this.element.style.height = `${(this.renderer.height / this.radio)}px`; view.appendChild(this.element); // center stage and normalize scaling for all resolutions this.stage = new PIXI.Container(); this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2); this.stage.scale.set(Math.max(this.renderer.width, this.renderer.height) / 1024); // load a sprite from a svg file this.sprite = PIXI.Sprite.from('triangle.svg'); this.sprite.anchor.set(0.5); this.sprite.tint = 0x00FF00; // green this.sprite.spin = true; this.stage.addChild(this.sprite); // toggle spin on touch events of the triangle this.sprite.interactive = true; this.sprite.buttonMode = true; this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
Mendukung interaksi sentuh
Action Canvas Interaktif Anda dapat merespons sentuhan pengguna serta input vokalnya. Berdasarkan pedoman desain Canvas Interaktif, Anda harus mengembangkan Action menjadi "yang mengutamakan suara". Jadi, beberapa layar smart mendukung interaksi sentuh.
Mendukung sentuhan mirip dengan mendukung respons percakapan; namun, bukan respons vokal dari pengguna, JavaScript sisi klien Anda mencari interaksi sentuh dan menggunakannya untuk mengubah elemen dalam aplikasi web.
Anda dapat melihat contohnya dalam contoh, yang menggunakan library Pixi.js:
JavaScript
… this.sprite = PIXI.Sprite.from('triangle.svg'); … this.sprite.interactive = true; // Enables interaction events this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
Pemecahan masalah
Meskipun dapat menggunakan simulator di konsol Actions untuk menguji Action Canvas Interaktif selama pengembangan, Anda juga dapat melihat error yang terjadi dalam aplikasi web Canvas Interaktif di perangkat pengguna dalam tahap produksi. Anda dapat melihat error ini di log Google Cloud Platform.
Untuk melihat pesan error ini di log Google Cloud Platform Anda, ikuti langkah-langkah berikut:
- Buka project Action Anda di Konsol Actions.
- Klik Test di navigasi atas.
- Klik link Lihat log di Google Cloud Platform.
Error dari perangkat pengguna Anda muncul dalam urutan kronologis di logs viewer.
Jenis error
Ada tiga jenis error aplikasi web yang dapat Anda lihat di log Google Cloud Platform:
- Waktu tunggu yang terjadi jika
ready
tidak dipanggil dalam waktu 10 detik - Waktu tunggu yang terjadi jika promise yang ditampilkan oleh
onUpdate()
tidak terpenuhi dalam 10 detik - Error runtime JavaScript yang tidak tertangkap dalam aplikasi web Anda
Lihat detail error JavaScript
Detail error runtime JavaScript dalam aplikasi web Anda tidak tersedia secara default. Untuk melihat detail error runtime JavaScript, ikuti langkah-langkah berikut:
- Pastikan Anda telah mengonfigurasi header respons HTTP lintas origin resource sharing (CORS) yang sesuai dalam file aplikasi web Anda. Untuk mengetahui informasi selengkapnya, lihat Berbagi resource lintas asal.
- Tambahkan
crossorigin="anonymous"
ke tag<script>
yang diimpor di file HTML Anda, seperti yang ditunjukkan dalam cuplikan kode berikut:
<script crossorigin="anonymous" src="<SRC>"></script>
Panduan dan pembatasan
Pertimbangkan panduan dan batasan berikut saat Anda mengembangkan aplikasi web:
- Tidak ada cookie
- Tidak ada penyimpanan lokal
- Tidak ada geolokasi
- Tidak ada penggunaan kamera
- Tanpa perekaman audio atau video
- Tidak ada pop-up
- Tidak melebihi batas memori 200 MB
- Pertimbangkan header nama Action saat merender konten (mengisi bagian atas layar)
- Tidak ada gaya yang dapat diterapkan ke video
- Hanya satu elemen media yang dapat digunakan pada satu waktu
- Tidak ada database Web SQL
- Tidak ada dukungan untuk antarmuka
SpeechRecognition
dari Web Speech API. - Setelan mode gelap tidak berlaku
- Pemutaran video didukung di layar smart. Untuk informasi selengkapnya tentang format penampung media dan codec yang didukung, lihat codec Google Nest Hub.
Cross-origin resource sharing
Karena aplikasi web Canvas Interaktif dihosting dalam iframe dan originnya ditetapkan ke null, Anda harus mengaktifkan cross-origin resource sharing (CORS) untuk server web dan resource penyimpanan Anda. Proses ini memungkinkan aset Anda menerima permintaan dari origin null.
- Jika media dan gambar Anda dihosting dengan Firebase, lihat Membuat link dinamis domain kustom untuk mengonfigurasi CORS.
- Jika media dan gambar Anda berada di Cloud Storage, lihat Mengonfigurasi cross-origin resource sharing (CORS) untuk mengonfigurasi CORS.
Langkah berikutnya
Untuk menambahkan lebih banyak fitur ke aplikasi web, lihat Lanjutkan mem-build dengan fulfillment sisi server atau klien.