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

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

ออกแบบและแสดงตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด

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

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

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

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

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

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

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

ข้อความการ์ดปลอดข้อผิดพลาด

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

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

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

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

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

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

สาเหตุ: ไม่มีช่อง JSON ที่ต้องระบุ

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

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

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

โดยมี 2 ตัวอย่างดังนี้

ตัวอย่างที่ 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 หรือเมธอด สร้างข้อความ API

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

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

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

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

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