In dieser Anleitung erfahren Sie, wie Sie eine Google Chat-App erstellen, mit der Google Chat-Nutzer ihre privaten und geschäftlichen Kontakte verwalten können. Zum Erfassen von Informationen fordert die Chat-App Nutzer auf, ein Kontaktformular in Kartennachrichten und Dialogfeldern auszufüllen.
Die Chat-App in Aktion:
-
Abbildung 1. Die Chat-App antwortet auf den Slash-Befehl /aboutmit einer Textnachricht und einer Schaltfläche, über die ein Kontaktformular geöffnet wird. -
Abbildung 2 Die Chat-App öffnet ein Dialogfeld, in dem Nutzer Informationen zu einem Kontakt eingeben können. -
Abbildung 3 Die Chat-App gibt ein Bestätigungsdialogfeld zurück, so dass Nutzer die Informationen vor dem Senden überprüfen und bestätigen können. -
Abbildung 4 Nachdem der Nutzer das Formular gesendet hat, sendet die Chat-App eine private Textnachricht zur Bestätigung der Übermittlung. -
Abbildung 5 Die Chat-App fordert Nutzer auch auf, einen Kontakt über eine Karte in einer Nachricht hinzuzufügen.
Vorbereitung
- Ein Google Workspace-Konto für Unternehmen oder Enterprise mit Zugriff auf Google Chat.
- Google Cloud-Projekt erstellen.
Ziele
- Benutzeroberflächen (UIs)
als
cardObjekte entwerfen und erstellen und die UIs in Nachrichten und Dialogfeldern anzeigen. - Informationen empfangen und verarbeiten, die Nutzer über Formulareingabe-Widgets senden.
- Auf Befehle antworten mit Nachrichten, die Text, Karten und Zubehör-Widgets enthalten.
Architektur
Die Chat-App wird in Google Apps Script erstellt und verwendet Interaktionsereignisse, um Anfragen von Chat-Nutzern zu verarbeiten und darauf zu antworten.
Im Folgenden wird beschrieben, wie ein Nutzer normalerweise mit der Chat-App interagiert:
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, indem sie ein Kontaktformular als
cardObjekt erstellt und anzeigt. Um das Kontaktformular zu präsentieren, antwortet die Chat-App auf folgende Weise auf Nutzer:- Antwortet auf @-Erwähnungen und Direktnachrichten mit einer Kartennachricht, die das Kontaktformular enthält.
- Antwortet auf den Slash-Befehl
/addContact, indem ein Dialogfeld mit dem Kontaktformular geöffnet wird. - Antwortet auf den Slash-Befehl
/aboutmit einer Textnachricht, die die Schaltfläche Kontakt hinzufügen enthält. Nutzer können darauf klicken, um ein Dialogfeld mit dem Kontaktformular zu öffnen.
Wenn das Kontaktformular angezeigt wird, gibt der Nutzer Kontaktdaten in die folgenden Felder und Widgets ein:
- Vor- und Nachname: ein
textInputWidget, das Strings akzeptiert. - Geburtsdatum: ein
dateTimePickerWidget, das nur Datumsangaben akzeptiert. - Kontakttyp: ein
selectionInput-Widget mit Optionsfeldern, mit dem Nutzer einen einzelnen String wert auswählen und senden können (entwederPersonaloderWork). - Schaltfläche „Überprüfen und senden“: ein
buttonListArray mit einembutton-Widget, auf das der Nutzer klickt, um die eingegebenen Werte zu senden, die er eingegeben hat.
- Vor- und Nachname: ein
Die Google Chat-App verarbeitet ein
CARD_CLICKED-Interaktionsereignis, um die vom Nutzer eingegebenen Werte zu verarbeiten, und zeigt die Werte auf einer Bestätigungskarte an.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 Textnachricht zur Bestätigung der Übermittlung.
Umgebung vorbereiten
In diesem Abschnitt wird beschrieben, wie Sie ein Google Cloud-Projekt für die Chat-App konfigurieren.
Cloud-Projekt in der Google API Console öffnen
Öffnen Sie das Cloud-Projekt, das Sie für dieses Beispiel verwenden möchten, falls es noch nicht geöffnet ist:
- Rufen Sie in der Google API Console die Seite Projekt auswählen auf.
- Wählen Sie das Google Cloud-Projekt aus, das Sie verwenden möchten. Oder klicken Sie auf Projekt erstellen und folgen Sie der Anleitung auf dem Bildschirm. Wenn Sie ein Google Cloud-Projekt erstellen, müssen Sie möglicherweise die Abrechnung für das Projekt aktivieren.
Authentifizierung und Autorisierung einrichten
Für Google Chat-Apps müssen Sie einen OAuth-Zustimmungsbildschirm konfigurieren, damit Nutzer Ihre App in Google Workspace-Anwendungen, einschließlich Google Chat, autorisieren können.
In dieser Anleitung stellen Sie eine Chat-App bereit, die nur für Tests und den internen Gebrauch bestimmt ist. Daher können Sie Platzhalterinformationen für den Zustimmungsbildschirm verwenden. Ersetzen Sie alle Platzhalterinformationen durch echte Informationen, bevor Sie die Chat-App veröffentlichen.
Rufen Sie in der Google API Console das Menü > Google Auth Platform > Branding auf.
Wenn Sie die Google Auth Platform bereits konfiguriert haben, können Sie die folgenden Einstellungen für den OAuth-Zustimmungsbildschirm unter „Branding“, „Zielgruppe“ und „Datenzugriff“konfigurieren. Wenn die Meldung Google Auth Platform noch nicht konfiguriert angezeigt wird, klicken Sie auf Jetzt starten:
- Geben Sie unter App-Informationen in App-Name
Contact Managerein. - Wählen Sie unter E-Mail-Adresse für den Nutzersupport Ihre E-Mail-Adresse oder eine geeignete Google-Gruppe aus.
- Klicken Sie auf Weiter.
- Wählen Sie unter Zielgruppe die Option Intern aus. Wenn Sie Intern nicht auswählen können, wählen Sie Extern aus.
- Klicken Sie auf Weiter.
- Geben Sie unter Kontaktdaten eine E-Mail-Adresse ein, unter der Sie über Änderungen an Ihrem Projekt benachrichtigt werden können.
- Klicken Sie auf Weiter.
- Lesen Sie unter Abschluss die Richtlinie zu Nutzerdaten der Google API-Dienste und wählen Sie bei Zustimmung Ich stimme der Richtlinie zu Nutzerdaten der Google API-Dienste zu aus.
- Klicken Sie auf Weiter.
- Klicken Sie auf Erstellen.
- Wenn Sie als Nutzertyp Extern ausgewählt haben, fügen Sie Testnutzer hinzu:
- Klicken Sie auf Zielgruppe.
- Klicken Sie unter Testnutzer auf Nutzer hinzufügen.
- Geben Sie Ihre E-Mail-Adresse und die E-Mail-Adressen aller anderen autorisierten Testnutzer ein und klicken Sie dann auf Speichern.
- Geben Sie unter App-Informationen in App-Name
Chat-App erstellen und bereitstellen
Im folgenden Abschnitt kopieren und aktualisieren Sie ein gesamtes 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 eine Übersicht der einzelnen Dateien:
main.gsVerarbeitet die gesamte App-Logik, einschließlich Interaktionsereignissen, wenn Nutzer Nachrichten an die Chat-App senden, auf Schaltflächen in einer Chat-App-Nachricht klicken oder Dialogfelder öffnen und schließen.
Code von
main.gsansehencontactForm.gsEnthält die Widgets, die Formulardaten von Nutzern empfangen. Diese Formulareingabe-Widgets werden in Karten angezeigt, die in Nachrichten und Dialogfeldern erscheinen.
Code von
contactForm.gsansehenappsscript.jsonDas Apps Script-Manifest , das das Apps Script-Projekt für die Chat-App definiert und konfiguriert.
Code von
appsscript.jsonansehen
Apps Script-Projekt erstellen
So erstellen Sie ein Apps Script-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 Ihrer Kopie des Apps Script-Projekts einen Namen:
Klicken Sie auf Kopie von Kontakte in Google Chat verwalten.
Geben Sie unter Projekttitel
Contact Manager - Google Chat appein.Klicken Sie auf Umbenennen.
Wenn Sie in Zukunft bestimmte Google APIs verwenden oder Ihre App veröffentlichen möchten, müssen Sie Ihr Cloud-Projekt mit Ihrem Apps Script-Projekt verknüpfen. Für diese Anleitung ist das nicht erforderlich. Weitere Informationen finden Sie in der Anleitung zu Google Cloud-Projekten.
Apps Script-Bereitstellung erstellen
Nachdem der gesamte Code vorhanden ist, stellen Sie das Apps Script-Projekt bereit. 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 Bereitstellungs-ID zu kopieren, und dann auf Fertig.
Chat-App in der Google API Console konfigurieren
In diesem Abschnitt wird beschrieben, wie Sie die Google Chat API in der Google API Console mit Informationen zu Ihrer Chat-App konfigurieren, einschließlich der ID der Bereitstellung, die Sie gerade aus Ihrem Apps Script-Projekt erstellt haben.
Klicken Sie in der Google API Console auf Menü > APIs und Dienste > Aktivierte APIs und Dienste > Google Chat API > Konfiguration.
Deaktivieren Sie Diese Chat-App als Google Workspace-Add‑on erstellen. Ein Dialogfeld wird geöffnet, in dem Sie die Aktion bestätigen müssen. Klicken Sie im Dialogfeld auf Deaktivieren.
Geben Sie unter App-Name
Contact Managerein.Geben Sie unter Avatar-URL
https://developers.google.com/chat/images/contact-icon.pngein.Geben Sie unter Beschreibung
Manage your personal and business contactsein.Klicken Sie auf den Schalter Interaktive Funktionen aktivieren , um die Option zu aktivieren.
Wählen Sie unter Funktionen die Option Gruppenbereichen und Gruppenunterhaltungen beitreten aus.
Wählen Sie unter Verbindungseinstellungen die Option Apps Script aus.
Fügen Sie unter Bereitstellungs-ID die Apps Script-Bereitstellungs-ID ein, die Sie im vorherigen Abschnitt beim Erstellen der Apps Script-Bereitstellung kopiert haben.
Richten Sie unter Befehle die Slash-Befehle
/aboutund/addContactein:- Klicken Sie auf Slash-Befehl hinzufügen , um den ersten Slash-Befehl einzurichten.
- Geben Sie unter Name
Aboutein. - Geben Sie unter Befehls-ID
1ein. - Geben Sie unter Description
Learn how to use this Chat app to manage your contactsein. - Wählen Sie unter Befehlstyp die Option
Slash commandaus. - Geben Sie unter Name des Slash-Befehls
/aboutein. - Wählen Sie Öffnet ein Dialogfeld aus.
- Klicken Sie auf Fertig.
- Klicken Sie auf Befehl hinzufügen , um einen weiteren Slash-Befehl einzurichten.
- Geben Sie unter Name
Add a contactein. - Geben Sie unter Befehls-ID
2ein. - Geben Sie unter Beschreibung
Submit information about a contactein. - Wählen Sie unter Befehlstyp die Option
Slash commandaus. - Geben Sie unter Name des Slash-Befehls
/addContactein. - Wählen Sie Öffnet ein Dialogfeld aus.
- Klicken Sie auf Fertig.
Wählen Sie unter Sichtbarkeit das Diese Chat-App bestimmten Personen und Gruppen in YOUR DOMAIN Kästchen aus 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 Chat installiert und getestet werden.
Chat-App testen
Öffnen Sie zum Testen Ihrer Chat-App 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 1 oder mehrere Personen hinzufügen den Namen Ihrer Chat-App ein.
Wählen Sie Ihre Chat-App in den Ergebnissen aus. Eine Direktnachricht wird geöffnet.
Geben Sie in der neuen Direktnachricht mit der Chat-App
/addContactein und drücken Sie die Eingabetaste.Geben Sie im daraufhin geöffneten Dialogfeld die Kontaktdaten ein:
- Geben Sie im Textfeld Vor- und Nachname einen Namen ein.
- Wählen Sie in der Datumsauswahl Geburtsdatum ein Datum aus.
- Wählen Sie unter Kontakttyp das Optionsfeld Arbeit oder Privat aus.
Klicken Sie auf Überprüfen und senden.
Überprüfen Sie im Bestätigungsdialogfeld die von Ihnen gesendeten Informationen und klicken Sie auf Senden. Die Chat-App antwortet mit einer Text nachricht:
✅ CONTACT NAME has been added to your contacts..Optional können Sie das Kontaktformular auch auf folgende Weise 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 einen
Slash-Befehl, z. B.
Hello. Die Chat-App antwortet mit einem Text und einer Karte, die das Kontaktformular enthält.
- Verwenden Sie den Slash-Befehl
Bereinigen
Damit für die in dieser Anleitung verwendeten Ressourcen keine Kosten für Ihr Google Cloud-Konto anfallen, empfehlen wir Ihnen, das Cloud-Projekt zu löschen.
- Rufen Sie in der Google API Console die Seite Ressourcen verwalten auf. Klicken Sie auf Menü > IAM und 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 dann auf Herunterfahren, um das Projekt zu löschen.
Weitere Informationen
- Auf Befehle antworten
- Informationen von Google Chat-Nutzern erfassen und verarbeiten
- Interaktive Dialogfelder öffnen
- Weitere Google Chat-App-Beispiele