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

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

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

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

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

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

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

สถาปัตยกรรม

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

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

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

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

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

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

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

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

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

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

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

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

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

คอนโซล Google Cloud

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

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

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

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

  3. ในช่องสถานที่ ให้คลิกเรียกดูเพื่อแสดงสถานที่ที่อาจเป็นไปได้สำหรับ โปรเจ็กต์ จากนั้นคลิกเลือก
  4. คลิกสร้าง Google Cloud Console จะนำคุณไปยังหน้าแดชบอร์ดและสร้างโปรเจ็กต์ภายในไม่กี่นาที

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 Console ให้ไปที่เมนู > > การสร้างแบรนด์

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

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

    1. ในส่วนข้อมูลแอป ในชื่อแอป ให้พิมพ์ Contact Manager
    2. ในอีเมลสำหรับการสนับสนุนผู้ใช้ ให้เลือกอีเมลหรือ กลุ่ม Google ที่เหมาะสม
    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.
  const errorMessage = "Don't forget to name your new contact!";
  if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  }
  if (!contactName) {
    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
        }}
      }
    };
  }
  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": {}
}

ค้นหาหมายเลขและรหัสโปรเจ็กต์ Cloud

  1. ไปที่โปรเจ็กต์ Cloud ใน Google Cloud Console

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

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

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

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

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

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

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

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

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

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

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

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

สร้างการทำให้ใช้งานได้ของ Apps Script

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

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

    ไปที่ Apps Script

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

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

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

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

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

กำหนดค่าแอป Chat ใน Google Cloud Console

ส่วนนี้จะแสดงวิธีกำหนดค่า 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. ในส่วนฟังก์ชันการทำงาน ให้เลือกเข้าร่วมพื้นที่ทำงานและการสนทนากลุ่ม

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

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

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

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

  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. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบ โปรเจ็กต์