Menambahkan Chat ke aplikasi AppSheet Anda

1. Sebelum memulai

Aplikasi chat adalah layanan atau aplikasi web yang berjalan di Google Chat. AppSheet sekarang dapat mengaktifkan aplikasi AppSheet apa pun untuk dijalankan sebagai aplikasi Chat. Setelah diaktifkan dan dipublikasikan, aplikasi Chat ini memberikan faktor bentuk tambahan untuk data yang disajikan di aplikasi AppSheet

Yang akan Anda pelajari

  • Cara mengambil aplikasi contoh template yang ada dan mengaktifkan aplikasi Chat untuknya.
  • Cara menyesuaikan perilaku aplikasi Chat.
  • Cara menambahkan aplikasi chat ke ruang Chat Workspace yang ada.
  • Cara membangun otomatisasi chat yang mengirimkan pesan ke ruang Chat.

Yang akan Anda bangun

Codelab ini memandu Anda tentang cara menggunakan aplikasi template yang ada, lalu mengaktifkan, mengonfigurasi, dan memublikasikannya sebagai aplikasi chat. Codelab ini kemudian menunjukkan cara menambahkan aplikasi Chat ke Ruang Chat yang ada untuk menyiarkan pesan chat melalui otomatisasi.

Yang akan Anda butuhkan

2. Menyalin aplikasi template Simple Inventory

Untuk memulai, salin aplikasi Template Simple Inventory. Aplikasi ini kemudian diaktifkan untuk chat di codelab ini.

  1. Buka halaman beranda AppSheet (appsheet.com), lalu klik Create > App > Start with a template.

App > Start with a template." class="l10n-absolute-url-src" l10n-attrs-original-order="alt,style,src,srcset,sizes,class" l10n-encrypted-style="ZnA1G1PPuFxW2RtF2PvSZE8zz2uYoEmRhrQeP6/mnhY=" sizes="(max-width: 840px) 100vw, 856px" src="https://codelabs.developers.google.com/static/appsheet-chat/img/16c05f348a159df2.png" srcset="/static/appsheet-chat/img/16c05f348a159df2_36.png 36w,/static/appsheet-chat/img/16c05f348a159df2_48.png 48w,/static/appsheet-chat/img/16c05f348a159df2_72.png 72w,/static/appsheet-chat/img/16c05f348a159df2_96.png 96w,/static/appsheet-chat/img/16c05f348a159df2_480.png 480w,/static/appsheet-chat/img/16c05f348a159df2_720.png 720w,/static/appsheet-chat/img/16c05f348a159df2_856.png 856w,/static/appsheet-chat/img/16c05f348a159df2_960.png 960w,/static/appsheet-chat/img/16c05f348a159df2_1440.png 1440w,/static/appsheet-chat/img/16c05f348a159df2_1920.png 1920w,/static/appsheet-chat/img/16c05f348a159df2_2880.png 2880w" style="width: 423.40px" />

  1. Pada kartu aplikasi template Simple Inventory, klik Copy.

Klik Copy pada template Simple Inventory.

  1. Dalam dialog Clone your app, beri nama aplikasi Simple Inventory Chat.

Dialog clone aplikasi.

Salinan baru dari aplikasi template dibuat dan dimuat ke dalam editor AppSheet.

Salinan template Aplikasi Simple Inventory di editor Appsheet.

  1. Saat aplikasi dimuat, perhatikan peringatan tentang Bot yang hanya mengirim email kepada pemilik aplikasi karena tidak di-deploy. Untuk mengaktifkan Chat, Anda perlu men-deploy aplikasi. Jadi, deploy aplikasi dengan mengklik halaman Manage di editor. Kemudian klik Publish, lalu klikMove app to deployed state.

Men-deploy aplikasi.

3. Membuat dan menyesuaikan aplikasi Chat baru

Beberapa langkah di bawah ini menunjukkan cara membuat aplikasi Chat baru di aplikasi AppSheet saat ini.

Membuat aplikasi Chat

  1. Buka halaman setelan Chat di Navigator AppSheet untuk melihat setelan Chat.

Halaman setelan chat di editor AppSheet.

  1. Untuk mulai menyiapkan aplikasi Chat, klik Create.
  2. Dalam dialog Enable, klik Next untuk melanjutkan.

Gambar dialog Enable.

Penting: Sebuah pesan muncul, yang menjelaskan bahwa perlu beberapa menit untuk membuat aplikasi Chat. Jangan memuat ulang halaman ini.

Pesan yang menjelaskan untuk tidak menghapus halaman.

  1. Saat aplikasi Chat dibuat, halaman Customize muncul.

Pada tahap ini, aplikasi Chat sudah dibuat dan sudah dipublikasikan. Langkah-langkah penyesuaian berikut bersifat opsional.

Halaman penyesuaian aplikasi Chat.

  1. Klik First Message dan tetapkan Message text untuk menyesuaikan pesan pertama yang ditampilkan saat Chat muncul. Tambahkan pesan kustom apa pun yang ingin Anda tampilkan saat aplikasi Chat pertama kali dirender.

Menyesuaikan teks pesan.

  1. Scroll ke bahwa ke Configure actions, lalu klik Action.

Halaman Configure actions.

  1. Di menu Action yang muncul, pilih opsi pertama, Slash command: Open app view.

Menu kontekstual Actions

  1. Masukkan:

App View

Inventory_log (pilih dari dropdown)

Name

/log

Description

View the inventory log

Opsi Slash command.

  1. Klik Next untuk melanjutkan.

Selamat! Aplikasi Chat pertama Anda dari AppSheet kini sudah di-deploy.

Layar aplikasi Chat sudah di-deploy.

4. Menginstal aplikasi Chat Anda

Setelah aplikasi Anda di-deploy, Anda perlu menginstalnya di lingkungan Chat untuk menggunakannya.

Untuk menginstal, ikuti langkah-langkah berikut:

  1. Buka Google Chat.
  2. Klik ikon + di sebelah kanan Chat.
  3. Cari aplikasi Anda, Simple Inventory Chat.

Menambahkan aplikasi chat ke Chat

  1. Cari aplikasi Anda di hasil yang ditampilkan, lalu klik untuk menginstalnya.

Tampilan aplikasi Chat setelah penginstalan di jendela Chat.

Setelah diinstal, aplikasi Chat Anda mengirimkan pesan langsung dengan kartu menu.

  1. Untuk menguji aplikasi, klik Inventory Log (atau link lainnya di kartu Chat).

Inventaris saat ini ditampilkan di jendela Chat.

Aplikasi Simple Inventory Chat.

  1. Opsional: Klik link lain, Items. Perhatikan bahwa tindakan ini akan membuka aplikasi di jendela baru. Hal ini terjadi karena tampilan Items tidak didukung di UI Chat.

Tampilan Items tidak didukung dalam tampilan Chat.

  1. Opsional: bereksperimenlah lebih banyak dengan versi aplikasi Chat dari aplikasi Simple Inventory Chat.

5. Menambahkan aplikasi Chat ke Ruang Chat

Beberapa langkah di bawah ini akan menambahkan aplikasi Chat ke Ruang Chat. Hal ini berguna saat Anda ingin aplikasi Chat menyiarkan pesan kepada sekelompok orang.

Membuat Ruang Chat baru

Untuk melanjutkan, Anda harus memiliki Ruang Chat untuk digunakan.

  1. Di jendela Chat di kiri bawah, klik ikon + di samping Spaces untuk menambahkan Ruang baru.

Menu kontekstual ruang Chat.

  1. Klik Create a space.
  2. Dalam dialog yang muncul, beri nama Ruang baru tersebut sesuai keinginan Anda. Nama yang direkomendasikan adalah Inventory Chat Space, karena codelab akan merujuk ke nama ini nanti.

Dialog Create a Space.

  1. Klik Create untuk menyelesaikan pembuatan Ruang baru.

Setelah dibuat, ruang chat baru akan muncul di pojok kiri bawah jendela Chat.

UI Spaces.

Menambahkan aplikasi Chat Anda ke Ruang Chat baru

  1. Untuk menambahkan aplikasi Chat Anda ke Ruang Chat, klik Space, lalu klik panah bawah di samping kanan nama Ruang Chat tersebut. Tindakan ini akan memanggil menu drop-down kontekstual.
  2. Klik Apps & integrations.

Screenshot Apps & Integrations.

Muncul dialog yang memungkinkan Anda menambahkan aplikasi ke Ruang Anda.

  1. Klik tombol + Add apps.

Screenshot menambahkan aplikasi ke Inventory Chat Space.

  1. Dalam dialog yang muncul, cari aplikasi Simple Inventory Chat, lalu klik Add.

Screenshot menambahkan aplikasi ke Ruang Chat.

Saat aplikasi Chat selesai ditambahkan ke Ruang Anda, aplikasi akan mengirimkan pesan ke ruang tersebut.

Jendela chat dengan aplikasi chat baru ditambahkan.

Setelah aplikasi Chat baru Anda terinstal di Ruang Chat, kembali ke aplikasi Chat dan tambahkan Automation untuk mengirim pesan ke Ruang Chat ini.

6. Membangun otomatisasi Chat untuk mengirim pesan ke Ruang Chat

Beberapa langkah di bawah ini menunjukkan cara memublikasikan aplikasi Chat:

  1. Kembali ke aplikasi AppSheet dan buka kembali halaman setelan Chat (jika sudah tidak terbuka).
  2. Klik Customize untuk membuka setelan aplikasi Chat.
  3. Klik tombol + Action untuk memanggil menu kontekstual untuk tindakan Chat.

Tombol Action.

  1. Klik opsi Message when data changes. Tindakan ini menghasilkan otomatisasi lengkap untuk mengirim pesan ketika terjadi perubahan data.

Menu Kontekstual Actions.

Otomatisasi baru muncul di editor AppSheet.

Penting: Jangan dulu mengklik Save di pojok kanan atas. Anda perlu mengonfigurasi otomatisasi lebih lanjut.

  1. Klik proses Send a chat message

Otomatisasi Chat.

Tindakan ini membuka jendela setelan di sebelah kanan.

  1. Pada Message Content dan Space ID(s), klik Add.

Menambahkan Ruang Chat ke otomatisasi Chat.

  1. Klik opsi Inventory Chat Space untuk mengonfigurasi otomatisasi guna mengirim pesan ke ruang chat ini.
  2. Perbarui Message Text sebagai The Items table was updated.
  3. Pada drop-down untuk setelan Send an app view (optional), pilih Items_Detail.

Message Content sekarang sudah selesai.

Setelan konten pesan terakhir.

  1. Di pojok kanan atas editor AppSheet, klik Save.

Aplikasi Chat Anda sekarang dikonfigurasi untuk mengirim pesan ke Ruang Chat Anda.

7. Menguji otomatisasi Chat Anda

Beberapa langkah di bawah ini memungkinkan Anda menguji otomatisasi untuk melihatnya mengirim pesan ke ruang Chat Anda. Di jendela Preview editor Appsheet, perbarui data di tabel Items. Tindakan ini memicu otomatisasi untuk mengirim pesan ke Ruang Chat.

  1. Di jendela Preview editor AppSheet, klik ikon mobile63e1499db148fde8.png untuk menampilkan aplikasi dalam tampilan seluler. Kemudian klik data—misalnya, Saw.

Aplikasi di jendela pratinjau seluler.

  1. Pada tampilan Details data tersebut, klik ikon Edit.

Tampilan Detail Data.

  1. Ubah Description menjadi Cordless powered circular saw.

Mengedit deskripsi dalam Data.

  1. Klik Save di jendela Preview, yang memicu pesan yang dikirim ke Ruang Chat Anda.

Anda akan mendengar notifikasi bing Chat setelah pesan diterima.

  1. Kembali ke jendela Chat, lalu klik Chat Space di pojok kiri bawah dan lihat pesan baru The Items table was updated bersama kartu chat Items_Detail.

UI Chat dengan kemunculan pesan dari aplikasi Chat.

8. Selamat

Anda telah menyelesaikan codelab Aplikasi Chat AppSheet.

Bacaan lebih lanjut