ประมวลผลข้อมูลที่ผู้ใช้ป้อน

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

  • TextInput สำหรับการป้อนข้อความรูปแบบอิสระที่รองรับคำแนะนำ
  • SelectionInput สำหรับรายการและเมนู เช่น ช่องทำเครื่องหมาย ปุ่มตัวเลือก และเมนูแบบเลื่อนลง
  • DateTimePicker สำหรับรายการวันที่และเวลา

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

เปิดเครื่องมือสร้างการ์ด

การรับข้อมูลจากผู้ใช้ทำให้แอป Chat ทำสิ่งต่างๆ ได้ เช่น ดังต่อไปนี้

  • อัปเดตเคสบริการลูกค้า
  • สร้างคำสั่งซื้องาน
  • ตรวจสอบสิทธิ์ด้วยบริการเว็บ

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

Node.js

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟที่ใช้บริการ HTTP ให้ทำการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

Apps Script

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟใน Apps Script โปรดกรอกข้อมูลในการเริ่มต้นอย่างรวดเร็วนี้

Python

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟที่ใช้บริการ HTTP ให้ทำการเริ่มต้นอย่างรวดเร็วนี้ให้เสร็จสมบูรณ์

วิธีการทำงานของการรับข้อมูล

แอป Chat แสดงข้อมูลแก่ผู้ใช้เป็น ข้อความโต้ตอบหรือการ์ด ในตัวอย่างนี้ กล่องโต้ตอบจะขอให้ผู้ใช้ป้อน เกี่ยวกับผู้ติดต่อโดยใช้ TextInput และ SelectionInput วิดเจ็ต:

กล่องโต้ตอบที่มีวิดเจ็ตต่างๆ มากมาย

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

  • EventType คือ CARD_CLICKED
  • DialogEventType เป็น SUBMIT_DIALOG (สำหรับกล่องโต้ตอบเท่านั้น)

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

แอปของคุณเข้าถึงค่าแรกที่ผู้ใช้ป้อนได้ที่ event.common.formInputs.NAME.stringInputs.value[0], โดยที่ NAME คือฟิลด์ name ของ วิดเจ็ต TextInput

รับข้อมูลจากการ์ด

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

JSON

{
  "type": enum (EventType),
  "eventTime": string,
  "threadKey": string,
  "message": {
    object (Message)
  },
  "user": {
    object (User)
  },
  "space": {
    object (Space)
  },
  "action": {
    object (FormAction)
  },
  "configCompleteRedirectUrl": string,
  "common": {

    // Represents user data entered in a card.
    "formInputs": {

      // Represents user data entered for a specific field in a card.
      "NAME": {

        // Represents string data entered in a card, like text input fields
        // and check boxes.
        "stringInputs": {

          // An array of strings entered by the user in a card.
          "value": [
            string
          ]
        }
      }
    },
    "parameters": {
      string: string,
      ...
    },
    "invokedFunction": string
  }
}

รับข้อมูลจากกล่องโต้ตอบ

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

JSON

{
  "type": enum (EventType),
  "eventTime": string,
  "threadKey": string,
  "message": {
    object (Message)
  },
  "user": {
    object (User)
  },
  "space": {
    object (Space)
  },
  "action": {
    object (FormAction)
  },
  "configCompleteRedirectUrl": string,

  // Indicates that this event is dialog-related.
  "isDialogEvent": true,

  // Indicates that a user clicked a button, and all data
  // they entered in the dialog is included in Event.common.formInputs.
  "dialogEventType": "SUBMIT_DIALOG",
  "common": {
    "userLocale": string,
    "hostApp": enum (HostApp),
    "platform": enum (Platform),
    "timeZone": {
      object (TimeZone)
    },

    // Represents user data entered in a dialog.
    "formInputs": {

      // Represents user data entered for a specific field in a dialog.
      "NAME": {

        // Represents string data entered in a dialog, like text input fields
        // and check boxes.
        "stringInputs": {

          // An array of strings entered by the user in a dialog.
          "value": [
            string
          ]
        }
      }
    },
    "parameters": {
      string: string,
      ...
    },
    "invokedFunction": string
  }
}

ตอบสนองต่อข้อมูลที่รวบรวมจากข้อความการ์ดหรือกล่องโต้ตอบ

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

  • หากต้องการตอบรับว่าได้รับใบเสร็จแล้ว โปรดตอบกลับเป็น ActionResponse ที่มี "actionStatus": "OK"
  • หากต้องการส่งคืนข้อผิดพลาด โปรดตอบกลับด้วย ActionResponse ที่มี "actionStatus": "ERROR MESSAGE"

ตัวอย่าง

ตัวอย่างต่อไปนี้จะตรวจหาค่า name ที่มีอยู่ หากไม่ระบุ ระบบจะ แอปแสดงข้อผิดพลาด หากมี แสดงว่าแอปรับทราบข้อมูลในแบบฟอร์มแล้ว และปิดกล่องโต้ตอบ

Node.js

/**
 * Checks for a form input error, the absence of
 * a "name" value, and returns an error if absent.
 * Otherwise, confirms successful receipt of a dialog.
 *
 * Confirms successful receipt of a dialog.
 *
 * @param {Object} event the event object from Chat API.
 *
 * @return {object} open a Dialog in Google Chat.
 */
function receiveDialog(event) {

  // Checks to make sure the user entered a name
  // in a dialog. If no name value detected, returns
  // an error message.
  if (event.common.formInputs.WIDGET_NAME.stringInputs.value[0] == "") {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "Don't forget to name your new contact!"
        }
      }
    });

  // Otherwise the app indicates that it received
  // form data from the dialog. Any value other than "OK"
  // gets returned as an error. "OK" is interpreted as
  // code 200, and the dialog closes.
  } else {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    });
  }
}

Apps Script

ตัวอย่างนี้ส่งข้อความการ์ดโดยการส่งคืน JSON ของการ์ด คุณยังสามารถใช้ บริการการ์ด Apps Script 

/**
 * Checks for a form input error, the absence of
 * a "name" value, and returns an error if absent.
 * Otherwise, confirms successful receipt of a dialog.
 *
 * Confirms successful receipt of a dialog.
 *
 * @param {Object} event the event object from Chat API.
 *
 * @return {object} open a Dialog in Google Chat.
 */
function receiveDialog(event) {

  // Checks to make sure the user entered a name
  // in a dialog. If no name value detected, returns
  // an error message.
  if (event.common.formInputs.WIDGET_NAME[""].stringInputs.value[0] == "") {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "Don't forget to name your new contact!"
        }
      }
    };

  // Otherwise the app indicates that it received
  // form data from the dialog. Any value other than "OK"
  // gets returned as an error. "OK" is interpreted as
  // code 200, and the dialog closes.
  } else {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    };
  }
}

Python

def receive_dialog(event: Mapping[str, Any]) -> Mapping[str, Any]:
  """Checks for a form input error, the absence of a "name" value, and returns
     an error if absent. Otherwise, confirms successful receipt of a dialog.

  Args:
      event (Mapping[str, Any]): the event object from Chat API.

  Returns:
      Mapping[str, Any]: the response.
  """

  if common := event.get('common'):
    if form_inputs := common.get('formInputs'):
      if contact_name := form_inputs.get('WIDGET_NAME'):
        if string_inputs := contact_name.get('stringInputs'):
          if name := string_inputs.get('value')[0]:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'OK'
                }
              }
            }
          else:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'Don\'t forget to name your new contact!'
                }
              }
            }

แก้ปัญหา

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

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