Apps für Google Chat mit Gemini erstellen

1. Hinweis

Was sind Google Chat-Apps mit Gemini?

Google Chat-Apps mit Gemini bieten folgende Möglichkeiten:

  • Wenn Sie Ihre Dienste und Ressourcen in Google Chat einbinden, können Nutzer Informationen abrufen und Aktionen ausführen, ohne die Unterhaltung verlassen zu müssen.
  • Durch Einbindung in das Generative-AI-Modell Gemini können Nutzer zu bestimmten Zeiten Daten wie Text oder Bilder erstellen oder suchen und so Ihre Workflows optimieren.

Vorteile der Einbindung von Google Chat-Apps in Gemini

Die typischen Anwendungsfälle von generativen KI-Modellen wie Gemini lassen sich in die folgenden Kategorien fallen:

  • Erstellen und Optimieren von Inhalten: Hier können Sie Marketingtexte verfassen, Beiträge in sozialen Medien verfassen, realistische Bilder erstellen, Musik komponieren oder Videoinhalte erstellen.
  • Datensuche: Extrahieren Sie wichtige Erkenntnisse aus einer unstrukturierten Wissensdatenbank, fassen Sie lange Texte zusammen, klassifizieren Sie Inhalte oder übersetzen Sie Sprachen mit verbesserter Genauigkeit und Geschwindigkeit.
  • Unterhaltung: Führen Sie natürliche, informative und kreative Gespräche.

Die Möglichkeit, diese Funktionen direkt in die vertraute Oberfläche von Google Chat zu integrieren, ist eine riesige Chance für alle, die die Erfahrung und Produktivität ihrer Nutzer verbessern möchten.

Voraussetzungen

Was Sie erstellen

In diesem Codelab erstellen Sie mit Gemini drei Google Chat-Apps, die die drei im vorherigen Abschnitt vorgestellten Anwendungsfälle abdecken.

App zur Problemverwaltung (Erstellung und Optimierung von Inhalten)

Diese App bietet folgende Funktionen:

  • Verwaltet Probleme von der Erstellung bis zum Schließen mit einfachen Interaktionen, der App-Startseite und der App-Authentifizierung.
  • Überwacht Nachrichten und bietet Inklusionshilfe mit Events und Zubehör-Widgets.

Sie verwenden Gemini für Folgendes:

  • Sie können Problemberichte basierend auf dem Nachrichtenverlauf und den Problemdetails erstellen.
  • Mit Gated Prompts können Sie nicht inklusive Wörter in Nachrichten klassifizieren.

Die wichtigsten verwendeten Technologien sind Vertex AI, Gemini, Apps Script und Google Workspace APIs (Admin, Chat, Docs, Events).

22efdecff4601417.png

2d127c63518673b2.png

9aea694937f2f3ed.png

Diese App basiert auf Gemini, um Fragen in natürlicher Sprache zu verstehen und zu beantworten und Quellenverweise aus unstrukturierten Daten zurückzugeben.

Die wichtigsten verwendeten Technologien sind der Dialogflow CX-Datenspeicher-Agent, der Dialogflow CX-Webhook, Google Cloud Functions und Gemini.

9468866bfe848bb8.png

Feedback-App (Unterhaltung)

Diese App nutzt Gemini zum Erfassen und Speichern von Rezensionen mit Unterhaltungen in natürlicher Sprache.

Die wichtigsten verwendeten Technologien sind der Dialogflow CX-Agent, das Dialogflow CX-Tool, OpenAPI, Google Cloud Functions und Gemini.

99a7a0295f122f31.png

Lerninhalte

  • Google Chat-Apps über Vertex AI in Gemini einbinden.
  • Google Chat-Anwendungen in Dialogflow CX-Agents einbinden.
  • Hier erfahren Sie, wie Sie die neuesten Funktionen von Google Chat verwenden: App-Startseite, Google Chat-Ereignisse und Zubehör-Widgets.

Voraussetzungen

2. Einrichten

Ressourcen initialisieren

In diesem Abschnitt greifen Sie über Ihren bevorzugten Webbrowser auf die folgenden Ressourcen zu und konfigurieren sie.

Apps Script-Projekt

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Klicken Sie auf Einstellungen und aktivieren Sie dann die Google Apps Script API.

ea06c593b347b9d1.png

  1. Wählen Sie Ihr Projekt aus.
  2. Klicken Sie auf Projekteinstellungen.
  3. Klicken Sie das Kästchen Manifestdatei „appsscript.json“ im Editor anzeigen an.
  4. Benennen Sie das Projekt in Chat Apps Gemini um.

12c1485bd248b766.png

Google Cloud-Projekt

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Klicken Sie auf Menü ⋮ > APIs und Dienste > OAuth-Zustimmungsbildschirm > App bearbeiten und setzen Sie App-Name auf Chat Apps Gemini.

  1. Rufen Sie die Google Chat API-Konfiguration auf und legen Sie den App-Namen und die Beschreibung auf Chat Apps Gemini fest.

a71f040755da3b8b.png

Google Chat

Gehen Sie in Google Chat so vor:

  1. Starten Sie gegebenenfalls einen Chat mit der Google Chat App.
  2. Senden Sie eine Nachricht wie Hello, um sicherzustellen, dass sie funktioniert.

9625418251528ae9.png

Quellcode und Ressourcen lokal herunterladen

  1. Laden Sie dieses GitHub-Repository herunter.

  1. Öffnen Sie in Ihrer bevorzugten Entwicklungsumgebung das Verzeichnis apps-script/chat-apps-gemini und rufen Sie dann dasselbe Verzeichnis in Ihrem Terminal auf.

da9478df97c99194.png

clasp installieren und konfigurieren

Mit clasp lassen sich ganz einfach Versionen des Quellcodes bearbeiten und aus der lokalen Umgebung in das Apps Script-Projekt übertragen.

  1. Installieren Sie in Ihrer lokalen Umgebung die aktuellen Versionen von node, npm und clasp.
npm install -g @google/clasp
  1. Melde dich in deinem Konto an:
clasp login

8bc2434e6dc6f22a.png

Wenn der Vorgang erfolgreich war, wird im Webbrowser ein einfacher Bestätigungsbildschirm angezeigt und die Datei .clasprc.json mit Ihren Clientanmeldedaten wird aktualisiert. Sie können sehen, wo sie sich in Ihrem Terminal befindet.

e1d833eb4d5b3a8f.png

3. Anwendung 1: Erstellen

Konzepte kennenlernen

Vertex AI

Vertex AI bietet alles, was Sie zum Erstellen und Verwenden von generativer KI benötigen, einschließlich KI-Lösungen, Agent-Builder, mehr als 130 Basismodelle und einer einheitlichen KI-Plattform.

c9e9c7a1945b22ac.png

Gemini

Gemini ist ein multimodales LLM von Google, das über Vertex AI zugänglich ist. Sie hilft Menschen, ihr menschliches Potenzial zu entfalten, sodass sie ihre Fantasie anregen, ihre Neugier steigern und ihre Produktivität steigern können.

Erweiterter Chat-Dienst

Mit dem erweiterten Chat-Dienst können Sie die Google Chat API in Apps Script verwenden. Scripts können damit Chatbereiche finden, erstellen und ändern, Mitglieder zu Gruppenbereichen hinzufügen oder daraus entfernen sowie Nachrichten mit Text, Karten, Anhängen und Reaktionen lesen oder posten.

Architektur prüfen

8c9c7b7328a69ea6.png

Diese Google Chat-App wurde mit Apps Script entwickelt. Funktionsweise:

  1. Ein Nutzer sendet eine Nachricht an die App, entweder in einer Direktnachricht oder in einem Gruppenbereich.
  2. Die Anwendung, die in einem Apps Script-Projekt implementiert und mit einem Google Cloud-Projekt verknüpft ist, verarbeitet die Nachricht.
  3. Die App lässt sich in Google Docs und Google Chat APIs integrieren.
  4. Die App verwendet den Properties-Dienst, um Daten in Skripteigenschaften zu speichern.
  5. Die App sendet eine synchrone Antwort, entweder in einer Direktnachricht oder im ursprünglichen Gruppenbereich.

Abläufe überprüfen

Problem erstellen

7ca0e8ba3c8255bb.png

Probleme bei dedizierten Gruppenbereichen beheben

51b47714c378a24b.png

Problem in dediziertem Gruppenbereich schließen

89e50228deeab0f9.png

Quellcode prüfen

Das Apps Script-Projekt enthält die folgenden Skripts:

  • Configuration: Konstanten, die basierend auf der Umgebung bearbeitet werden sollen
  • ChatApp: verarbeitet Google Chat-Interaktionsereignisse, einschließlich Nachrichten, Klicks auf Karten, Slash-Befehle und Dialoge.
  • Storage: Dienstprogrammfunktionen, die Properties-Dienste nutzen.
  • ChatAppAuth: Dienstprogrammfunktionen, die auf der Authentifizierung der Google Chat-App basieren.
  • Docs: Dienstprogrammfunktionen, die auf Google Docs basieren.
  • VertexAi: Dienstprogrammfunktionen, die von Vertex AI abhängen.

Im Folgenden sind die Teile aufgeführt, die aktiv beim Generieren von Berichtsdokumenten mit Gemini und Chatbereich-Verläufen verwendet werden:

appsscript.json

// Enables the Admin SDK Directory and Chat services, which you need to retrieve
// messages and usernames.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "AdminDirectory",
    "version": "directory_v1",
    "serviceId": "admin"
  },
  {
    "userSymbol": "Chat",
    "version": "v1",
    "serviceId": "chat"
  }
  ...
]
// Includes the OAuth scopes to request the Admin SDK Directory, Google Chat,
// Google Docs, and Vertex AI APIs.

"oauthScopes": [
  ...
  "https://www.googleapis.com/auth/admin.directory.user.readonly",
  "https://www.googleapis.com/auth/chat.messages.readonly",
  "https://www.googleapis.com/auth/documents",
  "https://www.googleapis.com/auth/cloud-platform",
  ...
]

Configuration.js

// Relies on two constants: the first one is the Google Cloud project ID and the
// second one is the Vertex AI location to be used.

...
const PROJECT_ID = 'replace-with-gcp-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
...

ChatApp.js

// The slash command process function retrieves history, generates content, and passes
// it to the report generator.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    const history = exportSpaceHistory(spaceId);
    const summary = summarizeSpace(history);
    const docUrl = createReport(
      issue.title, issue.description, resolution, history, summary
    );
    ...
  }
  ...
}
/**
 * Fetches and concatenates the 100 first space messages by using the Google Chat API.
 *
 * Messages with slash commands are filtered (app command invocations).
 *
 * @return {string} concatenate space messages in the format "Sender's name: Message"
 */
function exportSpaceHistory(spaceName) {
  const messages = Chat.Spaces.Messages.list(spaceName, { 'pageSize': 100 }).messages;
  // Returns results after fetching message sender display names.
  let users = new Map();
  return messages
    .filter(message => message.slashCommand === undefined)
    .map(message =>
      `${getUserDisplayName(users, message.sender.name)}: ${message.text}`
    ).join('\n');
}
/**
 * Fetches a user's display name by using the Admin Directory API.
 *
 * A cache is used to only call the API once per user.
 *
 * @param {Map} cache the map containing users previously fetched
 * @param {string} userId the user ID to fetch
 * @return {string} the user's display name
 */
function getUserDisplayName(cache, userId) {
  if (cache.has(userId)) {
    return cache.get(userId);
  }
  let displayName = 'Unknown User';
  try {
    const user = AdminDirectory.Users.get(
      userId.replace("users/", ""),
      { projection: 'BASIC', viewType: 'domain_public' });
    displayName = user.name.displayName ? user.name.displayName : user.name.fullName;
  } catch (e) {
    // Ignores errors, uses 'Unknown User' by default.
  }
  cache.set(userId, displayName);
  return displayName;
}

VertexAi.js

/**
 * Summarizes a Google Chat space history with the Gemini Pro model using
 * Vertex AI API.
 *
 * @param {string} history the history
 * @return {string} the summary
 */
function summarizeSpace(history) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options = {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Summarize the following conversation between engineers resolving"
              + " an issue in a few sentences.\n\n" + history
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Docs.js

// The report generator function adds two sections: the first one is for the summary and the second one is for history.
function createReport(..., history, summary) {
  ...
  body.appendParagraph("Summary").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(summary);
  body.appendParagraph("History").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(history);
  ...
}

Google Cloud-Projekt aktualisieren

APIs aktivieren

  1. Aktivieren Sie in der Google Cloud Console die APIs Google Docs, Google Admin SDK und Vertex AI:

  1. Klicken Sie auf das Dreistrich-Menü ⋮ > APIs und Dienste > Aktivierte APIs und Dienste und bestätigen Sie dann, dass die APIs aktiviert sind.

Dienstkonto initiieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > IAM und Verwaltung > Dienstkonten > + Dienstkonto erstellen.

74cf57426419f39.png

  1. Legen Sie Name des Dienstkontos auf chat-app fest.
  2. Legen Sie Beschreibung des Dienstkontos auf Chat app auth fest.
  3. Klicken Sie auf Erstellen und fortfahren.
  4. Klicken Sie auf Fertig. Sie werden zur Seite Dienstkonten weitergeleitet, auf der Sie das von Ihnen erstellte Dienstkonto sehen können.

ca0468f1f93990f9.png

  1. Wählen Sie das neu erstellte Dienstkonto aus.
  2. Wählen Sie den Tab Keys aus.
  3. Klicken Sie auf Schlüssel hinzufügen.
  4. Klicken Sie auf Neuen Schlüssel erstellen.
  5. Wählen Sie JSON aus.
  6. Klicken Sie auf Erstellen.

9f7e6ea020978ab0.png

Das Dialogfeld wird geschlossen und Ihr neu erstelltes öffentliches/privates Schlüsselpaar wird automatisch als JSON-Datei in Ihre lokale Umgebung heruntergeladen. Sie verwenden den Inhalt später, wenn Sie den Quellcode Ihres Apps Script-Projekts bearbeiten.

Konfiguration der Google Chat API aktualisieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Fügen Sie einen Slash-Befehl hinzu.
  2. Legen Sie als Name /create fest.
  3. Legen Sie für Befehls-ID 1 fest.
  4. Lege für Beschreibung den Wert „Create a new issue“ fest.
  5. Klicken Sie das Kästchen Öffnet ein Dialogfeld an.
  6. Fügen Sie einen weiteren Slash-Befehl hinzu.
  7. Legen Sie als Name /close fest.
  8. Legen Sie für Befehls-ID 2 fest.
  9. Lege für Beschreibung den Wert „Close an issue“ fest.
  10. Klicke auf Speichern.

bee2e7b63659ab33.png

Apps Script-Projekt aktualisieren

  • Ändern Sie das aktuelle Verzeichnis in Ihrem lokalen Terminal zu issue-management/1-baseline. Sie enthält den Quellcode. Bevor Sie den Quellcode in Ihr Apps Script-Projekt übertragen, müssen Sie einige Einstellungen konfigurieren.

Quellcode konfigurieren

  1. Legen Sie für die JSON-Konstante CHAT_CREDENTIALS in der Datei Configuration.js den Inhalt der privaten Schlüsseldatei fest, die Sie zuvor heruntergeladen haben.

d721f6bff73c5304.png

  1. Klicken Sie in der Google Cloud Console auf das Dreistrich-Menü ⋮ > IAM & Verwaltung > Einstellungen.

  1. Kopieren Sie die Projekt-ID.

82592fa0bd113469.png

  1. Legen Sie die Stringkonstante mit dem Namen PROJECT_ID in der Datei Configuration.js auf die Projekt-ID fest.

Logo: 383cee561130ceba.png

Einstellungen für clasp konfigurieren

So initialisieren Sie die Einstellungen von clasp, um den Quellcode in das richtige Apps Script-Projekt zu übertragen:

  1. Wählen Sie in der Apps Script-Konsole Ihr Projekt aus.
  2. Wählen Sie Projekteinstellungen aus.
  3. Klicken Sie unter IDs auf Kopieren.

20ea033b6de882c6.png

  1. Erstellen Sie im aktuellen Verzeichnis eine .clasp.json-Datei.
  2. Ersetzen Sie <your-script-id> durch die kopierte ID.
  3. Kopieren Sie das Ergebnis in die Datei .clasp.json.
  4. Speichern Sie die Datei .clasp.json.
{
  "scriptId": "<your-script-id>"
}

Quellcode per Push übertragen

  • Führen Sie dazu diesen Befehl aus:
$clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ ChatApp.js
└─ ChatAppAuth.js
└─ Configuration.js
└─ Docs.js
└─ Storage.js
└─ VertexAi.js
Pushed 7 files.

Ausprobieren

  1. Senden Sie in Google Chat eine Direktnachricht an die App: Hello!. Die App antwortet zwar nicht, wird aber zur Konfiguration aufgefordert.

4c1fc68121dcffed.png

  1. Klicken Sie auf Konfigurieren.
  2. Wählen Sie Ihr Google-Konto aus.
  3. Authentifizieren.
  4. Prüfen und erlauben Sie den Zugriff auf die App.

4a2fd7ac5918bf1a.png

Wenn der Vorgang erfolgreich war, werden ein einfacher Bestätigungsbildschirm auf der Webseite und eine tatsächliche Antwort der App auf Ihre ursprüngliche Nachricht angezeigt.

acb9065568fe47d2.png

2d6ef9c62f47e082.png

  1. Senden Sie eine weitere Direktnachricht an die App, jedoch mit dem Schrägstrich-Befehl /create.

be3f3c6eb0f929c1.png

  1. Legen Sie im Dialogfeld für Titel Issue Title 1 fest.
  2. Setzen Sie Beschreibung auf „Problem Description 1“.
  3. Klicken Sie auf Erstellen.

22efdecff4601417.png

Die App führt folgende Schritte aus:

  1. Schließt das Dialogfeld.
  2. Es wird ein Gruppenbereich mit demselben Titel für die neu erstellte Ausgabe erstellt.
  3. Tritt dem neu erstellten Gruppenbereich bei.
  4. An den neu erstellten Gruppenbereich wird eine Nachricht mit der Beschreibung des Problems gesendet.
  5. Ihnen wird eine Direktnachricht mit einem Link zum neu erstellten Gruppenbereich gesendet.

3253cec2392e281f.png

  1. Senden Sie im neu erstellten Gruppenbereich eine Nachricht mit dem Slash-Befehl /close und der Auflösung wie Not reproducible.

132cc4acfc10b98c.png

Die App führt folgende Schritte aus:

  1. Ein Berichtsdokument in Google Docs erstellt.
  2. Dadurch wird eine Nachricht mit einem Link zum neu erstellten Berichtsdokument an den entsprechenden Gruppenbereich gesendet.

2d127c63518673b2.png

  1. Öffnen Sie das Berichtsdokument. Sie enthält grundlegende Informationen, den Verlauf und eine Zusammenfassung.

9aea694937f2f3ed.png

4. Optional: App 1: App-Startseite hinzufügen

Konzepte kennenlernen

Die App-Startseite ist eine anpassbare Kartennachricht, die eine Chat-App an einen Nutzer sendet, wenn er über eine Direktnachricht an die Chat-App auf den Tab Startseite zugreift. Sie wird normalerweise verwendet, um App-Dokumentation oder eine Übersicht anzuzeigen. Technisch gesehen gibt es ein spezielles Ereignis, das behandelt werden soll, das auf denselben Grundprinzipien wie Kartennachrichten basiert.

65f56f70f67a32e4.png

Abläufe überprüfen

Probleme verwalten

10663f5fc107fb3f.png

Quellcode prüfen

Das Apps Script-Projekt muss bearbeitet werden.

ChatApp.js

/**
 * Handles app home requests in Google Chat.
 * 
 * Displays the latest status of all issues.
 */
function onAppHome() {
  // Generates one card section per issue.
  var sections = [];
  for (var issueKey in appProperties.getProperties()) {
    const issue = JSON.parse(appProperties.getProperty(issueKey));
    if (issue.spaceId) {
      sections.push({
        header: `${issue.status} - ${issue.title}`,
        widgets: [{ textParagraph: {
            text: `Description: ${issue.description}`
          }}, { textParagraph: {
            text: `Resolution: ${issue.resolution}`
          }}, { buttonList: { buttons: [{
              text: "Open space",
              onClick: { openLink: {
                url: `https://mail.google.com/mail/u/0/#chat/space/${issue.spaceId}`
              }}
            }, {
              text: "Open report",
              onClick: { openLink: {
                url: issue.reportUrl !== "" ? issue.reportUrl : "docs.new"
              }},
              disabled: issue.reportUrl === ""
          }]}
        }]
      });
    }
  }

  return { action: { navigations: [{ push_card: {
    sections: sections
  }}]}};
}

Google Cloud-Projekt aktualisieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie unter Interaktive Funktionen das Kästchen Support App-Startseite an.

97159c1c69ca8303.png

Führen Sie in Ihrer lokalen Umgebung die folgenden Schritte aus:

  1. Ändern Sie das aktuelle Verzeichnis in Ihrem Terminal zu issue-management/2-app-home. Sie enthält den Quellcode, den Sie verwenden müssen.
  2. Kopieren Sie die Datei issue-management/1-baseline/.clasp.json in Ihr aktuelles Verzeichnis.
  3. Kopieren Sie die Datei issue-management/1-baseline/Configuration.js in Ihr aktuelles Verzeichnis, damit das vorhandene Verzeichnis ersetzt wird.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Gehen Sie in Google Chat so vor:

  1. Senden Sie mit dem Slash-Befehl „/create“ eine Direktnachricht an die App. In der App wird ein Dialogfeld geöffnet.
  2. Lege für Titel Issue Title 2 fest.
  3. Setzen Sie Beschreibung auf „Problem Description 2“.
  4. Klicken Sie auf Erstellen.

3b2a8690e758f965.png

  1. Wählen Sie in Ihrem Gruppenbereich in der Google Chat App den Tab Startseite aus. Dort sehen Sie Details zu den von Ihnen erstellten Problemen.

ed8e32da0e6f2ac6.png

5. Optional: Anwendung 1: Gruppenbereichsüberwachung hinzufügen

Konzepte ansehen

Pub/Sub

Pub/Sub ist ein asynchroner und skalierbarer Messaging-Dienst, der die Dienste, die Nachrichten generieren, von den Diensten entkoppelt, die diese Nachrichten verarbeiten. Mit Pub/Sub können Sie Systeme von Ereigniserstellern und -nutzern, den Publishern und Abonnenten, erstellen. Publisher kommunizieren asynchron mit Abonnenten, indem sie Ereignisse übertragen und keine synchronen Remote-Prozeduraufrufe (RPCs).

Publisher senden Ereignisse an den Pub/Sub-Dienst, ohne dabei zu berücksichtigen, wie oder wann diese verarbeitet werden. Pub/Sub sendet dann Ereignisse an alle Dienste, die darauf reagieren. Bei Systemen, die über RPCs kommunizieren, müssen Publisher warten, bis Abonnenten die Daten erhalten. Die asynchrone Integration in Pub/Sub erhöht jedoch die Flexibilität und Robustheit des Gesamtsystems.

Thema: Eine benannte Ressource, die für einen Nachrichtenfeed steht. Sie müssen ein Thema erstellen, bevor Sie es veröffentlichen oder abonnieren können.

Abo: Um Nachrichten zu erhalten, die zu einem Thema veröffentlicht wurden, müssen Sie ein Abo für dieses Thema erstellen. Der Abonnentenclient empfängt und verarbeitet die in dem Thema veröffentlichten Nachrichten. Ein Thema kann mehrere Abos haben, aber ein bestimmtes Abo gehört zu einem einzigen Thema.

Google Workspace-Veranstaltungen

Google Workspace-Ereignisse beziehen sich auf Änderungen an Google Workspace-Ressourcen, z. B. das Erstellen, Aktualisieren oder Löschen von Ressourcen. Apps können Google Workspace-Ressourcen abonnieren, um relevante Ereignisse asynchron zu empfangen und zu verarbeiten.

7816e477b112bfb6.png

So sendet die Google Workspace Events API im Rahmen eines Abos Ereignisse an eine App:

  1. Die App abonniert eine Ressource in einer Google Workspace-App, z. B. einen Gruppenbereich.
  2. Die Ressource, die die App abonniert hat.
  3. Die Google Workspace-App sendet ein Ereignis an ein Thema in Pub/Sub, das als Benachrichtigungsendpunkt für das Google Workspace-Abo der App dient. Das Ereignis enthält Daten darüber, was sich in der Ressource geändert hat.
  4. Die Anwendung verarbeitet die Pub/Sub-Nachricht, die das Ereignis enthält, und ergreift bei Bedarf Maßnahmen.

Abläufe überprüfen

Problem erstellen (Update)

6d7a9d7a68666a80.png

Probleme mit dedizierten Gruppenbereichen beheben (Update)

17e60f052f222456.png

Problem in dediziertem Bereich schließen (Update)

742d490ea0b6fe3a.png

Abos verarbeiten

de3017100dec6401.png

Quellcode prüfen

Das Apps Script-Projekt muss bearbeitet werden.

appsscript.json

// Enables the Workspace Events service.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "WorkspaceEvents",
    "version": "v1",
    "serviceId": "workspaceevents"
  }
  ...
]

Configuration.js

// Adds two constants: the first one is the Pub/Sub topic ID and the second one
// is the Pub/Sub subscription ID to be used to retrieve Google Workspace events.

...
const GWS_PUBSUB_TOPIC_ID = `projects/${PROJECT_ID}/topics/workspace-events`;
const GWS_PUBSUB_SUBSCRIPTION_ID =
  `projects/${PROJECT_ID}/subscriptions/workspace-events-sub`;
...

ChatApp.js

// Edits the function to delete the subscription at issue closure.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    deleteSubscription(issue.subscriptionId);
    ...
  }
  ...
}
// Edits the function to create the subscription.

function createIssue(event) {
  ...
  const subscriptionId = createSpaceSubscription(spaceUrl);
  const createdIssue = saveCreatedIssue(..., subscriptionId);
  ...
}
// Edits the function to delete the subscription.

function onRemoveFromSpace(event) {
  ...
  deleteSubscription(issue.subscriptionId);
  ...
}

Storage.js

// Edits the function to keep track of the subscription ID.

function saveCreatedIssue(..., spaceId, subscriptionId) {
  ...
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    subscriptionId: subscriptionId,
    ...
  }));
  ...
}

WorkspaceEvent.js

/**
 * Creates a new subscription to Google Workspace Events associated to a
 * Google Chat space.
 * 
 * The subscription scope includes message creation events and resources.
 * 
 * @param {string} spaceId the space ID to create a subscription for
 * @return the ID of the newly created subscription
 */
function createSpaceSubscription(spaceId) {
  const operation = WorkspaceEvents.Subscriptions.create({
    targetResource: `//chat.googleapis.com/${spaceId}`,
    eventTypes: ["google.workspace.chat.message.v1.created"],
    notificationEndpoint: { pubsubTopic: GWS_PUBSUB_TOPIC_ID },
    payloadOptions: { includeResource: true },
  });

  return operation.response.name;
}
/**
 * Processes events from subscription by using the Google Cloud PubSub API.
 * 
 * It pulls and acknowledges each event.
 */
function processSubscription() {
  const response = UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:pull`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({ maxMessages: 10 })
    }
  );

  const messages = JSON.parse(response.getContentText()).receivedMessages;
  for (var messageIndex in messages) {
    const message = messages[messageIndex];
    const ceType = message.message.attributes["ce-type"];
    const dataStr = Utilities.newBlob(Utilities.base64Decode(message.message.data))
      .getDataAsString();
    if (ceType === "google.workspace.events.subscription.v1.expirationReminder") {
      // Renews subscription.
      renewSubscription(JSON.parse(dataStr).subscription.name);
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      // Processes the message text when it's sent in a space.
      const chatMessage = JSON.parse(dataStr).message;
      if (chatMessage.sender.type !== "BOT") {
        console.log("Message was processed.");
      }
    }
    // Acknowledges successful processing to avoid getting it again next time.
    ackSubscription(message.ackId);
  }
}
/**
 * Acknowledges a subscription event by using the Google Cloud PubSub API.
 * 
 * @param {string} ackId the ID of the event acknowledgment to send
 */
function ackSubscription(ackId) {
  UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:acknowledge`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({
        ackIds: [ackId]
      })
    }
  );
}
/**
 * Renews a subscription to Google Workspace Events.
 * 
 * The default time to live option is used.
 * 
 * @param {string} subscriptionId the ID of the subscription to renew
 */
function renewSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.patch({ttl: '0s'}, subscriptionId);
}
/**
 * Deletes a subscription to Google Workspace Events.
 * 
 * @param {string} subscriptionId the ID of the subscription to delete
 */
function deleteSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.remove(subscriptionId);
}

Google Cloud-Projekt aktualisieren

APIs aktivieren

  1. Aktivieren Sie in der Google Cloud Console Google Workspace Events und PubSub.

  1. Klicken Sie auf das Dreistrich-Menü ⋮ > APIs und Dienste > Aktivierte APIs und Dienste und bestätigen Sie, dass beide aktiviert sind.

Abo starten

Sie müssen ein Pub/Sub-Thema erstellen und abonnieren, damit alle Arbeitsbereichsereignisse gepostet werden können.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Gehen Sie zu Menü ⋮ > Pub/Sub > Themen.

  1. Klicken Sie auf Thema erstellen.
  2. Legen Sie Themen-ID auf workspace-events fest.
  3. Klicken Sie das Kästchen Standardabo hinzufügen an.
  4. Klicken Sie auf Erstellen.

b39f9a0aec7c9939.png

So gewähren Sie Zugriff zum Veröffentlichen von Pub/Sub-Nachrichten zu Ihrem neu erstellten Thema über Google Chat:

  1. Wählen Sie das Thema aus der Liste aus.
  2. Wählen Sie den Tab Berechtigungen aus.
  3. Fügen Sie chat-api-push@system.gserviceaccount.com zu neuen Hauptkonten hinzu.
  4. Wählen Sie als Rolle Pub/Sub-Publisher aus.
  5. Klicke auf Speichern.

8d4016c37532503.png

Apps Script-Projekt aktualisieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Gehen Sie zu Menü ⋮ > IAM und Verwaltung > Einstellungen.

  1. Kopieren Sie die Projekt-ID.

82592fa0bd113469.png

Führen Sie in Ihrer lokalen Umgebung die folgenden Schritte aus:

  1. Ändern Sie das aktuelle Verzeichnis in Ihrem Terminal zu issue-management/3-message-monitoring. Es enthält den Quellcode, den Sie benötigen.
  2. Legen Sie die Stringkonstante mit dem Namen PROJECT_ID in der Datei Configuration.js auf die kopierte Projekt-ID fest.
  3. Legen Sie für die JSON-Konstante CHAT_CREDENTIALS in der Datei Configuration.js den Inhalt der privaten Schlüsseldatei fest, die Sie zuvor heruntergeladen haben.
  4. Kopieren Sie die Datei issue-management/2-app-home/.clasp.json in Ihr aktuelles Verzeichnis.
  5. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Gehen Sie in Google Chat so vor:

  1. Senden Sie mit dem Slash-Befehl „/create“ eine Direktnachricht an die App. In der App wird ein Dialogfeld geöffnet.
  2. Lege für Titel Issue Title 3 fest.
  3. Setzen Sie Beschreibung auf „Problem Description 3“.
  4. Klicken Sie auf Erstellen.
  5. Senden Sie im neu erstellten Gruppenbereich einige Nachrichten, in denen das Problem beschrieben wird.
  6. Senden Sie eine Nachricht mit dem Slash-Befehl /close und einer Auflösung wie Fixed.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Gehe zu Menü ⋮ > Pub/Sub > Abos.

  1. Wählen Sie das Abo workspace-events-sub aus.
  2. Wähle den Tab Nachrichten aus.
  3. Klicken Sie auf Pull. In der Tabelle werden die Nachrichten angezeigt, die Sie an den neu erstellten Gruppenbereich gesendet haben.

82631c9792d83889.png

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wähle Editor aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Bereich Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Run.Im Ausführungsprotokoll sehen Sie, dass die Nachrichten verarbeitet wurden.

c612e8fa2bd0a163.png

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Gehe zu Menü ⋮ > Pub/Sub > Abos.

  1. Wählen Sie das Abo workspace-events-sub aus.
  2. Wähle den Tab Nachrichten aus.
  3. Klicken Sie auf Pull. In der Tabelle werden keine Nachrichten mehr zu den Nachrichten angezeigt, die Sie an den neu erstellten Gruppenbereich gesendet haben.

e185454cac862a7b.png

  • Senden Sie in Google Chat im Gruppenbereich für das dritte Problem, das Sie mit dem Slash-Befehl /create erstellt haben, einige weitere Nachrichten zum Thema.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Gehe zu Menü ⋮ > Pub/Sub > Abos.

  1. Wählen Sie das Abo workspace-events-sub aus.
  2. Wähle den Tab Nachrichten aus.
  3. Klicken Sie auf Pull. In der Tabelle werden keine Nachrichten angezeigt, die sich auf die Nachrichten beziehen, die Sie an den neu erstellten Gruppenbereich gesendet haben.

6. Optional: App 1: Hilfe zu Inklusivität hinzufügen

Konzepte ansehen

Prompts auf Basis von generativer KI sind die Kunst, Anweisungen oder Fragen zu formulieren, um ein Generative-AI-Modell zu einer bestimmten Art der gewünschten Ausgabe zu leiten. Häufig werden Antworten durch das Hinzufügen von Regeln und Bedingungen in den Prompts verknüpft. Dies kann dazu beitragen, dass die Ausgabe sicher, relevant, konsistent und erwartungsgemäß ist.

Abläufe überprüfen

Abos verarbeiten (Update)

780d0802f77dd180.png

Quellcode prüfen

Das Apps Script-Projekt muss bearbeitet werden.

WorkspaceEvent.js

// Edits the function to replace logging by an actual card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      const inclusivityCheck = getInclusivityFeedback(chatMessage.text);
      if (inclusivityCheck !== "It's inclusive!") {
        createAppMessageUsingChatService({
          cardsV2: [{ cardId: "1", card: { header: {
              title: "Inclusivity",
              subtitle: `The following words are not inclusive: ${inclusivityCheck}`
          }}}]
        },
        chatMessage.space.name);
      }
      ...
    }
    ...
  }
  ...
}

VertexAi.js

/**
 * Gets feedback on inclusivity for a text with the Gemini Pro model using
 * Vertex AI API.
 * 
 * Returns "It's inclusive!" when it is otherwise a list of word(s) that might not
 * be optimal.
 *
 * @param {string} text the text
 * @return {string} the feedback
 */
function getInclusivityFeedback(text) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options =  {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Are there any words that obviously go against inclusivity "
            + "in this text:"
            + `\n\n----------\n${text}\n----------\n\n`
            + "If there are not, answer \"It's inclusive!\" "
            + "otherwise answer by listing them separated by commas. "
            + "Do not answer with any explanation."
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Apps Script-Projekt aktualisieren

Führen Sie in Ihrer lokalen Umgebung die folgenden Schritte aus:

  1. Ändern Sie das aktuelle Verzeichnis in Ihrem Terminal zu issue-management/4-inclusivity-help. Es enthält den Quellcode, den Sie benötigen.
  2. Kopieren Sie die Datei issue-management/3-message-monitoring/.clasp.json in Ihr aktuelles Verzeichnis.
  3. Kopieren Sie die Datei issue-management/3-message-monitoring/Configuration.js in Ihr aktuelles Verzeichnis, damit das vorhandene Verzeichnis ersetzt wird.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Gehen Sie in Google Chat so vor:

  1. Senden Sie mit dem Slash-Befehl „/create“ eine Direktnachricht an die App. In der App wird ein Dialogfeld geöffnet.
  2. Lege für Titel Issue Title 4 fest.
  3. Setzen Sie Beschreibung auf „Problem Description 4“.
  4. Klicken Sie auf Erstellen.
  5. Senden Sie im neu erstellten Gruppenbereich It happened to me last week as well.

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wähle Editor aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Bereich Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll können Sie sehen, dass die Nachrichten verarbeitet wurden.

Gehen Sie in Google Chat so vor:

  1. Die App hat in dem neu erstellten Bereich keine Inklusivitätshilfe gesendet.
  2. Senden Sie im neu erstellten Gruppenbereich die Nachricht I had to add myself from the master to fix it.

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wähle Editor aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Bereich Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll können Sie sehen, dass die Nachrichten verarbeitet wurden. Die App hat in Google Chat eine Nachricht zur Inklusivitätshilfe an den neu erstellten Gruppenbereich gesendet.

7936342847acbe2d.png

7. Optional: App 1: Einstellungen hinzufügen

.

Konzepte ansehen

Ein Zubehör-Widget ist ein rahmenloses Widget, das unten in einer von einer App gesendeten Nachricht eingefügt wird. Es wird in der Regel verwendet, um schnelle Reaktionen im spezifischen Nachrichtenkontext zu ermöglichen. Technisch gesehen basiert sie auf denselben Grundprinzipien wie Kartenschaltflächen.

eebe88238f6b13f.png

Abläufe überprüfen

Hilfe zu Inklusion deaktivieren

1bb7a8592ee6221e.png

Quellcode prüfen

Das Apps Script-Projekt muss bearbeitet werden.

ChatApp.js

// Edits the function to handle the inclusivity help disablement action for a
// given space.

function onCardClick(event) {
  ...
  if (event.action.actionMethodName === "disableInclusivityHelp") {
    disableInclusivityHelp(event.common.parameters.spaceId);
  }
}

Storage.js

// Edits the function to keep track of the inclusivity help setting.

function saveCreatedIssue(title, description, spaceId, subscriptionId) {
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    inclusivityHelp: true,
    ...
  }));
  ...
}
/**
 * Disables inclusivity help in a space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 */
function disableInclusivityHelp(spaceId) {
  var issue = JSON.parse(appProperties.getProperty(spaceId));
  issue.inclusivityHelp = false;
  appProperties.setProperty(spaceId, JSON.stringify(issue));
}
/**
 * Checks whether the app should help with inclusivity in a given space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 * @return whether the app should help with inclusivity
 */
function shouldHelpWithInclusivity(spaceId) {
  return JSON.parse(appProperties.getProperty(spaceId)).inclusivityHelp;
}

WorkspaceEvent.js

// Edits the function to display the accessory widget to the existing card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      if (... && shouldHelpWithInclusivity(chatMessage.space.name)) {
        createAppMessageUsingChatService({
          ...
          accessoryWidgets: [{ buttonList: { buttons: [{
            altText: "Disable inclusivity help",
            icon: {
              iconUrl: "https://upload.wikimedia.org/.../Stop_hand_rugen.png"
            },
            onClick: { action: {
              function: "disableInclusivityHelp",
              parameters: [{
                key: "spaceId",
                value: chatMessage.space.name
              }]
            }}
          }]}}]
        }, ...);
        ...
      }
      ...
    }
    ...
  }
  ...
}

Apps Script-Projekt aktualisieren

Führen Sie in Ihrer lokalen Umgebung die folgenden Schritte aus:

  1. Ändern Sie das aktuelle Verzeichnis in Ihrem Terminal zu issue-management/5-disable-help. Es enthält den Quellcode, den Sie benötigen.
  2. Kopieren Sie die Datei issue-management/4-inclusivity-help/.clasp.json in Ihr aktuelles Verzeichnis.
  3. Kopieren Sie die Datei issue-management/4-inclusivity-help/Configuration.js in Ihr aktuelles Verzeichnis, damit das vorhandene Verzeichnis ersetzt wird.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Hilfe deaktivieren

  • Senden Sie in Google Chat in dem Gruppenbereich für die vierte Ausgabe, die Sie mit dem Slash-Befehl /create erstellt haben, die Nachricht I had to add myself from the master to fix.

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wähle Editor aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Bereich Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll können Sie sehen, dass die Nachrichten verarbeitet wurden.

Gehen Sie in Google Chat so vor:

  1. Die App hat eine Nachricht mit Inklusivitätshilfe an den Bereich gesendet, in dem das Problem über ein Zubehör-Widget bearbeitet wird.
  2. Klicken Sie auf das Zubehör-Widget, um die Inklusivitätshilfe zu deaktivieren.

de722cff1928dec9.png

Deaktivierung prüfen

  • Senden Sie in Google Chat in dem Gruppenbereich für die vierte Ausgabe, die Sie mit dem Slash-Befehl /create erstellt haben, die Nachricht I had to add myself from the master to fix.

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wähle Editor aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Bereich Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll können Sie sehen, dass die Nachrichten verarbeitet wurden. In Google Chat hat die App keine Nachricht mit Inklusionshilfe an den entsprechenden Bereich gesendet, da dieser deaktiviert wurde.

347d659db53b73e9.png

8. Anwendung 2: Erstellen

Konzepte kennenlernen

Grundlage für Generative AI

Es geht darum, KI-Modelle faktischer und zuverlässiger zu machen, indem sie mit überprüfbaren Wissensquellen verknüpft werden. Diese Technik verhindert, dass die KI Informationen erfindet, und kann dazu beitragen, Antworten kontextrelevant und weniger voreingenommen zu gestalten.

Natürliche Sprache

Jede Sprache, die von Menschen gesprochen oder geschrieben wird, im Gegensatz zu künstlichen oder computerbasierten Sprachen.

Cloud Storage

Mit Cloud Storage können Sie jederzeit beliebige Datenmengen weltweit speichern und abrufen. Es kann für eine Reihe von Aufgaben verwendet werden, z. B. um Website-Inhalte bereitzustellen, Daten für die Archivierung und Notfallwiederherstellung zu speichern oder große Datenobjekte über direkte Downloads an Nutzer zu verteilen.

Dialogflow CX-Datenspeicher

Dialogflow CX lässt sich in Datenspeicher einbinden. Dabei handelt es sich um Sammlungen von Websites und Dokumenten, die von Datenspeicher-Agents verwendet werden, um Antworten auf Fragen von Endnutzern anhand bestimmter Daten zu finden. Bei einer bestimmten Frage sucht der Datenspeicher-Agent nach einer Antwort aus dem angegebenen Quellinhalt und fasst die Ergebnisse zu einer kohärenten Antwort zusammen. Außerdem enthält er unterstützende Links zu den Quellen der Antwort, über die der Endnutzer mehr erfahren kann.

Architektur prüfen

9d3342d12f3b4dda.png

Diese Google Chat-App wurde mit Dialogflow CX entwickelt und funktioniert so:

  1. Ein Nutzer sendet eine Nachricht an die App, entweder in einer Direktnachricht oder in einem Gruppenbereich.
  2. Die Anwendung, die ein Dialogflow CX-Agent ist und einem Google Cloud-Projekt zugeordnet ist, verarbeitet die Nachricht.
  3. Die Anwendung kann in einen Datenspeicher in Cloud Storage eingebunden werden.
  4. Die App sendet eine synchrone Antwort, entweder in einer Direktnachricht oder im ursprünglichen Gruppenbereich.

Abläufe überprüfen

Frage beantworten

aad9fb5a7ca48956.png

Quellcode prüfen

Die einzige Quelle, die Sie benötigen, ist kein Code, sondern Daten, die Sie als Fundierung verwenden.

google-chat-overview.pdf

Enthält die unstrukturierten Informationen von Google Chat-Apps, einer gedruckten Version einer Seite von der Google Workspace-Entwicklerwebsite.

e9b91c4587b1a3a0.png

Google Cloud-Projekt aktualisieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Aktivieren Sie die Dialogflow API und die Cloud Storage API.

  1. Aktivieren Sie die Vertex AI Agent Builder API.

  1. Klicken Sie auf das Dreistrich-Menü ⋮ > APIs und Dienste > Aktivierte APIs und Dienste und bestätigen Sie, dass alle APIs aktiviert sind.

.

Dialogflow CX-Datenspeicher-Agent erstellen

Wissensdaten initiieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Cloud Storage > Buckets.

4f15978ae9f1b687.png

  1. Klicken Sie auf Erstellen.
  2. Legen Sie für name den Wert gchat-knowledge fest.
  3. Klicken Sie auf Erstellen.

6b38c6d4d2c41bba.png

  1. Wählen Sie den Bucket gchat-knowledge aus.
  2. Klicken Sie auf Dateien hochladen.
  3. Wählen Sie die Datei knowledge-app/grounding/google-chat-overview.pdf aus Ihrer lokalen Umgebung aus.

df89acb22e1762af.png

App erstellen

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Apps.

  1. Klicken Sie auf Neue Anwendung.
  2. Wählen Sie den Chattyp aus.

44276003074bcf14.png

  1. Geben Sie für Company name den Namen Ihres Unternehmens an.
  2. Setze Agent name auf knowledge.
  3. Klicken Sie auf Weiter.

c4fedfd7556f723b.png

  1. Klicken Sie auf Neuen Datenspeicher erstellen.
  2. Wählen Sie Cloud Storage als Datenquelle aus.

6e2440ecf0f8f9bd.png

  1. Wählen Sie Datei aus.
  2. Klicke auf Entdecken.
  3. Wählen Sie die Datei google-chat-overview.pdf aus.
  4. Klicken Sie auf Weiter.
  5. Legen Sie als Namen des Datenspeichers gchat-knowledge-ds fest.
  6. Klicken Sie auf Erstellen.

a675df7490b83900.png

  1. Wählen Sie in der Tabelle den Datenspeicher gchat-knowledge-ds aus.
  2. Klicken Sie auf Erstellen.

f121d580771ed96.png

  1. Klicken Sie nach ein paar Minuten auf Menü ⋮ > Agent-Builder > Apps und sehen Sie nach, dass Sie die App sehen können.

d929a7431dd84968.png

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Datenspeicher.

  1. Klicken Sie auf den Datenspeicher gchat-knowledge-ds. Die Anzahl der Dokumente beträgt 1, was bedeutet, dass sie bereit sind.

558319790a0accf2.png

App fertigstellen und testen

Führen Sie in der Dialogflow CX-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Wählen Sie den Knowledge-Agent aus.

ca9b2fb4be92e8e4.png

  1. Wählen Sie Agent-Einstellungen > Generative AI > Generative Agent aus.
  2. Stellen Sie das Modell von Text Bison auf Gemini Pro um.
  3. Klicke auf Speichern.

68cc4713ec9b25a0.png

  1. Klicken Sie auf Agent testen.
  2. What is Google Chat? senden. Der Agent antwortet mit einer aussagekräftigen Antwort.

8e3a2cb02469041a.png

Google Chat App integrieren

Führen Sie in der Dialogflow CX-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Klicken Sie in der Zeile des Knowledge Agent auf Logo: 1e7ede7abae4aa3c.png > Name kopieren.

e19f61185158110d.png

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Rufen Sie die Google Chat API-Konfiguration auf.

  1. Wählen Sie unter Verbindungseinstellungen die Option Dialogflow aus.
  2. Wählen Sie unter Dialogflow-Einstellungen die Option Dialogflow CX aus.
  3. Legen Sie Name der Agent- oder Umgebungsressource auf den Namen des kopierten Agents fest.
  4. Entfernen Sie die beiden Slash-Befehle.

505ff39a50880904.png

  1. Senden Sie in Google Chat eine Direktnachricht (What is Google Chat?) an die Google Chat App. Der Kundenservicemitarbeiter antwortet mit einem aussagekräftigen Text.

abda9e43b81fb0ea.png

9. Optional: Anwendung 2: Quellen hinzufügen

Konzepte kennenlernen

Dialogflow CX-Webhook

Dienst, der Geschäftslogik hostet oder andere Dienste aufruft. Während einer Dialogflow CX-Sitzung können Webhooks die durch Natural Language Processing extrahierten Daten nutzen, um dynamische Antworten zu generieren, erfasste Daten zu validieren oder Aktionen im Back-End auszulösen.

Cloud Functions

Cloud Functions eignet sich hervorragend zum Erstellen serverloser Back-Ends, für die Datenverarbeitung in Echtzeit und zum Erstellen intelligenter Anwendungen. Es müssen keine Server bereitgestellt, verwaltet, gepatcht oder aktualisiert werden. Sie skalieren automatisch, sind hochverfügbar und fehlertolerant.

Abläufe überprüfen

Frage beantworten (Update)

92767c07c7b252aa.png

Quellcode prüfen

Der einzige Quellcode, den Sie benötigen, ist die Funktion zum Anpassen der Antworten von Kundenservicemitarbeitern an Google Chat-Nachrichten. Er wird als Webhook verwendet.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "agent-response-adapter",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 *
 * It takes a Dialogflow CX agent response as input and returns a
 * valid Google Chat card message with both the text and source links
 */
functions.http('agent-response-adapter', (request, response) => {
  // Creates Google Chat buttons based on the data store agent response
  // grounding details.
  var linkTitles = [];
  var linkButtons = [];
  const grounding = request.body.messages[1].payload.richContent[0][0];
  if (grounding.type === "match_citations") {
    // Supports citation match type.
    grounding.citations.forEach((citation) => {
      // Avoid duplications.
      if (linkTitles.indexOf(citation.title) < 0) {
        linkButtons.push({
          text: citation.title,
          onClick: { openLink: {
            url: citation.actionLink
          }}
        });
        linkTitles.push(citation.title);
      }
    });
  } else if (grounding.type === "info") {
    // Supports info type.
    if (linkTitles.indexOf(grounding.title) < 0) {
      linkButtons.push({
        text: grounding.title,
        onClick: { openLink: {
          url: grounding.actionLink
        }}
      });
      linkTitles.push(grounding.title);
    }
  }

  // Sends the Dialogflow CX fulfillment response to replace the agent response
  // with the Chat message with text and source buttons.
  response.send({ fulfillment_response: {
    merge_behavior: "REPLACE",
    messages: [{ payload: {
      // Reuses the original data store agent response text.
      text: request.body.messages[0].text.text[0],
      cardsV2: [{
        cardId: "sourcesCard",
        card: { sections: [{
          header: "Sources",
          widgets: [{ buttonList: {
            buttons: linkButtons
          }}]
        }]}
      }]
    }}]
  }});
});

Google Cloud-Projekt aktualisieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Aktivieren Sie die Cloud Build API, Cloud Functions, Cloud Logging, Artifact Registry und Cloud Run API.

  1. Klicken Sie auf das Dreistrich-Menü ⋮ > APIs und Dienste > Aktivierte APIs und Dienste und bestätigen Sie dann, dass die APIs aktiviert sind.

Dialogflow CX-Datenspeicher-Agent aktualisieren

Sie müssen eine Cloud Functions-Funktion bereitstellen und den Dialogflow CX-Webhook aktualisieren, um ihn nach Möglichkeit mit mehreren Quellen auszulösen.

Mehrere Quellen zurückgeben

Standardmäßig gibt ein neuer Datenspeicher-Agent maximal eine Quelle zurück. Sie können dies jedoch für weitere Quellen ändern.

Führen Sie in der Dialogflow CX-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Wählen Sie den Knowledge-Agent aus.
  3. Wählen Sie Startseite aus.
  4. Wählen Sie Datenspeicher bearbeiten aus.
  5. Setzen Sie im Abschnitt Agent-Antworten die Antwortoptionen für den Datenspeicher auf 5.
  6. Klicke auf Speichern.

f5932d03057df645.png

Cloud Functions-Funktion initiieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü FORMATTEDCOUNT > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Legen Sie unter Grundlagen für name die Option function-1 fest.
  3. Klicken Sie unter Authentifizierung auf das Optionsfeld Nicht authentifizierte Aufrufe zulassen.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen die Maximale Anzahl von Instanzen auf 3 fest.
  5. Klicken Sie auf Weiter.

bd3790a9285f9c07.png

  1. Lege für Einstiegspunkt den Wert agent-response-adapter fest.
  2. Ersetzen Sie den Standardinhalt durch die Dateien im Verzeichnis knowledge-app/agent-response-adapter.
  3. Klicken Sie auf Bereitstellen.

b379bb8ca0fc1079.png

  1. Kopieren Sie die URL, während Sie einige Minuten warten, bis die Funktion bereitgestellt wird.

eaae08cf048b9b1c.png

Webhook initiieren

Sie müssen den Dialogflow CX-Agent so konfigurieren, dass er einen Webhook verwendet, der die neu bereitgestellte Funktion auslöst.

Führen Sie in der Dialogflow CX-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Wählen Sie den Knowledge-Agent aus.
  3. Wählen Sie Manage > Webhooks > Create (Verwalten > Webhooks > Erstellen) aus.
  4. Legen Sie Anzeigename auf Google Chat Response Adapter fest.
  5. Legen Sie für Webhook URL die URL fest, die Sie zuvor kopiert haben.
  6. Klicke auf Speichern.

5f3c6804d52b87c1.png

  1. Klicken Sie auf Build.
  2. Wählen Sie Startseite aus.
  3. Wählen Sie Datenspeicher bearbeiten aus.
  4. Klicken Sie unter Webhook-Einstellungen auf die Ein/Aus-Schaltfläche Webhook aktivieren.
  5. Wählen Sie Google Chat-Antwortadapter für Webhook aus.
  6. Setze Tag auf arbitrary_tag.
  7. Klicke auf Speichern.

442fcaaec9b8f2e3.png

Test-App

  • Senden Sie in Google Chat eine Direktnachricht mit What is Google Chat? an die Google Chat App. Der Kundenservicemitarbeiter antwortet mit einer aussagekräftigen Antwort und einer Karte mit Quellen (falls vorhanden).

9468866bfe848bb8.png

10. App 3: Erstellen

Konzepte kennenlernen

Unterhaltungen

Dabei handelt es sich um den Austausch von Informationen oder Ideen zwischen zwei oder mehr Personen mithilfe natürlicher Sprache. Das steht im Gegensatz zu technischen Benutzeroberflächen, für die häufig zustandslose, hochstrukturierte und intolerante Plattformen verwendet werden.

OpenAPI-Spezifikation

Sie bietet eine einheitliche Möglichkeit, Informationen durch jede Phase des API-Lebenszyklus zu transportieren. Es ist eine Spezifikationssprache für HTTP-APIs, die Struktur und Syntax auf eine Weise definiert, die nicht an die Programmiersprache gebunden ist, in der die API erstellt wurde. API-Spezifikationen werden normalerweise in YAML oder JSON geschrieben und ermöglichen eine einfache Freigabe und Verwendung der Spezifikation.

Dialogflow CX-Agent

Der grundlegende Baustein von Agent-Apps. Eine Agent-App hat in der Regel viele Agents, wobei jeder Agent für die Ausführung bestimmter Aufgaben definiert ist. Die Agent-Daten werden dem LLM bereitgestellt, sodass es die Informationen hat, die es zum Beantworten von Fragen und Ausführen von Aufgaben benötigt. Jeder Agent kann Informationen bereitstellen, Abfragen an externe Dienste senden oder die Verarbeitung von Unterhaltungen auf einen Dialogflow CX-Ablauf oder einen anderen Agent zur Verarbeitung von Unteraufgaben verschieben.

Dialogflow CX-Tool

Tools werden verwendet, um Agent-Anwendungen mit externen Systemen zu verbinden. Diese Systeme können das Wissen über die Apps der Kundenservicemitarbeiter erweitern und ihnen die Möglichkeit geben, komplexe Aufgaben effizient auszuführen.

Architektur prüfen

9d3342d12f3b4dda.png

Diese Google Chat-App wurde mit Dialogflow CX entwickelt und funktioniert so:

  1. Ein Nutzer sendet eine Nachricht an die App, entweder in einer Direktnachricht oder in einem Gruppenbereich.
  2. Die Anwendung, die ein Dialogflow CX-Agent ist und einem Google Cloud-Projekt zugeordnet ist, verarbeitet die Nachricht.
  3. Die Anwendung lässt sich in einen Agent einbinden.
  4. Die App sendet eine synchrone Antwort, entweder in einer Direktnachricht oder im ursprünglichen Gruppenbereich.

Abläufe überprüfen

Rezension erfassen

a67a5b8b513bfc2c.png

Quellcode prüfen

Sie benötigen lediglich die Funktion zum Simulieren des Back-End-Dienstes, den der Agent als Tool verwendet.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "feedback-app-backend",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 * 
 * It always returns OK in plain text.
 */
functions.http('feedback-app-backend', (request, response) => {
    response.send('OK');
});

service-preview.yaml

// Defines the backend service structure and how to request it.

openapi: 3.1.0
info:
  title: Review Store
  license:
    name: Apache 2.0
    identifier: Apache-2.0
  version: 0.0.1
servers:
  - url: https://us-central1-project-0.cloudfunctions.net
paths:
  /store-review:
    post:
      operationId: storeReview
      summary: Store a new review
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                stars:
                  type: integer
                  format: int64
      responses:
        '200':
          description: success
          content:
            application/json:
              schema:
                type: string

Mock für Back-End-Dienst initiieren

Sie stellen eine Cloud Functions-Funktion bereit, um einen Back-End-Dienst zu simulieren, den die Dialogflow CX-Agent-App einbinden und als Tool aufrufen muss.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü FORMATTEDCOUNT > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Legen Sie unter Grundlagen für name die Option function-2 fest.
  3. Klicken Sie unter Authentifizierung das Optionsfeld Nicht authentifizierte Aufrufe zulassen an.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen die Maximale Anzahl von Instanzen auf 3 fest.
  5. Klicken Sie auf Weiter.

e8cf0ee7441bf634.png

  1. Lege für Einstiegspunkt den Wert feedback-app-backend fest.
  2. Ersetzen Sie den Standardinhalt durch die Dateien im Verzeichnis feedback-app.
  3. Klicken Sie auf Bereitstellen.

bdb5cf9f503aa7f6.png

  1. Kopieren Sie die URL, während Sie einige Minuten warten, bis die Funktion bereitgestellt wird.

Dialogflow CX-Agent-Anwendung erstellen

App erstellen

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Apps.

  1. Klicken Sie auf Neue Anwendung.
  2. Wählen Sie Agent aus.
  3. Legen Sie Anzeigename auf Feedback App fest.
  4. Klicken Sie auf Erstellen.

7ef3dbacee96c5aa.png

Tool initiieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Apps.

  1. Wählen Sie den Agent Feedback App aus.
  2. Klicken Sie auf Tools > + Erstellen.
  3. Legen Sie als Name review fest.
  4. Wählen Sie OpenAPI aus.
  5. Legen Sie für description den folgenden Wert fest:
The tool takes the number of stars as a parameter of the store review method and saves it in a database for later use.
  1. Ersetzen Sie $URL in der Datei feedback-app/service-openapi.yaml durch die URL, die Sie zuvor kopiert haben.
  2. Legen Sie für YAML Schema den bearbeiteten Inhalt der Datei feedback-app/service-openapi.yaml fest.
  3. Klicke auf Speichern.

58085d6d56b603f7.png

Agent initiieren

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Apps.

  1. Wählen Sie den Agent Feedback App aus.
  2. Wählen Sie Agents > Standardmäßiger generativer Agent aus.
  3. Legen Sie für Agent-Name Feedback collector fest.
  4. Legen Sie für goal den folgenden Wert fest:
You are an agent that collects reviews from Google Chat app developers.
A review may be between 0 and 5 stars. The more stars, the more positive the review.
  1. Legen Sie für instructions den folgenden Wert fest:
If the developer didn't provide the number of stars, ask for the number of stars.
After the developer provides the number of stars of the review, confirm the number with the developer and use ${TOOL: review} to store the review with the number of stars.
If ${TOOL: review} fails, apologize and ask to try again later. Otherwise, thank the developer for the review.
  1. Klicke auf Speichern.

ebee7fdfa826b487.png

Test-App

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > Agent-Builder > Apps.

  1. Wählen Sie den Agent Feedback App aus.
  2. Rufen Sie Preview Agent auf.
  3. Wählen Sie unter Agent die Option Feedback Collector aus.
  4. Wählen Sie unter Generatives Modell auswählen die Option gemini-pro aus.
  5. Sende die Nachricht „Hello!“, um zu beginnen.

90ca8cb7b2c1cb4b.png

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü FORMATTEDCOUNT > Cloud Functions.

  1. Wählen Sie Funktion 2 > Logs aus. In einigen Logs wird Google-Dialogflow als Aufrufer angezeigt.

48bfdf1788004d18.png

Google Chat App einbinden

Führen Sie in der Dialogflow CX-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Klicken Sie auf das Aktionsmenü des Feedback App-Agents.
  3. Klicken Sie auf Name kopieren.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Rufen Sie die Google Chat API-Konfiguration auf.

  1. Legen Sie Name der Agent- oder Umgebungsressource auf den Namen des zuvor kopierten Agents fest.

df16619a1cb85cf8.png

  • Senden Sie dazu in Google ChatHello!“ in einer Direktnachricht an die Google Chat App. Der Agent reagiert über die Dialogflow CX-Konsole ähnlich auf Ihren Test.

99a7a0295f122f31.png

11. Bereinigen

Google Cloud-Projekt löschen

Damit Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen nicht in Rechnung gestellt werden, sollten Sie das Google Cloud-Projekt löschen.

Führen Sie in der Google Cloud Console die folgenden Schritte aus:

  1. Klicken Sie auf Menü ⋮ > IAM und Verwaltung > Einstellungen.

  1. Klicken Sie auf Beenden.
  2. Geben Sie die Projekt-ID ein.
  3. Klicken Sie auf Trotzdem beenden.

407699a4e03afea6.png

Apps Script-Projekt löschen

Wir empfehlen Ihnen, auch Ihr Apps Script-Projekt zu löschen.

Führen Sie in der Apps Script-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Klicken Sie auf das Aktionsmenü.
  3. Klicken Sie auf Entfernen.

fa3a42d7d2201eb9.png

12. Glückwunsch

Glückwunsch! Sie haben Google Chat-Apps mit Gemini entwickelt.

Was liegt als Nächstes an?

In diesem Codelab haben wir nur einfache Anwendungsfälle vorgestellt. Es gibt jedoch viele Erweiterungsbereiche, die Sie in Ihren Google Chat-Apps möglicherweise berücksichtigen sollten, wie zum Beispiel:

  • Andere Generative AI-Modelle einbinden, einschließlich benutzerdefinierter Modelle
  • Unterstützt andere Medientypen wie Audio, Bild und Video.
  • Multimodalität nutzen
  • Verlassen Sie sich auf längere Kontextfenster und Feedbackschleifen.
  • Produktionsfertige Google Chat-Apps auf dem Marktplatz veröffentlichen Für Entwickler stehen zahlreiche Ressourcen wie YouTube-Videos, Dokumentationswebsites, Codebeispiele und Anleitungen zur Verfügung.
  • Aktivieren Sie Google Chat für Ihre Organisation. Die Importmodus-Funktion erleichtert den Einstieg.

Weitere Informationen