Google Chat, Vertex AI ve Apps Komut Dosyası ile olaylara yanıt verme

Bu eğitimde, olaylara gerçek zamanlı olarak yanıt verir. Uygulama bir olaya müdahale ederken Chat alanı oluşturup doldurur, olayı kolaylaştırır mesajları, eğik çizgi komutları ve iletişim kutularıyla çözünür ve özetlemek için yapay zekayı kullanır. Google Dokümanlar dokümanına koyabilirsiniz.

Olay, ekibin hemen ilgilenmesi gereken olaylardır. çok sayıda kişi var. Olaylara örnek olarak şunlar verilebilir:

  • Müşteri İlişkileri Yönetimi'nde (CRM) zamana duyarlı bir destek kaydı oluşturulur bir hizmet ekibinin bir çözüm için iş birliği yapmasını gerektiriyor.
  • Bir sistem çevrimdışı olduğunda, site güvenilirliği mühendisleri (SRE'ler) bir grup olarak uyarı alır. Bu sayede, birlikte çalışarak sistemi tekrar çevrimdışı hale getirebilirler.
  • Yüksek büyüklükte bir deprem meydana geliyor ve acil durum çalışanları ve cevaplarını koordine etmektir.

Bu eğitimde olay uyarısı, bir kullanıcı web sayfasından düğmeyi tıklayarak olayı bildirdiğinde başlar. Web sayfası kullanıcılardan şu temel olay bilgilerini girmelerini isteyen bir olaydır: başlık, ve katılımcıların e-posta adreslerini girin.

Olay yönetimi Chat uygulamasının nasıl çalıştığını görün:

  • Olay başlatan web sitesi.
    Şekil 1. Kullanıcıların olayı bildirebileceği web sitesi.
  • Olay Chat alanının oluşturulduğuna dair bildirim..
    Şekil 2. Chat alanının oluşturulduğuna dair bildirim.
  • Olaya yanıt verme Chat alanı..
    Şekil 3. Olaya yanıt verme Chat alanı.
  • Eğik çizgi komutuyla olayı çözme..
    Şekil 4. Eğik çizgi komutuyla olayı çözme.
  • Olay çözme iletişim kutusu.
    Şekil 5. Olay çözme iletişim kutusu.
  • Alanda paylaşılan sorun çözme Google Dokümanlar dokümanı.
    Şekil 6. Alanda paylaşılan sorun çözme Google Dokümanlar dokümanı.
  • Yapay zeka özeti olay çözümü Google Dokümanı.
    Şekil 7. Google Dokümanlar'da yapay zeka özeti olay çözümü belgesi.

Ön koşullar

Kuruluşunuzda etkinleştirilmesi gereken ön koşullardan herhangi birine ihtiyacınız varsa Google Workspace yöneticinizden bunları etkinleştirmesini isteyin:

  • Google Chat'e erişimi olan bir Business veya Enterprise Google Workspace hesabı
  • Google Workspace'te Dizin'in (kişi paylaşımı) etkin olması gerekir. Olay uygulaması, olaya müdahale eden kişilerin iletişim bilgilerini (ör. ad ve e-posta adresi) aramak için dizini kullanır. Olaya müdahale edenler, Google Workspace kuruluşunuzda Google Chat hesabı olan kullanıcılar olmalıdır.

Hedefler

  • Olaylara yanıt veren bir Chat uygulaması derleyin.
  • Aşağıdakileri yaparak kullanıcıların olaylara yanıt vermesine yardımcı olun:
    • Olay yanıt alanları oluşturuluyor.
    • Olayları ve yanıtları özetleyen mesajlar yayınlama
    • Etkileşimli sohbet uygulaması özellikleriyle ortak çalışmayı destekleme
  • Vertex AI ile görüşmeleri ve çözümleri özetleyin.

Mimari

Aşağıdaki şemada, Google Workspace ve Olay yanıtı tarafından kullanılan Google Cloud kaynakları Google Chat uygulaması.

Olaya müdahale Google Chat uygulamasının mimarisi

Mimari, olay yanıtı Google Chat uygulamasının bir olayı ve çözümü nasıl işlediğini gösterir.

  1. Bir kullanıcı, şurada barındırılan harici bir web sitesinden bir olay başlatır: Apps Komut Dosyası.

  2. Web sitesi, yine Apps Script'te barındırılan Google Chat uygulamasına eşzamansız bir HTTP isteği gönderir.

  3. Olay yanıtlama Google Chat uygulaması isteği işler:

    1. Apps Script Yönetici SDK'sı hizmeti, kullanıcı kimliği ve e-posta adresi gibi ekip üyesi bilgilerini alır.

    2. Chat API'ye yapılan bir dizi HTTP isteğiyle Apps Komut Dosyası Gelişmiş Sohbet hizmeti, olaya verilen yanıt Google Chat uygulaması Chat'te olay oluşturur alanı ekip üyeleriyle doldurur ve alana bir mesaj gönderir.

  4. Ekip üyeleri Chat alanında olay hakkında tartışır.

  5. Bir ekip üyesi, paydaşa bir çözüm olduğunu belirtmek için eğik çizgi komutu çağırır gösterir.

    1. Apps Komut Dosyası'nı kullanan Chat API'ye yapılan bir HTTP çağrısı Gelişmiş Chat hizmeti, tüm Chat sohbetlerini alanın mesajları görünür.

    2. Vertex AI, listelenen mesajları alır ve bir özet oluşturur.

    3. Apps Komut Dosyası DocumentApp hizmeti, yardımcı olur ve Vertex AI'ın özetini uygulayacaksınız.

    4. Olay yanıtı Google Chat uygulaması, özet Dokümanlar belgesinin bağlantısını paylaşan bir mesaj göndermek için Chat API'yi çağırır.

Ortamı hazırlama

Bu bölümde, web sitesi için Google Cloud projesinin nasıl Chat uygulaması.

Google Cloud projesi oluşturma

Google Cloud Console

  1. Google Cloud konsolunda Menü'ye gidin > IAM ve Yönetici > Proje oluşturun'u tıklayın.

    Proje Oluştur'a gidin

  2. Proje Adı alanına projeniz için açıklayıcı bir ad girin.

    İsteğe bağlı: Proje Kimliği'ni düzenlemek için Düzenle'yi tıklayın. Proje oluşturulduktan sonra proje kimliği değiştirilemez. Bu nedenle, projenin kullanım süresi boyunca ihtiyaçlarınızı karşılayacak bir kimlik seçin.

  3. Konum alanında, işletmenizin olası konumlarını görüntülemek için Göz at'ı tıklayın belirler. Ardından Seç'i tıklayın.
  4. Oluştur'u tıklayın. Google Cloud Console, Kontrol Paneli sayfasına gider ve projeniz oluşturulur birkaç dakika.

gcloud CLI

Aşağıdaki geliştirme ortamlarından birinde Google Cloud KSA (gcloud):

  • Cloud Shell: gcloud CLI'nin önceden ayarlandığı bir internet terminali kullanmak için Cloud Shell'i etkinleştirin.
    . Cloud Shell'i etkinleştir
  • Yerel Kabuk: Yerel geliştirme ortamı kullanmak için yükle ve başlatmak öğrenin.
    . Bir Cloud projesi oluşturmak için gcloud projects create komutunu kullanın: 
    gcloud projects create PROJECT_ID
     Oluşturmak istediğiniz projenin kimliğini ayarlayarak PROJECT_ID değerini değiştirin.

Cloud projesi için faturalandırmayı etkinleştirin

Google Cloud Console

  1. Google Cloud konsolunda Faturalandırma'ya gidin. Sonraki slayta geçin Menü > Faturalandırma > Projelerim'i tıklayın.

    Projelerim için Faturalandırma'ya gidin

  2. Kuruluş seçin bölümünde, Google Cloud projenizle ilişkili kuruluşu seçin.
  3. Proje satırında İşlemler menüsünü açın (), Faturalandırmayı değiştir'i tıklayın ve Cloud Faturalandırma Hesabı'nı seçin.
  4. Hesap belirle'yi tıklayın.

gcloud CLI

  1. Kullanılabilir faturalandırma hesaplarını listelemek için şu komutu çalıştırın: 
    gcloud billing accounts list
  2. Faturalandırma hesabını bir Google Cloud projesine bağlayın: 
    gcloud billing projects link PROJECT_ID --billing-account=BILLING_ACCOUNT_ID

    Aşağıdakini değiştirin:

    • PROJECT_ID, faturalandırmayı etkinleştirmek istediğiniz Cloud projesinin proje kimliğidir.
    • BILLING_ACCOUNT_ID, Google Cloud projesine bağlanacak faturalandırma hesabı kimliğidir.

API'leri etkinleştirme

Google Cloud Console

  1. Google Cloud Console'da Google Chat API, Google Dokümanlar API, Admin SDK API ve Vertex AI API'yi etkinleştirin.

    API'leri etkinleştirme

  2. API'leri doğru Cloud projesinde etkinleştirdiğinizi onaylayıp İleri'yi tıklayın.

  3. Doğru API'leri etkinleştirdiğinizden emin olduktan sonra Etkinleştir'i tıklayın.

gcloud CLI

  1. Gerekirse mevcut Cloud projesini gcloud config set project komutuyla oluşturduğunuz projeye ayarlayın:

    gcloud config set project PROJECT_ID

    PROJECT_ID değerini projenin Proje Kimliği ile değiştirin Oluşturduğunuz Cloud projesi.

  2. gcloud services enable komutuyla Google Chat API, Google Dokümanlar API, Admin SDK API ve Vertex AI API'yi etkinleştirin:

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

Kimlik doğrulama ve yetkilendirme ayarlarını yapma

Kimlik doğrulama ve yetkilendirme, Google Workspace'te Chat uygulaması erişim kaynaklarına ve Google Cloud'un kullandığı bir teknolojidir.

Bu eğitimde uygulamayı dahili olarak yayınladığınız için yer tutucu bilgileri kullanabilirsiniz. Uygulamayı harici olarak yayınlamadan önce yer tutucunun yerine gerçek bilgilerle donatılmış bilgiler yer alır.

  1. Google Cloud Console'da Menü > API'ler ve Hizmetler > OAuth izin ekranı'na gidin.

    OAuth izin ekranına gidin.

  2. Kullanıcı türü bölümünde Dahili'yi seçin ve ardından Oluştur'u tıklayın.

  3. Uygulama adı alanına Incident Management yazın.

  4. Kullanıcı desteği e-postası bölümünde e-posta adresinizi veya uygun bir Google grubunu seçin.

  5. Geliştirici iletişim bilgileri bölümünün altına e-posta adresinizi girin.

  6. Kaydet ve Devam Et'i tıklayın.

  7. Kapsam Ekle veya Kaldır'ı tıklayın. Kapsamların listesini içeren bir panel görüntülenir Cloud projenizde etkinleştirdiğiniz her API için otomatik olarak oluşturulur.

  8. Kapsamları manuel olarak ekle bölümüne aşağıdaki kapsamları yapıştırın:

    • 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. Tabloya ekle'yi tıklayın.

  10. Güncelle'yi tıklayın.

  11. Kaydet ve Devam Et'i tıklayın.

  12. Uygulama kaydı özetini inceleyin, ardından Kontrol paneline dön'ü tıklayın.

Chat uygulamasını oluşturma ve dağıtma

Aşağıdaki bölümde, Chat uygulamanız için gerekli tüm uygulama kodunu içeren bir Apps Script projesinin tamamını kopyalayıp güncelleyebilirsiniz. Bu nedenle, her dosyayı kopyalayıp yapıştırmanıza gerek yoktur.

Bazı işlevlerin adlarının sonuna alt çizgi eklenir (ör. ChatApp.gs'dan processSlashCommand_()). Alt çizgi, işlevi tarayıcıda açıkken olay başlatma web sayfasından gizler. Daha fazla bkz. Özel işlevler.

Apps Komut Dosyası, .gs komut dosyaları ve .html dosyalarının iki dosya türünü destekler. Bu desteğe uymak için uygulamanın istemci taraflı JavaScript'i <script /> etiketlerinin içinde ve CSS'si, içindeki <style /> etiketlerinin içinde bir HTML dosyası oluşturun.

Dilerseniz projenin tamamını GitHub'da görüntüleyebilirsiniz.

GitHub'da göster

Her dosyaya genel bakış aşağıda verilmiştir:

Consts.gs

Cloud proje kimliğiniz, Vertex AI konum kimliğiniz ve bir olayı kapatmak için kullanılan eğik çizgi komut kimliği dahil olmak üzere diğer kod dosyalarının referans verdiği sabitleri tanımlar.

Consts.gs kodunu görüntüleme

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

Aşağıdakiler dahil olmak üzere Chat etkileşimi etkinliklerini yönetir: mesajlar, kart tıklamaları, eğik çizgi komutları ve iletişim kutularıdır. Yanıt /closeIncident Olay toplamak için iletişim kutusu açarak eğik çizgi komutunu kullanın daha fazla bilgi edinebilirsiniz. Chat API'deki spaces.messages.list yöntemini çağırarak alandaki mesajları okur. Apps Komut Dosyası'nda Admin SDK Directory hizmetini kullanarak kullanıcı kimliklerini alır.

ChatApp.gs kodunu görüntüleme

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

Kullanıcıların olay başlatma web sayfasına girdikleri form verilerini alır ve bu verileri kullanarak bir Chat alanı oluşturup doldurur, ardından olayla ilgili bir mesaj yayınlar.

ChatSpaceCreator.gs kodunu göster

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

Kullanıcının Google Drive'ında bir Google Dokümanlar dokümanı oluşturmak için Google Dokümanlar API'yi çağırır ve VertexAiApi.gs içinde oluşturulan olay bilgilerinin özetini dokümana yazar.

DocsApi.gs kodunu göster

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

Chat'teki görüşmeyi özetler Vertex AI'ı kullanarak yeni şeyler öğrenebilirsiniz. Bu özet, özel olarak oluşturulmuş bir DocsAPI.gs uygulamasında doküman.

VertexAiApi.gs kodunu görüntüleme

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

Olay başlatma web sitesini sunar.

WebController.gs kodunu görüntüleme

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

Olay başlatma web sitesini oluşturan HTML.

Index.html kodunu görüntüleme

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

Gönderme, gönderme, hesap ve bildirim gibi form davranışlarını yönetir. ve olay başlatma web sitesiyle ilgili sorunları giderir. Her şey dahil WebController.gs içindeki özel include işleviyle Index.html işlevine dönüştürülebilir.

JavaScript.html kodunu görüntüleme

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

Olay başlatma web sitesinin CSS'si. WebController.gs içindeki özel include işlevi tarafından Index.html içine dahil edilir.

Stylesheet.html kodunu göster

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>

Cloud proje numaranızı ve kimliğinizi bulma

  1. Google Cloud konsolunda Cloud projenize gidin.

    Google Cloud konsoluna git

  2. Ayarlar ve Yardımcı Programlar > Proje ayarları'nı tıklayın.

  3. Proje numarası ve Proje Kimliği alanlarındaki değerleri not edin. Bunları aşağıdaki bölümlerde kullanacaksınız.

Apps Komut Dosyası projesini oluşturma

Apps Komut Dosyası projesi oluşturmak ve bunu Cloud projenize bağlamak için:

  1. Google Chat ile olaylara yanıt verme Apps Script projesini açmak için aşağıdaki düğmeyi tıklayın.
    Projeyi açın
  2. Genel Bakış'ı tıklayın.
  3. Genel bakış sayfasında Kopya oluşturma simgesi Kopya oluştur'u tıklayın.

  4. Apps Komut Dosyası projesinin kopyanıza bir ad verin:

    1. Google Chat ile ilgili olaylara yanıt verme kopyası'nı tıklayın.

    2. Proje başlığı'na Incident Management Chat app yazın.

    3. Yeniden adlandır'ı tıklayın.

  5. Apps Komut Dosyası projesinin kopyasında Consts.gs dosyasına gidin ve YOUR_PROJECT_ID yerine Cloud projenizin kimliğini yazın.

Apps Komut Dosyası projesinin Cloud projesini ayarlayın

  1. Apps Komut Dosyası projenizde Proje ayarları simgesi Proje Ayarları'nı tıklayın.
  2. Google Cloud Platform (GCP) Projesi bölümünde Projeyi değiştir'i tıklayın.
  3. GCP proje numarası alanına Cloud projenizin proje numarasını yapıştırın.
  4. Proje ayarla'yı tıklayın. Cloud projesi ve Apps Komut Dosyası şimdi de bağlantılı.

Apps Komut Dosyası dağıtımı oluşturma

Tüm kod yerleştirildikten sonra Apps Komut Dosyası'nı dağıtın. belirler. Dağıtım kimliğini, Google Cloud'da Chat uygulamasını yapılandırırken kullanırsınız.

  1. Apps Komut Dosyası'nda olaya yanıt uygulamasının projesini açın.

    Apps Komut Dosyası'na gidin

  2. Dağıt'ı tıklayın > Yeni dağıtım.

  3. Eklenti ve Web uygulaması henüz seçilmemişse Türü seçin'in yanındaki dağıtım türlerini Proje ayarlarının simgesi tıklayın ve Eklenti ile Web uygulaması'nı seçin.

  4. Açıklama bölümünde, bu sürüm için aşağıdaki gibi bir açıklama girin: Complete version of incident management app.

  5. Farklı yürüt bölümünde Web uygulamasına erişen kullanıcı'yı seçin.

  6. Erişimi olan kullanıcılar bölümünde Workspace kuruluşunuzdaki herkes'i seçin. "Workspace kuruluşunuz", Google Workspace kuruluşunuzun adıdır.

  7. Dağıt'ı tıklayın. Apps Komut Dosyası raporları başarılı dağıtım ve olay için dağıtım kimliği ile URL sağlar ilk kullanıma hazırlama web sayfası.

  8. Daha sonra bir olay başlattığınızda ziyaret etmek için web uygulaması URL'sini not edin. Deployment ID'yi (Dağıtım Kimliği) kopyalayın. Google Cloud Console'daki Chat uygulaması

  9. Bitti'yi tıklayın.

Google Cloud Console'da Chat uygulamasını yapılandırma

Bu bölümde, Google Cloud Console'da Google Chat API'nin nasıl yapılandırılacağı gösterilmektedir Aşağıdakiler de dahil olmak üzere Chat uygulamanızla ilgili bilgileri içeren Apps Komut Dosyanızdan yeni oluşturduğunuz dağıtımın kimliği belirler.

  1. Google Cloud Console'da Menü > Diğer ürünler > Google Workspace > Ürün Kitaplığı > Google Chat API > Yönet > Yapılandırma'yı tıklayın.

    Chat API yapılandırmasına gidin

  2. Uygulama adı alanına Incident Management yazın.

  3. Avatar URL'si alanına https://developers.google.com/chat/images/quickstart-app-avatar.png yazın.

  4. Açıklama alanına Responds to incidents. yazın.

  5. Etkileşimli özellikleri etkinleştir açma/kapatma düğmesini açık konuma getirin.

  6. İşlevler bölümünde, Bire bir mesaj al, Alanlara ve grup görüşmelerine katıl'ı seçin.

  7. Bağlantı ayarları bölümünde Apps Komut Dosyası'nı seçin.

  8. Dağıtım Kimliği alanına, daha önce Apps Komut Dosyası proje dağıtımından kopyaladığınız Apps Komut Dosyası dağıtım kimliğini yapıştırın.

  9. Şu boyutta bir eğik çizgi komutu kaydedin: tam olarak uygulanmış Chat uygulamasında şunlar kullanılır:

    1. Eğik çizgi komutları bölümünde Eğik çizgi komutu ekle'yi tıklayın.

    2. Ad alanına /closeIncident yazın.

    3. Komut Kimliği'ne 1 yazın.

    4. Açıklama alanına şunu yazın: Closes the incident being discussed in the space.

    5. Bir iletişim kutusu açar'ı seçin.

    6. Bitti'yi tıklayın. Eğik çizgi komutu kaydedilir ve listelenir.

  10. Görünürlük altında Bu Chat uygulamasını, Workspace Alanı'nı tıklayın ve e-posta adresinizi girin.

  11. Günlükler bölümünde Günlüğe hata kaydet'i seçin.

  12. Kaydet'i tıklayın. Yapılandırma tarafından kaydedilmiş bir mesaj görünür. Bu mesaj, uygulamanın hazır olduğunu göreceksiniz.

Chat uygulamasını test etme

Olay yönetimi Chat uygulamasını test etmek için web sayfasından bir olay başlatın ve Chat uygulamasının beklendiği gibi çalıştığını doğrulayın:

  1. Apps Komut Dosyası dağıtım web uygulaması URL'sine gidin.

  2. Apps Komut Dosyası, verilerinize erişmek için izin istediğinde İzinleri incele'yi tıklayın, Google Workspace alanınızda uygun bir Google Hesabı ile oturum açın ve İzin ver'i tıklayın.

  3. Olay başlatma web sayfası açılır. Test bilgilerini girin:

    1. Olay başlığı alanına The First Incident yazın.
    2. İsteğe bağlı olarak, Olay müdahale ekipleri bölümüne şu e-posta adreslerini girin: yanıt verebilirsiniz. Kullanıcıların, Google Workspace kuruluşunuzda Google Chat hesabı olmalıdır. Aksi takdirde alan oluşturma işlemi başarısız olur. Kendi e-posta adresinizi girmeyin. Bu adres otomatik olarak eklenir.
    3. İlk mesaj alanına Testing the incident management Chat app. yazın

  4. Sohbet alanı oluştur'u tıklayın. creating space mesajı gösterilir.

  5. Alan oluşturulduktan sonra Space created! mesajı gösterilir. Alanı aç'ı tıklayın. Bu işlem, alanı Chat'te yeni bir sekmede açar.

  6. İsteğe bağlı olarak, siz ve diğer olay müdahale ekipleri alanda mesaj gönderebilirsiniz. Uygulama, bu mesajları Vertex AI'ı kullanarak özetler ve geriye dönük bir belge paylaşır.

  7. Olay yanıtını sonlandırmak ve çözüm sürecini başlatmak için sohbet alanında /closeIncident yazın. Olay yönetimi iletişim kutusu açılır.

  8. Olay kapatma bölümünde, olayın çözümü için bir açıklama girin. Test complete gibi.

  9. Olay Kapat'ı tıklayın.

Olay Yönetimi uygulaması, alandaki mesajları listeler ve özetler özeti bir Google Dokümanlar dokümanına yapıştırır ve kullanabilirsiniz.

Temizleme

Bu eğiticide kullanılan kaynaklar için Google Cloud hesabınızın ücretlendirilmesini istemiyorsanız Cloud projesini silmenizi öneririz.

  1. Google Cloud Console'da Kaynakları yönetin sayfasına gidin. Sonraki slayta geçin Menü &gt; IAM ve Yönetici &gt; Kaynakları Yönetin.

    Resource Manager'a gidin

  2. Proje listesinden silmek istediğiniz projeyi seçin ve ardından Sil: .
  3. İletişim kutusuna proje kimliğini yazın ve silmek için Kapat'ı tıklayın gösterir.