Mit Google Chat, Vertex AI und Apps Script auf Vorfälle reagieren

In dieser Anleitung wird gezeigt, wie Sie eine Google Chat-App erstellen, die in Echtzeit auf Vorfälle reagiert. Wenn Sie auf einen Vorfall reagieren, erstellt und befüllt die App einen Chatbereich, erleichtert die Behebung des Vorfalls mit Nachrichten, Schrägstricheingaben und Dialogen und verwendet KI, um die Reaktion auf den Vorfall in einem Google Docs-Dokument zusammenzufassen.

Ein Vorfall ist ein Ereignis, das die sofortige Aufmerksamkeit eines Teams erfordert, um es zu beheben. Beispiele für Vorfälle:

• In einer CRM-Plattform (Customer Relationship Management) wird ein zeitkritischer Fall erstellt, bei dem ein Serviceteam zusammen an einer Lösung arbeiten muss.
• Ein System geht offline und eine Gruppe von Site Reliability Engineers (SREs) wird benachrichtigt, damit sie gemeinsam daran arbeiten können, es wieder online zu stellen.
• Es kommt zu einem Erdbeben mit hoher Stärke und die Einsatzkräfte müssen ihre Reaktion koordinieren.

Für diese Anleitung wird davon ausgegangen, dass die Benachrichtigung über einen Vorfall gestartet wird, wenn jemand den Vorfall über einen Klick auf eine Schaltfläche auf einer Webseite meldet. Auf der Webseite wird ein Vorfall simuliert, indem Nutzer gebeten werden, grundlegende Informationen zum Vorfall einzugeben: Titel, Beschreibung und E-Mail-Adressen der zuständigen Personen.

So sieht die Chat-App für die Problembehebung in Aktion aus:

Vorbereitung

Wenn eine dieser Voraussetzungen für Ihre Organisation aktiviert werden muss, bitten Sie Ihren Google Workspace-Administrator, sie zu aktivieren:

• Ein Google Workspace-Konto für Unternehmen oder Organisationen mit Zugriff auf Google Chat.
• Die Funktion Verzeichnis (Kontaktfreigabe) muss für Google Workspace aktiviert sein. In der App werden die Kontaktdaten der Einsatzkräfte wie Name und E-Mail-Adresse über das Verzeichnis abgerufen. Nutzer, die auf Vorfälle reagieren, müssen Nutzer mit einem Google Chat-Konto in Ihrer Google Workspace-Organisation sein.

Lernziele

• Erstellen Sie eine Chat-App, die auf Vorfälle reagiert.
• So hilfst du Nutzern, auf Vorfälle zu reagieren:
  • Gruppenbereiche für die Reaktion auf Vorfälle erstellen
  • Nachrichten posten, in denen Vorfälle und Reaktionen zusammengefasst werden.
  • Unterstützung der Zusammenarbeit mit interaktiven Chat-App-Funktionen
• Mit Vertex AI Unterhaltungen und Lösungen zusammenfassen

Architektur

Das folgende Diagramm zeigt die Architektur der Google Workspace- und Google Cloud-Ressourcen, die von der Google Chat-Anwendung für die Reaktion auf Vorfälle verwendet werden.

Die Architektur zeigt, wie die Google Chat-App für die Reaktion auf Vorfälle einen Vorfall und die Lösung verarbeitet.

1. Ein Nutzer startet einen Vorfall über eine externe Website, die auf Apps Script gehostet wird.

2. Die Website sendet eine asynchrone HTTP-Anfrage an die Google Chat-App, die ebenfalls in Apps Script gehostet wird.

3. Die Google Chat-App für die Reaktion auf Vorfälle verarbeitet die Anfrage:

   1. Der Admin SDK-Dienst von Apps Script erhält Informationen zu Teammitgliedern wie Nutzer-ID und E-Mail-Adresse.

   2. Mit einer Reihe von HTTP-Anfragen an die Chat API über den erweiterten Chat-Dienst von Apps Script erstellt die Google Chat-App für die Reaktion auf Vorfälle einen Chat-Gruppenbereich für den Vorfall, füllt ihn mit Teammitgliedern und sendet eine Nachricht an den Gruppenbereich.

4. Die Teammitglieder besprechen den Vorfall im Chatbereich.

5. Ein Teammitglied gibt einen Befehl ein, um die Behebung des Problems anzuzeigen.

   1. Ein HTTP-Aufruf an die Chat API mit dem erweiterten Chat-Dienst von Apps Script listet alle Nachrichten des Chat-Gruppenbereichs auf.

   2. Vertex AI empfängt die aufgeführten Nachrichten und generiert eine Zusammenfassung.

   3. Der Apps Script-Dienst DocumentApp erstellt ein Google Docs-Dokument und fügt dem Dokument die Zusammenfassung von Vertex AI hinzu.

   4. Die Google Chat-App für die Reaktion auf Vorfälle ruft die Chat API auf, um eine Nachricht mit einem Link zum Zusammenfassungsdokument in Google Docs zu senden.

Umgebung vorbereiten

In diesem Abschnitt wird beschrieben, wie Sie ein Google Cloud-Projekt für die Chat-App erstellen und konfigurieren.

Google Cloud-Projekt erstellen

Google Cloud Console

1. Klicken Sie in der Google Cloud Console auf das Dreipunkt-Menü menu > IAM und Verwaltung > Projekt erstellen.

   Zur Seite „Projekt erstellen“

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

   Optional: Klicken Sie auf Bearbeiten, um die Projekt-ID zu bearbeiten. Die Projekt-ID kann nach dem Erstellen des Projekts nicht mehr geändert werden. Wählen Sie also eine ID aus, die während der gesamten Dauer des Projekts den Anforderungen entspricht.

3. Klicken Sie im Feld Standort auf Durchsuchen, um mögliche Standorte für Ihr Projekt zu sehen. Klicken Sie danach auf Auswählen.
4. Klicken Sie auf Erstellen. In der Google Cloud Console wird die Seite „Dashboard“ geöffnet und Ihr Projekt wird innerhalb weniger Minuten erstellt.

gcloud-CLI

Rufen Sie in einer der folgenden Entwicklungsumgebungen die Google Cloud CLI (gcloud) auf:

• Cloud Shell: Aktivieren Sie Cloud Shell, um ein Onlineterminal mit der bereits eingerichteten gcloud CLI zu verwenden.
  Cloud Shell aktivieren
• Lokale Shell: Zur Verwendung einer lokalen Entwicklungsumgebung müssen Sie die gcloud CLI installieren und initialisieren.
  Verwenden Sie den Befehl gcloud projects create, um ein Cloud-Projekt zu erstellen:

  gcloud projects create PROJECT_ID

  Ersetzen Sie PROJECT_ID durch die ID des Projekts, das Sie erstellen möchten.

Abrechnung für das Cloud-Projekt aktivieren

Google Cloud Console

1. Klicken Sie in der Google Cloud Console auf Abrechnung. Klicken Sie auf das Dreistrich-Menü menu > Abrechnung > Meine Projekte.

   Zur Abrechnung für „Meine Projekte“

2. Wählen Sie unter Organisation auswählen die Organisation aus, die mit Ihrem Google Cloud-Projekt verknüpft ist.
3. Öffnen Sie in der Projektzeile das Menü Aktionen (more_vert), klicken Sie auf Abrechnung ändern und wählen Sie das Cloud Billing-Konto aus.
4. Klicken Sie auf Konto festlegen.

gcloud-CLI

1. Führen Sie folgenden Befehl aus, um eine Liste der verfügbaren Rechnungskonten aufzurufen:

   gcloud billing accounts list

2. So verknüpfen Sie ein Abrechnungskonto mit einem Google Cloud-Projekt:

   gcloud billing projects link PROJECT_ID --billing-account=BILLING_ACCOUNT_ID

   Ersetzen Sie Folgendes:

   • PROJECT_ID ist die Projekt-ID des Cloud-Projekts, für das Sie die Abrechnung aktivieren möchten.
   • BILLING_ACCOUNT_ID ist die Rechnungskonto-ID, die mit dem Google Cloud-Projekt verknüpft werden soll.

APIs aktivieren

Authentifizierung und Autorisierung einrichten

Durch Authentifizierung und Autorisierung kann die Chat-App auf Ressourcen in Google Workspace und Google Cloud zugreifen, um eine Reaktion auf einen Vorfall zu verarbeiten.

In dieser Anleitung veröffentlichen Sie die App intern. Daher ist es in Ordnung, Platzhalterinformationen zu verwenden. Ersetzen Sie vor der externen Veröffentlichung der App die Platzhalterinformationen auf dem Zustimmungsbildschirm durch echte Informationen.

1. Klicken Sie in der Google Cloud Console auf das Dreistrich-Menü menu > > Branding.

   Zu „Branding“

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

   1. Geben Sie unter App-Informationen in das Feld App-Name den Code Incident Management ein.
   2. Wählen Sie unter E-Mail-Adresse für den Nutzersupport Ihre E-Mail-Adresse oder eine geeignete Google-Gruppe aus.
   3. Klicken Sie auf Weiter.
   4. Wählen Sie unter Zielgruppe die Option Intern aus. Wenn Sie Intern nicht auswählen können, wählen Sie Extern aus.
   5. Klicken Sie auf Weiter.
   6. Geben Sie unter Kontaktdaten eine E-Mail-Adresse ein, unter der Sie über Änderungen an Ihrem Projekt informiert werden können.
   7. Klicken Sie auf Weiter.
   8. Lesen Sie unter Fertigstellen die Nutzerdatenrichtlinie für Google API-Dienste und wählen Sie dann Ich akzeptiere die Richtlinie zu Nutzerdaten für Google API-Dienste aus, wenn Sie zustimmen.
   9. Klicken Sie auf Weiter.
   10. Klicken Sie auf Erstellen.
   11. Wenn Sie als Nutzertyp Extern ausgewählt haben, fügen Sie Testnutzer hinzu:
       1. Klicken Sie auf Zielgruppe.
       2. Klicken Sie unter Testnutzer auf Nutzer hinzufügen.
       3. Geben Sie Ihre E-Mail-Adresse und die E-Mail-Adressen aller anderen autorisierten Testnutzer ein und klicken Sie auf Speichern.

3. Klicken Sie auf Datenzugriff > Umfang hinzufügen oder entfernen. Ein Bereich mit einer Liste der Bereiche für jede API wird angezeigt, die Sie in Ihrem Google Cloud-Projekt aktiviert haben.

   1. Fügen Sie unter Bereiche manuell hinzufügen die folgenden Bereiche ein:

      • https://www.googleapis.com/auth/chat.spaces.create
      • https://www.googleapis.com/auth/chat.memberships
      • https://www.googleapis.com/auth/chat.memberships.app
      • https://www.googleapis.com/auth/chat.messages
      • https://www.googleapis.com/auth/documents
      • https://www.googleapis.com/auth/admin.directory.user.readonly
      • https://www.googleapis.com/auth/script.external_request
      • https://www.googleapis.com/auth/userinfo.email
      • https://www.googleapis.com/auth/cloud-platform

   2. Klicken Sie auf Zur Tabelle hinzufügen.

   3. Klicken Sie auf Aktualisieren.

   4. Nachdem Sie die für Ihre App erforderlichen Bereiche ausgewählt haben, klicken Sie auf der Seite Datenzugriff auf Speichern.

Chat-App erstellen und bereitstellen

Im folgenden Abschnitt kopieren und aktualisieren Sie ein komplettes Apps Script-Projekt, das den gesamten erforderlichen Anwendungscode für Ihre Chat-App enthält. Sie müssen also nicht jede Datei kopieren und einfügen.

Einige Funktionen enthalten Unterstriche am Ende ihres Namens, z. B. processSlashCommand_() von ChatApp.gs. Durch das Unterstrich wird die Funktion auf der Webseite zur Initiierung von Vorfällen ausgeblendet, wenn sie in einem Browser geöffnet ist. Weitere Informationen finden Sie unter Private Funktionen.

Apps Script unterstützt zwei Dateitypen: .gs-Scripts und .html-Dateien. Um diese Unterstützung zu nutzen, muss das clientseitige JavaScript der App in <script />-Tags und das CSS in <style />-Tags in einer HTML-Datei enthalten sein.

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

Auf GitHub ansehen

Hier eine Übersicht über die einzelnen Dateien:

Consts.gs

Hier werden Konstanten definiert, auf die in anderen Codedateien verwiesen wird, einschließlich Ihrer Cloud-Projekt-ID, der Vertex AI-Standort-ID und der Slash-Befehls-ID zum Schließen eines Falls.

Consts.gs-Code ansehen

apps-script/incident-response/Consts.gs

Auf GitHub ansehen

const PROJECT_ID = 'replace-with-your-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
const CLOSE_INCIDENT_COMMAND_ID = 1;

ChatApp.gs

Hier werden Chatinteraktionsereignisse verarbeitet, einschließlich Nachrichten, Kartenklicks, Slash-Befehle und Dialoge. Reagiert auf den Befehl /closeIncident, indem ein Dialogfeld geöffnet wird, um Details zur Problembehebung zu erfassen. Liest Nachrichten im Gruppenbereich, indem die Methode spaces.messages.list in der Chat API aufgerufen wird. Ruft Nutzer-IDs mit dem Admin SDK Directory-Dienst in Apps Script ab.

ChatApp.gs-Code ansehen

apps-script/incident-response/ChatApp.gs

Auf GitHub ansehen

/**
 * Responds to a MESSAGE event in Google Chat.
 *
 * This app only responds to a slash command with the ID 1 ("/closeIncident").
 * It will respond to any other message with a simple "Hello" text message.
 *
 * @param {Object} event the event object from Google Chat
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    return processSlashCommand_(event);
  }
  return { "text": "Hello from Incident Response app!" };
}

/**
 * Responds to a CARD_CLICKED event in Google Chat.
 *
 * This app only responds to one kind of dialog (Close Incident).
 *
 * @param {Object} event the event object from Google Chat
 */
function onCardClick(event) {
  if (event.isDialogEvent) {
    if (event.dialogEventType == 'SUBMIT_DIALOG') {
      return processSubmitDialog_(event);
    }
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: {
          actionStatus: "OK"
        }
      }
    };
  }
}

/**
 * Responds to a MESSAGE event with a Slash command in Google Chat.
 *
 * This app only responds to a slash command with the ID 1 ("/closeIncident")
 * by returning a Dialog.
 *
 * @param {Object} event the event object from Google Chat
 */
function processSlashCommand_(event) {
  if (event.message.slashCommand.commandId != CLOSE_INCIDENT_COMMAND_ID) {
    return {
      "text": "Command not recognized. Use the command `/closeIncident` to close the incident managed by this space."
    };
  }
  const sections = [
    {
      header: "Close Incident",
      widgets: [
        {
          textInput: {
            label: "Please describe the incident resolution",
            type: "MULTIPLE_LINE",
            name: "description"
          }
        },
        {
          buttonList: {
            buttons: [
              {
                text: "Close Incident",
                onClick: {
                  action: {
                    function: "closeIncident"
                  }
                }
              }
            ]
          }
        }
      ]
    }
  ];
  return {
    actionResponse: {
      type: "DIALOG",
      dialogAction: {
        dialog: {
          body: {
            sections,
          }
        }
      }
    }
  };
}

/**
 * Responds to a CARD_CLICKED event with a Dialog submission in Google Chat.
 *
 * This app only responds to one kind of dialog (Close Incident).
 * It creates a Doc with a summary of the incident information and posts a message
 * to the space with a link to the Doc.
 *
 * @param {Object} event the event object from Google Chat
 */
function processSubmitDialog_(event) {
  const resolution = event.common.formInputs.description[""].stringInputs.value[0];
  const chatHistory = concatenateAllSpaceMessages_(event.space.name);
  const chatSummary = summarizeChatHistory_(chatHistory);
  const docUrl = createDoc_(event.space.displayName, resolution, chatHistory, chatSummary);
  return {
    actionResponse: {
      type: "NEW_MESSAGE",
    },
    text: `Incident closed with the following resolution: ${resolution}\n\nHere is the automatically generated post-mortem:\n${docUrl}`
  };
}

/**
 * Lists all the messages in the Chat space, then concatenate all of them into
 * a single text containing the full Chat history.
 *
 * For simplicity for this demo, it only fetches the first 100 messages.
 *
 * Messages with slash commands are filtered out, so the returned history will
 * contain only the conversations between users and not app command invocations.
 *
 * @return {string} a text containing all the messages in the space in the format:
 *          Sender's name: Message
 */
function concatenateAllSpaceMessages_(spaceName) {
  // Call Chat API method spaces.messages.list
  const response = Chat.Spaces.Messages.list(spaceName, { 'pageSize': 100 });
  const messages = response.messages;
  // Fetch the display names of the message senders and returns a text
  // concatenating all the messages.
  let userMap = new Map();
  return messages
    .filter(message => message.slashCommand === undefined)
    .map(message => `${getUserDisplayName_(userMap, message.sender.name)}: ${message.text}`)
    .join('\n');
}

/**
 * Obtains the display name of a user by using the Admin Directory API.
 *
 * The fetched display name is cached in the provided map, so we only call the API
 * once per user.
 *
 * If the user does not have a display name, then the full name is used.
 *
 * @param {Map} userMap a map containing the display names previously fetched
 * @param {string} userName the resource name of the user
 * @return {string} the user's display name
 */
function getUserDisplayName_(userMap, userName) {
  if (userMap.has(userName)) {
    return userMap.get(userName);
  }
  let displayName = 'Unknown User';
  try {
    const user = AdminDirectory.Users.get(
      userName.replace("users/", ""),
      { projection: 'BASIC', viewType: 'domain_public' });
    displayName = user.name.displayName ? user.name.displayName : user.name.fullName;
  } catch (e) {
    // Ignore error if the API call fails (for example, because it's an
    // out-of-domain user or Chat app)) and just use 'Unknown User'.
  }
  userMap.set(userName, displayName);
  return displayName;
}

ChatSpaceCreator.gs

Er empfängt Formulardaten, die Nutzer auf der Seite zur Fehlerinitialisierung eingeben, und verwendet diese, um einen Chatbereich einzurichten, indem er ihn erstellt und befüllt. Anschließend wird eine Nachricht zum Problem gepostet.

ChatSpaceCreator.gs-Code ansehen

apps-script/incident-response/ChatSpaceCreator.gs

Auf GitHub ansehen

/**
 * Creates a space in Google Chat with the provided title and members, and posts an
 * initial message to it.
 *
 * @param {Object} formData the data submitted by the user. It should contain the fields
 *                          title, description, and users.
 * @return {string} the resource name of the new space.
 */
function createChatSpace(formData) {
  const users = formData.users.trim().length > 0 ? formData.users.split(',') : [];
  const spaceName = setUpSpace_(formData.title, users);
  addAppToSpace_(spaceName);
  createMessage_(spaceName, formData.description);
  return spaceName;
}

/**
 * Creates a space in Google Chat with the provided display name and members.
 *
 * @return {string} the resource name of the new space.
 */
function setUpSpace_(displayName, users) {
  const memberships = users.map(email => ({
    member: {
      name: `users/${email}`,
      type: "HUMAN"
    }
  }));
  const request = {
    space: {
      displayName: displayName,
      spaceType: "SPACE",
      externalUserAllowed: true
    },
    memberships: memberships
  };
  // Call Chat API method spaces.setup
  const space = Chat.Spaces.setup(request);
  return space.name;
}

/**
 * Adds this Chat app to the space.
 *
 * @return {string} the resource name of the new membership.
 */
function addAppToSpace_(spaceName) {
  const request = {
    member: {
      name: "users/app",
      type: "BOT"
    }
  };
  // Call Chat API method spaces.members.create
  const membership = Chat.Spaces.Members.create(request, spaceName);
  return membership.name;
}

/**
 * Posts a text message to the space on behalf of the user.
 *
 * @return {string} the resource name of the new message.
 */
function createMessage_(spaceName, text) {
  const request = {
    text: text
  };
  // Call Chat API method spaces.messages.create
  const message = Chat.Spaces.Messages.create(request, spaceName);
  return message.name;
}

DocsApi.gs

Ruft die Google Docs API auf, um ein Google Docs-Dokument in Google Drive eines Nutzers zu erstellen, und schreibt eine Zusammenfassung der in VertexAiApi.gs erstellten Informationen zum Vorfall in das Dokument.

DocsApi.gs-Code ansehen

apps-script/incident-response/DocsApi.gs

Auf GitHub ansehen

/**
 * Creates a Doc in the user's Google Drive and writes a summary of the incident information to it.
 *
 * @param {string} title The title of the incident
 * @param {string} resolution Incident resolution described by the user
 * @param {string} chatHistory The whole Chat history be included in the document
 * @param {string} chatSummary A summary of the Chat conversation to be included in the document
 * @return {string} the URL of the created Doc
 */
function createDoc_(title, resolution, chatHistory, chatSummary) {
  let doc = DocumentApp.create(title);
  let body = doc.getBody();
  body.appendParagraph(`Post-Mortem: ${title}`).setHeading(DocumentApp.ParagraphHeading.TITLE);
  body.appendParagraph("Resolution").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(resolution);
  body.appendParagraph("Summary of the conversation").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(chatSummary);
  body.appendParagraph("Full Chat history").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(chatHistory);
  return doc.getUrl();
}

VertexAiApi.gs

Die Unterhaltung im Chatbereich wird mithilfe von Vertex AI zusammengefasst. Diese Zusammenfassung wird in einem speziell erstellten Dokument in DocsAPI.gs veröffentlicht.

VertexAiApi.gs-Code ansehen

apps-script/incident-response/VertexAiApi.gs

Auf GitHub ansehen

/**
 * Summarizes a Chat conversation using the Vertex AI text prediction API.
 *
 * @param {string} chatHistory The Chat history that will be summarized.
 * @return {string} The content from the text prediction response.
 */
function summarizeChatHistory_(chatHistory) {
  const prompt =
    "Summarize the following conversation between Engineers resolving an incident"
      + " in a few sentences. Use only the information from the conversation.\n\n"
      + chatHistory;
  const request = {
    instances: [
      { prompt: prompt }
    ],
    parameters: {
      temperature: 0.2,
      maxOutputTokens: 256,
      topK: 40,
      topP: 0.95
    }
  }
  const fetchOptions = {
    method: 'POST',
    headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
    contentType: 'application/json',
    payload: JSON.stringify(request)
  }
  const response = UrlFetchApp.fetch(
    `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
      + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
      + "/publishers/google/models/text-bison:predict",
    fetchOptions);
  const payload = JSON.parse(response.getContentText());
  return payload.predictions[0].content;
}

WebController.gs

Die Website zur Initialisierung von Vorfällen wird bereitgestellt.

WebController.gs-Code ansehen

apps-script/incident-response/WebController.gs

Auf GitHub ansehen

/**
 * Serves the web page from Index.html.
 */
function doGet() {
  return HtmlService
    .createTemplateFromFile('Index')
    .evaluate();
}

/**
 * Serves the web content from the specified filename.
 */
function include(filename) {
  return HtmlService
    .createHtmlOutputFromFile(filename)
    .getContent();
}

/**
 * Returns the email address of the user running the script.
 */
function getUserEmail() {
  return Session.getActiveUser().getEmail();
}

Index.html

Die HTML-Datei der Website zur Ereignisinitialisierung.

Index.html-Code ansehen

apps-script/incident-response/Index.html

Auf GitHub ansehen

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Incident Manager</h1>
        <form id="incident-form" onsubmit="handleFormSubmit(this)">
          <div id="form">
            <p>
              <label for="title">Incident title</label><br/>
              <input type="text" name="title" id="title" />
            </p>
            <p>
              <label for="users">Incident responders</label><br/>
              <small>
                Please enter a comma-separated list of email addresses of the users
                that should be added to the space.
                Do not include <?= getUserEmail() ?> as it will be added automatically.
              </small><br/>
              <input type="text" name="users" id="users" />
            </p>
            <p>
              <label for="description">Initial message</label></br>
              <small>This message will be posted after the space is created.</small><br/>
              <textarea name="description" id="description"></textarea>
            </p>
            <p class="text-center">
              <input type="submit" value="CREATE CHAT SPACE" />
            </p>
          </div>
          <div id="output" class="hidden"></div>
          <div id="clear" class="hidden">
            <input type="reset" value="CREATE ANOTHER INCIDENT" onclick="onReset()" />
          </div>
        </form>
      </div>
    </div>
    <?!= include('JavaScript'); ?>
  </body>
</html>

JavaScript.html

Verarbeitet das Formularverhalten, einschließlich Einreichungen, Fehlern und Löschen, für die Website zur Initialisierung von Vorfällen. Sie wird über die benutzerdefinierte include-Funktion in WebController.gs in Index.html eingefügt.

JavaScript.html-Code ansehen

apps-script/incident-response/JavaScript.html

Auf GitHub ansehen

<script>
  var formDiv = document.getElementById('form');
  var outputDiv = document.getElementById('output');
  var clearDiv = document.getElementById('clear');

  function handleFormSubmit(formObject) {
    event.preventDefault();
    outputDiv.innerHTML = 'Please wait while we create the space...';
    hide(formDiv);
    show(outputDiv);
    google.script.run
      .withSuccessHandler(updateOutput)
      .withFailureHandler(onFailure)
      .createChatSpace(formObject);
  }

  function updateOutput(response) {
    var spaceId = response.replace('spaces/', '');
    outputDiv.innerHTML =
      '<p>Space created!</p><p><a href="https://mail.google.com/chat/#chat/space/'
        + spaceId
        + '" target="_blank">Open space</a></p>';
    show(outputDiv);
    show(clearDiv);
  }

  function onFailure(error) {
    outputDiv.innerHTML = 'ERROR: ' + error.message;
    outputDiv.classList.add('error');
    show(outputDiv);
    show(clearDiv);
  }

  function onReset() {
    outputDiv.innerHTML = '';
    outputDiv.classList.remove('error');
    show(formDiv);
    hide(outputDiv);
    hide(clearDiv);
  }

  function hide(element) {
    element.classList.add('hidden');
  }

  function show(element) {
    element.classList.remove('hidden');
  }
</script>

Stylesheet.html

Das CSS für die Website zur Initialisierung von Vorfällen. Sie wird über die benutzerdefinierte include-Funktion in WebController.gs in Index.html eingefügt.

Stylesheet.html-Code ansehen

apps-script/incident-response/Stylesheet.html

Auf GitHub ansehen

<style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
  }
  div.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
  }
  div.content {
    width: 80%;
    max-width: 1000px;
    padding: 1rem;
    border: 1px solid #999;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgba(66, 66, 66, 0.08), 0 2px 4px 2px rgba(66, 66, 66, 0.16);
  }
  h1 {
    text-align: center;
    padding-bottom: 1rem;
    margin: 0 -1rem 1rem -1rem;
    border-bottom: 1px solid #999;
  }
 #output {
    text-align: center;
    min-height: 250px;
  }
  div#clear {
    text-align: center;
    padding-top: 1rem;
    margin: 1rem -1rem 0 -1rem;
    border-top: 1px solid #999;
  }
  input[type=text], textarea {
    width: 100%;
    padding: 1rem 0.5rem;
    margin: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid #999;
    background-color: #f0f0f0;
  }
  textarea {
    height: 5rem;
  }
  small {
    color: #999;
  }
  input[type=submit], input[type=reset] {
    padding: 1rem;
    border: none;
    background-color: #6200ee;
    color: #fff;
    border-radius: 0.25rem;
    width: 25%;
  }
  .hidden {
    display: none;
  }
  .text-center {
    text-align: center;
  }
  .error {
    color: red;
  }
</style>

Cloud-Projektnummer und ‑ID ermitteln

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

   Zur Google Cloud Console

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

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

Apps Script-Projekt erstellen

So erstellen Sie ein Apps Script-Projekt und verknüpfen es mit Ihrem Cloud-Projekt:

1. Klicken Sie auf die folgende Schaltfläche, um das Apps Script-Projekt Auf Vorfälle mit Google Chat reagieren zu öffnen.
   Projekt öffnen
2. Klicken Sie auf info_outline Übersicht.
3. Klicken Sie auf der Übersichtsseite auf  Kopie erstellen.

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

   1. Klicken Sie auf Kopie von „Auf Vorfälle mit Google Chat reagieren“.

   2. Geben Sie unter Projekttitel Incident Management Chat app ein.

   3. Klicken Sie auf Umbenennen.

5. Öffnen Sie in Ihrer Kopie des Apps Script-Projekts die Datei Consts.gs und ersetzen Sie YOUR_PROJECT_ID durch die ID Ihres Cloud-Projekts.

Cloud-Projekt des Apps Script-Projekts festlegen

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

Apps Script-Bereitstellung erstellen

Nachdem der gesamte Code vorhanden ist, können Sie das Apps Script-Projekt bereitstellen. Sie verwenden die Bereitstellungs-ID, wenn Sie die Chat-App in Google Cloud konfigurieren.

1. Öffnen Sie in Apps Script das Projekt der Anwendung für die Reaktion auf Vorfälle.

   Zu Apps Script

2. Klicken Sie auf Bereitstellen > Neue Bereitstellung.

3. Wenn Add-on und Web-App noch nicht ausgewählt sind, klicken Sie neben Typ auswählen auf die Bereitstellungstypen  und wählen Sie Add-on und Web-App aus.

4. Geben Sie unter Beschreibung eine Beschreibung für diese Version ein, z. B. Complete version of incident management app.

5. Wählen Sie unter Ausführen als die Option Nutzer, der auf die Webanwendung zugreift aus.

6. Wählen Sie unter Wer hat Zugriff die Option Jeder in Ihrer Workspace-Organisation aus. „Ihre Workspace-Organisation“ ist der Name Ihrer Google Workspace-Organisation.

7. Klicken Sie auf Bereitstellen. Apps Script meldet eine erfolgreiche Bereitstellung und gibt eine Bereitstellungs-ID und eine URL für die Web-Seite zur Initialisierung des Vorfalls an.

8. Notieren Sie sich die URL der Web-App, die Sie später aufrufen, wenn Sie einen Vorfall starten. Kopieren Sie die Bereitstellungs-ID. Sie verwenden diese ID, wenn Sie die Chat-App in der Google Cloud Console konfigurieren.

9. Klicken Sie auf Fertig.

Chat-App in der Google Cloud Console konfigurieren

In diesem Abschnitt wird beschrieben, wie Sie die Google Chat API in der Google Cloud Console mit Informationen zu Ihrer Chat-App konfigurieren, einschließlich der ID der Bereitstellung, die Sie gerade über Ihr Apps Script-Projekt erstellt haben.

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

   Chat API-Konfiguration aufrufen

2. Geben Sie unter Anwendungsname Incident Management ein.

3. Geben Sie unter Avatar-URL https://developers.google.com/chat/images/quickstart-app-avatar.png ein.

4. Geben Sie unter Beschreibung den Wert Responds to incidents. ein.

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

6. Wählen Sie unter Funktionsweise die Optionen 1:1-Nachrichten empfangen und Gruppenbereichen und Gruppenunterhaltungen beitreten aus.

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

8. Fügen Sie unter Bereitstellungs-ID die Apps Script-Bereitstellungs-ID ein, die Sie zuvor aus der Bereitstellung des Apps Script-Projekts kopiert haben.

9. Registrieren Sie einen Slash-Befehl, der von der vollständig implementierten Chat-App verwendet wird:

   1. Klicken Sie unter Slash-Befehle auf Slash-Befehl hinzufügen.

   2. Geben Sie unter Name /closeIncident ein.

   3. Geben Sie unter Befehls-ID 1 ein.

   4. Geben Sie unter Beschreibung den Wert Closes the incident being discussed in the space. ein.

   5. Wählen Sie Öffnet ein Dialogfeld aus.

   6. Klicken Sie auf Fertig. Der Befehl „/“ ist registriert und aufgeführt.

10. Wählen Sie unter Sichtbarkeit die Option Diese Chat-App bestimmten Personen und Gruppen in Ihrer Workspace-Domain zur Verfügung stellen aus und geben Sie Ihre E-Mail-Adresse ein.

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

12. Klicken Sie auf Speichern. Es wird eine Meldung angezeigt, dass die Konfiguration gespeichert wurde. Die App kann jetzt getestet werden.

Chat-App testen

Wenn Sie die Chat-App für die Problemverwaltung testen möchten, starten Sie einen Fall über die Webseite und prüfen Sie, ob die Chat-App wie erwartet funktioniert:

1. Rufen Sie die URL der Webanwendung der Apps Script-Bereitstellung auf.

2. Wenn Sie in Apps Script um Erlaubnis zum Zugriff auf Ihre Daten gebeten werden, klicken Sie auf Berechtigungen überprüfen, melden Sie sich mit einem geeigneten Google-Konto in Ihrer Google Workspace-Domain an und klicken Sie auf Zulassen.

3. Die Seite zum Initiieren des Vorfalls wird geöffnet. Geben Sie Testinformationen ein:

   1. Geben Sie unter Titel des Vorfalls The First Incident ein.
   2. Optional können Sie unter Incident Responders (Incident Responder) die E-Mail-Adressen Ihrer Kollegen eingeben. Es müssen Nutzer mit einem Google Chat-Konto in Ihrer Google Workspace-Organisation sein, da andernfalls die Erstellung des Gruppenbereichs fehlschlägt. Geben Sie nicht Ihre eigene E-Mail-Adresse ein, da sie automatisch enthalten ist.
   3. Geben Sie unter Erste Nachricht den Wert Testing the incident management Chat app. ein.

4. Klicken Sie auf Chatbereich erstellen. Eine creating space-Meldung wird angezeigt.

5. Nachdem der Gruppenbereich erstellt wurde, wird eine Space created!-Meldung angezeigt. Klicken Sie auf Gruppenbereich öffnen. Der Gruppenbereich wird in Google Chat in einem neuen Tab geöffnet.

6. Optional können Sie und die anderen Beteiligten am Notfallbeheben Nachrichten im Gruppenbereich senden. Die App fasst diese Nachrichten mithilfe von Vertex AI zusammen und teilt ein retrospektives Dokument.

7. Wenn Sie die Reaktion auf den Vorfall beenden und mit der Problembehebung beginnen möchten, geben Sie im Chatbereich /closeIncident ein. Ein Dialogfeld für die Vorfallverwaltung wird geöffnet.

8. Geben Sie unter Vorfall schließen eine Beschreibung für die Behebung des Vorfalls ein, z. B. Test complete.

9. Klicken Sie auf Incident schließen.

Die App für die Problemverwaltung listet die Nachrichten im Gruppenbereich auf, fasst sie mit Vertex AI zusammen, fügt die Zusammenfassung in ein Google Docs-Dokument ein und gibt das Dokument im Gruppenbereich frei.

Bereinigen

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

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

   Ressourcenmanager aufrufen

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

Weitere Informationen

• Antworten auf Fragen basierend auf Chat-Unterhaltungen mit einer KI-Chat-App von Gemini
• Projekte mit Google Chat, Vertex AI und Firestore verwalten
• Die App für die Reaktion auf Vorfälle authentifiziert sich mit Nutzeranmeldedaten, um APIs und Google Cloud-Dienste wie die Chat API und die Vertex AI API aufzurufen. Das bedeutet, dass der Nutzer, der einen Vorfall initiiert, Zugriff auf diese Dienste haben muss. Um die App robuster zu machen, sollten Sie die Vertex AI API mit einem Dienstkonto statt mit den Anmeldedaten des Nutzers aufrufen, der den Befehl /closeIncident ausführt. Informationen zum Konfigurieren eines Dienstkontos für die Vertex AI API finden Sie unter Benutzerdefiniertes Dienstkonto verwenden.