Mit Actions Builder eine interaktive Canvas-Aktion für Google Assistant erstellen

1. Übersicht

Warnung: Konversationsaktionen wurden am 13. Juni 2023 eingestellt. Weitere Informationen finden Sie unter Einstellung der Konversationsaktionen.

Actions on Google ist eine Entwicklerplattform, auf der Sie Software zum Erweitern der Funktionalität von Google Assistant, dem virtuellen persönlichen Assistenten von Google, für mehr als 1 Milliarde Geräte wie intelligente Lautsprecher, Smartphones, Fahrzeuge, Smart-TVs, Kopfhörer usw. entwickeln können. Nutzer interagieren mit Google Assistant, um Dinge zu erledigen, z. B. Lebensmittel zu kaufen oder eine Fahrt zu buchen. Eine vollständige Liste der aktuellen Möglichkeiten finden Sie im Aktionsverzeichnis. Als Entwickler können Sie mit Actions on Google ganz einfach ansprechende und nützliche Konversationsschnittstellen zwischen Nutzern und Ihrem eigenen Drittanbieterdienst erstellen und verwalten.

Dieses Codelab ist ein Modul für Fortgeschrittene und richtet sich an Leser, die bereits Erfahrung mit der Entwicklung von Actions für Google Assistant haben. Wenn Sie noch keine Erfahrung mit der Entwicklung von Actions on Google haben, sollten Sie sich mit der Plattform vertraut machen, indem Sie die Einführungs-Codelabs ( Stufe 1 und Stufe 2) durcharbeiten. In diesen Modulen werden Sie durch eine Reihe von Funktionen geführt, mit denen Sie die Funktionalität Ihrer Aktion erweitern und Ihre Zielgruppe vergrößern können.

In diesem Codelab verwenden Sie Interactive Canvas, ein auf Google Assistant basierendes Framework, um einer Konversationsaktion ein Vollbildspiel hinzuzufügen. Das Spiel ist eine interaktive Web-App, die Assistant als Antwort auf die Nutzeranfrage in der Unterhaltung sendet. Der Nutzer kann das Spiel dann auf Smart Displays und Android-Mobilgeräten per Sprach- oder Texteingabe spielen.

Anstatt ein ganzes Spiel selbst zu entwickeln, stellen Sie ein teilweise vorgefertigtes Spiel namens Snow Pal bereit und fügen die Spiellogik im Laufe des Codelabs hinzu. Snow Pal ist eine Variante des traditionellen Spiels Galgenmännchen. Im Spiel werden Ihnen mehrere Leerzeichen angezeigt, die ein Wort darstellen. Sie müssen Buchstaben erraten, die Ihrer Meinung nach im Wort enthalten sein könnten. Mit jeder falschen Antwort schmilzt dein Schneefreund ein wenig mehr. Du gewinnst das Spiel, wenn du das Wort erraten kannst, bevor dein Schneefreund vollständig geschmolzen ist.

Abbildung 1. Ein teilweise abgeschlossenes Schneefreund-Spiel

Aufgaben

In diesem Codelab erstellen Sie eine Action, die Interactive Canvas verwendet. Ihre Aktion hat die folgenden Funktionen:

• Ein Wortspiel im Vollbildmodus, das Nutzer per Spracheingabe spielen können
• Eine Schaltfläche, die Nutzer drücken können, um das Spiel zu starten
• Eine Schaltfläche, die Nutzer drücken können, um das Spiel noch einmal zu spielen

Wenn Sie dieses Codelab abgeschlossen haben, hat Ihre fertige Action den folgenden Konversationsablauf:

Assistant : Welcome to Snow Pal! Would you like to start playing the game?

Nutzer: Yes.

Assistant : Try guessing a letter in the word or guessing the word.

Nutzer: I guess the letter E.

Assistant : Let's see if your guess is there...E is right. Right on! Good guess.

Der Nutzer rät weiter Buchstaben oder das unbekannte Wort selbst, bis das Spiel endet.

Lerninhalte

• Interactive Canvas-Aktion erstellen und bereitstellen
• So aktualisieren Sie das Wortspiel basierend auf der Sprach- und Toucheingabe eines Nutzers
• Daten mit verschiedenen Methoden an die Web-App übergeben
• Interactive Canvas-Aktion debuggen

Voraussetzungen

Die Voraussetzungen für dieses Codelab sind:

• Ein Webbrowser, z. B. Google Chrome
• Eine IDE oder ein Texteditor Ihrer Wahl
• Node.js, npm und Git sind auf Ihrem Computer installiert.

Es wird dringend empfohlen, sich mit JavaScript (ES6) vertraut zu machen, um den in diesem Codelab verwendeten Code zu verstehen.

Optional: Vollständigen Beispielcode abrufen

In diesem Codelab erstellen Sie das Beispiel Schritt für Schritt aus einer unvollständigen Version. Sie können das fertige Beispiel auch aus dem GitHub-Repository herunterladen.

2. Einführung in Interactive Canvas

Interactive Canvas ist ein Framework, das auf Google Assistant basiert und mit dem Sie Ihrer Conversational Action Vollbildgrafiken und ‑animationen hinzufügen können.

Wichtiger Begriff:

• Unterhaltungsaktion:Eine Aktion, bei der Nutzeranfragen über eine Unterhaltungsoberfläche erfüllt werden.

Eine Action, die Interactive Canvas verwendet, funktioniert ähnlich wie eine reguläre Konversationsaktion. Eine Interactive Canvas-Aktion hat jedoch die zusätzliche Möglichkeit, eine Antwort an das Gerät zu senden, die eine Vollbild-Web-App öffnet.

Wichtiger Begriff:

• Web-App:Eine Anwendung, die webbasierte Technologien wie HTML, CSS und JavaScript verwendet, um eine interaktive, visuelle Benutzeroberfläche wie ein Spiel zu erstellen. In diesem Codelab sind die Grafiken und Animationen des Spiels Snow Pal die Web-App.

Der Nutzer gibt Eingaben in die Web-App ein, entweder per Sprache oder per Touch, bis die Unterhaltung beendet ist.

Abbildung 2: Eine Action, die mit Interactive Canvas erstellt wurde.

In diesem Codelab ist Ihr Projekt in die folgenden drei Hauptteile unterteilt:

• Web-App:Die Web-App-Dateien enthalten den Code für die visuellen Elemente und Animationen Ihrer Web-App sowie die Logik zum Aktualisieren der Web-App basierend auf den Eingaben eines Nutzers.
• Dialogorientierte Aktion:Die dialogorientierte Aktion enthält Ihre Dialoglogik, mit der die Eingabe des Nutzers erkannt, verarbeitet und beantwortet wird.
• Webhook:Der Webhook verarbeitet die Logik des Spiels. In diesem Codelab können Sie sich den Webhook als Ihren Gameserver vorstellen.

Wichtiger Begriff:

• Webhook:Ein HTTP-Callback, der eine Anfrage von einer Szene oder einem Intent verarbeitet. Er wird in der Regel verwendet, um dynamisch eine Konversationsantwort zu erstellen (oft durch API-Aufrufe).

In jedem Abschnitt dieses Codelabs ändern Sie die Web-App, die Conversational Action und den Webhook, um Ihrer Interactive Canvas Action Funktionen hinzuzufügen.

Auf übergeordneter Ebene funktionieren die Conversational Action, der Webhook und die Web-App in der Snow Pal-Action so:

1. Die Conversational Action fordert den Nutzer auf, einen Buchstaben im Wort oder das ganze Wort zu erraten.
2. Der Nutzer sagt auf einem Smart-Display „Ich rate den Buchstaben I“ zur Web-App Snow Pal.
3. Die Eingabe des Nutzers wird an Ihre Konversationsaktion weitergeleitet, die in Ihrem Actions Builder- und/oder Actions SDK-Projekt definiert ist.
4. Die Conversational Action verarbeitet die Eingabe des Nutzers und löst je nach Eingabe entweder Logik im Webhook aus, die die Web-App aktualisiert, oder sendet Metadaten, um die Web-App direkt zu aktualisieren.
5. Die Web-App wird aktualisiert und zeigt, an welcher Stelle der Buchstabe im Wort vorkommt. Der Nutzer wird aufgefordert, noch einmal zu raten.

Weitere Informationen zur Funktionsweise von Interactive Canvas finden Sie im Abschnitt Interactive Canvas-Infrastruktur. Nachdem Sie nun die Grundlagen kennen, können Sie mit der Einrichtung Ihrer Umgebung für dieses Codelab beginnen.

3. Einrichten

Google-Berechtigungseinstellungen prüfen

Um die Aktion zu testen, die Sie in diesem Codelab erstellen, müssen Sie die erforderlichen Berechtigungen aktivieren, damit der Simulator der Actions Console auf Ihre Aktion zugreifen kann. So aktivieren Sie Berechtigungen:

1. Rufen Sie die Aktivitätseinstellungen auf.
2. Melden Sie sich bei Bedarf mit Ihrem Google-Konto an.
3. Aktivieren Sie die folgenden Berechtigungen:

• Web- & App-Aktivitäten
• Wählen Sie unter Web- & App-Aktivitäten das Kästchen Auch den Chrome-Verlauf sowie Aktivitäten auf Websites, in Apps und auf Geräten berücksichtigen, die Google-Dienste nutzen aus.

gactions-Befehlszeilentool installieren

In diesem Codelab verwenden Sie das gactions-Befehlszeilentool (CLI), um Ihr Actions-Projekt zwischen der Actions Console und Ihrem lokalen Dateisystem zu synchronisieren.

Wichtige Begriffe:

• gactions CLI:Ein Tool, mit dem Sie Aktionsprojektdateien initialisieren, Updates in die Actions Console übertragen und Aktionsprojekte bereitstellen können.

Folgen Sie der Anleitung im Abschnitt gactions-Befehlszeilentool installieren, um die gactions CLI zu installieren.

Firebase-Befehlszeilentool installieren

Mit der Firebase-Befehlszeile (CLI) können Sie Ihr Actions-Projekt in Cloud Functions bereitstellen und Ihre Web-App hosten.

Wenn Sie die Firebase CLI bereits installiert haben, können Sie diese Schritte überspringen und mit dem nächsten Abschnitt fortfahren.

In diesem Codelab wird npm verwendet, um die Firebase CLI zu installieren. Installieren Sie npm, das normalerweise mit Node.js geliefert wird.

1. Wenn Sie die CLI installieren oder aktualisieren möchten, öffnen Sie ein Terminal und führen Sie den folgenden npm-Befehl aus:

npm install -g firebase-tools

Es funktioniert nicht? Möglicherweise müssen Sie die npm-Berechtigungen ändern.

2. Führen Sie den folgenden Befehl aus, um zu prüfen, ob die Befehlszeile korrekt installiert wurde:

firebase --version

Die Version der Firebase CLI muss mindestens 8 sein, damit alle neuen Funktionen für Cloud Functions verfügbar sind. Ist das nicht der Fall, führen Sie npm install -g firebase-tools aus, um ein Upgrade durchzuführen.

3. Führen Sie den folgenden Befehl aus, um sich in Firebase anzumelden:

firebase login

Achten Sie darauf, dass Sie sich in Firebase mit demselben Google-Konto anmelden, mit dem Sie Ihr Actions-Projekt erstellt haben.

Repository klonen

In diesem Abschnitt klonen Sie die Dateien, die Sie für dieses Codelab benötigen. So rufen Sie diese Dateien ab:

1. Öffnen Sie ein Terminal und wechseln Sie in ein Verzeichnis, in dem Sie normalerweise Codierungsprojekte speichern. Wenn Sie keines haben, wechseln Sie zu Ihrem Basisverzeichnis.
2. Führen Sie den folgenden Befehl in Ihrem Terminal aus, um dieses Repository zu klonen:

git clone https://github.com/actions-on-google/actions-builder-canvas-codelab-nodejs

Öffnen Sie das Verzeichnis start/. Dieses Repository enthält die folgenden wichtigen Verzeichnisse, mit denen Sie arbeiten werden:

• public/: Dieses Verzeichnis enthält den HTML-, CSS- und JavaScript-Code für Ihre Web-App.
• sdk/custom/: Dieses Verzeichnis enthält die Logik für Ihre Conversational Action (Szenen, Intents und Typen).
• sdk/webhooks/: Dieses Verzeichnis enthält Ihren Webhook und die Spiellogik.

Abbildung 3: Die Struktur des Codes im Verzeichnis start.

Hinweis:Die Dateien mit dem vollständigen Code befinden sich im Verzeichnis complete/.

4. Actions-Projekt einrichten

In diesem Abschnitt erstellen und konfigurieren Sie Ihr Actions-Projekt, übertragen den Code aus dem geklonten Repository mit der gactions-CLI in die Actions Console und stellen Ihre Webanwendung und Ihren Webhook bereit.

Actions-Projekt erstellen

Ihr Actions-Projekt ist ein Container für Ihre Action. So erstellen Sie Ihr Actions-Projekt für dieses Codelab:

1. Öffnen Sie die Actions Console.
2. Klicken Sie auf Neues Projekt.
3. Geben Sie einen Projektnamen ein, z. B. canvas-codelab. Dieser Name dient nur zu Ihrer internen Referenz. Später können Sie einen externen Namen für Ihr Projekt festlegen.

4. Klicken Sie auf Projekt erstellen.
5. Wählen Sie auf dem Bildschirm Welche Art von Action möchten Sie erstellen? die Karte Spiel aus.
6. Klicken Sie auf Weiter.
7. Wählen Sie die Karte Leeres Projekt aus.
8. Klicken Sie auf Start building (Mit der Entwicklung beginnen).

Projekt-ID für Ihre Aktion speichern

Die Projekt-ID ist eine eindeutige Kennung für Ihre Aktion. Sie benötigen Ihre Projekt-ID für mehrere Schritte in diesem Codelab.

So rufen Sie Ihre Projekt-ID ab:

1. Klicken Sie in der Actions Console auf das Dreipunkt-Menü > Projekteinstellungen.

2. Kopieren Sie die Projekt-ID.

Rechnungskonto verknüpfen

Wenn Sie Ihr Fulfillment später in diesem Codelab mit Cloud Functions bereitstellen möchten, müssen Sie Ihrem Projekt in Google Cloud ein Abrechnungskonto zuordnen. Wenn Sie bereits ein Rechnungskonto haben, können Sie die folgenden Schritte ignorieren.

So verknüpfen Sie ein Rechnungskonto mit Ihrem Projekt:

1. Rufen Sie die Seite „Abrechnung“ in der Google Cloud Platform auf.
2. Klicken Sie auf Rechnungskonto hinzufügen oder Konto erstellen.
3. Geben Sie Ihre Zahlungsinformationen ein.
4. Klicken Sie auf Jetzt kostenlos testen oder Senden und Abrechnung aktivieren.
5. Rufen Sie die Google Cloud-Abrechnungsseite auf.
6. Klicken Sie auf den Tab Meine Projekte.
7. Klicken Sie auf das Dreipunkt-Menü > Abrechnung ändern.
8. Wählen Sie im Drop-down-Menü das von Ihnen konfigurierte Rechnungskonto aus.
9. Klicken Sie auf Konto festlegen.

Folgen Sie der Anleitung im Abschnitt Projekt bereinigen, um Gebühren zu vermeiden.

Web-App bereitstellen

In diesem Abschnitt stellen Sie Ihre Web-App (das Spiel Snow Pal) mit der Firebase CLI bereit. Nach der Bereitstellung können Sie die URL für die Web-App abrufen und sich ansehen, wie das Spiel in einem Browser aussieht.

Optional können Sie Ihre Aktion so definieren, dass sowohl Ihre Fulfillment-Dateien als auch Ihre Web-App-Dateien mit dem Firebase-Befehl firebase deploy bereitgestellt werden können. In diesem Codelab stellen Sie Ihre Web-App und Ihren Fulfillment-Code separat bereit.

So stellen Sie Ihre Web-App bereit:

1. Wechseln Sie im Terminal zum Verzeichnis start/.
2. Führen Sie den folgenden Befehl aus und ersetzen Sie dabei {PROJECT_ID} durch Ihre Projekt-ID:

firebase deploy --project {PROJECT_ID} --only hosting

Nach einigen Minuten sollte "Deploy complete!" angezeigt werden. Das bedeutet, dass Sie die Snow Pal-Web-App erfolgreich in Firebase bereitgestellt haben.

So rufen Sie das Spiel Snow Pal in einem Browser auf:

1. Rufen Sie die Hosting-URL ab, die in der Ausgabe Ihres Terminals angegeben ist. Die URL sollte das folgende Format haben: https://<PROJECT_ID>.web.app

Wenn die URL nicht in der Terminalausgabe angezeigt wird, können Sie sie so abrufen:

1. Öffnen Sie die Firebase Console.
2. Wählen Sie Ihr Actions-Projekt aus der Liste der Optionen aus.
3. Klicken Sie in der Navigationsleiste auf Entwickeln > Hosting.
4. Auf dem Tab Dashboard sollte eine Liste der Domains für Ihr Projekt angezeigt werden. Kopieren Sie die URL. Sie sollte das folgende Format haben: https://<PROJECT_ID>.web.app

2. Fügen Sie die URL in einen Browser ein. Der Startbildschirm des Spiels Schneefreund sollte mit der Schaltfläche Spiel starten angezeigt werden:

Web-App-URL und Projekt-ID zum Actions-Projekt hinzufügen

Fügen Sie als Nächstes die URL Ihrer Web-App und die Projekt-ID in die Datei actions.intent.MAIN.yaml ein. Wenn Sie die Web-App-URL hinzufügen, weiß die Conversational Action, an welche URL Daten gesendet werden sollen. Wenn Sie die Projekt-ID in settings.yaml hinzufügen, können Sie die heruntergeladenen Dateien in das richtige Projekt in der Actions Console übertragen.

So fügen Sie die URL Ihrer Web-App und die Projekt-ID hinzu:

1. Öffnen Sie die Datei start/sdk/custom/global/actions.intent.MAIN.yaml in einem Texteditor.
2. Ersetzen Sie im Feld URL den Platzhalterstring durch die URL Ihrer Webanwendung.
3. Öffnen Sie die Datei start/sdk/settings/settings.yaml in einem Texteditor.
4. Ersetzen Sie im Feld projectId den Platzhalterstring durch Ihre Projekt-ID.

Projekt in die Actions Console übertragen

Wenn Sie die Actions Console mit Ihrem lokalen Projekt aktualisieren möchten, müssen Sie Ihr Actions-Projekt in die Actions Console übertragen. Führen Sie dazu die folgenden Schritte aus:

1. Wechseln Sie in das Verzeichnis sdk:

cd sdk/

2. Führen Sie den folgenden Befehl aus, um die Konfiguration Ihres lokalen Dateisystems in die Actions Console zu kopieren:

gactions push 

Webhook bereitstellen

Als Sie gactions push ausgeführt haben, haben Sie den Start-Webhook-Code in die Actions Console importiert. Für den Rest dieses Codelabs können Sie Ihren Webhook-Code in der Actions Console bearbeiten. An diesem Punkt können Sie den Webhook über die Actions Console bereitstellen.

So stellen Sie Ihren Webhook bereit:

1. Klicken Sie in der Actions Console in der Navigationsleiste auf Develop (Entwickeln).
2. Klicken Sie in der Navigationsleiste auf den Tab Webhook.
3. Klicken Sie auf Fulfillment bereitstellen.

Achtung:Nachdem Sie auf Fulfillment bereitstellen geklickt haben, wird die Meldung Abrechnungskonto erforderlich angezeigt. Wenn Sie Ihren Webhook bereitstellen möchten, müssen Sie Ihrem Projekt in Google Cloud ein Rechnungskonto zuweisen. Klicken Sie zum Einrichten eines Rechnungskontos auf Cloud Console öffnen und folgen Sie der Anleitung zum Verknüpfen eines Rechnungskontos. Sie können dieses Projekt am Ende dieses Codelabs löschen, um Kosten zu vermeiden. Weitere Informationen finden Sie im Abschnitt Bereinigen.

Es kann einige Minuten dauern, bis Cloud Functions die Auftragsausführung bereitstellt und bereitstellt. Es sollte die Meldung Cloud Functions-Bereitstellung läuft… angezeigt werden. Wenn der Code erfolgreich bereitgestellt wird, ändert sich die Meldung zu Ihre Cloud Functions-Bereitstellung ist auf dem neuesten Stand.

Im Simulator testen

Ihre Aktion ist jetzt mit der Web-App verknüpft. Sie können den Simulator in der Actions Console verwenden, um zu prüfen, ob die Web-App angezeigt wird, wenn Sie Ihre Aktion aufrufen.

So testen Sie Ihre Action:

1. Klicken Sie in der Navigationsleiste der Actions Console auf Test.
2. Geben Sie Talk to Snow Pal sample in das Feld Eingabe ein und drücken Sie Enter.
3. Geben Sie Yes in das Feld Eingabe ein und drücken Sie Enter. Alternativ können Sie auch auf Spiel starten klicken.

Sie haben die Logik zum Erraten eines Buchstabens oder des Wortes noch nicht konfiguriert. Wenn Sie also ein Wort oder einen Buchstaben erraten, erhalten Sie die Antwort ...Falsch. Gib nicht auf! Wir müssen noch weitere Funktionen hinzufügen, damit das richtig funktioniert.“

5. Interactive Canvas-Infrastruktur

Die Funktionalität dieses Projekts ist in drei Hauptkomponenten unterteilt: die Conversational Action, die Web-App und der Webhook. Dies ist ein Beispiel dafür, wie Sie Ihre Aktion einrichten können. Sie ist so aufgebaut, um die Kernfunktionen von Interactive Canvas hervorzuheben.

In den folgenden Abschnitten wird genauer beschrieben, wie die Conversational Action, der Webhook und die Web-App zusammenarbeiten, sowie andere wichtige Interactive Canvas-Elemente.

Kommunikationsaktion

Die Conversational Action-Komponente Ihrer Action ist dafür zuständig, die Eingabe des Nutzers zu erkennen, zu verarbeiten und an die entsprechende Szene zu senden, in der eine Antwort für den Nutzer erstellt wird. Wenn ein Nutzer beispielsweise im Spiel Schneefreund „Ich rate den Buchstaben E“ sagt, extrahiert Ihre Conversational Action den Buchstaben als Intent-Parameter und übergibt ihn an die entsprechende Spiellogik. Diese bestimmt, ob die Vermutung richtig ist, und aktualisiert die Web-App entsprechend. Sie können diese Konversationslogik in Actions Builder, einer webbasierten IDE in der Actions Console, ansehen und ändern. Der folgende Screenshot zeigt einen Teil Ihrer Conversational Action in Actions Builder:

Abbildung 4: Eine Visualisierung von Main invocation in Actions Builder.

Dieser Screenshot zeigt die Main invocation für Ihre Aktion, die Nutzer verwenden, wenn sie einen Satz wie Hey Google, sprich mit Snow Pal Sample sagen. Wenn der Nutzer Ihre Aktion aufruft, sendet Main invocation eine Aufforderung mit einer canvas-Antwort, die die URL Ihrer Web-App enthält.

Wichtige Begriffe:

• Canvas: Eine Antwort, die eine URL der Web-App und/oder Daten enthält, die an sie übergeben werden sollen. Sie können Canvas-Antworten entweder in Ihrem Webhook oder in Actions Builder konfigurieren. Weitere Informationen finden Sie unter Canvas-Prompts.

Die erste canvas-Antwort in Ihrem Action muss die Web-App-URL enthalten. Mit dieser Antwort wird Assistant angewiesen, die Web-App unter dieser Adresse auf dem Gerät des Nutzers zu rendern. Zusätzliche canvas-Antworten in Actions Builder können ein Feld send_state_data_to_canvas_app enthalten, das auf true festgelegt ist. In diesem Feld werden der Name des Intents und alle Parameterwerte an die Web-App gesendet, wenn der Intent erkannt wird. Die Web-App wird dann anhand dieser Daten aus der Eingabe des Nutzers aktualisiert.

Webhook

In diesem Codelab enthält Ihr Webhook die Spielelogik. Sie können sich Ihren Webhook wie einen Spieleserver vorstellen. Die Spiellogik umfasst Elemente wie die Bestimmung, ob die Vermutung eines Nutzers richtig oder falsch ist oder ob der Nutzer gewonnen oder verloren hat, und die Erstellung einer Antwort basierend auf dem Ergebnis. Sie können Ihren Webhook im Actions Builder ändern.

Wenn für Ihre Action Spiellogik ausgeführt werden muss, ruft Actions Builder den Webhook auf. Beispielsweise wird durch den Intent guess in der Szene Game ein Webhook-Aufruf an den Handler guess ausgelöst, der dann Logik ausführt, um festzustellen, ob die Vermutung des Nutzers richtig ist. Der Webhook kann Canvas Antworten in den Handlern enthalten, die Web-App-Dateien zugeordnet sind, und das Web entsprechend aktualisieren.

Web-App

Abbildung 5: Eine visuelle Darstellung der Interaktion zwischen der Conversational Action, dem Webhook und der Web-App in einer Interactive Canvas Action.

Die Web-App-Dateien enthalten den Code für die visuellen Elemente und Animationen Ihrer Web-App sowie die Logik zum Aktualisieren der Web-App basierend auf der Eingabe eines Nutzers. Sie bearbeiten die Dateien Ihrer Web-App in Ihrem Texteditor und stellen diese Änderungen mit der Firebase CLI bereit.

Kommunikation zwischen Conversational Action und Web-App

Sie müssen die Kommunikation zwischen Ihrer Conversational Action und Ihrer Web-App aktivieren, damit Ihre Web-App basierend auf Nutzereingaben aktualisiert werden kann. Wenn ein Nutzer beispielsweise „Ich tippe auf den Buchstaben F“ sagt,

Die Conversational Action muss der Web-App den Buchstaben f zur Verfügung stellen, damit die Web-App entsprechend aktualisiert werden kann. Damit die Eingabe des Nutzers von der Conversational Action an die Web-App übergeben werden kann, müssen Sie die Interactive Canvas API laden.

Wichtiger Begriff:

• Interactive Canvas API:Eine JavaScript API, die Sie in die Web-App einbinden, um die Kommunikation zwischen der Web-App und Ihrer Conversational Action zu ermöglichen.

Das Script für diese API ist in /public/index.html enthalten, der Haupt-HTML-Datei für das Spiel Snow Pal. In dieser Datei wird definiert, wie Ihre Benutzeroberfläche aussieht und in mehreren Skripts geladen wird:

index.html

<!-- Load Assistant Interactive Canvas API -->
 <script type="text/javascript" src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

Wenn Sie die Web-App basierend auf der Eingabe des Nutzers aktualisieren möchten, müssen Sie auch Callbacks in der Datei Ihrer Web-App registrieren und konfigurieren. Mit Callbacks kann Ihre Web-App auf Informationen oder Anfragen der Conversational Action reagieren.

In /public/js/action.js gibt es eine vorkonfigurierte Klasse namens Action zum Deklarieren und Registrieren von Callbacks. Die Klasse Action ist ein Wrapper um die Interactive Canvas API. Wenn die Web-App mit der Funktion create() in scene.js erstellt wird, wird eine neue Action-Instanz erstellt und setCallbacks() aufgerufen, wie im folgenden Snippet gezeigt:

scene.js

// Set Assistant at game level.
this.assistant = new Action(this);
// Call setCallbacks to register Assistant Action callbacks.
this.assistant.setCallbacks();

Die Funktion setCallbacks() ist in der Klasse Action von /public/js/action.js definiert. In dieser Funktion werden Callbacks deklariert und bei der Erstellung des Spiels bei der Interactive Canvas API registriert:

  setCallbacks() {
    // Declare the Interactive Canvas Action callbacks.
    const callbacks = {
      onUpdate: (data) => {
     ...
    // Called by the Interactive Canvas web app once web app has loaded to
    // register callbacks.
    this.canvas.ready(callbacks);
  }

Mit der Funktion setCallbacks() wird der onUpdate()-Callback deklariert, der jedes Mal aufgerufen wird, wenn Sie eine Canvas-Antwort senden.

Wichtiger Begriff:

• onUpdate(): Ein Callback, der jedes Mal ausgeführt wird, wenn Sie eine Canvas-Antwort senden. onUpdate() kann benutzerdefinierter Logik zugeordnet werden, die die Web-App aktualisiert.

Im nächsten Abschnitt wird beschrieben, wie der spezifische Code für dieses Projekt konfiguriert ist, um Daten von der Conversational Action an die Web-App zu übergeben.

Web-App basierend auf der Eingabe des Nutzers aktualisieren

In diesem Codelab verwenden Sie eine Befehlskarte, um die Web-App basierend auf der Eingabe eines Nutzers zu aktualisieren. Wenn beispielsweise der Intent start_game in der Szene Welcome abgeglichen wird, wird die im Prompt enthaltene Antwort canvas an die Web-App gesendet. onUpdate() parst die Metadaten aus der Antwort canvas und ruft den Befehl START_GAME auf, der wiederum die Funktion start() in scene.js aufruft und die Web-App aktualisiert, um eine neue Spielsitzung zu starten.

Die Funktion start() in scene.js ruft auch eine Funktion namens updateCanvasState() auf, die mit der Methode setCanvasState() Statusdaten hinzufügt, auf die Ihr Webhook zugreifen kann.

Wichtiger Begriff:

• setCanvasState():Eine Methode, mit der Sie Statusdaten von Ihrer Interactive Canvas-Web-App an Ihren Webhook senden können. Die Web-App sendet ihren aktualisierten Status als JSON-Objekt.

Die Methode updateCanvasState() wird am Ende jedes Befehls aufgerufen (diese Befehle werden im gesamten Codelab hinzugefügt) und aktualisiert den Status der Web-App. Jedes Mal, wenn updateCanvasState() aufgerufen wird, werden die Werte für displayedWord und incorrectGuesses basierend auf dem aktuellen Status aktualisiert:

scene.js

...
  updateCanvasState() {
    window.interactiveCanvas.setCanvasState({
      correctWord: this.word.text,
      displayedWord: this.word.displayText.text,
      incorrectGuesses: this.incorrectGuesses,
    });

Der aktualisierte Status ist dann für den nächsten Konversationszug verfügbar. Sie können über conv.context.canvas.state im Webhook auf diesen Status zugreifen, wie im folgenden Code-Snippet gezeigt:

index.js

...
  let displayedWord = conv.context.canvas.state.displayedWord;
...

6. Funktion zum Raten hinzufügen

In diesem Abschnitt fügen Sie Ihrer Aktion die guess-Funktion hinzu, mit der der Nutzer Buchstaben im Wort oder das Wort selbst erraten kann.

Kommunikationsaktion

Im Abschnitt Im Simulator testen haben Sie eine Antwort erhalten, die „It looks like we need to add more functionality to have this work properly.“ (Es sieht so aus, als müssten wir weitere Funktionen hinzufügen, damit das richtig funktioniert.) enthielt. Sie können den Prompt jetzt in der Actions Console löschen, sodass nur der Webhook aufgerufen wird. In der Szene Game ist die Intention guess bereits so konfiguriert, dass bei einer Übereinstimmung ein Webhook-Aufruf erfolgt.

So entfernen Sie den statischen Prompt, wenn der Intent guess erkannt wird:

1. Klicken Sie in der Actions Console in der Navigationsleiste auf Szenen.
2. Klicke auf Spiel, um zur Szene Game zu gelangen.
3. Klicken Sie unter User intent handling (Umgang mit Nutzerabsicht) auf When guess is matched (Wenn Vermutung zutrifft). Entfernen Sie das Häkchen bei Prompts senden, um den Prompt zu entfernen.
4. Klicken Sie auf Speichern.

Webhook

In diesem Abschnitt aktualisieren Sie Ihren Webhook mit Logik, die die richtige oder falsche Vermutung eines Nutzers der Logik in einer Web-App-Datei zuordnet, wodurch die Web-App entsprechend aktualisiert wird. Der Intent-Handler guess ist bereits im Webhook konfiguriert. Sie müssen diesem Intent nur Canvas-Antworten hinzufügen, um die Logik auszulösen, mit der die Web-App aktualisiert wird.

So aktualisieren Sie Ihren Webhook:

1. Klicken Sie in der Actions Console in der Navigationsleiste auf Webhook.
2. Fügen Sie den folgenden Code in index.js unter dem guess-Handler ein:

Hinweis:In diesem Codelab sind die Code-Snippets, die Sie hinzufügen, in alphabetische Abschnitte unterteilt. Die Dateien, die Sie ändern, enthalten Kommentare, in denen angegeben ist, wo Sie die einzelnen Snippets hinzufügen sollten (z. B. // Add section F } here). Fügen Sie das entsprechende Snippet nach der auskommentierten Zeile ein.

index.js (Abschnitt A):

// Add Section A `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'CORRECT_ANSWER',
    displayedWord: displayedWord
  },
}));

index.js (Abschnitt B):

// Add Section B `conv.add(new Canvas({` content here.
conv.add(new Canvas({
  data: {
    command: 'INCORRECT_ANSWER',
  },
}));

3. Klicken Sie auf Bestellabwicklung speichern.
4. Klicken Sie auf Fulfillment bereitstellen. Wenn die Bereitstellung abgeschlossen ist, wird die Meldung Your Cloud Function deployment is up to date (Die Bereitstellung Ihrer Cloud-Funktion ist auf dem neuesten Stand) angezeigt.

Web-App

Sie können Ihre Web-App jetzt so konfigurieren, dass sie die Befehle CORRECT_ANSWER und INCORRECT_ANSWER verarbeitet.

1. Öffnen Sie public/js/action.js in einem Texteditor.
2. Aktualisieren Sie die Web-App, damit sie die Befehle CORRECT_ANSWER und INCORRECT_ANSWER verarbeiten kann:

action.js (Abschnitt C):

// Add Section C `CORRECT_ANSWER: (params) => {` content here.
      CORRECT_ANSWER: (params) => {
        this.gameScene.correctAnswer(params);
      },
      INCORRECT_ANSWER: (params) => {
        this.gameScene.incorrectAnswer();
      },

3. Führen Sie den folgenden Befehl aus, um die Web-App zu aktualisieren:

firebase deploy --project {PROJECT_ID} --only hosting

Action im Simulator testen

An diesem Punkt kann Ihre Aktion erkennen, ob eine Vermutung richtig oder falsch ist, und die Web-App entsprechend aktualisieren.

So testen Sie Ihre Action:

1. Klicken Sie in der Navigationsleiste auf Test.
2. Geben Sie Talk to Snow Pal sample in das Feld Eingabe ein und drücken Sie Enter.
3. Geben Sie Yes in das Feld Eingabe ein und drücken Sie Enter. Alternativ können Sie auf die Schaltfläche Ja klicken.
4. Geben Sie den Buchstaben, den Sie erraten möchten, in das Feld Eingabe ein und drücken Sie Enter.

Code verstehen

Im vorherigen Abschnitt haben Sie Code hinzugefügt, mit dem Nutzer Buchstaben in Ihrem Spiel erraten und diese Vermutungen entweder im Wort oder im Schneemann sehen können. Auf hoher Ebene führen Sie im Actions Builder einen Webhook-Aufruf aus, wenn der Intent guess zugeordnet wird. Dadurch werden Daten an Ihre Web-App übergeben, um sie entsprechend zu aktualisieren. Wenn der Nutzer beispielsweise im Spiel Schneefreund einen Buchstaben errät, der im Wort vorkommt, wird die Web-App aktualisiert und der Buchstabe wird an der richtigen Position im Wort angezeigt.

Bei Actions, die Interactive Canvas verwenden, werden Daten in der Regel so vom Webhook an die Web-App übergeben:

1. Die Eingabe des Nutzers entspricht einem Intent, der eine Canvas-Antwort enthält.
2. Die Unterhaltungsaktion oder der Webhook sendet die Canvas-Antwort, die den onUpdate()-Callback auslöst.
3. Der onUpdate()-Callback wird benutzerdefinierter Logik zugeordnet, die die Web-App entsprechend aktualisiert.

Wichtiger Begriff:

• onUpdate(): Ein Callback, der jedes Mal ausgeführt wird, wenn Ihr Fulfillment eine Canvas-Antwort sendet.. onUpdate() kann benutzerdefinierter Logik zugeordnet werden, die die Web-App aktualisiert.

Für dieses spezielle Projekt funktioniert der Code so:

1. Wenn der Nutzer dem Intent guess entspricht, extrahiert Actions Builder den Buchstaben aus der Eingabe des Nutzers als Parameter.
2. Actions Builder ruft den guess-Handler in Ihrem Webhook auf. Dieser enthält die Logik, um festzustellen, ob der vom Nutzer geratene Buchstabe im Wort vorkommt.
3. Der guess-Handler enthält zwei Canvas-Antworten: eine, die ausgeführt wird, wenn der Buchstabe richtig ist, und eine, die ausgeführt wird, wenn der Buchstabe falsch ist. Bei jeder Canvas-Antwort werden die entsprechenden Daten (der CORRECT_ANSWER- oder INCORRECT_ANSWER-Befehl) an die Web-App übergeben.
4. Die Daten im Feld data der Canvas-Antwort werden in action.js an die Methode onUpdate() übergeben. onUpdate() ruft den entsprechenden Befehl in der Befehlszuordnung in scene.js auf.
5. Der Befehl „map“ wird den Funktionen correctAnswer() und incorrectAnswer() in scene.js zugeordnet. Diese Funktionen aktualisieren die Web-App entsprechend der Vermutung des Nutzers und rufen setCanvasState() auf, um Statusdaten von Ihrer Web-App an Ihren Webhook zu senden.

7. Funktion zum Abschluss/Nichtabschluss hinzufügen

In diesem Abschnitt fügen Sie Ihrer Aktion die Funktionen zum Gewinnen und Verlieren hinzu. Dazu gehört die Logik, die bestimmt, ob der Nutzer gewonnen oder verloren hat, und die Logik, mit der das Bild der Web-App basierend auf dem Ergebnis des Nutzers aktualisiert wird.

Kommunikationsaktion

Die Funktionalität, die dafür sorgt, dass der Nutzer das Spiel gewinnt oder verliert, wird im Intent guess konfiguriert. Sie müssen also keine zusätzlichen Konfigurationen in Actions Builder vornehmen.

Webhook

In diesem Abschnitt aktualisieren Sie Ihren Webhook mit Logik, die verarbeitet, wenn ein Nutzer das Spiel gewonnen oder verloren hat, und die der Web-App-Logik zugeordnet wird, die das Spiel mit dem entsprechenden Bildschirm für Gewinn oder Verlust aktualisiert.

So aktualisieren Sie Ihren Webhook:

1. Klicken Sie in der Actions Console in der Navigationsleiste auf Webhook.
2. Fügen Sie den folgenden Code in index.js unter dem guess-Handler ein:

index.js (Abschnitt D):

// Add Section D `if (userHasWon)` content here.
    if (userHasWon) {
      conv.add(`<speak>Let's see if your guess is there...<break
        time='2500ms'/> ${guess} is right. That spells ${correctWord}!  
        ${randomArrayItem(WIN_RESPONSES)}</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'WIN_GAME',
          displayedWord: displayedWord
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (Abschnitt E):

Hinweis:In diesem Abschnitt fügen Sie eine schließende geschweifte Klammer hinzu, um den Codeblock zu schließen.

// Add Section E `}` here.
}

index.js (Abschnitt F):

// Add Section F `Check if the user has exceeded the maximum` content here.
// Check if the user has exceeded the maximum amount of max guesses allowed.
    const userHasLost = conv.context.canvas.state.incorrectGuesses + 1 >= MAX_INCORRECT_GUESSES;
    if (userHasLost) {
      conv.add(`<speak>Let's see if your guess is there...<break
      time='2500ms'/> ${guess} is wrong. Sorry you lost. The word is ${correctWord}!</speak>`);
      conv.add(new Canvas({
        data: {
          command: 'LOSE_GAME',
        },
      }));
      conv.add(`<speak>${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
    } else {

index.js (Abschnitt G):

Hinweis:In diesem Abschnitt fügen Sie eine schließende geschweifte Klammer hinzu, um den Codeblock zu schließen.

// Add Section G `}` here.
}

3. Klicken Sie auf Bestellabwicklung speichern.
4. Klicken Sie auf Fulfillment bereitstellen. Wenn die Bereitstellung abgeschlossen ist, wird die Meldung Your Cloud Function deployment is up to date (Die Bereitstellung Ihrer Cloud-Funktion ist auf dem neuesten Stand) angezeigt.

Hier haben Sie zwei Canvas-Antworten mit den Befehlen WIN_GAME und LOSE_GAME hinzugefügt, um zu verarbeiten, wenn Nutzer das Spiel gewinnen oder verlieren. Im nächsten Abschnitt fügen Sie eine Funktion hinzu, mit der die Web-App aktualisiert wird, je nachdem, ob der Nutzer gewonnen oder verloren hat.

Web-App

Sie können Ihre Web-App jetzt so konfigurieren, dass sie sich je nach Ergebnis des Nutzers aktualisiert. So aktualisieren Sie Ihre Web-App:

1. Öffnen Sie public/js/action.js in einem Texteditor.
2. Aktualisieren Sie Ihre Web-App, damit sie die Befehle WIN_GAME und LOSE_GAME verarbeiten kann:

action.js (Abschnitt H):

// Add Section H `WIN_GAME: (params) => {` content here.
      WIN_GAME: (params) => {
        this.gameScene.winGame(params);
      },
      LOSE_GAME: (params) => {
        this.gameScene.loseGame();
      },

3. Führen Sie den folgenden Befehl aus, um die Web-App zu aktualisieren:

firebase deploy --project {PROJECT_ID} --only hosting

Action im Simulator testen

An diesem Punkt kann Ihre Aktion verarbeiten, wenn der Nutzer das Spiel gewinnt oder verliert, und für jedes Ergebnis den entsprechenden Bildschirm präsentieren.

So testen Sie Ihre Action:

1. Klicken Sie in der Navigationsleiste der Actions Console auf Test.
2. Geben Sie Talk to Snow Pal sample in das Feld Eingabe ein und drücken Sie Enter.
3. Geben Sie Yes in das Feld Eingabe ein und drücken Sie Enter. Klicken Sie alternativ auf die Schaltfläche Spiel starten.
4. Raten Sie Buchstaben und Wörter, bis Sie entweder gewinnen oder verlieren.

Wenn Sie darum bitten, noch einmal zu spielen, erhalten Sie eine Nachricht, dass die erforderliche Funktion für das erneute Spielen noch nicht hinzugefügt wurde. Sie fügen diese Funktion im nächsten Abschnitt hinzu.

Code verstehen

Die Funktion zum Gewinnen und Verlieren funktioniert genauso wie die Funktion zum Raten: Der Nutzer entspricht der Intention guess und Ihr Webhook bewertet die Vermutung des Nutzers. Wenn die Vermutung richtig ist, wird geprüft, ob der Nutzer gewonnen hat. Wenn ja, wird der Befehl WIN_GAME an die Web-App gesendet. Wenn die Vermutung falsch ist, wird geprüft, ob der Nutzer verloren hat. Wenn ja, wird der Befehl LOSE_GAME an die Web-App gesendet. Diese Befehle lösen die Funktionen winGame() und loseGame() in scene.js aus, die die Web-App aktualisieren, um den Bildschirm für den Gewinn oder Verlust zu präsentieren, und den Status des Spiels aktualisieren.

8. Funktion zum erneuten Spielen hinzufügen

In diesem Abschnitt fügen Sie eine Funktion hinzu, mit der der Nutzer entweder Nochmal spielen sagen oder in der Web-App auf die Schaltfläche Nochmal spielen klicken kann, um ein neues Spiel zu starten. Sie ändern den Intent play_again in Actions Builder, um eine canvas-Antwort zu senden, mit der die Web-App entsprechend aktualisiert wird. Außerdem fügen Sie eine Logik hinzu, die den Intent play_again auslöst, wenn der Nutzer auf die Schaltfläche Nochmal spielen klickt.

Kommunikationsaktion

Als Sie Ihre Aktion im vorherigen Abschnitt getestet haben, wurde Ihnen beim erneuten Versuch, das Spiel zu spielen, die folgende Aufforderung angezeigt: „Das wäre toll, aber wir werden diese Funktion in einem späteren Abschnitt einbauen. Setze die Aktion vorerst einfach zurück.“ Sie können diesen Prompt jetzt löschen und durch einen ersetzen, der dem Nutzer antwortet, wenn er ein weiteres Spiel anfordert („Okay, hier ist ein weiteres Spiel!“), und eine canvas-Antwort enthält, um die Web-App zu veranlassen, ein neues Spiel zu starten.

So aktualisieren Sie den Prompt, wenn der Nutzer noch einmal spielen möchte:

1. Klicken Sie in der Actions Console auf das Drop-down-Menü Szene.
2. Klicken Sie auf die Szene Spiel.
3. Klicken Sie unter User intent handling (Umgang mit Nutzerabsichten) auf When play_again is matched (Wenn „play_again“ erkannt wird).
4. Ersetzen Sie den Prompt durch Folgendes:

candidates:
  - first_simple:
      variants:
        - speech: 'Okay, here''s another game!' 
    canvas:
      sendStateDataToCanvasApp: true

5. Klicken Sie auf Speichern.

Webhook

In diesem Codelab verwaltet der Webhook die Spiellogik. Da für die Funktion „Nochmal spielen“ keine Logikvalidierung erforderlich ist, müssen Sie den Webhook nicht aufrufen. Stattdessen können Sie direkt aus Actions Builder eine canvas-Antwort senden, um die erforderlichen Daten an die Web-App zu übergeben (die Sie im vorherigen Abschnitt konfiguriert haben).

Web-App

Sie können jetzt die Dateien Ihrer Web-App so ändern, dass sie entsprechend aktualisiert werden, wenn der Nutzer darum bittet, noch einmal zu spielen. So fügen Sie diese Funktion hinzu:

1. Öffnen Sie public/js/action.js in einem Texteditor.
2. Aktualisieren Sie die Web-App, damit sie den Befehl PLAY_AGAIN verarbeiten kann:

action.js (Abschnitt I):

// Add Section I `PLAY_AGAIN: (params) => {` content here.
      PLAY_AGAIN: (params) => {
        this.gameScene.start();
      },

3. Öffnen Sie public/js/scene.js in einem Texteditor.
4. Aktualisieren Sie die Web-App, damit eine neue Spielsitzung gestartet wird, wenn der Nutzer auf den Button Nochmal spielen klickt:

scene.js (Abschnitt J):

// Add Section J `sendTextQuery` content here.
     window.interactiveCanvas.sendTextQuery('Play again');

5. Führen Sie den folgenden Befehl aus, um die Web-App zu aktualisieren:

firebase deploy --project {PROJECT_ID} --only hosting

Action im Simulator testen

Ihre Aktion kann jetzt eine neue Spielsitzung starten, wenn der Nutzer Nochmal spielen sagt oder auf die Schaltfläche Nochmal spielen klickt.

So testen Sie Ihre Action:

1. Klicken Sie in der Navigationsleiste auf Test.
2. Geben Sie Talk to Snow Pal sample in das Feld Eingabe ein und drücken Sie Enter.
3. Geben Sie Yes in das Feld Eingabe ein und drücken Sie Enter. Klicken Sie alternativ auf die Schaltfläche Spiel starten.
4. Raten Sie Buchstaben und Wörter, bis Sie entweder gewinnen oder verlieren.
5. Geben Sie Play again in das Feld Eingabe ein und drücken Sie Enter. Alternativ können Sie auf die Schaltfläche Nochmal spielen klicken.

Code verstehen

Beim Testen Ihrer Action konnten Sie ein neues Spiel entweder per Spracheingabe (Nochmal spielen) oder per Touch-Eingabe (Klicken auf die Schaltfläche Nochmal spielen) starten.

Wenn der Nutzer bei der Sprachausgabeoption „Nochmal spielen“ oder eine ähnliche Formulierung sagt, wird der play_again-Intent abgeglichen und der Aufforderungswarteschlange wird eine Aufforderung („Okay, hier ist noch ein Spiel!“) hinzugefügt. Die in der Aufforderung enthaltene canvas-Antwort sendet den Intent-Namen und andere Metadaten an die Web-App. Der Intent-Name wird an den onUpdate()-Callback übergeben, der den entsprechenden Befehl PLAY_AGAIN der Befehlskarte in action.js zuordnet. Der Befehl PLAY_AGAIN löst die Funktion start() in scene.js aus und aktualisiert die Web-App mit einer neuen Spielsitzung.

Für die Option „Eingabe per Berührung“ verwenden Sie sendTextQuery(), eine Interactive Canvas API, mit der Sie eine Intention durch Berührung auslösen können, damit die Schaltfläche funktioniert.

Wichtiger Begriff:

• sendTextQuery(): Eine Methode, mit der eine Textanfrage an die Conversational Action gesendet wird, um programmatisch einen Intent aufzurufen.

In diesem Codelab verwenden Sie sendTextQuery(), um den Intent play_again aufzurufen, wenn ein Nutzer auf die Schaltfläche Nochmal spielen klickt. Das Argument Play again entspricht einer Trainingsformulierung im Intent play_again und löst diesen Intent auf dieselbe Weise aus wie ein Nutzer, der „Play again“ sagt. Der Intent play_again löst dann Logik aus, die die Web-App aktualisiert und eine neue Spielsitzung startet.

9. Integrierten Intent PLAY_GAME aktualisieren

In diesem Abschnitt aktualisieren Sie den PLAY_GAME integrierten Intent.

Wichtiger Begriff:

• Integrierter Intent:Eine eindeutige Kennung, mit der Sie Assistant mitteilen können, dass Ihre Action eine bestimmte Kategorie von Nutzeranfragen erfüllen kann.

Mit dem integrierten Intent PLAY_GAME können Nutzer Ihre Action aufrufen, wenn sie eine allgemeine Anfrage stellen, z. B. „Ich möchte ein Spiel spielen.“

Der Quellcode enthält den integrierten Intent PLAY_GAME, der sich unter /sdk/custom/global/actions.intent.PLAY_GAME.yaml befindet. In der Konsole wird dies im Bereich Aufruf als PLAY_GAME angezeigt, wie im folgenden Screenshot zu sehen ist:

Damit Nutzer Ihre Action über diesen integrierten Intent aufrufen können, müssen Sie dem integrierten Intent PLAY_GAME eine canvas-Antwort mit der Web-App-URL hinzufügen. Führen Sie dazu die folgenden Schritte aus:

1. Klicken Sie in der Actions Console in der Navigationsleiste auf PLAY_GAME.
2. Aktualisieren Sie den Prompt, um die URL Ihrer Web-App einzufügen, wie im folgenden Snippet gezeigt:

candidates:
  - canvas:
      url: 'https://<PROJECT_ID>.web.app'

3. Klicken Sie auf Speichern.

Action im Simulator testen

Ihre Aktion unterstützt jetzt den integrierten Intent PLAY_GAME.

So testen Sie Ihre Action:

1. Klicken Sie in der Navigationsleiste auf Test.
2. Klicken Sie auf Test built-in intent handling (Integrierte Intent-Verarbeitung testen).
3. Klicken Sie auf Invoke Action (Aktion aufrufen).

Ihre Aktion sollte im Simulator aufgerufen werden.

10. Anhang: Fehlerbehebung bei der Interactive Canvas-Aktion

In diesem Abschnitt erfahren Sie, wie Sie Ihre Interactive Canvas-Aktion debuggen, wenn sie nicht richtig funktioniert. Das Snow Pal-Projekt wird mit einem Debugging-Overlay geliefert, das Sie aktivieren können. Das Overlay zeigt die gesamte console.log()- und console.error()-Ausgabe unten rechts auf dem Display an, wie im folgenden Screenshot zu sehen ist:

Öffnen Sie die Datei /public/css/main.css und kommentieren Sie die Zeile display: none !important; aus, um dieses Overlay zu aktivieren. Das folgende Snippet zeigt, wie das geht:

main.css

.debug {
 display: flex;
 flex-direction: column;

/* Comment below to view debug overlay */
/* display: none !important; */

 width: 500px;
 height: 150px;
 right: 0;
 bottom: 0;
 position: absolute;
}

Projekt bereinigen [empfohlen]

Um mögliche Gebühren zu vermeiden, sollten Sie Projekte entfernen, die Sie nicht verwenden möchten. So löschen Sie die Projekte, die Sie in diesem Codelab erstellt haben:

1. Wenn Sie das Google Cloud-Projekt und die Ressourcen löschen möchten, führen Sie die Schritte im Abschnitt Projekte beenden (löschen) aus.

Achtung: Achten Sie darauf, dass Sie auf der Seite „Google Cloud Platform-Einstellungen“ das richtige Projekt zum Löschen auswählen.

2. Optional: Wenn Sie Ihr Projekt sofort aus der Actions Console entfernen möchten, führen Sie die Schritte im Abschnitt Projekt löschen aus. Wenn Sie diesen Schritt nicht ausführen, wird Ihr Projekt nach etwa 30 Tagen automatisch entfernt.

11. Glückwunsch!

Sie haben das einführende Interactive Canvas-Codelab abgeschlossen und verfügen nun über die erforderlichen Kenntnisse, um Ihre eigene Interactive Canvas-Aktion zu erstellen.

Das haben Sie gelernt

• Interactive Canvas-Aktion erstellen, bereitstellen und testen
• Canvas-Antworten zum Aktualisieren der Web-App verwenden
• Verschiedene Methoden zur Optimierung Ihrer Action, z. B. sendTextQuery() und setCanvasState()
• Aktion debuggen

Weitere Informationen

In den folgenden Ressourcen finden Sie weitere Informationen zu Interactive Canvas:

• Interactive Canvas-Dokumentation: Die offizielle Actions on Google-Dokumentation für Interactive Canvas.
• Interactive Canvas-Beispiel: Der Code für ein einfaches Interactive Canvas-Spiel, in dem Sie ein Dreieck drehen und seine Farben ändern können.
• Spieleportal: Hier finden Sie die Richtlinien für die Entwicklung von Spielen für Google Assistant.

Feedback-Umfrage

Bevor Sie gehen, füllen Sie bitte eine kurze Umfrage zu Ihren Erfahrungen aus.