Halaman ini menjelaskan cara mendesain dan membuat komponen UI utama untuk kartu membuat pesan di Google Chat.
Kartu mendukung tata letak yang ditentukan, elemen UI interaktif, seperti tombol, dan multimedia seperti gambar. Anda dapat menggunakan kartu untuk menyajikan informasi, mengumpulkan masukan, atau memberikan langkah selanjutnya kepada pengguna melalui pesan kartu dan dialog.
Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:
Membuka Card BuilderKartu dan dialog umumnya memiliki komponen berikut:
CardHeader
yang berisi judul kartu Anda.- Satu atau beberapa widget
CardSection
yang membentuk bagian utama kartu. - Widget
CardFixedFooter
khusus untuk dialog.
Prasyarat
Aplikasi Google Chat yang diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkan pada arsitektur aplikasi yang ingin Anda gunakan:
- Layanan HTTP dengan Google Cloud Functions
- Skrip Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Menambahkan header
Widget CardHeader
mewakili {i>header<i} sebuah kartu. {i>Header<i} dapat mencakup
judul, sub judul, dan gambar avatar untuk kartu Anda.
Anda dapat menyertakan CardHeader
untuk
pesan kartu dan
dialog.
Berikut adalah contoh CardHeader
:
Menentukan bagian kartu
Widget CardSection
adalah
container level tinggi di dalam kartu. Anda menggunakan kartu
untuk mengelompokkan widget dalam kartu. Untuk setiap bagian kartu, Anda dapat menyertakan
header dan satu atau beberapa widget.
Anda dapat menyertakan CardSection
untuk
pesan kartu dan
dialog.
Berikut adalah contoh CardSection
yang berisi dua textParagraph
widget:
Tombol kontrol yang dapat disesuaikan untuk Bagian yang dapat diciutkan
Sesuaikan tombol kontrol yang menciutkan dan meluaskan bagian dalam Kartu chat. Pilih dari beragam ikon atau gambar untuk mewakili secara visual konten rubrik, sehingga memudahkan pengguna untuk memahami dan berinteraksi dengan informasi.
Menambahkan footer persisten
CardFixedFooter
mewakili footer pesan dialog yang dikirim oleh
aplikasi Chat.
Footer dapat menyertakan tombol utama dan tombol sekunder.
Widget CardFixedFooter
hanya tersedia untuk
dialog.
Berikut adalah contoh widget CardFixedFooter
dengan dua tombol:
Memecahkan masalah
Saat aplikasi Google Chat atau kartu menampilkan error, Antarmuka Chat menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi Chat atau memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak akan muncul.
Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk bantuan melihat, men-debug, dan memperbaiki error, melihat Memecahkan masalah dan memperbaiki error Google Chat.