คู่มือนี้อธิบายข้อผิดพลาดที่พบบ่อยเกี่ยวกับการ์ดซึ่งคุณอาจพบ พร้อมวิธีแก้ไข
ออกแบบและแสดงตัวอย่างการ์ดด้วยเครื่องมือสร้างการ์ด
เปิดเครื่องมือสร้างการ์ดข้อผิดพลาดเกี่ยวกับการ์ดจะปรากฏอย่างไร
ข้อผิดพลาดของการ์ดจะ Manifest ได้หลายวิธีดังนี้
- ส่วนหนึ่งของการ์ด เช่น วิดเจ็ตหรือคอมโพเนนต์ ไม่ปรากฏหรือแสดงผลในลักษณะที่ไม่คาดคิด
- การ์ดทั้งใบไม่แสดงขึ้นมา
- กล่องโต้ตอบจะปิด ไม่เปิดขึ้น หรือไม่โหลด
หากคุณพบลักษณะการทำงานเช่นนี้ แสดงว่าการ์ดของแอปมีข้อผิดพลาด
สำหรับการอ้างอิง: ข้อความการ์ดและกล่องโต้ตอบที่ใช้งานได้และปราศจากข้อผิดพลาด
ก่อนตรวจสอบตัวอย่างการ์ดที่ผิดพลาด ให้พิจารณาข้อความและกล่องโต้ตอบของการ์ดที่ใช้งานได้นี้ก่อน ระบบแก้ไข JSON ของการ์ดนี้โดยแสดงข้อผิดพลาดเพื่อแสดงถึงตัวอย่างข้อผิดพลาดแต่ละรายการและการแก้ไข
ข้อความการ์ดปลอดข้อผิดพลาด
ต่อไปคือข้อความการ์ดที่ใช้งานได้และไม่มีข้อผิดพลาดที่อธิบายข้อมูลติดต่อ ที่มีส่วนหัว ส่วน และวิดเจ็ต เช่น ข้อความและปุ่มที่ตกแต่งอย่างสวยงาม
กล่องโต้ตอบที่ไม่มีข้อผิดพลาด
ต่อไปนี้คือกล่องโต้ตอบที่ใช้งานได้และไม่มีข้อผิดพลาดซึ่งสร้างรายชื่อติดต่อโดยการรวบรวมข้อมูลจากผู้ใช้ โดยมีส่วนท้ายและวิดเจ็ตที่แก้ไขได้ เช่น การป้อนข้อความและสวิตช์ และปุ่มต่างๆ
ข้อผิดพลาด: บางส่วนของการ์ดไม่ปรากฏ
บางครั้งการ์ดอาจแสดงขึ้นมา แต่บางส่วนของการ์ดที่คุณคาดว่าจะเห็นกลับไม่ปรากฏขึ้น สาเหตุที่เป็นไปได้มีดังนี้
- ไม่มีช่อง JSON ที่ต้องระบุ
- ช่อง JSON สะกดผิดหรือใช้อักษรตัวพิมพ์ใหญ่ไม่ถูกต้อง
สาเหตุ: ไม่มีช่อง JSON ที่ต้องระบุ
ข้อผิดพลาดในตัวอย่างนี้ ช่อง JSON ที่จำเป็นคือ title
ขาดหายไป ด้วยเหตุนี้ การ์ดจึงแสดงผล แต่บางส่วนของการ์ดที่คาดว่าจะปรากฏขึ้นจะไม่ปรากฏขึ้น การคาดเดาว่าการ์ดจะแสดงผลอย่างไรเมื่อไม่ได้ใส่ช่องที่ต้องกรอก
หากต้องการแก้ไขข้อผิดพลาดนี้ ให้เพิ่มช่อง JSON ที่จำเป็น ในตัวอย่างนี้คือ title
หากต้องการทราบว่าต้องกรอกข้อมูลในช่อง JSON หรือไม่ โปรดดูที่เอกสารอ้างอิงของการ์ด v2 ในตัวอย่างนี้ โปรดดูคำอธิบายของช่อง title
ใน CardHeader
โดยมี 2 ตัวอย่างดังนี้
ตัวอย่างที่ 1: การระบุ subtitle
แต่การไม่ใส่ title
ที่จำเป็นจะทำให้ส่วนหัวทั้งหมดว่างเปล่า
ดูข้อมูล JSON ของการ์ดที่ผิดพลาด
ข้อผิดพลาด: ช่องที่ต้องกรอก title
ไม่มีข้อมูลใน header
. . . "header": { "subtitle": "Software Engineer" } . . .
ดูข้อมูล JSON ของการ์ดที่ถูกต้อง
แก้ไขแล้ว: ช่องที่ต้องกรอก title
เป็นส่วนหนึ่งของข้อกำหนดของ header
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
ตัวอย่างที่ 2: การระบุ subtitle
, imageUrl
, imageType
และ imageAltText
แต่การไม่ใส่ 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 ของการ์ดเทียบกับเอกสารอ้างอิงการ์ด
ดูข้อมูล 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 หรือเมธอด
สร้างข้อความ API
การเปิด ส่ง หรือยกเลิกกล่องโต้ตอบต้องใช้การตอบกลับแบบพร้อมกันจากแอป Chat ด้วย DialogEventType
ด้วยเหตุนี้ แอปที่สร้างขึ้นด้วยสถาปัตยกรรมแบบไม่พร้อมกันจึงไม่รองรับกล่องโต้ตอบ
ในการแก้ปัญหาเฉพาะหน้า ให้พิจารณาใช้ข้อความในการ์ดแทนกล่องโต้ตอบ
ข้อผิดพลาดอื่นๆ เกี่ยวกับการ์ดและกล่องโต้ตอบ
หากการแก้ไขที่อธิบายไว้ในหน้านี้ไม่สามารถแก้ไขข้อผิดพลาดเกี่ยวกับการ์ดที่แอปได้รับประสบการณ์ ให้ค้นหาบันทึกข้อผิดพลาดของแอป การค้นหาบันทึกจะช่วยหาข้อผิดพลาดใน JSON ของการ์ดหรือโค้ดของแอป และบันทึกมีข้อความแสดงข้อผิดพลาดที่สื่อความหมายเพื่อช่วยคุณแก้ไขปัญหา
หัวข้อที่เกี่ยวข้อง
หากต้องการความช่วยเหลือในการแก้ไขข้อผิดพลาดของแอป Google Chat โปรดดูหัวข้อแก้ปัญหาและแก้ไขแอป Google Chat และแก้ไขข้อบกพร่องของแอป Chat