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

In dieser Anleitung erfahren Sie, wie Sie eine Google Chat-App erstellen, die in Echtzeit auf Vorfälle reagiert. Beim Reagieren auf einen Vorfall erstellt die App einen Chatbereich und füllt diesen mit Daten. Außerdem erleichtert sie die Auflösung von Vorfällen mit Nachrichten, Slash-Befehlen und Dialogfeldern und nutzt KI, um die Reaktion auf Vorfälle in einem Google Docs-Dokument zusammenzufassen.

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

  • Eine zeitkritische Groß-/Kleinschreibung wird auf einer CRM-Plattform (Customer-Relationship-Management) erstellt, auf der ein Serviceteam zusammen an einer Lösung arbeiten muss.
  • Ein System geht offline und benachrichtigt eine Gruppe von Site Reliability Engineers (SREs), damit sie zusammenarbeiten können, um das System wieder online zu stellen.
  • Ein Erdbeben mit hoher Stärke tritt auf und Rettungskräfte müssen ihre Reaktion koordinieren.

Im Rahmen dieser Anleitung wird die Vorfallsbenachrichtigung gestartet, wenn ein Nutzer den Vorfall mit einem Klick auf eine Schaltfläche auf einer Webseite meldet. Auf der Webseite wird ein Vorfall simuliert. Dazu werden Nutzer aufgefordert, grundlegende Informationen zum Vorfall einzugeben: Titel, Beschreibung und E-Mail-Adressen der Rettungskräfte.

Sehen Sie sich die Chat-App für das Vorfallmanagement in Aktion an:

  • Die Website, die einen Vorfall auslöst.
    Abbildung 1: Die Website, auf der jemand einen Vorfall melden kann.
  • Benachrichtigung, dass der Chatbereich für den Vorfall erstellt wurde.
    Abbildung 2: Benachrichtigung, dass der Chatbereich für den Vorfall erstellt wurde.
  • Der Chatbereich für die Reaktion auf Vorfälle.
    Abbildung 3: Chatbereich für die Reaktion auf Vorfälle
  • Vorfall mit einem Slash-Befehl beheben
    Abbildung 4: Vorfall mit einem Slash-Befehl beheben
  • Dialogfeld zur Behebung von Vorfällen.
    Abbildung 5: Dialogfeld zur Behebung von Vorfällen.
  • Im Gruppenbereich freigegebenes Google Docs-Dokument zur Behebung von Vorfällen.
    Abbildung 6: Im Gruppenbereich freigegebenes Google Docs-Dokument zur Behebung von Vorfällen.
  • Google-Dokument zur KI-Zusammenfassung von Vorfällen
    Abbildung 7: Das Google Docs-Dokument zur KI-Zusammenfassung von Vorfällen.

Voraussetzungen

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

  • Ein Google Workspace-Konto mit Zugriff auf Google Chat.
  • Verzeichnis (Kontaktfreigabe) für Google Workspace aktivieren Die Vorfall-App verwendet das Verzeichnis, um die Kontaktdaten der Incident-Response-Experten wie Name und E-Mail-Adresse abzurufen. Incident-Response-Experten müssen Nutzer mit einem Google Chat-Konto in Ihrer Google Workspace-Organisation sein.

Zielsetzungen

  • Chat-App erstellen, die auf Vorfälle reagiert
  • So helfen Sie Nutzern, auf Vorfälle zu reagieren:
    • Bereiche für die Reaktion auf Vorfälle erstellen
    • Nachrichten posten, in denen Vorfälle und Reaktionen zusammengefasst sind
    • Unterstützung der Zusammenarbeit durch interaktive Funktionen der Chat-App.
  • Fassen Sie Gespräche und Lösungen mit Vertex AI zusammen.

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.

Architektur der Google Chat-App für die Reaktion auf Vorfälle

Die Architektur zeigt, wie die Google Chat-App einen Vorfall verarbeitet und behoben wird.

  1. Ein Nutzer startet einen Vorfall über eine externe Website, die in 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 Anfrage wird von der Google Chat-App für die Reaktion auf Vorfälle verarbeitet:

    1. Der Apps Script Admin SDK-Dienst ruft Informationen zu Teammitgliedern ab, z. B. Nutzer-ID und E-Mail-Adresse.

    2. Mit einer Reihe von HTTP-Anfragen an die Chat API mit dem Apps Script Advanced Chat-Dienst erstellt die Google Chat-Anwendung für die Vorfallsantwort einen Chatbereich für Vorfälle, füllt diesen mit Teammitgliedern aus und sendet eine Nachricht an den Gruppenbereich.

  4. Die Teammitglieder besprechen den Vorfall im Chatbereich.

  5. Ein Teammitglied ruft einen Slash-Befehl auf, um eine Lösung des Vorfalls zu signalisieren.

    1. Bei einem HTTP-Aufruf an die Chat API mit dem erweiterten Chat-Dienst von Apps Script werden alle Nachrichten des Chatbereichs aufgelistet.

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

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

    4. Die Google Chat-App zur Reaktion auf Vorfälle ruft die Chat API auf, um eine Nachricht mit einem Link zur Docs-Zusammenfassung 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. Öffnen Sie in der Google Cloud Console das Dreistrich-Menü > IAM und Verwaltung > Projekt erstellen.

    Zur Seite „Projekt erstellen“

  2. Geben Sie im Feld Projektname einen aussagekräftigen Namen für das 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 daher eine ID aus, die Ihren Anforderungen für die gesamte Lebensdauer des Projekts entspricht.

  3. Klicken Sie im Feld Standort auf Durchsuchen, um potenzielle Standorte für Ihr Projekt aufzurufen. Klicken Sie danach auf Auswählen.
  4. Klicken Sie auf Erstellen. Die Google Cloud Console ruft die Dashboard-Seite auf und Ihr Projekt wird innerhalb weniger Minuten erstellt.

gcloud-CLI

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

  • Cloud Shell: Aktivieren Sie Cloud Shell, um ein Online-Terminal zu verwenden, bei dem die gcloud CLI bereits eingerichtet ist.
    Cloud Shell aktivieren
  • Lokale Shell: Um eine lokale Entwicklungsumgebung zu verwenden, müssen Sie die gcloud CLI installieren und initialize.
    Verwenden Sie den Befehl „gcloud projects create“, um ein Cloud-Projekt zu erstellen: 
    gcloud projects create PROJECT_ID
    Ersetzen Sie PROJECT_ID, indem Sie die ID des Projekts festlegen, das Sie erstellen möchten.

Abrechnung für das Cloud-Projekt aktivieren

Google Cloud Console

  1. Rufen Sie in der Google Cloud Console Abrechnung auf. Klicken Sie auf das Dreipunkt-Menü > 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 (), klicken Sie auf Abrechnung ändern und wählen Sie das Cloud-Rechnungskonto aus.
  4. Klicken Sie auf Konto festlegen.

gcloud-CLI

  1. Führen Sie folgenden Befehl aus, um verfügbare Rechnungskonten aufzulisten: 
    gcloud billing accounts list
  2. Rechnungskonto mit einem Google Cloud-Projekt verknüpfen: 
    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

Google Cloud Console

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

    APIs aktivieren

  2. Prüfen Sie, ob die APIs im richtigen Cloud-Projekt aktiviert sind. Klicken Sie dann auf Weiter.

  3. Prüfen Sie, ob die richtigen APIs aktiviert sind, und klicken Sie dann auf Aktivieren.

gcloud-CLI

  1. Legen Sie gegebenenfalls das aktuelle Cloud-Projekt auf das Projekt fest, das Sie mit dem Befehl gcloud config set project erstellt haben:

    gcloud config set project PROJECT_ID

    Ersetzen Sie PROJECT_ID durch die Projekt-ID des von Ihnen erstellten Cloud-Projekts.

  2. Aktivieren Sie die Google Chat API, die Google Docs API, die Admin SDK API und die Vertex AI API mit dem Befehl gcloud services enable:

    gcloud services enable chat.googleapis.com docs.googleapis.com admin.googleapis.com aiplatform.googleapis.com

Authentifizierung und Autorisierung einrichten

Durch die Authentifizierung und Autorisierung kann die Chat-Anwendung auf Ressourcen in Google Workspace und Google Cloud zugreifen, um eine Reaktion auf Vorfälle zu verarbeiten.

In dieser Anleitung veröffentlichen Sie die Anwendung intern, sodass Sie Platzhalterinformationen verwenden können. Bevor Sie die App extern veröffentlichen, ersetzen Sie Platzhalterinformationen durch echte Informationen für den Zustimmungsbildschirm.

  1. Gehen Sie in der Google Cloud Console zu Menü > APIs und Dienste > OAuth-Zustimmungsbildschirm.

    Zum OAuth-Zustimmungsbildschirm

  2. Wählen Sie unter Nutzertyp die Option Intern aus und klicken Sie dann auf Erstellen.

  3. Geben Sie unter App-Name Incident Management ein.

  4. Wählen Sie unter E-Mail-Adresse des Nutzersupports Ihre E-Mail-Adresse oder eine entsprechende Google-Gruppe aus.

  5. Geben Sie unter Kontaktdaten des Entwicklers Ihre E-Mail-Adresse ein.

  6. Klicken Sie auf Speichern und fortfahren.

  7. Klicken Sie auf Bereiche hinzufügen oder entfernen. Für jede API, die Sie in Ihrem Cloud-Projekt aktiviert haben, wird ein Bereich mit einer Liste der Bereiche angezeigt.

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

  9. Klicken Sie auf Zu Tabelle hinzufügen.

  10. Klicken Sie auf Aktualisieren.

  11. Klicken Sie auf Speichern und fortfahren.

  12. Prüfen Sie die Zusammenfassung der App-Registrierung und klicken Sie dann auf Zurück zum Dashboard.

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, sodass Sie nicht jede Datei kopieren und einfügen müssen.

Einige Funktionen enthalten am Ende ihrer Namen Unterstriche, z. B. processSlashCommand_() von ChatApp.gs. Durch diesen Unterstrich wird die Funktion auf der Webseite zur Initialisierung des Vorfalls 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 gewährleisten, ist das clientseitige JavaScript der Anwendung in <script />-Tags und der CSS-Code in <style />-Tags in einer HTML-Datei enthalten.

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

Auf GitHub ansehen

Im Folgenden finden Sie eine Übersicht über die einzelnen Dateien:

Consts.gs

Definiert Konstanten, auf die von anderen Codedateien verwiesen wird, einschließlich Ihrer Cloud-Projekt-ID, der Vertex AI-Standort-ID und der Slash-Befehls-ID zum Schließen eines Vorfalls.

Consts.gs-Code ansehen

apps-script/incident-response/Consts.gs
const PROJECT_ID = 'replace-with-your-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
const CLOSE_INCIDENT_COMMAND_ID = 1;
ChatApp.gs

Verarbeitet Chat-Interaktionsereignisse, einschließlich Nachrichten, Klicks auf Karten, Slash-Befehle und Dialogfelder. Reagiert auf den Slash-Befehl /closeIncident, indem ein Dialogfeld geöffnet wird, in dem Details zur Auflösung des Vorfalls abgerufen werden. Liest Nachrichten im Gruppenbereich durch Aufrufen der Methode spaces.messages.list in der Chat API. Nutzer-IDs werden mit dem Admin SDK-Verzeichnisdienst in Apps Script abgerufen.

ChatApp.gs-Code ansehen

apps-script/incident-response/ChatApp.gs
/**
 * 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

Empfängt Formulardaten, die Nutzer auf der Webseite zur Initialisierung des Vorfalls eingeben, und verwendet diese zum Einrichten eines Chatbereichs, indem er erstellt und ausgefüllt wird. Anschließend wird eine Nachricht über den Vorfall gepostet.

ChatSpaceCreator.gs-Code ansehen

apps-script/incident-response/ChatSpaceCreator.gs
/**
 * 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

Die Google Docs API aufrufen, um ein Google Docs-Dokument im Google Drive eines Nutzers zu erstellen, und eine Zusammenfassung der in VertexAiApi.gs erstellten Vorfallinformationen in das Dokument schreiben.

DocsApi.gs-Code ansehen

apps-script/incident-response/DocsApi.gs
/**
 * 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

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

VertexAiApi.gs-Code ansehen

apps-script/incident-response/VertexAiApi.gs
/**
 * 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

Stellt die Website zur Initialisierung von Vorfällen bereit.

WebController.gs-Code ansehen

apps-script/incident-response/WebController.gs
/**
 * 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

Der HTML-Code, der die Website zur Initialisierung des Vorfalls enthält.

Index.html-Code ansehen

apps-script/incident-response/Index.html
<!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 Übermittlungen, Fehler und Löschvorgänge, für die Website zur Initialisierung von Vorfällen. Es wird durch die benutzerdefinierte include-Funktion in WebController.gs in Index.html eingefügt.

JavaScript.html-Code ansehen

apps-script/incident-response/JavaScript.html
<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

Der CSS-Code für die Website zur Initialisierung des Vorfalls. Es wird durch die benutzerdefinierte include-Funktion in WebController.gs in Index.html aufgenommen.

Stylesheet.html-Code ansehen

apps-script/incident-response/Stylesheet.html
<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>

Nummer und ID Ihres Cloud-Projekts ermitteln

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

    Zur Google Cloud Console

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

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

Apps Script-Projekt erstellen

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

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

  4. Geben Sie Ihrer Kopie des Apps Script-Projekts einen Namen:

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

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

    3. Klicken Sie auf Umbenennen.

  5. Rufen Sie in der Kopie des Apps Script-Projekts die Datei Consts.gs auf 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 Das Symbol für die Projekteinstellungen Projekteinstellungen.
  2. Klicken Sie unter Google Cloud Platform-Projekt (GCP) auf Projekt ändern.
  3. Fügen Sie unter GCP-Projektnummer die Projektnummer Ihres Cloud-Projekts ein.
  4. Klicken Sie auf Projekt festlegen. Das Cloud-Projekt und das Apps Script-Projekt sind jetzt verbunden.

Apps Script-Bereitstellung erstellen

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

  1. Öffnen Sie in Apps Script das Projekt der Incident-Response-App.

    Apps Script aufrufen

  2. Klicken Sie auf Bereitstellen > Neue Bereitstellung.

  3. Wenn Add-on und Webanwendung noch nicht ausgewählt sind, klicken Sie neben Typ auswählen auf die Bereitstellungstypen Das Symbol für die Projekteinstellungen und wählen Sie Add-on und Webanwendung 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 Web-App zugreift aus.

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

  7. Klicken Sie auf Bereitstellen. Apps Script meldet die erfolgreiche Bereitstellung und stellt eine Bereitstellungs-ID und eine URL für die Webseite zur Initialisierung des Vorfalls bereit.

  8. Notieren Sie sich die URL der Web-App. Sie können diese 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 erfahren Sie, wie Sie die Google Chat API in der Google Cloud Console mit Informationen zu Ihrer Chat-App konfigurieren, einschließlich der ID der Bereitstellung, die Sie gerade aus Ihrem Apps Script-Projekt erstellt haben.

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

    Zur Konfiguration der Chat API

  2. Geben Sie unter App-Name Incident Management ein.

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

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

  5. Stellen Sie den Schalter Interaktive Funktionen aktivieren auf „Ein“.

  6. Wählen Sie unter Funktionen die Option 1:1-Nachrichten erhalten und Gruppenbereichen und Gruppenunterhaltungen beitreten aus.

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

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

  9. Registrieren Sie einen Slash-Befehl, den die vollständig implementierte Chat-App verwendet:

    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 Text Closes the incident being discussed in the space. ein.

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

    6. Klicken Sie auf Fertig. Der Slash-Befehl ist registriert und aufgeführt.

  10. Wählen Sie unter Sichtbarkeit die Option Diese Chat-App für bestimmte Personen und Gruppen in Ihrer Workspace-Domain verfügbar machen aus und geben Sie Ihre E-Mail-Adresse ein.

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

  12. Klicken Sie auf Speichern. Eine Meldung zum Speichern der Konfiguration wird angezeigt, was bedeutet, dass die Anwendung zum Testen bereit ist.

Chat App testen

Starten Sie zum Testen der Chat-App für das Vorfallmanagement einen Vorfall auf der Webseite und prüfen Sie, ob die Chat-App wie erwartet funktioniert:

  1. Rufen Sie die URL der Webanwendung für die Bereitstellung von Apps Script auf.

  2. Wenn Apps Script Sie um Zugriff auf Ihre Daten bittet, klicken Sie auf Berechtigungen prüfen, melden Sie sich mit einem entsprechenden Google-Konto in Ihrer Google Workspace-Domain an und klicken Sie auf Zulassen.

  3. Die Webseite zur Initialisierung des Vorfalls wird geöffnet. Gib die Testinformationen ein:

    1. Geben Sie unter Titel des Vorfalls The First Incident ein.
    2. Optional können Sie unter Incident-Response-Experten die E-Mail-Adressen anderer Incident-Response-Experten eingeben. Es müssen Nutzer mit einem Google Chat-Konto in Ihrer Google Workspace-Organisation sein. Andernfalls schlägt das Erstellen des Gruppenbereichs fehl. Geben Sie nicht Ihre eigene E-Mail-Adresse ein, da diese automatisch eingefügt wird.
    3. Geben Sie unter Erste Nachricht den String Testing the incident management Chat app. ein.

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

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

  6. Optional können Sie und die anderen Incident-Response-Experten Nachrichten im Gruppenbereich senden. Die Anwendung fasst diese Nachrichten mithilfe von Vertex AI zusammen und teilt ein Dokument der Retrospektive.

  7. Geben Sie im Chatbereich /closeIncident ein, um die Reaktion auf einen Vorfall zu beenden und mit der Lösung zu beginnen. Ein Dialogfeld für das Vorfallmanagement 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 Vorfall schließen.

Die Anwendung für das Vorfallmanagement 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, sollten Sie das Cloud-Projekt löschen.

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

    Zu Resource Manager

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