Memahami fulfillment dengan mengintegrasikan Dialogflow dengan Kalender

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara Dialogflow terhubung dengan sistem backend untuk memberikan respons yang kaya dan dinamis terhadap pertanyaan pengguna.

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

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

• Apa itu pemenuhan
• Cara menyiapkan akun layanan untuk Kalender
• Cara menyiapkan Kalender
• Cara mengaktifkan fulfillment di Dialogflow
• Cara menguji pemenuhan

Yang akan Anda build

• Fulfillment menggunakan Cloud Functions
• Integrasi antara Dialogflow dan Kalender

Yang Anda butuhkan

• Browser web dan alamat email untuk login ke konsol Dialogflow
• Akun Google untuk mengakses Kalender

2. Apa itu pemenuhan?

Fulfillment adalah kode yang di-deploy sebagai webhook yang memungkinkan agen Dialogflow Anda memanggil logika bisnis berdasarkan per-intent. Selama percakapan, pemenuhan memungkinkan Anda menggunakan informasi yang diekstrak oleh pemrosesan bahasa alami Dialogflow untuk menghasilkan respons dinamis atau memicu tindakan di backend Anda. Sebagian besar agen Dialogflow menggunakan pemenuhan.

Berikut adalah beberapa contoh kapan Anda dapat menggunakan pemenuhan untuk memperluas agen:

• Untuk menghasilkan respons dinamis berdasarkan informasi yang dicari dari database
• Untuk melakukan pemesanan berdasarkan produk yang diminta pelanggan
• Untuk menerapkan aturan dan kondisi kemenangan game

3. Aktifkan Calendar API

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 Calendar API", lalu klik Aktifkan untuk menggunakan API di project Google Cloud Anda.

4. Menyiapkan akun layanan

1. Klik Navigation menu ☰ > APIs & Services > Credentials.
2. Klik Buat Kredensial > Akun layanan.

3. Di Service account details, masukkan "appointment-scheduler" sebagai Service account name, lalu klik Create.

4. Di bagian Berikan akses project ke akun layanan ini, klik Lanjutkan untuk melewatinya.
5. Di bagian Beri pengguna akses ke akun layanan ini (opsional), klik Buat Kunci, lalu pilih JSON dan klik Buat.

File JSON akan didownload ke komputer Anda, yang akan Anda perlukan di bagian penyiapan berikut.

5. Penyiapan kalender

1. Buka Kalender, lalu klik Menu utama ☰ > Tambahkan kalender lain > Buat kalender baru.

2. Masukkan "Kalender Janji Temu" sebagai nama kalender, lalu klik Buat kalender.
3. Muat ulang halaman, lalu klik Kalender Janji Temu, scroll ke Bagikan dengan orang tertentu, lalu klik Tambahkan orang.
4. Salin client_email dari file JSON yang Anda download sebagai bagian dari penyiapan akun layanan, lalu tempelkan ke dalam dialog.

5. Klik menu drop-down Izin, lalu klik Buat perubahan pada peristiwa > Kirim.

6. Saat masih berada di Setelan, scroll ke Integrasikan kalender, lalu salin ID Kalender.

Catatan: Jika Anda melihat masalah izin atau Buat perubahan pada acara berwarna abu-abu, ubah izin kalender sekunder di Konsol Admin.

6. Menyiapkan pemenuhan di Dialogflow

Menambahkan akun layanan dan ID Kalender ke pemenuhan

1. Buka agen Dialogflow AppointmentScheduler, lalu klik Fulfillment.
2. Aktifkan Editor Inline.

3. Perbarui file index.js dengan kode berikut:

'use strict';

// Import the Dialogflow module from Google client libraries.
const functions = require('firebase-functions');
const {google} = require('googleapis');
const {WebhookClient} = require('dialogflow-fulfillment');

// Enter your calendar ID below and service account JSON below
const calendarId = "<INSERT YOUR CALENDAR ID>";
const serviceAccount = {<INSERT CONTENTS OF YOUr JSON FILE HERE>}; // Starts with {"type": "service_account",...

// Set up Google Calendar Service account credentials
const serviceAccountAuth = new google.auth.JWT({
 email: serviceAccount.client_email,
 key: serviceAccount.private_key,
 scopes: 'https://www.googleapis.com/auth/calendar'
});

const calendar = google.calendar('v3');
process.env.DEBUG = 'dialogflow:*'; // enables lib debugging statements

const timeZone = 'America/Los_Angeles';
const timeZoneOffset = '-07:00';

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
 const agent = new WebhookClient({ request, response });
 console.log("Parameters", agent.parameters);
 const appointment_type = agent.parameters.appointment_type;
 function makeAppointment (agent) {
   // Calculate appointment start and end datetimes (end = +1hr from start)
   const dateTimeStart = new Date(Date.parse(agent.parameters.date.split('T')[0] + 'T' + agent.parameters.time.split('T')[1].split('-')[0] + timeZoneOffset));
   const dateTimeEnd = new Date(new Date(dateTimeStart).setHours(dateTimeStart.getHours() + 1));
   const appointmentTimeString = dateTimeStart.toLocaleString(
     'en-US',
     { month: 'long', day: 'numeric', hour: 'numeric', timeZone: timeZone }
   );
    // Check the availability of the time, and make an appointment if there is time on the calendar
   return createCalendarEvent(dateTimeStart, dateTimeEnd, appointment_type).then(() => {
     agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);
   }).catch(() => {
     agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
   });
 }

// Handle the Dialogflow intent named 'Schedule Appointment'.
 let intentMap = new Map();
 intentMap.set('Schedule Appointment', makeAppointment);
 agent.handleRequest(intentMap);
});

//Creates calendar event in Google Calendar
function createCalendarEvent (dateTimeStart, dateTimeEnd, appointment_type) {
 return new Promise((resolve, reject) => {
   calendar.events.list({
     auth: serviceAccountAuth, // List events for time period
     calendarId: calendarId,
     timeMin: dateTimeStart.toISOString(),
     timeMax: dateTimeEnd.toISOString()
   }, (err, calendarResponse) => {
     // Check if there is a event already on the Calendar
     if (err || calendarResponse.data.items.length > 0) {
       reject(err || new Error('Requested time conflicts with another appointment'));
     } else {
       // Create event for the requested time period
       calendar.events.insert({ auth: serviceAccountAuth,
         calendarId: calendarId,
         resource: {summary: appointment_type +' Appointment', description: appointment_type,
           start: {dateTime: dateTimeStart},
           end: {dateTime: dateTimeEnd}}
       }, (err, event) => {
         err ? reject(err) : resolve(event);
       }
       );
     }
   });
 });
}

4. Ganti <INSERT YOUR CALENDAR ID> dengan ID Kalender yang Anda salin di bagian sebelumnya.
5. Ganti <INSERT CONTENTS OF YOUR JSON FILE HERE> dengan konten file JSON Anda.
6. (Opsional.) Ubah const timeZone dan const timeZoneOffset sesuai dengan zona waktu untuk Kalender Janji Temu.
7. Klik Deploy.

Catatan: Jika Anda menyesuaikan pemenuhan di Dialogflow dengan zona waktu Anda, Anda harus memodifikasinya lagi ke Universal Coordinated Time agar berfungsi dengan frontend.

Mengaktifkan respons pemenuhan

1. Buka konsol Dialogflow, lalu klik Intents.
2. Klik Schedule Appointment Intent.
3. Scroll ke bawah ke Fulfillment, lalu aktifkan Enable webhook call for the intent.

4. Klik Simpan.
5. Klik Deploy.

7. Menguji chatbot Anda

Anda dapat menguji chatbot di simulator Actions, atau menggunakan integrasi web atau Google Home yang telah Anda pelajari sebelumnya.

1. Pengguna: "Buat janji untuk pendaftaran kendaraan besok pukul 14.00."
2. Chatbot: "Oke, izinkan kami melihat apakah kami dapat menyesuaikan jadwal Anda. 24 April, pukul 14.00 oke!"

3. Kalender akan mencatat respons.

8. 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.

9. Selamat

Anda telah membuat chatbot di Dialogflow dan mengintegrasikannya dengan Kalender. Anda sekarang menjadi developer chatbot.

Pelajari lebih lanjut

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