Web-App konfigurieren

Eine Webanwendung ist die Benutzeroberfläche (UI) 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. Größtenteils sind interaktive Canvas kann Webinhalte wie ein Browser rendern. Es gibt jedoch einige Einschränkungen. um den Datenschutz und die Sicherheit für Nutzer zu gewährleisten. Bevor Sie mit dem Entwerfen der Benutzeroberfläche beginnen, Beachten Sie die in den Designrichtlinien beschriebenen Designprinzipien. Wir empfehlen die Verwendung von Firebase Hosting. um Ihre Webanwendung bereitzustellen.

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 Kommunikation zwischen Ihrer Konversationsaktion und Ihrer Webanwendung sowie allgemeine Richtlinien und Einschränkungen.

Sie können zwar jede Methode zum Erstellen Ihrer UI verwenden, Google empfiehlt jedoch die Verwendung des folgenden Bibliotheken:

Architektur

Google empfiehlt dringend die Verwendung einer Single-Page-Anwendungsarchitektur. Dieses -Ansatz sorgt für optimale Leistung und unterstützt kontinuierliche Kommunikation User Experience aus. Interactive Canvas kann in Verbindung mit Frontend verwendet werden. 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 API, die die Kommunikation zwischen Ihrer Webanwendung ermöglicht und Ihre Konversationsaktion.

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 Konversationsaktion erstellt und in den interaktiven Canvas-Bibliothek in Ihrer Web-App-Datei fest, müssen Sie festlegen, wie Ihre Webanwendung und Interaktion von Konversationsaktionen. Ändern Sie dazu die Dateien, die Ihre Webanwendung enthalten. Logik.

action.js

Diese Datei enthält den Code zum Definieren von Callbacks und zum Aufrufen von Methoden bis interactiveCanvas. Rückrufe ermöglichen es Ihrem Web, App verwendet, um auf Informationen oder Anfragen von der Conversational Action zu reagieren, während Methoden ermöglichen, Informationen oder Anfragen an die Konversationsaktion zu senden.

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

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 sowie erstellt beim Laden der Webanwendung Instanzen von jedem dieser Elemente. In diesem Modul registriert Callbacks für Interactive Canvas.

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

Ihre interaktive Canvas-Aktion kann sowohl auf die Berührung als auch auf die ihre gesprochenen Inhalte. Gemäß den Designrichtlinien für interaktiven Canvas sollten Sie Ihre Aktion sprachorientiert entwickeln. Einige intelligente Funktionen 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:

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

In der Actions Console können Sie mit dem Simulator Ihre interaktiven Canvas-Aktion während der Entwicklung können Sie auch Fehler sehen, die in Ihrem Interaktive Canvas-Web-App auf der Geräte in der Produktion. Sie können diese Fehler in Ihren Google Cloud Platform-Logs.

So rufen Sie diese Fehlermeldungen in Google Cloud auf: für Plattformlogs gehen Sie so vor:

  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 Nutzern Geräte in der Loganzeige in chronologischer Reihenfolge.

Fehlertypen

In den Google Cloud Platform-Protokollen können Sie drei Arten von Webanwendungsfehlern sehen:

  • 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 erfüllt wird innerhalb von 10 Sekunden
  • JavaScript-Laufzeitfehler, die von Ihrer Webanwendung nicht abgefangen werden

Details zu JavaScript-Fehlern ansehen

Die Details zu JavaScript-Laufzeitfehlern in Ihrer Webanwendung sind nicht standardmäßig verfügbar. Ausführliche Informationen zu JavaScript-Laufzeitfehlern finden Sie unter diese Schritte:

  1. Achten Sie darauf, dass Sie die entsprechende Cross-Origin Resource Sharing-Konfiguration konfiguriert haben HTTP-Antwortheader (CORS) in den Dateien Ihrer Webanwendung. Weitere Informationen Siehe Cross-Origin Resource Sharing.
  2. Fügen Sie den importierten <script>-Tags crossorigin="anonymous" hinzu in Ihrem HTML-Datei, wie im folgenden Code-Snippet gezeigt:
<script crossorigin="anonymous" src="<SRC>"></script>

Richtlinien und Einschränkungen

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

  • Keine Cookies
  • Kein lokaler Speicher
  • Keine Standortbestimmung
  • Keine Kameranutzung
  • Keine Audio- oder Videoaufzeichnung
  • Keine Pop-ups
  • Das Arbeitsspeicherlimit von 200 MB nicht überschreiten
  • Berücksichtigen Sie beim Rendern von Inhalten den Header „Aktionsname“ (Belegung oberer Teil des Bildschirms)
  • Auf Videos können keine Stile angewendet werden
  • Es darf jeweils nur ein Medienelement verwendet werden
  • Keine Web SQL-Datenbank
  • Die SpeechRecognition-Schnittstelle der Web Speech API wird nicht unterstützt.
  • Einstellung für dunklen Modus nicht zutreffend
  • Die Videowiedergabe wird auf Smart Displays unterstützt. Weitere Informationen zur Unterstützte Mediencontainerformate und -Codecs finden Sie unter Google Nest Hub-Codecs.

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 akzeptieren.

Nächste Schritte

Informationen zum Hinzufügen weiterer Funktionen zu Ihrer Webanwendung finden Sie unter Mit dem Kunden oder serverseitige Auftragsausführung.