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:
- Initialisez la bibliothèque JavaScript Interactive Canvas.
- Enregistrez les rappels d'événements Interactive Canvas.
- fournir une logique personnalisée pour mettre à jour votre application Web en fonction de l'état ;
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.
Bibliothèques recommandées
Bien que vous puissiez utiliser n'importe quelle méthode pour créer votre UI, Google vous recommande d'utiliser les bibliothèques suivantes:
- Greensock: pour créer des animations complexes.
- Pixi.js: pour dessiner des graphismes 2D sur WebGL.
- Three.js: pour dessiner des graphiques 3D sur WebGL.
- Dessin sur canevas HTML5: pour des dessins simples.
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:
- Ouvrez votre projet Actions dans la console Actions.
- Cliquez sur Tester dans la barre de navigation supérieure.
- 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:
- 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.
- 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.
- Si vos contenus multimédias et vos images sont hébergés avec Firebase, consultez la page Créer des liens dynamiques de domaine personnalisé pour configurer le CORS.
- Si vos contenus multimédias et vos images se trouvent sur Cloud Storage, consultez la page Configurer le partage des ressources entre origines multiples (CORS) pour le configurer.
Étapes suivantes
Pour ajouter des fonctionnalités à votre application Web, consultez Continuer la compilation avec le traitement côté client ou côté serveur.