หน้านี้จะอธิบายวิธีสร้างคอมโพเนนต์และโครงสร้างของการ์ด การ์ดคืออินเทอร์เฟซผู้ใช้ที่แอป Google Chat ใช้เพื่อนำเสนอและรวบรวมข้อมูลจากผู้ใช้ Chat ได้ แอป Chat สามารถสร้าง และแสดงการ์ดในอินเทอร์เฟซต่อไปนี้
- ข้อความ ที่มีการ์ดอย่างน้อย 1 ใบ
- หน้าแรก ซึ่งเป็นการ์ดที่ปรากฏจากแท็บหน้าแรกในข้อความ ส่วนตัวด้วยแอป Chat
- กล่องโต้ตอบ ซึ่งเป็นการ์ดที่เปิดขึ้น ในหน้าต่างใหม่จากข้อความและหน้าแรก
ในหน้านี้ คุณจะได้เรียนรู้เกี่ยวกับองค์ประกอบต่อไปนี้ของการ์ด
- ส่วนหัว ซึ่งโดยปกติจะมีชื่อของการ์ดหรือส่วนการ์ด
- ส่วนซึ่งเป็นเนื้อหาหลัก ของการ์ด รวมถึงวิดเจ็ตและองค์ประกอบแบบอินเทอร์แอกทีฟอื่นๆ ในส่วนการ์ด คุณสามารถเพิ่มโครงสร้างในการ์ดได้ รวมถึงคอลัมน์และตารางกริด
- ส่วนท้ายแบบคงที่ซึ่งจะปรากฏที่ด้านล่างของ กล่องโต้ตอบเพื่อแสดงองค์ประกอบ UI ที่คงอยู่ เช่น ปุ่ม
ข้อกำหนดเบื้องต้น
แอป Google Chat ที่กำหนดค่าให้รับและตอบกลับเหตุการณ์การโต้ตอบ หากต้องการสร้างแอป Chat แบบอินเทอร์แอกทีฟ ให้ทำตามคู่มือเริ่มต้นฉบับย่อต่อไปนี้โดยอิงตามสถาปัตยกรรมของแอปที่คุณต้องการใช้
- บริการ HTTP ด้วย Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างการรับส่งข้อความและอินเทอร์เฟซผู้ใช้สำหรับแอป Chat โดยทำดังนี้
เปิดเครื่องมือสร้างการ์ดเพิ่มส่วนหัว
วิดเจ็ต CardHeader
แสดงถึงส่วนหัวของการ์ด ส่วนหัวอาจมี
ชื่อ คำบรรยาย และรูปโปรไฟล์สำหรับการ์ด
ตัวอย่างของ CardHeader
มีดังนี้
เพิ่มส่วนการ์ดอย่างน้อย 1 ส่วน
วิดเจ็ต CardSection
เป็นคอนเทนเนอร์ระดับสูงภายในการ์ด คุณใช้ส่วนบัตร
เพื่อจัดกลุ่มวิดเจ็ตภายในบัตร คุณสามารถใส่ส่วนหัวและวิดเจ็ตอย่างน้อย 1 รายการในส่วนการ์ดแต่ละส่วนได้
ตัวอย่างต่อไปนี้แสดง CardSection
ที่มีวิดเจ็ต textParagraph
2 รายการ
เพิ่มตัวแบ่งแนวนอนระหว่างวิดเจ็ต
วิดเจ็ต
divider
จะแสดงเส้นแนวนอนที่ครอบคลุมความกว้างของการ์ด
ระหว่างวิดเจ็ตที่ซ้อนกันในแนวตั้ง เส้นคั่นเป็นเส้นแบ่งภาพที่ช่วยให้ผู้ใช้แยกความแตกต่างระหว่างวิดเจ็ตหนึ่งกับอีกวิดเจ็ตหนึ่งได้ ทำให้การ์ดสแกนและทำความเข้าใจได้ง่ายขึ้น
ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต divider
ระหว่างวิดเจ็ตประเภทอื่นๆ
เพิ่มคอลัมน์
columns
วิดเจ็ต
จะแสดงคอลัมน์ได้สูงสุด 2 คอลัมน์ในการ์ด คุณเพิ่มวิดเจ็ตลงในแต่ละคอลัมน์ได้ โดยวิดเจ็ตจะปรากฏตามลำดับที่ระบุ
หากต้องการรวมคอลัมน์มากกว่า 2 คอลัมน์ หรือใช้แถว ให้ใช้วิดเจ็ต grid
ความสูงของแต่ละคอลัมน์จะกำหนดโดยคอลัมน์ที่สูงกว่า เช่น หากคอลัมน์แรกสูงกว่าคอลัมน์ที่ 2 ทั้ง 2 คอลัมน์จะมีความสูงเท่ากับคอลัมน์แรก เนื่องจากแต่ละคอลัมน์มีวิดเจ็ตได้จำนวนต่างกัน คุณจึงกำหนดแถวหรือจัดแนววิดเจ็ตระหว่างคอลัมน์ไม่ได้
ตัวอย่างต่อไปนี้แสดงการ์ดที่มีวิดเจ็ต columns
ซึ่งมีข้อความ 2 คอลัมน์ หากต้องการดูเฉพาะเลย์เอาต์คอลัมน์และยุบตัวอย่างโค้ด
ให้คลิก ยุบ
เมื่อมีพื้นที่จำกัด เช่น ในตัวอย่างต่อไปนี้ คอลัมน์ที่ 2 จะแสดงอยู่ใต้คอลัมน์แรก
กำหนดความกว้างของคอลัมน์
คอลัมน์จะแสดงเคียงข้างกัน คุณปรับแต่งความกว้างของแต่ละคอลัมน์ได้
โดยใช้ฟิลด์ horizontalSizeStyle
หากความกว้างของหน้าจอผู้ใช้แคบเกินไป คอลัมน์ที่ 2 จะแสดงอยู่ใต้คอลัมน์แรก
- ในเว็บ คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
- ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะขึ้นบรรทัดใหม่หากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 300 pt
- ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 320 dp
ตัวอย่างต่อไปนี้แสดงการ์ดที่มีวิดเจ็ต columns
ซึ่งมีข้อความ 2 คอลัมน์โดยมี 4 รายการในคอลัมน์ แต่ละรายการในคอลัมน์มี
horizontalSizeStyle
เพื่อจัดการพื้นที่ที่ข้อความ
ใช้ในแต่ละคอลัมน์ ดังนี้
- ย่อหน้าข้อความแรกใช้
FILL_MINIMUM_SPACE
เพื่อเติมความกว้างของการ์ดไม่เกิน 30% - ย่อหน้าข้อความที่ 2 ใช้
FILL_AVAILABLE_SPACE
เพื่อเติมพื้นที่ว่าง ในความกว้างของการ์ด ในตัวอย่างนี้ จะเติมความกว้างของการ์ด 70% - ย่อหน้าข้อความที่ 3 ไม่ได้กำหนด
horizontalSizeStyle
จึงจะใช้ค่าเริ่มต้น เพื่อเติมพื้นที่ว่างของการ์ด - ย่อหน้าข้อความที่ 4 ใช้
FILL_MINIMUM_SPACE
เพื่อเติมความกว้างของการ์ดไม่เกิน 30%
กำหนดการจัดแนวคอลัมน์ในแนวนอน
คุณจัดแนววิดเจ็ตในแนวนอนไปทางซ้าย ขวา หรือกึ่งกลางของคอลัมน์ได้โดย
กำหนดฟิลด์
horizontalAligment
หากไม่ได้กำหนดฟิลด์ horizontalAlignment
ระบบจะจัดแนววิดเจ็ตไปทางซ้ายในคอลัมน์
ตัวอย่างต่อไปนี้จัดข้อความในคอลัมน์ไปทางซ้ายในแนวนอน
ตัวอย่างต่อไปนี้จัดข้อความในคอลัมน์ให้อยู่ตรงกลางในแนวนอน
ตัวอย่างต่อไปนี้จะจัดข้อความในคอลัมน์ไปทางขวาในแนวนอน
กำหนดการจัดแนวคอลัมน์ในแนวตั้ง
คุณจัดแนววิดเจ็ตในแนวตั้งไปที่ด้านบน ด้านล่าง หรือตรงกลางของคอลัมน์ได้โดย
กำหนดฟิลด์ verticalAlignment
หากไม่ได้กำหนดฟิลด์ verticalAlignment
วิดเจ็ตในคอลัมน์จะจัดแนว
ไปที่ด้านบน
ตัวอย่างต่อไปนี้จัดข้อความในคอลัมน์ให้อยู่ด้านบนในแนวตั้ง
ตัวอย่างต่อไปนี้จัดข้อความในคอลัมน์ให้อยู่ตรงกลางในแนวตั้ง
ตัวอย่างต่อไปนี้จะจัดข้อความในคอลัมน์ให้อยู่ด้านล่างในแนวตั้ง
เพิ่มตารางกริดเพื่อแสดงคอลเล็กชันของรายการ
วิดเจ็ต
grid
จะแสดงตารางกริดที่มีคอลเล็กชันของรายการ กริดรองรับคอลัมน์และรายการได้ไม่จำกัด
จำนวนแถวจะกำหนดโดยจำนวนรายการหารด้วยจำนวนคอลัมน์
ตารางกริดที่มี 10 รายการและ 2 คอลัมน์จะมี 5 แถว กริดที่มี 11 รายการและ 2 คอลัมน์จะมี 6 แถว
วิดเจ็ตนี้รองรับคำแนะนำซึ่งช่วยให้ผู้ใช้ป้อนข้อมูลที่สอดคล้องกัน และ
การดำเนินการเมื่อมีการเปลี่ยนแปลง ซึ่งเป็น
Actions
ที่ทำงานเมื่อมีการเปลี่ยนแปลงในช่องป้อนข้อความ เช่น ผู้ใช้เพิ่มหรือ
ลบข้อความ
ตัวอย่างต่อไปนี้เป็นตารางกริด 2 คอลัมน์ที่มีรายการเดียว
หากต้องการกำหนดตำแหน่งที่ข้อความจะปรากฏพร้อมรูปภาพในตารางกริด คุณสามารถระบุฟิลด์gridItemLayout
ได้
ฟิลด์นี้ช่วยให้คุณกำหนดได้ว่าข้อความจะปรากฏเหนือหรือใต้
รายการในตารางกริด หากไม่ได้กำหนด gridItemLayout
ข้อความจะปรากฏใต้รายการในตารางเป็นค่าเริ่มต้น
ตัวอย่างต่อไปนี้เป็นตาราง 3 คอลัมน์ที่มีข้อความและรูปภาพในแต่ละตาราง กริดแรกกำหนดข้อความที่จะปรากฏเหนือรูปภาพ กริดที่สองกำหนดข้อความที่จะปรากฏใต้รูปภาพ และกริดที่สามไม่ได้กำหนดตำแหน่งของข้อความ
เพิ่มเส้นขอบให้กับตารางกริดหรือคอลัมน์
สำหรับรายการที่ปรากฏในวิดเจ็ต column
หรือ grid
คุณสามารถเพิ่มเส้นขอบให้กับ
องค์ประกอบ UI เหล่านี้ได้โดยการกำหนดฟิลด์
borderType
และฟิลด์
borderStyle
หากไม่ได้กำหนดฟิลด์ borderStyle
ระบบจะแสดงโดยไม่มีเส้นขอบเป็นค่าเริ่มต้น คุณสามารถ
กำหนดborderType
เพื่อใช้กับทุกรายการภายในวิดเจ็ต หรือใช้การจัดรูปแบบ
กับแต่ละรายการภายในวิดเจ็ต
ตัวอย่างต่อไปนี้เป็นตารางกริด 2 คอลัมน์ที่มีรูปภาพในแต่ละกริด ซึ่งมีการกำหนดประเภท สไตล์ และสีของเส้นขอบเพื่อใช้กับรายการทั้งหมดภายในกริด
ตัวอย่างต่อไปนี้เป็นตารางกริด 3 คอลัมน์ที่มีรูปภาพในแต่ละกริด และกำหนดรูปแบบและประเภทเส้นขอบแยกกัน รูปภาพแรก
มีเส้นขอบที่กำหนดเป็น STROKE
รูปภาพที่ 2 มีเส้นขอบที่กำหนดเป็น
NO_BORDER
รูปภาพที่ 3 ไม่ได้กำหนดเส้นขอบ
เพิ่มภาพหมุน
วิดเจ็ต Carousel
จะแสดงคอลเล็กชันของออบเจ็กต์ CarouselCard
ซึ่งเลื่อนเข้าและออกจากหน้าจอได้ คุณเพิ่มวิดเจ็ตได้หลายรายการ
ในแต่ละCarouselCard
เพิ่มส่วนท้ายแบบถาวร
วิดเจ็ต CardFixedFooter
แสดงถึงส่วนท้ายของข้อความกล่องโต้ตอบที่ส่งโดย
แอป Chat
ส่วนท้ายอาจมีปุ่มหลักและปุ่มรอง
CardFixedFooter
วิดเจ็ตใช้ได้กับ
กล่องโต้ตอบเท่านั้น
ต่อไปนี้เป็นตัวอย่างวิดเจ็ต CardFixedFooter
ที่มีปุ่ม 2 ปุ่ม
แก้ปัญหา
เมื่อแอป Google Chat หรือการ์ดแสดงข้อผิดพลาด อินเทอร์เฟซของ Chat จะแสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ดำเนินการตามคำขอของคุณไม่ได้" บางครั้ง UI ของ Chat อาจไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอปหรือการ์ด Chat อาจให้ผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจไม่ปรากฏ
แม้ว่าข้อความแสดงข้อผิดพลาดอาจไม่แสดงใน UI ของ Chat แต่ข้อความแสดงข้อผิดพลาดและข้อมูลบันทึกที่อธิบายไว้จะช่วยคุณแก้ไขข้อผิดพลาดได้เมื่อเปิดการบันทึกข้อผิดพลาดสำหรับแอป Chat หากต้องการความช่วยเหลือในการดู การแก้ไขข้อบกพร่อง และการแก้ไขข้อผิดพลาด โปรดดู แก้ปัญหาและแก้ไขข้อผิดพลาดของ Google Chat