รวบรวมและประมวลผลข้อมูลจากผู้ใช้ Google Chat

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

แอปใน Chat จะขอข้อมูลจากผู้ใช้เพื่อดำเนินการในหรือนอก Chat ซึ่งรวมถึงการดำเนินการต่อไปนี้

• กำหนดการตั้งค่า เช่น อนุญาตให้ผู้ใช้ปรับแต่งการตั้งค่าการแจ้งเตือน หรือกำหนดค่าและเพิ่มแอป Chat ไปยังพื้นที่ทำงานอย่างน้อย 1 แห่ง
• สร้างหรืออัปเดตข้อมูลในแอปพลิเคชันอื่นๆ ของ Google Workspace สำหรับ เช่น ให้ผู้ใช้สร้างกิจกรรมใน Google ปฏิทิน
• อนุญาตให้ผู้ใช้เข้าถึงและอัปเดตทรัพยากรในแอปหรือบริการเว็บอื่นๆ สำหรับ เช่น แอปใน Chat จะช่วยให้ผู้ใช้อัปเดต สถานะของตั๋วสนับสนุนโดยตรงจากพื้นที่ใน Chat

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

• บริการ HTTP กับ Google Cloud Functions
• สคริปต์ Google Apps
• Google Cloud Dialogflow CX
• Google Cloud Pub/Sub

สร้างแบบฟอร์มโดยใช้การ์ด

แอปใน Chat จะออกแบบแบบฟอร์มและอินพุตของแบบฟอร์ม รวมถึงสร้างเป็นการ์ดเพื่อรวบรวมข้อมูล หากต้องการแสดงการ์ดต่อผู้ใช้ แอปใน Chat สามารถใช้อินเทอร์เฟซ Chat ต่อไปนี้

• ข้อความ ที่มีการ์ดอย่างน้อย 1 ใบ
• หน้าแรก ซึ่งเป็นการ์ดที่ปรากฏขึ้นจากแท็บหน้าแรกใน ข้อความด้วยแอป Chat
• กล่องโต้ตอบ ซึ่งเป็นการ์ดที่เปิด ในหน้าต่างใหม่จากข้อความและหน้าแรก

แอปแชทสามารถสร้างการ์ดโดยใช้วิดเจ็ตต่อไปนี้

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

  • อินพุตข้อความ (textInput) สำหรับข้อความรูปแบบอิสระหรือข้อความที่แนะนำ
  • อินพุตการเลือก (selectionInput) คือองค์ประกอบ UI ที่เลือกได้ เช่น ช่องทําเครื่องหมาย ปุ่มตัวเลือก และเมนูแบบเลื่อนลง วิดเจ็ตการป้อนข้อมูลแบบเลือกยังสร้างรายการจากแหล่งข้อมูลแบบคงที่หรือแบบไดนามิกได้ด้วย เช่น ผู้ใช้สามารถเลือกจากรายการพื้นที่ใน Chat ของตน
  • เครื่องมือเลือกวันที่และเวลา (dateTimePicker) สำหรับรายการวันที่และเวลา

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

การ์ดต่อไปนี้จะแสดงการ์ดที่ประกอบด้วยวันที่ 3 ประเภท และ ข้อมูลเวลา:

ดูตัวอย่างเพิ่มเติมของวิดเจ็ตแบบอินเทอร์แอกทีฟที่ใช้รวบรวมได้ ดูข้อมูลได้ที่ ออกแบบการ์ดหรือกล่องโต้ตอบแบบอินเทอร์แอกทีฟ

รับข้อมูลจากวิดเจ็ตแบบอินเทอร์แอกทีฟ

เมื่อใดก็ตามที่ผู้ใช้คลิกปุ่ม แอป Chat จะได้รับCARD_CLICKEDเหตุการณ์การโต้ตอบที่มีข้อมูลเกี่ยวกับการโต้ตอบ เพย์โหลดของ CARD_CLICKEDเหตุการณ์การโต้ตอบมีออบเจ็กต์ common.formInputs ที่มีค่าใดๆ ที่ผู้ใช้ป้อน

คุณดึงค่าจากออบเจ็กต์ได้ common.formInputs.WIDGET_NAME โดยที่ WIDGET_NAME คือฟิลด์ name ที่คุณระบุไว้สำหรับวิดเจ็ต ระบบจะแสดงผลค่าเป็นประเภทข้อมูลเฉพาะสำหรับวิดเจ็ต (แสดงเป็นออบเจ็กต์ Inputs) ในตัวอย่างต่อไปนี้ การ์ดจะรวบรวมข้อมูลติดต่อโดยใช้ข้อความ อินพุต เครื่องมือเลือกวันที่และเวลา และวิดเจ็ตอินพุตการเลือก

{
  "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
      }
    ]
  }
}

จัดการเหตุการณ์การโต้ตอบ

เมื่อผู้ใช้ป้อนข้อมูลลงในการ์ดหรือกล่องโต้ตอบ แอป Chat จะได้รับแอป Chat CARD_CLICKED เหตุการณ์การโต้ตอบที่มีค่าที่ผู้ใช้ป้อน

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

{
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

{
  "type": "CARD_CLICKED",
  "common": { "formInputs": {
    "contactName": { "": { "stringInputs": {
      "value": ["Kai 0"]
    }}},
    "contactBirthdate": { "": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }}},
      "contactType": { "": { "stringInputs": {
      "value": ["Personal"]
    }}}
  }}
}

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

โอนข้อมูลไปยังการ์ดอื่น

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

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

หากต้องการโอนข้อมูลที่ป้อนจากการ์ดเริ่มต้น ให้สร้างbutton วิดเจ็ตที่มี actionParameters ซึ่งมี name ของวิดเจ็ตและค่าที่ผู้ใช้ป้อน ดังที่แสดงในตัวอย่างต่อไปนี้

{
  "buttonList": {
    "buttons": [{
      "text": "Submit",
      "onClick": {
        "action": {
          "function": "openNextCard",
          "parameters": [{
            "key": "WIDGET_NAME",
            "value": "USER_INPUT_VALUE"
          }]
        }
      }
    }]
  }
}

โดยที่ WIDGET_NAME คือ name ของวิดเจ็ต และ USER_INPUT_VALUE คือสิ่งที่ผู้ใช้ป้อน เช่น สําหรับอินพุตข้อความที่รวบรวมชื่อบุคคล ชื่อวิดเจ็ตคือ contactName และค่าตัวอย่างคือ Kai O

เมื่อผู้ใช้คลิกปุ่ม แอป Chat ของคุณจะได้รับ เหตุการณ์การโต้ตอบ CARD_CLICKED เหตุการณ์ หากต้องการดึงค่า คุณสามารถใช้ event.common.parameters ออบเจ็กต์

ตัวอย่างต่อไปนี้แสดงวิธีส่งพารามิเตอร์ที่มีข้อมูลอินพุตของผู้ใช้ไปยังฟังก์ชันที่เปิดการ์ดถัดไป

// Respond to button clicks on cards or dialogs
if (event.type === "CARD_CLICKED") {

  // Open another card.
  if (event.common.invokedFunction === "openNextCard") {
    const parameters = event.common.parameters;
    openNextCard(event);
  }
}

  # Respond to button clicks on cards or dialogs
  if request.get('type') == 'CARD_CLICKED':
    if invoked_function := request.get('common', dict()).get('invokedFunction'):
      if invoked_function == 'open_next_card':
        parameters = request.get('common', dict()).get('parameters'),
        return open_next_card(parameters)

// Respond to button clicks on cards or dialogs
function onCardClick(event) {
  if (event.common.invokedFunction === "openNextCard") {
    const parameters = event.common.parameters;
    return openNextCard(parameters);
  }
}

ตอบกลับการส่งแบบฟอร์ม

หลังจากได้รับข้อมูลจาก ข้อความการ์ดหรือกล่องโต้ตอบ แอป Chat ตอบกลับด้วยการรับทราบใบเสร็จหรือ ที่แสดงข้อผิดพลาด

ในตัวอย่างต่อไปนี้ แอป Chat ส่งข้อความเพื่อยืนยันว่าได้รับแบบฟอร์มที่ส่งจากข้อความการ์ดเรียบร้อยแล้ว

function submitCardForm(contactName, contactBirthdate, contactType) {
    return {
      "text": "You entered the following contact information:\n\n" +
      "*Name:* " + contactName + "\n" +
      "*Birthdate:* " + contactBirthdate + "\n" +
      "*Type:* " + contactType
      }
}

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

แก้ปัญหา

เมื่อแอป Google Chat หรือการ์ดแสดงข้อผิดพลาด อินเทอร์เฟซของ Chat จะแสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาด แต่แอป Chat หรือการ์ดให้ผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความการ์ดอาจไม่ปรากฏ

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

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

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