1. Einführung
Nachdem Sie im vorherigen Codelab einen Dialogflow-Chatbot für einen TV-Guide erstellt haben, zeigen wir Ihnen jetzt, wie Sie ihn auf Google Chat ausweiten. Sie erfahren, wie Sie dynamische, interaktive Karten für diese Plattform erstellen und mehrere Integrationen einrichten.
Überblick
Wir erstellen einen Dialogflow-Chatbot, der in Ihrer Google Workspace-Domain mit anpassbaren Antworten reagieren kann.
Lerninhalte
- Google Chat-App bereitstellen und konfigurieren
- Anzeigenkarten in Google Chat erstellen
- Benutzerdefinierte Nutzlasten in der Dialogflow-Auftragsausführung erstellen
Voraussetzungen
- Absolvieren Sie das erste Codelab dieser zweiteiligen Reihe.
- Ein Webbrowser und eine E‑Mail-Adresse für die Anmeldung in der Dialogflow-Konsole
- Google Chat ist in Ihrer Google Workspace-Domain aktiviert.
2. Google Chat aktivieren und konfigurieren
Wir beginnen mit dem Dialogflow-Agent, den Sie in den vorherigen Codelabs erstellt haben.
- Klicken Sie in der Dialogflow-Konsole auf
. - Scrollen Sie auf dem Tab Allgemein zu Projekt-ID und klicken Sie dann auf Google Cloud
.
- Klicken Sie in der Google Cloud Console auf das Navigationsmenü ☰ > APIs & Dienste > Bibliothek.
- Suchen Sie nach „Google Chat API“ und klicken Sie dann auf Aktivieren, um die API in Ihrem Google Cloud-Projekt zu verwenden.
- Als Nächstes konfigurieren wir Ihre Google Chat-App. Rufen Sie dazu die Seite Konfiguration für die API auf. Pro GCP-Projekt kann es höchstens eine Google Chat-App geben.
- Die Konfigurationsoptionen sollten nun mit den Dialogflow-Feldern ausgefüllt werden.
- Ändern Sie das Feld „Avatar-URL“ in dieses TV-Bild:
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - Google Chat-App sowohl für Direktnachrichten als auch für Gruppenbereiche aktivieren
Klicken Sie auf Speichern und schließen Sie die Cloud Console.
Zusätzlich Dialogflow-Integrationen. Google Chat ist standardmäßig aktiviert. Wenn Sie mehrere Plattformen unterstützen möchten, können Sie diese auf der Seite Integrationen in der Dialogflow-Konsole aktivieren.
3. In Google Chat testen
Nachdem Ihre Google Chat-App konfiguriert ist, fügen wir sie einem Chat-Gruppenbereich hinzu und testen sie. Öffnen Sie Google Chat und erstellen Sie einen Test-Chatbereich. Klicken Sie rechts oben im Gruppenbereich auf das Drop-down-Menü und wählen Sie Personen und Apps hinzufügen aus.
Suchen Sie nach tvguide und fügen Sie dem Gruppenbereich die Google Chat App hinzu.
Sie können jetzt mit der Google Chat-App interagieren, die Sie bereits in Google Chat erstellt haben, indem Sie einfach @tvguide in den Gruppenbereich eingeben. Geben Sie @tvguide hello ein, um es auszuprobieren.
Als Nächstes verwenden wir die Anpassungen in Google Chat, um umfangreichere Antworten hinzuzufügen.
4. Benutzerdefinierte Google Chat-Karten
Mit Google Chat kann Ihre App dem Nutzer eine einfache Textantwort oder eine Kartenantwort zurückgeben. Letztere bietet Ihnen eine umfangreichere Benutzeroberfläche, die aus verschiedenen Widgets wie Bildern und Schaltflächen besteht. Nachdem Sie Ihren Dialogflow-Agenten mit einer Google Chat-App verbunden haben, müssen Sie nur noch das JSON im richtigen Format in Ihrem Fulfillment-Code zurückgeben, damit es in Google Chat angezeigt wird. Sehen wir uns einige JSON-Beispiele an.
Die grundlegende Textantwort sieht so aus:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
Eine Beispielkartenantwort mit Widgets sieht so aus:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. Benutzerdefinierte Nutzlasten und Chatkarten
Mit benutzerdefinierten Nutzlasten in Dialogflow können plattformspezifische Rich-Media-Antworten erstellt werden. Hier fügen wir unsere Hangouts Chat-JSON-Karten hinzu, die vom Agenten an den Nutzer zurückgegeben werden.
Fügen wir zuerst eine einfache Karte für die Begrüßungsabsicht hinzu. Rufen Sie in der Dialogflow-Konsole den Standard-Begrüßungs-Intent auf und scrollen Sie nach unten zum Abschnitt „Antworten“.
Klicken Sie auf Google Chat und heben Sie die Auswahl von Antworten auf Tab STANDARD als erste Antworten verwenden auf. Klicken Sie dann auf ANTWORTEN HINZUFÜGEN > Benutzerdefinierte Nutzlast.
Es wird ein JSON-Skelett angezeigt.
Kopieren Sie den folgenden Code und fügen Sie ihn ein. Wir haben eine Karte mit einem TextParagraph-Widget eingerichtet.
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
Klicken Sie auf Speichern und rufen Sie dann Ihren Test-Chatbereich auf, um zu sehen, wie die Karte gerendert wird. Geben Sie im Chatbereich „@tvguide hello“ ein.
Als Nächstes fügen wir dem Fulfillment-Code eine benutzerdefinierte Nutzlast hinzu, damit wir den Inhalt dynamisch mit unserem Code generieren können.
Weitere Informationen zu Karten finden Sie in der Dokumentation zum Nachrichtenformat. Im nächsten Abschnitt fügen wir Karten hinzu.
6. Karte in Fulfillment hinzufügen
Jetzt erstellen wir eine Karte mit Widgets, um TV-Programmübersichten anzuzeigen. Fügen wir eine Funktion namens getGoogleCard hinzu, in der wir die resultierenden Informationen zum Eintrag rendern. Wir verwenden keyValue- und button-Widgets, um die Kartenantwort zu erstellen.
Fügen Sie die Funktion unten in Ihren Code in index.js ein.
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
Jetzt müssen wir diese Methode aufrufen, damit der Agent die Antwort abrufen kann, die er an den Nutzer zurücksenden soll. Ersetzen Sie in der Funktion „channelHandler“ den Inhalt der Funktion durch den folgenden Code.
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
Beachten Sie den Code unten, in dem die Antwort hinzugefügt wird. Wenn die Anforderungsquelle des Agents als diese Plattform identifiziert wird, erstellen wir die JSON-Nutzlast mit dem Tag „hangouts“. Das ist wichtig, damit die Nutzlast im Fulfillment korrekt zurückgegeben wird.
Kehren Sie jetzt zu Ihrem Chatbereich zurück und testen Sie ihn. Geben Sie @tvguide What is on MTV? ein. Die Antwort sollte in etwa so aussehen.
7. Glückwunsch
Sie haben Ihren ersten Google Chat-Bot mit Dialogflow erstellt.
Nächste Schritte
Hat Ihnen dieses Codelab gefallen? Sehen Sie sich diese Labs an.