In diesem Tutorial erfahren Sie, wie Sie eine Google Chat-App erstellen, mit der Google Chat-Nutzer ihre privaten und geschäftlichen Kontakte verwalten können. Zum Erheben von Informationen werden Nutzer von der Chat-App in Kartennachrichten und Dialogfeldern aufgefordert, ein Kontaktformular auszufüllen.
So funktioniert die Chat App:
-
Abbildung 2: Die Chat-App öffnet ein Dialogfeld, in dem Nutzer Informationen zu einem Kontakt eingeben können. -
Abbildung 3: Die Chat-App zeigt ein Bestätigungsdialogfeld an, damit Nutzer die Informationen prüfen und bestätigen können, bevor sie sie senden. -
Abbildung 4: Nachdem der Nutzer das Formular gesendet hat, sendet die Chat-App eine private SMS, um die Einreichung zu bestätigen. -
Abbildung 5 Außerdem werden Nutzer von der Chat-App aufgefordert, einer Nachricht einen Kontakt aus einer Karte hinzuzufügen.
Vorbereitung
- Ein Google Workspace-Konto für Unternehmen oder Organisationen mit Zugriff auf Google Chat.
Zielsetzungen
- Sie können Benutzeroberflächen (UIs) als
card
-Objekte entwerfen und erstellen und die UIs in Nachrichten und Dialogfeldern anzeigen. - Informationen empfangen und verarbeiten, die Nutzer über Formulareingaben-Widgets senden
- Auf Slash-Befehle reagieren, indem Nachrichten gesendet werden, die Text, Karten und Zubehör-Widgets enthalten.
Architektur
Die Chat-App ist in Google Apps Script implementiert und verwendet Interaktionsereignisse, um Chat-Nutzer zu verarbeiten und zu beantworten.
Das folgende Beispiel zeigt, wie ein Nutzer normalerweise mit der Chat-App interagieren kann:
Ein Nutzer öffnet eine Direktnachricht mit der Chat App oder fügt die Chat App einem vorhandenen Gruppenbereich hinzu.
Die Chat-App fordert den Nutzer auf, einen Kontakt hinzuzufügen. Dazu wird ein Kontaktformular als
card
-Objekt erstellt und angezeigt. Wenn die Chat-App das Kontaktformular anzeigt, reagiert sie auf Nutzer auf folgende Weise:- Antwortet auf @Erwähnungen und Direktnachrichten mit einer Kartennachricht, die das Kontaktformular enthält.
- Reagiert auf den Befehl „/
/addContact
“ und öffnet ein Dialogfeld mit dem Kontaktformular. - Beantwortet den Befehl „/“
/about
mit einer Textnachricht mit der Schaltfläche Kontakt hinzufügen, über die Nutzer ein Dialogfeld mit dem Kontaktformular öffnen können.
Im Kontaktformular gibt der Nutzer seine Kontaktdaten in die folgenden Felder und Widgets ein:
- Vor- und Nachname: ein
textInput
-Widget, das Strings akzeptiert. - Geburtsdatum: Ein
dateTimePicker
-Widget, das nur Datumsangaben akzeptiert. - Kontakttyp: Ein
selectionInput
-Widget mit Optionsfeldern, über das Nutzer einen einzelnen Stringwert (Personal
oderWork
) auswählen und senden können. - Schaltfläche Überprüfen und senden: Ein
buttonList
-Array mit dembutton
-Widget, auf das der Nutzer klickt, um die eingegebenen Werte zu senden.
- Vor- und Nachname: ein
Die Google Chat App verarbeitet ein
CARD_CLICKED
-Interaktionsereignis, um die vom Nutzer eingegebenen Werte zu verarbeiten und sie auf einer Bestätigungskarte anzuzeigen.Der Nutzer überprüft die Bestätigungskarte und klickt auf die Schaltfläche Senden, um die Kontaktdaten zu bestätigen.
Die Google Chat App sendet eine private SMS, in der die Einreichung bestätigt wird.
Umgebung vorbereiten
In diesem Abschnitt wird beschrieben, wie Sie ein Google Cloud-Projekt für die Chat-App erstellen und konfigurieren.
Google Cloud-Projekt erstellen
Google Cloud Console
- Klicken Sie in der Google Cloud Console auf das Dreipunkt-Menü > IAM und Verwaltung > Projekt erstellen.
-
Geben Sie im Feld Projektname einen aussagekräftigen Namen für Ihr Projekt ein.
Optional: Klicken Sie auf Bearbeiten, um die Projekt-ID zu bearbeiten. Die Projekt-ID kann nach dem Erstellen des Projekts nicht mehr geändert werden. Wählen Sie also eine ID aus, die während der gesamten Dauer des Projekts den Anforderungen entspricht.
- Klicken Sie im Feld Standort auf Durchsuchen, um mögliche Standorte für Ihr Projekt zu sehen. Klicken Sie danach auf Auswählen.
- Klicken Sie auf Erstellen. In der Google Cloud Console wird die Seite „Dashboard“ geöffnet und Ihr Projekt wird innerhalb weniger Minuten erstellt.
gcloud-CLI
Greifen Sie in einer der folgenden Entwicklungsumgebungen auf die Google Cloud CLI (gcloud
) zu:
-
Cloud Shell: Aktivieren Sie Cloud Shell, um ein Onlineterminal mit der bereits eingerichteten gcloud CLI zu verwenden.
Cloud Shell aktivieren -
Lokale Shell: Zur Verwendung einer lokalen Entwicklungsumgebung müssen Sie die gcloud CLI installieren und initialisieren.
Verwenden Sie den Befehlgcloud projects create
, um ein Cloud-Projekt zu erstellen: Ersetzen Sie PROJECT_ID, indem Sie die ID für das Projekt festlegen, das Sie erstellen möchten.gcloud projects create PROJECT_ID
Authentifizierung und Autorisierung einrichten
Für Google Chat-Anwendungen müssen Sie einen OAuth-Zustimmungsbildschirm konfigurieren, damit Nutzer Ihre Anwendung in Google Workspace-Anwendungen wie Google Chat autorisieren können.
In dieser Anleitung stellen Sie eine Chat-App bereit, die nur zu Testzwecken und zur internen Verwendung dient. Daher ist es in Ordnung, Platzhalterinformationen für den Einwilligungsbildschirm zu verwenden. Ersetzen Sie vor der Veröffentlichung der Chat-App alle Platzhalterinformationen durch echte Informationen.
Gehen Sie in der Google Cloud Console zu Menü > APIs und Dienste > OAuth-Zustimmungsbildschirm.
Wählen Sie unter Nutzertyp die Option Intern aus und klicken Sie auf Erstellen.
Geben Sie unter Anwendungsname
Contact Manager
ein.Wählen Sie unter Nutzersupport-E-Mail Ihre E-Mail-Adresse oder eine entsprechende Google-Gruppe aus.
Geben Sie unter Kontaktdaten des Entwicklers Ihre E-Mail-Adresse ein.
Klicken Sie auf Speichern und fortfahren.
Klicken Sie auf der Seite Bereiche auf Speichern und fortfahren. Für die Chat-App sind keine OAuth-Bereiche erforderlich.
Überprüfen Sie die Zusammenfassung und klicken Sie dann auf Zurück zum Dashboard.
Chat-App erstellen und bereitstellen
Im folgenden Abschnitt kopieren und aktualisieren Sie ein komplettes Apps Script-Projekt, das den gesamten erforderlichen Anwendungscode für Ihre Chat-App enthält. Sie müssen also nicht jede Datei kopieren und einfügen.
Optional können Sie das gesamte Projekt auf GitHub ansehen.
Hier ein Überblick über die einzelnen Dateien:
main.gs
Hier werden alle App-Logiken verarbeitet, einschließlich Interaktionsereignisse, wenn Nutzer Nachrichten an die Chat-App senden, in einer Chat-App-Nachricht auf Schaltflächen klicken oder Dialogfelder öffnen und schließen.
main.gs
-Code ansehencontactForm.gs
Enthält die Widgets, die Formulardaten von Nutzern empfangen. Diese Eingabe-Widgets für Formulare werden in Karten angezeigt, die in Nachrichten und Dialogfeldern erscheinen.
contactForm.gs
-Code ansehenappsscript.json
Das Apps Script-Manifest, mit dem das Apps Script-Projekt für die Chat-App definiert und konfiguriert wird
appsscript.json
-Code ansehen
Cloud-Projektnummer und ‑ID ermitteln
Rufen Sie in der Google Cloud Console Ihr Cloud-Projekt auf.
Klicken Sie auf „Einstellungen und Dienstprogramme“ > Projekteinstellungen.
Notieren Sie sich die Werte in den Feldern Projektnummer und Projekt-ID. Sie werden in den folgenden Abschnitten verwendet.
Apps Script-Projekt erstellen
So erstellen Sie ein Apps Script-Projekt und verknüpfen es mit Ihrem Cloud-Projekt:
- Klicken Sie auf die folgende Schaltfläche, um das Apps Script-Projekt Kontakte in Google Chat verwalten zu öffnen.
Projekt öffnen - Klicken Sie auf Übersicht.
- Klicken Sie auf der Übersichtsseite auf Kopie erstellen.
Geben Sie einen Namen für die Kopie des Apps Script-Projekts ein:
Klicken Sie auf Kopie von „Kontakte in Google Chat verwalten“.
Geben Sie unter Projekttitel
Contact Manager - Google Chat app
ein.Klicken Sie auf Umbenennen.
Cloud-Projekt des Apps Script-Projekts festlegen
- Klicken Sie in Ihrem Apps Script-Projekt auf Projekteinstellungen.
- Klicken Sie unter Google Cloud Platform-Projekt (GCP-Projekt) auf Projekt ändern.
- Fügen Sie unter GCP-Projektnummer die Projektnummer Ihres Cloud-Projekts ein.
- Klicken Sie auf Projekt festlegen. Das Cloud-Projekt und das Apps Script-Projekt sind jetzt verknüpft.
Apps Script-Bereitstellung erstellen
Nachdem der gesamte Code vorhanden ist, können Sie das Apps Script-Projekt bereitstellen. Sie verwenden die Bereitstellungs-ID, wenn Sie die Chat-App in Google Cloud konfigurieren.
Öffnen Sie in Apps Script das Projekt der Chat App.
Klicken Sie auf Bereitstellen > Neue Bereitstellung.
Wenn Add-on noch nicht ausgewählt ist, klicken Sie neben Typ auswählen auf die Bereitstellungstypen und wählen Sie Add-on aus.
Geben Sie unter Beschreibung eine Beschreibung für diese Version ein, z. B.
Test of Contact Manager
.Klicken Sie auf Bereitstellen. Apps Script meldet die erfolgreiche Bereitstellung und gibt eine Bereitstellungs-ID an.
Klicken Sie auf
Kopieren, um die Deployment-ID zu kopieren, und dann auf Fertig.
Chat-App in der Google Cloud Console konfigurieren
In diesem Abschnitt wird beschrieben, wie Sie die Google Chat API in der Google Cloud Console mit Informationen zu Ihrer Chat-App konfigurieren, einschließlich der ID der Bereitstellung, die Sie gerade über Ihr Apps Script-Projekt erstellt haben.
Klicken Sie in der Google Cloud Console auf das Dreistrich-Menü > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API > Verwalten > Konfiguration.
und dann aufGeben Sie unter Anwendungsname
Contact Manager
ein.Geben Sie unter Avatar-URL
https://developers.google.com/chat/images/contact-icon.png
ein.Geben Sie unter Beschreibung
Manage your personal and business contacts
ein.Stellen Sie die Ein/Aus-Schaltfläche Interaktive Funktionen aktivieren auf „Ein“.
Aktivieren Sie unter Funktionsweise die Kästchen 1:1-Nachrichten empfangen und Gruppenbereichen und Gruppenunterhaltungen beitreten.
Wählen Sie unter Verbindungseinstellungen die Option Apps Script aus.
Fügen Sie unter Bereitstellungs-ID die Apps Script-Bereitstellungs-ID ein, die Sie beim Erstellen der Apps Script-Bereitstellung im vorherigen Abschnitt kopiert haben.
Richten Sie unter Slash-Befehle die Slash-Befehle
/about
und/addContact
ein:- Klicken Sie auf Slash-Befehl hinzufügen, um den ersten Slash-Befehl einzurichten.
- Geben Sie unter Name den Wert
/about
ein. - Geben Sie unter Befehls-ID
1
ein. - Geben Sie unter Beschreibung den Wert
Learn how to use this Chat app to manage your contacts
ein. - Wählen Sie Öffnet ein Dialogfeld aus.
- Klicken Sie auf Fertig.
- Klicken Sie auf Slash-Befehl hinzufügen, um einen weiteren Slash-Befehl einzurichten.
- Geben Sie unter Name
/addContact
ein. - Geben Sie unter Befehls-ID
2
ein. - Geben Sie unter Beschreibung
Submit information about a contact
ein. - Wählen Sie Öffnet ein Dialogfeld aus.
- Klicken Sie auf Fertig.
Klicken Sie unter Sichtbarkeit das Kästchen Diese Chat-App bestimmten Personen und Gruppen in YOUR DOMAIN zur Verfügung stellen an und geben Sie Ihre E-Mail-Adresse ein.
Wählen Sie unter Logs die Option Fehler in Logging protokollieren aus.
Klicken Sie auf Speichern. Die Meldung „Konfiguration gespeichert“ wird angezeigt.
Die Chat App kann jetzt in Google Chat installiert und getestet werden.
Chat-App testen
Wenn Sie die Chat App testen möchten, öffnen Sie einen Direktnachrichtenbereich mit der Chat App und senden Sie eine Nachricht:
Öffnen Sie Google Chat mit dem Google Workspace-Konto, das Sie angegeben haben, als Sie sich als vertrauenswürdiger Tester hinzugefügt haben.
- Klicken Sie auf Neuer Chat.
- Geben Sie im Feld Eine oder mehrere Personen hinzufügen den Namen Ihrer Chat-App ein.
Wählen Sie in den Ergebnissen die Chat-App aus. Eine Direktnachricht wird geöffnet.
Geben Sie in der neuen Direktnachricht in der Chat App
/addContact
ein und drücken Sie die Eingabetaste.Geben Sie im daraufhin angezeigten Dialogfeld die Kontaktdaten ein:
- Geben Sie im Textfeld Vor- und Nachname einen Namen ein.
- Wählen Sie in der Datumsauswahl unter Geburtsdatum ein Datum aus.
- Wählen Sie unter Kontakttyp das Optionsfeld Geschäftlich oder Privat aus.
Klicken Sie auf Überprüfen und senden.
Prüfen Sie im Bestätigungsdialogfeld die von Ihnen eingereichten Informationen und klicken Sie auf Senden. Die Chat-App antwortet mit der Textnachricht
✅ CONTACT NAME has been added to your contacts.
.Optional können Sie das Kontaktformular auch auf folgende Arten testen und senden:
- Verwenden Sie den Slash-Befehl
/about
. Die Chat-App antwortet mit einer Textnachricht und einer Schaltfläche für das Zubehör-Widget mit der AufschriftAdd a contact
. Sie können auf die Schaltfläche klicken, um ein Dialogfeld mit dem Kontaktformular zu öffnen. - Senden Sie der Chat-App eine Direktnachricht ohne Schrägstriche, z. B.
Hello
. Die Chat-App antwortet mit einem Text und einer Karte mit dem Kontaktformular.
- Verwenden Sie den Slash-Befehl
Bereinigen
Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, sollten Sie das Cloud-Projekt löschen.
- Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten. Klicken Sie auf das Dreistrich-Menü > IAM & Verwaltung > Ressourcen verwalten.
- Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen .
- Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.
Weitere Informationen
- Auf Slash-Befehle reagieren
- Informationen von Google Chat-Nutzern erheben und verarbeiten
- Interaktive Dialoge öffnen
- Weitere Google Chat-App-Beispiele