Mengintegrasikan Dialogflow dengan Google Chat

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara Dialogflow terhubung dengan Google Workspace API untuk membuat Penjadwal Janji Temu yang berfungsi penuh dengan Google Kalender dengan respons dinamis di Google Chat.

Jika Anda belum menyiapkan dari codelab sebelumnya atau merasa yakin dengan Dialogflow dan pemenuhan, Anda dapat mendownload kode awal dan konfigurasi agen dari sini

https://github.com/googleworkspace/appointment-scheduler-codelab

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

1. Membangun Penjadwal Janji Temu dengan Dialogflow
2. Mengintegrasikan Dialogflow dengan Actions on Google
3. Memahami entity di Dialogflow
4. Memahami pemenuhan dengan mengintegrasikan Dialogflow dengan Kalender

Anda juga perlu memahami konsep dan konstruksi dasar Dialogflow, yang dapat Anda pelajari dari video berikut yang ada di jalur Membangun chatbot dengan Dialogflow.

Yang akan Anda pelajari

• Cara men-deploy dan mengonfigurasi aplikasi Google Chat
• Cara membuat kartu tampilan di Google Chat
• Cara membuat payload kustom dalam fulfillment Dialogflow

Yang akan Anda build

• Integrasi antara Dialogflow, Google Chat, dan Kalender
• (Opsional) Mengintegrasikan Google Maps untuk kartu yang lebih kaya

Yang Anda butuhkan

• Browser web dan alamat email untuk login ke konsol Dialogflow
• Kalender dan Google Chat diaktifkan di domain Google Workspace Anda

Peringatan: Anda harus menggunakan akun Google Workspace untuk menyelesaikan codelab ini. Jika Anda menggunakan akun @gmail.com, akan muncul error saat akan mengaktifkan API.

2. Mengaktifkan dan Mengonfigurasi Google Chat

Kita akan memulai dengan Agen Dialogflow yang telah Anda buat di codelab sebelumnya.

1. Di konsol Dialogflow, klik .
2. Di tab Umum, scroll ke Project ID, lalu klik Google Cloud .

3. Di Konsol Google Cloud, klik Navigation menu ☰ > APIs & Services > Library.
4. Telusuri "Google Chat API", lalu klik Aktifkan untuk menggunakan API di project Google Cloud Anda.
5. Sekarang kita akan mengonfigurasi aplikasi Chat Anda. Buka halaman Configuration untuk API. Perhatikan bahwa setiap project GCP dapat memiliki maksimal satu aplikasi Chat.

6. Anda akan melihat kolom Dialogflow yang mengisi opsi konfigurasi.
7. Ubah kolom Avatar URL ke gambar mobil ini: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. Untuk mengaktifkan aplikasi Chat Anda untuk pesan langsung dan ruang, pilih Aplikasi dapat menerima pesan langsung dan Aplikasi berfungsi di ruang dengan beberapa pengguna.

Klik Simpan dan keluar dari Konsol Cloud.

3. Integrasi Dialogflow Tambahan

Google Chat diaktifkan secara default, tetapi jika Anda ingin bot melayani beberapa platform, Anda dapat membuka halaman Integrasi di Konsol Dialogflow untuk mengaktifkannya.

4. Menguji di Google Chat

Setelah aplikasi Chat Anda dikonfigurasi, mari tambahkan ke ruang Chat dan uji. Buka Google Chat dan buat ruang pengujian.

1. Di pojok kanan atas ruang, klik drop-down dan pilih Tambahkan orang & aplikasi.
2. Telusuri AppointmentScheduler, lalu tambahkan aplikasi ke ruang.
3. Sekarang Anda dapat berinteraksi dengan aplikasi yang sudah Anda buat di Google hanya dengan mengetik @AppointmentScheduler di ruang tersebut.

Uji di platform ini dengan input yang sama dari codelab sebelumnya:

1. Pengguna: "@AppointmentScheduler Setel janji temu untuk pendaftaran kendaraan pukul 14.00 besok."
2. Aplikasi Chat: "Oke, coba saya lihat apakah ada jadwal yang cocok untuk Anda. 24 April, pukul 14.00 oke!"

Selanjutnya, kita akan menggunakan penyesuaian di Google Chat untuk menambahkan respons yang lebih kaya.

5. Kartu Google Chat Kustom

Dengan Google Chat, Anda dapat membuat aplikasi menampilkan Respons Teks dasar atau Respons Kartu kepada pengguna yang memungkinkan Anda membuat antarmuka yang lebih kaya dengan berbagai widget termasuk gambar, tombol, dll. Setelah menghubungkan Agen Dialogflow ke aplikasi Google Chat, Anda cukup menampilkan JSON dalam format yang benar untuk ditampilkan di Google dalam kode pemenuhan. Mari kita lihat beberapa contoh JSON.

Respons teks dasar akan terlihat seperti:

 {
  "text": "Your pizza delivery is here!"
}

Contoh respons kartu dengan widget akan terlihat seperti ini:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Untuk mempelajari kartu lebih lanjut, lihat dokumentasi Format Pesan. Di bagian berikutnya, kita akan menambahkan kartu ke aplikasi Chat.

6. Payload Kustom dan Kartu Chat

Payload kustom di Dialogflow memungkinkan pesan respons multimedia khusus platform. Di sinilah kita akan menambahkan kartu JSON Hangout Chat yang akan ditampilkan kembali kepada pengguna oleh agen.

Mari kita mulai dengan menambahkan kartu dasar untuk maksud sambutan. Di Konsol Dialogflow, buka Default Welcome Intent, lalu scroll ke bawah ke bagian respons.

Klik Google Chat dan batalkan pilihan Gunakan respons dari tab DEFAULT sebagai respons pertama, lalu ADD RESPONSES > Custom Payload.

Anda akan melihat kerangka JSON.

Salin dan tempel kode berikut di bawah. Kita telah menyiapkan kartu dengan widget TextParagraph.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

Tekan Simpan, lalu buka ruang Chat pengujian Anda untuk melihat apakah kartu ini dirender. Di ruang Chat, ketik ‘@AppointmentScheduler hello'.

Selanjutnya, kita akan menambahkan payload kustom dalam kode pemenuhan agar kita dapat membuat konten secara dinamis dengan kode kita.

7. Menambahkan kartu di Pemenuhan

Sekarang kita akan membuat kartu dengan beberapa widget untuk menampilkan janji temu terjadwal. Mari tambahkan fungsi bernama getGoogleChatCard tempat kita akan merender input: appointmentType, date, dan time.

Tambahkan fungsi di bawah ke kode Anda di index.js di bagian bawah.

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

Kartu ini berisi widget tombol dan key-value pair. Widget kemudian diurutkan dalam section dan card berisi daftar bagian yang akan dirender.

Sekarang, mari kita panggil fungsi ini saat acara kalender dibuat. Di fungsi createCalendarEvent, ganti konten dengan kode di bawah, lalu deploy fungsi.

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

Saat merespons di Google Chat, agen akan tahu untuk menampilkan kartu yang dibuat di atas. Uji dengan permintaan penjadwalan.

8. (Opsional) Menambahkan widget gambar Google Maps

Jika ingin membuat kartu respons Anda lebih visual, Anda dapat menambahkan peta statis lokasi janji temu yang dihasilkan oleh Maps Static API. API ini memungkinkan Anda membuat gambar Maps dengan parameter URL. Kemudian, kita dapat menggunakan gambar tersebut dalam widget gambar di kartu.

1. Aktifkan Maps Static API di Konsol Google Cloud, dengan cara yang sama seperti saat Anda mengaktifkan Calendar API dan Google Chat API.
2. Buat dan simpan kunci API untuk project Anda di halaman APIs & Services di konsol. Untuk mengetahui informasi selengkapnya tentang pengambilan dan praktik terbaik kunci API dengan Maps, lihat di sini.
3. Salin kunci API dan konstanta berikut ke bagian atas file Anda di index.js

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

4. Selanjutnya, tambahkan widget gambar di fungsi getGoogleChatCard Anda

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

5. Tambahkan mapImageWidget ke dalam daftar widget di variabel infoSection, lalu simpan dan deploy.
6. Uji aplikasi Chat Anda di ruang Chat Anda dan Anda akan mendapatkan respons lengkap berdasarkan kode yang Anda tambahkan hari ini.

9. Pembersihan

Jika Anda berencana menyelesaikan codelab Dialogflow lainnya, lewati bagian ini untuk saat ini dan kembali lagi nanti.

Hapus agen Dialogflow

1. Klik di samping agen yang ada.

2. Di tab Umum, scroll ke bagian bawah, lalu klik Hapus Agen Ini.
3. Ketik Hapus dalam dialog, lalu klik Hapus.

10. Selamat

Anda telah membuat chatbot di Dialogflow dan mengintegrasikannya dengan Kalender dan sekarang Google Chat. Anda adalah Profesional Google Workspace.

Pelajari lebih lanjut

Untuk mempelajari lebih lanjut, lihat contoh kode di halaman Dialogflow Github.