Tutorial ini menunjukkan cara mem-build aplikasi Google Chat yang membantu pengguna Google Chat mengelola kontak pribadi dan bisnis mereka. Untuk mengumpulkan informasi, aplikasi Chat akan meminta pengguna untuk menyelesaikan formulir kontak dalam dialog dan pesan kartu.
Lihat cara kerja aplikasi Chat:
-
Gambar 2. Tujuan Aplikasi Chat membuka dialog tempat pengguna dapat memasukkan informasi tentang kontak. -
Gambar 3. Tujuan Aplikasi Chat menampilkan dialog konfirmasi sehingga pengguna dapat meninjau dan mengonfirmasi informasi sebelum mengirimkan. -
Gambar 4. Setelah pengguna mengirimkan formulir, aplikasi Chat akan mengirim pesan teks pribadi untuk mengonfirmasi pengiriman. -
Gambar 5. Aplikasi Chat juga meminta pengguna untuk menambahkan kontak dari kartu dalam pesan.
Prasyarat
- Sebuah Business atau Enterprise Akun Google Workspace yang memiliki akses ke Google Chat.
Tujuan
- Mendesain dan mem-build antarmuka pengguna (UI)
sebagai objek
card
, serta menampilkan UI dalam pesan dan dialog. - Menerima dan memproses informasi yang dikirimkan pengguna menggunakan widget input formulir.
- Respons perintah garis miring dengan mengirim pesan yang berisi teks, kartu, dan widget aksesori.
Arsitektur
Aplikasi Chat bawaan Google Apps Script dan penggunaan peristiwa interaksi yang akan diproses dan merespons pengguna Chat.
Berikut ini memperlihatkan bagaimana pengguna biasanya berinteraksi dengan Aplikasi Chat:
Pengguna membuka pesan langsung dengan aplikasi Chat, atau menambahkan aplikasi Chat ke ruang yang ada.
Aplikasi Chat meminta pengguna untuk menambahkan kontak dengan mem-build dan menampilkan formulir kontak sebagai objek
card
. Untuk mempresentasikan formulir kontak, aplikasi Chat merespons pengguna dengan cara berikut:- Membalas @sebutan dan pesan langsung dengan pesan kartu yang berisi formulir kontak.
- Merespons perintah garis miring
/addContact
dengan membuka dialog berisi formulir kontak. - Merespons perintah garis miring
/about
dengan pesan teks yang memiliki Tombol Tambahkan kontak yang dapat diklik pengguna untuk membuka dialog dengan formulir kontak.
Saat ditampilkan dengan formulir kontak, pengguna memasukkan informasi kontak ke dalam kolom dan widget berikut:
- Nama depan dan belakang:
textInput
yang menerima string. - Tanggal lahir: widget
dateTimePicker
yang hanya menerima tanggal. - Jenis kontak: widget
selectionInput
tombol pilihan yang memungkinkan pengguna memilih dan mengirimkan satu nilai string (Personal
atauWork
). - Tombol Tinjau dan kirim: a
buttonList
dengan widgetbutton
yang diklik pengguna untuk mengirimkan nilai yang yang mereka masukkan.
- Nama depan dan belakang:
Aplikasi Google Chat menangani peristiwa interaksi
CARD_CLICKED
untuk memproses nilai yang dimasukkan pengguna, dan menampilkan nilai dalam kartu konfirmasi.Pengguna meninjau kartu konfirmasi dan mengklik tombol Kirim untuk menyelesaikan informasi kontak.
Aplikasi Google Chat mengirim pesan teks pribadi yang mengonfirmasi pengiriman.
Menyiapkan lingkungan
Bagian ini menunjukkan cara membuat dan mengonfigurasi project Google Cloud untuk Aplikasi Chat.
Membuat project Google Cloud
Konsol Google Cloud
- Di konsol Google Cloud, buka Menu > IAM & Admin > Buat Project.
-
Di kolom Project Name, masukkan nama deskriptif untuk project Anda.
Opsional: Untuk mengedit Project ID, klik Edit. Project ID tidak dapat diubah setelah proyek dibuat, jadi pilihlah ID yang sesuai dengan kebutuhan Anda sepanjang waktu proyek.
- Di kolom Lokasi, klik Jelajahi untuk menampilkan potensi lokasi untuk proyek. Kemudian, klik Select.
- Klik Buat. Konsol Google Cloud membuka halaman Dashboard dan project Anda telah dibuat dalam beberapa menit.
gcloud CLI
Di salah satu lingkungan pengembangan berikut, akses paket Google Cloud
CLI (gcloud
):
-
Cloud Shell: Untuk menggunakan terminal online dengan gcloud CLI
yang sudah disiapkan, aktifkan Cloud Shell.
Aktifkan Cloud Shell -
Shell Lokal: Untuk menggunakan lingkungan pengembangan lokal,
instal dan
lakukan inisialisasi
gcloud CLI.
Untuk membuat project Cloud, gunakan perintahgcloud projects create
: Ganti PROJECT_ID dengan menetapkan ID untuk project yang ingin Anda buat.gcloud projects create PROJECT_ID
Menyiapkan autentikasi dan otorisasi
Aplikasi Google Chat mengharuskan Anda mengonfigurasi layar izin OAuth sehingga pengguna dapat memberikan otorisasi ke aplikasi Anda di aplikasi Google Workspace, termasuk Google Chat.
Dalam tutorial ini, Anda akan men-deploy aplikasi Chat khusus untuk pengujian dan penggunaan internal, tidak masalah menggunakan informasi {i>placeholder<i} untuk layar persetujuan. Sebelum memublikasikan aplikasi Chat, ganti informasi placeholder dengan informasi yang sebenarnya.
Di konsol Google Cloud, buka Menu > APIs & Services > OAuth consent screen.
Di bagian Jenis pengguna, pilih Internal, lalu klik Buat.
Di App name, ketik
Contact Manager
.Di bagian Email dukungan pengguna, pilih alamat email Anda atau alamat Grup Google.
Di bagian Informasi kontak developer, masukkan alamat email Anda.
Klik Simpan dan Lanjutkan.
Di halaman Cakupan, klik Simpan dan Lanjutkan. (Aplikasi Chat tidak memerlukan cakupan OAuth apa pun.)
Tinjau ringkasan, lalu klik Kembali ke Dasbor.
Membuat dan men-deploy aplikasi Chat
Di bagian berikut, Anda akan menyalin dan memperbarui seluruh Project Apps Script yang berisi semua aplikasi yang diperlukan kode aplikasi Chat, jadi tidak perlu menyalin dan tempelkan setiap file.
Atau, Anda dapat melihat seluruh project di GitHub.
Berikut ringkasan setiap filenya:
main.gs
Menangani semua logika aplikasi, termasuk peristiwa interaksi tentang kapan pengguna mengirim pesan ke aplikasi Chat, klik tombol dari pesan aplikasi Chat, atau membuka dan menutup dialog.
Lihat kode
main.gs
contactForm.gs
Berisi widget yang menerima data formulir dari pengguna. Input formulir ini widget ditampilkan di kartu yang muncul dalam pesan dan dialog.
Lihat kode
contactForm.gs
appsscript.json
Tujuan Manifes Apps Script yang mendefinisikan dan mengonfigurasi project Apps Script untuk Aplikasi Chat.
Lihat kode
appsscript.json
Menemukan nomor dan ID project Cloud Anda
Di konsol Google Cloud, buka project Cloud Anda.
Klik Settings and Utilities > Project settings.
Catat nilai di kolom Project number dan Project ID. Anda akan menggunakannya di bagian berikut.
Membuat project Apps Script
Untuk membuat project Apps Script dan menghubungkannya dengan project Cloud Anda:
- Klik tombol berikut untuk membuka project Apps Script Kelola kontak di Google Chat.
Membuka project - Klik Ringkasan.
- Di halaman ringkasan, klik Buat salinan.
Beri nama salinan project Apps Script:
Klik Salinan Kelola kontak di Google Chat.
Di Project title, ketik
Contact Manager - Google Chat app
Klik Ganti nama.
Menetapkan project Cloud project Apps Script
- Di project Apps Script Anda, klik Project Settings.
- Pada Google Cloud Platform (GCP) Project, klik Change project.
- Di GCP project number, tempel nomor project dari project Cloud Anda.
- Klik Set project. Project Cloud dan Apps Script sekarang terhubung.
Membuat deployment Apps Script
Setelah semua kode berada di tempatnya, deploy Apps Script proyek. Anda menggunakan ID deployment saat mengonfigurasi Aplikasi Chat di Google Cloud.
Di Apps Script, buka project aplikasi Chat.
Klik Deploy > Deployment baru.
Jika Add-on belum dipilih, di samping Pilih jenis, klik jenis deployment , lalu pilih Add-on.
Di bagian Description, masukkan deskripsi untuk versi ini, seperti
Test of Contact Manager
.Klik Deploy. Laporan Apps Script berhasil deployment dan memberikan ID deployment.
Klik
Salin untuk menyalin ID deployment, lalu klik Selesai.
Mengonfigurasi aplikasi Chat di Konsol Google Cloud
Bagian ini menunjukkan cara mengonfigurasi Google Chat API di konsol Google Cloud dengan informasi tentang aplikasi Chat Anda, termasuk ID deployment yang baru saja dibuat dari Apps Script proyek.
Di Konsol Google Cloud, klik Menu > Produk lainnya > Google Workspace > Library Produk > Google Chat API > Kelola > Konfigurasi.
Di App name, ketik
Contact Manager
.Di Avatar URL, ketik
https://developers.google.com/chat/images/contact-icon.png
.Di Deskripsi, ketik
Manage your personal and business contacts
.Klik tombol Enable Interactive features ke posisi aktif.
Di bawah Functionality, centang kotak Receive 1:1 messages dan Bergabung ke ruang dan percakapan grup.
Di bagian Connection settings, pilih Apps Script..
Di ID Deployment, tempel ID Deployment Apps Script yang Anda salin di bagian sebelumnya saat membuat Deployment Apps Script.
Di bagian Perintah garis miring, siapkan perintah garis miring
/about
dan/addContact
:- Klik Add a slash command untuk menyiapkan perintah garis miring pertama.
- Di Name, ketik
/about
. - Pada Command ID, ketik
1
. - Di Description, ketik
Learn how to use this Chat app to manage your contacts
. - Pilih Opens a dialog.
- Klik Selesai.
- Klik Add a slash command untuk menyiapkan perintah garis miring lainnya.
- Di Nama, ketik
/addContact
- Pada Command ID, ketik
2
. - Di Deskripsi, ketik
Submit information about a contact
. - Pilih Opens a dialog.
- Klik Selesai.
Di bagian Visibilitas, centang kotak Buat aplikasi Chat ini tersedia untuk orang dan grup tertentu di YOUR DOMAIN, lalu masukkan alamat email Anda.
Di bagian Logs, pilih Log errors to Logging.
Klik Simpan. Pesan konfigurasi tersimpan akan muncul.
Aplikasi Chat siap diinstal dan diuji di Chat.
Menguji aplikasi Chat
Untuk menguji aplikasi Chat, buka ruang pesan langsung dengan aplikasi Chat dan kirim pesan:
Buka Google Chat menggunakan akun Google Workspace yang telah Anda yang diberikan ketika Anda menambahkan diri Anda sebagai penguji tepercaya.
- Klik Chat baru.
- Di kolom Tambahkan 1 orang atau lebih, ketik nama aplikasi Chat Anda.
Pilih aplikasi Chat Anda dari hasil yang ditampilkan. Iklan langsung pesan terbuka.
Di pesan langsung baru dengan aplikasi Chat, ketik
/addContact
dan tekan enter.Pada dialog yang terbuka, masukkan informasi kontak:
- Di kolom teks Nama depan dan nama belakang, masukkan nama.
- Di pemilih tanggal Birthdate, pilih tanggal.
- Di bagian Jenis kontak, pilih tombol pilihan Kantor atau Pribadi.
Klik Tinjau dan kirim.
Pada dialog konfirmasi, tinjau informasi yang Anda kirimkan dan klik Kirim. Aplikasi Chat membalas dengan teks pesan yang bertuliskan
✅ CONTACT NAME has been added to your contacts.
.Secara opsional, Anda juga dapat menguji dan mengirimkan formulir kontak dalam cara:
- Gunakan perintah garis miring
/about
. Balasan aplikasi Chat dengan pesan teks dan tombol widget aksesori yang bertuliskanAdd a contact
. Anda dapat mengklik tombol untuk membuka dialog dengan formulir kontak. - Kirim pesan langsung ke aplikasi Chat tanpa
perintah garis miring, seperti
Hello
. Aplikasi Chat membalas dengan teks dan kartu yang berisi formulir kontak.
- Gunakan perintah garis miring
Pembersihan
Agar tidak menimbulkan biaya ke akun Google Cloud Anda untuk sumber daya yang digunakan dalam tutorial ini, sebaiknya Anda menghapus project Google Cloud.
- Di Konsol Google Cloud, buka halaman Manage resources. Klik Menu > IAM & Admin > Kelola Resource.
- Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus .
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
Topik terkait
- Merespons perintah garis miring
- Mengumpulkan dan memproses informasi dari pengguna Google Chat
- Membuka dialog interaktif
- Menjelajahi contoh aplikasi Google Chat lainnya