Mengonfigurasi aplikasi web Anda

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. Pada umumnya, model Interaktif Canvas dapat merender konten web seperti browser, tetapi ada beberapa batasan diterapkan untuk privasi dan keamanan pengguna. Sebelum Anda mulai mendesain UI, pertimbangkan prinsip desain yang diuraikan dalam Pedoman desain. Sebaiknya gunakan hosting Firebase untuk men-deploy aplikasi web Anda.

HTML dan JavaScript untuk aplikasi web Anda melakukan hal berikut:

Halaman ini membahas cara yang direkomendasikan untuk membuat aplikasi web, serta cara mengaktifkan komunikasi antara Action Percakapan dan aplikasi web Anda, serta panduan umum dan batasan.

Meskipun Anda dapat menggunakan metode apa pun untuk membangun UI, Google merekomendasikan penggunaan library berikut:

Arsitektur

Google sangat merekomendasikan penggunaan arsitektur aplikasi web satu halaman. Ini memungkinkan performa yang optimal dan mendukung komunikasi kontinyu {i>user experience<i}. Interactive Canvas dapat digunakan bersamaan dengan {i>front-end<i} framework seperti Vue, Angular, dan React, yang membantu pengelolaan status.

File HTML

File HTML menentukan tampilan UI Anda. File ini juga memuat kursus interaktif Canvas API, yang memungkinkan komunikasi antar-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 Anda membuat aplikasi web dan Action Percakapan dan dimuat di tab {i>Canvas<i} di pustaka {i>Canvas<i} Anda di file aplikasi web, Anda perlu menentukan bagaimana aplikasi web dan Action Percakapan berinteraksi. Untuk melakukannya, ubah file yang berisi aplikasi web Anda logika.

action.js

File ini berisi kode untuk menentukan callback dan pemanggilan metode melalui interactiveCanvas. Callback memungkinkan web Anda aplikasi untuk merespons informasi atau permintaan dari Action Percakapan, sedangkan metode memberikan cara untuk mengirim informasi atau permintaan ke Action Percakapan.

Tambahkan interactiveCanvas.ready(callbacks); ke file HTML Anda untuk melakukan inisialisasi dan daftarkan callback:

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 instance tersebut ketika aplikasi web dimuat. Modul ini juga mendaftarkan callback untuk Interactive Canvas.

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 menyusun 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 dan input vokal mereka. Sesuai dengan Panduan desain Canvas Interaktif, Anda harus mengembangkan Action menjadi "voice-first". Meskipun demikian, beberapa kebijakan layar mendukung interaksi sentuh.

Sentuhan pendukung mirip dengan mendukung respons percakapan; namun, alih-alih respons vokal dari pengguna, JavaScript sisi klien Anda akan untuk interaksi sentuh dan menggunakannya untuk mengubah elemen di aplikasi web.

Anda dapat melihat contohnya di sampel, 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 Anda bisa menggunakan simulator di konsol Actions untuk menguji Tindakan Canvas selama pengembangan, Anda juga dapat melihat error yang terjadi dalam Aplikasi web Canvas interaktif pada pengguna perangkat dalam produksi. Anda dapat melihat di log Google Cloud Platform Anda.

Untuk melihat pesan error ini di akun Google Cloud Log platform, ikuti langkah-langkah berikut:

  1. Buka project Action Anda di Konsol Actions.
  2. Klik Uji di navigasi atas.
  3. Klik link Lihat log di Google Cloud Platform.

Error dari pengguna Anda perangkat akan muncul dalam urutan kronologis di penampil log.

Jenis error

Ada tiga jenis error aplikasi web yang dapat Anda lihat di log Google Cloud Platform:

  • Waktu tunggu yang terjadi saat ready tidak dipanggil dalam 10 detik
  • Waktu tunggu yang terjadi saat promise yang ditampilkan oleh onUpdate() tidak terpenuhi dalam 10 detik
  • Error runtime JavaScript yang tidak terdeteksi 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:

  1. Pastikan Anda telah mengonfigurasi berbagi resource lintas origin yang sesuai (CORS) header respons HTTP di file aplikasi web Anda. Untuk informasi selengkapnya, lihat Berbagi resource lintas origin.
  2. Tambahkan crossorigin="anonymous" ke tag <script> yang diimpor di File HTML, seperti yang ditunjukkan dalam cuplikan kode berikut:
<script crossorigin="anonymous" src="<SRC>"></script>

Panduan dan pembatasan

Pertimbangkan pedoman dan batasan berikut saat Anda mengembangkan aplikasi web Anda:

  • Tidak ada cookie
  • Tidak ada penyimpanan lokal
  • Tidak ada geolokasi
  • Tidak ada penggunaan kamera
  • Tidak ada perekaman audio atau video
  • Tidak ada pop-up
  • Tidak melebihi batas memori 200 MB
  • Pertimbangkan header Nama tindakan saat merender konten (menempatkan bagian atas layar)
  • Tidak ada gaya yang dapat diterapkan pada 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 codec dan format penampung media yang didukung, lihat codec Google Nest Hub.

Cross-origin resource sharing

Karena aplikasi web Canvas Interaktif dihosting di iframe dan origin disetel ke null, Anda harus mengaktifkan cross-origin resource sharing (CORS) untuk server web dan sumber daya penyimpanan Anda. Proses ini memungkinkan aset Anda untuk menerima permintaan dari origin null.

Langkah berikutnya

Untuk menambahkan lebih banyak fitur ke aplikasi web Anda, lihat Melanjutkan membangun dengan klien atau fulfillment sisi server.