Kontakte in Google Chat erfassen und verwalten

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. Um Informationen zu sammeln, fordert die Chat-App Nutzer auf, ein Kontaktformular in Kartenmitteilungen und Dialogfeldern auszufüllen.

So sieht die Chat App in Aktion aus:

  • Kontaktformular über Slash-Befehl
    Abbildung 1: Die Chat-App antwortet auf den Slash-Befehl /about mit einer Textnachricht und einer Schaltfläche, über die ein Kontaktformular geöffnet wird.
  • Kontaktformular in einem Dialogfeld.
    Abbildung 2: In der Chat-App wird ein Dialogfeld geöffnet, in dem Nutzer Informationen zu einem Kontakt eingeben können.
  • Dialogfeld bestätigen und überprüfen.
    Abbildung 3: Die Chat-App gibt ein Bestätigungsdialogfeld zurück, damit Nutzer die Informationen vor dem Senden prüfen und bestätigen können.
  • Eine SMS, die den neuen Kontakt bestätigt.
    Abbildung 4: Nachdem der Nutzer das Formular gesendet hat, sendet die Chat-App eine private SMS, um die Übermittlung zu bestätigen.
  • Kontaktformular aus einer Kartenmitteilung
    Abbildung 5: Die Chat-App fordert Nutzer auch auf, einen Kontakt über eine Karte in einer Nachricht hinzuzufügen.

Vorbereitung

Lernziele

Architektur

Die Chat-App wird in Google Apps Script erstellt und verwendet Interaktionsereignisse, um Nutzer von Google Chat zu verarbeiten und auf sie zu reagieren.

So interagiert ein Nutzer in der Regel mit der Chat-App:

  1. Ein Nutzer öffnet eine Direktnachricht an die Chat-App oder fügt die Chat-App einem vorhandenen Gruppenbereich hinzu.

  2. Die Chat-App fordert den Nutzer auf, einen Kontakt hinzuzufügen, indem sie ein Kontaktformular als card-Objekt erstellt und anzeigt. So reagiert die Chat App auf Nutzer, wenn das Kontaktformular angezeigt wird:

    • Antwortet auf @Erwähnungen und Direktnachrichten mit einer Kartenmitteilung, die das Kontaktformular enthält.
    • Reagiert auf den Slash-Befehl /addContact, indem ein Dialogfeld mit dem Kontaktformular geöffnet wird.
    • Reagiert auf den Slash-Befehl /about mit einer SMS, die die Schaltfläche Kontakt hinzufügen enthält. Nutzer können darauf klicken, um ein Dialogfeld mit dem Kontaktformular zu öffnen.

  3. Wenn das Kontaktformular angezeigt wird, gibt der Nutzer 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 (entweder Personal oder Work) auswählen und senden können.
    • Schaltfläche Überprüfen und senden: ein buttonList-Array mit dem button-Widget, auf das der Nutzer klickt, um die eingegebenen Werte zu senden.

  4. 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.

  5. Der Nutzer prüft die Bestätigungskarte und klickt auf die Schaltfläche Senden, um die Kontaktdaten zu bestätigen.

  6. Die Google Chat App sendet eine private SMS, die die Einreichung bestätigt.

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

  1. Klicken Sie in der Google Cloud Console auf das Menü  > IAM & Verwaltung > Projekt erstellen.

    Zur Seite „Projekt erstellen“

  2. Geben Sie im Feld Projektname einen aussagekräftigen Namen für Ihr Projekt ein.

    Optional: Wenn Sie die Projekt-ID bearbeiten möchten, klicken Sie auf 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.

  3. Klicken Sie im Feld Speicherort auf Durchsuchen, um mögliche Speicherorte für Ihr Projekt aufzurufen. Klicken Sie danach auf Auswählen.
  4. Klicken Sie auf Erstellen. In der Google Cloud Console wird die Seite „Dashboard“ aufgerufen 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 zum Erstellen eines Cloud-Projekts den Befehl gcloud projects create: 
    gcloud projects create PROJECT_ID
     Ersetzen Sie PROJECT_ID durch die ID des Projekts, das Sie erstellen möchten.

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 die interne Verwendung vorgesehen ist. Daher ist es in Ordnung, Platzhalterinformationen für den Einwilligungsbildschirm zu verwenden. Ersetzen Sie vor dem Veröffentlichen der Chat-App alle Platzhalterinformationen durch echte Informationen.

  1. Rufen Sie in der Google Cloud Console das Menü  > ;> Branding auf.

    Zu Branding

  2. Wenn Sie diebereits konfiguriert haben, können Sie die folgenden Einstellungen für den OAuth-Zustimmungsbildschirm unter Branding, Zielgruppe und Datenzugriff konfigurieren. Wenn Sie die Meldung noch nicht konfiguriert sehen, klicken Sie auf Jetzt starten:

    1. Geben Sie unter App-Informationen bei App-Name Contact Manager ein.
    2. Wählen Sie unter E-Mail-Adresse für den Nutzer-Support Ihre E-Mail-Adresse oder eine geeignete Google-Gruppe aus.
    3. Klicken Sie auf Weiter.
    4. Wählen Sie unter Zielgruppe die Option Intern aus. Wenn Sie Intern nicht auswählen können, wählen Sie Extern aus.
    5. Klicken Sie auf Weiter.
    6. Geben Sie unter Kontaktdaten eine E-Mail-Adresse ein, unter der Sie über Änderungen an Ihrem Projekt benachrichtigt werden können.
    7. Klicken Sie auf Weiter.
    8. Sehen Sie sich unter Fertigstellen die Nutzerdatenrichtlinie für Google API-Dienste an und wählen Sie Ich stimme der Nutzerdatenrichtlinie für Google API-Dienste zu aus, wenn Sie damit einverstanden sind.
    9. Klicken Sie auf Weiter.
    10. Klicken Sie auf Erstellen.
    11. Wenn Sie Extern als Nutzertyp ausgewählt haben, fügen Sie Testnutzer hinzu:
      1. Klicken Sie auf Zielgruppe.
      2. Klicken Sie unter Testnutzer auf Nutzer hinzufügen.
      3. Geben Sie Ihre E‑Mail-Adresse und die E‑Mail-Adressen aller anderen autorisierten Testnutzer ein und klicken Sie auf Speichern.

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 einzeln kopieren und einfügen.

Optional können Sie sich das gesamte Projekt auf GitHub ansehen.

Auf GitHub ansehen

Hier finden Sie einen Überblick über die einzelnen Dateien:

main.gs

Verarbeitet 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.

main.gs-Code ansehen

apps-script/contact-form-app/main.gs
/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a MESSAGE interaction event in Google Chat.
 *
 * @param {Object} event the MESSAGE interaction event from Chat API.
 * @return {Object} message response that opens a dialog or sends private
 *                          message with text and card.
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {
      case 1:
        // If the slash command is "/about", responds with a text message and button
        // that opens a dialog.
        return {
          text: "Manage your personal and business contacts 📇. To add a " +
                  "contact, use the slash command `/addContact`.",
          accessoryWidgets: [{
            buttonList: { buttons: [{
              text: "Add Contact",
              onClick: { action: {
                function: "openInitialDialog",
                interaction: "OPEN_DIALOG"
              }}
            }]}
          }]
        }
      case 2:
        // If the slash command is "/addContact", opens a dialog.
        return openInitialDialog();
    }
  }

  // If user sends the Chat app a message without a slash command, the app responds
  // privately with a text and card to add a contact.
  return {
    privateMessageViewer: event.user,
    text: "To add a contact, try `/addContact` or complete the form below:",
    cardsV2: [{
      cardId: "addContactForm",
      card: {
        header: { title: "Add a contact" },
        sections:[{ widgets: CONTACT_FORM_WIDGETS.concat([{
          buttonList: { buttons: [{
            text: "Review and submit",
            onClick: { action: { function : "openConfirmation" }}
          }]}
        }])}]
      }
    }]
  };
}

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

/**
  * Validates and submits information from a dialog or card message
  * and notifies status.
  *
  * @param {Object} event the interactive event with parameters.
  * @return {Object} a message response that opens a dialog or posts a private
  *                  message.
  */
function submitForm(event) {
  const contactName = event.common.parameters["contactName"];
  // Checks to make sure the user entered a contact name.
  // If no name value detected, returns an error message.
  const errorMessage = "Don't forget to name your new contact!";
  if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  }
  if (!contactName) {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }

  // The Chat app indicates that it received form data from the dialog or card.
  // Sends private text message that confirms submission.
  const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "OK",
          userFacingMessage: "Success " + contactName
        }}
      }
    };
  }
  return {
    actionResponse: { type: "NEW_MESSAGE" },
    privateMessageViewer: event.user,
    text: confirmationMessage
  };
}

/**
 * Extracts form input value for a given widget.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @param {String} widgetName a unique ID for the widget, specified in the widget's name field.
 * @returns the value inputted by the user, null if no value can be found.
 */
function fetchFormValue(event, widgetName) {
  const formItem = event.common.formInputs[widgetName][""];
  // For widgets that receive StringInputs data, the value input by the user.
  if (formItem.hasOwnProperty("stringInputs")) {
    const stringInput = event.common.formInputs[widgetName][""].stringInputs.value[0];
    if (stringInput != null) {
      return stringInput;
    }
  // For widgets that receive dateInput data, the value input by the user.
  } else if (formItem.hasOwnProperty("dateInput")) {
    const dateInput = event.common.formInputs[widgetName][""].dateInput.msSinceEpoch;
     if (dateInput != null) {
       return dateInput;
     }
  }

  return null;
}

/**
 * Converts date in milliseconds since epoch to user-friendly string.
 *
 * @param {Object} millis the milliseconds since epoch time.
 * @return {string} Display-friend date (English US).
 */
function convertMillisToDateString(millis) {
  const date = new Date(millis);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-US', options);
}
contactForm.gs

Enthält die Widgets, die Formulardaten von Nutzern empfangen. Diese Widgets für die Formulareingabe werden in Karten angezeigt, die in Nachrichten und Dialogfeldern erscheinen.

contactForm.gs-Code ansehen

apps-script/contact-form-app/contactForm.gs
/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];
appsscript.json

Das Apps Script-Manifest, das das Apps Script-Projekt für die Chat-App definiert und konfiguriert.

appsscript.json-Code ansehen

apps-script/contact-form-app/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

Cloud-Projektnummer und ‑ID ermitteln

  1. Rufen Sie in der Google Cloud Console Ihr Cloud-Projekt auf.

    Zur Google Cloud Console

  2. Klicken Sie auf „Einstellungen und Dienstprogramme“  > Projekteinstellungen.

  3. Notieren Sie sich die Werte in den Feldern Projektnummer und Projekt-ID. Sie verwenden sie in den folgenden Abschnitten.

Apps Script-Projekt erstellen

So erstellen Sie ein Apps Script-Projekt und verbinden es mit Ihrem Cloud-Projekt:

  1. Klicken Sie auf die folgende Schaltfläche, um das Apps Script-Projekt Kontakte in Google Chat verwalten zu öffnen.
    Projekt öffnen
  2. Klicken Sie auf  Übersicht.
  3. Klicken Sie auf der Übersichtsseite auf Symbol zum Erstellen einer Kopie Kopie erstellen.

  4. Geben Sie einen Namen für die Kopie des Apps Script-Projekts ein:

    1. Klicken Sie auf Kopie von „Kontakte in Google Chat verwalten“.

    2. Geben Sie unter Projekttitel Folgendes ein: Contact Manager - Google Chat app.

    3. Klicken Sie auf Umbenennen.

Cloud-Projekt für das Apps Script-Projekt festlegen

  1. Klicken Sie in Ihrem Apps Script-Projekt auf Symbol für Projekteinstellungen Projekteinstellungen.
  2. Klicken Sie unter Google Cloud Platform-Projekt (GCP-Projekt) auf Projekt ändern.
  3. Fügen Sie unter GCP-Projektnummer die Projektnummer Ihres Cloud-Projekts ein.
  4. Klicken Sie auf Projekt festlegen. Das Cloud-Projekt und das Apps Script-Projekt sind jetzt verbunden.

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.

  1. Öffnen Sie in Apps Script das Projekt der Chat App.

    Zu Apps Script wechseln

  2. Klicken Sie auf Bereitstellen > Neue Bereitstellung.

  3. Wenn Add-on noch nicht ausgewählt ist, klicken Sie neben Typ auswählen auf die Bereitstellungstypen Symbol für Projekteinstellungen und wählen Sie Add-on aus.

  4. Geben Sie unter Beschreibung eine Beschreibung für diese Version ein, z. B. Test of Contact Manager.

  5. Klicken Sie auf Bereitstellen. Apps Script meldet eine erfolgreiche Bereitstellung und stellt eine Bereitstellungs-ID bereit.

  6. Klicken Sie auf  Kopieren, um die Bereitstellungs-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 aus Ihrem Apps Script-Projekt erstellt haben.

  1. Klicken Sie in der Google Cloud Console auf das Menü > Weitere Produkte > Google Workspace > Produktbibliothek > Google Chat API > Verwalten > Konfiguration.

    Zur Chat API-Konfiguration

  2. Geben Sie unter App-Name Contact Manager ein.

  3. Geben Sie unter Avatar URL (Avatar-URL) https://developers.google.com/chat/images/contact-icon.png ein.

  4. Geben Sie unter Beschreibung den Wert Manage your personal and business contacts ein.

  5. Klicke auf die Ein/Aus-Schaltfläche Interaktive Funktionen aktivieren, um die Position „Ein“ festzulegen.

  6. Wählen Sie unter Funktionsweise die Option Gruppenbereichen und Gruppenunterhaltungen beitreten aus.

  7. Wählen Sie unter Verbindungseinstellungen die Option Apps Script aus.

  8. Fügen Sie unter Deployment-ID die Apps Script-Deployment-ID ein, die Sie im vorherigen Abschnitt beim Erstellen des Apps Script-Deployments kopiert haben.

  9. Richten Sie unter Befehle die Slash-Befehle /about und /addContact ein:

    1. Klicken Sie auf Slash-Befehl hinzufügen, um den ersten Slash-Befehl einzurichten.
    2. Geben Sie unter Name About ein.
    3. Geben Sie als Befehls-ID 1 ein.
    4. Geben Sie unter Beschreibung Learn how to use this Chat app to manage your contacts ein.
    5. Wählen Sie unter Befehlstyp die Option Slash command aus.
    6. Geben Sie unter Name des Slash-Befehls /about ein.
    7. Wählen Sie Öffnet ein Dialogfeld aus.
    8. Klicken Sie auf Fertig.
    9. Klicken Sie auf Befehl hinzufügen, um einen weiteren Slash-Befehl einzurichten.
    10. Geben Sie unter Name Add a contact ein.
    11. Geben Sie als Befehls-ID 2 ein.
    12. Geben Sie unter Beschreibung Submit information about a contact ein.
    13. Wählen Sie unter Befehlstyp die Option Slash command aus.
    14. Geben Sie unter Name des Slash-Befehls /addContact ein.
    15. Wählen Sie Öffnet ein Dialogfeld aus.
    16. Klicken Sie auf Fertig.

  10. Wählen Sie unter Sichtbarkeit das Kästchen Diese Chat-App bestimmten Personen und Gruppen in YOUR DOMAIN zur Verfügung stellen aus und geben Sie Ihre E-Mail-Adresse ein.

  11. Wählen Sie unter Logs die Option Fehler in Logging protokollieren aus.

  12. Klicken Sie auf Speichern. Die Meldung „Konfiguration gespeichert“ wird angezeigt.

Die Chat-App kann in Google Chat installiert und getestet werden.

Chat App testen

So testen Sie Ihre Chat-App: Öffnen Sie einen Direktnachrichtenbereich mit der Chat-App und senden Sie eine Nachricht:

  1. Öffnen Sie Google Chat mit dem Google Workspace-Konto, das Sie angegeben haben, als Sie sich als vertrauenswürdiger Tester hinzugefügt haben.

    Zu Google Chat wechseln

  2. Klicken Sie auf  Neuer Chat.
  3. Geben Sie im Feld Eine oder mehrere Personen hinzufügen den Namen Ihrer Chat-App ein.

  4. Wählen Sie Ihre Chat-App aus den Ergebnissen aus. Eine Direktnachricht wird geöffnet.

  1. Geben Sie in der neuen Direktnachricht mit der Chat App /addContact ein und drücken Sie die Eingabetaste.

  2. Geben Sie im daraufhin geöffneten Dialogfeld die Kontaktdaten ein:

    1. Geben Sie im Textfeld Vor- und Nachname einen Namen ein.
    2. Wählen Sie in der Datumsauswahl Geburtsdatum ein Datum aus.
    3. Wählen Sie unter Kontakttyp das Optionsfeld Geschäftlich oder Privat aus.

  3. Klicken Sie auf Überprüfen und senden.

  4. Prüfen Sie im Bestätigungsdialog die von Ihnen eingegebenen Informationen und klicken Sie auf Senden. Die Chat-App antwortet mit einer SMS, in der ✅ CONTACT NAME has been added to your contacts. steht.

  5. Optional können Sie das Kontaktformular auch auf folgende Weise testen und senden:

    • Verwenden Sie den Slash-Befehl /about. Chat-App-Antworten mit einer SMS und einer Zubehör-Widget-Schaltfläche mit dem Text Add a contact. Klicken Sie auf die Schaltfläche, um ein Dialogfeld mit dem Kontaktformular zu öffnen.
    • Senden Sie eine Direktnachricht ohne Slash-Befehl an die Chat App, z. B. Hello. Die Chat-App antwortet mit einem Text und einer Karte, die das Kontaktformular enthält.

Bereinigen

Damit Ihrem Google Cloud-Konto die in dieser Anleitung verwendeten Ressourcen nicht in Rechnung gestellt werden, empfehlen wir, das Cloud-Projekt zu löschen.

  1. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten. Klicken Sie auf das Menü > IAM & Verwaltung > Ressourcen verwalten.

    Zum Ressourcenmanager

  2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen .
  3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.