Web-App konfigurieren

Eine Webanwendung ist die Benutzeroberfläche für eine Aktion, die den interaktiven Canvas verwendet. Sie können vorhandene Webtechnologien wie HTML, CSS, JavaScript und WebAssembly zum Entwerfen und Entwickeln Ihrer Webanwendung verwenden. Mit Interactive Canvas lassen sich Webinhalte in den meisten Fällen wie ein Browser rendern, allerdings gelten für den Datenschutz und die Sicherheit einige Einschränkungen. Bevor Sie mit dem Entwerfen Ihrer UI beginnen, sollten Sie sich die in den Designrichtlinien beschriebenen Designprinzipien ansehen. Wir empfehlen Firebase Hosting zur Bereitstellung Ihrer Webanwendung.

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

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

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

Architektur

Google empfiehlt dringend, eine Single-Page-Anwendungsarchitektur zu verwenden. Dieser Ansatz ermöglicht eine optimale Leistung und unterstützt eine kontinuierliche Unterhaltung. Interactive Canvas kann in Verbindung mit Front-End-Frameworks wie Vue, Angular und React verwendet werden, die die Statusverwaltung erleichtern.

HTML-Datei

Die HTML-Datei definiert, wie Ihre Benutzeroberfläche aussieht. Diese Datei lädt auch die Interactive Canvas API, die die Kommunikation zwischen Ihrer Webanwendung und der Konversationsaktion 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 Webanwendung

Nachdem Sie die Webanwendung und die Konversationsaktion erstellt und in der interaktiven Canvas-Bibliothek in die Webanwendungsdatei geladen haben, müssen Sie festlegen, wie die Webanwendung und die 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 antworten. Methoden bieten eine Möglichkeit, Informationen oder Anfragen an die Konversationsaktion 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. Mit 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. Das Folgende ist ein 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 Interactive Canvas Action kann sowohl auf Berührungen als auch auf Gesangseingaben des Nutzers reagieren. Gemäß den Designrichtlinien für Interactive Canvas solltest du deine Aktion so programmieren, dass sie sprachorientiert ist. Einige intelligente Displays unterstützen Touch-Interaktionen.

Eine unterstützende Berührung ist mit der Unterstützung von Konversationsantworten vergleichbar. Statt einer gesprochenen Antwort des Nutzers sucht Ihr clientseitiges JavaScript jedoch nach Touch-Interaktionen und verwendet diese, um Elemente in der Webanwendung zu ändern.

Ein Beispiel dafür finden Sie im Beispiel, in dem die Pixi.js verwendet wird:

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 Ihre interaktive Canvas-Aktion während der Entwicklung zu testen. Sie können aber auch Fehler sehen, die in Ihrer interaktiven Canvas-Webanwendung auf den Geräten der Nutzer in der Produktion auftreten. Sie können diese Fehler in Ihren Google Cloud Platform-Logs einsehen.

Gehen Sie wie folgt vor, um diese Fehlermeldungen in Ihren Google Cloud Platform-Protokollen anzuzeigen:

  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 Google Cloud Platform ansehen.

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

Fehlertypen

Es gibt drei Arten von Fehlern für Webanwendungen, die in den Google Cloud Platform-Protokollen angezeigt werden:

  • Zeitüberschreitungen, die auftreten, wenn ready nicht innerhalb von 10 Sekunden aufgerufen wird
  • Zeitüberschreitungen, die auftreten, wenn das von onUpdate() zurückgegebene Versprechen nicht innerhalb von 10 Sekunden erfüllt wird
  • JavaScript-Laufzeitfehler, die nicht von Ihrer Webanwendung erfasst werden

Details zu JavaScript-Fehlern ansehen

Die Details zu 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 die entsprechenden CORS-HTTP-Antwortheader (Cross-Origin Resource Sharing) in Ihren Web-App-Dateien konfiguriert haben. Weitere Informationen findest du unter Cross-Origin Resource Sharing.
  2. Fügen Sie den importierten <script>-Tags in der HTML-Datei crossorigin="anonymous" hinzu, wie im folgenden Code-Snippet gezeigt:
<script crossorigin="anonymous" src="<SRC>"></script>

Richtlinien und Einschränkungen

Beachten Sie bei der Entwicklung Ihrer Webanwendung die folgenden Richtlinien und Einschränkungen:

  • Keine Cookies
  • Kein lokaler Speicher
  • Keine Standortbestimmung
  • Keine Kameranutzung
  • Keine Audio- oder Videoaufzeichnung
  • Keine Pop-ups
  • Das Arbeitsspeicherlimit von 200 MB nicht überschreiten
  • Beim Rendern von Inhalten den Header „Aktionsname“ berücksichtigen (besetzt den 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 Mediencontainerformaten und -Codecs finden Sie unter Google Nest Hub-Codecs.

Cross-Origin Resource Sharing

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

Nächste Schritte

Informationen zum Hinzufügen weiterer Features zu Ihrer Webanwendung finden Sie unter Weiter mit der clientseitigen oder serverseitigen Auftragsausführung erstellen.