Membuat kartu untuk aplikasi Google Chat

Halaman ini menjelaskan cara membuat komponen dan struktur kartu. Kartu adalah antarmuka pengguna yang dapat digunakan aplikasi Google Chat untuk menyajikan dan mengumpulkan informasi dari pengguna Chat. Aplikasi Chat dapat membuat dan menampilkan kartu di antarmuka berikut:

  • Pesan yang berisi satu atau beberapa kartu.
  • Halaman beranda, yang merupakan kartu yang muncul dari tab Beranda dalam pesan langsung dengan aplikasi Chat.
  • Dialog, yaitu kartu yang terbuka di jendela baru dari pesan dan halaman beranda.

Di halaman ini, Anda akan mempelajari komponen kartu berikut:

  • Header, yang biasanya berisi judul kartu atau bagian kartu.
  • Bagian, yang membentuk isi utama kartu, termasuk widget dan elemen interaktif lainnya. Di bagian kartu, Anda dapat menambahkan lebih banyak struktur ke kartu, termasuk kolom dan petak.
  • Footer tetap, yang muncul di bagian bawah dialog untuk menampilkan elemen UI persisten, seperti tombol.

Prasyarat

Aplikasi Google Chat yang dikonfigurasi untuk menerima dan merespons peristiwa interaksi. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkan arsitektur aplikasi yang ingin Anda gunakan:

Gunakan Pembuat Kartu untuk mendesain dan melihat pratinjau pesan dan antarmuka pengguna untuk aplikasi Chat:

Buka Pembuat Kartu

Menambahkan header

Widget CardHeader mewakili header kartu. Header dapat menyertakan judul, subtitel, dan gambar avatar untuk kartu Anda.

Berikut adalah contoh CardHeader:

Menambahkan satu atau beberapa bagian kartu

Widget CardSection adalah penampung tingkat tinggi dalam kartu. Anda menggunakan bagian kartu untuk mengelompokkan widget dalam kartu. Untuk setiap bagian kartu, Anda dapat menyertakan header dan satu atau beberapa widget.

Berikut adalah contoh CardSection yang berisi dua widget textParagraph:

Menambahkan pembagi horizontal di antara widget

Widget divider menampilkan garis horizontal yang mencakup lebar kartu di antara widget yang ditumpuk secara vertikal. Garis adalah pemisah visual yang membantu pengguna membedakan satu widget dengan widget lainnya, sehingga kartu lebih mudah dipindai dan dipahami.

Berikut adalah kartu yang terdiri dari widget divider di antara jenis widget lainnya:

Tambahkan kolom

Widget columns menampilkan hingga 2 kolom dalam kartu. Anda dapat menambahkan widget ke setiap kolom; widget akan muncul dalam urutan yang ditentukan. Untuk menyertakan lebih dari 2 kolom, atau untuk menggunakan baris, gunakan widget grid.

Tinggi setiap kolom ditentukan oleh kolom yang lebih tinggi. Misalnya, jika kolom pertama lebih tinggi daripada kolom kedua, kedua kolom akan memiliki tinggi kolom pertama. Karena setiap kolom dapat berisi jumlah widget yang berbeda, Anda tidak dapat menentukan baris atau menyelaraskan widget di antara kolom.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks. Untuk melihat tata letak kolom saja dan menciutkan contoh kode, klik Ciutkan. Jika ruang terbatas, seperti dalam contoh berikut, kolom kedua akan di-wrap di bawah kolom pertama.

Menentukan lebar kolom

Kolom ditampilkan berdampingan. Anda dapat menyesuaikan lebar setiap kolom menggunakan kolom horizontalSizeStyle. Jika lebar layar pengguna terlalu sempit, kolom kedua akan berada di bawah kolom pertama:

  • Di web, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 480 piksel.
  • Di perangkat iOS, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 300 pt.
  • Di perangkat Android, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 320 dp.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks dengan 4 item di kolom. Setiap item dalam kolom memiliki horizontalSizeStyle yang diterapkan untuk memanipulasi seberapa banyak ruang yang diisi teks di setiap kolom:

  • Paragraf teks pertama menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% lebar kartu.
  • Paragraf teks kedua menggunakan FILL_AVAILABLE_SPACE untuk mengisi ruang yang tersedia dalam lebar kartu. Dalam contoh ini, lebarnya mengisi 70% dari lebar kartu.
  • Paragraf teks ketiga tidak menentukan horizontalSizeStyle sehingga secara default akan mengisi ruang yang tersedia di ruang kartu.
  • Paragraf teks keempat menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% lebar kartu.

Menentukan perataan horizontal kolom

Anda dapat meratakan widget secara horizontal ke kiri, kanan, atau tengah kolom dengan menentukan kolom horizontalAligment. Jika kolom horizontalAlignment tidak ditentukan, widget akan disejajarkan ke kiri dalam kolom.

Contoh berikut meratakan teks secara horizontal dalam kolom ke kiri:

Contoh berikut meratakan teks secara horizontal di tengah kolom:

Contoh berikut meratakan teks secara horizontal dalam kolom ke kanan:

Menentukan perataan vertikal kolom

Anda dapat menyelaraskan widget secara vertikal ke bagian atas, bawah, atau tengah kolom dengan menentukan kolom verticalAlignment. Jika kolom verticalAlignment tidak ditentukan, widget dalam kolom akan disejajarkan ke atas.

Contoh berikut menyelaraskan teks secara vertikal dalam kolom ke atas:

Contoh berikut menyelaraskan teks secara vertikal di tengah kolom:

Contoh berikut menyelaraskan teks secara vertikal dalam kolom di bagian bawah:

Menambahkan petak untuk menampilkan koleksi item

Widget grid menampilkan petak dengan kumpulan item. Petak mendukung sejumlah kolom dan item. Jumlah baris ditentukan oleh item dibagi dengan kolom. Petak dengan 10 item dan 2 kolom memiliki 5 baris. Petak dengan 11 item dan 2 kolom memiliki 6 baris.

Widget ini mendukung saran, yang membantu pengguna memasukkan data yang seragam, dan tindakan saat perubahan, yang merupakan Actions yang berjalan saat perubahan terjadi di kolom input teks, seperti pengguna menambahkan atau menghapus teks.

Contoh berikut adalah petak 2 kolom dengan satu item:

Untuk menentukan posisi teks yang muncul dengan gambar dalam petak, Anda dapat menentukan kolom gridItemLayout. Kolom ini memungkinkan Anda menentukan apakah teks muncul di atas atau di bawah item dalam petak. Jika gridItemLayout tidak ditentukan, teks akan muncul secara default di bawah item dalam petak.

Contoh berikut adalah petak tiga kolom dengan teks dan gambar di setiap petaknya. Petak pertama menentukan teks yang akan muncul di atas gambar, petak kedua menentukan teks yang akan muncul di bawah gambar, dan petak ketiga tidak menentukan posisi teks.

Menambahkan batas ke petak atau kolom

Untuk item yang muncul di widget column atau grid, Anda dapat menambahkan batas ke elemen UI ini dengan menentukan kolom borderType dan kolom borderStyle. Jika tidak ada kolom borderStyle yang ditentukan, kolom ini akan menampilkan tanpa batas secara default. Anda dapat menentukan borderType untuk diterapkan ke semua item dalam widget atau menerapkan gaya ke setiap item dalam widget.

Contoh berikut adalah petak 2 kolom dengan gambar di setiap petak yang jenis, gaya, dan warna batasnya telah ditentukan untuk diterapkan ke semua item dalam petak.

Contoh berikut adalah petak 3 kolom dengan gambar di setiap petak dan gaya serta jenis batas yang ditentukan secara terpisah. Gambar pertama memiliki batas yang ditentukan sebagai STROKE. Gambar kedua memiliki batas yang ditentukan sebagai NO_BORDER. Gambar ketiga tidak memiliki batas yang ditentukan.

Menambahkan carousel

Widget Carousel menampilkan kumpulan objek CarouselCard yang dapat di-scroll di dalam dan di luar layar. Anda dapat menambahkan beberapa widget ke setiap CarouselCard.

Widget 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 atau kartu Google Chat menampilkan error, antarmuka Chat akan menampilkan pesan yang mengatakan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi atau kartu Chat menghasilkan hasil yang tidak terduga; misalnya, pesan kartu mungkin tidak muncul.

Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error jika logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.