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

Bu eğitimde, olaylara anında yanıt veren bir Google Chat uygulamasının nasıl oluşturulacağı gösterilmektedir. Uygulama bir olaya yanıt verirken Chat alanı oluşturup doldurur; mesajlar, eğik çizgi komutları ve iletişim kutularıyla olay çözümünü kolaylaştırır ve bir Google Dokümanlar dokümanında olay yanıtını özetlemek için yapay zekayı kullanır.

Olay, çözüm için bir ekip ekibinin hemen ilgilenmesini gerektiren bir olaydır. Olaylara örnek olarak aşağıdakiler verilebilir:

• Müşteri İlişkileri Yönetimi (CRM) platformunda zamana duyarlı bir destek kaydı oluşturulur ve hizmet ekibinin bir çözüm üzerinde birlikte çalışması gerekir.
• Bir sistem çevrimdışı olur ve bir grup site güvenilirliği mühendisini (SRE'ler) uyararak sistemi tekrar çevrimiçi hale getirmek için birlikte çalışabilirler.
• Şiddetli deprem meydana geldiğinden, acil durum çalışanlarının müdahalede koordinasyonu sağlamaları gerekiyor.

Bu eğiticinin amacı doğrultusunda, olay bir kullanıcı web sayfasından bir düğmeyi tıklayarak bildirdiğinde olay uyarısı başlar. Web sayfası kullanıcılardan temel olay bilgilerini girmelerini isteyerek bir olayı simüle eder: başlık, açıklama ve yanıt verenlerin e-posta adresleri.

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

Ön koşullar

Kuruluşunuzda aşağıdaki ön koşullardan herhangi birinin etkinleştirilmesi gerekiyorsa Google Workspace yöneticinizden bunları etkinleştirmesini isteyin:

• Google Chat'e erişimi olan bir Google Workspace hesabı.
• Google Workspace için Dizin'i (kişi paylaşımı) etkinleştirmek istiyorsanız. Olay uygulaması, olay yanıt verenlerinin ad ve e-posta adresi gibi iletişim bilgilerini aramak için dizini kullanır. Olaylara yanıt verenler, Google Workspace kuruluşunuzda Google Chat hesabı olan kullanıcılar olmalıdır.

Hedefler

• Olaylara yanıt veren bir Chat uygulaması oluşturun.
• 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 Chat uygulaması özellikleriyle iş birliğini destekleme.
• Vertex AI ile görüşmeleri ve çözümleri özetleyin.

Mimari

Aşağıdaki şemada, olay yanıtı Google Chat uygulaması tarafından kullanılan Google Workspace ve Google Cloud kaynaklarının mimarisi gösterilmektedir.

Bu mimari, olay yanıtı Google Chat uygulamasının olayları ve çözümleri nasıl işlediğini gösterir.

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

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

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

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

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

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

5. Bir ekip üyesi, olayın çözümünü işaret etmek için eğik çizgi komutu çağırır.

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

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

   3. Apps Komut Dosyası DocumentApp hizmeti, Dokümanlar dokümanı oluşturur ve Vertex AI'ın özetini dokümana ekler.

   4. Olay yanıtı Google Chat uygulaması, özet Dokümanlar dokümanının 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, Chat uygulaması için Google Cloud projesinin nasıl oluşturulacağı ve yapılandırılacağı gösterilmektedir.

Google Cloud projesi oluşturma

Google Cloud Console

1. Google Cloud konsolunda Menü menu > IAM ve Yönetici > Proje oluştur'a gidin.

   Proje Oluşturma bölümüne git

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 kimliği, proje oluşturulduktan sonra değiştirilemez. Bu nedenle, projenin ömrü boyunca ihtiyaçlarınızı karşılayan bir kimlik seçin.

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

gcloud CLI

Aşağıdaki geliştirme ortamlarından birinde Google Cloud KSA'ya ("gcloud") erişin:

• Cloud Shell: Halihazırda gcloud KSA bulunan bir online terminal kullanmak için Cloud Shell'i etkinleştirin.
  Cloud Shell'i etkinleştir
• Yerel Kabuk: Yerel bir geliştirme ortamı kullanmak için gcloud KSA'yı yükleyin ve initialize.
  Bulut 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 komutunu değiştirin.

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

Google Cloud Console

1. Google Cloud konsolunda Faturalandırma'ya gidin. Menü menu > Faturalandırma > Projelerim'i tıklayın.

   Projelerim için Faturalandırma sayfasına git

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ü (more_vert) 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

Kimlik doğrulama ve yetkilendirmeyi ayarlama

Kimlik doğrulama ve yetkilendirme, Chat uygulamasının bir olay yanıtını işlemek için Google Workspace ve Google Cloud'daki kaynaklara erişmesini sağlar.

Bu eğiticide, uygulamayı dahili olarak yayınlarsınız. Böylece yer tutucu bilgileri rahatça kullanılabilir. Uygulamayı harici olarak yayınlamadan önce yer tutucu bilgilerini izin ekranındaki gerçek bilgilerle değiştirin.

1. Google Cloud konsolunda Menü menu > 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 Oluştur'u tıklayın.

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

4. Kullanıcı destek e-postası alanında e-posta adresinizi veya uygun bir Google grubunu seçin.

5. Geliştirici iletişim bilgileri altında e-posta adresinizi girin.

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

7. Kapsam Ekle veya Kaldır'ı tıklayın. Cloud projenizde etkinleştirdiğiniz her API için kapsam listesinin bulunduğu bir panel görünür.

8. Aşağıdaki kapsamları Manuel olarak ekle bölümüne 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 Komut Dosyası projesinin tamamını kopyalayıp güncelleyeceksiniz. Böylece her dosyayı kopyalayıp yapıştırmanıza gerek yoktur.

Bazı işlevlerin adlarının sonuna alt çizgi eklenebilir (örneğin, ChatApp.gs dilinden processSlashCommand_()). Alt çizgi, tarayıcıda açık olduğunda işlevi olay başlatma web sayfasından gizler. Daha fazla bilgi edinmek için Gizli işlevler bölümünü inceleyin.

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

İsteğe bağlı olarak projenin tamamını GitHub'da görüntüleyebilirsiniz.

GitHub'da göster

Her bir dosyayla ilgili genel bakışı burada bulabilirsiniz:

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 başvurduğu sabitleri tanımlar.

Consts.gs kodunu göster

apps-script/incident-response/Consts.gs

GitHub'da göster

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

ChatApp.gs

Mesajlar, kart tıklamaları, eğik çizgi komutları ve iletişim kutuları gibi Chat etkileşimi etkinliklerini işler. Olay çözümleme ayrıntılarını toplamaya yönelik bir iletişim kutusu açarak /closeIncident eğik çizgi komutuna yanıt verir. Chat API'de spaces.messages.list yöntemini çağırarak alandaki mesajları okur. Kullanıcı kimliklerini Apps Komut Dosyası'ndaki Admin SDK Directory hizmetini kullanarak alır.

ChatApp.gs kodunu göster

apps-script/incident-response/ChatApp.gs

GitHub'da göster

/**
 * 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 girdiği form verilerini alır, bu verileri oluşturup doldurarak Chat alanı oluşturmak için kullanır ve ardından olay hakkında bir mesaj yayınlar.

ChatSpaceCreator.gs kodunu göster

apps-script/incident-response/ChatSpaceCreator.gs

GitHub'da göster

/**
 * 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 Docs API'yi çağırır ve VertexAiApi.gs'da oluşturulan olay bilgilerinin özetini dokümana yazar.

DocsApi.gs kodunu göster

apps-script/incident-response/DocsApi.gs

GitHub'da göster

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

Vertex AI kullanarak Chat alanındaki konuşmayı özetler. Bu özet, DocsAPI.gs konumunda özel olarak oluşturulmuş bir dokümanda yayınlanır.

VertexAiApi.gs kodunu göster

apps-script/incident-response/VertexAiApi.gs

GitHub'da göster

/**
 * 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 yayınlar.

WebController.gs kodunu göster

apps-script/incident-response/WebController.gs

GitHub'da göster

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

apps-script/incident-response/Index.html

GitHub'da göster

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

Olay başlatma web sitesi için gönderme, hata ve temizleme gibi form davranışlarını yönetir. WebController.gs içindeki özel include işleviyle Index.html içine dahil edilir.

JavaScript.html kodunu göster

apps-script/incident-response/JavaScript.html

GitHub'da göster

<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şleviyle Index.html içine dahil edilir.

Stylesheet.html kodunu göster

apps-script/incident-response/Stylesheet.html

GitHub'da göster

<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 Console'a git

2. Ayarlar ve Yardımcı Programlar more_vert > 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

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

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

4. Apps Komut Dosyası projesi kopyanızı adlandırın:

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

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

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

5. Apps Komut Dosyası projesi kopyanızda, Consts.gs dosyasına gidin ve YOUR_PROJECT_ID yerine Cloud projenizin kimliğini girin.

Apps Komut Dosyası projesinin Cloud projesini ayarlayın

1. Apps Komut Dosyası projenizde, Proje Ayarları'nı tıklayın.
2. Google Cloud Platform (GCP) Project (Google Cloud Platform (GCP) Projesi) bölümünde Change project (Projeyi değiştir) seçeneğini tıklayın.
3. GCP proje numarası alanına Cloud projenizin numarasını yapıştırın.
4. Proje ayarla'yı tıklayın. Cloud projesi ile Apps Komut Dosyası projesi birbirine bağlandı.

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

Artık tüm kodlar yerleştirildiğine göre, Apps Komut Dosyası projesini dağıtabilirsiniz. Google Cloud'da Chat uygulamasını yapılandırırken dağıtım kimliğini kullanırsınız.

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

   Apps Komut Dosyası'na git

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

3. Eklenti ve Web uygulaması seçili değilse Tür seç'in yanında, dağıtım türlerini tıklayın ve Eklenti ile Web uygulaması'nı seçin.

4. Açıklama alanına bu sürüm için Complete version of incident management app gibi bir açıklama girin.

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

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

7. Deploy'u (Dağıt) tıklayın. Apps Komut Dosyası, dağıtımın başarılı olduğunu bildirir ve olay başlatma web sayfası için dağıtım kimliği ve URL sağlar.

8. Daha sonra bir olay başlattığınızda ziyaret edilecek Web uygulaması URL'sini not edin. Deployment ID'yi kopyalayın. Bu kimliği Google Cloud Console'da Chat uygulamasını yapılandırırken kullanırsınız.

9. Done'ı (Bitti) tıklayın.

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

Bu bölümde, Google Cloud Console'da Google Chat API'yi, Apps Komut Dosyası projenizden oluşturduğunuz dağıtımın kimliği de dahil olmak üzere Chat uygulamanızla ilgili bilgilerle nasıl yapılandıracağınız gösterilmektedir.

1. Google Cloud Console'da Menü menu > 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 git

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 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ı projesi'ni seçin.

8. Daha önce Apps Komut Dosyası proje dağıtımından kopyaladığınız Apps Komut Dosyası Dağıtım Kimliği'ni Dağıtım Kimliği alanına yapıştırın.

9. Tamamen uygulanmış Chat uygulamasının kullandığı bir eğik çizgi komutu kaydedin:

   1. Eğik çizgi komutları altında, 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 Closes the incident being discussed in the space. yazın.

   5. İletişim kutusu açar'ı seçin.

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

10. Görünürlük bölümünde Bu Chat uygulamasını Workspace Alanınızdaki belirli kişi ve gruplar için kullanılabilir hale getirin'i seçin ve e-posta adresinizi girin.

11. Günlükler bölümünde Hataları Logging'e kaydet'i seçin.

12. Kaydet'i tıklayın. Uygulamanın test edilmeye hazır olduğunu belirten bir yapılandırma kaydedildi mesajı görüntülenir.

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. İsterseniz Olay yanıtlayıcıları bölümüne olay yanıt sorumlunuzun e-posta adreslerini girin. Söz konusu kullanıcıların Google Workspace kuruluşunuzda Google Chat hesabı olan kullanıcılar olması gerekir. Aksi takdirde alan oluşturulamaz. Otomatik olarak eklendiği için kendi e-posta adresinizi girmeyin.
   3. İlk mesaj'a Testing the incident management Chat app. yazın.

4. Chat alanı oluştur'u tıklayın. Bir creating space mesajı görünür.

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. İsterseniz siz ve diğer olay yanıt ekipleri alana mesaj gönderebilirsiniz. Uygulama, Vertex AI kullanarak bu mesajları özetliyor ve retrospektif belgesi paylaşıyor.

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

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

9. Kapat'ı tıklayın.

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

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 konsolunda Kaynakları yönetin sayfasına gidin. Menü menu > IAM ve Yönetici > Kaynakları Yönet'i tıklayın.

   Resource Manager'a git

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

İlgili konular

• Gemini AI Chat uygulamasıyla yapılan Chat görüşmelerine dayalı soruları yanıtlama
• Projeleri Google Chat, Vertex AI ve Firestore ile yönetme
• Olay yanıtı uygulaması, API'leri çağırmak ve Chat API ile Vertex AI API gibi Google Cloud hizmetlerini çağırmak için kullanıcı kimlik bilgileriyle kimlik doğrulaması yapar. Yani, olayı başlatan kullanıcının bu hizmetlere erişimi olması gerekir. Uygulamayı daha güçlü hale getirmek için /closeIncident eğik çizgi komutunu çağıran kullanıcının kullanıcı kimlik bilgileri yerine Vertex AI API'yi hizmet hesabı olarak çağırmayı düşünün. Vertex AI API için bir hizmet hesabını yapılandırma konusunda yardım almak istiyorsanız Özel hizmet hesabı kullanma bölümünü inceleyin.