Übersicht (Dialogflow)

Interactive Canvas ist ein Framework, das auf Google Assistant basiert und Entwicklern die Möglichkeit bietet, dialogorientierte Aktionen in Form visueller, immersiver Interaktionen zu gestalten. Dieses visuelle Erlebnis ist eine interaktive Webanwendung, die Assistant als Antwort an den Nutzer in der Unterhaltung sendet. Im Gegensatz zu herkömmlichen Rich-Antworten, die in einer Assistant-Unterhaltung inline verfügbar sind, wird die interaktive Canvas-Webanwendung als Vollbild-Webansicht gerendert.

Verwenden Sie den interaktiven Canvas, wenn Sie in Ihrer Aktion eine der folgenden Aktionen ausführen möchten:

  • Vollbild-Bilder erstellen
  • Benutzerdefinierte Animationen und Übergänge erstellen
  • Datenvisualisierung
  • Benutzerdefinierte Layouts und GUIs erstellen
Abbildung 1. Ein interaktives Spiel, das mit Interactive Canvas entwickelt wurde.

Unterstützte Geräte

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

  • Smart Displays
  • Google Nest Hubs

  • Android-Mobilgeräte

Funktionsweise

Eine Aktion, die interaktives Canvas verwendet, funktioniert ähnlich wie eine normale dialogorientierte Aktion. Der Nutzer hat weiterhin eine Unterhaltung mit Assistant, um sein Ziel zu erreichen. Statt einer Antwort in der Unterhaltung wird eine interaktive Canvas-Aktion an den Nutzer gesendet, die eine Vollbild-Webanwendung öffnet. Der Nutzer interagiert weiterhin per Sprachbefehl oder Interaktion mit der Webanwendung, bis die Unterhaltung beendet ist.

Für eine Aktion mit interaktivem Canvas gibt es mehrere Komponenten:

  • Unterhaltungsaktion: Eine Aktion, die eine dialogorientierte Schnittstelle verwendet, um Nutzeranfragen zu erfüllen. Bei interaktiven Canvas Actions werden Webansichten verwendet, um Antworten anstelle von Rich-Karten oder einfachen Text- und Sprachantworten zu rendern. Für Konversationsaktionen werden die folgenden Komponenten verwendet:
    • Dialogflow-Agent: Ein Projekt in Dialogflow, das Sie anpassen, um mit Ihren Aktionsnutzern zu interagieren.
    • Auftragsausführung: Code, der als Webhook bereitgestellt wird und die Konversationslogik für Ihren Dialogflow-Agent implementiert und mit Ihrer Webanwendung kommuniziert.
  • Web-App:Eine Front-End-Web-App mit angepassten Bildern, die Ihre Aktion als Antwort an Nutzer während einer Unterhaltung sendet. Sie erstellen die Webanwendung mit Webstandards wie HTML, JavaScript und CSS.

Die Kommunikationsaktion und die Webanwendung kommunizieren mithilfe der folgenden Elemente miteinander:

  • Interaktive Canvas API:eine JavaScript API, die in die Webanwendung aufgenommen wird, um die Kommunikation zwischen der Webanwendung und deiner Kommunikationsaktion zu ermöglichen
  • HtmlResponse: Eine Antwort, die eine URL der Webanwendung und die zu übergebenden Daten enthält. Sie können die Node.js- oder Java-Clientbibliotheken verwenden, um eine HtmlResponse zurückzugeben.

Der interaktive Canvas illustriert die Aktion Coole Farben. Damit wird die Bildschirmfarbe des Geräts in eine vom Nutzer festgelegte Farbe geändert. Nachdem der Nutzer die Aktion aufgerufen hat, sieht der Ablauf so aus:

  1. Der Nutzer sagt Turn the screen blue zum Assistant-Gerät.
  2. Die Actions on Google-Plattform leitet die Anfrage des Nutzers an Dialogflow weiter, um ihn einem Intent zuzuordnen.
  3. Die Auftragsausführung für den abgeglichenen Intent wird ausgeführt und ein HtmlResponse wird an das Gerät gesendet. Das Gerät verwendet die URL, um die Webanwendung zu laden, wenn sie noch nicht geladen wurde.
  4. Wenn die Webanwendung geladen wird, werden Callbacks mit der interactiveCanvas API registriert. Der Wert des data-Objekts wird dann an den registrierten onUpdate-Callback der Webanwendung übergeben. In unserem Beispiel sendet die Auftragsausführung einen HtmlResponse mit einer data, die eine Variable mit dem Wert blue enthält.
  5. Die benutzerdefinierte Logik für Ihre Webanwendung liest den data-Wert von HtmlResponse und nimmt die definierten Änderungen vor. In unserem Beispiel wird dadurch der Bildschirm blau.
  6. interactiveCanvas sendet das Callback-Update an das Gerät.

Nächste Schritte

Informationen zum Erstellen einer interaktiven Canvas-Aktion finden Sie auf der Seite Build-Übersicht.

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