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

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

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

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

ลักษณะที่แสดงข้อผิดพลาดของการ์ด

ไฟล์ Manifest เกี่ยวกับข้อผิดพลาดของการ์ดทำได้หลายวิธี ดังนี้

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

หากคุณพบพฤติกรรมเช่นนี้ แสดงว่าการ์ดของแอปมีข้อผิดพลาด

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

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

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

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

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

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

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

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

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

สาเหตุ: ไม่มีฟิลด์ JSON ที่จำเป็น

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

หากต้องการแก้ไขข้อผิดพลาดนี้ ให้เพิ่มช่อง JSON ที่ต้องระบุ ในตัวอย่างนี้คือ title

หากต้องการทราบว่าต้องมีช่อง JSON หรือไม่ โปรดดูเอกสารอ้างอิงเกี่ยวกับการ์ด 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 ต้องระบุ 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