Configura la tua app web

Un'app web è l'interfaccia utente (UI) per un'azione che utilizza Canvas interattivo. Puoi usare le tecnologie web esistenti (HTML, CSS, JavaScript e WebAssembly) per progettare e sviluppare la tua app web. Per lo più, le interazioni Il canvas può eseguire il rendering dei contenuti web come un browser, ma sono previste alcune limitazioni. per la privacy e la sicurezza degli utenti. Prima di iniziare a progettare la tua UI, tieni conto dei principi di progettazione descritti nelle linee guida per la progettazione. Ti consigliamo di utilizzare Firebase Host per eseguire il deployment della tua app web.

Con il codice HTML e JavaScript dell'app web:

Questa pagina illustra i metodi consigliati per creare la tua app web, come abilitare comunicazione tra l'azione conversazionale e l'app web, nonché linee guida generali e restrizioni.

Anche se puoi utilizzare qualsiasi metodo per creare la tua UI, Google consiglia di utilizzare le seguenti librerie:

Architettura

Google consiglia vivamente di utilizzare un'architettura delle applicazioni a pagina singola. Questo consente di ottimizzare le prestazioni e supporta un'esperienza utente positiva. Il canvas interattivo può essere utilizzato insieme al front-end come Vue, Angular e React, che aiutano la gestione degli stati.

File HTML

Il file HTML definisce l'aspetto dell'interfaccia utente. Questo file carica anche API Canvas, che consente la comunicazione tra la tua app web e l'azione conversazionale.

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>

Comunicazione tra azione conversazionale e app web

Dopo aver creato l'app web e l'azione conversazionale e aver caricato il nella raccolta Canvas nel file dell'app web, devi definire in che modo l'app web e Interazione conversazionale. Per farlo, modifica i file che contengono la tua app web logica.

action.js

Questo file contiene il codice per definire i callback e richiamare metodi con interactiveCanvas. I callback consentono al tuo sito web per rispondere a informazioni o richieste da l'azione conversazionale, mentre i metodi fornire un modo per inviare informazioni o richieste all'azione conversazionale.

Aggiungi interactiveCanvas.ready(callbacks); al file HTML per inizializzare e registra i 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

Il modulo JavaScript main.js importa i file action.js e scene.js e crea istanze di ciascuno di essi durante il caricamento dell'app web. Questo modulo registra i callback per 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

Il file scene.js crea la scena per la tua app web. Di seguito è riportato un estratto da 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;
});

Assistenza per le interazioni touch

L'azione canvas interattiva può rispondere al tocco dell'utente, i loro input vocali. In base alle linee guida di progettazione di Interactive Canvas, dovresti sviluppare l'azione in modo che sia "vocale". Detto questo, un po' i display supportano le interazioni touch.

Il tocco di supporto è simile al supporto delle risposte durante le conversazioni. ma invece di una risposta vocale da parte dell'utente, il codice JavaScript lato client per le interazioni touch e li utilizza per modificare elementi nell'app web.

Puoi trovarne un esempio nell'esempio, in cui viene utilizzato il parametro Libreria 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;
});

Risoluzione dei problemi

Puoi usare il simulatore nella console di Actions per testare la funzionalità Canvas Action durante lo sviluppo, puoi anche vedere gli errori che si verificano all'interno App web Canvas interattiva nell'app web degli utenti i dispositivi in produzione. Puoi visualizzare questi nei log di Google Cloud.

Per visualizzare questi messaggi di errore in Google Cloud Per i log della piattaforma, segui questi passaggi:

  1. Apri il progetto Actions nella console Actions.
  2. Fai clic su Test nella barra di navigazione in alto.
  3. Fai clic sul link Visualizza i log nella piattaforma Google Cloud.
di Gemini Advanced.

Errori da parte degli utenti vengono visualizzati in ordine cronologico nel visualizzatore dei log.

Tipi di errore

Nei log di Google Cloud puoi vedere tre tipi di errori delle app web:

  • Timeout che si verificano quando ready non viene chiamato entro 10 secondi
  • Timeout che si verificano quando la promessa restituita da onUpdate() non viene soddisfatta entro 10 secondi
  • Errori di runtime JavaScript che non sono rilevati nella tua app web
di Gemini Advanced.

Visualizza dettagli errore JavaScript

I dettagli degli errori di runtime JavaScript nella tua app web non sono disponibili per impostazione predefinita. Per vedere i dettagli degli errori di runtime JavaScript: questi passaggi:

  1. Assicurati di aver configurato la condivisione delle risorse tra origini appropriata (CORS) Intestazioni delle risposte HTTP nei file delle app web. Per ulteriori informazioni, vedi Condivisione delle risorse tra origini.
  2. Aggiungi crossorigin="anonymous" ai tag <script> importati in file HTML, come mostrato nello snippet di codice riportato di seguito:
<script crossorigin="anonymous" src="<SRC>"></script>

Linee guida e limitazioni

Prendi in considerazione le seguenti linee guida e limitazioni durante lo sviluppo la tua app web:

  • Nessun cookie
  • Nessuno spazio di archiviazione locale
  • Nessuna geolocalizzazione
  • Nessun utilizzo della fotocamera
  • Nessuna registrazione audio o video
  • Nessun popup
  • Rimani sotto il limite di memoria di 200 MB
  • Prendi in considerazione l'intestazione del nome dell'azione durante il rendering dei contenuti (occupa parte superiore dello schermo)
  • Nessuno stile può essere applicato ai video
  • È possibile usare un solo elemento multimediale alla volta
  • Nessun database SQL web
  • Nessun supporto per l'interfaccia SpeechRecognition dell'API Web Speech.
  • Impostazione modalità Buio non applicabile
  • La riproduzione di video è supportata sugli smart display. Per ulteriori informazioni sul codec e formati dei contenitori multimediali supportati, consulta Codec di Google Nest Hub.

Condivisione delle risorse tra origini

Poiché le app web Interactive Canvas sono ospitate in un iframe e l'origine è impostata su null, devi abilitare la condivisione delle risorse tra origini (CORS). per i server web e le risorse di archiviazione. Questa procedura consente agli asset di accettare richieste da origini nulle.

Passaggi successivi

Per aggiungere altre funzioni alla tua applicazione web, consulta la sezione Continuare a creare con il client o fulfillment lato server.