Membuat kartu untuk aplikasi Google Chat

Halaman ini menjelaskan cara mem-build komponen dan struktur kartu. Kartu adalah antarmuka pengguna yang dapat digunakan aplikasi Google Chat untuk menampilkan 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, yang merupakan 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 diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkan arsitektur aplikasi yang ingin Anda gunakan:

Gunakan Card Builder untuk mendesain dan melihat pratinjau antarmuka pengguna dan pesan 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 membentang di seluruh lebar kartu di antara widget yang ditumpuk secara vertikal. Garis adalah pemisah visual yang membantu pengguna membedakan antara 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 sesuai 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 dari kolom kedua, kedua kolom memiliki tinggi kolom pertama. Karena setiap kolom dapat berisi jumlah widget yang berbeda, Anda tidak dapat menentukan baris atau meratakan widget di antara kolom.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks. Untuk hanya melihat tata letak kolom dan menciutkan contoh kode, klik Ciutkan. Jika ruang dibatasi, seperti dalam contoh berikut, kolom kedua akan digabungkan 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 digabungkan di bawah kolom pertama:

  • Di web, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 480 piksel.
  • Di perangkat iOS, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 300 pt.
  • Di perangkat Android, kolom kedua akan digabungkan 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 dalam kolom. Setiap item dalam kolom telah menerapkan horizontalSizeStyle untuk memanipulasi jumlah 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, gambar mengisi 70% lebar kartu.
  • Paragraf teks ketiga tidak menentukan horizontalSizeStyle sehingga secara default 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 dalam kolom di tengah:

Contoh berikut meratakan teks secara horizontal dalam kolom ke kanan:

Menentukan perataan vertikal kolom

Anda dapat meratakan 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 menyejajarkan teks secara vertikal dalam kolom ke atas:

Contoh berikut meratakan teks secara vertikal dalam kolom di tengah:

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

Menambahkan petak untuk menampilkan kumpulan item

Widget grid menampilkan petak dengan kumpulan item. Petak mendukung jumlah kolom dan item berapa pun. Jumlah baris ditentukan oleh item yang 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 berubah, yaitu 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 tempat teks 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 petak. 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 tersebut akan ditetapkan secara default untuk tidak menampilkan batas. 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 tempat jenis, gaya, dan warna batas telah ditentukan untuk diterapkan ke semua item dalam petak.

Contoh berikut adalah petak 3 kolom dengan gambar di setiap petak serta gaya dan jenis batas yang ditentukan satu per satu. 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 Google Chat atau kartu menampilkan error, antarmuka Chat akan menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error, 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 saat logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.