Membangun add-on Google Chat dengan Dialogflow ES

Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu.

Halaman ini menjelaskan cara membuat aplikasi Google Chat sebagai Add-on Google Workspace yang menggunakan Dialogflow ES untuk memahami dan merespons bahasa alami. Anda juga dapat menggunakan Dialogflow CX, yang memiliki integrasi langsung dengan Google Chat, untuk membangun aplikasi Google Chat Dialogflow CX dengan mengikuti panduan Google Chat Dialogflow CX.

Tujuan

• Siapkan lingkungan Anda.
• Buat dan deploy agen Dialogflow ES.
• Buat dan deploy aplikasi Chat yang didukung oleh agen Dialogflow ES.
• Uji aplikasi Chat.

Prasyarat

• Akun Google Workspace Business atau Enterprise dengan akses ke Google Chat.
• Project Google Cloud yang mengaktifkan penagihan. Untuk memeriksa apakah penagihan diaktifkan untuk project yang ada, lihat Memverifikasi status penagihan project Anda. Untuk membuat project dan menyiapkan penagihan, lihat Membuat project Google Cloud.

Arsitektur

Diagram berikut menunjukkan arsitektur aplikasi Chat yang dibangun dengan Dialogflow:

Dalam diagram sebelumnya, pengguna yang berinteraksi dengan aplikasi Chat Dialogflow memiliki alur informasi berikut:

1. Pengguna mengirim pesan di Chat ke aplikasi Chat, baik di pesan langsung maupun di ruang Chat.
2. Agen virtual Dialogflow, yang berada di , menerima dan memproses pesan untuk menghasilkan respons.
3. Atau, menggunakan webhook Dialogflow, agen Dialogflow dapat berinteraksi dengan layanan pihak ketiga eksternal, seperti sistem manajemen project atau alat pembuatan tiket.
4. Agen Dialogflow mengirimkan respons kembali ke layanan aplikasi Chat di Chat.
5. Respons akan dikirim ke ruang Chat.

Menyiapkan lingkungan

Sebelum menggunakan Google API, Anda harus mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.

1. Di Konsol API Google, aktifkan Google Chat API dan Dialogflow API.

   Aktifkan API

2. Pastikan Anda mengaktifkan API di project Cloud yang benar, lalu klik Berikutnya.

3. Pastikan Anda mengaktifkan API yang benar, lalu klik Aktifkan.

Buat agen Dialogflow ES

Jika Anda belum memiliki agen Dialogflow ES:

1. Buka Konsol Dialogflow ES.
2. Klik Buat Agen.
3. Beri nama, pilih bahasa default, dan zona waktu.
4. Kaitkan dengan project Cloud Anda.
5. Klik Buat.
6. Bangun maksud dan entitas sesuai kebutuhan untuk alur percakapan aplikasi Chat Anda. Anda dapat memulai dengan maksud salam.
7. Catat Project ID Anda.

Untuk panduan mendetail, lihat Membangun Agen.

Membuat aplikasi Chat dan menghubungkannya dengan agen Dialogflow

Setelah membuat agen Dialogflow ES, ikuti langkah-langkah berikut untuk mengubahnya menjadi aplikasi Chat:

1. Di Konsol API Google, buka Google Chat API. Cari "Google Chat API", lalu klik Google Chat API, lalu klik Kelola.

   Buka Chat API

2. Klik Konfigurasi dan siapkan aplikasi Chat:

   1. Di App name, masukkan Dialogflow App.
   2. Di Avatar URL, masukkan https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
   3. Di Deskripsi, masukkan Responds to real human conversation.
   4. Di bagian Functionality, pilih Join spaces and group conversations.
   5. Di bagian Connection settings, pilih Dialogflow.
   6. Di bagian Dialogflow settings, pilih Dialogflow ES.
   7. Sediakan aplikasi Chat ini untuk orang dan grup tertentu di domain Anda dan masukkan alamat email Anda.
   8. Di bagian Logs, pilih Log errors to Logging.

3. Klik Simpan.

Aplikasi Chat siap menerima dan merespons pesan di Chat.

Menguji aplikasi Chat

Uji aplikasi Chat Dialogflow ES dengan mengirim pesan ke aplikasi tersebut di Google Chat.

1. Buka Google Chat menggunakan akun Google Workspace yang Anda berikan saat menambahkan diri Anda sebagai penguji tepercaya.

   Buka Google Chat

2. Klik Chat baru.
3. Di kolom Tambahkan 1 orang atau lebih, ketik nama aplikasi Chat Anda.

4. Pilih aplikasi Chat Anda dari hasil. Pesan langsung akan terbuka.

   Catatan: Jika Anda tidak melihat aplikasi Chat di daftar hasil, pastikan Anda telah menyertakan akun Google Workspace di setelan Visibilitas pada halaman Konfigurasi Chat API di Konsol Google API.

5. Di pesan langsung baru dengan aplikasi, ketik Hello, lalu tekan enter.

   Aplikasi Chat Dialogflow akan merespons dengan pesan sambutan.

Respons Teks

Respons teks dikirim ke Google Chat sebagai Pesan teks. Dengan pemformatan ini, Anda dapat membuat teks menjadi tebal atau miring dengan menyertakan teks dalam simbol tertentu (markdown ringan).

Respons pesan teks, secara visual terlihat sama dengan Respons Teks Default di Konsol Dialogflow. Namun, respons API mentah akan terlihat sedikit berbeda. Tindakan ini juga menetapkan konfigurasi platform ke GOOGLE_HANGOUTS, yang mungkin menarik saat membuat agen untuk beberapa integrasi.

"fulfillmentMessages": [
{
   "text": {
   "text": [
        "This is a test."
   ]
},
  "platform": "GOOGLE_HANGOUTS"
},

Kartu

Respons kartu dikirim ke Google Chat sebagai Pesan kartu.

Gambar

Respons gambar dikirim ke Google Chat sebagai Widget Gambar Google Chat.

Payload Kustom

Untuk mengirim jenis pesan Google Chat lainnya, Anda dapat menggunakan payload kustom.

Payload Kustom Google Chat memungkinkan Anda membuat kartu yang lebih canggih. Satu kartu dapat memiliki satu atau beberapa bagian. Setiap bagian dapat memiliki header. Anda dapat melihat Panduan referensi kartu Chat yang diperluas dengan Add-on Google Workspace untuk melihat beberapa kombinasi yang dapat Anda buat dengan fitur ini. Namun, menggunakan payload kustom berarti Anda harus memberikan format JSON.

Catatan: Saat Anda menyalin dan menempel contoh dari panduan referensi ke kotak payload kustom di Dialogflow, pastikan editor tidak berisi error linting. Anda tidak dapat menguji hasilnya di Simulator Dialogflow, tetapi dapat mengujinya langsung di Google Chat.

Berikut adalah contoh payload kustom untuk membuat pesan dengan kartu:

{ "hangouts": { "hostAppDataAction": { "chatDataAction": {
  "createMessageAction": { "message": { "cardsV2": [{
    "cardId": "pizza",
    "card": {
      "header": {
        "title": "Pizza Delivery Customer Support",
        "subtitle": "[e-mail]",
        "imageUrl": "https://goo.gl/aeDtrS"
      },
      "sections": [{ "widgets": [{ "textParagraph": {
        "text": " Your pizza is here!"
      }}]}]
    }
  }]}}
}}}}

Batas dan pertimbangan

• Saat menggunakan add-on Google Workspace dengan Dialogflow, objek peristiwa Chat memiliki batasan dan pertimbangan berikut:
  • Peristiwa Beranda Aplikasi: Dukungan untuk peristiwa APP_HOME belum tersedia.
  • Input Kueri Dialogflow: Teks yang dikirim sebagai input kueri ke agen Dialogflow bergantung pada jenis peristiwa:
    • MESSAGE: Nilai kolom argumentText dari pesan Chat.
    • APP_COMMAND: String "APP_COMMAND_PAYLOAD".
    • ADDED_TO_SPACE: Acara sambutan default dikirim.
    • REMOVED_FROM_SPACE: String "REMOVED_FROM_SPACE_PAYLOAD".
    • CARD_CLICKED: String "BUTTON_CLICKED_PAYLOAD".
    • WIDGET_UPDATED: String "WIDGET_UPDATED_PAYLOAD" (digunakan untuk pelengkapan otomatis).
  • Payload Peristiwa Lengkap: Payload JSON lengkap dari peristiwa interaksi Chat dikirim ke Dialogflow dalam kolom WebhookRequest.payload. Anda dapat mengaksesnya di webhook Dialogflow. Untuk mengetahui informasi selengkapnya, lihat dokumentasi permintaan webhook Dialogflow ES.
• Pertimbangan untuk merespons perintah dan menerima data dari kartu atau dialog:
  • Jika agen Dialogflow perlu memproses payload JSON peristiwa interaksi Chat, agen dapat melakukannya dengan menggunakan webhook Dialogflow untuk memeriksa payload kustom dalam parameter kueri.
  • Untuk menampilkan dialog dari Agen Dialogflow, respons dengan satu payload JSON kustom yang berisi objek RenderActions dengan pushCard navigasi.
  • Untuk memproses data yang dimasukkan dari kartu, Anda dapat menggunakan webhook Dialogflow dan merespons dengan satu payload JSON kustom yang berisi tindakan yang sesuai.
• Pratinjau link tidak didukung.
• Jika agen Dialogflow hanya merespons dengan satu pesan, maka pesan dikirim ke Google Chat secara serentak. Jika agen Dialogflow merespons dengan beberapa pesan, semua pesan akan dikirim ke Chat secara asinkron dengan memanggil metode create di resource spaces.messages di Chat API satu kali untuk setiap pesan.
• Saat menggunakan integrasi Dialogflow ES dengan Chat, agen Dialogflow dan aplikasi Chat harus disiapkan di project Google Cloud yang sama.

Memecahkan masalah

Untuk men-debug aplikasi Chat, mulailah dengan meninjau log error. Karena aplikasi ini menggunakan Dialogflow, Anda memiliki beberapa resource logging dan pemecahan masalah yang tersedia:

• Log add-on Google Workspace: Kueri log untuk mendapatkan informasi mendetail tentang perilaku add-on, termasuk interaksinya dengan Chat. Lihat Log kueri untuk Add-on Google Workspace.

• Error aplikasi Google Chat: Untuk pesan error dan perbaikan umum aplikasi Chat, lihat Memecahkan masalah dan memperbaiki error aplikasi Chat.

• Histori Percakapan Dialogflow ES: Histori | Dialogflow ES

• Pemecahan Masalah Umum Dialogflow: Pemecahan masalah | Dialogflow

Pembersihan

Agar akun Anda tidak dikenai biaya untuk resource yang digunakan dalam tutorial ini, sebaiknya hapus project Cloud tersebut.

Perhatian: Menghapus project memiliki efek berikut:

• Semua hal dalam project akan dihapus. Jika menggunakan project yang sudah ada untuk tutorial ini, saat menghapusnya, Anda juga akan menghapus pekerjaan lain yang telah dilakukan dalam project tersebut.
• Project ID kustom akan hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang masih ingin Anda gunakan pada masa mendatang. Untuk mempertahankan URL yang menggunakan project ID tersebut, seperti URL di appspot.com, hapus resource yang dipilih di dalam project, alih-alih menghapus seluruh project.

Jika Anda berencana mempelajari beberapa tutorial dan panduan memulai, menggunakan kembali project dapat membantu Anda agar tidak melampaui batas kuota project.

1. Di Konsol API Google, buka halaman Kelola resource. Klik Menu > IAM & Admin > Kelola Resource.

   Buka Resource Manager

2. Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus .
3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Topik terkait

• Dialogflow CX adalah cara lain untuk menggunakan Dialogflow dengan aplikasi Chat.