Google Chat에서 연락처 수집 및 관리하기

이 튜토리얼에서는 Google Chat 사용자가 개인 및 비즈니스 연락처를 관리하는 데 도움이 되는 Google Chat 앱을 빌드하는 방법을 보여줍니다. 정보를 수집하기 위해 Chat 앱은 사용자에게 카드 메시지 및 대화상자에서 연락처 양식을 작성하라는 메시지를 표시합니다.

Chat 앱 작동 방식을 확인해 보세요.

기본 요건

• Google Chat에 액세스할 수 있는 비즈니스 또는 엔터프라이즈 Google Workspace 계정

목표

• 사용자 인터페이스 (UI)를 card 객체로 디자인하고 빌드하고 메시지와 대화상자에 UI를 표시합니다.
• 사용자가 양식 입력 위젯을 사용하여 제출하는 정보를 수신하고 처리합니다.
• 텍스트, 카드, 액세서리 위젯이 포함된 메시지를 보내서 슬래시 명령어에 응답합니다.

아키텍처

Chat 앱은 Google Apps Script에 내장되어 있으며 상호작용 이벤트를 사용하여 Chat 사용자를 처리하고 응답합니다.

다음은 사용자가 일반적으로 Chat 앱과 상호작용하는 방식을 보여줍니다.

1. 사용자가 Chat 앱으로 채팅 메시지를 열거나 기존 스페이스에 Chat 앱을 추가합니다.

2. Chat 앱은 연락처 양식을 빌드하고 card 객체로 표시하여 사용자에게 연락처를 추가하라는 메시지를 표시합니다. 문의 양식을 표시하기 위해 Chat 앱은 다음과 같은 방식으로 사용자에게 응답합니다.

   • @멘션 및 채팅 메시지에 연락처 양식이 포함된 카드 메시지로 응답합니다.
   • 문의 양식이 있는 대화상자를 열어 슬래시 명령어 /addContact에 응답합니다.
   • 사용자가 클릭하여 연락처 양식 대화상자를 열 수 있는 연락처 추가 버튼이 있는 텍스트 메시지로 슬래시 명령어 /about에 응답합니다.

3. 문의 양식이 표시되면 사용자는 다음 필드와 위젯에 연락처 정보를 입력합니다.

   • 이름 및 성: 문자열을 허용하는 textInput 위젯입니다.
   • Birthdate: 날짜만 허용하는 dateTimePicker 위젯입니다.
   • 연락처 유형: 사용자가 단일 문자열 값 (Personal 또는 Work)을 선택하고 제출할 수 있는 라디오 버튼의 selectionInput 위젯입니다.
   • 검토 및 제출 버튼: 사용자가 클릭하여 입력한 값을 제출하는 button 위젯이 있는 buttonList 배열입니다.

4. Google Chat 앱은 CARD_CLICKED 상호작용 이벤트를 처리하여 사용자가 입력한 값을 처리하고 확인 카드에 값을 표시합니다.

5. 사용자가 확인 카드를 검토하고 제출 버튼을 클릭하여 연락처 정보를 완료합니다.

6. Google Chat 앱은 제출을 확인하는 비공개 문자 메시지를 보냅니다.

환경 준비

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

Google Cloud 프로젝트 만들기

Google Cloud 콘솔

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

   프로젝트 만들기로 이동

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

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

3. 위치 필드에서 찾아보기를 클릭하여 프로젝트의 잠재적 위치를 표시합니다. 그런 다음 선택을 클릭합니다.
4. 만들기를 클릭합니다. Google Cloud 콘솔이 대시보드 페이지로 이동하고 몇 분 이내에 프로젝트가 생성됩니다.

gcloud CLI

다음 개발 환경 중 하나에서 Google Cloud CLI(gcloud)에 액세스합니다.

• Cloud Shell: gcloud CLI가 이미 설정된 온라인 터미널을 사용하려면 Cloud Shell을 활성화하세요.
  Cloud Shell 활성화
• 로컬 셸: 로컬 개발 환경을 사용하려면 gcloud CLI를 설치하고 초기화합니다.
  Cloud 프로젝트를 만들려면 gcloud projects create 명령어를 사용합니다.

  gcloud projects create PROJECT_ID

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

인증 및 승인 설정

Google Chat 앱의 경우 사용자가 Google Chat을 비롯한 Google Workspace 애플리케이션에서 앱을 승인할 수 있도록 OAuth 동의 화면을 구성해야 합니다.

이 튜토리얼에서는 테스트 및 내부용으로만 사용되는 Chat 앱을 배포하므로 동의 화면에 자리표시자 정보를 사용해도 됩니다. Chat 앱을 게시하기 전에 자리표시자 정보를 실제 정보로 대체합니다.

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

   OAuth 동의 화면으로 이동

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

3. 앱 이름에 Contact Manager를 입력합니다.

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

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

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

7. 범위 페이지에서 저장 후 계속을 클릭합니다. 채팅 앱에는 OAuth 범위가 필요하지 않습니다.

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

Chat 앱 만들기 및 배포

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

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

GitHub에서 보기

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

main.gs

사용자가 채팅 앱에 메시지를 보내거나, 채팅 앱 메시지에서 버튼을 클릭하거나, 대화상자를 열고 닫을 때 발생하는 상호작용 이벤트를 비롯한 모든 앱 로직을 처리합니다.

main.gs 코드 보기

apps-script/contact-form-app/main.gs

GitHub에서 보기

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a MESSAGE interaction event in Google Chat.
 *
 * @param {Object} event the MESSAGE interaction event from Chat API.
 * @return {Object} message response that opens a dialog or sends private
 *                          message with text and card.
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {
      case 1:
        // If the slash command is "/about", responds with a text message and button
        // that opens a dialog.
        return {
          text: "Manage your personal and business contacts 📇. To add a " +
                  "contact, use the slash command `/addContact`.",
          accessoryWidgets: [{
            buttonList: { buttons: [{
              text: "Add Contact",
              onClick: { action: {
                function: "openInitialDialog",
                interaction: "OPEN_DIALOG"
              }}
            }]}
          }]
        }
      case 2:
        // If the slash command is "/addContact", opens a dialog.
        return openInitialDialog();
    }
  }

  // If user sends the Chat app a message without a slash command, the app responds
  // privately with a text and card to add a contact.
  return {
    privateMessageViewer: event.user,
    text: "To add a contact, try `/addContact` or complete the form below:",
    cardsV2: [{
      cardId: "addContactForm",
      card: {
        header: { title: "Add a contact" },
        sections:[{ widgets: CONTACT_FORM_WIDGETS.concat([{
          buttonList: { buttons: [{
            text: "Review and submit",
            onClick: { action: { function : "openConfirmation" }}
          }]}
        }])}]
      }
    }]
  };
}

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

/**
  * Validates and submits information from a dialog or card message
  * and notifies status.
  *
  * @param {Object} event the interactive event with parameters.
  * @return {Object} a message response that opens a dialog or posts a private
  *                  message.
  */
function submitForm(event) {
  const contactName = event.common.parameters["contactName"];
  // Checks to make sure the user entered a contact name.
  // If no name value detected, returns an error message.
  if (!contactName) {
    const errorMessage = "Don't forget to name your new contact!";
    if (event.dialogEventType === "SUBMIT_DIALOG") {
      return { actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "INVALID_ARGUMENT",
          userFacingMessage: errorMessage
        }}
      }};
    } else {
      return {
        privateMessageViewer: event.user,
        text: errorMessage
      };
    }
  }

  // The Chat app indicates that it received form data from the dialog or card.
  // Sends private text message that confirms submission.
  const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "OK",
          userFacingMessage: "Success " + contactName
        }}
      }
    }
  } else {
    return {
      actionResponse: { type: "NEW_MESSAGE" },
      privateMessageViewer: event.user,
      text: confirmationMessage
    };
  }
}

/**
 * Extracts form input value for a given widget.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @param {String} widgetName a unique ID for the widget, specified in the widget's name field.
 * @returns the value inputted by the user, null if no value can be found.
 */
function fetchFormValue(event, widgetName) {
  const formItem = event.common.formInputs[widgetName][""];
  // For widgets that receive StringInputs data, the value input by the user.
  if (formItem.hasOwnProperty("stringInputs")) {
    const stringInput = event.common.formInputs[widgetName][""].stringInputs.value[0];
    if (stringInput != null) {
      return stringInput;
    }
  // For widgets that receive dateInput data, the value input by the user.
  } else if (formItem.hasOwnProperty("dateInput")) {
    const dateInput = event.common.formInputs[widgetName][""].dateInput.msSinceEpoch;
     if (dateInput != null) {
       return dateInput;
     }
  }

  return null;
}

/**
 * Converts date in milliseconds since epoch to user-friendly string.
 *
 * @param {Object} millis the milliseconds since epoch time.
 * @return {string} Display-friend date (English US).
 */
function convertMillisToDateString(millis) {
  const date = new Date(millis);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-US', options);
}

contactForm.gs

사용자로부터 양식 데이터를 수신하는 위젯을 포함합니다. 이러한 양식 입력 위젯은 메시지 및 대화상자에 표시되는 카드에 표시됩니다.

contactForm.gs 코드 보기

apps-script/contact-form-app/contactForm.gs

GitHub에서 보기

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

appsscript.json

채팅 앱의 Apps Script 프로젝트를 정의하고 구성하는 Apps Script 매니페스트

appsscript.json 코드 보기

apps-script/contact-form-app/appsscript.json

GitHub에서 보기

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

Cloud 프로젝트 번호 및 ID 찾기

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

   Google Cloud 콘솔로 이동

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

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

Apps Script 프로젝트 만들기

Apps Script 프로젝트를 만들어 Cloud 프로젝트와 연결하려면 다음 안내를 따르세요.

1. 다음 버튼을 클릭하여 Google Chat에서 연락처 관리 Apps Script 프로젝트를 엽니다.
   프로젝트 열기
2. info_outline 개요를 클릭합니다.
3. 개요 페이지에서 사본 만들기를 클릭합니다.

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

   1. Google Chat에서 연락처 관리 사본을 클릭합니다.

   2. 프로젝트 제목에 Contact Manager - Google Chat app을 입력합니다.

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

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에서 채팅 앱을 구성할 때 사용합니다.

1. Apps Script에서 Chat 앱의 프로젝트를 엽니다.

   Apps Script로 이동

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

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

4. 설명에 이 버전에 대한 설명(예: Test of Contact Manager)을 입력합니다.

5. 배포를 클릭합니다. Apps Script는 배포 성공을 보고하고 배포 ID를 제공합니다.

6. content_copy 복사를 클릭하여 배포 ID를 복사한 다음 완료를 클릭합니다.

Google Cloud 콘솔에서 Chat 앱 구성

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

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

   Chat API 구성으로 이동

2. 앱 이름에 Contact Manager를 입력합니다.

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

4. 설명에 Manage your personal and business contacts를 입력합니다.

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

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

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

8. 배포 ID에 Apps Script 배포를 만들 때 이전 섹션에서 복사한 Apps Script 배포 ID를 붙여넣습니다.

9. 슬래시 명령어에서 슬래시 명령어 /about 및 /addContact를 설정합니다.

   1. 슬래시 명령어 추가를 클릭하여 첫 번째 슬래시 명령어를 설정합니다.
   2. 이름에 /about를 입력합니다.
   3. 명령어 ID에 1를 입력합니다.
   4. 설명에 Learn how to use this Chat app to manage your contacts를 입력합니다.
   5. 대화상자 열기를 선택합니다.
   6. 완료를 클릭합니다.
   7. 슬래시 명령어 추가를 클릭하여 다른 슬래시 명령어를 설정합니다.
   8. 이름에 /addContact를 입력합니다.
   9. 명령어 ID에 2를 입력합니다.
   10. 설명에 Submit information about a contact를 입력합니다.
   11. 대화상자 열기를 선택합니다.
   12. 완료를 클릭합니다.

10. 공개 상태에서 YOUR DOMAIN의 특정 사용자 및 그룹에서 이 Chat 앱을 사용할 수 있도록 설정 체크박스를 선택하고 이메일 주소를 입력합니다.

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

12. 저장을 클릭합니다. 구성 저장 메시지가 표시됩니다.

이제 Chat 앱을 설치하고 Chat에서 테스트할 수 있습니다.

채팅 앱 테스트

Chat 앱을 테스트하려면 Chat 앱으로 채팅 메시지 공간을 열고 메시지를 보냅니다.

1. 신뢰할 수 있는 테스터로 추가할 때 제공한 Google Workspace 계정을 사용하여 Google Chat을 엽니다.

   Google Chat으로 이동

2. add 새 채팅을 클릭합니다.
3. 1명 이상의 사용자 추가 필드에 채팅 앱의 이름을 입력합니다.

4. 검색 결과에서 채팅 앱을 선택합니다. 채팅 메시지가 열립니다.

1. Chat 앱과의 새 채팅 메시지에 /addContact를 입력하고 Enter 키를 누릅니다.

2. 대화상자가 열리면 연락처 정보를 입력합니다.

   1. 이름 텍스트 필드에 이름을 입력합니다.
   2. Birthdate(생년월일) 날짜 선택기에서 날짜를 선택합니다.
   3. 연락처 유형에서 직장 또는 개인 라디오 버튼을 선택합니다.

3. 검토 후 제출을 클릭합니다.

4. 확인 대화상자에서 제출한 정보를 검토하고 제출을 클릭합니다. Chat 앱이 ✅ CONTACT NAME has been added to your contacts.라는 텍스트 메시지로 응답합니다.

5. 원하는 경우 다음과 같은 방법으로 문의 양식을 테스트하고 제출할 수도 있습니다.

   • /about 슬래시 명령어를 사용합니다. Chat 앱이 텍스트 메시지와 Add a contact라고 표시된 액세서리 위젯 버튼으로 답장합니다. 이 버튼을 클릭하면 문의 양식이 포함된 대화상자가 열립니다.
   • 슬래시 명령어(예: Hello) 없이 Chat 앱에 채팅 메시지를 보냅니다. Chat 앱은 문의 양식이 포함된 텍스트와 카드로 답장합니다.

삭제

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

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

   Resource Manager로 이동

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

관련 주제

• 슬래시 명령어에 응답하기
• Google Chat 사용자로부터 정보 수집 및 처리
• 양방향 대화상자 열기
• 다른 Google Chat 앱 샘플 살펴보기