Conversational Actions will be deprecated on June 13, 2023. For more information, see Conversational Actions sunset.

Web-App konfigurieren

Eine Webanwendung ist die Benutzeroberfläche für eine Aktion, die interaktives Canvas verwendet. Sie können vorhandene Webtechnologien wie HTML, CSS, JavaScript und WebAssembly verwenden, um Ihre Webanwendung zu entwerfen und zu entwickeln. In den meisten Fällen kann Interactive Canvas Webinhalte wie einen Browser rendern, aber es gibt einige Einschränkungen, die aus Datenschutz- und Sicherheitsgründen gelten. Bevor Sie mit der Gestaltung Ihrer UI beginnen, sollten Sie die in den Designrichtlinien beschriebenen Designprinzipien berücksichtigen. Wir empfehlen Webhosting mit Firebase für die Bereitstellung Ihrer Webanwendung.

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

Auf dieser Seite werden die empfohlenen Methoden zum Erstellen Ihrer Webanwendung, die Aktivierung der Kommunikation zwischen Ihrer dialogorientierten Aktion und Ihrer Webanwendung sowie allgemeine Richtlinien und Einschränkungen erläutert.

Obwohl Sie zum Erstellen Ihrer UI eine beliebige Methode verwenden können, empfiehlt Google die Verwendung der folgenden Bibliotheken:

Architektur

Google empfiehlt dringend die Verwendung einer einseitigen Anwendungsarchitektur. Dieser Ansatz ermöglicht eine optimale Leistung und unterstützt die kontinuierliche Kommunikation mit den Nutzern. Interactive Canvas kann in Verbindung mit Front-End-Frameworks wie Vue, Angular und React verwendet werden, die bei der Verwaltung des Bundesstaats hilfreich sind.

HTML-Datei

Die HTML-Datei definiert, wie die Benutzeroberfläche aussieht. Mit dieser Datei wird auch die Interactive Canvas API geladen, die die Kommunikation zwischen Ihrer Webanwendung und Ihrer Conversational Action ermöglicht.

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>
    

Kommunikation zwischen Konversationsaktion und Web-App

Nachdem Sie Ihre Webanwendung und Conversational Action erstellt und in die interaktive Canvas-Bibliothek in Ihrer Webanwendungsdatei geladen haben, müssen Sie festlegen, wie Ihre Webanwendung und Konversationsaktion interagieren. Ändern Sie dazu die Dateien, die Ihre Webanwendungslogik enthalten.

action.js

Diese Datei enthält den Code zum Definieren von Callbacks und zum Aufrufen von Methoden über interactiveCanvas. Callbacks ermöglichen es Ihrer Webanwendung, auf Informationen oder Anfragen von der Konversationsaktion zu reagieren, während Methoden eine Möglichkeit bieten, Informationen oder Anfragen an die Unterhaltungsaktion zu senden.

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

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

Das JavaScript-Modul main.js importiert die Dateien action.js und scene.js und erstellt Instanzen dieser Dateien, wenn die Webanwendung geladen wird. In diesem Modul werden auch Callbacks für Interactive Canvas registriert.

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

Die Datei scene.js erstellt die Szene für Ihre Webanwendung. Im Folgenden finden Sie einen Auszug aus 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;
});
    

Touch-Interaktionen unterstützen

Die interaktive Canvas-Aktion kann auf Berührungen Ihrer Nutzer sowie auf ihre Spracheingaben reagieren. Gemäß den interaktiven Canvas-Designrichtlinien sollten Sie Ihre Aktion auf „Voice-First“ ausrichten. Nichtsdestotrotz unterstützen einige Smart Displays Touchinteraktionen.

Die Unterstützung von Touchpoints ähnelt der Unterstützung von dialogorientierten Antworten. Statt jedoch vom Nutzer zu singen, sucht der clientseitige JavaScript-Code nach Touch-Interaktionen und verwendet diese, um Elemente in der Webanwendung zu ändern.

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

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

Fehlerbehebung

Sie können den Simulator in der Actions Console verwenden, um die interaktive Canvas-Aktion während der Entwicklung zu testen. Es können aber auch Fehler auftreten, die in der interaktiven Canvas-Webanwendung auf den Geräten der Nutzer in der Produktion auftreten. Sie können diese Fehler in Ihren Google Cloud Platform-Logs aufrufen.

So können Sie diese Fehlermeldungen in Ihren Google Cloud Platform-Logs anzeigen lassen:

  1. Öffnen Sie Ihr Actions-Projekt in der Actions Console.
  2. Klicken Sie im oberen Navigationsbereich auf Test.
  3. Klicken Sie auf den Link Logs in der Google Cloud Platform ansehen.

Fehler auf den Geräten Ihrer Nutzer werden in der Loganzeige in chronologischer Reihenfolge angezeigt.

Fehlertypen

Es gibt drei Arten von Web-App-Fehlern, die in den Google Cloud Platform-Protokollen angezeigt werden:

  • Zeitüberschreitungen, wenn ready nicht innerhalb von 10 Sekunden aufgerufen wird
  • Zeitüberschreitungen, die auftreten, wenn das Versprechen von onUpdate() nicht innerhalb von 10 Sekunden eingehalten wird
  • JavaScript-Laufzeitfehler, die in Ihrer Webanwendung nicht erkannt werden

Details zu JavaScript-Fehlern ansehen

Die Details von JavaScript-Laufzeitfehlern in Ihrer Webanwendung sind standardmäßig nicht verfügbar. So rufen Sie Details zu JavaScript-Laufzeitfehlern auf:

  1. Prüfen Sie, ob Sie in Ihren Webanwendungsdateien die entsprechenden CORS-HTTP-Antwortheader (Cross-Origin Resource Sharing) konfiguriert haben. Weitere Informationen finden Sie unter Cross-Origin Resource Sharing.
  2. Fügen Sie crossorigin="anonymous" den importierten <script>-Tags in die HTML-Datei ein, wie im folgenden Code-Snippet gezeigt:
<script crossorigin="anonymous" src="<SRC>"></script>

Richtlinien und Einschränkungen

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

  • Keine Cookies
  • Kein lokaler Speicher
  • Keine Standortbestimmung
  • Keine Kameranutzung
  • Keine Audio- oder Videoaufnahme
  • Keine Pop-ups
  • Unter 200 MB Speicher bleiben
  • Beachte beim Rendern von Inhalten den Titel der Aktionsnamen (besetzt einen oberen Teil des Bildschirms).
  • Auf Videos können keine Stile angewendet werden
  • Es kann jeweils nur ein Medienelement verwendet werden
  • Keine Web-SQL-Datenbank
  • Keine Unterstützung für die SpeechRecognition-Schnittstelle der Web Speech API.
  • Dunkler Modus nicht anwendbar
  • Die Videowiedergabe wird auf Smart Displays unterstützt. Weitere Informationen zu den unterstützten Formaten und Codecs für Mediencontainer finden Sie unter Google Nest Hub-Codecs.

Cross-Origin Resource Sharing

Da die interaktiven Canvas-Webanwendungen in einem iFrame gehostet werden und der Ursprung auf null gesetzt ist, müssen Sie für Ihre Webserver und Speicherressourcen die Cross-Origin Resource Sharing (CORS) aktivieren. Dieser Prozess ermöglicht es Ihren Assets, Anfragen von Nullursprüngen zu akzeptieren.

Nächste Schritte

Wie Sie Ihrer Webanwendung weitere Funktionen hinzufügen, erfahren Sie unter Weiterhin mit clientseitiger oder serverseitiger Auftragsausführung erstellen.