Configurer votre application Web

Une application Web est l'interface utilisateur (UI) d'une action qui utilise Interactive Canvas. Vous pouvez utiliser les technologies Web existantes (telles que HTML, CSS, JavaScript et WebAssembly) pour concevoir et développer votre application Web. Dans la plupart des cas, Interactive Canvas permet d'afficher le contenu Web comme un navigateur, mais certaines restrictions sont appliquées afin de protéger la confidentialité et la sécurité des utilisateurs. Avant de commencer à concevoir votre interface utilisateur, 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, comment permettre la communication entre votre action conversationnelle et votre application Web, ainsi que les consignes et restrictions générales.

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

Architecture

Google vous recommande vivement d'utiliser une architecture d'application monopage. Cette approche permet des performances optimales et assure une expérience utilisateur de conversation continue. Interactive Canvas peut être utilisé avec des frameworks d'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 l'API Interactive Canvas, qui permet la communication entre votre application Web et votre action de conversation.

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>
    

Communication 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 la bibliothèque Interactive Canvas dans le fichier de votre application Web, vous devez définir l'interaction entre votre application Web et l'action conversationnelle. Pour ce faire, modifiez les fichiers contenant la logique de votre application Web.

action.js

Ce fichier contient le code permettant de définir des callbacks et d'appeler des méthodes via interactiveCanvas. Les rappels permettent à votre application Web de répondre aux informations ou aux requêtes provenant de l'action conversationnelle, tandis que les méthodes permettent d'envoyer des informations ou des requêtes à l'action conversationnelle.

Ajoutez interactiveCanvas.ready(callbacks); à votre fichier HTML pour initialiser et enregistrer des 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

Le module JavaScript main.js importe les fichiers action.js et scene.js, et crée des instances de chacun d'eux lors du chargement de l'application Web. Ce module enregistre également 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 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;
});
    

Prise en charge des interactions tactiles

Votre action Interactive Canvas peut répondre à la pression du doigt de l'utilisateur ainsi qu'à ses saisies vocales. Conformément aux consignes de conception d'Interactive Canvas, vous devez développer votre action de sorte qu'elle soit « voice-first ». Cela dit, certains écrans connectés prennent en charge les interactions tactiles.

La prise en charge du toucher 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 recherche les interactions tactiles et les utilise pour modifier les éléments de l'application Web.

Vous pouvez en voir un exemple dans l'exemple, qui utilise la bibliothèque 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

Bien que vous puissiez utiliser le simulateur dans la console Actions pour tester votre action Interactive Canvas pendant le développement, vous pouvez également voir les erreurs qui se produisent dans votre application Web Interactive Canvas sur les appareils des utilisateurs en production. Vous pouvez consulter ces erreurs dans les journaux Google Cloud Platform.

Pour afficher ces messages d'erreur dans les journaux Google Cloud Platform, procédez comme suit:

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

Les erreurs provenant des appareils de vos utilisateurs apparaissent dans l'ordre chronologique dans la visionneuse de journaux.

Types d'erreurs

Trois types d'erreurs d'application Web peuvent apparaître dans les journaux Google Cloud Platform:

  • 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 remplie dans les 10 secondes
  • Erreurs d'exécution JavaScript non 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:

  1. Assurez-vous d'avoir configuré les en-têtes de réponse HTTP CORS (Cross-Origin Resource Sharing) appropriés dans les fichiers de votre application Web. Pour en savoir plus, consultez la section Partage des ressources entre origines multiples.
  2. Ajoutez crossorigin="anonymous" aux balises <script> importées dans votre fichier 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 Web:

  • Aucun cookie
  • Pas de stockage local
  • Pas de géolocalisation
  • Aucune utilisation de l'appareil photo
  • Aucun enregistrement audio ou vidéo
  • Aucun pop-up
  • Ne dépassez pas 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 (qui occupe 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 vidéo est possible sur les écrans connectés. Pour en savoir plus sur les formats de conteneur multimédia et les codecs compatibles, consultez 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 partage des ressources entre origines multiples (CORS) pour vos serveurs Web et vos ressources de stockage. Ce processus permet à vos éléments d'accepter les requêtes provenant d'origines nulles.

Étapes suivantes

Pour ajouter des fonctionnalités à votre application Web, consultez Continuer la compilation avec le traitement côté client ou côté serveur.