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

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

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

  • แบบฟอร์มติดต่อจากคำสั่งเครื่องหมายทับ
    รูปที่ 1 แอป Chat ตอบสนองต่อคำสั่งขีดกลาง /about ด้วยข้อความและปุ่มที่เปิดแบบฟอร์มติดต่อ
  • แบบฟอร์มติดต่อในกล่องโต้ตอบ
    รูปที่ 2 แอป Chat จะเปิดกล่องโต้ตอบที่ผู้ใช้ป้อนข้อมูลเกี่ยวกับรายชื่อติดต่อได้
  • กล่องโต้ตอบยืนยันและตรวจสอบ
    รูปที่ 3 แอป Chat จะแสดงกล่องโต้ตอบการยืนยันเพื่อให้ผู้ใช้ตรวจสอบและยืนยันข้อมูลก่อนส่ง
  • SMS ที่ยืนยันรายชื่อติดต่อใหม่
    รูปที่ 4 หลังจากผู้ใช้ส่งแบบฟอร์มแล้ว แอป Chat จะส่งข้อความส่วนตัวเพื่อยืนยันการส่ง
  • แบบฟอร์มติดต่อจากข้อความการ์ด
    รูปที่ 5 นอกจากนี้ แอป Chat ยังแจ้งให้ผู้ใช้เพิ่มรายชื่อติดต่อจากการ์ดในข้อความด้วย

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

  • บัญชี Google Workspace รุ่น Business หรือ Enterprise ที่มีสิทธิ์เข้าถึง Google Chat

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

สถาปัตยกรรม

แอป Chat สร้างขึ้นใน Google Apps Script และใช้เหตุการณ์การโต้ตอบเพื่อประมวลผลและตอบกลับผู้ใช้ Chat

ต่อไปนี้คือวิธีที่ผู้ใช้อาจโต้ตอบกับแอปแชทตามปกติ

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

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

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

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

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

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

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

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

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

ส่วนนี้จะแสดงวิธีสร้างและกําหนดค่าโปรเจ็กต์ Google Cloud สําหรับแอป Chat

สร้างโปรเจ็กต์ Google Cloud

คอนโซล Google Cloud

  1. ในคอนโซล Google Cloud ให้ไปที่เมนู > IAM และผู้ดูแลระบบ > สร้างโปรเจ็กต์

    ไปที่สร้างโปรเจ็กต์

  2. ป้อนชื่อที่สื่อความหมายสำหรับโปรเจ็กต์ในช่องชื่อโปรเจ็กต์

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

  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
     แทนที่ PROJECT_ID ด้วยการตั้งค่ารหัสสําหรับโปรเจ็กต์ที่ต้องการสร้าง

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

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

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

  1. ในคอนโซล Google Cloud ให้ไปที่เมนู > > การสร้างแบรนด์

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

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

    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 ทั้งหมดซึ่งมีโค้ดแอปพลิเคชันที่จำเป็นทั้งหมดสำหรับแอป Chat คุณจึงไม่ต้องคัดลอกและวางไฟล์แต่ละไฟล์

คุณดูทั้งโปรเจ็กต์ใน GitHub ได้ด้วย (ไม่บังคับ)

ดูใน GitHub

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

main.gs

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

ดูรหัส main.gs

apps-script/contact-form-app/main.gs
/**
 * 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
/**
 * 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

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

ดูรหัส appsscript.json

apps-script/contact-form-app/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

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

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

    ไปที่คอนโซล Google Cloud

  2. คลิกการตั้งค่าและยูทิลิตี > การตั้งค่าโปรเจ็กต์

  3. จดค่าในช่องหมายเลขโปรเจ็กต์และรหัสโปรเจ็กต์ไว้ คุณจะใช้ส่วนต่อไปนี้ได้

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

วิธีสร้างโปรเจ็กต์ Apps Script และเชื่อมต่อกับโปรเจ็กต์ใน Cloud

  1. คลิกปุ่มต่อไปนี้เพื่อเปิดโปรเจ็กต์ Apps Script จัดการรายชื่อติดต่อใน Google Chat
    เปิดโปรเจ็กต์
  2. คลิก ภาพรวม
  3. ในหน้าภาพรวม ให้คลิก ไอคอนสำหรับทำสำเนา ทำสำเนา

  4. ตั้งชื่อสําเนาโปรเจ็กต์ Apps Script ดังนี้

    1. คลิกสำเนาของ "จัดการรายชื่อติดต่อใน Google Chat"

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

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

ตั้งค่าโปรเจ็กต์ Cloud ของโปรเจ็กต์ Apps Script

  1. ในโปรเจ็กต์ Apps Script ให้คลิก ไอคอนการตั้งค่าโปรเจ็กต์ Project Settings
  2. ในส่วนโปรเจ็กต์ Google Cloud Platform (GCP) ให้คลิกเปลี่ยนโปรเจ็กต์
  3. ในหมายเลขโปรเจ็กต์ GCP ให้วางหมายเลขโปรเจ็กต์ที่อยู่ในระบบคลาวด์
  4. คลิกตั้งค่าโปรเจ็กต์ โปรเจ็กต์ Cloud และโปรเจ็กต์ Apps Script เชื่อมต่อกันแล้ว

สร้าง Apps Script ที่นำไปใช้งาน

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

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

    ไปที่ Apps Script

  2. คลิกทำให้ใช้งานได้ > ทำให้ใช้งานได้ใหม่

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

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

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

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

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

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

  1. ในคอนโซล Google Cloud ให้คลิกเมนู > ผลิตภัณฑ์เพิ่มเติม > 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. คลิกปุ่มเปิด/ปิดเปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟเป็นเปิด

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

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

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

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

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

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

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

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

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

ทดสอบแอป Chat

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

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

    ไปที่ Google Chat

  2. คลิก แชทใหม่
  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 จะตอบกลับด้วยข้อความและการ์ดที่มีแบบฟอร์มติดต่อ

ล้างข้อมูล

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

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

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

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