Cette page a été traduite par l'API Cloud Translation.

Répondre aux incidents avec Google Chat, Vertex AI et Apps Script

Ce tutoriel explique comment créer une application Google Chat qui répond aux incidents en temps réel. Lorsqu'elle répond à un incident, l'application crée et renseigne un espace Chat, facilite la résolution de l'incident avec des messages, des commandes à barre oblique et des boîtes de dialogue, et utilise l'IA pour résumer la réponse à l'incident dans un document Google Docs.

Un incident est un événement qui nécessite l'attention immédiate d'une équipe pour être résolu. Voici quelques exemples d'incidents:

Une demande urgente est créée dans une plate-forme de gestion de la relation client (CRM), ce qui nécessite la collaboration d'une équipe de service pour la résoudre.
Un système passe hors service, ce qui déclenche l'alerte d'un groupe d'ingénieurs en fiabilité des sites (SRE) afin qu'ils puissent travailler ensemble pour le remettre en ligne.
Un tremblement de terre de forte magnitude se produit, et les services d'urgence doivent coordonner leur intervention.

Pour les besoins de ce tutoriel, l'alerte d'incident commence lorsqu'un utilisateur signale l'incident en cliquant sur un bouton sur une page Web. La page Web simule un incident en demandant aux utilisateurs de saisir des informations de base sur l'incident: titre, description et adresses e-mail des personnes concernées.

Découvrez l'application Chat de gestion des incidents en action:

Figure 1. Site Web sur lequel un utilisateur peut signaler un incident.
Figure 2 Notification indiquant que l'espace Chat de l'incident a été créé.
Figure 3 Espace Chat de gestion des incidents.
Figure 4. Résolution de l'incident à l'aide d'une commande à barre oblique.
Figure 5 Boîte de dialogue de résolution d'un incident.
Figure 6 Document Google Docs sur la résolution d'un incident partagé dans un espace.
Figure 7 Document Google Docs de résolution d'incidents avec résumé par IA.

Prérequis

Si vous avez besoin que l'une de ces conditions préalables soit activée pour votre organisation, demandez à votre administrateur Google Workspace de l'activer:

Compte Google Workspace Business ou Enterprise ayant accès à Google Chat.
L'option Directory (annuaire, partage des contacts) doit être activée pour Google Workspace. L'application d'incident utilise l'annuaire pour rechercher les coordonnées des personnes chargées de la gestion des incidents, comme leur nom et leur adresse e-mail. Les personnes chargées de gérer les incidents doivent être des utilisateurs disposant d'un compte Google Chat dans votre organisation Google Workspace.

Objectifs

Créez une application Chat qui répond aux incidents.
Aidez les utilisateurs à répondre aux incidents en procédant comme suit :
- Créer des espaces de gestion des incidents
- Publier des messages récapitulatifs sur les incidents et les réponses
- Prise en charge de la collaboration avec les fonctionnalités interactives de l'application Chat.
Résumez les conversations et les résolutions avec Vertex AI.

Architecture

Le schéma suivant illustre l'architecture des ressources Google Workspace et Google Cloud utilisées par l'application Google Chat de gestion des incidents.

Architecture de l'application Google Chat de gestion des incidents

L'architecture montre comment l'application Google Chat de gestion des incidents traite un incident et sa résolution.

Un utilisateur lance un incident à partir d'un site Web externe hébergé sur Apps Script.
Le site Web envoie une requête HTTP asynchrone à l'application Google Chat, également hébergée sur Apps Script.
L'application Google Chat de gestion des incidents traite la demande:
1. Le service du SDK Admin Apps Script obtient des informations sur les membres de l'équipe, comme l'ID utilisateur et l'adresse e-mail.
2. À l'aide d'un ensemble de requêtes HTTP envoyées à l'API Chat à l'aide du service Chat avancé Apps Script, l'application Google Chat de gestion des incidents crée un espace Chat d'incident, le remplit avec les membres de l'équipe et envoie un message à l'espace.
Les membres de l'équipe discutent de l'incident dans l'espace Chat.
Un membre de l'équipe appelle une commande slash pour signaler la résolution de l'incident.
1. Un appel HTTP à l'API Chat à l'aide du service Chat avancé Apps Script liste tous les messages de l'espace Chat.
2. Vertex AI reçoit les messages listés et génère un résumé.
3. Le service DocumentApp d'Apps Script crée un document Docs et ajoute le résumé de Vertex AI au document.
4. L'application Google Chat de gestion des incidents appelle l'API Chat pour envoyer un message partageant un lien vers le document Google Docs récapitulatif.

Préparer l'environnement

Cette section explique comment créer et configurer un projet Google Cloud pour l'application Chat.

Créer un projet Google Cloud

Console Google Cloud

Dans la console Google Cloud, accédez à Menu > IAM et administration > Créer un projet.
Accéder à "Créer un projet"
Dans le champ Project Name (Nom du projet), saisissez un nom descriptif pour votre projet.
Facultatif: Pour modifier l'ID de projet, cliquez sur Modifier. Une fois le projet créé, vous ne pourrez plus modifier l'ID. Choisissez-en donc un qui répond à vos besoins pour toute la durée de vie du projet.
Dans le champ Emplacement, cliquez sur Parcourir pour afficher les emplacements potentiels de votre projet. Cliquez ensuite sur Sélectionner.
Attention: Vous ne trouvez pas votre organisation Google Workspace ?
Cela signifie que vous n'êtes pas connecté à un compte Google Workspace. Certaines des fonctionnalités décrites dans la documentation destinée aux développeurs Google Workspace ne sont disponibles que pour les projets associés à une organisation.
Cliquez sur Créer. La console Google Cloud accède à la page "Tableau de bord", et votre projet est créé en quelques minutes.

CLI gcloud

Dans l'un des environnements de développement suivants, accédez à la Google Cloud CLI (gcloud):

Cloud Shell: pour utiliser un terminal en ligne avec gcloud CLI déjà configuré, activez Cloud Shell.
Activer Cloud Shell
Shell local: pour utiliser un environnement de développement local, installez et initialisez gcloud CLI.
Pour créer un projet Cloud, utilisez la commande gcloud projects create:
```
gcloud projects create PROJECT_ID
```
Remplacez PROJECT_ID en définissant l'ID du projet que vous souhaitez créer.

Activer la facturation pour le projet Cloud

Console Google Cloud

Dans la console Google Cloud, accédez à Facturation. Cliquez sur Menu > Facturation > Mes projets.
Accéder à la page "Facturation" de Mes projets
Dans Sélectionner une organisation, choisissez l'organisation associée à votre projet Google Cloud.
Sur la ligne du projet, ouvrez le menu Actions (), cliquez sur Modifier la facturation, puis choisissez le compte de facturation Cloud.
Cliquez sur Définir le compte.

CLI gcloud

Pour lister les comptes de facturation disponibles, exécutez la commande suivante:
```
gcloud billing accounts list
```
Associer un compte de facturation à un projet Google Cloud:
```
gcloud billing projects link PROJECT_ID --billing-account=BILLING_ACCOUNT_ID
```
Remplacez les éléments suivants :
- PROJECT_ID correspond à l'ID de projet du projet Cloud pour lequel vous souhaitez activer la facturation.
- BILLING_ACCOUNT_ID est l'ID du compte de facturation à associer au projet Google Cloud.

Activer les API

Console Google Cloud

Dans la console Google Cloud, activez les API Google Chat, Google Docs, Admin SDK et Vertex AI.

Activer les API
Vérifiez que vous activez les API dans le bon projet Cloud, puis cliquez sur Suivant.
Vérifiez que vous activez les API appropriées, puis cliquez sur Activer.

CLI gcloud

Si nécessaire, définissez le projet Cloud actuel sur celui que vous avez créé avec la commande gcloud config set project:
```
gcloud config set project PROJECT_ID
```
Remplacez PROJECT_ID par l'ID de projet du projet Cloud que vous avez créé.

Activez les API Google Chat, Google Docs, Admin SDK et Vertex AI avec la commande gcloud services enable:

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

Configurer l'authentification et l'autorisation

L'authentification et l'autorisation permettent à l'application Chat d'accéder aux ressources de Google Workspace et de Google Cloud pour traiter une réponse à un incident.

Dans ce tutoriel, vous publiez l'application en interne. Vous pouvez donc utiliser des informations d'espace réservé. Avant de publier l'application en externe, remplacez les informations d'espace réservé par des informations réelles pour l'écran d'autorisation.

Dans la console Google Cloud, accédez à Menu > > Branding.

Accéder à "Branding"
Si vous avez déjà configuré, vous pouvez configurer les paramètres suivants de l'écran d'autorisation OAuth dans Branding (Marquage), Audience (Audience) et Data Access (Accès aux données). Si le message Pas encore configuré s'affiche, cliquez sur Commencer:
1. Sous Informations sur l'application, dans Nom de l'application, saisissez Incident Management.
2. Dans Adresse e-mail d'assistance utilisateur, sélectionnez votre adresse e-mail ou un groupe Google approprié.
3. Cliquez sur Suivant.
4. Sous Audience, sélectionnez Interne. Si vous ne pouvez pas sélectionner Interne, sélectionnez Externe.
5. Cliquez sur Suivant.
6. Sous Coordonnées, saisissez une adresse e-mail à laquelle vous pouvez être informé de toute modification apportée à votre projet.
7. Cliquez sur Suivant.
8. Sous Finish (Terminer), consultez le Règlement sur les données utilisateur dans les services d'API Google et, si vous êtes d'accord, sélectionnez I agree to the Google API Services: User Data Policy (J'accepte le Règlement sur les données utilisateur dans les services d'API Google).
9. Cliquez sur Continuer.
10. Cliquez sur Créer.
11. Si vous avez sélectionné Externe comme type d'utilisateur, ajoutez des utilisateurs de test :
  1. Cliquez sur Audience.
  2. Sous Utilisateurs tests, cliquez sur Ajouter des utilisateurs.
  3. Saisissez votre adresse e-mail et les adresses des autres utilisateurs de test autorisés, puis cliquez sur Enregistrer.
Cliquez sur Accès aux données > Ajouter ou supprimer des champs d'application. Un panneau s'affiche avec une liste des champs d'application pour chaque API que vous avez activée dans votre projet Google Cloud.
1. Sous Ajouter manuellement des champs d'application, collez les champs d'application suivants:
  - 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. Cliquez sur Ajouter à la table.
3. Cliquez sur Mettre à jour.
4. Après avoir sélectionné les champs d'application requis par votre application, cliquez sur Enregistrer sur la page Accès aux données.

Créer et déployer l'application Chat

Dans la section suivante, vous allez copier et mettre à jour un projet Apps Script complet contenant tout le code d'application requis pour votre application Chat. Vous n'avez donc pas besoin de copier et coller chaque fichier.

Certaines fonctions incluent des traits d'union à la fin de leur nom, comme processSlashCommand_() à partir de ChatApp.gs. Le trait de soulignement masque la fonction de la page Web d'initialisation de l'incident lorsqu'elle est ouverte dans un navigateur. Pour en savoir plus, consultez la section Fonctions privées.

Apps Script accepte deux types de fichiers : les scripts .gs et les fichiers .html. Pour respecter cette compatibilité, le code JavaScript côté client de l'application est inclus dans des balises <script /> et son code CSS est inclus dans des balises <style /> dans un fichier HTML.

Vous pouvez également consulter l'intégralité du projet sur GitHub.

Afficher sur GitHub

Voici un aperçu de chacun d'eux:

Consts.gs

Définit les constantes référencées par d'autres fichiers de code, y compris votre ID de projet Cloud, l'ID d'emplacement Vertex AI et l'ID de commande slash pour fermer un incident.

Afficher le code `Consts.gs`

apps-script/incident-response/Consts.gs

Afficher sur GitHub

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

ChatApp.gs

Gère les événements d'interaction Chat, y compris les messages, les clics sur les fiches, les commandes à barre oblique et les boîtes de dialogue. Répond à la commande à barre oblique /closeIncident en ouvrant une boîte de dialogue pour recueillir les détails de la résolution de l'incident. Lit les messages de l'espace en appelant la méthode spaces.messages.list de l'API Chat. Récupère les ID utilisateur à l'aide du service Directory du SDK Admin dans Apps Script.

Afficher le code `ChatApp.gs`

apps-script/incident-response/ChatApp.gs

Afficher sur GitHub

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

Il reçoit les données de formulaire que les utilisateurs saisissent sur la page Web d'initialisation de l'incident, et les utilise pour configurer un espace Chat en le créant et en le remplissant, puis publie un message sur l'incident.

Afficher le code `ChatSpaceCreator.gs`

apps-script/incident-response/ChatSpaceCreator.gs

Afficher sur GitHub

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

Appele l'API Google Docs pour créer un document Google Docs dans Google Drive d'un utilisateur et écrit un résumé des informations sur l'incident, créé dans VertexAiApi.gs, dans le document.

Afficher le code `DocsApi.gs`

apps-script/incident-response/DocsApi.gs

Afficher sur GitHub

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

Résume la conversation dans l'espace Chat à l'aide de Vertex AI. Ce résumé est publié dans un document spécialement créé dans DocsAPI.gs.

Afficher le code `VertexAiApi.gs`

apps-script/incident-response/VertexAiApi.gs

Afficher sur GitHub

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

Fournit le site Web d'initialisation des incidents.

Afficher le code `WebController.gs`

apps-script/incident-response/WebController.gs

Afficher sur GitHub

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

Code HTML du site Web d'initialisation de l'incident.

Afficher le code `Index.html`

apps-script/incident-response/Index.html

Afficher sur GitHub

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

Gère le comportement du formulaire, y compris les envois, les erreurs et les effacements, pour le site Web d'initialisation de l'incident. Il est inclus dans Index.html par la fonction include personnalisée dans WebController.gs.

Afficher le code `JavaScript.html`

apps-script/incident-response/JavaScript.html

Afficher sur GitHub

<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

CSS du site Web d'initialisation des incidents. Il est inclus dans Index.html par la fonction include personnalisée dans WebController.gs.

Afficher le code `Stylesheet.html`

apps-script/incident-response/Stylesheet.html

Afficher sur GitHub

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

Trouver votre numéro et votre ID de projet Cloud

Dans la console Google Cloud, accédez à votre projet Cloud.

Accéder à Google Cloud Console
Cliquez sur Paramètres et utilitaires > Paramètres du projet.
Notez les valeurs des champs Project number (Numéro de projet) et Project ID (ID du projet). Vous les utiliserez dans les sections suivantes.

Créer le projet Apps Script

Pour créer un projet Apps Script et le connecter à votre projet Cloud:

Cliquez sur le bouton suivant pour ouvrir le projet Apps Script Répondre aux incidents avec Google Chat.
Ouvrir le projet
Cliquez sur Vue d'ensemble.
Sur la page de présentation, cliquez sur Créer une copie.
Nommez votre copie du projet Apps Script:
1. Cliquez sur Copie de "Répondre aux incidents avec Google Chat".
2. Dans le champ Titre du projet, saisissez Incident Management Chat app.
3. Cliquez sur Renommer.
Dans votre copie du projet Apps Script, accédez au fichier Consts.gs et remplacez YOUR_PROJECT_ID par l'ID de votre projet Cloud.

Définir le projet Cloud du projet Apps Script

Dans votre projet Apps Script, cliquez sur Paramètres du projet.
Sous Projet Google Cloud Platform (GCP), cliquez sur Changer de projet.
Dans Numéro de projet GCP, collez le numéro de votre projet Cloud.
Cliquez sur Définir un projet. Le projet Cloud et le projet Apps Script sont maintenant associés.

Créer un déploiement Apps Script

Maintenant que tout le code est en place, déployez le projet Apps Script. Vous utilisez l'ID de déploiement lorsque vous configurez l'application Chat dans Google Cloud.

Dans Apps Script, ouvrez le projet de l'application de gestion des incidents.

Accéder à Apps Script
Cliquez sur Déployer > Nouveau déploiement.
Si Module complémentaire et Application Web ne sont pas déjà sélectionnés, à côté de Sélectionner le type, cliquez sur "Types de déploiement" , puis sélectionnez Module complémentaire et Application Web.
Dans Description, saisissez une description de cette version, par exemple Complete version of incident management app.
Dans Exécuter en tant que, sélectionnez Utilisateur accédant à l'application Web.
Dans Qui a accès, sélectionnez Tout le monde dans votre organisation Workspace, où "votre organisation Workspace" correspond au nom de votre organisation Google Workspace.
Cliquez sur Déployer. Apps Script signale le déploiement réussi et fournit un ID de déploiement et une URL pour la page Web d'initialisation de l'incident.
Notez l'URL de l'application Web à laquelle vous accéderez plus tard lorsque vous déclencherez un incident. Copiez l'ID de déploiement. Vous utilisez cet ID lorsque vous configurez l'application Chat dans la console Google Cloud.
Cliquez sur OK.

Configurer l'application Chat dans la console Google Cloud

Cette section explique comment configurer l'API Google Chat dans la console Google Cloud avec des informations sur votre application Chat, y compris l'ID du déploiement que vous venez de créer à partir de votre projet Apps Script.

Dans la console Google Cloud, cliquez sur Menu > Autres produits > Google Workspace > Bibliothèque de produits > API Google Chat > Gérer > Configuration.

Accéder à la configuration de l'API Chat
Dans le champ Nom de l'application, saisissez Incident Management.
Dans URL de l'avatar, saisissez https://developers.google.com/chat/images/quickstart-app-avatar.png.
Dans Description, saisissez Responds to incidents..
Cliquez sur le bouton Activer les fonctionnalités interactives pour l'activer.
Sous Fonctionnalité, sélectionnez Recevoir des messages privés et Rejoindre des espaces et des conversations de groupe.
Sous Paramètres de connexion, sélectionnez Apps Script.
Dans Deployment ID (ID de déploiement), collez l'ID de déploiement Apps Script que vous avez copié précédemment à partir du déploiement du projet Apps Script.
Enregistrez une commande à barre oblique utilisée par l'application Chat entièrement implémentée:
1. Sous Commandes à barre oblique, cliquez sur Ajouter une commande à barre oblique.
2. Dans Nom, saisissez /closeIncident.
3. Dans ID de commande, saisissez 1.
4. Dans Description, saisissez Closes the incident being discussed in the space..
5. Sélectionnez Ouvre une boîte de dialogue.
6. Cliquez sur OK. La commande à barre oblique est enregistrée et listée.
Sous Visibilité, sélectionnez Rendre cette application de chat accessible à certains utilisateurs et groupes de votre domaine Workspace, puis saisissez votre adresse e-mail.
Sous Journaux, sélectionnez Consigner les erreurs dans Logging.
Cliquez sur Enregistrer. Un message indiquant que la configuration a été enregistrée s'affiche, ce qui signifie que l'application est prête à être testée.

Tester l'application Chat

Pour tester l'application Chat de gestion des incidents, déclenchez un incident depuis la page Web et vérifiez que l'application Chat fonctionne comme prévu:

Accédez à l'URL de l'application Web de déploiement Apps Script.
Lorsque Apps Script demande l'autorisation d'accéder à vos données, cliquez sur Examiner les autorisations, connectez-vous avec un compte Google approprié dans votre domaine Google Workspace, puis cliquez sur Autoriser.
La page Web d'initialisation de l'incident s'ouvre. Saisissez les informations de test:
1. Dans Titre de l'incident, saisissez The First Incident.
2. (Facultatif) Dans Répondeurs à l'incident, saisissez les adresses e-mail de vos collègues chargés de la gestion des incidents. Il doit s'agir d'utilisateurs disposant d'un compte Google Chat dans votre organisation Google Workspace, sinon la création de l'espace échouera. Ne saisissez pas votre propre adresse e-mail, car elle est incluse automatiquement.
3. Dans Message initial, saisissez Testing the incident management Chat app..
Cliquez sur Créer un espace Chat. Un message creating space s'affiche.
Une fois l'espace créé, un message Space created! s'affiche. Cliquez sur Ouvrir l'espace pour ouvrir l'espace dans Chat dans un nouvel onglet.
Vous et les autres intervenants peuvent envoyer des messages dans l'espace. L'application résume ces messages à l'aide de Vertex AI et partage un document récapitulatif.
Pour mettre fin à la gestion de l'incident et commencer le processus de résolution, saisissez /closeIncident dans l'espace Chat. Une boîte de dialogue de gestion des incidents s'ouvre.
Dans Fermer l'incident, saisissez une description de la résolution de l'incident, par exemple Test complete.
Cliquez sur Fermer l'incident.

L'application de gestion des incidents liste les messages de l'espace, les résume avec Vertex AI, colle le résumé dans un document Google Docs et partage le document dans l'espace.

Effectuer un nettoyage

Pour éviter que les ressources utilisées dans ce tutoriel ne soient facturées sur votre compte Google Cloud, nous vous recommandons de supprimer le projet Cloud.

Attention:La suppression d'un projet aura les effets suivants:

Tout le contenu du projet est supprimé. Si vous avez utilisé un projet existant pour ce tutoriel et que vous le supprimez, vous supprimerez également tout autre travail effectué dans le projet.
Les ID de projets personnalisés sont perdus. Lorsque vous avez créé ce projet, vous avez peut-être créé un ID de projet personnalisé dont vous souhaitez vous servir par la suite. Pour conserver les URL qui utilisent l'ID du projet, telles qu'une URL sur appspot.com, supprimez les ressources sélectionnées dans le projet au lieu de supprimer l'ensemble du projet.

Si vous envisagez d'explorer plusieurs tutoriels et guides de démarrage rapide, réutiliser des projets peut vous aider à ne pas dépasser les limites de quotas des projets.

Dans la console Google Cloud, accédez à la page Gérer les ressources. Cliquez sur Menu > IAM et administration > Gérer les ressources.
Accédez au gestionnaire de ressources.
Dans la liste des projets, sélectionnez celui que vous souhaitez supprimer, puis cliquez sur Supprimer .
Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.

Répondre à des questions basées sur des conversations Chat à l'aide d'une application Chat avec l'IA Gemini
Gérer des projets avec Google Chat, Vertex AI et Firestore
L'application de gestion des incidents s'authentifie à l'aide d'identifiants utilisateur pour appeler des API et appeler des services Google Cloud, tels que l'API Chat et l'API Vertex AI. Cela signifie que l'utilisateur qui lance un incident doit avoir accès à ces services. Pour rendre l'application plus robuste, envisagez d'appeler l'API Vertex AI en tant que compte de service au lieu des identifiants utilisateur de l'utilisateur qui appelle la commande slash /closeIncident. Pour savoir comment configurer un compte de service pour l'API Vertex AI, consultez la page Utiliser un compte de service personnalisé.

Répondre aux incidents avec Google Chat, Vertex AI et Apps Script

Prérequis

Objectifs

Architecture

Préparer l'environnement

Créer un projet Google Cloud

Console Google Cloud

CLI gcloud

Activer la facturation pour le projet Cloud

Console Google Cloud

CLI gcloud

Activer les API

Console Google Cloud

CLI gcloud

Configurer l'authentification et l'autorisation

Créer et déployer l'application Chat

Afficher le code Consts.gs

Afficher le code ChatApp.gs

Afficher le code ChatSpaceCreator.gs

Afficher le code DocsApi.gs

Afficher le code VertexAiApi.gs

Afficher le code WebController.gs

Afficher le code Index.html

Afficher le code JavaScript.html

Afficher le code Stylesheet.html

Trouver votre numéro et votre ID de projet Cloud

Créer le projet Apps Script

Définir le projet Cloud du projet Apps Script

Créer un déploiement Apps Script

Configurer l'application Chat dans la console Google Cloud

Tester l'application Chat

Effectuer un nettoyage

Articles associés

Afficher le code `Consts.gs`

Afficher le code `ChatApp.gs`

Afficher le code `ChatSpaceCreator.gs`

Afficher le code `DocsApi.gs`

Afficher le code `VertexAiApi.gs`

Afficher le code `WebController.gs`

Afficher le code `Index.html`

Afficher le code `JavaScript.html`

Afficher le code `Stylesheet.html`