Konversationsaktionen werden am 13. Juni 2023 eingestellt. Weitere Informationen finden Sie unter Einstellung von Konversationsaktionen.

Interaktives Canvas

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Abbildung 1. Ein interaktives Spiel, das mit Interactive Canvas entwickelt wurde

Interactive Canvas ist ein Framework, das auf Google Assistant basiert und Entwicklern ermöglicht, dialogorientierte Aktionen mit visuellen, immersiven Erlebnissen zu ergänzen. Dieses visuelle Erlebnis ist eine interaktive Webanwendung, die Assistant als Antwort an den Nutzer in der Unterhaltung sendet. Im Gegensatz zu Rich-Antworten, die in einer Assistant-Unterhaltung inline angezeigt werden, wird die interaktive Canvas-Webanwendung als Vollbild-Webansicht gerendert.

Mit dem interaktiven Canvas können Sie folgende Aktionen in Ihrer Aktion ausführen:

  • Vollbildbilder erstellen
  • Benutzerdefinierte Animationen und Übergänge erstellen
  • Datenvisualisierung
  • Benutzerdefinierte Layouts und GUIs erstellen

Unterstützte Geräte

Interactive Canvas ist derzeit auf den folgenden Geräten verfügbar:

  • Smart Displays
  • Android-Mobilgeräte

Funktionsweise

Eine Aktion, die interaktives Canvas verwendet, besteht aus zwei Hauptkomponenten:

  • Unterhaltungsaktion: Eine Aktion, die eine dialogorientierte Schnittstelle verwendet, um Nutzeranfragen zu erfüllen. Zum Erstellen einer Unterhaltung können Sie entweder Actions Builder oder das Actions SDK verwenden.
  • Webanwendung: Eine Front-End-Webanwendung mit benutzerdefinierten Bildern, die Ihre Aktion als Antwort an Nutzer während einer Unterhaltung sendet. Sie erstellen die Webanwendung mit Webtechnologien wie HTML, JavaScript und CSS.

Nutzer, die mit einer interaktiven Canvas-Aktion interagieren, führen eine Unterhaltung mit Google Assistant, um ihr Ziel zu erreichen. Der Großteil dieser Unterhaltung findet jedoch im Kontext Ihrer Webanwendung statt. Wenn Sie Ihre Conversational Action mit Ihrer Webanwendung verbinden, müssen Sie die Interactive Canvas API in den Code Ihrer Webanwendung aufnehmen.

  • Interaktive Canvas-Bibliothek:Eine JavaScript-Bibliothek, die Sie in die Webanwendung aufnehmen, um die Kommunikation zwischen der Webanwendung und der Conversational Action mithilfe einer API zu ermöglichen. Weitere Informationen finden Sie in der Dokumentation zur Interactive Canvas API.

Zusätzlich zur Einbindung der Interactive Canvas-Bibliothek müssen Sie den Antworttyp Canvas in Ihrer Unterhaltung zurückgeben, um Ihre Webanwendung auf dem Gerät des Nutzers zu öffnen. Sie können auch eine Canvas-Antwort verwenden, um Ihre Webanwendung anhand der Eingabe des Nutzers zu aktualisieren.

  • Canvas:Eine Antwort, die eine URL der Webanwendung und die zugehörigen Daten enthält. Actions Builder kann die Canvas-Antwort automatisch mit dem zugeordneten Intent und den aktuellen Szenendaten füllen, um die Webanwendung zu aktualisieren. Alternativ können Sie eine Canvas-Antwort von einem Webhook mithilfe der Node.js-Auftragsausführungsbibliothek senden. Weitere Informationen finden Sie unter Canvas-Aufforderungen.

Stellen Sie sich zur Funktionsweise von „Interaktiver Canvas“ eine hypothetische Aktion namens Kalte Farben vor, bei der die Bildschirmfarbe des Geräts in eine vom Nutzer festgelegte Farbe geändert wird. Nachdem der Nutzer die Aktion aufgerufen hat, geschieht Folgendes:

  1. Der Nutzer sagt Schalten Sie das Display blau zum Assistant-Gerät.
  2. Die Actions on Google-Plattform leitet die Anfrage des Nutzers an Ihre Unterhaltungslogik weiter, um einen Intent zuzuordnen.
  3. Die Plattform gleicht den Intent mit der Szene der Aktion ab, die ein Ereignis auslöst und eine Canvas-Antwort an das Gerät sendet. Das Gerät lädt eine Webanwendung anhand einer URL, die in der Antwort angegeben ist (falls sie noch nicht geladen wurde).
  4. Wenn die Web-App geladen wird, werden Callbacks bei der Interactive Canvas API registriert. Wenn die Canvas-Antwort das Feld data enthält, wird der Objektwert des Felds data an den registrierten onUpdate-Callback der Webanwendung übergeben. In diesem Beispiel sendet die Unterhaltungslogik eine Canvas-Antwort mit einem Datenfeld, das eine Variable mit dem Wert blue enthält.
  5. Nach dem Empfang des data-Werts der Canvas-Antwort kann der Callback onUpdate eine benutzerdefinierte Logik für Ihre Webanwendung ausführen und die definierten Änderungen vornehmen. In diesem Beispiel liest der Callback onUpdate die Farbe von data und wird blau.

Clientseitige und serverseitige Auftragsausführung

Beim Erstellen einer interaktiven Canvas-Aktion können Sie zwischen zwei Ausführungspfaden für die Auftragsausführung wählen: Serverausführung oder Clientausführung. Bei der Auftragsausführung verwenden Sie in erster Linie APIs, für die ein Webhook erforderlich ist. Mit der Client-Auftragsausführung können Sie clientseitige APIs und bei Bedarf APIs verwenden, die einen Webhook für Funktionen ohne Canvas benötigen (z. B. Kontoverknüpfung).

Wenn Sie beim Erstellen des Projekts die Server-Webhook-Auftragsausführung verwenden, müssen Sie einen Webhook bereitstellen, der die dialogorientierte Logik und den clientseitigen JavaScript-Code verarbeitet, um die Webanwendung zu aktualisieren und die Kommunikation zwischen den beiden zu verwalten.

Wenn Sie Builds mit der Client-Auftragsausführung (derzeit in der Entwicklervorschau verfügbar) erstellen, können Sie neue clientseitige APIs verwenden, um die Logik Ihrer Aktion ausschließlich in der Webanwendung zu erstellen. Dies vereinfacht die Entwicklung, reduziert die Latenz zwischen Unterhaltungsrunden und ermöglicht Ihnen die Nutzung der Funktionen auf dem Gerät. Bei Bedarf können Sie auch vom Client zur serverseitigen Logik wechseln.

Weitere Informationen zu clientseitigen Funktionen finden Sie unter Builds mit clientseitiger Auftragsausführung.

Nächste Schritte

Weitere Informationen zum Erstellen einer Web-App für Interactive Canvas

Den Code für eine vollständige interaktive Canvas-Aktion finden Sie im Beispiel auf GitHub.