Google Chat, Vertex AI, Apps Script를 사용하여 이슈에 대응

이 튜토리얼에서는 다음 작업을 수행하는 Google Chat 앱을 만드는 방법을 보여줍니다. 사고에 실시간으로 대응할 수 있습니다 이슈에 응답할 때 앱은 Chat 스페이스를 만들고 채우고, 메시지, 슬래시 명령어, 대화상자로 이슈 해결을 돕고, AI를 사용하여 Google Docs 문서에 이슈 응답을 요약합니다.

이슈는 팀의 즉각적인 주의가 필요한 사건입니다. 해결할 수 있습니다. 이슈의 예는 다음과 같습니다.

• 고객 관계 관리 (CRM)에서 시간에 민감한 케이스가 생성됨 서비스팀이 협력하여 해결 방법을 찾아야 하는 경우가 많습니다
• 시스템이 오프라인 상태가 되면 사이트 안정성 엔지니어(SRE) 그룹에 알림이 전송되므로 엔지니어들이 함께 작업하여 시스템을 다시 온라인으로 전환할 수 있습니다.
• 규모가 큰 지진이 발생하여 긴급 구조 요원이 대응을 조정해야 합니다.

이 튜토리얼에서는 사용자가 웹페이지에서 버튼을 클릭하여 이슈를 신고하면 이슈 알림이 시작됩니다. 웹페이지는 사용자에게 기본 사고 정보(제목, 설명 및 응답자의 이메일 주소가 포함됩니다.

이슈 관리 채팅 앱의 실제 작동 방식을 확인하세요.

• 

  그림 1. 사용자가 사고를 신고할 수 있는 웹사이트입니다.

• 
  그림 2. Chat 스페이스가 생성되었다는 알림
• 
  그림 3. 사고 대응 Chat 스페이스
• 
  그림 4. 슬래시 명령어로 이슈 해결
• 
  그림 5. Incident Resolution(Incident Resolution) 대화상자
• 
  그림 6. 스페이스에 공유된 문제 해결 Google Docs 문서
• 
  그림 7. AI 요약 이슈 해결 Google Docs 문서

기본 요건

조직에 이러한 기본 요건을 사용 설정해야 하는 경우 Google Workspace 관리자가 사용 설정하려면 다음 안내를 따르세요.

• Google Chat에 액세스할 수 있는 비즈니스 또는 엔터프라이즈 Google Workspace 계정
• Google Workspace에서 디렉터리(연락처 공유)를 사용 설정합니다. 이슈 앱은 디렉터리를 사용하여 이름, 이메일 주소와 같은 이슈 응답자의 연락처 정보를 조회합니다. 이슈 대응자는 Google Chat 사용자여야 합니다. 계정에 액세스할 수 있습니다

목표

• 이슈에 대응하는 채팅 앱을 빌드합니다.
• 다음을 수행하여 사용자가 문제에 대응하도록 지원하세요.
  • 침해 사고 대응 공간 생성.
  • 사고 및 대응을 요약한 메시지 게시
  • 양방향 채팅 앱 기능으로 공동작업을 지원합니다.
• Vertex AI를 사용해 대화와 해결 방법을 요약합니다.

아키텍처

다음 다이어그램은 Google Workspace 및 이슈 대응에 사용되는 Google Cloud 리소스 Google Chat 앱

아키텍처는 침해 사고 대응이 어떻게 Google Chat 앱이 사고 및 해결 방법을 처리합니다.

1. 사용자가 다음에서 호스팅되는 외부 웹사이트에서 이슈를 시작함 Apps Script

2. 웹사이트는 비동기 HTTP 요청을 Apps Script에서 호스팅되는 Google Chat 앱

3. 이슈 대응 Google Chat 앱은 다음과 같이 요청을 처리합니다.

   1. Apps Script Admin SDK 서비스에 팀원이 추가됨 사용자 ID 및 이메일 주소와 같은 정보를 수집합니다.

   2. Apps Script 고급 Chat 서비스를 사용하여 Chat API에 대한 일련의 HTTP 요청을 통해 이슈 응답 Google Chat 앱은 이슈 Chat 스페이스를 만들고 팀원으로 채우고 스페이스에 메시지를 보냅니다.

4. 팀원이 Chat 스페이스에서 이슈에 대해 토론합니다.

5. 팀원이 슬래시 명령을 호출하여 있습니다

   1. Apps Script를 사용하여 Chat API에 대한 HTTP 호출 고급 채팅 서비스에 모든 채팅 목록이 표시됨 스페이스의 메시지로 이동합니다.

   2. Vertex AI가 나열된 메시지를 수신하고 요약을 생성합니다.

   3. Apps Script DocumentApp 서비스는 Docs 문서를 만들고 Vertex AI의 요약을 문서에 추가합니다.

   4. 사고 대응 Google Chat 앱이 Chat API를 호출하여 요약 Docs 문서 링크를 공유하는 메시지를 전송합니다.

환경 준비

이 섹션에서는 Google Cloud 프로젝트를 만들고 구성하는 방법을 보여줍니다. 채팅 앱

Google Cloud 프로젝트 만들기

Google Cloud 콘솔

1. Google Cloud 콘솔에서 메뉴 > IAM 및 관리자 > 프로젝트 만들기로 이동합니다.

   프로젝트 만들기로 이동

2. 프로젝트 이름 필드에 프로젝트를 설명하는 이름을 입력합니다.

   선택사항: 프로젝트 ID를 수정하려면 수정을 클릭합니다. 프로젝트가 생성된 후에는 프로젝트 ID를 변경할 수 없으므로 프로젝트의 전체 기간 동안 필요에 맞는 ID를 선택하세요.

3. 위치 필드에서 찾아보기를 클릭하여 프로젝트의 가능한 위치를 표시합니다. 그런 다음 선택을 클릭합니다.
   주의: Google Workspace 조직을 찾을 수 없나요?
   Google Workspace 계정에 로그인되어 있지 않은 것입니다. Google Workspace 개발자 문서에 설명된 일부 기능은 조직과 연결된 프로젝트에서만 사용할 수 있습니다.
4. 만들기를 클릭합니다. Google Cloud 콘솔이 대시보드 페이지로 이동하고 몇 분 이내에 프로젝트가 생성됩니다.

gcloud CLI

다음 개발 환경 중 하나에서 Google Cloud CLI (gcloud):

• Cloud Shell: gcloud CLI로 온라인 터미널 사용 설정되어 있다면 Cloud Shell을 활성화합니다
  Cloud Shell 활성화
• 로컬 셸: 로컬 개발 환경을 사용하려면 install 및 초기화 gcloud CLI에 연결할 수 있습니다
  Cloud 프로젝트를 만들려면 gcloud projects create 명령어를 사용합니다.

  gcloud projects create PROJECT_ID

  만들려는 프로젝트의 ID를 설정하여 PROJECT_ID를 바꿉니다.

Cloud 프로젝트에 결제 사용 설정

결제 계정을 연결할 수 없는 경우 이 변경을 수행하는 데 필요한 권한이 없는 것입니다. 자세한 내용은 결제를 사용 설정하는 데 필요한 권한.

Google Cloud 콘솔

1. Google Cloud 콘솔에서 결제로 이동합니다. 클릭 메뉴 > 결제 > 내 프로젝트를 클릭합니다.

   내 프로젝트의 결제로 이동

2. 조직 선택에서 Google Cloud 프로젝트에 액세스할 수 있습니다
3. 프로젝트 행에서 작업 메뉴()를 열고 결제 변경을 클릭한 다음 Cloud Billing 계정을 선택합니다.
4. 계정 설정을 클릭합니다.

gcloud CLI

1. 사용 가능한 결제 계정을 나열하려면 다음을 실행합니다.

   gcloud billing accounts list

2. 결제 계정을 Google Cloud 프로젝트에 연결하는 방법은 다음과 같습니다.

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

   다음을 바꿉니다.

   • PROJECT_ID는 결제를 사용 설정하려는 Cloud 프로젝트의 프로젝트 ID입니다.
   • BILLING_ACCOUNT_ID는 Google Cloud 프로젝트에 연결할 결제 계정 ID입니다.

API 사용 설정

Google Cloud 콘솔

1. Google Cloud 콘솔에서 Google Chat API, Google Docs API, Admin SDK API, Vertex AI API를 사용 설정합니다.

   API 사용 설정

2. 올바른 Cloud 프로젝트에서 API를 사용 설정하고 있는지 확인한 후 다음을 클릭합니다.

3. 올바른 API를 사용 설정했는지 확인한 다음 사용 설정을 클릭합니다.

gcloud CLI

1. 필요한 경우 현재 Cloud 프로젝트를 gcloud config set project 명령어로 만든 프로젝트로 설정합니다.

   gcloud config set project PROJECT_ID

   PROJECT_ID를 생성한 Cloud 프로젝트의 프로젝트 ID로 바꿉니다.

2. gcloud services enable 명령어를 사용하여 Google Chat API, Google Docs API, Admin SDK API, Vertex AI API를 사용 설정합니다.

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

인증 및 승인 설정

인증 및 승인을 통해 Google Workspace의 채팅 앱 액세스 리소스 Google Cloud를 사용하여 이슈 대응을 처리합니다

이 튜토리얼에서는 앱을 내부적으로 게시하므로 자리표시자 정보를 사용해도 됩니다. 앱을 외부에 게시하기 전에 자리표시자 정보를 동의 화면의 실제 정보로 대체합니다.

1. Google Cloud 콘솔에서 메뉴 > API 및 서비스 > OAuth 동의 화면으로 이동합니다.

   OAuth 동의 화면으로 이동

2. 사용자 유형에서 내부를 선택한 다음 만들기를 클릭합니다.

3. 앱 이름에 Incident Management를 입력합니다.

4. 사용자 지원 이메일에서 내 이메일 주소 또는 적절한 주소를 선택합니다. Google 그룹

5. 개발자 연락처 정보에 이메일 주소를 입력합니다.

6. 저장하고 계속하기를 클릭합니다.

7. 범위 추가 또는 삭제를 클릭합니다. 범위 목록이 포함된 패널이 표시됨 .

8. 수동으로 범위 추가에서 다음 범위를 붙여넣습니다.

   • 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. 표에 추가를 클릭합니다.

10. 업데이트를 클릭합니다.

11. 저장하고 계속하기를 클릭합니다.

12. 앱 등록 요약을 검토한 후 대시보드로 돌아가기를 클릭합니다.

채팅 앱 만들기 및 배포

다음 섹션에서는 Chat 앱에 필요한 모든 애플리케이션 코드가 포함된 전체 Apps Script 프로젝트를 복사하고 업데이트하므로 각 파일을 복사하여 붙여넣을 필요가 없습니다.

다음과 같이 일부 함수에는 이름 끝에 밑줄이 포함됩니다. ChatApp.gs의 processSlashCommand_()입니다. 밑줄은 함수 인시던트 초기화 웹 페이지에서 인코더-디코더를 제거합니다. 자세한 내용은 비공개 함수를 참고하세요.

Apps Script는 .gs 스크립트와 .html라는 두 가지 파일 형식을 지원합니다. 할 수 있습니다. 이 지원을 준수하기 위해 앱의 클라이언트 측 JavaScript가 포함됩니다. <script /> 태그 내부에 있고 해당 CSS는 내부 <style /> 태그 내에 포함됩니다. 있습니다.

원하는 경우 GitHub에서 전체 프로젝트를 볼 수 있습니다.

GitHub에서 보기

다음은 각 파일의 개요입니다.

Consts.gs

다른 코드 파일에서 참조하는 상수 정의 Cloud 프로젝트 ID, Vertex AI 위치 ID, 슬래시 명령어 ID를 사용하는 것이 좋습니다

Consts.gs 코드 보기

apps-script/incident-response/Consts.gs

GitHub에서 보기

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

ChatApp.gs

다음을 포함한 Chat 상호작용 이벤트 처리 메시지, 카드 클릭, 슬래시 명령 및 대화상자가 포함됩니다. 다음에 응답: /closeIncident 슬래시 명령어(대화상자를 열어 이슈 수집) 해결 세부정보를 확인하세요. 다음을 호출하여 스페이스의 메시지를 읽습니다. Chat API의 spaces.messages.list 메서드 Apps Script에서 Admin SDK 디렉터리 서비스를 사용하여 사용자 ID를 가져옵니다.

ChatApp.gs 코드 보기

apps-script/incident-response/ChatApp.gs

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

사용자가 이슈 초기화 웹페이지에 입력한 양식 데이터를 수신하고 이를 사용하여 Chat 스페이스를 만들고 채우는 방식으로 스페이스를 설정한 다음 이슈에 관한 메시지를 게시합니다.

ChatSpaceCreator.gs 코드 보기

apps-script/incident-response/ChatSpaceCreator.gs

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

Google Docs API를 호출하여 사용자의 Google Drive에 돌아가 이슈 정보의 요약을 작성한 생성된 파일을 VertexAiApi.gs 문서에 추가합니다.

DocsApi.gs 코드 보기

apps-script/incident-response/DocsApi.gs

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

Chat의 대화를 요약합니다. Vertex AI를 사용하여 ML 모델을 빌드할 수 있습니다 이 요약은 특별히 만든 DocsAPI.gs 문서

VertexAiApi.gs 코드 보기

apps-script/incident-response/VertexAiApi.gs

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

이슈 초기화 웹사이트를 제공합니다.

WebController.gs 코드 보기

apps-script/incident-response/WebController.gs

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

이슈 초기화 웹사이트를 구성하는 HTML입니다.

Index.html 코드 보기

apps-script/incident-response/Index.html

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

이슈 초기화 웹사이트의 제출, 오류, 삭제 등 양식 동작을 처리합니다. WebController.gs의 맞춤 include 함수에 의해 Index.html에 포함됩니다.

JavaScript.html 코드 보기

apps-script/incident-response/JavaScript.html

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입니다. 그것은 맞춤 include 함수에 의해 Index.html에 포함됨 WebController.gs입니다.

Stylesheet.html 코드 보기

apps-script/incident-response/Stylesheet.html

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>

Cloud 프로젝트 번호 및 ID 찾기

1. Google Cloud 콘솔에서 Cloud 프로젝트로 이동합니다.

   Google Cloud 콘솔로 이동

2. 설정 및 유틸리티 > 프로젝트 설정을 클릭합니다.

3. 프로젝트 번호 및 프로젝트 ID 필드의 값을 확인합니다. 나 다음 섹션에서 사용하세요

Apps Script 프로젝트 만들기

Apps Script 프로젝트를 만들고 Cloud 프로젝트와 연결하는 방법은 다음과 같습니다.

1. 다음 버튼을 클릭하여 Google Chat으로 이슈에 대응 Apps Script 프로젝트를 엽니다.
   프로젝트 열기
2. 개요를 클릭합니다.
3. 개요 페이지에서 사본 만들기를 클릭합니다.

4. Apps Script 프로젝트 사본의 이름을 지정합니다.

   1. Copy of Incident to 사고 with Google Chat(Google Chat으로 이슈에 대응하기의 사본)을 클릭합니다.

   2. 프로젝트 제목에 Incident Management Chat app을 입력합니다.

   3. 이름 바꾸기를 클릭합니다.

5. Apps Script 프로젝트 사본에서 Consts.gs 파일로 이동하여 YOUR_PROJECT_ID를 Cloud 프로젝트의 ID로 바꿉니다.

Apps Script 프로젝트의 Cloud 프로젝트 설정

1. Apps Script 프로젝트에서 프로젝트 설정을 클릭합니다.
2. Google Cloud Platform(GCP) 프로젝트에서 프로젝트 변경을 클릭합니다.
3. GCP 프로젝트 번호에 Cloud 프로젝트의 프로젝트 번호를 붙여넣습니다.
4. 프로젝트 설정을 클릭합니다. 이제 Cloud 프로젝트와 Apps Script 프로젝트가 연결되었습니다.

Apps Script 배포 만들기

이제 모든 코드가 준비되었으므로 Apps Script 프로젝트를 배포합니다. 배포 ID는 Google Cloud에서 Chat 앱을 구성할 때 사용합니다.

1. Apps Script에서 이슈 응답 앱의 프로젝트를 엽니다.

   Apps Script로 이동

2. 배포 > 새 배포를 클릭합니다.

3. 부가기능 및 웹 앱이 아직 선택되어 있지 않으면 유형 선택 옆에 있는 배포 유형 을 클릭하고 부가기능 및 웹 앱을 선택합니다.

4. 설명에 이 버전에 대한 설명을 입력합니다. 예를 들면 다음과 같습니다. Complete version of incident management app입니다.

5. 다음으로 실행에서 웹 앱에 액세스하는 사용자를 선택합니다.

6. 액세스 권한이 있는 사용자에서 Workspace 조직 내 모든 사용자를 선택합니다. 여기에서 'Workspace 조직'은 의 이름은 Google Workspace 조직.

7. 배포를 클릭합니다. Apps Script 보고서 완료 배포 ID와 이슈의 URL을 제공합니다. 초기화해야 합니다

8. 나중에 이슈를 시작할 때 방문할 웹 앱 URL을 기록해 둡니다. 배포 ID를 복사합니다. Google Cloud 콘솔에서 Chat 앱을 구성할 때 이 ID를 사용합니다.

9. 완료를 클릭합니다.

Google Cloud 콘솔에서 채팅 앱 구성

이 섹션에서는 방금 Apps Script 프로젝트에서 만든 배포의 ID를 비롯하여 Chat 앱에 관한 정보로 Google Cloud 콘솔에서 Google Chat API를 구성하는 방법을 보여줍니다.

1. Google Cloud 콘솔에서 메뉴를 클릭합니다. > 제품 더보기 > Google Workspace > 제품 라이브러리 > Google Chat API > 관리 > 구성.

   Chat API 구성으로 이동

2. 앱 이름에 Incident Management를 입력합니다.

3. 아바타 URL에 https://developers.google.com/chat/images/quickstart-app-avatar.png를 입력합니다.

4. 설명에 Responds to incidents.를 입력합니다.

5. 양방향 기능 사용 설정 전환 버튼을 클릭하여 On(사용)으로 설정합니다.

6. 기능에서 1:1 메시지 수신, 스페이스 및 그룹 대화 참여를 선택합니다.

7. 연결 설정에서 Apps Script를 선택합니다.

8. 배포 ID에 Apps Script 배포 ID를 붙여넣습니다. 이전에 Apps Script 프로젝트에서 복사한 배포할 수 있습니다

9. 완전히 구현된 Chat 앱에서 사용하는 슬래시 명령어를 등록합니다.

   1. 슬래시 명령어에서 슬래시 명령어 추가를 클릭합니다.

   2. 이름에 /closeIncident를 입력합니다.

   3. 명령어 ID에 1를 입력합니다.

   4. 설명에 Closes the incident being discussed in the space.를 입력합니다.

   5. 대화상자 열기를 선택합니다.

   6. 완료를 클릭합니다. 슬래시 명령어가 등록되고 표시됩니다.

10. 공개 상태에서 Workspace 도메인을 클릭하고 이메일 주소를 입력합니다.

11. 로그에서 Logging에 오류 로깅을 선택합니다.

12. 저장을 클릭합니다. 구성이 저장되었다는 메시지가 표시되면 앱을 테스트할 준비가 된 것입니다.

채팅 앱 테스트

이슈 관리 채팅 앱을 테스트하려면 다음을 시작하세요. 문제를 확인하고 채팅 앱이 예상대로 작동합니다.

1. Apps Script 배포 웹 앱 URL로 이동합니다.

2. Apps Script에서 데이터에 액세스할 권한을 요청하면 권한 검토를 클릭하고 Google Workspace 도메인에서 적절한 Google 계정으로 로그인한 다음 허용을 클릭합니다.

3. 이슈 초기화 웹페이지가 열립니다. 테스트 정보를 입력합니다.

   1. 이슈 제목에 The First Incident를 입력합니다.
   2. 원하는 경우 Incident responders(Incident Responders)에서 동료 Incident Responder의 이메일 주소를 입력합니다. 해당 사용자는 반드시 Google Workspace 조직의 Google Chat 계정 또는 스페이스를 만들 수 없습니다. 이메일 주소는 자동으로 포함되므로 직접 입력하지 마세요.
   3. 초기 메시지에 Testing the incident management Chat app.를 입력합니다.

4. Chat 스페이스 만들기를 클릭합니다. creating space 메시지가 표시됩니다.

5. 스페이스가 생성되면 Space created! 메시지가 표시됩니다. 스페이스 열기를 클릭하면 Chat에서 스페이스가 새 탭으로 열립니다.

6. 원하는 경우 관리자와 다른 이슈 대응자는 있습니다. 앱은 Vertex AI를 사용하여 이러한 메시지를 요약하고 회고 문서를 공유합니다.

7. 이슈 대응을 종료하고 해결 프로세스를 시작하려면 채팅 스페이스에서 /closeIncident를 입력합니다. 이슈 관리 대화상자가 열립니다.

8. 이슈 종료에 이슈 해결에 대한 설명을 입력합니다. (예: Test complete)

9. Incident Close(Incident Close)를 클릭합니다.

Incident Management 앱에서 스페이스의 메시지를 나열하고 요약함 Google Docs 문서에 요약을 붙여넣고 할 수 있습니다.

삭제

이 튜토리얼에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 Cloud 프로젝트를 삭제하는 것이 좋습니다.

주의: 프로젝트를 삭제하면 다음과 같은 효과가 발생합니다.

• 프로젝트의 모든 항목이 삭제됩니다. 이 튜토리얼의 기존 프로젝트를 사용한 경우 프로젝트를 삭제하면 프로젝트에서 수행한 다른 작업도 삭제됩니다.
• 커스텀 프로젝트 ID가 손실됩니다. 이 프로젝트를 만들 때 앞으로 사용할 커스텀 프로젝트 ID를 만들었을 수 있습니다. appspot.com의 URL과 같이 프로젝트 ID를 사용하는 URL을 보존하려면 전체 프로젝트를 삭제하는 대신 프로젝트 내의 선택한 리소스만 삭제하세요.

여러 튜토리얼과 빠른 시작을 살펴보려는 경우 프로젝트를 재사용하면 프로젝트 할당량 한도 초과를 방지할 수 있습니다.

1. Google Cloud 콘솔에서 리소스 관리 페이지로 이동합니다. 메뉴 > IAM 및 관리자 > 리소스 관리를 클릭합니다.

   Resource Manager로 이동

2. 프로젝트 목록에서 삭제할 프로젝트를 선택한 후 를 삭제합니다.
3. 대화상자에서 프로젝트 ID를 입력한 후 종료를 클릭하여 삭제합니다. 프로젝트입니다

관련 주제

• Gemini AI Chat 앱과의 채팅 대화를 바탕으로 질문에 답변하기
• Google Chat, Vertex AI, Firestore로 프로젝트 관리하기
• 이슈 대응 앱은 사용자 인증 정보로 인증하여 API를 호출합니다. Chat API 및 Vertex AI API와 같은 Google Cloud 서비스를 호출할 수 있습니다. 즉, 문제를 초기화하는 사용자는 이러한 서비스에 액세스할 수 있어야 합니다. 앱을 더 견고하게 만들려면 Vertex AI API를 호출해 보세요. 사용자 인증 정보 대신 서비스 계정으로 /closeIncident 슬래시 명령어 서비스 계정 구성 관련 도움말 Vertex AI API에 대한 자세한 내용은 커스텀 서비스 계정 사용