Apps für Google Chat mit Gemini erstellen

1. Hinweis

Was sind Google Chat-Apps mit Gemini?

Google Chat-Apps mit Gemini bieten folgende Funktionen:

  • Sie können Ihre Dienste und Ressourcen in Google Chat einbinden, damit Nutzer Informationen abrufen und Aktionen ausführen können, ohne die Unterhaltung zu verlassen.
  • Integration in das generative KI‑Modell Gemini, damit Daten wie Text oder Bilder zu bestimmten Zeiten erstellt oder gesucht werden können, um Ihre Workflows zu optimieren.

Warum Google Chat-Apps in Gemini integrieren?

Die typischen Anwendungsfälle von Modellen für generative KI wie Gemini fallen in die folgenden Kategorien:

  • Erstellung und Optimierung von Inhalten Marketingtexte generieren, Beiträge für soziale Medien erstellen, realistische Bilder erstellen, Musik komponieren oder bei der Erstellung von Videoinhalten helfen.
  • Datensuche: Wichtige Informationen aus einer unstrukturierten Wissensdatenbank extrahieren, lange Texte zusammenfassen, Inhalte klassifizieren oder Sprachen mit erhöhter Genauigkeit und Geschwindigkeit übersetzen
  • Unterhaltung Natürliche, informative und kreative Unterhaltungen führen

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

Voraussetzungen

Was Sie erstellen

In diesem Codelab erstellen Sie drei Google Chat-Apps mit Gemini, um die drei Anwendungsfälle abzudecken, die im vorherigen Abschnitt vorgestellt wurden.

App zur Problemverwaltung (Erstellung und Optimierung von Inhalten)

Diese App bietet folgende Funktionen:

  • Verwaltet Probleme von der Erstellung bis zum Schließen mit grundlegenden Interaktionen, der App-Startseite und der App-Authentifizierung.
  • Überwacht Nachrichten und bietet Hilfe zur Inklusion bei Ereignis- und Zubehör-Widgets.

Sie verwenden Gemini für Folgendes:

  • Problemberichte basierend auf dem Nachrichtenverlauf und den Problemdetails erstellen
  • Nicht inklusive Wörter in Nachrichten mit eingeschränkten Prompts 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 nutzt Gemini, um Fragen in natürlicher Sprache zu verstehen und zu beantworten und um 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, um Rezensionen mit Unterhaltungen in natürlicher Sprache zu erfassen und zu speichern.

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

99a7a0295f122f31.png

Lerninhalte

  • Google Chat-Apps über Vertex AI in Gemini einbinden
  • Google Chat-Apps in Dialogflow CX-Agents einbinden
  • So nutzen Sie die neuesten Funktionen von Google Chat: 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 Console die folgenden Schritte aus:

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

ea06c593b347b9d1.png

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

12c1485bd248b766.png

Google Cloud-Projekt

Gehen Sie in der Google Cloud Console so vor:

  1. Wählen Sie Ihr Projekt aus.
  2. Klicken Sie auf Menü ☰ > APIs & Dienste > OAuth-Zustimmungsbildschirm > App bearbeiten und legen Sie dann App-Name auf Chat Apps Gemini fest.

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

a71f040755da3b8b.png

Google Chat

Gehen Sie in Google Chat so vor:

  1. Starten Sie bei Bedarf einen Chat in der Google Chat App.
  2. Senden Sie eine Nachricht, z. B. Hello, um zu prüfen, ob es 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 und rufen Sie dann dasselbe Verzeichnis in Ihrem Terminal auf.

da9478df97c99194.png

clasp installieren und konfigurieren

Wir verwenden clasp, um Versionen des Quellcodes einfach von der lokalen Umgebung in das Apps Script-Projekt zu bearbeiten und zu übertragen.

  1. Installieren Sie in Ihrer lokalen Umgebung die neuesten Versionen von node, npm und clasp.
npm install -g @google/clasp
  1. Melden Sie sich mit Ihrem Konto an:
clasp login

8bc2434e6dc6f22a.png

Wenn der Vorgang erfolgreich war, wird in Ihrem Webbrowser ein Bestätigungsbildschirm angezeigt und die Datei .clasprc.json mit Ihren Clientanmeldedaten wird aktualisiert. Sie können den Speicherort im Terminal herausfinden.

e1d833eb4d5b3a8f.png

3. App 1: Build

Konzepte ansehen

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 Foundation Models und einer einheitlichen KI-Plattform.

c9e9c7a1945b22ac.png

Gemini

Gemini ist ein multimodales LLM von Google, auf das über Vertex AI zugegriffen werden kann. Sie hilft Menschen, ihr volles Potenzial zu entfalten, ihre Fantasie anzuregen, ihre Neugier zu wecken und ihre Produktivität zu steigern.

Erweiterter Chat-Dienst

Mit dem erweiterten Chat-Dienst können Sie die Google Chat API in Apps Script verwenden. So können Skripts Chatbereiche finden, erstellen und ändern, Mitgliedern Bereiche hinzufügen oder sie daraus entfernen und Nachrichten mit Text, Karten, Anhängen und Reaktionen lesen oder posten.

Architektur prüfen

8c9c7b7328a69ea6.png

Diese Google Chat-App wurde mit Apps Script erstellt. Das funktioniert so:

  1. Ein Nutzer sendet eine Nachricht an die App, entweder in einer Direktnachricht oder in einem Gruppenbereich.
  2. Die App, die in einem Apps Script-Projekt implementiert ist und mit einem Google Cloud-Projekt verknüpft ist, verarbeitet die Nachricht.
  3. Die App wird in die Google Docs- und Google Chat-APIs eingebunden.
  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 für Rezensionen

Problem erstellen

7ca0e8ba3c8255bb.png

Probleme in einem dedizierten Bereich beheben

51b47714c378a24b.png

Problem über den dedizierten Bereich schließen

89e50228deeab0f9.png

Quellcode prüfen

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

  • Configuration: Konstanten, die je nach Umgebung bearbeitet werden müssen.
  • ChatApp: Verarbeitet Google Chat-Interaktionsereignisse, einschließlich Nachrichten, Kartentipps, Slash-Befehle und Dialogfelder.
  • Storage: Hilfsfunktionen, die auf Properties Services basieren.
  • ChatAppAuth: Hilfsfunktionen, die auf der Authentifizierung von Google Chat-Apps basieren.
  • Docs: Hilfsfunktionen, die auf Google Docs basieren.
  • VertexAi: Hilfsfunktionen, die auf Vertex AI basieren.

Die folgenden Teile werden aktiv verwendet, wenn Berichte mit Gemini und Chatbereichsverläufen erstellt 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 für Google Docs, Google Admin SDK und Vertex AI:

  1. Klicken Sie auf Menü ☰ > APIs & Dienste > Aktivierte APIs & Dienste und prüfen Sie, ob die APIs aktiviert sind.

Dienstkonto initiieren

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > IAM & Verwaltung > Dienstkonten > + Dienstkonto erstellen.

74cf57426419f39.png

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

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 das neu erstellte öffentliche/private 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.

Google Chat API-Konfiguration aktualisieren

Gehen Sie in der Google Cloud Console so vor:

  1. Fügen Sie einen Slash-Befehl hinzu.
  2. Legen Sie als Name /create fest.
  3. Legen Sie als Befehls-ID 1 fest.
  4. Legen Sie Beschreibung auf 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 als Befehls-ID 2 fest.
  9. Legen Sie Beschreibung auf Close an issue fest.
  10. Klicken Sie auf Speichern.

bee2e7b63659ab33.png

Apps Script-Projekt aktualisieren

  • Wechseln Sie im lokalen Terminal in das Verzeichnis issue-management/1-baseline. Sie enthält den Quellcode. Bevor Sie den Quellcode in Ihr Apps Script-Projekt übertragen, müssen Sie einige Dinge konfigurieren.

Quellcode konfigurieren

  1. Legen Sie die JSON-Konstante mit dem Namen CHAT_CREDENTIALS in der Datei Configuration.js auf den Inhalt der Datei mit dem privaten Schlüssel fest, die Sie zuvor heruntergeladen haben.

d721f6bff73c5304.png

  1. Klicken Sie in der Google Cloud Console auf Menü ☰ > IAM und Verwaltung > Einstellungen.

  1. Kopieren Sie die Projekt-ID.

82592fa0bd113469.png

  1. Legen Sie für die Stringkonstante PROJECT_ID in der Datei Configuration.js die Projekt-ID fest.

383cee561130ceba.png

clasp konfigurieren

So initialisieren Sie die clasp-Einstellungen, 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 Datei mit dem Namen .clasp.json.
  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 ü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 mit Hello! an die App. Die App antwortet nicht, aber es wird eine Nachricht angezeigt, in der Sie aufgefordert werden, die Konfiguration vorzunehmen.

4c1fc68121dcffed.png

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

4a2fd7ac5918bf1a.png

Wenn der Vorgang erfolgreich war, sehen Sie auf der Webseite einen einfachen Bestätigungsbildschirm und eine tatsächliche Antwort der App auf Ihre ursprüngliche Nachricht.

acb9065568fe47d2.png

2d6ef9c62f47e082.png

  1. Senden Sie eine weitere Direktnachricht an die App, aber mit dem Slash-Befehl /create.

be3f3c6eb0f929c1.png

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

22efdecff4601417.png

Die App führt Folgendes aus:

  1. Schließt das Dialogfeld.
  2. Erstellt einen Space mit demselben Titel, der sich mit dem neu erstellten Problem befasst.
  3. Dem neu erstellten Gruppenbereich beitreten
  4. Es wird eine Nachricht mit der Beschreibung des Problems im neu erstellten Gruppenbereich gesendet.
  5. Sie erhalten eine Direktnachricht mit einem Link zum neu erstellten Gruppenbereich.

3253cec2392e281f.png

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

132cc4acfc10b98c.png

Die App führt Folgendes aus:

  1. Erstellt ein Berichts-Dokument in Google Docs.
  2. Es wird eine Nachricht an den Gruppenbereich gesendet, der dem Problem gewidmet ist, mit einem Link zum neu erstellten Berichts-Dokument.

2d127c63518673b2.png

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

9aea694937f2f3ed.png

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

Konzepte ansehen

App-Startseite ist eine anpassbare Kartennachricht, die eine Chat-App an einen Nutzer sendet, wenn der Nutzer über eine Direktnachricht mit der Chat-App auf den Tab Startseite zugreift. Sie wird in der Regel verwendet, um die App-Dokumentation oder eine Übersicht anzuzeigen. Technisch gesehen gibt es ein spezielles Ereignis, das verarbeitet werden muss. Es basiert auf denselben Grundprinzipien wie Kartenbenachrichtigungen.

65f56f70f67a32e4.png

Abläufe für Rezensionen

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

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie im Bereich Interaktive Funktionen das Kästchen App-Startseite unterstützen an.

97159c1c69ca8303.png

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

  1. Wechseln Sie im Terminal in das Verzeichnis 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, um die vorhandene Datei zu ersetzen.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Gehen Sie in Google Chat so vor:

  1. Senden Sie eine Direktnachricht mit dem Slash-Befehl /create an die App. Die App öffnet ein Dialogfeld.
  2. Legen Sie als Titel Issue Title 2 fest.
  3. Legen Sie Beschreibung auf „Problem Description 2“ fest.
  4. Klicken Sie auf Erstellen.

3b2a8690e758f965.png

  1. Wählen Sie in Ihrem Bereich in der Google Chat App den Tab Startseite aus. Dort sehen Sie die Details der von Ihnen erstellten Probleme.

ed8e32da0e6f2ac6.png

5. Optional: App 1: Überwachung des Gruppenbereichs hinzufügen

Konzepte

Pub/Sub

Pub/Sub ist ein asynchroner, skalierbarer Messaging-Dienst, der Dienste, die Nachrichten erzeugen, von Diensten entkoppelt, die diese Nachrichten verarbeiten. Mit Pub/Sub können Sie Systeme für Ereignisersteller und -nutzer erstellen, die als Publisher und Abonnenten bezeichnet werden. Publisher kommunizieren asynchron mit Abonnenten durch Broadcast-Ereignisse und nicht durch synchrone Remote-Prozeduraufrufe (RPCs).

Publisher senden Ereignisse an den Pub/Sub-Dienst, ohne zu berücksichtigen, wie oder wann diese Ereignisse verarbeitet werden. Pub/Sub liefert dann Ereignisse an alle Dienste, die darauf reagieren. In Systemen, die über RPCs kommunizieren, müssen Publisher darauf warten, dass 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 Feed von Nachrichten steht. Bevor Sie ein Thema veröffentlichen oder abonnieren können, müssen Sie es zuerst erstellen.

Abo: Wenn Sie Nachrichten empfangen möchten, die zu einem Thema veröffentlicht wurden, müssen Sie ein Abo für dieses Thema erstellen. Der Abonnentenclient empfängt und verarbeitet die Nachrichten, die für das Thema veröffentlicht wurden. Für ein Thema sind mehrere Abos möglich, aber jedes Abo gehört zu einem einzelnen Thema.

Google Workspace-Ereignisse

Google Workspace-Ereignisse beschreiben Änderungen an Google Workspace-Ressourcen, z. B. wenn Ressourcen erstellt, aktualisiert oder gelöscht werden. Apps können Google Workspace-Ressourcen abonnieren, um relevante Ereignisse asynchron zu empfangen und zu verarbeiten.

7816e477b112bfb6.png

So werden Ereignisse über ein Abo mit der Google Workspace Events API an eine App gesendet:

  1. Die App abonniert eine Ressource in einer Google Workspace-App, z. B. einen Bereich.
  2. Die Ressource, für die die App Änderungen 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 dazu, was sich in der Ressource geändert hat.
  4. Die App verarbeitet die Pub/Sub-Nachricht, die das Ereignis enthält, und ergreift bei Bedarf Maßnahmen.

Abläufe für Rezensionen

Problem erstellen (Aktualisierung)

6d7a9d7a68666a80.png

Probleme in einem dedizierten Bereich beheben (Update)

17e60f052f222456.png

Problem über einen dedizierten 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 Pub/Sub.

  1. Klicken Sie auf Menü ☰ > APIs & Dienste > Aktivierte APIs & Dienste und prüfen Sie, ob beide aktiviert sind.

Abo starten

Sie müssen ein Pub/Sub-Thema erstellen und abonnieren, damit alle Workspace-Ereignisse gepostet werden.

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Menü ☰ > Pub/Sub > Themen.

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

b39f9a0aec7c9939.png

So gewähren Sie Zugriff zum Veröffentlichen von Pub/Sub-Nachrichten in 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 Neue Hauptkonten hinzu.
  4. Wählen Sie unter Rolle die Option Pub/Sub-Publisher aus.
  5. Klicken Sie auf Speichern.

8d4016c37532503.png

Apps Script-Projekt aktualisieren

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Menü ☰ > IAM & Verwaltung > Einstellungen.

  1. Kopieren Sie die Projekt-ID.

82592fa0bd113469.png

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

  1. Wechseln Sie im Terminal in das Verzeichnis issue-management/3-message-monitoring. Sie 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 die JSON-Konstante mit dem Namen CHAT_CREDENTIALS in der Datei Configuration.js auf den Inhalt der Datei mit dem privaten Schlüssel 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 eine Direktnachricht mit dem Slash-Befehl /create an die App. Die App öffnet ein Dialogfeld.
  2. Legen Sie als Titel Issue Title 3 fest.
  3. Legen Sie Beschreibung auf „Problem Description 3“ fest.
  4. Klicken Sie auf Erstellen.
  5. Senden Sie im neu erstellten Gruppenbereich einige Nachrichten, in denen Sie das Problem beschreiben.
  6. Senden Sie eine Nachricht mit dem Slash-Befehl /close und der Auflösung, z. B. Fixed.

Gehen Sie in der Google Cloud Console so vor:

  1. Gehen Sie zu Menü ☰ > Pub/Sub > Abos.

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

82631c9792d83889.png

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

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

c612e8fa2bd0a163.png

Gehen Sie in der Google Cloud Console so vor:

  1. Gehen Sie zu Menü ☰ > Pub/Sub > Abos.

  1. Wählen Sie das Abo workspace-events-sub aus.
  2. Wählen Sie den Tab Nachrichten aus.
  3. Klicken Sie auf Pull. In der Tabelle werden keine Nachrichten mehr angezeigt, die sich auf das beziehen, was 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, in denen das Problem besprochen wird.

Gehen Sie in der Google Cloud Console so vor:

  1. Gehen Sie zu Menü ☰ > Pub/Sub > Abos.

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

6. Optional: App 1: Inklusionshilfe hinzufügen

Konzepte

GenAI-Prompts sind Anweisungen oder Fragen, mit denen ein generatives KI-Modell zur Ausgabe eines bestimmten Ergebnisses angeleitet wird. Eine gängige Praxis ist das Filtern von Antworten durch Hinzufügen von Regeln und Bedingungen in den Prompts. So kann die Ausgabe sicher, relevant, konsistent und erwartungskonform sein.

Abläufe für Rezensionen

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. Wechseln Sie im Terminal in das Verzeichnis issue-management/4-inclusivity-help. Sie 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, um die vorhandene Datei zu ersetzen.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Gehen Sie in Google Chat so vor:

  1. Senden Sie eine Direktnachricht mit dem Slash-Befehl /create an die App. Die App öffnet ein Dialogfeld.
  2. Legen Sie als Titel Issue Title 4 fest.
  3. Legen Sie Beschreibung auf „Problem Description 4“ fest.
  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 Console die folgenden Schritte aus:

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

Gehen Sie in Google Chat so vor:

  1. Die App hat im neu erstellten Gruppenbereich keine Tipps zur Inklusion 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 Console die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie Mitbearbeiter aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Abschnitt Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll sehen Sie, dass Nachrichten verarbeitet wurden. In Google Chat hat die App eine Nachricht mit Tipps zur Inklusion in den neu erstellten Gruppenbereich gesendet.

7936342847acbe2d.png

7. Optional: App 1: Vorlieben hinzufügen

.

Konzepte

Ein Zubehör-Widget ist ein Widget ohne Rahmen, das am unteren Rand einer von einer App gesendeten Nachricht angebracht ist. Es wird in der Regel verwendet, um schnelle Reaktionen des Nutzers im spezifischen Kontext von Nachrichten zu ermöglichen. Technisch basiert sie auf denselben Grundprinzipien wie Karten-Schaltflächen.

eebe88238f6b13f.png

Abläufe für Rezensionen

Hinweise 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. Wechseln Sie im Terminal in das Verzeichnis issue-management/5-disable-help. Sie 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, um die vorhandene Datei zu ersetzen.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Hilfe deaktivieren

  • Senden Sie in Google Chat im Gruppenbereich für das vierte Problem, das 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 Console die folgenden Schritte aus:

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

Gehen Sie in Google Chat so vor:

  1. Die App hat eine Nachricht mit Inklusivitätshilfe an den Gruppenbereich gesendet, der dem Problem mit einem Zubehör-Widget gewidmet ist.
  2. Klicken Sie auf das Zubehör-Widget, um die Inklusivitätshilfe zu deaktivieren.

de722cff1928dec9.png

Deaktivierung prüfen

  • Senden Sie in Google Chat im Gruppenbereich für das vierte Problem, das 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 Console die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie Mitbearbeiter aus.
  3. Wählen Sie die Datei WorkspaceEvent.gs aus.
  4. Wählen Sie im Abschnitt Ausführen die Option processSubscription aus.
  5. Klicken Sie auf Ausführen. Im Ausführungsprotokoll sehen Sie, dass Nachrichten verarbeitet wurden. In Google Chat wurde keine Nachricht mit Inklusivitätshilfe an den Gruppenbereich gesendet, der dem Problem gewidmet ist, da die Funktion deaktiviert war.

347d659db53b73e9.png

8. App 2: Build

Konzepte ansehen

Fundierung generativer KI

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

Natürliche Sprache

Jede Sprache, die von Menschen für die alltägliche Kommunikation 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. Cloud Storage eignet sich für eine Reihe von Aufgaben, beispielsweise für das Bereitstellen von Websiteinhalten, das Speichern von Daten für die Archivierung und Notfallwiederherstellung oder das Verteilen großer Datenobjekte an Nutzer über direkte Downloads.

Dialogflow CX-Datenspeicher

Dialogflow CX lässt sich in Datenspeicher einbinden. Das sind Sammlungen von Websites und Dokumenten, die von Datenspeicher-Agents verwendet werden, um anhand bestimmter Daten Antworten auf Fragen von Endnutzern zu finden. Bei einer bestimmten Frage sucht der Datenspeicher-Agent in den angegebenen Quellinhalten nach einer Antwort und fasst die Ergebnisse in einer kohärenten Antwort zusammen. Außerdem werden unterstützende Links zu den Quellen der Antwort bereitgestellt, damit der Endnutzer mehr erfahren kann.

Architektur prüfen

9d3342d12f3b4dda.png

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

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

Flows überprüfen

Frage beantworten

aad9fb5a7ca48956.png

Quellcode prüfen

Die einzige Quelle, die Sie benötigen, ist nicht Code, sondern Daten, die Sie für die Fundierung verwenden.

google-chat-overview.pdf

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

e9b91c4587b1a3a0.png

Google Cloud-Projekt aktualisieren

Gehen Sie in der Google Cloud Console so vor:

  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 Menü ☰ > APIs & Dienste > Aktivierte APIs & Dienste und prüfen Sie, ob alle APIs aktiviert sind.

.

Dialogflow CX-Agent für Datenspeicher erstellen

Wissensdaten initiieren

Gehen Sie in der Google Cloud Console so vor:

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

4f15978ae9f1b687.png

  1. Klicken Sie auf Erstellen.
  2. Legen Sie name auf 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. Laden Sie die Datei google-chat-overview.pdf aus Ihrer lokalen Umgebung herunter und wählen Sie sie aus.

df89acb22e1762af.png

App erstellen

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Apps.

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

44276003074bcf14.png

  1. Setzen Sie Company name auf den Namen Ihres Unternehmens.
  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. Klicken Sie auf Durchsuchen.
  3. Wählen Sie die Datei google-chat-overview.pdf aus.
  4. Klicken Sie auf Weiter.
  5. Legen Sie gchat-knowledge-ds als Namen des Datenspeichers 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 einigen Minuten auf Menü ☰ > Agent Builder > Apps. Die App wird angezeigt.

d929a7431dd84968.png

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Datenspeicher.

  1. Klicken Sie auf den Datenspeicher gchat-knowledge-ds. Die Anzahl der Dokumente ist 1, was darauf hinweist, dass sie bereit sind.

558319790a0accf2.png

App fertigstellen und testen

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

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

ca9b2fb4be92e8e4.png

  1. Wählen Sie Agent-Einstellungen > Generative KI > Generativer Agent aus.
  2. Wechseln Sie das Modell von Text Bison zu Gemini Pro.
  3. Klicken Sie auf Speichern.

68cc4713ec9b25a0.png

  1. Klicken Sie auf Agent testen.
  2. What is Google Chat? senden. Der Agent antwortet mit etwas Sinnvollem.

8e3a2cb02469041a.png

Google Chat App einbinden

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

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

e19f61185158110d.png

Gehen Sie in der Google Cloud Console so vor:

  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 für Agent or Environment resource name (Agent oder Name der Umgebungsressource) den kopierten Agentennamen fest.
  4. Entfernen Sie die beiden Slash-Befehle.

505ff39a50880904.png

  1. Senden Sie in Google Chat eine Direktnachricht mit What is Google Chat? an die Google Chat-App. Der Agent antwortet mit einer sinnvollen Antwort.

abda9e43b81fb0ea.png

9. Optional: App 2: Quellen hinzufügen

Konzepte ansehen

Dialogflow CX-Webhook

Ein 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 verwenden, um dynamische Antworten zu generieren, erfasste Daten zu validieren oder Aktionen im Back-End auszulösen.

Cloud Functions

Cloud Functions eignen sich hervorragend zum Erstellen serverloser Backends, zur Datenverarbeitung in Echtzeit und zum Entwickeln intelligenter Apps. Sie müssen keine Server bereitstellen, verwalten, patchen oder aktualisieren. Sie werden automatisch skaliert und sind hochverfügbar und fehlertolerant.

Flows überprüfen

Frage beantworten (Aktualisierung)

92767c07c7b252aa.png

Quellcode prüfen

Der einzige Quellcode, den Sie benötigen, ist die Funktion zum Anpassen von Agent-Antworten an Google Chat-Nachrichten. Es 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

Gehen Sie in der Google Cloud Console so vor:

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

  1. Klicken Sie auf das Menü ☰ > APIs & Dienste > Aktivierte APIs & Dienste und prüfen Sie, ob die APIs aktiviert sind.

Dialogflow CX-Datenspeicher-Agent aktualisieren

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

Mehrere Quellen zurückgeben

Standardmäßig gibt ein neuer Data Store-Agent maximal eine Quelle zurück. Sie können diese Einstellung jedoch ändern.

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

  1. Wählen Sie Ihr Google Cloud-Projekt aus.
  2. Wählen Sie den Wissens-Agent aus.
  3. Wählen Sie Startseite aus.
  4. Wählen Sie Datenspeicher bearbeiten aus.
  5. Legen Sie im Abschnitt Antworten des KI-Agenten die Antwortoptionen für Datenspeicher auf 5 fest.
  6. Klicken Sie auf Speichern.

f5932d03057df645.png

Cloud Functions-Funktion starten

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Legen Sie unter Grundeinstellungen für name den Wert function-1 fest.
  3. Wählen Sie unter Authentifizierung das Optionsfeld „Nicht authentifizierte Aufrufe zulassen“ aus.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen für Maximale Anzahl von Instanzen den Wert 3 fest.
  5. Klicken Sie auf Weiter.

bd3790a9285f9c07.png

  1. Legen Sie agent-response-adapter als Einstiegspunkt fest.
  2. Ersetzen Sie den Standardinhalt durch die Dateien package.json und index.js.
  3. Klicken Sie auf Bereitstellen.

b379bb8ca0fc1079.png

  1. Kopieren Sie die URL und warten Sie einige Minuten, bis die Funktion bereitgestellt wird.

eaae08cf048b9b1c.png

Webhook initiieren

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

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

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

5f3c6804d52b87c1.png

  1. Klicken Sie auf Erstellen.
  2. Wählen Sie Startseite aus.
  3. Wählen Sie Datenspeicher bearbeiten aus.
  4. Klicken Sie unter Webhook settings (Webhook-Einstellungen) auf die Ein/Aus-Schaltfläche Enable webhook (Webhook aktivieren).
  5. Wählen Sie Google Chat Response Adapter for Webhook aus.
  6. Setzen Sie tag auf arbitrary_tag.
  7. Klicken Sie auf Speichern.

442fcaaec9b8f2e3.png

Test-App

  • Senden Sie in Google Chat What is Google Chat? in einer Direktnachricht an die Google Chat App. Der Agent antwortet mit einer sinnvollen Antwort und einer Karte mit Quellen, falls vorhanden.

9468866bfe848bb8.png

10. App 3: Build

Konzepte ansehen

Konversationelle Interaktionen

Sie sind der Austausch von Informationen oder Ideen zwischen zwei oder mehr Personen in natürlicher Sprache. Im Gegensatz dazu basieren technische Schnittstellen oft auf zustandslosen, hochstrukturierten und intoleranten Austauschvorgängen.

OpenAPI-Spezifikation

Sie bietet eine einheitliche Möglichkeit, Informationen durch jede Phase des API-Lebenszyklus zu transportieren. Es handelt sich um eine Spezifikationssprache für HTTP-APIs, die Struktur und Syntax so definiert, dass sie nicht an die Programmiersprache gebunden ist, in der die API erstellt wird. API-Spezifikationen werden in der Regel in YAML oder JSON geschrieben, sodass sie einfach weitergegeben und verwendet werden können.

Dialogflow CX-Agent

Der grundlegende Baustein von Agent-Apps. Eine Agent-App hat in der Regel viele Agents, wobei jeder Agent für die Bearbeitung bestimmter Aufgaben definiert ist. Die Agentendaten werden dem LLM zur Verfügung gestellt, damit es die Informationen hat, die es zum Beantworten von Fragen und Ausführen von Aufgaben benötigt. Jeder Agent kann Informationen bereitstellen, Anfragen an externe Dienste senden oder die Unterhaltung an einen Dialogflow CX-Ablauf oder einen anderen Agenten zur Bearbeitung von untergeordneten Aufgaben weiterleiten.

Dialogflow CX-Tool

Tools werden verwendet, um Agent-Apps mit externen Systemen zu verbinden. Diese Systeme können das Wissen von Agent-Apps erweitern und ihnen ermöglichen, komplexe Aufgaben effizient auszuführen.

Architektur prüfen

9d3342d12f3b4dda.png

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

  1. Ein Nutzer sendet eine Nachricht an die App, entweder in einer Direktnachricht oder in einem Gruppenbereich.
  2. Die Nachricht wird von der App verarbeitet, die ein Dialogflow CX-Agent ist und mit einem Google Cloud-Projekt verknüpft ist.
  3. Die App ist in einen Agent eingebunden.
  4. Die App sendet eine synchrone Antwort, entweder in einer Direktnachricht oder im ursprünglichen Gruppenbereich.

Flows überprüfen

Rezensionen sammeln

a67a5b8b513bfc2c.png

Quellcode prüfen

Der einzige Quellcode, den Sie benötigen, ist die Funktion zum Simulieren des Backend-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-openapi.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

Backend-Dienst-Mock initiieren

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

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Legen Sie unter Grundeinstellungen für name den Wert function-2 fest.
  3. Wählen Sie unter Authentifizierung das Optionsfeld Nicht authentifizierte Aufrufe zulassen aus.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen für Maximale Anzahl von Instanzen den Wert 3 fest.
  5. Klicken Sie auf Weiter.

e8cf0ee7441bf634.png

  1. Legen Sie feedback-app-backend als Einstiegspunkt fest.
  2. Ersetzen Sie den Standardinhalt durch die Dateien package.json und index.js.
  3. Klicken Sie auf Bereitstellen.

bdb5cf9f503aa7f6.png

  1. Kopieren Sie die URL und warten Sie einige Minuten, bis die Funktion bereitgestellt wird.

Dialogflow CX-Agent-App erstellen

App erstellen

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Apps.

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

7ef3dbacee96c5aa.png

Tool starten

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Apps.

  1. Wählen Sie den Feedback App-Agent 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. Laden Sie die Datei service-openapi.yaml herunter und ersetzen Sie $URL durch die URL, die Sie zuvor kopiert haben.
  2. Legen Sie YAML Schema auf den bearbeiteten Inhalt der Datei service-openapi.yaml fest.
  3. Klicken Sie auf Speichern.

58085d6d56b603f7.png

Agent initiieren

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Apps.

  1. Wählen Sie den Feedback App-Agent aus.
  2. Wählen Sie Agents > Standard-Generative AI-Agent aus.
  3. Legen Sie Name des Kundenservicemitarbeiters auf Feedback collector fest.
  4. Legen Sie goal auf 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. Klicken Sie auf Speichern.

ebee7fdfa826b487.png

Test-App

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Agent Builder > Apps.

  1. Wählen Sie den Feedback App-Agent aus.
  2. Rufen Sie Agent in der Vorschau ansehen 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. Senden Sie die Nachricht Hello!, um zu beginnen.

90ca8cb7b2c1cb4b.png

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Dreistrich-Menü ☰ > Cloud Functions.

  1. Wählen Sie function-2 > Logs aus. In einigen Protokollen wird Google Dialogflow als Anrufer angezeigt.

48bfdf1788004d18.png

Google Chat App einbinden

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

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

Gehen Sie in der Google Cloud Console so vor:

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

  1. Legen Sie Agent or Environment resource name auf den Agent-Namen fest, den Sie zuvor kopiert haben.

df16619a1cb85cf8.png

  • Senden Sie in Google Chat Hello! in einer Direktnachricht an die Google Chat App, um zu beginnen. Der Agent antwortet ähnlich wie bei Ihrem Test in der Dialogflow CX-Konsole.

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, empfehlen wir, das Google Cloud-Projekt zu löschen.

Gehen Sie in der Google Cloud Console so vor:

  1. Klicken Sie auf das Menü ☰ > IAM & 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, auch Ihr Apps Script-Projekt zu löschen.

Führen Sie in der Apps Script Console 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.

Nächste Schritte

In diesem Codelab haben wir nur einfache Anwendungsfälle vorgestellt. Es gibt jedoch viele Erweiterungsbereiche, die Sie in Ihren Google Chat-Apps berücksichtigen sollten, z. B.:

  • Integration mit anderen Modellen für generative KI, einschließlich benutzerdefinierter Modelle
  • Unterstützung anderer Medientypen wie Audio, Bild und Video.
  • Multimodalität nutzen
  • Verlassen Sie sich auf längere Kontextfenster und Feedbackschleifen.
  • Veröffentlichen Sie produktionsreife Google Chat-Apps im Marketplace. Für Entwickler stehen viele Ressourcen zur Verfügung, z. B. YouTube-Videos, Dokumentationswebsites, Codebeispiele und Tutorials.
  • Aktivieren Sie Google Chat für Ihre Organisation. Die Funktion „Importmodus“ erleichtert den Einstieg.

Weitere Informationen