Webanwendung erstellen (Dialogflow)

Eine Webanwendung ist die Benutzeroberfläche für eine Aktion, die den interaktiven Canvas verwendet. Sie können vorhandene Webtechnologien (HTML, CSS und JavaScript) nutzen, um Ihrer Webanwendung. Interactive Canvas kann meistens Webinhalte wie Browser. Es gibt jedoch einige Einschränkungen für für den Schutz und die Sicherheit der Nutzer. Bevor Sie mit dem Entwerfen Ihrer UI beginnen, überlegen Sie, welche Designprinzipien in den Design guidelines .

Der HTML- und JavaScript-Code für Ihre Webanwendung führt folgende Schritte aus:

  • Registrieren Sie Callbacks für Interactive Canvas-Ereignisse.
  • Initialisieren Sie die JavaScript-Bibliothek für Interactive Canvas.
  • Stellen Sie eine benutzerdefinierte Logik für die Aktualisierung Ihrer Webanwendung basierend auf dem Status bereit.

Auf dieser Seite werden die empfohlenen Methoden zum Erstellen Ihrer Webanwendung, die Aktivierung Kommunikation zwischen Ihrer Webanwendung und der Auftragsausführung sowie allgemeine Richtlinien und Einschränkungen.

Sie können zwar jede Methode zum Erstellen Ihrer UI verwenden, Google empfiehlt jedoch Folgendes: Bibliotheken:

Architektur

Google empfiehlt dringend die Verwendung einer Single-Page-Anwendungsarchitektur. Dieser Ansatz ermöglicht eine optimale Leistung und unterstützt kontinuierliche Dialogorientierter User Experience. Interactive Canvas kann in Verbindung mit Frontend-Frameworks wie Vue Angular und React die beim Staatsmanagement helfen.

HTML-Datei

Die HTML-Datei definiert, wie Ihre Benutzeroberfläche aussieht. Mit dieser Datei wird auch die interaktive Canvas-JavaScript-Bibliothek für die Kommunikation zwischen Ihrer Webanwendung und Ihrer Conversational Action.

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

Zwischen Auftragsausführung und Web-App kommunizieren

Nachdem Sie nun Ihre Webanwendung und die Auftragsausführung erstellt und in den interaktiven Canvas-Bibliothek in Ihrem Web-App-Datei definieren, müssen Sie festlegen, wie die Web-App und die Auftragsausführung interagieren. Bis ändern Sie die Dateien, die die Logik Ihrer Webanwendung enthalten.

action.js

Diese Datei enthält den Code, Callbacks und Methoden aufrufen bis interactiveCanvas. Mit Callbacks kann Ihre Webanwendung auf Informationen oder Anfragen von der Konversationsaktion, während Methoden bieten eine Möglichkeit, Informationen oder Anfragen an die Unterhaltungsaktion zu senden.

Fügen Sie interactiveCanvas.ready(callbacks); zu Ihrer HTML-Datei hinzu, um sie zu initialisieren und Registrieren Sie Callbacks:

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

Diese Datei erstellt die Szene für Ihre Webanwendung. In diesem Beispiel verarbeitet sie auch Die Erfolgs- und Fehlerfälle des Versprechens, das mit sendTextQuery() zurückgegeben wurde. Die Hier ist ein Auszug aus 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;
});

Touch-Interaktionen unterstützen

Ihre interaktive Canvas-Aktion kann sowohl auf die Berührung als auch auf die ihre gesprochenen Inhalte. Gemäß der Designrichtlinien für den interaktiven Canvas sollten Sie Ihre Aktion sprachorientiert entwickeln. Einige intelligente Funktionen Bildschirme unterstützen Touch-Interaktionen.

Der unterstützende Touch ist ähnlich wie die Unterstützung dialogorientierter Antworten. Allerdings statt einer Sprachantwort des Nutzers, sieht das clientseitige für Touch-Interaktionen und verwendet diese, um Elemente in der Web-App zu ändern.

Ein Beispiel hierfür finden Sie im Beispiel. Pixi.js-Bibliothek:

...
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 diesem Fall wird der Wert der Variablen spin über die interactiveCanvas API als update-Callback. Die Auftragsausführung ist logisch. das einen Intent basierend auf dem Wert von spin auslöst.

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

Weitere Funktionen hinzufügen

Nachdem du jetzt mit den Grundlagen vertraut bist, kannst du deine Aktion mit Canvas-spezifischen APIs. In diesem Abschnitt wird erläutert, wie diese APIs implementiert werden. in Ihrer Interactive Canvas Action.

sendTextQuery()

Die Methode sendTextQuery() sendet Textabfragen an die Unterhaltungsaktion um einen Intent programmatisch aufzurufen. In diesem Beispiel wird sendTextQuery() verwendet, um das sich drehende Dreieck neu startet, wenn der Nutzer auf eine Schaltfläche klickt. Wenn Nutzende auf die Schaltfläche „Spiel neu starten“ Schaltfläche ruft sendTextQuery() die Restart game auf Intent und gibt ein Promise zurück. Dieses Promise führt zu SUCCESS, wenn der Intent ausgelöst und BLOCKED, wenn dies nicht der Fall ist. Das folgende Snippet löst den Intent aus und kümmert sich um die Erfolgs- und Fehlerfälle des Versprechens:

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

Wenn das Versprechen zu SUCCESS führt, sendet der Intent Restart game eine HtmlResponse. zu Ihrer Webanwendung:

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

Diese HtmlResponse löst den onUpdate()-Callback aus, der den Code ausführt im Code-Snippet RESTART_GAME:

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

Der OnTtsMark()-Callback wird aufgerufen, wenn du ein <mark>-Tag mit einem eindeutigen Namen in Ihrer SSML-Antwort an den Nutzer. In den folgenden Auszügen aus dem Snowman-Beispiel OnTtsMark() synchronisiert die Animation der Web-App mit der entsprechenden Text-in-Sprache. . Wenn die Aktion Du hast dich leider verloren an den Nutzer gesagt hat, schreibt die Web-App das richtige Wort ermittelt und den Nutzenden die Buchstaben angezeigt.

Der Intent Game Over Reveal Word enthält eine benutzerdefinierte Markierung in der Antwort auf den wenn der Nutzer das Spiel verloren hat:

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

Das folgende Code-Snippet registriert dann den OnTtsMark()-Callback und prüft den Namen der Markierung und führt die Funktion revealCorrectWord() aus, die die Web-App aktualisiert:

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

Einschränkungen

Berücksichtigen Sie bei der Entwicklung Ihrer Webanwendung die folgenden Einschränkungen:

  • Keine Cookies
  • Kein lokaler Speicher
  • Keine Standortbestimmung
  • Keine Kameranutzung
  • Keine Pop-ups
  • Unter dem Speicherlimit von 200 MB bleiben
  • Der Drittanbieter-Header nimmt den oberen Teil des Bildschirms ein
  • Auf Videos können keine Stile angewendet werden
  • Es darf jeweils nur ein Medienelement verwendet werden
  • Kein HLS-Video
  • Keine Web SQL-Datenbank
  • Keine Unterstützung für die SpeechRecognition-Schnittstelle des Web Speech API
  • Keine Audio- oder Videoaufzeichnung
  • Einstellung für dunklen Modus nicht zutreffend

Cross-Origin Resource Sharing

Weil Interactive Canvas-Web-Apps in einem iFrame gehostet werden und der Ursprung festgelegt ist auf null setzen, müssen Sie Cross-Origin Resource Sharing (CORS) aktivieren. für Ihre Webserver und Speicherressourcen. So können Ihre Assets Anfragen von Null-Ursprüngen.