Configurer votre application Web

Une application Web est l'interface utilisateur d'une action qui utilise Interactive Canvas. Vous pouvez utiliser les technologies Web existantes (HTML, CSS, JavaScript et WebAssembly) pour concevoir et développer votre application Web. Dans la plupart des cas, les interactions interactives Le canevas peut afficher du contenu Web comme dans un navigateur, mais il y a quelques restrictions pour protéger la confidentialité et la sécurité des utilisateurs. Avant de commencer à concevoir votre UI, tenez compte des principes de conception décrits dans les consignes de conception. Nous vous recommandons d'utiliser Firebase Hosting. pour déployer votre application Web.

Le code HTML et JavaScript de votre application Web effectue les opérations suivantes:

Cette page présente les méthodes recommandées pour créer votre application Web et les activer la communication entre votre action conversationnelle et votre application Web, et les consignes générales et des restrictions.

Bien que vous puissiez utiliser n'importe quelle méthode pour créer votre interface utilisateur, Google vous recommande d'utiliser les bibliothèques suivantes:

Architecture

Google recommande vivement d'utiliser une architecture d'application monopage. Ce permet d'obtenir des performances optimales et de dialoguer en continu l'expérience utilisateur. Interactive Canvas peut être utilisé avec une interface tels que Vue, Angular et React, qui facilitent la gestion des états.

Fichier HTML

Le fichier HTML définit l'apparence de votre interface utilisateur. Ce fichier charge également le fichier L'API Canvas, qui permet la communication entre votre application Web et votre action conversationnelle.

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>

Communiquer entre l'action conversationnelle et l'application Web

Une fois que vous avez créé votre application Web et votre action conversationnelle, et que vous les avez chargées dans l'environnement dans le fichier de votre application Web, vous devez définir la façon dont votre application Les actions conversationnelles interagissent. Pour ce faire, modifiez les fichiers contenant votre application Web logique.

action.js

Ce fichier contient le code permettant de définir les rappels et d'appeler méthodes à interactiveCanvas. Les rappels permettent à votre navigateur application pour répondre à des informations ou à des demandes de l'action conversationnelle, tandis que les méthodes fournir un moyen d'envoyer des informations ou des demandes à l'action conversationnelle.

Ajoutez interactiveCanvas.ready(callbacks); à votre fichier HTML pour initialiser et enregistrer des rappels:

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

Le module JavaScript main.js importe les fichiers action.js et scene.js, puis crée des instances de chacun d'entre eux lorsque l'application Web se charge. Ce module vous permet également enregistre des rappels pour 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

Le fichier scene.js construit la scène pour votre application Web. Voici un exemple extrait de 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;
});

Prendre en charge les interactions tactiles

Votre action Interactive Canvas peut réagir à la pression de l'utilisateur, leurs entrées vocales. Conformément aux Consignes de conception d'Interactive Canvas, vous devez donner la priorité à votre action. Cela dit, certaines stratégies sont compatibles avec les interactions tactiles.

L'assistance tactile est semblable à la prise en charge des réponses conversationnelles. Toutefois, au lieu d'une réponse vocale de l'utilisateur, votre code JavaScript côté client pour les interactions tactiles et les utilise pour modifier des éléments dans l'application Web.

Vous trouverez un exemple dans l'exemple, qui utilise la 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;
});

Dépannage

Vous pouvez utiliser le simulateur dans la console Actions pour tester votre l'action de canevas pendant le développement, vous pouvez aussi voir les erreurs qui se produisent dans Application Web Interactive Canvas pour les utilisateurs appareils en production. Vous pouvez consulter ces dans vos journaux Google Cloud Platform.

Pour afficher ces messages d'erreur dans votre Procédez comme suit:

  1. Ouvrez votre projet Actions dans la console Actions.
  2. Cliquez sur Test dans la barre de navigation supérieure.
  3. Cliquez sur le lien Afficher les journaux dans Google Cloud Platform.

Erreurs provenant de vos utilisateurs les appareils s'affichent dans l'ordre chronologique dans la visionneuse de journaux.

Types d'erreurs

Les journaux Google Cloud Platform peuvent contenir trois types d'erreurs d'application Web:

  • Expirations de délai qui se produisent lorsque ready n'est pas appelé dans les 10 secondes
  • Expirations de délai qui se produisent lorsque la promesse renvoyée par onUpdate() n'est pas satisfaite dans les 10 secondes
  • Erreurs d'exécution JavaScript qui ne sont pas détectées dans votre application Web

Afficher les détails de l'erreur JavaScript

Les détails des erreurs d'exécution JavaScript dans votre application Web ne sont pas disponibles par défaut. Pour afficher les détails des erreurs d'exécution JavaScript, procédez comme suit : procédez comme suit:

  1. Assurez-vous d'avoir configuré le partage des ressources entre origines multiples approprié (CORS) dans les fichiers de votre application Web. Pour plus d'informations, consultez la section Cross-Origin Resource Sharing.
  2. Ajoutez crossorigin="anonymous" aux balises <script> importées dans votre HTML, comme indiqué dans l'extrait de code suivant:
<script crossorigin="anonymous" src="<SRC>"></script>

Consignes et restrictions

Tenez compte des consignes et restrictions suivantes lorsque vous développez votre application votre application Web:

  • Aucun cookie
  • Pas de stockage local
  • Aucune géolocalisation
  • Aucune utilisation de l'appareil photo
  • Pas d'enregistrement audio ou vidéo
  • Aucune fenêtre pop-up
  • Restez en dessous de la limite de mémoire de 200 Mo
  • Tenez compte de l'en-tête du nom de l'action lors de l'affichage du contenu (occupations la partie supérieure de l'écran)
  • Aucun style ne peut être appliqué aux vidéos
  • Vous ne pouvez utiliser qu'un seul élément multimédia à la fois
  • Aucune base de données Web SQL
  • L'interface SpeechRecognition de l'API Web Speech n'est pas compatible.
  • Paramètre mode sombre non applicable
  • La lecture de vidéos est possible sur les écrans connectés. Pour en savoir plus sur les formats et codecs de conteneurs multimédias compatibles, consultez la page Codecs Google Nest Hub.

Partage des ressources entre origines multiples (CORS)

Étant donné que les applications Web Interactive Canvas sont hébergées dans un iFrame et que l'origine est définie sur "null", vous devez activer le Cross-Origin Resource Sharing (CORS) pour vos serveurs Web et vos ressources de stockage. Ce processus permet à vos composants pour accepter les requêtes provenant d'origines nulles.

Étapes suivantes

Pour ajouter d'autres fonctionnalités à votre application Web, consultez la section Continuer à créer avec un client ou fulfillment côté serveur.