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

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

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างการรับส่งข้อความและอินเทอร์เฟซผู้ใช้สำหรับแอป 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 widget มีปุ่มที่ระบุไม่ถูกต้อง

สาเหตุ: ระบุ 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 คุณต้องระบุ primaryButton ที่มีทั้งข้อความและสี การไม่ระบุ primaryButton หรือการตั้งค่าไม่ถูกต้องจะทำให้กล่องโต้ตอบทั้งหมดไม่ปรากฏ

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

ดูข้อมูลโค้ด JSON ของการ์ดที่มีข้อผิดพลาด

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

    . . .
    "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 ของการ์ดที่มีข้อผิดพลาด

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

    . . .
    {
      "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