แก้ปัญหาและแก้ไขการ์ดและกล่องโต้ตอบ

คู่มือนี้จะอธิบายข้อผิดพลาดที่พบบ่อยเกี่ยวกับการ์ดที่คุณอาจพบ และวิธีแก้ไข

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

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

ลักษณะที่ข้อผิดพลาดในการ์ดปรากฏ

ข้อผิดพลาดของการ์ดจะแสดงออกมาได้หลายวิธีดังนี้

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

หากพบลักษณะการทำงานเช่นนี้ แสดงว่าการ์ดของแอปมีข้อผิดพลาด

ข้อมูลอ้างอิง: ข้อความและการ์ดโต้ตอบที่ใช้งานได้และไม่มีข้อผิดพลาด

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

ข้อความการ์ดที่ไม่มีข้อผิดพลาด

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

กล่องโต้ตอบที่ไม่มีข้อผิดพลาด

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

ข้อผิดพลาด: บางส่วนของการ์ดไม่ปรากฏ

บางครั้งการ์ดจะแสดงผล แต่ส่วนที่คุณคาดหวังว่าจะเห็นกลับไม่ปรากฏ สาเหตุที่เป็นไปได้มีดังนี้

  • ไม่มีฟิลด์ JSON ที่ต้องกรอก
  • ช่อง JSON สะกดผิดหรือใช้อักษรตัวพิมพ์ใหญ่ไม่ถูกต้อง

สาเหตุ: ไม่มีฟิลด์ JSON ที่ต้องกรอก

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

หากต้องการแก้ไขข้อผิดพลาดนี้ ให้เพิ่มฟิลด์ JSON ที่จำเป็น ซึ่งในตัวอย่างนี้คือ title

หากต้องการทราบว่าจำเป็นต้องมีช่อง JSON หรือไม่ โปรดดูเอกสารอ้างอิงสำหรับ Cards v2 ในตัวอย่างนี้ ให้ดูคำอธิบายของช่อง title ใน CardHeader

ต่อไปนี้เป็นตัวอย่างสองตัวอย่าง:

ตัวอย่างที่ 1: การระบุ subtitle แต่ละเว้น title ที่จําเป็นทําให้ส่วนหัวทั้งหมดปรากฏเป็นค่าว่าง

ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่มีชื่อ ซึ่งเป็นช่องที่ต้องกรอก
รูปที่ 1: ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่มีช่องที่ต้องกรอก title

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ไม่มีข้อมูลในช่องที่ต้องกรอก title ใน header

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ช่องที่ต้องกรอก title เป็นส่วนหนึ่งของข้อกำหนด header

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .

ตัวอย่างที่ 2: การระบุ subtitle, imageUrl, imageType และ imageAltText แต่ละเว้น title ที่จําเป็นทําให้ระบบแสดงผลรูปภาพตามที่คาดไว้ แต่ไม่ได้แสดงคำบรรยายแทน

ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่มีชื่อซึ่งเป็นช่องที่ต้องกรอก
รูปที่ 2: ส่วนหัวของการ์ดนี้ไม่แสดงคำบรรยายย่อยเนื่องจากไม่มีช่องที่ต้องกรอก title แต่รูปภาพแสดงผลตามที่คาดไว้

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ไม่มีข้อมูลในช่องที่ต้องกรอก title ใน header

    . . .
    "header": {

            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ช่องที่ต้องกรอก title เป็นส่วนหนึ่งของข้อกำหนด header

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

สาเหตุ: JSON สะกดไม่ถูกต้องหรือใช้อักษรตัวพิมพ์ใหญ่ไม่ถูกต้อง

ในตัวอย่างข้อผิดพลาดนี้ JSON ของการ์ดมีช่องที่จำเป็นทั้งหมด แต่ช่อง imageUrl มีการขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่อย่างไม่ถูกต้องเป็น imageURL (R ตัวพิมพ์ใหญ่ L ตัวพิมพ์ใหญ่) ซึ่งทำให้เกิดข้อผิดพลาด: รูปภาพที่ชี้ถึงไม่แสดงผล

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

ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่มีชื่อซึ่งเป็นช่องที่ต้องกรอก
รูปที่ 3: ส่วนหัวของการ์ดนี้ไม่แสดงคำบรรยายย่อยเนื่องจากไม่มีช่องที่ต้องกรอก title แต่รูปภาพแสดงผลตามที่คาดไว้

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ช่อง imageURL ใช้อักษรตัวพิมพ์ใหญ่ไม่ถูกต้อง ค่านี้ควรเป็น imageUrl

    . . .
    "header": {
      "title": "Sasha",
      "subtitle": "Software Engineer",
      "imageURL":
      "https://developers.google.com/chat/images/quickstart-app-avatar.png",
      "imageType": "CIRCLE",
      "imageAltText": "Avatar for Sasha",
    }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ช่อง imageUrl ใช้อักษรตัวพิมพ์ใหญ่อย่างถูกต้อง

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .

ข้อผิดพลาด: การ์ดทั้งใบไม่ปรากฏ

บางครั้งการ์ดอาจไม่ปรากฏขึ้น สาเหตุที่เป็นไปได้มีดังนี้

สาเหตุ: ระบุ buttonList หรือ cardFixedFooter ไม่ถูกต้อง

หากข้อความหรือกล่องโต้ตอบของการ์ดมีวิดเจ็ต ButtonList ที่ระบุไม่ถูกต้อง หรือวิดเจ็ต CardFixedFooter ที่มีปุ่มที่ระบุไม่ถูกต้อง การ์ดทั้งใบจะไม่แสดงและไม่มีสิ่งใดปรากฏขึ้นแทน ข้อกำหนดที่ไม่ถูกต้องอาจรวมถึงช่องที่ขาดหายไป ช่องที่มีการสะกดผิดหรือใช้อักษรตัวพิมพ์ใหญ่อย่างไม่ถูกต้อง หรือ JSON ที่มีโครงสร้างไม่ถูกต้อง เช่น ไม่มีคอมมา เครื่องหมายคำพูด หรือวงเล็บปีกกา

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

ตัวอย่าง: ในคู่มือวิดเจ็ต ButtonList การส่งการดำเนินการ onClick ที่ไม่สมบูรณ์ในปุ่มแรกจะทําให้การ์ดทั้งใบแสดงผลไม่ได้

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ออบเจ็กต์ onClick ไม่ได้ระบุช่องใดๆ การ์ดจึงไม่ปรากฏขึ้น

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {


              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ตอนนี้ออบเจ็กต์ onClick มีช่อง openLink แล้วเพื่อให้การ์ดปรากฏตามที่คาดไว้

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {
              "openLink": {
                "url": "https://example.com/share",
              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

ข้อผิดพลาด: กล่องโต้ตอบปิด ค้าง หรือไม่เปิด

หากกล่องโต้ตอบปิดโดยไม่คาดคิด โหลดไม่สำเร็จ หรือไม่เปิดขึ้น สาเหตุอาจเป็นปัญหาเกี่ยวกับอินเทอร์เฟซการ์ด

สาเหตุที่พบบ่อยที่สุดมีดังนี้

  • วิดเจ็ต CardFixedFooter ไม่มี primaryButton
  • ปุ่มในวิดเจ็ต CardFixedFooter ไม่มีการดำเนินการ onClick หรือมีการระบุการดำเนินการ onClick อย่างไม่ถูกต้อง
  • วิดเจ็ต TextInput ไม่มีช่อง name

สาเหตุ: CardFixedFooter ไม่มี primaryButton

ในกล่องโต้ตอบที่มีวิดเจ็ต CardFixedFooter คุณต้องระบุ primaryButton ที่มีทั้งข้อความและสี การละเว้น primaryButton หรือการตั้งค่าไม่ถูกต้องจะทำให้กล่องโต้ตอบทั้งหมดไม่ปรากฏ

หากต้องการแก้ไขข้อผิดพลาดนี้ ให้ตรวจสอบว่าวิดเจ็ต CardFixedFooter มี primaryButton ที่ระบุอย่างถูกต้อง

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ออบเจ็กต์ fixedFooter ไม่ได้ระบุช่อง primaryButton ทําให้โหลดหรือเปิดกล่องโต้ตอบไม่สําเร็จ

    . . .
    "fixedFooter": {

        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ตอนนี้ fixedFooter ระบุช่อง primaryButton แล้วเพื่อให้กล่องโต้ตอบทำงานตามที่คาดไว้

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

สาเหตุ: การตั้งค่า onClick ใน FixedFooter ไม่ถูกต้อง

ในกล่องโต้ตอบที่มีวิดเจ็ต CardFixedFooter การระบุการตั้งค่า onClick ในปุ่มไม่ถูกต้องหรือไม่ระบุเลยทําให้กล่องโต้ตอบปิด โหลดไม่สําเร็จ หรือเปิดไม่ได้

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

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ออบเจ็กต์ primaryButton มีช่อง onClick ที่มีอาร์เรย์ "parameters" ที่สะกดผิด ทำให้โหลดหรือเปิดกล่องโต้ตอบไม่สำเร็จ

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parrammetters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ออบเจ็กต์ primaryButton มีช่อง onClick ที่มีอาร์เรย์ "parameters" ที่สะกดถูกต้อง กล่องโต้ตอบจึงทํางานตามที่คาดไว้

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          "action": {
            "function": "setLanguageType",
            "parameters": [
              {
                "key": "languageType",
                "value": "C++"
              }
            ]
          }
        }
      },
      "secondaryButton": {
        "text": "Cancel",
        "onClick": {
          "action": {
            "function": "reset"
          }
        }
      }
    }
    . . .

สาเหตุ: TextInput ไม่มี name

หากกล่องโต้ตอบมีวิดเจ็ต TextInput ที่ไม่รวมช่อง name ไว้ กล่องโต้ตอบจะไม่ทํางานตามที่คาดไว้ โดยอาจปิด โหลดไม่สำเร็จ หรือเปิดไม่ขึ้น

หากต้องการแก้ไขข้อผิดพลาดนี้ ให้ตรวจสอบว่าวิดเจ็ต TextInput แต่ละรายการมีช่อง name ที่เหมาะสม ตรวจสอบว่าช่อง name แต่ละช่องในการ์ดไม่ซ้ำกัน

ดูข้อมูลโค้ด JSON ของการ์ดที่ไม่ถูกต้อง

ข้อผิดพลาด: ออบเจ็กต์ textInput ไม่ได้ระบุช่อง name ทําให้กล่องโต้ตอบปิด โหลดไม่สําเร็จ หรือเปิดไม่สําเร็จ

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",

      }
    }
    . . .

ดูข้อมูลโค้ด JSON ของการ์ดที่ถูกต้อง

แก้ไขแล้ว: ตอนนี้ textInput ระบุช่อง name แล้วเพื่อให้กล่องโต้ตอบทำงานตามที่คาดไว้

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .

การดำเนินการเปิด ยกเลิก หรือส่งกล่องโต้ตอบไม่สำเร็จด้วยสถาปัตยกรรมแอปแบบไม่พร้อมกัน

หากแอป Chat แสดงข้อความแสดงข้อผิดพลาด Could not load dialog. Invalid response returned by bot. ขณะทำงานกับกล่องโต้ตอบ อาจเป็นเพราะแอปใช้สถาปัตยกรรมแบบไม่พร้อมกัน เช่น Cloud Pub/Sub หรือเมธอด Create Message API

การเปิด ส่ง หรือยกเลิกกล่องโต้ตอบต้องได้รับการตอบกลับแบบซิงค์จากแอป Chat ด้วย DialogEventType ดังนั้น แอปที่สร้างขึ้นด้วยสถาปัตยกรรมแบบแอซิงโครนัสจึงไม่รองรับกล่องโต้ตอบ

วิธีแก้ปัญหาเบื้องต้นคือ ให้พิจารณาใช้ข้อความการ์ดแทนกล่องโต้ตอบ

ข้อผิดพลาดอื่นๆ เกี่ยวกับการ์ดและกล่องโต้ตอบ

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

หากต้องการความช่วยเหลือในการแก้ไขข้อผิดพลาดของแอป Google Chat โปรดดูแก้ปัญหาและแก้ไขแอป Google Chat และแก้ไขข้อบกพร่องของแอป Chat