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

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

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

ข้อผิดพลาดเกี่ยวกับบัตรจะปรากฏอย่างไร

ข้อผิดพลาดเกี่ยวกับบัตรจะแสดงในหลายรูปแบบดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูว่าต้องระบุฟิลด์ JSON หรือไม่ได้ที่เอกสารอ้างอิงของการ์ด v2 ในตัวอย่างนี้ ให้ดูคำอธิบายของฟิลด์ title ใน CardHeader

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

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

    . . .
    "header": {

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

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

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

    . . .
    "header": {

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

    . . .
    "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 ของการ์ดกับเอกสารอ้างอิงการ์ด

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

    . . .
    "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 ไม่ถูกต้อง

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

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

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

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


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

    . . .
    {
      "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 ที่ระบุอย่างถูกต้อง

    . . .
    "fixedFooter": {

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

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

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

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

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

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

    . . .
    "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 แต่ละรายการในการ์ดไม่ซ้ำกัน

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

      }
    }
    . . .
    

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

การดำเนินการเปิด ส่ง หรือยกเลิกกล่องโต้ตอบล้มเหลวเมื่อใช้สถาปัตยกรรมแอปแบบอะซิงโครนัส

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

การเปิด ส่ง หรือยกเลิกกล่องโต้ตอบต้องมีการตอบกลับแบบซิงโครนัสจากแอป Chat ที่มีออบเจ็กต์ RenderActions (เช่น action.navigations ที่มี pushCard หรือ endNavigation) ดังนั้น แอปที่สร้างขึ้นด้วยสถาปัตยกรรมแบบอะซิงโครนัสจึงไม่รองรับกล่องโต้ตอบ

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

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

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

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

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