รวบรวมและจัดการรายชื่อติดต่อใน Google Chat

บทแนะนำนี้แสดงวิธีสร้างแอป Google Chat ที่ช่วย ผู้ใช้ Google Chat จัดการรายชื่อติดต่อส่วนตัวและรายชื่อติดต่อทางธุรกิจ หากต้องการรวบรวมข้อมูล แอป Chat จะแจ้งให้ผู้ใช้กรอก แบบฟอร์มติดต่อในข้อความการ์ดและกล่องโต้ตอบ

ดูการทำงานของแอป Chat

ข้อกำหนดเบื้องต้น

• บัญชี Google Workspace สำหรับธุรกิจหรือองค์กร ที่มีสิทธิ์เข้าถึง Google Chat
• สร้างโปรเจ็กต์ Google Cloud

วัตถุประสงค์

• ออกแบบและสร้างอินเทอร์เฟซผู้ใช้ (UI) เป็นออบเจ็กต์ card และแสดง UI ในข้อความและกล่องโต้ตอบ
• รับและประมวลผลข้อมูลที่ผู้ใช้ส่งโดยใช้วิดเจ็ตอินพุตแบบฟอร์ม
• ตอบกลับคำสั่งด้วยข้อความที่มีข้อความ การ์ด และวิดเจ็ตอุปกรณ์เสริม

สถาปัตยกรรม

แอป Chat สร้างขึ้นใน Google Apps Script (เป็นส่วนเสริมของ Google Workspace ที่ขยายการทำงานของ Google Chat) และตอบสนองต่อการโต้ตอบของผู้ใช้ (onMessage, onAppCommand และการคลิกปุ่มที่เรียกใช้ openInitialDialog, openConfirmationDialog และ submitForm) เพื่อประมวลผลและตอบสนองต่อผู้ใช้ Chat

ต่อไปนี้เป็นวิธีที่ผู้ใช้อาจโต้ตอบกับแอป Chat โดยทั่วไป

1. ผู้ใช้เปิดข้อความส่วนตัวด้วยแอป Chat หรือ เพิ่มแอป Chat ลงในพื้นที่ทำงานที่มีอยู่

2. แอป Chat จะแจ้งให้ผู้ใช้เพิ่มรายชื่อติดต่อโดยสร้างและแสดงแบบฟอร์มติดต่อเป็นออบเจ็กต์ card หากต้องการแสดงแบบฟอร์มติดต่อ แอป Chat จะตอบกลับผู้ใช้ด้วยวิธีต่อไปนี้

   • ตอบกลับการ @พูดถึงและข้อความส่วนตัว (onMessage) ด้วยการ์ด ข้อความที่มีแบบฟอร์มติดต่อ
   • ตอบกลับคำสั่งเครื่องหมายทับ /addContact (onAppCommand) โดยเปิดกล่องโต้ตอบพร้อมแบบฟอร์มติดต่อ
   • ตอบกลับคำสั่งเครื่องหมายทับ /about (onAppCommand) ด้วยข้อความที่มีปุ่มเพิ่มรายชื่อติดต่อที่ผู้ใช้คลิกเพื่อเรียกใช้ openInitialDialog และเปิดกล่องโต้ตอบที่มีแบบฟอร์มติดต่อได้

3. เมื่อเห็นแบบฟอร์มติดต่อ ผู้ใช้จะป้อนข้อมูลติดต่อ ลงในช่องและวิดเจ็ตต่อไปนี้

   • ชื่อและนามสกุล: ว textInput ิดเจ็ตที่รับสตริง
   • วันเกิด: วิดเจ็ต a dateTimePicker ที่ยอมรับเฉพาะวันที่
   • ประเภทผู้ติดต่อ: a selectionInput วิดเจ็ตของปุ่มตัวเลือกที่ช่วยให้ผู้ใช้เลือกและส่งค่าสตริงเดียว (Personal หรือ Work)
   • ปุ่มตรวจสอบและส่ง: a buttonList อาร์เรย์ที่มีวิดเจ็ต button ซึ่งผู้ใช้คลิกเพื่อส่งค่าที่ ป้อน

4. แอป Google Chat จะเรียกใช้ openConfirmationDialog เพื่อประมวลผล ค่าที่ผู้ใช้ป้อน และแสดงค่าใน การ์ดการยืนยัน

5. ผู้ใช้ตรวจสอบการ์ดยืนยันและคลิกปุ่มส่ง เพื่อเรียกใช้ submitForm และสรุปข้อมูลติดต่อ

6. แอป Google Chat จะส่งข้อความส่วนตัวเพื่อ ยืนยันการส่ง

เตรียมสภาพแวดล้อม

ส่วนนี้แสดงวิธีกำหนดค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google สำหรับ แอป Chat

เปิดโปรเจ็กต์ที่อยู่ในระบบคลาวด์ในคอนโซล Google API

หากยังไม่ได้เปิด ให้เปิดโปรเจ็กต์ที่อยู่ในระบบคลาวด์ที่คุณต้องการใช้ สำหรับตัวอย่างนี้

1. ไปที่หน้าเลือกโปรเจ็กต์ในคอนโซล Google API

   เลือกโปรเจ็กต์ที่อยู่ในระบบคลาวด์

2. เลือกโปรเจ็กต์ Google Cloud ที่ต้องการใช้ หรือคลิกสร้างโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ หากสร้างโปรเจ็กต์ Google Cloud คุณอาจต้องเปิดการเรียกเก็บเงินสำหรับโปรเจ็กต์

ตั้งค่าการตรวจสอบสิทธิ์และการให้สิทธิ์

แอป Google Chat กำหนดให้คุณต้องกำหนดค่าหน้าจอขอความยินยอม OAuth เพื่อให้ผู้ใช้สามารถให้สิทธิ์แอปของคุณในแอปพลิเคชัน Google Workspace ซึ่งรวมถึง Google Chat ได้

ในบทแนะนำนี้ คุณจะติดตั้งใช้งานแอป Chat ที่มีไว้สำหรับการทดสอบและการใช้งานภายในเท่านั้น ดังนั้นจึงใช้ข้อมูลตัวยึดตำแหน่งสำหรับหน้าจอขอความยินยอมได้ ก่อนเผยแพร่แอป Chat ให้แทนที่ข้อมูลตัวยึดตำแหน่งด้วยข้อมูลจริง

1. ใน คอนโซล Google API ให้ไปที่เมนู menu > แพลตฟอร์มการตรวจสอบสิทธิ์ของ Google > การสร้างแบรนด์

   ไปที่การสร้างแบรนด์

2. หากกําหนดค่าแพลตฟอร์ม Google Auth แล้ว คุณสามารถกําหนดค่าการตั้งค่าหน้าจอขอความยินยอม OAuth ต่อไปนี้ได้ในการสร้างแบรนด์ กลุ่มเป้าหมาย และการเข้าถึงข้อมูล หากเห็นข้อความที่ระบุว่า ยังไม่ได้กำหนดค่าแพลตฟอร์ม Google Auth ให้คลิกเริ่มต้นใช้งาน

   1. ในส่วนข้อมูลแอป ในชื่อแอป ให้พิมพ์ Contact Manager
   2. ในอีเมลสนับสนุนสำหรับผู้ใช้ ให้เลือกอีเมลของคุณหรือ Google Group ที่เหมาะสม
   3. คลิกถัดไป
   4. ในส่วนกลุ่มเป้าหมาย ให้เลือกภายใน หากเลือกภายในไม่ได้ ให้เลือกภายนอก
   5. คลิกถัดไป
   6. ในส่วนข้อมูลติดต่อ ให้ป้อนอีเมลที่คุณต้องการ รับการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงในโปรเจ็กต์
   7. คลิกถัดไป
   8. ในส่วนเสร็จสิ้น ให้อ่าน นโยบายข้อมูลผู้ใช้ของบริการ Google API และหากยอมรับ ให้เลือก ฉันยอมรับบริการ Google API: นโยบายข้อมูลผู้ใช้
   9. คลิกต่อไป
   10. คลิกสร้าง
   11. หากเลือกภายนอกสำหรับประเภทผู้ใช้ ให้เพิ่มผู้ใช้ทดสอบโดยทำดังนี้
       1. คลิกกลุ่มเป้าหมาย
       2. ในส่วนผู้ใช้ทดสอบ ให้คลิกเพิ่มผู้ใช้
       3. ป้อนอีเมลของคุณและผู้ใช้ทดสอบอื่นๆ ที่ได้รับอนุญาต แล้วคลิกบันทึก

สร้างและติดตั้งใช้งานแอป Chat

ในส่วนต่อไปนี้ คุณจะสร้างและอัปเดตโปรเจ็กต์ Apps Script ด้วยโค้ดของแอปพลิเคชัน (Code.gs และ appsscript.json) สำหรับแอป Chat

หรือจะดูทั้งโปรเจ็กต์ใน GitHub ก็ได้

ดูใน GitHub

ต่อไปนี้คือภาพรวมของแต่ละไฟล์

Code.gs

จัดการตรรกะของแอปทั้งหมด รวมถึงการโต้ตอบของผู้ใช้ (onMessage, onAppCommand, openInitialDialog, openConfirmationDialog และ submitForm) และวิดเจ็ตอินพุตแบบฟอร์มที่แสดงในการ์ดในข้อความและกล่องโต้ตอบ

ดูรหัส Code.gs

apps-script/chat/contact-form-app/Code.gs

ดูใน GitHub

/**
 * Copyright 2025 Google LLC
 *
 * 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 in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} response that handles dialogs.
 */
function onMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [
      { buttonList: { buttons: [{
        text: "ADD CONTACT",
        onClick: { action: {
          function: "openInitialDialog",
          interaction: "OPEN_DIALOG"
        }}
      }]}}
    ]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ 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 }
      ]
    }},
    { buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: { function : "openConfirmationDialog" }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  const birthdate = event.commonEventObject.formInputs["contactBirthdate"].dateInput.msSinceEpoch;
  const type = event.commonEventObject.formInputs["contactType"].stringInputs.value[0];
  // Display the input values for confirmation
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textParagraph: { text: "Confirm contact information and submit:" }},
    { textParagraph: { text: "<b>Name:</b> " + name }},
    { textParagraph: { text: "<b>Birthday:</b> " + new Date(birthdate) }},
    { textParagraph: { text: "<b>Type:</b> " + type }},
    { buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        function: "submitDialog",
        // Pass input values as parameters for last dialog step (submission)
        parameters: [
          { key: "contactName", value: name },
          { key: "contactBirthdate", value: birthdate },
          { key: "contactType", value: type }
        ]
      }}
    }]}}
  ]}]}}]}};
}

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} close the dialog with a status in text notification or message.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
  }}}}};
}

appsscript.json

ไฟล์ Manifest ของ Apps Script ที่กำหนดและกำหนดค่าโปรเจ็กต์ Apps Script สำหรับ แอป Chat

ดูรหัส appsscript.json

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

ดูใน GitHub

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Contact Form app",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/contact-icon.png"
    },
    "chat": {}
  }
}

สร้างโปรเจ็กต์ Apps Script

วิธีสร้างโปรเจ็กต์ Apps Script จากไฟล์ Code.gs และ appsscript.json

1. ไปที่ Google Apps Script แล้วคลิกโปรเจ็กต์ ใหม่

2. ตั้งชื่อโปรเจ็กต์ Apps Script โดยทำดังนี้

   1. คลิกโปรเจ็กต์ที่ไม่มีชื่อ

   2. ในชื่อโปรเจ็กต์ ให้พิมพ์ Contact Manager - Google Chat app

   3. คลิกเปลี่ยนชื่อ

3. แทนที่เนื้อหาของ Code.gs ด้วยโค้ดตัวอย่าง Code.gs ด้านบน

4. คลิกการตั้งค่าโปรเจ็กต์ แล้วเลือกแสดงไฟล์ Manifest "appsscript.json" ในเครื่องมือแก้ไข

5. กลับไปที่เอดิเตอร์ แล้วแทนที่เนื้อหาของ appsscript.json ด้วย โค้ดไฟล์ Manifest appsscript.json ด้านบน จากนั้นบันทึกโปรเจ็กต์

ในอนาคต หากต้องการใช้ Google API บางอย่างหรือเผยแพร่แอป คุณต้องเชื่อมโยงโปรเจ็กต์ที่อยู่ในระบบคลาวด์กับโปรเจ็กต์ Apps Script สำหรับคำแนะนำนี้ คุณไม่จำเป็นต้องดำเนินการดังกล่าว ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google

สร้างการติดตั้งใช้งาน Apps Script

เมื่อวางโค้ดทั้งหมดแล้ว ให้ทําการติดตั้งใช้งานโปรเจ็กต์ Apps Script คุณใช้รหัสการติดตั้งใช้งานเมื่อกำหนดค่า แอป Chat ใน Google Cloud

1. ใน Apps Script ให้เปิดโปรเจ็กต์ของแอป Chat

   ไปที่ Apps Script

2. คลิกติดตั้งใช้งาน > การติดตั้งใช้งานใหม่

3. หากยังไม่ได้เลือกส่วนเสริม ให้คลิกประเภทการติดตั้งใช้งาน ข้างเลือกประเภท แล้วเลือกส่วนเสริม

4. ในคำอธิบาย ให้ป้อนคำอธิบายสำหรับเวอร์ชันนี้ เช่น Test of Contact Manager

5. คลิกติดตั้งใช้งาน Apps Script จะรายงานการติดตั้งใช้งานที่สำเร็จ และระบุรหัสการติดตั้งใช้งาน

6. คลิกcontent_copy คัดลอกเพื่อคัดลอก รหัสการติดตั้งใช้งาน แล้วคลิกเสร็จสิ้น

กำหนดค่าแอป Chat ในคอนโซล Google API

ส่วนนี้แสดงวิธีกำหนดค่า Google Chat API ในคอนโซล Google API พร้อมข้อมูลเกี่ยวกับแอป Chat รวมถึง รหัสของการติดตั้งใช้งานที่คุณเพิ่งสร้างจากโปรเจ็กต์ Apps Script

1. ใน คอนโซล Google API ให้คลิกเมนู menu > API และบริการ > API และบริการที่เปิดใช้ > 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. คลิกปุ่มเปิด/ปิดเปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟไปที่ตำแหน่งเปิด

6. ในส่วนฟังก์ชันการทำงาน ให้เลือกเข้าร่วมพื้นที่ทำงานและการสนทนากลุ่ม

7. ในส่วนการตั้งค่าการเชื่อมต่อ ให้เลือก Apps Script

8. ในรหัสการทำให้ใช้งานได้ ให้วางรหัสการทำให้ใช้งานได้ Apps Script ที่คัดลอกไว้ในส่วนก่อนหน้าเมื่อสร้างการทำให้ใช้งานได้ Apps Script

9. ในส่วนทริกเกอร์ ให้กำหนดค่าฟังก์ชันที่ตอบสนองต่อการโต้ตอบของผู้ใช้

   • สำหรับทริกเกอร์ข้อความ ให้ป้อน onMessage
   • สำหรับทริกเกอร์คำสั่งแอป ให้ป้อน onAppCommand

10. ในส่วนคำสั่ง ให้ตั้งค่าคำสั่งเครื่องหมายทับ /about และ /addContact ดังนี้

    1. คลิกเพิ่มคำสั่งเพื่อตั้งค่าคำสั่งเครื่องหมายทับแรก
    2. ในรหัสคำสั่ง ให้พิมพ์ 1
    3. ในส่วนคำอธิบาย ให้พิมพ์ Learn how to use this Chat app to manage your contacts
    4. ในส่วนประเภทคำสั่ง ให้เลือก Slash command
    5. ในชื่อคำสั่งเครื่องหมายทับ ให้พิมพ์ /about
    6. คลิกเสร็จสิ้น
    7. คลิกเพิ่มคำสั่งเพื่อตั้งค่าคำสั่งเครื่องหมายทับอีกคำสั่ง
    8. ในรหัสคำสั่ง ให้พิมพ์ 2
    9. ในส่วนคำอธิบาย ให้พิมพ์ Submit information about a contact
    10. ในส่วนประเภทคำสั่ง ให้เลือก Slash command
    11. ในชื่อคำสั่งเครื่องหมายทับ ให้พิมพ์ /addContact
    12. เลือกเปิดกล่องโต้ตอบ
    13. คลิกเสร็จสิ้น

11. ในส่วนระดับการมองเห็น ให้เลือกช่องทําเครื่องหมาย ทําให้แอป Chat นี้พร้อมใช้งานสําหรับบุคคลและกลุ่มที่เฉพาะเจาะจงใน YOUR DOMAIN แล้วป้อนอีเมล

12. ในส่วนบันทึก ให้เลือกบันทึกข้อผิดพลาดไปยังการบันทึก

13. คลิกบันทึก ข้อความ "บันทึกการกำหนดค่าแล้ว" จะปรากฏขึ้น

แอป Chat พร้อมให้ติดตั้งและทดสอบใน Chat แล้ว

ทดสอบแอป Chat

หากต้องการทดสอบแอป Chat ให้เปิดพื้นที่ข้อความส่วนตัวด้วย แอป Chat แล้วส่งข้อความโดยทำดังนี้

1. เปิด Google Chat โดยใช้บัญชี Google Workspace ที่คุณ ระบุไว้เมื่อเพิ่มตัวเองเป็นผู้ทดสอบที่เชื่อถือได้

   ไปที่ Google Chat

2. คลิก add แชทใหม่
3. ในช่องเพิ่มบุคคลอย่างน้อย 1 คน ให้พิมพ์ชื่อแอป Chat

4. เลือกแอป Chat จากผลการค้นหา ข้อความส่วนตัวจะเปิดขึ้น

1. ในข้อความส่วนตัวใหม่กับแอป Chat ให้พิมพ์ /addContact แล้วกด Enter

2. ในกล่องโต้ตอบที่เปิดขึ้น ให้ป้อนข้อมูลติดต่อดังนี้

   1. ป้อนชื่อในช่องข้อความชื่อและนามสกุล
   2. เลือกวันที่ในเครื่องมือเลือกวันที่วันเกิด
   3. ในส่วนประเภทรายชื่อติดต่อ ให้เลือกปุ่มตัวเลือกที่ทำงานหรือส่วนตัว

3. คลิกตรวจสอบและส่ง

4. ในกล่องโต้ตอบการยืนยัน ให้ตรวจสอบข้อมูลที่คุณส่ง แล้วคลิกส่ง แอป Chat จะตอบกลับด้วยข้อความที่ระบุว่า ✅ CONTACT NAME has been added to your contacts.

5. นอกจากนี้ คุณยังทดสอบและส่งแบบฟอร์มติดต่อได้ด้วยวิธีต่อไปนี้ (ไม่บังคับ)

   • ใช้คำสั่งเครื่องหมายทับ /about แอปแชทจะตอบกลับด้วยข้อความและปุ่มวิดเจ็ตอุปกรณ์เสริมที่ระบุว่า Add a contact คุณคลิกปุ่มเพื่อเปิดกล่องโต้ตอบที่มี แบบฟอร์มติดต่อได้
   • ส่งข้อความส่วนตัวถึงแอป Chat โดยไม่ต้องใช้ คำสั่งเครื่องหมายทับ เช่น Hello แอป Chat จะตอบกลับด้วยข้อความและการ์ดที่มีแบบฟอร์มติดต่อ

ล้างข้อมูล

เราขอแนะนำให้คุณลบโปรเจ็กต์ที่อยู่ในระบบคลาวด์เพื่อหลีกเลี่ยงการเรียกเก็บเงินจากบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในบทแนะนำนี้

1. ในคอนโซล Google API ให้ไปที่หน้าจัดการทรัพยากร คลิก เมนู menu > IAM และผู้ดูแลระบบ > จัดการทรัพยากร

   ไปที่เครื่องมือจัดการทรัพยากร

2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิก ลบ delete
3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบ โปรเจ็กต์

หัวข้อที่เกี่ยวข้อง

• ตอบกลับคำสั่ง
• รวบรวมและประมวลผลข้อมูลจากผู้ใช้ Google Chat
• เปิดกล่องโต้ตอบแบบอินเทอร์แอกทีฟ
• สำรวจตัวอย่างแอปใน Chat อื่นๆ ของ Google Chat