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. So können Nutzer Informationen abrufen und Aktionen ausführen, ohne die Unterhaltung zu verlassen.
  • Durch die Einbindung in das Generative-AI-Modell Gemini lassen sich Daten wie Text oder Bilder zu bestimmten Zeiten erstellen oder suchen und so Ihre Workflows optimieren.

Vorteile von Google Chat-Apps in Gemini

Typische Anwendungsfälle für Modelle für generative KI wie Gemini lassen sich in die folgenden Kategorien einteilen:

  • Inhalte erstellen und optimieren: Sie können Marketingtexte erstellen, Beiträge für soziale Medien erstellen, realistische Bilder und Musik komponieren oder beim Erstellen von Videoinhalten mithelfen.
  • Datensuche: Extrahieren Sie wichtige Informationen aus einer unstrukturierten Wissensdatenbank, fassen Sie längere Texte zusammenzufassen, Inhalte zu klassifizieren oder Sprachen mit erhöhter Genauigkeit und Geschwindigkeit zu übersetzen.
  • Unterhaltung: Führen Sie natürliche, informative und kreative Gespräche.

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

Voraussetzungen

Was Sie entwickeln

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

App für das Problemmanagement (Erstellung und Optimierung von Inhalten)

Diese App macht Folgendes:

  • Verwaltet Probleme vom Erstellen bis zum Schließen mit grundlegenden Interaktionen, App-Startseite und App-Authentifizierung.
  • Überwacht Nachrichten und bietet Unterstützung für Inklusivität mit Events und Zubehör-Widgets.

Sie verwenden Gemini für Folgendes:

  • Problemberichte basierend auf dem Nachrichtenverlauf und Problemdetails erstellen.
  • Nicht inklusive Wörter in Nachrichten mit Gated Prompts klassifizieren.

Die am häufigsten 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 Quellenverweise aus unstrukturierten Daten zurückzugeben.

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

9468866bfe848bb8.png

Feedback-App (Unterhaltung)

Diese App nutzt Gemini, um Rezensionen in natürlicher Sprache zu erfassen und zu speichern.

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

99a7a0295f122f31.png

Lerninhalte

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

Voraussetzungen

2. Einrichten

Ressourcen initialisieren

In diesem Abschnitt können Sie über Ihren bevorzugten Webbrowser auf die folgenden Ressourcen zugreifen und sie konfigurieren.

Apps Script-Projekt

Führen Sie in der Apps Script-Konsole 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. Wählen Sie das Kästchen "appsscript.json" anzeigen Manifestdatei im Editor 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. Klicke auf Menü ☰ > APIs und Dienste > OAuth-Zustimmungsbildschirm > Bearbeiten Sie die App und legen Sie dann App-Name auf Chat Apps Gemini fest.

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

a71f040755da3b8b.png

Google Chat

Gehen Sie in Google Chat so vor:

  1. Starten Sie bei Bedarf einen Chat mit der Google Chat App.
  2. Senden Sie eine Nachricht wie Hello, um sicherzugehen, dass alles 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 wechseln Sie dann in Ihrem Terminal zum selben Verzeichnis.

da9478df97c99194.png

clasp installieren und konfigurieren

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

  1. Installieren Sie in Ihrer lokalen Umgebung die neuesten 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 in Ihrem Webbrowser ein grundlegender Bestätigungsbildschirm angezeigt und die Datei .clasprc.json mit Ihren Clientanmeldedaten wird aktualisiert. Sie können nachsehen, wo sie sich in Ihrem Terminal befindet.

e1d833eb4d5b3a8f.png

3. App 1: Erstellen

Konzepte wiederholen

Vertex AI

Vertex AI bietet alles, was Sie zum Entwickeln und Verwenden von generativer KI benötigen, darunter KI-Lösungen, Agent Builder, mehr als 130 Basismodelle und eine einheitliche KI-Plattform.

c9e9c7a1945b22ac.png

Gemini

Gemini ist ein multimodales LLM von Google, auf das über Vertex AI zugegriffen werden kann. Sie hilft Menschen, ihr menschliches Potenzial zu entfesseln, damit 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. Dadurch können Scripts 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 überprüfen

8c9c7b7328a69ea6.png

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

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

Ablauf prüfen

Problem erstellen

7ca0e8ba3c8255bb.png

Probleme mit einem speziellen Gruppenbereich beheben

51b47714c378a24b.png

Problem im speziellen Bereich 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 Dialogfelder.
  • Storage: Dienstprogrammfunktionen, die Properties nutzen.
  • ChatAppAuth: Dienstprogrammfunktionen, die auf der Google Chat App-Authentifizierung basieren.
  • Docs: Auf Google Docs basierende Dienstprogrammfunktionen.
  • VertexAi: Dienstprogrammfunktionen, die auf Vertex AI basieren.

Und die folgenden Teile werden aktiv verwendet, wenn Berichtsdokumente mit Gemini und Verlauf von Chatbereichen generiert 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. Klicke auf Menü ☰ > APIs und Dienste > Aktivierte APIs und Dienste und prüfen Sie dann, ob die APIs aktiviert sind.

Dienstkonto initiieren

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

  1. Klicke 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 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 Paar aus öffentlichem und privatem Schlüssel wird automatisch als JSON-Datei in Ihre lokale Umgebung heruntergeladen. Die Inhalte werden später verwendet, 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 Befehls-ID auf 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 Befehls-ID auf 2 fest.
  9. Legen Sie Beschreibung auf Close an issue fest.
  10. Klicken Sie auf Speichern.

bee2e7b63659ab33.png

Apps Script-Projekt aktualisieren

  • Ändern Sie das aktuelle Verzeichnis in Ihrem lokalen Terminal zu issue-management/1-baseline. Es 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 die JSON-Konstante mit dem Namen CHAT_CREDENTIALS in der Datei Configuration.js auf den Inhalt der privaten Schlüsseldatei 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-Einstellungen 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 .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 Hello! in Google Chat in einer Direktnachricht an die App. Die App antwortet nicht, aber es wird eine Meldung angezeigt, die Sie zur Konfiguration auffordert.

4c1fc68121dcffed.png

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

4a2fd7ac5918bf1a.png

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

acb9065568fe47d2.png

2d6ef9c62f47e082.png

  1. Senden Sie eine weitere Direktnachricht an die App, geben Sie jedoch den Slash-Befehl /create ein.

be3f3c6eb0f929c1.png

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

22efdecff4601417.png

Die App führt Folgendes aus:

  1. Schließt das Dialogfeld.
  2. Erstellt einen Bereich für die neu erstellte Ausgabe mit demselben Titel.
  3. Sie treten dem neu erstellten Gruppenbereich bei.
  4. Sendet eine Nachricht mit der Beschreibung des Problems im neu erstellten Gruppenbereich.
  5. Ihnen wird eine Direktnachricht mit einem Link zum neu erstellten Gruppenbereich gesendet.

3253cec2392e281f.png

  1. Senden Sie an den neu erstellten Bereich 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 Berichtsdokument in Google Docs.
  2. Sendet eine Nachricht mit einem Link zum neu erstellten Berichtsdokument an den Gruppenbereich für das Problem.

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 wiederholen

App-Startseite ist eine anpassbare Kartennachricht, die eine Chat-App an einen Nutzer sendet, wenn dieser über eine Direktnachricht mit der Chat App auf den Tab Startseite zugreift. Dieser wird normalerweise verwendet, um eine App-Dokumentation oder eine Übersicht anzuzeigen. Technisch gesehen gibt es ein spezielles Ereignis, das auf den gleichen Grundprinzipien wie Kartennachrichten basiert.

65f56f70f67a32e4.png

Ablauf prü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 im Abschnitt Interaktive Funktionen das Kästchen Startseite der Support-App 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. Es 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 sie das vorhandene ersetzt.
  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. In der App wird ein Dialogfeld geöffnet.
  2. Legen Sie Titel auf Issue Title 2 fest.
  3. Setzen Sie Beschreibung auf Problem Description 2.
  4. Klicken Sie auf Erstellen.

2b2a8690e758f965.png

  1. Wählen Sie in Ihrem Gruppenbereich, in dem Sie die Google Chat App verwenden, den Tab Startseite aus. Sie können die Details zu den Problemen sehen, die Sie erstellt haben.

ed8e32da0e6f2ac6.png

5. Optional: App 1: Speicherüberwachung hinzufügen

Konzepte reflektieren

Pub/Sub

Pub/Sub ist ein asynchroner und skalierbarer Messaging-Dienst, der Dienste, die Nachrichten erzeugen, von Diensten entkoppelt, die diese Nachrichten verarbeiten. Mit Pub/Sub können Sie Systeme für Ereignisproduzenten und -nutzer erstellen, die als Publisher und Abonnenten bezeichnet werden. Publisher kommunizieren asynchron mit Abonnenten über das Übertragen von Ereignissen und nicht über synchrone Remoteprozeduraufrufe (Remote Procedure Calls, RPCs).

Publisher senden Ereignisse an den Pub/Sub-Dienst, ohne zu berücksichtigen, wie oder wann diese Ereignisse verarbeitet werden sollen. Pub/Sub stellt dann Ereignisse an alle Dienste bereit, die darauf reagieren. Bei Systemen, die über RPCs kommunizieren, müssen Publisher warten, bis Abonnenten die Daten erhalten. Die asynchrone Einbindung 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. 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 für das Thema veröffentlichten Nachrichten. Ein Thema kann mehrere Abos haben, aber ein bestimmtes Abo gehört zu einem einzelnen Thema.

Google Workspace-Ereignisse

Google Workspace-Ereignisse stellen Änderungen an Google Workspace-Ressourcen dar, 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 Ereignisse über ein Abo 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, ändert sich.
  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 zu den Änderungen an der Ressource.
  4. Die App verarbeitet die Pub/Sub-Nachricht, die das Ereignis enthält, und ergreift gegebenenfalls Maßnahmen.

Ablauf prüfen

Problem erstellen (Update)

6d7a9d7a68666a80.png

Problem mit einem speziellen Gruppenbereich beheben (Update)

17e60f052f222456.png

Problem im 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 „PubSub“.

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

Abo abschließen

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

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

  1. Gehe zum Menü 😃 > Pub/Sub > Themen

  1. Klicken Sie auf Thema erstellen.
  2. Legen Sie die Themen-ID auf workspace-events fest.
  3. Klicke 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 Neue Hauptkonten hinzu.
  4. Wählen Sie Pub/Sub-Publisher als Rolle aus.
  5. Klicken Sie auf Speichern.

8d4016c37532503.png

Apps Script-Projekt aktualisieren

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

  1. Gehe zum 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 für die Stringkonstante PROJECT_ID in der Datei Configuration.js 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 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 eine Direktnachricht mit dem Slash-Befehl /create an die App. In der App wird ein Dialogfeld geöffnet.
  2. Legen Sie Titel auf Issue Title 3 fest.
  3. Setzen Sie Beschreibung auf Problem Description 3.
  4. Klicken Sie auf Erstellen.
  5. Senden Sie im neu erstellten Gruppenbereich ein paar Nachrichten, in denen das Problem beschrieben wird.
  6. Senden Sie eine Nachricht mit dem Slash-Befehl /close und der Auflösung, z. B. Fixed.

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

  1. Gehe zum 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. Die Tabelle enthält die Nachrichten, die sich auf die Nachrichten beziehen, 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ählen Sie 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.Dem Ausführungsprotokoll können Sie entnehmen, dass Nachrichten verarbeitet wurden.

c612e8fa2bd0a163.png

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

  1. Gehe zum 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 nicht mehr die Nachrichten angezeigt, die sich auf die Nachrichten beziehen, die Sie an den neu erstellten Gruppenbereich gesendet haben.

e185454cac862a7b.png

  • Senden Sie in Google Chat im Bereich für das dritte Problem, das Sie mit dem Slash-Befehl /create erstellt haben, ein paar weitere Nachrichten, in denen das Problem beschrieben wird.

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

  1. Gehe zum 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 nicht die Nachrichten angezeigt, die sich auf die Nachrichten beziehen, die Sie an den neu erstellten Gruppenbereich gesendet haben.

6. Optional: App 1: Hilfe für mehr Inklusion

Konzepte reflektieren

Mit generativen KI-Prompts können Sie Anleitungen oder Fragen erstellen, um ein Generative-AI-Modell zu einem bestimmten Typ der gewünschten Ausgabe zu leiten. Eine gängige Praxis ist das Gattern von Antworten durch Hinzufügen von Regeln und Bedingungen in den Prompts. Das kann dazu beitragen, dass die Ausgabe sicher, relevant und einheitlich ist und den Erwartungen entspricht.

Ablauf prü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 sie das vorhandene ersetzt.
  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. In der App wird ein Dialogfeld geöffnet.
  2. Legen Sie Titel auf Issue Title 4 fest.
  3. Setzen Sie Beschreibung auf Problem Description 4.
  4. Klicken Sie auf Erstellen.
  5. Senden Sie It happened to me last week as well im neu erstellten Gruppenbereich.

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

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie 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. Dem Ausführungsprotokoll können Sie entnehmen, dass Nachrichten verarbeitet wurden.

Gehen Sie in Google Chat so vor:

  1. Die App hat im neu erstellten Bereich keine Unterstützung 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-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie 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. Dem Ausführungsprotokoll können Sie entnehmen, dass Nachrichten verarbeitet wurden. In Google Chat hat die App eine Nachricht zur Inklusion an den neu erstellten Gruppenbereich gesendet.

7936342847acbe2d.png

7. Optional: App 1: Einstellungen hinzufügen

.

Konzepte reflektieren

Ein Zubehör-Widget ist ein rahmenloses Widget, das unten in einer von einer App gesendeten Nachricht befestigt ist. Dies wird in der Regel verwendet, um schnelle Reaktionen von Nutzenden auf bestimmte Nachrichtenkontexte zu ermöglichen. Technisch gesehen basiert sie auf den gleichen Grundprinzipien wie Kartenschaltflächen.

eebe88238f6b13f.png

Ablauf prü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 sie das vorhandene ersetzt.
  4. Führen Sie dazu diesen Befehl aus:
clasp push

Ausprobieren

Hilfe deaktivieren

  • Senden Sie in Google Chat im Bereich 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-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie 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. Dem Ausführungsprotokoll können Sie entnehmen, dass Nachrichten verarbeitet wurden.

Gehen Sie in Google Chat so vor:

  1. Die App hat eine Nachricht zur Inklusivität an den Bereich gesendet, der sich mit dem Problem mit einem Zubehör-Widget befasst.
  2. Klicke auf das Zubehör-Widget, um die Hilfe zur Inklusion zu deaktivieren.

de722cff1928dec9.png

Deaktivierung überprüfen

  • Senden Sie in Google Chat im Bereich 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-Konsole die folgenden Schritte aus:

  1. Wählen Sie Ihr Projekt aus.
  2. Wählen Sie 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. Dem Ausführungsprotokoll können Sie entnehmen, dass Nachrichten verarbeitet wurden. In Google Chat hat die App keine Nachricht mit Inklusivitätshilfe an den Bereich gesendet, der für das Problem vorgesehen ist, da dieser deaktiviert wurde.

347d659db53b73e9.png

8. App 2: Erstellen

Konzepte wiederholen

Grundlage für generative KI

Es geht darum, KI-Modelle durch die Verbindung mit überprüfbaren Wissensquellen sachlicher und zuverlässiger zu machen. Diese Technik verhindert, dass KI Informationen erfindet, und trägt dazu bei, Antworten kontextrelevant und weniger voreingenommen zu gestalten.

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 beliebige Datenmengen jederzeit weltweit speichern und abrufen. Es kann für eine Reihe von Szenarien verwendet werden, unter anderem zum Bereitstellen von Websiteinhalten, zum Speichern von Daten für die Archivierung und Notfallwiederherstellung oder zum 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. Für eine bestimmte Frage sucht der Datenspeicher-Agent nach einer Antwort aus dem gegebenen Quellinhalt und fasst die Ergebnisse in einer kohärenten Antwort zusammen. Es enthält auch unterstützende Links zu den Antwortquellen, über die die Endnutzer mehr erfahren können.

Architektur überprüfen

9d3342d12f3b4dda.png

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

  1. Ein Nutzer sendet entweder in einer Direktnachricht oder in einem Gruppenbereich eine Nachricht an die App.
  2. Die Anwendung wird als Dialogflow CX-Agent verarbeitet, der mit einem Google Cloud-Projekt verknüpft ist.
  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, eine gedruckte Version einer Seite 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. Klicke auf Menü ☰ > APIs und Dienste > Aktivierte APIs und Dienste und prüfen Sie dann, ob alle APIS aktiviert sind.

.

Dialogflow CX-Datenspeicher-Agent erstellen

Wissensdaten initiieren

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

  1. Klicke auf das Dreistrich-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. Laden Sie die Datei google-chat-overview.pdf in Ihrer lokalen Umgebung herunter und wählen Sie sie aus.

df89acb22e1762af.png

App erstellen

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

  1. Klicke 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. Klicken Sie auf Durchsuchen.
  3. Wählen Sie die Datei google-chat-overview.pdf aus.
  4. Klicken Sie auf Weiter.
  5. Legen Sie den Namen des Datenspeichers auf 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. Warten Sie ein paar Minuten und klicken Sie dann auf Menü ☰ > Agent Builder > Apps und stellen Sie fest, dass Sie die App sehen können.

d929a7431dd84968.png

  1. Klicke auf Menü ☰ > Agent Builder > Datenspeicher.

  1. Klicken Sie auf den Datenspeicher gchat-knowledge-ds. Die Anzahl der Dokumente beträgt 1. Dies 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 KI > Generativer Agent
  2. Stellen Sie das Modell von Text Bison auf Gemini Pro um.
  3. Klicken Sie auf Speichern.

68cc4713ec9b25a0.png

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

8e3a2cb02469041a.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 in der Zeile des Wissensagenten auf 1e7ede7abae4aa3c.png. > Name kopieren.

e19f61185158110d.png

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

  1. Zur Google Chat API-Konfiguration.

  1. Wählen Sie unter Verbindungseinstellungen die Option Dialogflow aus.
  2. Wählen Sie unter Dialogflow-Einstellungen die Option Dialogflow CX aus.
  3. Setzen Sie Agent or Environment resource name (Agent- oder Umgebungsressourcenname) auf den Agent-Namen, den Sie kopiert haben.
  4. Entfernen Sie die beiden Slash-Befehle.

505ff39a50880904.png

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

abda9e43b81fb0ea.png

9. Optional: App 2: Quellen hinzufügen

Konzepte wiederholen

Dialogflow CX-Webhook

Dienst, der Geschäftslogik hostet oder andere Dienste aufruft. Während einer Dialogflow CX-Sitzung können sich Webhooks auf die durch Natural Language Processing extrahierten Daten verlassen, 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 für intelligente 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

Sie benötigen lediglich den Quellcode, um Agent-Antworten an Google Chat-Nachrichten anzupassen. 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

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

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

  1. Klicke auf Menü ☰ > APIs und Dienste > Aktivierte APIs und Dienste und prüfen Sie dann, ob 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. Legen Sie im Abschnitt Agent-Antworten die Antwortoptionen für den Datenspeicher auf 5 fest.
  6. Klicken Sie auf Speichern.

f5932d03057df645.png

Cloud Functions-Funktion initiieren

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

  1. Klicke auf Menü ☰ > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Setzen Sie unter Grundlagen die Option Name auf function-1.
  3. Wählen Sie unter Authentifizierung das Optionsfeld Nicht authentifizierte Aufrufe zulassen aus.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen die Option Maximale Anzahl von Instanzen auf 3 fest.
  5. Klicken Sie auf Weiter.

bd3790a9285f9c07.png

  1. Legen Sie als Einstiegspunkt agent-response-adapter 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, während Sie einige Minuten auf die Bereitstellung der Funktion warten.

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 Verwalten > Webhooks > Erstellen.
  4. Legen Sie Anzeigename auf 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 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 Response Adapter for Webhook (Google Chat-Antwortadapter für Webhooks) aus.
  6. Setze Tag auf arbitrary_tag.
  7. Klicken Sie auf Speichern.

442fcaaec9b8f2e3.png

App testen

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

9468866bfe848bb8.png

10. App 3: Erstellen

Konzepte wiederholen

Unterhaltungsinteraktionen

Dabei handelt es sich um den Austausch von Informationen oder Ideen zwischen zwei oder mehr Menschen über natürliche Sprache. Dies unterscheidet sich von technischen Benutzeroberflächen, die häufig auf zustandslosen, stark strukturierten und intoleranten Austauschplattformen basieren.

OpenAPI-Spezifikation

Sie bietet eine einheitliche Möglichkeit, Informationen durch jede Phase des API-Lebenszyklus zu führen. 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 wird. API-Spezifikationen werden in der Regel in YAML oder JSON geschrieben, sodass sie einfach geteilt und genutzt werden kann.

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 zur Verfügung gestellt, damit es die Informationen hat, die es benötigt, um Fragen zu beantworten und Aufgaben auszuführen. 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 Bearbeitung von Unteraufgaben auslagern.

Dialogflow CX-Tool

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

Architektur überprüfen

9d3342d12f3b4dda.png

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

  1. Ein Nutzer sendet entweder in einer Direktnachricht oder in einem Gruppenbereich eine Nachricht an die App.
  2. Die Anwendung wird als Dialogflow CX-Agent verarbeitet, der mit einem Google Cloud-Projekt verknüpft ist.
  3. Die Anwendung kann in einen Agent eingebunden werden.
  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

Der einzige Quellcode, den Sie benötigen, ist 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-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

Beispiel für Backend-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. Klicke auf Menü ☰ > Cloud Functions.

  1. Klicken Sie auf Funktion erstellen.
  2. Setzen Sie unter Grundlagen die Option Name auf function-2.
  3. Wählen Sie unter Authentifizierung das Optionsfeld Nicht authentifizierte Aufrufe zulassen aus.
  4. Legen Sie unter Laufzeit, Build, Verbindungen und Sicherheitseinstellungen die Option Maximale Anzahl von Instanzen auf 3 fest.
  5. Klicken Sie auf Weiter.

e8cf0ee7441bf634.png

  1. Legen Sie als Einstiegspunkt feedback-app-backend 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, während Sie einige Minuten auf die Bereitstellung der Funktion warten.

Dialogflow CX-Agent-Anwendung erstellen

App erstellen

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

  1. Klicke 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. Klicke 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. Laden Sie $URL in der Datei service-openapi.yaml herunter und ersetzen Sie sie durch die zuvor kopierte URL.
  2. Legen Sie für YAML Schema den bearbeiteten Inhalt der Datei service-openapi.yaml fest.
  3. Klicken Sie auf Speichern.

58085d6d56b603f7.png

Agent initiieren

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

  1. Klicke auf Menü ☰ > Agent Builder > Apps:

  1. Wählen Sie den Agent Feedback App aus.
  2. Wähle Agents > Generativer Standard-Agent.
  3. Legen Sie Agent-Name 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

App testen

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

  1. Klicke 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. Klicke auf Menü ☰ > Cloud Functions.

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

48bfdf1788004d18.png

Binden Sie die Google Chat App ein.

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 Namen kopieren.

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

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

  1. Setzen Sie Agent or Environment resource name (Agent- oder Umgebungsressourcenname) auf den Agent-Namen, den Sie zuvor kopiert haben.

df16619a1cb85cf8.png

  • Senden Sie Hello! in einer Direktnachricht in Google Chat an die Google Chat App. Der Agent reagiert ähnlich auf den 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, sollten Sie das Google Cloud-Projekt löschen.

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

  1. Klicke 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! Du hast Google Chat-Apps mit Gemini erstellt.

Was liegt als Nächstes an?

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

  • In andere Modelle für generative KI, einschließlich benutzerdefinierter Modelle, einbinden.
  • Es werden andere Medientypen unterstützt, z. B. Audio, Bild und Video.
  • Multimodalität verwenden.
  • Verlassen Sie sich auf längere Kontextfenster und Feedback Loops.
  • 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. Der Importmodus erleichtert den Einstieg.

Weitere Informationen