Rispondi agli incidenti con Google Chat, Vertex AI e Apps Script

Questo tutorial mostra come creare un'app Google Chat che risponde agli incidenti in tempo reale. Quando risponde a un incidente, l'app crea e compila uno spazio di Chat, facilita l'incidente risoluzione di problemi con messaggi, comandi con barra e finestre di dialogo e utilizza l'IA per riassumere la risposta all'incidente in un documento di Documenti Google.

Un incidente è un evento che richiede l'attenzione immediata di un team di persone da risolvere. Ecco alcuni esempi di incidenti:

  • In un sistema di gestione dei rapporti con i clienti (CRM), viene creata una distinzione tra maiuscole e minuscole di Google Cloud, richiedendo che un team di assistenza collabori a una risoluzione.
  • Un sistema passa alla modalità offline, avvisando un gruppo di tecnici della Site Reliability Engineering (SRE) in modo che possano collaborare per riportarla online.
  • Si verifica un terremoto di magnitudo elevata e gli addetti ai servizi di emergenza hanno bisogno per coordinare la loro risposta.

Ai fini di questo tutorial, l'avviso di incidente si avvia quando qualcuno segnala l'incidente con un clic su un pulsante da una pagina web. La pagina web simula a un incidente chiedendo agli utenti di inserire informazioni di base: descrizione e indirizzi email di chi risponde.

Guarda l'app Chat per la gestione degli incidenti in azione:

  • Il sito web che avvia un incidente.
    Figura 1. Il sito web in cui è possibile segnalare un incidente.
  • Notifica che è stato creato lo spazio di Chat con l'incidente.
    Figura 2. Notifica che lo spazio di Chat con l'incidente è stato creato.
  • Lo spazio di Chat di risposta agli incidenti.
    Figura 3. Lo spazio di Chat di risposta agli incidenti.
  • Risolvere l'incidente con un comando slash.
    Figura 4. Risolvere l'incidente con un comando slash.
  • Finestra di dialogo per la risoluzione dell'incidente.
    Figura 5. Finestra di dialogo per la risoluzione degli incidenti.
  • Documento di Documenti Google per la risoluzione degli incidenti condiviso nello spazio.
    Figura 6. Documento di Documenti Google per la risoluzione degli incidenti condiviso nello spazio.
  • Il documento Google sulla risoluzione degli incidenti riassuntivi con l'IA.
    Figura 7. Il documento di Documenti Google sulla risoluzione degli incidenti riassuntivi creati con l'IA.

Prerequisiti

Se devi attivare uno di questi prerequisiti per la tua organizzazione, chiedi l'amministratore di Google Workspace per attivarle:

  • Un'azienda o un'impresa Google Workspace con accesso a Google Chat.
  • Per avere Directory (condivisione dei contatti) attivata per Google Workspace. L'app degli incidenti usa la directory per cercare gli addetti alla risposta dati di contatto, come il nome e indirizzo email. Coloro che rispondono agli incidenti devono essere utenti con una chat di Google della tua organizzazione Google Workspace.

Obiettivi

  • Crea un'app di chat in grado di rispondere agli incidenti.
  • Aiuta gli utenti a rispondere agli incidenti nel seguente modo:
    • Creazione di spazi di risposta agli incidenti.
    • Pubblicazione di messaggi con un riepilogo degli incidenti e delle risposte.
    • Supportare la collaborazione con strumenti Funzionalità dell'app di chat.
  • Riassumere conversazioni e risoluzioni con Vertex AI.

Architettura

Il seguente diagramma mostra l'architettura di Google Workspace e Risorse Google Cloud utilizzate dalla risposta agli incidenti App Google Chat.

Architettura dell'app Google Chat di risposta agli incidenti

L'architettura mostra come la risposta agli incidenti L'app Google Chat elabora un incidente e una risoluzione.

  1. Un utente avvia un incidente da un sito web esterno ospitato su Apps Script.

  2. Il sito web invia una richiesta HTTP asincrona al App Google Chat, ospitata anche su Apps Script.

  3. L'app Google Chat di risposta agli incidenti elabora la richiesta:

    1. Il servizio SDK Admin di Apps Script ottiene i membri del team informazioni, come l'ID utente e l'indirizzo email.

    2. Con un insieme di richieste HTTP all'API Chat utilizzando servizio di chat avanzato di Apps Script, la risposta agli incidenti L'app Google Chat crea un incidente Chat spazio di archiviazione, lo compila con i membri del team e invia un messaggio allo spazio.

  4. I membri del team discutono dell'incidente nello spazio di Chat.

  5. Un membro del team richiama un comando slash per segnalare una risoluzione al incidente.

    1. Chiamata HTTP all'API Chat utilizzando Apps Script Il servizio Chat avanzato elenca tutte le i messaggi dello spazio.

    2. Vertex AI riceve i messaggi elencati e genera un riepilogo.

    3. Il servizio DocumentApp di Apps Script crea un'istanza Documenti Google e aggiunge il riassunto di Vertex AI al documento.

    4. L'app Google Chat di risposta agli incidenti chiama API Chat per inviare un messaggio condividendo un link al riepilogo Documenti Google.

prepara l'ambiente

Questa sezione mostra come creare e configurare un progetto Google Cloud App Chat.

Creare un progetto Google Cloud

Console Google Cloud

  1. Nella console Google Cloud, vai al Menu > IAM e Amministratore > Crea un progetto.

    Vai a Crea un progetto

  2. Nel campo Nome progetto, inserisci un nome descrittivo per il progetto.

    (Facoltativo) Per modificare l'ID progetto, fai clic su Modifica. L'ID progetto non può essere modificato creato dopo la creazione del progetto, quindi scegli un ID che soddisfi le tue esigenze per tutta la durata progetto.

  3. Nel campo Località, fai clic su Sfoglia per visualizzare le località potenziali per il tuo progetto. Poi, fai clic su Seleziona.
  4. Fai clic su Crea. La console Google Cloud accede alla pagina Dashboard e il progetto viene creato entro pochi minuti.

Interfaccia a riga di comando gcloud

In uno dei seguenti ambienti di sviluppo, accedi a Google Cloud Interfaccia a riga di comando ("gcloud"):

  • Cloud Shell: per utilizzare un terminale online con gcloud CLI è già configurato, attiva Cloud Shell.
    Attivare Cloud Shell
  • Shell locale: per utilizzare un ambiente di sviluppo locale, install e inizializzare con gcloud CLI.
    Per creare un progetto Cloud, utilizza il comando "gcloud projects create": 
    gcloud projects create PROJECT_ID
    Sostituisci PROJECT_ID impostando l'ID per il progetto che vuoi creare.

Abilita la fatturazione per il progetto Cloud

Console Google Cloud

  1. Nella console Google Cloud, vai a Fatturazione. Clic Menu > Fatturazione > I miei progetti.

    Vai a Fatturazione per i miei progetti

  2. In Seleziona un'organizzazione, scegli l'organizzazione associata del tuo progetto Google Cloud.
  3. Nella riga del progetto, apri il menu Azioni (), fai clic su Modifica fatturazione e scegli di account di fatturazione Cloud.
  4. Fai clic su Imposta account.

Interfaccia a riga di comando gcloud

  1. Per elencare gli account di fatturazione disponibili, esegui: 
    gcloud billing accounts list
  2. Collega un account di fatturazione a un progetto Google Cloud: 
    gcloud billing projects link PROJECT_ID --billing-account=BILLING_ACCOUNT_ID

    Sostituisci quanto segue:

    • PROJECT_ID è l'ID progetto per Progetto cloud per il quale vuoi abilitare la fatturazione.
    • BILLING_ACCOUNT_ID è l'ID account di fatturazione da collegare a a livello di progetto Google Cloud.

Abilita le API

Console Google Cloud

  1. Nella console Google Cloud, abilita l'API Google Chat, l'API Documenti Google, l'API Admin SDK e l'API Vertex AI.

    Abilita le API

  2. Assicurati di abilitare le API nel modo corretto progetto Cloud e fai clic su Avanti.

  3. Verifica di abilitare le API corrette, quindi fai clic su Abilita.

Interfaccia a riga di comando gcloud

  1. Se necessario, imposta il progetto Cloud attuale su quello che hai creato con il comando gcloud config set project:

    gcloud config set project PROJECT_ID

    Sostituisci PROJECT_ID con l'ID progetto del il progetto cloud che hai creato.

  2. Attiva l'API Google Chat, l'API Documenti Google, l'API Admin SDK e l'API Vertex AI con il comando gcloud services enable:

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

Configura autenticazione e autorizzazione

Autenticazione e autorizzazione consentono alle risorse per l'accesso alle app di chat in Google Workspace e a Google Cloud per elaborare una risposta a un incidente.

In questo tutorial, pubblichi l'app internamente, quindi puoi usare il segnaposto informazioni. Prima di pubblicare l'app esternamente, sostituisci il segnaposto con informazioni reali per la schermata di consenso.

  1. Nella console Google Cloud, vai a Menu > API e Servizi > Schermata consenso OAuth.

    Vai alla schermata per il consenso OAuth

  2. In Tipo di utente, seleziona Interno, quindi fai clic su Crea.

  3. In Nome app, digita Incident Management.

  4. In Email per l'assistenza utenti, seleziona il tuo indirizzo email o un indirizzo gruppo Google.

  5. In Dati di contatto dello sviluppatore, inserisci il tuo indirizzo email.

  6. Fai clic su Salva e continua.

  7. Fai clic su Aggiungi o rimuovi ambiti. Viene visualizzato un riquadro con un elenco di ambiti per ogni API abilitata nel tuo progetto Cloud.

  8. In Aggiungi ambiti manualmente, incolla i seguenti ambiti:

    • 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. Fai clic su Aggiungi alla tabella.

  10. Fai clic su Aggiorna.

  11. Fai clic su Salva e continua.

  12. Esamina il riepilogo della registrazione dell'app e fai clic su Torna alla dashboard.

Creare e implementare l'app Chat

Nella sezione seguente, copi e aggiorni un'intera Progetto Apps Script contenente tutte le applicazioni richieste per la tua app Chat, quindi non è necessario copiare e incollare ciascun file.

Alcune funzioni includono trattini bassi alla fine del nome, ad esempio processSlashCommand_() da ChatApp.gs. Il trattino basso nasconde la funzione dalla pagina web di inizializzazione degli incidenti quando è aperta in un browser. Per ulteriori informazioni le informazioni, vedi Funzioni private.

Apps Script supporta due tipi di file: .gs script e .html . Per rispettare questo supporto, è incluso il codice JavaScript lato client dell'app all'interno di tag <script /> e il relativo CSS è incluso all'interno di tag <style /> all'interno un file HTML.

Facoltativamente, puoi visualizzare l'intero progetto su GitHub.

Visualizza su GitHub

Ecco una panoramica di ogni file:

Consts.gs

Definisce le costanti a cui fanno riferimento altri file di codice, tra cui l'ID progetto Cloud, l'ID località di Vertex AI e l'ID comando slash per chiudere un incidente.

Visualizza il codice di Consts.gs

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

Gestisce gli eventi di interazione con Chat, inclusi messaggi, clic sulle schede, comandi con barra e finestre di dialogo. Risponde alle /closeIncident comando slash aprendo una finestra di dialogo per raccogliere l'incidente i dettagli della risoluzione. Legge i messaggi nello spazio chiamando il metodo spaces.messages.list nell'API Chat. Recupera gli ID utente utilizzando il servizio Admin SDK Directory in Apps Script.

Visualizza il codice di ChatApp.gs

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

Riceve i dati del modulo inseriti dagli utenti sull'incidente di inizializzazione della pagina web e la utilizza per configurare un spazio pubblicitario creando e popolandolo, quindi pubblica un messaggio incidente.

Visualizza il codice di ChatSpaceCreator.gs

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

Chiama l'API di Google Documenti per creare un documento di Google Documenti in un Google Drive dell'utente e scrive un riepilogo delle informazioni su un incidente, creato in VertexAiApi.gs, al documento.

Visualizza il codice di DocsApi.gs

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

Riepiloga la conversazione in Chat utilizzando Vertex AI. Questo riepilogo viene pubblicato in una serie di documento in DocsAPI.gs.

Visualizza il codice di VertexAiApi.gs

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

Gestisce il sito web di inizializzazione degli incidenti.

Visualizza il codice di WebController.gs

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

Il codice HTML che comprende il sito web di inizializzazione dell'incidente.

Visualizza il codice di Index.html

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

Gestisce il comportamento dei moduli, tra cui invii, gli errori e li cancella per il sito web di inizializzazione degli incidenti. È inclusa in Index.html dalla funzione include personalizzata in WebController.gs.

Visualizza il codice di JavaScript.html

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

Il CSS per il sito web di inizializzazione degli incidenti. È inclusa in Index.html dalla funzione include personalizzata WebController.gs.

Visualizza il codice di Stylesheet.html

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>

Trovare il numero e l'ID del progetto Cloud

  1. Nella console Google Cloud, vai al tuo progetto Cloud.

    Vai alla console Google Cloud

  2. Fai clic su Impostazioni e utilità &gt; Impostazioni progetto.

  3. Prendi nota dei valori nei campi Numero progetto e ID progetto. Tu e come utilizzarli nelle sezioni seguenti.

Creare il progetto Apps Script

Per creare un progetto Apps Script e collegarlo al tuo Progetto cloud:

  1. Fai clic sul pulsante seguente per aprire il progetto Apps Script Rispondi agli incidenti con Google Chat.
    Apri il progetto
  2. Fai clic su Panoramica.
  3. Nella pagina Panoramica, fai clic su Icona per creare una copia Crea una copia.

  4. Assegna un nome alla tua copia del progetto Apps Script:

    1. Fai clic su Copia di Rispondi agli incidenti con Google Chat.

    2. In Titolo progetto, digita Incident Management Chat app.

    3. Fai clic su Rinomina.

  5. Nella tua copia del progetto Apps Script, vai a Consts.gs e sostituisci YOUR_PROJECT_ID con l'ID del tuo progetto cloud.

Impostare il progetto Cloud del progetto Apps Script

  1. Nel tuo progetto Apps Script, fai clic su Icona delle impostazioni progetto Impostazioni progetto.
  2. In Progetto Google Cloud Platform (Google Cloud), fai clic su Cambia progetto.
  3. In Numero di progetto Google Cloud, incolla il numero del tuo progetto Cloud.
  4. Fai clic su Imposta progetto. Il progetto Cloud e Apps Script sono collegati.

Creare un deployment Apps Script

Ora che il codice è al suo posto, esegui il deployment di Apps Script progetto. Devi usare l'ID deployment quando configuri Chat in Google Cloud.

  1. In Apps Script, apri il progetto dell'app di risposta agli incidenti.

    Vai ad Apps Script

  2. Fai clic su Esegui il deployment > Nuovo deployment.

  3. Se Componente aggiuntivo e App web non sono ancora selezionate, accanto a Seleziona il tipo, fai clic su Tipi di deployment Icona delle impostazioni progetto e seleziona Componente aggiuntivo e App web.

  4. In Descrizione, inserisci una descrizione per questa versione, ad esempio Complete version of incident management app.

  5. In Esegui come, seleziona Utente che accede all'app web.

  6. In Chi ha accesso, seleziona Chiunque all'interno della tua organizzazione Workspace, dove "la tua organizzazione Workspace" è il nome del tuo dell'organizzazione Google Workspace.

  7. Fai clic su Esegui il deployment. Report Apps Script riusciti e fornisce un ID deployment e un URL per l'incidente. pagina web di inizializzazione.

  8. Prendi nota dell'URL dell'app web da visitare in seguito, quando avvii un incidente. Copia l'ID deployment. Usa questo ID durante la configurazione Chat nella console Google Cloud.

  9. Fai clic su Fine.

Configurare l'app Chat nella console Google Cloud

Questa sezione mostra come configurare l'API Google Chat nella console Google Cloud con informazioni sulla tua app Chat, tra cui ID del deployment che hai appena creato da Apps Script progetto.

  1. Nella console Google Cloud, fai clic su Menu. &gt; Altri prodotti &gt; Google Workspace &gt; Libreria prodotti &gt; API Google Chat &gt; Gestisci &gt; Configurazione.

    Vai alla configurazione dell'API Chat

  2. In Nome app, digita Incident Management.

  3. In URL avatar, digita https://developers.google.com/chat/images/quickstart-app-avatar.png.

  4. In Descrizione, digita Responds to incidents..

  5. Fai clic sul pulsante di attivazione/disattivazione Abilita le funzionalità interattive per attivare le funzionalità.

  6. In Funzionalità, seleziona Ricevi messaggi 1:1 e Partecipa a spazi e conversazioni di gruppo.

  7. In Impostazioni di connessione, seleziona Progetto Apps Script.

  8. In ID deployment, incolla l'ID deployment di Apps Script che hai copiato in precedenza dal progetto Apps Script e deployment continuo.

  9. Registra un comando slash che l'app di Chat completamente implementata utilizza:

    1. In Comandi Slash, fai clic su Aggiungi un comando con barra.

    2. In Nome, digita /closeIncident.

    3. In ID comando, digita 1.

    4. In Descrizione, digita Closes the incident being discussed in the space.

    5. Seleziona Apre una finestra di dialogo.

    6. Fai clic su Fine. Il comando slash viene registrato ed elencato.

  10. In Visibilità, seleziona Rendi disponibile questa app di Chat a persone e gruppi specifici in Workspace e inserisci il tuo indirizzo email.

  11. In Log, seleziona Log errori in Logging.

  12. Fai clic su Salva. Viene visualizzato un messaggio relativo alla configurazione salvata, a indicare che l'app pronto per il test.

Testare l'app Chat

Per testare l'app Chat per la gestione degli incidenti, avvia una incidente dalla pagina web e verifica che l'app Chat funziona come previsto:

  1. Vai all'URL dell'app web per il deployment di Apps Script.

  2. Quando Apps Script chiede l'autorizzazione ad accedere ai tuoi dati, fai clic su Rivedi autorizzazioni, accedi con un Account Google appropriato. nel tuo dominio Google Workspace e fai clic su Consenti.

  3. Si apre la pagina web di inizializzazione degli incidenti. Inserisci le informazioni del test:

    1. In Titolo incidente, digita The First Incident.
    2. Facoltativamente, in Chi risponde agli incidenti, inserisci gli indirizzi email delle gli altri addetti alla risposta agli incidenti. Devono essere utenti con un l'account Google Chat della tua organizzazione Google Workspace oppure la creazione dello spazio non riesce. Non inserire il tuo indirizzo email perché incluse automaticamente.
    3. In Messaggio iniziale, digita Testing the incident management Chat app..

  4. Fai clic su Crea spazio di Chat. Viene visualizzato un messaggio creating space.

  5. Dopo aver creato lo spazio, viene visualizzato un messaggio Space created!. Clic Apri spazio, che apre lo spazio in Chat in una nuova scheda.

  6. Facoltativamente, tu e gli altri addetti alla risposta agli incidenti potete inviare messaggi nella spazio. L'app riassume questi messaggi utilizzando Vertex AI e condivide un retrospettivo.

  7. Per terminare la risposta agli incidenti e iniziare il processo di risoluzione, Spazio di Chat, digita /closeIncident. La gestione degli incidenti si apre la finestra di dialogo.

  8. In Chiudi incidente, inserisci una descrizione per la risoluzione dell'incidente. come Test complete.

  9. Fai clic su Chiudi incidente.

L'app di gestione degli incidenti elenca i messaggi nello spazio, li riassume con Vertex AI, incolla il riepilogo in un documento di Documenti Google e condivide documento nello spazio.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alla utilizzate in questo tutorial, ti consigliamo di eliminare progetto cloud.

  1. Nella console Google Cloud, vai alla pagina Gestisci risorse. Clic Menu &gt; IAM e Amministratore &gt; Gestisci risorse.

    Vai a Resource Manager .

  2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare e fai clic su Elimina .
  3. Nella finestra di dialogo, digita l'ID progetto e fai clic su Chiudi per eliminarlo. del progetto.