Dialogflow in Google Chat einbinden

1. Hinweis

In diesem Codelab erfahren Sie, wie Dialogflow mit Google Workspace-APIs verbunden wird, um einen voll funktionsfähigen Terminplaner mit Google Kalender und dynamischen Antworten in Google Chat zu erstellen.

Wenn Sie die Einrichtung aus den vorherigen Codelabs nicht mehr haben oder sich mit Dialogflow und Fulfillment auskennen, können Sie den Startcode und die Agent-Konfiguration hier herunterladen.

https://github.com/googleworkspace/appointment-scheduler-codelab

Vorbereitung

Bevor Sie fortfahren, müssen Sie die folgenden Codelabs durcharbeiten:

1. Terminplaner mit Dialogflow erstellen
2. Dialogflow in Actions on Google einbinden
3. Entitäten in Dialogflow verstehen
4. Auftragsausführung durch Integration von Dialogflow mit Google Kalender

Außerdem müssen Sie die grundlegenden Konzepte und Konstrukte von Dialogflow kennen. Diese können Sie den folgenden Videos im Lernpfad Chatbot mit Dialogflow erstellen entnehmen.

Lerninhalte

• Google Chat-App bereitstellen und konfigurieren
• Anzeigenkarten in Google Chat erstellen
• Benutzerdefinierte Nutzlasten in der Dialogflow-Auftragsausführung erstellen

Aufgaben

• Integration von Dialogflow, Google Chat und Google Kalender
• Optional: Google Maps für Rich Cards einbinden

Voraussetzungen

• Ein Webbrowser und eine E‑Mail-Adresse für die Anmeldung in der Dialogflow-Konsole
• Google Kalender und Google Chat sind in Ihrer Google Workspace-Domain aktiviert.

Warnung: Sie müssen ein Google Workspace-Konto verwenden, um dieses Codelab durchzuführen. Wenn Sie ein @gmail.com-Konto verwenden, tritt beim Aktivieren der API ein Fehler auf.

2. Google Chat aktivieren und konfigurieren

Wir beginnen mit dem Dialogflow-Agent, den Sie in den vorherigen Codelabs erstellt haben.

1. Klicken Sie in der Dialogflow-Konsole auf .
2. Scrollen Sie auf dem Tab Allgemein zu Projekt-ID und klicken Sie dann auf Google Cloud.

3. Klicken Sie in der Google Cloud Console auf das Navigationsmenü ☰ > APIs & Dienste > Bibliothek.
4. Suchen Sie nach „Google Chat API“ und klicken Sie dann auf Aktivieren, um die API in Ihrem Google Cloud-Projekt zu verwenden.
5. Als Nächstes konfigurieren wir Ihre Chat-App. Rufen Sie dazu die Seite Konfiguration für die API auf. Pro GCP-Projekt kann es nur eine Chat-App geben.

6. Die Konfigurationsoptionen sollten nun mit den Dialogflow-Feldern ausgefüllt werden.
7. Ändern Sie das Feld „Avatar-URL“ in dieses Autobild: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. Wenn Sie Ihre Chat-App sowohl für Direktnachrichten als auch für Gruppenbereiche aktivieren möchten, wählen Sie App kann direkt Nachrichten empfangen und Anwendung funktioniert in Bereichen mit mehreren Nutzern aus.

Klicken Sie auf Speichern und schließen Sie die Cloud Console.

3. Zusätzliche Dialogflow-Integrationen

Google Chat ist standardmäßig aktiviert. Wenn ein Bot jedoch mehrere Plattformen unterstützen soll, können Sie diese auf der Seite Integrationen in der Dialogflow-Konsole aktivieren.

4. In Google Chat testen

Nachdem Ihre Chat-App konfiguriert ist, fügen wir sie einem Chat-Gruppenbereich hinzu und testen sie. Öffnen Sie Google Chat und erstellen Sie einen Testgruppenbereich.

1. Klicken Sie rechts oben im Gruppenbereich auf das Drop-down-Menü und wählen Sie Personen und Apps hinzufügen aus.
2. Suchen Sie nach AppointmentScheduler und fügen Sie die App dem Gruppenbereich hinzu.
3. Sie können jetzt mit der App interagieren, die Sie bereits in Google erstellt haben, indem Sie einfach @Terminplaner in den Bereich eingeben.

Testen Sie die Plattform mit derselben Eingabe wie in den vorherigen Codelabs:

1. Nutzer: „@AppointmentScheduler Set an appointment for vehicle registration at 2 PM tomorrow.“ (Nutzer: „@Terminplaner Vereinbare einen Termin für die Fahrzeugregistrierung für morgen um 14:00 Uhr.“)
2. Chat-App: „Okay, ich sehe mal nach, ob wir dich unterbringen können. Der 24. April um 14:00 Uhr passt gut.“

Als Nächstes verwenden wir die Anpassungen in Google Chat, um umfangreichere Antworten hinzuzufügen.

5. 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 zurückgeben, damit es in Ihrem Fulfillment-Code in Google angezeigt wird. Sehen wir uns einige JSON-Beispiele an.

Die grundlegende Textantwort sieht so aus:

 {
  "text": "Your pizza delivery is here!"
}

Eine Beispielkartenantwort mit Widgets sieht so aus:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Weitere Informationen zu Karten finden Sie in der Dokumentation zum Nachrichtenformat. Im nächsten Abschnitt fügen wir unserer Chat-App Karten hinzu.

6. 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": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

Klicken Sie auf Save (Speichern) und rufen Sie dann Ihren Test-Chatbereich auf, um zu sehen, wie die Karte gerendert wird. Geben Sie im Chatbereich „@AppointmentScheduler 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.

7. Karte in Fulfillment hinzufügen

Als Nächstes erstellen wir eine Karte mit mehreren Widgets, um einen geplanten Termin anzuzeigen. Fügen wir eine Funktion namens getGoogleChatCard hinzu, in der wir die Eingaben appointmentType, date und time rendern.

Fügen Sie die Funktion unten in Ihrem Code in index.js ein.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

Diese Karte enthält ein Schlüssel/Wert-Paar und ein Schaltflächen-Widget. Die Widgets werden dann in einem section angeordnet und das card enthält eine Liste der zu rendernden Abschnitte.

Rufen wir diese Funktion nun auf, wenn ein Kalendertermin erstellt wird. Ersetzen Sie in Ihrer createCalendarEvent-Funktion den Inhalt durch den unten stehenden Code und stellen Sie die Funktion bereit.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

Wenn der Agent in Google Chat antwortet, weiß er, dass er die oben erstellte Karte zurückgeben muss. Testen Sie die Funktion mit einer Terminplanungsanfrage.

8. (Optional) Google Maps-Bild-Widget hinzufügen

Wenn Sie die Antwortkarte visuell ansprechender gestalten möchten, können Sie eine statische Karte des Terminsorts hinzufügen, die von der Maps Static API generiert wird. Mit der API können Sie ein Maps-Bild anhand von URL-Parametern erstellen. Wir können das Bild dann in einem Bild-Widget auf unserer Karte verwenden.

1. Aktivieren Sie die Maps Static API in der Google Cloud Console, so wie Sie die Calendar API und die Google Chat API aktiviert haben.
2. Erstellen und speichern Sie einen API-Schlüssel für Ihr Projekt auf der Seite APIs & Dienste in der Console. Weitere Informationen zum Abrufen und zu Best Practices für API-Schlüssel mit Maps
3. Kopieren Sie den API-Schlüssel und die folgenden Konstanten an den Anfang Ihrer Datei in index.js.

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

4. Fügen Sie als Nächstes ein Bild-Widget in die Funktion getGoogleChatCard ein.

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

5. Fügen Sie mapImageWidget in die Liste der Widgets in Ihrer infoSection-Variable ein, speichern Sie die Änderungen und stellen Sie die App bereit.
6. Testen Sie Ihre Chat-App in Ihrem Chat-Gruppenbereich. Sie sollten eine Rich-Antwort basierend auf dem Code erhalten, den Sie heute hinzugefügt haben.

9. Bereinigen

Wenn Sie weitere Dialogflow-Codelabs durcharbeiten möchten, überspringen Sie diesen Abschnitt jetzt und kehren Sie später dazu zurück.

Dialogflow-Agent löschen

1. Klicken Sie neben Ihrem vorhandenen Agent auf .

2. Scrollen Sie auf dem Tab Allgemein nach unten und klicken Sie auf Diesen Agent löschen.
3. Geben Sie Löschen in das Dialogfeld ein und klicken Sie auf Löschen.

10. Glückwunsch

Sie haben einen Chatbot in Dialogflow erstellt und ihn in Google Kalender und jetzt auch in Google Chat eingebunden. Sie sind ein Google Workspace-Profi!

Weitere Informationen

Weitere Informationen finden Sie in den Codebeispielen auf der Seite Dialogflow GitHub.