Creare un'app web (Dialogflow)

Un'app web è l'interfaccia utente di un'azione che utilizza il canvas interattivo. Puoi utilizzare tecnologie web esistenti (HTML, CSS e JavaScript) per progettare e sviluppare la tua app web. Interactive Canvas è in grado di eseguire il rendering di contenuti web come un browser, ma esistono alcune limitazioni applicate la privacy e la sicurezza degli utenti. Prima di iniziare a progettare la tua UI, considera la di progettazione descritti in Design guidelines .

Con il codice HTML e JavaScript dell'app web:

  • Registrare i callback degli eventi Interactive Canvas.
  • Inizializza la libreria JavaScript di Interactive Canvas.
  • Fornisci una logica personalizzata per aggiornare l'app web in base allo stato.

Questa pagina illustra i metodi consigliati per creare la tua app web, come abilitare comunicazione tra la tua applicazione web e la distribuzione, nonché le linee guida generali e limitazioni.

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

Architettura

Google consiglia vivamente di utilizzare un'architettura delle applicazioni a pagina singola. Questo approccio garantisce prestazioni ottimali e supporta un'esperienza utente conversazionale. Interactive Canvas può essere utilizzato insieme a framework 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 Libreria JavaScript Canvas, che consente la comunicazione. tra la tua app web e la tua Azione conversazionale.

<!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>

Comunica tra distribuzione e app web

Ora che hai creato la tua applicazione web ed eseguito il fulfillment e caricato lo spazio Nella raccolta di Canvas devi definire la modalità di interazione tra app web e fulfillment. A modifica i file che contengono la logica dell'app web.

action.js

Questo file contiene il codice per definire callback e richiamare i metodi al interactiveCanvas. I callback consentono alla tua app web di rispondere 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:

//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

Questo file crea la scena per la tua app web. In questo esempio, gestisce anche i casi di successo e fallimento della promessa sono stati restituiti con sendTextQuery(). La che segue è un estratto da 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;
});

Assistenza per le interazioni touch

L'azione canvas interattiva può rispondere al tocco dell'utente, i loro input vocali. In base alle linee guida per la progettazione di Interactive Canvas dovresti sviluppare l'azione in modo che sia "vocale". Detto questo, un po' di Smart 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:

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

In questo caso, il valore della variabile spin viene inviato tramite API interactiveCanvas come callback update. L'evasione degli ordini ha una logica che attiva un intent in base al valore spin.

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

Aggiungi altre funzionalità

Ora che hai appreso le nozioni di base, puoi migliorare e personalizzare l'Azione con le API specifiche per Canvas. Questa sezione spiega come implementare queste API nell'azione Canvas interattiva.

sendTextQuery()

Il metodo sendTextQuery() invia query di testo all'azione conversazionale per richiamare un intent in modo programmatico. Questo esempio utilizza sendTextQuery() per riavvia il gioco triangolare quando l'utente fa clic su un pulsante. Quando l'utente fa clic su "Riavvia il gioco" pulsante, sendTextQuery() chiama Restart game e restituisce una promessa. Questa promessa genera SUCCESS se l'intento è e BLOCKED se non lo è. Il seguente snippet attiva l'intent e gestisce i casi di successo e fallimento della promessa:

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

Se la promessa genera SUCCESS, l'intent Restart game invia un HtmlResponse alla tua applicazione web:

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

Questo HtmlResponse attiva il callback onUpdate(), che esegue il codice nello snippet di codice RESTART_GAME riportato di seguito:

//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()

Il callback OnTtsMark() viene chiamato quando includi un tag <mark> con un nome univoco in la tua risposta SSML all'utente. Nei seguenti estratti dell'esempio di pupazzo di neve, OnTtsMark() sincronizza l'animazione dell'app web con la sintesi vocale corrispondente come output. Quando l'azione dice all'utente Spiacenti, hai perso, l'app web pronuncia la frase la parola corretta e le lettere vengono mostrate all'utente.

L'intent Game Over Reveal Word include un contrassegno personalizzato nella risposta all'elemento all'utente quando ha perso la partita:

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

Il seguente snippet di codice registra quindi il callback OnTtsMark(), controlla il nome del contrassegno ed esegue la funzione revealCorrectWord(), che aggiorna l'app 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();
      }
    },
...

Restrizioni

Tieni in considerazione le seguenti limitazioni durante lo sviluppo della tua app web:

  • Nessun cookie
  • Nessuno spazio di archiviazione locale
  • Nessuna geolocalizzazione
  • Nessun utilizzo della fotocamera
  • Nessun popup
  • Rimani sotto il limite di memoria di 200 MB
  • L'intestazione di terze parti occupa la parte superiore dello schermo
  • Nessuno stile può essere applicato ai video
  • È possibile usare un solo elemento multimediale alla volta
  • Nessun video HLS
  • Nessun database SQL web
  • Nessun supporto per l'interfaccia SpeechRecognition dell'app API Web Speech.
  • Nessuna registrazione audio o video
  • Impostazione modalità Buio non applicabile
di Gemini Advanced.

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. In questo modo, i tuoi asset da origini nulle.