Créer votre application Web (Dialogflow)

Une application Web est l'interface utilisateur d'une action qui utilise Interactive Canvas. Vous pouvez utiliser technologies Web existantes (HTML, CSS et JavaScript) pour concevoir et développer votre application Web. Dans la plupart des cas, Interactive Canvas permet d'afficher du contenu Web un navigateur, mais certaines restrictions s'appliquent la confidentialité et la sécurité des utilisateurs. Avant de commencer à concevoir votre interface utilisateur, tenez compte des principes de conception décrits dans le Design guidelines .

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

  • Enregistrez des rappels d'événements Interactive Canvas.
  • Initialisez la bibliothèque JavaScript d'Interactive Canvas.
  • Fournissez 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 et les activer la communication entre votre application Web et le traitement, les consignes générales et de restrictions.

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

Architecture

Google recommande vivement d'utiliser une architecture d'application monopage. Cette approche permet d'obtenir des performances optimales, expérience utilisateur conversationnelle. Interactive Canvas peut être utilisé avec des frameworks front-end 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 Bibliothèque JavaScript Canvas, qui permet de communiquer entre votre application Web et votre action de conversation.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Immersive 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/df-asdk/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/main.js"></script>
    <script src="js/log.js"></script>
  </body>
</html>

Communication entre le traitement et l'application Web

Maintenant que vous avez créé votre application Web et votre traitement, et que vous avez chargé le fichier bibliothèque Dessin d'application Web, vous devez définir la manière dont votre application Web et votre traitement interagissent. À modifiez les fichiers contenant la logique de votre application Web.

action.js

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

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

//action.js
class Action {
  constructor(scene) {
    this.canvas = window.interactiveCanvas;
    this.scene = scene;
    const that = this;
    this.commands = {
      TINT: function(data) {
        that.scene.sprite.tint = data.tint;
      },
      SPIN: function(data) {
        that.scene.sprite.spin = data.spin;
      },
      RESTART_GAME: function(data) {
        that.scene.button.texture = that.scene.button.textureButton;
        that.scene.sprite.spin = true;
        that.scene.sprite.tint = 0x0000FF; // blue
        that.scene.sprite.rotation = 0;
      },
    };
  }

  /**
   * Register all callbacks used by Interactive Canvas
   * executed during scene creation time.
   *
   */
  setCallbacks() {
    const that = this;
    // declare interactive canvas callbacks
    const callbacks = {
      onUpdate(data) {
        try {
          that.commands[data.command.toUpperCase()](data);
        } catch (e) {
          // do nothing, when no command is sent or found
        }
      },
    };
    // called by the Interactive Canvas web app once web app has loaded to
    // register callbacks
    this.canvas.ready(callbacks);
  }
}

main.js

Ce fichier construit la scène pour votre application Web. Dans cet exemple, il gère également les cas de réussite et d'échec de la promesse sont renvoyés avec sendTextQuery(). La Voici un extrait de main.js:

// main.js
const view = document.getElementById('view');
// initialize rendering and set correct sizing
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
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 Les écrans 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:

...
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;
});
...

Dans ce cas, la valeur de la variable spin est envoyée via la interactiveCanvas en tant que rappel update. Le fulfillment a une logique qui déclenche un intent basé sur la valeur de spin.

...
app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});
...

Ajouter des fonctionnalités supplémentaires

Maintenant que vous connaissez les principes de base, vous pouvez améliorer et personnaliser votre action avec des API spécifiques à Canvas. Cette section explique comment implémenter ces API dans votre action Interactive Canvas.

sendTextQuery()

La méthode sendTextQuery() envoie des requêtes textuelles à l'action de conversation. pour appeler un intent de manière programmatique. Cet exemple utilise sendTextQuery() pour redémarrer le jeu de rotation triangulaire lorsque l'utilisateur clique sur un bouton. Lorsque l'utilisateur clique sur "Redémarrer le jeu", bouton, sendTextQuery() appelle Restart game et renvoie une promesse. Cette promesse génère SUCCESS si l'intent est déclenché, et BLOCKED dans le cas contraire. L'extrait de code suivant déclenche l'intent et gère les cas de réussite ou d'échec de la promesse:

//main.js
...
that.action.canvas.sendTextQuery('Restart game')
    .then((res) => {
      if (res.toUpperCase() === 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        that.button.texture = that.button.textureButtonDisabled;
        that.sprite.spin = false;
      } else {
        console.log(`Request in flight: ${res}`);
      }
    });
...

Si la promesse renvoie SUCCESS, l'intent Restart game envoie une HtmlResponse à votre application Web:

//index.js
...
app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
...

Ce HtmlResponse déclenche le rappel onUpdate(), qui exécute le code dans l'extrait de code RESTART_GAME ci-dessous:

//action.js
...
RESTART_GAME: function(data) {
  that.scene.button.texture = that.scene.button.textureButton;
  that.scene.sprite.spin = true;
  that.scene.sprite.tint = 0x0000FF; // blue
  that.scene.sprite.rotation = 0;
},
...

OnTtsMark()

Le rappel OnTtsMark() est appelé lorsque vous incluez une balise <mark> avec un nom unique dans votre réponse SSML à l'utilisateur. Dans les extraits suivants de l'exemple Snowman, OnTtsMark() synchronise l'animation de l'application Web avec la synthèse vocale correspondante. de sortie. Lorsque l'action dit à l'utilisateur Désolé, vous avez perdu, l'application Web épelle le mot correct et affiche les lettres à l'utilisateur.

L'intent Game Over Reveal Word inclut une marque personnalisée dans la réponse à la lorsqu'il a perdu la partie:

//index.js
...
app.intent('Game Over Reveal Word', (conv, {word}) => {
  conv.ask(`<speak>Sorry, you lost.<mark name="REVEAL_WORD"/> The word is ${word}.` +
    `${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
  conv.ask(new HtmlResponse());
});
...

L'extrait de code suivant enregistre ensuite le rappel OnTtsMark(), vérifie le nom de la marque et exécute la fonction revealCorrectWord(), qui met à jour l'application Web:

//action.js
...
setCallbacks() {
  const that = this;
  // declare assistant canvas action callbacks
  const callbacks = {
    onTtsMark(markName) {
      if (markName === 'REVEAL_WORD') {
        // display the correct word to the user
        that.revealCorrectWord();
      }
    },
...

Restrictions

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

  • Aucun cookie
  • Pas de stockage local
  • Aucune géolocalisation
  • Aucune utilisation de l'appareil photo
  • Aucune fenêtre pop-up
  • Restez en dessous de la limite de mémoire de 200 Mo
  • L'en-tête tiers 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
  • Pas de vidéo HLS
  • Aucune base de données Web SQL
  • L'interface SpeechRecognition de la classe n'est pas compatible. API Web Speech :
  • Pas d'enregistrement audio ou vidéo
  • Paramètre mode sombre non applicable

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. Vos composants pourront ainsi accepter les requêtes provenant d'origines nulles.