คู่มือนี้อธิบายข้อผิดพลาดทั่วไปเกี่ยวกับการ์ดที่คุณอาจพบ รวมทั้งวิธีแก้ไข
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้
เปิดเครื่องมือสร้างการ์ดลักษณะที่แสดงข้อผิดพลาดของการ์ด
ไฟล์ Manifest เกี่ยวกับข้อผิดพลาดของการ์ดทำได้หลายวิธี ดังนี้
- ส่วนของการ์ด เช่น วิดเจ็ตหรือคอมโพเนนต์ จะไม่ปรากฏหรือแสดงผลในลักษณะที่ไม่คาดคิด
- ทั้งนี้ การ์ดทั้งใบจะไม่ปรากฏ
- กล่องโต้ตอบปิด ไม่เปิดขึ้น หรือไม่โหลด
หากคุณพบพฤติกรรมเช่นนี้ แสดงว่าการ์ดของแอปมีข้อผิดพลาด
สำหรับอ้างอิง: ข้อความการ์ดและกล่องโต้ตอบที่ใช้งานได้และไม่มีข้อผิดพลาด
ก่อนที่จะตรวจสอบตัวอย่างการ์ดที่ผิดพลาด ให้พิจารณาข้อความและกล่องโต้ตอบในการ์ดที่ใช้งานได้นี้ก่อน JSON ของการ์ดนี้มีการแก้ไขโดยแสดงข้อผิดพลาดเพื่อแสดงตัวอย่างข้อผิดพลาดแต่ละรายการและการแก้ไข
ข้อความในการ์ดที่ไม่มีข้อผิดพลาด
นี่คือข้อความการ์ดที่ใช้งานได้และไม่มีข้อผิดพลาด ซึ่งให้รายละเอียดข้อมูลติดต่อที่ มีส่วนหัว ส่วน และวิดเจ็ต เช่น ข้อความและปุ่มที่มีการตกแต่ง
กล่องโต้ตอบที่ไม่มีข้อผิดพลาด
ต่อไปนี้เป็นกล่องโต้ตอบที่ทำงานและไม่มีข้อผิดพลาด ซึ่งจะสร้างรายชื่อติดต่อโดยการรวบรวม ข้อมูลจากผู้ใช้ โดยมีส่วนท้ายและวิดเจ็ตที่แก้ไขได้ เช่น การป้อนข้อความ และสวิตช์ รวมถึงปุ่มต่างๆ
ข้อผิดพลาด: บางส่วนของการ์ดไม่ปรากฏขึ้นมา
บางครั้งการ์ดจะแสดงผล แต่บางส่วนของการ์ดที่คุณคาดว่าจะเห็นไม่ปรากฏขึ้นมา สาเหตุที่เป็นไปได้มีดังนี้
- ฟิลด์ JSON ที่จำเป็นขาดหายไป
- ช่อง JSON สะกดผิดหรือใช้อักษรตัวพิมพ์ใหญ่ไม่ถูกต้อง
สาเหตุ: ไม่มีฟิลด์ JSON ที่จำเป็น
ข้อผิดพลาดในตัวอย่างนี้ ฟิลด์ JSON title
ที่จำเป็นขาดหายไป ด้วยเหตุนี้ การ์ดจึงแสดงผล แต่บางส่วนของการ์ดที่คาดว่าจะปรากฏไม่แสดงผล การคาดเดาว่าการ์ดจะแสดงผลอย่างไรเมื่อเว้นช่องที่ต้องกรอกไว้อาจเป็นเรื่องยาก
หากต้องการแก้ไขข้อผิดพลาดนี้ ให้เพิ่มช่อง JSON ที่ต้องระบุ ในตัวอย่างนี้คือ title
หากต้องการทราบว่าต้องมีช่อง JSON หรือไม่ โปรดดูเอกสารอ้างอิงเกี่ยวกับการ์ด v2 ในตัวอย่างนี้ โปรดอ้างอิงคำอธิบายของช่อง title
ใน CardHeader
ต่อไปนี้เป็นตัวอย่างสองตัวอย่าง:
ตัวอย่างที่ 1: การระบุ subtitle
แต่การละเว้น title
ที่จำเป็นจะทำให้ส่วนหัวทั้งหมดว่างเปล่า
![ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่ได้ระบุฟิลด์ที่จำเป็นหรือชื่อ](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=0000&hl=th)
title
ดูตัวอย่างไฟล์ JSON ของการ์ดที่ผิดพลาด
ข้อผิดพลาด: ช่องที่ต้องกรอก title
ไม่มีอยู่ใน header
. . . "header": { "subtitle": "Software Engineer" } . . .
ดูข้อมูล JSON ของการ์ดที่ถูกต้อง
แก้ไขแล้ว: ช่องที่ต้องกรอก title
เป็นส่วนหนึ่งของข้อกำหนด header
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
ตัวอย่างที่ 2: การระบุ subtitle
, imageUrl
, imageType
และ imageAltText
แต่การไม่ระบุ title
ที่จำเป็นจะทำให้รูปภาพแสดงผลตามที่คาดไว้ แต่ชื่อรองไม่แสดง
![ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่ได้ระบุฟิลด์ที่จำเป็นหรือชื่อ](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=0000&hl=th)
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 ของการ์ดเทียบกับเอกสารอ้างอิงการ์ด
![ส่วนหัวของการ์ดนี้ไม่แสดงเนื่องจากไม่ได้ระบุฟิลด์ที่จำเป็นหรือชื่อ](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=0000&hl=th)
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
ไม่ถูกต้อง
หากข้อความหรือกล่องโต้ตอบของการ์ดมีวิดเจ็ต 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