Reagowanie na incydenty za pomocą Google Chat, Vertex AI, Apps Script i uwierzytelniania użytkowników

Z tego samouczka dowiesz się, jak utworzyć aplikację Google Chat, która odpowiada na incydenty w czasie rzeczywistym. Podczas reagowania na incydent aplikacja tworzy i wypełnia pokój czatu, ułatwia rozwiązanie incydentu za pomocą wiadomości, poleceń aplikacji i okien dialogowych oraz wykorzystuje AI do podsumowania reagowania na incydenty w dokumencie Google.

Incydent to zdarzenie, które wymaga natychmiastowej interwencji zespołu osób w celu rozwiązania problemu. Przykłady incydentów:

• W systemie zarządzania relacjami z klientami (CRM) tworzone jest zgłoszenie wymagające pilnego rozwiązania, które wymaga współpracy zespołu obsługi klienta.
• System przechodzi w tryb offline, co powoduje wysłanie alertu do grupy inżynierów ds. niezawodności witryn (SRE), aby mogli wspólnie przywrócić go do trybu online.
• Występuje trzęsienie ziemi o dużej magnitudzie, a pracownicy służb ratunkowych muszą skoordynować swoje działania.

Na potrzeby tego samouczka alert o incydencie zaczyna się, gdy ktoś zgłosi incydent, klikając przycisk na stronie internetowej. Strona symuluje incydent, prosząc użytkowników o podanie podstawowych informacji o nim: tytułu, opisu i adresów e-mail osób reagujących.

Zobacz, jak działa aplikacja do zarządzania incydentami w Google Chat:

Wymagania wstępne

Jeśli chcesz włączyć w organizacji któryś z tych warunków wstępnych, poproś administratora Google Workspace o jego włączenie:

• Konto Google Workspace w wersji Business lub Enterprise z dostępem do Google Chat.
• Aby włączyć katalog (udostępnianie kontaktów) w Google Workspace. Aplikacja do zgłaszania incydentów korzysta z katalogu, aby wyszukać dane kontaktowe osób reagujących na incydenty, takie jak imię i nazwisko oraz adres e-mail. Osoby reagujące na incydenty muszą być użytkownikami z kontem Google Chat w organizacji Google Workspace.

Cele

• Utwórz aplikację do obsługi czatu, która reaguje na incydenty.
• Pomóż użytkownikom reagować na incydenty, wykonując te czynności:
  • Tworzenie przestrzeni do reagowania na incydenty.
  • publikowanie wiadomości podsumowujących incydenty i odpowiedzi na nie;
  • Wspieranie współpracy dzięki interaktywnym funkcjom aplikacji do Google Chat.
• Podsumowywanie rozmów i rozwiązań przy użyciu Vertex AI.

Architektura

Na poniższym diagramie przedstawiono architekturę zasobów Google Workspace i Google Cloud używanych przez aplikację Google Chat do reagowania na incydenty.

Architektura pokazuje, jak aplikacja Google Chat do reagowania na incydenty przetwarza incydent i jego rozwiązanie.

1. Użytkownik rozpoczyna zgłaszanie incydentu w zewnętrznej witrynie hostowanej w Apps Script.

2. Witryna wysyła asynchroniczne żądanie HTTP do aplikacji Google Chat, która jest też hostowana w Apps Script.

3. Aplikacja Google Chat do reagowania na incydenty przetwarza prośbę:

   1. Usługa Admin SDK Apps Script pobiera informacje o członkach zespołu, takie jak identyfikator użytkownika i adres e-mail.

   2. Za pomocą zestawu żądań HTTP do interfejsu Chat API z wykorzystaniem zaawansowanej usługi Google Chat w Apps Script aplikacja Google Chat do reagowania na incydenty tworzy pokój Google Chat dotyczący incydentu, dodaje do niego członków zespołu i wysyła do niego wiadomość.

4. Członkowie zespołu omawiają incydent w pokoju czatu.

5. Członek zespołu wywołuje szybkie polecenie, aby zasygnalizować rozwiązanie incydentu.

   1. Wywołanie HTTP interfejsu Chat API za pomocą usługi zaawansowanej Chat Apps Script wyświetla wszystkie wiadomości w pokoju Google Chat.

   2. Vertex AI otrzymuje wymienione wiadomości i generuje podsumowanie.

   3. Usługa Apps Script DocumentApp tworzy dokument Dokumentów Google i dodaje do niego podsumowanie wygenerowane przez Vertex AI.

   4. Aplikacja Google Chat do reagowania na incydenty wywołuje interfejs Chat API, aby wysłać wiadomość z linkiem do dokumentu podsumowującego w Dokumentach.

Przygotowywanie środowiska

W tej sekcji dowiesz się, jak utworzyć i skonfigurować projekt w chmurze Google na potrzeby aplikacji do obsługi czatu.

Tworzenie projektu Google Cloud

Konsola interfejsów API Google

1. W konsoli interfejsów API Google kliknij Menu menu > Uprawnienia i administracja > Utwórz projekt.

   Otwórz stronę Tworzenie projektu

2. W polu Nazwa projektu wpisz opisową nazwę projektu.

   Opcjonalnie: aby edytować identyfikator projektu, kliknij Edytuj. Po utworzeniu projektu nie można zmienić identyfikatora projektu, więc wybierz taki, który będzie odpowiadać Twoim potrzebom przez cały okres istnienia projektu.

3. W polu Lokalizacja kliknij Przeglądaj, aby wyświetlić potencjalne lokalizacje projektu. Następnie kliknij Wybierz.
4. Kliknij Utwórz. Konsola interfejsów API Google otworzy stronę Panel, a projekt zostanie utworzony w ciągu kilku minut.

interfejs wiersza poleceń gcloud

W jednym z tych środowisk programistycznych uzyskaj dostęp do interfejsu Google Cloud CLI (gcloud):

• Cloud Shell: aby używać terminala online z już skonfigurowanym interfejsem gcloud CLI, aktywuj Cloud Shell.
  Aktywuj Cloud Shell
• Lokalna powłoka: aby używać lokalnego środowiska programistycznego, zainstaluj i zainicjuj gcloud CLI.
  Aby utworzyć projekt w chmurze, użyj polecenia gcloud projects create:

  gcloud projects create PROJECT_ID

  Zastąp PROJECT_ID identyfikatorem projektu, który chcesz utworzyć.

Włączanie płatności za projekt w chmurze

Konsola interfejsów API Google

1. W konsoli interfejsów API Google otwórz Rozliczenia. Kliknij Menu menu > Rozliczenia > Moje projekty.

   Otwórz stronę Płatności za moje projekty

2. W sekcji Wybierz organizację wybierz organizację powiązaną z Twoim projektem Google Cloud.
3. W wierszu projektu otwórz menu Działania more_vert, kliknij Zmień ustawienia płatności i wybierz konto rozliczeniowe w Cloud.
4. Kliknij Ustaw konto.

interfejs wiersza poleceń gcloud

1. Aby wyświetlić listę dostępnych kont rozliczeniowych, uruchom to polecenie:

   gcloud billing accounts list

2. Połącz konto rozliczeniowe z projektem Google Cloud:

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

   Zastąp następujące elementy:

   • PROJECT_ID to identyfikator projektu projektu Cloud, w którym chcesz włączyć płatności.
   • BILLING_ACCOUNT_ID to identyfikator konta rozliczeniowego, które ma być połączone z projektem Google Cloud.

Włączanie interfejsów API

Konfigurowanie uwierzytelniania i autoryzacji

Uwierzytelnianie i autoryzacja umożliwiają aplikacji Chat dostęp do zasobów w Google Workspace i Google Cloud w celu przetwarzania reagowania na incydenty.

W tym samouczku opublikujesz aplikację wewnętrznie, więc możesz użyć informacji zastępczych. Zanim opublikujesz aplikację zewnętrznie, zastąp informacje zastępcze prawdziwymi informacjami na ekranie zgody.

1. W konsoli interfejsów API Google otwórz Menu menu > Platforma uwierzytelniania Google > Branding.

   Otwórz Elementy marki

2. Jeśli platforma uwierzytelniania Google została już skonfigurowana, możesz skonfigurować te ustawienia ekranu zgody OAuth w sekcjach Branding, Odbiorcy i Dostęp do danych. Jeśli zobaczysz komunikat Platforma uwierzytelniania Google nie została jeszcze skonfigurowana, kliknij Rozpocznij:

   1. W sekcji Informacje o aplikacji w polu Nazwa aplikacji wpisz Incident Management with User Auth.
   2. W sekcji Adres e-mail dla użytkowników potrzebujących pomocy wybierz swój adres e-mail lub odpowiednią grupę dyskusyjną Google.
   3. Kliknij Dalej.
   4. W sekcji Odbiorcy wybierz Wewnętrzny. Jeśli nie możesz wybrać opcji Wewnętrzny, wybierz Zewnętrzny.
   5. Kliknij Dalej.
   6. W sekcji Dane kontaktowe wpisz adres e-mail, na który będziesz otrzymywać powiadomienia o wszelkich zmianach w projekcie.
   7. Kliknij Dalej.
   8. W sekcji Zakończ zapoznaj się z zasadami dotyczącymi danych użytkownika w usługach interfejsu API Google. Jeśli je akceptujesz, kliknij Akceptuję zasady dotyczące danych użytkownika w usługach interfejsu API Google.
   9. Kliknij Dalej.
   10. Kliknij Utwórz.
   11. Jeśli jako typ użytkownika wybierzesz Zewnętrzny, dodaj użytkowników testowych:
       1. Kliknij Odbiorcy.
       2. W sekcji Użytkownicy testowi kliknij Dodaj użytkowników.
       3. Wpisz swój adres e-mail i adresy e-mail innych autoryzowanych testerów, a następnie kliknij Zapisz.

3. Kliknij Dostęp do danych > Dodaj lub usuń zakresy. Pojawi się panel z listą zakresów każdego interfejsu API włączonego w projekcie Google Cloud.

   1. W sekcji Ręczne dodawanie zakresów wklej te zakresy:

      • 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. Kliknij Dodaj do tabeli.

   3. Kliknij Aktualizuj.

   4. Po wybraniu zakresów wymaganych przez aplikację na stronie Dostęp do danych kliknij Zapisz.

Tworzenie i wdrażanie aplikacji Google Chat

W następnej sekcji skopiujesz i zaktualizujesz cały projekt Apps Script, który zawiera cały wymagany kod aplikacji do obsługi aplikacji do obsługi czatu. Nie musisz więc kopiować i wklejać każdego pliku.

Niektóre funkcje mają na końcu nazwy podkreślenie, np. concatenateAllSpaceMessages_() z ChatApp.gs. Podkreślenie ukrywa funkcję na stronie internetowej inicjowania incydentów, gdy jest ona otwarta w przeglądarce. Więcej informacji znajdziesz w artykule Funkcje prywatne.

Apps Script obsługuje 2 typy plików: .gs skrypty i .html pliki. Aby zachować zgodność z tym wymaganiem, JavaScript po stronie klienta aplikacji jest umieszczany w tagach <script />, a CSS w tagach <style /> w pliku HTML.

Opcjonalnie możesz wyświetlić cały projekt na GitHubie.

Wyświetl w GitHubie

Oto omówienie poszczególnych plików:

Consts.gs

Definiuje stałe, do których odwołują się inne pliki kodu, w tym identyfikator projektu w chmurze, identyfikator lokalizacji Vertex AI, identyfikator szybkiego polecenia do zamykania incydentów i model Gemini.

Wyświetl Consts.gs kod

apps-script/chat/incident-response-user-auth/Consts.gs

Wyświetl w GitHubie

const PROJECT_ID = 'replace-with-your-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
const CLOSE_INCIDENT_COMMAND_ID = 1;
const MODEL_ID = 'gemini-2.5-flash-lite';

ChatApp.gs

Obsługuje zdarzenia interakcji na czacie, w tym wiadomości, kliknięcia przycisków, polecenia aplikacji i okna dialogowe. Odpowiada na Close incidentszybkie polecenie, otwierając okno, w którym można podać szczegóły rozwiązania incydentu. Odczytuje wiadomości w pokoju, wywołując metodę spaces.messages.list w interfejsie Chat API. Pobiera identyfikatory użytkowników za pomocą usługi Directory API z pakietu Admin SDK w Apps Script.

Wyświetl ChatApp.gs kod

apps-script/chat/incident-response-user-auth/ChatApp.gs

Wyświetl w GitHubie

/**
 * Responds to a MESSAGE event in Google Chat.
 * 
 * It always responds with a simple "Hello" text message.
 *
 * @param {Object} event the event object from Google Chat
 */
function onMessage(event) {
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "Hello from Incident Response app!"
  }}}}};
}

/**
 * Responds to an APP_COMMAND event in Google Chat.
 *
 * @param {Object} event the event object from Google Chat
 */
function onAppCommand(event) {
  if (event.chat.appCommandPayload.appCommandMetadata.appCommandId != CLOSE_INCIDENT_COMMAND_ID) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: "Command not recognized. Use the quick command `Close incident` to close the incident managed by this space."
    }}}}};
  }
  return { action: { navigations: [{ pushCard: { 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" }}
      }]}
    }]
  }]}}]}};
}

/**
 * Responds to a BUTTON_CLICKED event in Google Chat from Close Incident dialog.
 *
 * @param {Object} event the event object from Google Chat
 */
function closeIncident(event) {
  if (event.chat.buttonClickedPayload.isDialogEvent) {
    if (event.chat.buttonClickedPayload.dialogEventType == 'SUBMIT_DIALOG') {
      return processSubmitDialog_(event);
    }
    return { action: { navigations: [{ endNavigation: {
      action: "CLOSE_DIALOG" }
    }]}};
  }
}

/**
 * Responds to a BUTTON_CLICKED event in Google Chat from Close Incident dialog submission.
 *
 * 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.commonEventObject.formInputs.description.stringInputs.value[0];
  const space = event.chat.buttonClickedPayload.space;
  const chatHistory = concatenateAllSpaceMessages_(space.name);
  const chatSummary = summarizeChatHistory_(chatHistory);
  const docUrl = createDoc_(space.displayName, resolution, chatHistory, chatSummary);
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { 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.
 *
 * @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
    .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

Otrzymuje dane z formularza wpisane przez użytkowników na stronie internetowej inicjowania incydentu i używa ich do skonfigurowania przestrzeni w Google Chat przez jej utworzenie i wypełnienie, a następnie publikuje wiadomość o incydencie.

Wyświetl ChatSpaceCreator.gs kod

apps-script/chat/incident-response-user-auth/ChatSpaceCreator.gs

Wyświetl w GitHubie

/**
 * Handles an incident by creating a chat space with the provided title and members, and posting a message.
 * All the actions are done using user credentials.
 *
 * @param {Object} formData - The data submitted by the user. It should contain the fields:
 *                           - title: The display name of the chat space.
 *                           - description: The description of the incident.
 *                           - users: A comma-separated string of user emails to be added to the space.
 * @return {string} The resource name of the new space.
 */
function handleIncident(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 chat space.
 *
 * @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"
    },
    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;
}

/**
 * Creates a chat message.
 *
 * @param {string} spaceName - The resource name of the space.
 * @param {string} message - The text to be posted.
 * @return {string} the resource name of the new message.
 */
function createMessage_(spaceName, message) {
  const request = {
    text: message
  };
  // Call Chat API method spaces.messages.create
  const result = Chat.Spaces.Messages.create(request, spaceName);
  return result.name;
}

DocsApi.gs

Wywołuje interfejs Google Docs API, aby utworzyć dokument Google na Dysku Google użytkownika, i zapisuje w nim podsumowanie informacji o incydencie utworzone w VertexAiApi.gs.

Wyświetl DocsApi.gs kod

apps-script/chat/incident-response-user-auth/DocsApi.gs

Wyświetl w GitHubie

/**
 * 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

Podsumowuje rozmowę w pokoju na czacie za pomocą Vertex AI. Podsumowanie jest publikowane w specjalnie utworzonym dokumencie w DocsAPI.gs.

Wyświetl VertexAiApi.gs kod

apps-script/chat/incident-response-user-auth/VertexAiApi.gs

Wyświetl w GitHubie

/**
 * 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 API_ENDPOINT = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}/publishers/google/models/${MODEL_ID}:generateContent`;
  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;
  // Get the access token.
  const accessToken = ScriptApp.getOAuthToken();

  const headers = {
    'Authorization': 'Bearer ' + accessToken,
    'Content-Type': 'application/json',
  };
  const payload = {
    'contents': {
      'role': 'user',
      'parts' : [
        {
          'text': prompt
        }
      ]
    }
  }
  const options = {
    'method': 'post',
    'headers': headers,
    'payload': JSON.stringify(payload),
    'muteHttpExceptions': true,
  };
  try {
    const response = UrlFetchApp.fetch(API_ENDPOINT, options);
    const responseCode = response.getResponseCode();
    const responseText = response.getContentText();

    if (responseCode === 200) {
      const jsonResponse = JSON.parse(responseText);
      console.log(jsonResponse)
      if (jsonResponse.candidates && jsonResponse.candidates.length > 0) {
        return jsonResponse.candidates[0].content.parts[0].text; // Access the summarized text
      } else {
        return "No summary found in response.";
      }

    } else {
      console.error("Vertex AI API Error:", responseCode, responseText);
      return `Error: ${responseCode} - ${responseText}`;
    }
  } catch (e) {
    console.error("UrlFetchApp Error:", e);
    return "Error: " + e.toString();
  }
}

WebController.gs

Wyświetla witrynę inicjowania incydentu.

Wyświetl WebController.gs kod

apps-script/chat/incident-response-user-auth/WebController.gs

Wyświetl w GitHubie

/**
 * 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

Kod HTML strony internetowej inicjującej incydent.

Wyświetl Index.html kod

apps-script/chat/incident-response-user-auth/Index.html

Wyświetl w GitHubie

<!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

Obsługuje zachowanie formularza, w tym przesyłanie, błędy i czyszczenie, w przypadku witryny inicjowania incydentów. Jest ona uwzględniana w Index.html przez niestandardową funkcję include w WebController.gs.

Wyświetl JavaScript.html kod

apps-script/chat/incident-response-user-auth/JavaScript.html

Wyświetl w GitHubie

<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)
      .handleIncident(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

Arkusz CSS strony inicjowania incydentu. Jest ona uwzględniona w Index.html przez niestandardową funkcję include w WebController.gs.

Wyświetl Stylesheet.html kod

apps-script/chat/incident-response-user-auth/Stylesheet.html

Wyświetl w GitHubie

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

Znajdowanie numeru i identyfikatora projektu w chmurze

1. W konsoli interfejsów API Google otwórz projekt w chmurze.

   Otwórz konsolę interfejsów API Google

2. Kliknij Ustawienia i narzędzia more_vert > Ustawienia projektu.

3. Zapisz wartości w polach Numer projektu i Identyfikator projektu. Użyjesz ich w kolejnych sekcjach.

Tworzenie projektu Apps Script

Aby utworzyć projekt Apps Script i połączyć go z projektem w chmurze:

1. Kliknij ten przycisk, aby otworzyć projekt Apps Script aplikacji do obsługi zgłoszeń z uwierzytelnianiem użytkowników.
   Otwórz projekt
2. Kliknij info_outline Przegląd.
3. Na stronie przeglądu kliknij  Utwórz kopię.

4. Nadaj nazwę kopii projektu Apps Script:

   1. Kliknij Copy of Incident Management Chat app with User Auth (Kopia aplikacji do obsługi incydentów na czacie z uwierzytelnianiem użytkowników).

   2. W polu Nazwa projektu wpisz Incident Management Chat app with User Auth.

   3. Kliknij Zmień nazwę.

5. W kopii projektu Apps Script otwórz Consts.gsplik i ustaw PROJECT_ID z identyfikatorem projektu w chmurze.

Ustawianie projektu w chmurze w projekcie Apps Script

1. W projekcie Apps Script kliknij  Ustawienia projektu.
2. W sekcji Projekt Google Cloud Platform (GCP) kliknij Zmień projekt.
3. W sekcji Numer projektu GCP wklej numer projektu w chmurze.
4. Kliknij Ustaw projekt. Projekt w chmurze i projekt Apps Script zostały połączone.

Tworzenie testowego wdrożenia Apps Script

Gdy cały kod będzie już gotowy, wdróż projekt Apps Script. Identyfikator wdrożenia jest używany podczas konfigurowania aplikacji do obsługi czatu w Google Cloud.

1. W Apps Script otwórz projekt aplikacji do reagowania na incydenty.

   Otwórz Apps Script

2. Kliknij Wdróż > Testowe wdrożenia.

3. Jeśli opcje Dodatek do Google Workspace i Aplikacja internetowa nie są jeszcze wybrane, obok opcji Wybierz typ kliknij typy wdrożenia  i wybierz Dodatek do Google Workspace oraz Aplikacja internetowa.

4. Apps Script udostępnia identyfikator wdrożenia i adres URL aplikacji internetowej.

5. Zanotuj adres URL aplikacji internetowej, aby później go otworzyć, gdy rozpoczniesz zgłaszanie incydentu. Skopiuj identyfikator wdrożenia. Używasz tego identyfikatora podczas konfigurowania aplikacji do obsługi czatu w konsoli interfejsów API Google.

6. Kliknij Gotowe.

Konfigurowanie aplikacji do obsługi czatu w konsoli interfejsów API Google

W tej sekcji dowiesz się, jak skonfigurować interfejs Google Chat API w Konsoli interfejsów API Google, podając informacje o aplikacji do obsługi czatu, w tym identyfikator wdrożenia, które zostało utworzone w projekcie Apps Script.

1. W konsoli interfejsów API Google kliknij Menu menu > Interfejsy API i usługi > Włączone interfejsy API i usługi > Google Chat API > Konfiguracja.

   Otwórz konfigurację interfejsu Chat API

2. W polu Nazwa aplikacji wpisz Incident Management with User Auth.

3. W polu URL awatara wpisz https://developers.google.com/chat/images/quickstart-app-avatar.png.

4. W polu Opis wpisz Responds to incidents.

5. Ustaw przełącznik Włącz funkcje interaktywne w pozycji włączonej.

6. W sekcji Funkcje wybierz Dołączanie do pokoi i rozmów grupowych.

7. W sekcji Ustawienia połączenia wybierz Apps Script.

8. W polu Identyfikator wdrożenia wklej identyfikator wdrożenia Apps Script skopiowany wcześniej z wdrożenia projektu Apps Script.

9. Zarejestruj szybkie polecenie, którego używa w pełni wdrożona aplikacja obsługująca Google Chat:

   1. W sekcji Polecenia kliknij Dodaj polecenie.

   2. W polu Identyfikator polecenia wpisz 1.

   3. W polu Opis wpisz Closes the incident being discussed in the space.

   4. W sekcji Typ polecenia kliknij Szybkie polecenie.

   5. W polu Nazwa szybkiego polecenia wpisz Close incident.

   6. Wybierz Okno.

   7. Kliknij Gotowe. Polecenie jest zarejestrowane i wyświetlane na liście.

10. W sekcji Widoczność wybierz Udostępnij tę aplikację do obsługi czatu konkretnym osobom i grupom w domenie Workspace i wpisz swój adres e-mail.

11. W sekcji Logi wybierz Loguj błędy w usłudze Logging.

12. Kliknij Zapisz. Pojawi się komunikat o zapisaniu konfiguracji, co oznacza, że aplikacja jest gotowa do testowania.

Testowanie aplikacji Google Chat

Aby przetestować aplikację Google Chat do zarządzania incydentami, zainicjuj incydent na stronie internetowej i sprawdź, czy aplikacja działa zgodnie z oczekiwaniami:

1. Otwórz adres URL aplikacji internetowej wdrożonej za pomocą Apps Script.

2. Gdy Apps Script poprosi o pozwolenie na dostęp do Twoich danych, kliknij Sprawdź uprawnienia, zaloguj się na odpowiednie konto Google w domenie Google Workspace i kliknij Zezwól.

3. Otworzy się strona internetowa inicjowania incydentu. Wpisz informacje o teście:

   1. W polu Tytuł incydentu wpisz The First Incident.
   2. Opcjonalnie w sekcji Osoby reagujące na incydenty wpisz adresy e-mail osób, które również reagują na incydenty. Muszą to być użytkownicy z kontem Google Chat w organizacji Google Workspace, w przeciwnym razie utworzenie pokoju się nie powiedzie. Nie wpisuj swojego adresu e-mail, ponieważ jest on dodawany automatycznie.
   3. W sekcji Wiadomość początkowa wpisz Testing the incident management Chat app..

4. Kliknij Utwórz pokój na czacie. Pojawi się komunikat creating space.

5. Po utworzeniu pokoju pojawi się komunikat Space created!. Kliknij Otwórz pokój, aby otworzyć pokój w Google Chat w nowej karcie.

6. Opcjonalnie Ty i inne osoby reagujące na incydent możecie wysyłać wiadomości w pokoju. Aplikacja podsumowuje te wiadomości za pomocą Vertex AI i udostępnia dokument podsumowujący.

7. Aby zakończyć reagowanie na incydenty i rozpocząć proces rozwiązywania problemu, w pokoju czatu uruchom szybkie polecenie Close incident. Otworzy się okno zarządzania incydentami.

8. W sekcji Zamknij incydent wpisz opis rozwiązania incydentu, np. Test complete.

9. Kliknij Zamknij zgłoszenie.

Aplikacja do zarządzania incydentami wyświetla wiadomości w pokoju, podsumowuje je za pomocą Vertex AI, wkleja podsumowanie do dokumentu Google Docs i udostępnia dokument w pokoju.

Czyszczenie danych

Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby zużyte w tym samouczku, zalecamy usunięcie projektu w chmurze.

1. W konsoli interfejsów API Google otwórz stronę Zarządzanie zasobami. Kliknij Menu menu > IAM i administrator > Zarządzaj zasobami.

   Przejdź do Resource Manager

2. Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń delete.
3. W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.

Powiązane artykuły

• Planowanie podróży z pomocą agenta AI dostępnego w różnych usługach Google Workspace
• Odpowiadanie na pytania na podstawie rozmów na czacie za pomocą aplikacji z funkcjami AI od Gemini
• Zarządzanie projektami za pomocą Google Chat, Vertex AI i Firestore
• Sprawdzanie faktów za pomocą agenta AI z pakietu ADK i modelu Gemini
• Integracja podstawowych koncepcji AI z aplikacjami Google Chat
• Tworzenie aplikacji Google Chat jako dodatku do Google Workspace za pomocą Apps Script