Membuat kartu untuk aplikasi Google Chat

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

  • Pesan yang berisi satu atau lebih kartu.
  • Halaman beranda, yaitu kartu yang muncul dari tab Beranda secara 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 kartu bagian.
  • Bagian, yang membentuk isi utama kartu, termasuk widget dan elemen interaktif lainnya. Di 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 yang persisten, seperti tombol.

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:

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan dan antarmuka pengguna untuk aplikasi Chat:

Membuka Card Builder

Menambahkan header

Widget CardHeader mewakili {i>header<i} sebuah kartu. {i>Header<i} dapat mencakup judul, sub judul, dan gambar avatar untuk kartu Anda.

Berikut adalah contoh CardHeader:

Tambahkan satu atau beberapa bagian kartu

Widget CardSection adalah container tingkat 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.

Berikut adalah contoh CardSection yang berisi dua textParagraph widget:

Menambahkan pemisah horizontal antar-widget

Tujuan Widget divider menampilkan garis horizontal yang membentang selebar kartu di antara widget yang ditumpuk secara vertikal. Garis adalah pemisah visual yang membantu pengguna dapat membedakan satu widget dengan widget lainnya, sehingga kartu lebih mudah dipindai dan pahami.

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

Tambahkan kolom

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

Ketinggian 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 angka yang berbeda widget, Anda tidak dapat menentukan baris atau meratakan widget di antara kolom.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks. Untuk melihat tata letak kolom saja dan menciutkan kode contoh, klik Ciutkan. Ketika ruang dibatasi, seperti dalam contoh berikut, kolom kedua yang digabungkan di bawah kolom pertama.

Menentukan lebar kolom

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

  • Di web, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 480 piksel.
  • Pada perangkat iOS, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 300 pt.
  • Pada 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 di kolom. Setiap item dalam kolom memiliki horizontalSizeStyle diterapkan untuk memanipulasi seberapa besar ruang teks mengisi setiap kolom:

  • Paragraf teks pertama menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% dari lebar kartu.
  • Paragraf teks kedua menggunakan FILL_AVAILABLE_SPACE untuk mengisi teks yang tersedia spasi selebar kartu. Dalam contoh ini, ini mengisi 70% dari lebarnya.
  • Paragraf teks ketiga tidak menentukan horizontalSizeStyle, jadi default-nya untuk mengisi ruang yang tersedia pada kartu.
  • Paragraf teks keempat menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% dari lebar kartu.

Menentukan perataan horizontal kolom

Anda dapat meratakan widget secara horizontal ke kiri, kanan, atau tengah kolom dengan mendefinisikan Kolom horizontalAligment. Jika kolom horizontalAlignment tidak ditentukan, widget akan disejajarkan dengan ke kiri di 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 mendefinisikan Kolom verticalAlignment. Jika kolom verticalAlignment tidak ditentukan, widget dalam kolom akan disejajarkan ke atas.

Contoh berikut meratakan teks secara vertikal dalam kolom ke atas:

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

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

Menambahkan petak untuk menampilkan koleksi item

Tujuan Widget grid menampilkan petak dengan kumpulan item. Suatu {i>grid<i} mendukung sejumlah kolom dan item. Jumlah baris ditentukan dengan item dibagi dengan kolom. Grid dengan 10 item dan 2 kolom memiliki 5 baris. Sebuah {i>grid<i} dengan 11 item dan 2 memiliki 6 baris.

Widget mendukung saran, yang membantu pengguna memasukkan data yang seragam, dan tindakan sesuai perubahan, yaitu Actions yang berjalan ketika terjadi perubahan di isian {i>input <i}teks, seperti pengguna menambahkan atau menghapus teks.

Contoh berikut adalah petak 2 kolom dengan satu item:

Untuk mendefinisikan di mana teks akan muncul dengan gambar dalam kisi-kisi, Anda dapat menentukan Kolom gridItemLayout. Kolom ini memungkinkan Anda menentukan apakah teks muncul di atas atau di bawah item di {i>grid<i}. Jika gridItemLayout tidak ditentukan, teks akan ditetapkan secara default ke muncul di bawah item pada kisi.

Contoh berikut adalah kisi-kisi tiga kolom dengan teks dan gambar di setiap {i>grid<i}. {i>Grid<i} pertama menentukan teks yang akan muncul di atas gambar, {i>grid <i}kedua {i>grid <i}menentukan teks yang akan muncul di bawah gambar, dan {i>grid<i} ketiga tidak 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 mendefinisikan Kolom borderType dan Kolom borderStyle. Jika tidak ada kolom borderStyle yang ditentukan, kolom ini secara default tidak menampilkan batas. Anda dapat menentukan borderType untuk diterapkan ke semua item dalam widget atau menerapkan gaya visual ke setiap item individual dalam widget.

Contoh berikut adalah kisi-kisi 2 kolom dengan gambar di setiap kisi-kisi di mana jenis batas, gaya, dan warna telah ditetapkan untuk diterapkan ke semua item dalam {i>grid.<i}

Contoh berikut adalah {i>grid<i} 3 kolom dengan gambar di setiap {i>grid<i} dan gaya garis batas dan jenis yang ditentukan satu per satu. Yang pertama gambar memiliki batas yang ditetapkan sebagai STROKE. Gambar kedua memiliki batas yang didefinisikan sebagai NO_BORDER. Gambar ketiga tidak memiliki batas yang ditentukan.

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.