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 kepada pengguna. semua pertanyaan.

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

  1. Membuat 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 dipelajari dari video berikut di jalur Build a chatbot dengan Dialogflow.

Yang akan Anda pelajari

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

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 yang dimaksud dengan fulfillment?

Fulfillment adalah kode yang di-deploy sebagai webhook yang memungkinkan agen Dialogflow Anda memanggil logika bisnis berdasarkan intent demi intent. Selama percakapan, fulfillment memungkinkan Anda menggunakan informasi yang diekstrak oleh natural-language processing Dialogflow untuk menghasilkan respons dinamis atau memicu tindakan di backend Anda. Sebagian besar agen Dialogflow memanfaatkan fulfillment.

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

  • Untuk menghasilkan respons dinamis berdasarkan informasi yang dicari dari {i>database<i}
  • Untuk memesan berdasarkan produk yang diminta pelanggan
  • Untuk menerapkan aturan dan ketentuan kemenangan untuk game

3. Mengaktifkan Calendar API

  1. Di Konsol Dialogflow, klik d7d792687e597dd5.png.
  2. Di tab General, scroll ke Project ID, lalu klik Google Cloud f2bffd4fcdb84fa9.png.

34be16fcd4c5aeff.pngS

  1. Di Konsol Google Cloud, klik Navigation menu try > API & Layanan > Koleksi.
  2. Telusuri "API Google Kalender", lalu klik Enable untuk menggunakan API di project Google Cloud Anda.

4. Siapkan akun layanan

  1. Klik Menu navigasi ⋮ > API & Layanan > Kredensial.
  2. Klik Create Credentials > Akun layanan.

86f51af0e7886fdd.pngS

  1. Di Detail akun layanan, masukkan "penjadwal janji temu" sebagai Service account name, lalu klik Create.

845d25f3e07ff770.pngS

  1. Jika muncul pesan Berikan akun layanan ini akses ke project, klik Lanjutkan untuk melewatinya.
  2. Jika muncul pesan 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 diperlukan di bagian penyiapan berikut. a424cec60144d707.png

5. Penyiapan kalender

  1. Buka Kalender, lalu klik Menu utama Zoho > Tambahkan kalender lain fbc354048b0a2c6c.png> Buat kalender baru.

d6ec2fcf0bd2ae22.png

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

7927f6fa675e3e87.pngS

  1. Klik menu drop-down Izin, lalu klik Ubah pada acara > Kirim.

2ee99d3d15eed97b.pngS

  1. Saat masih di Setelan, scroll ke Integrasikan kalender dan salin ID Kalender.

df8a731f0713c52.png

6. Menyiapkan fulfillment di Dialogflow

Tambahkan akun layanan dan ID Kalender ke pemenuhan

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

c8574c6ef899393f.png

  1. 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);
       }
       );
     }
   });
 });
}
  1. Ganti <INSERT YOUR CALENDAR ID> dengan ID Kalender yang Anda salin di bagian sebelumnya.
  2. Ganti <INSERT CONTENTS OF YOUR JSON FILE HERE> dengan konten file JSON Anda.
  3. (Opsional.) Ubah const timeZone dan const timeZoneOffset sesuai zona waktu untuk Kalender Janji Temu.
  4. Klik Deploy.

Aktifkan respons pemenuhan

  1. Buka konsol Dialogflow, lalu klik Intent.
  2. Klik Jadwalkan Intent Janji Temu.
  3. Scroll ke bawah ke Fulfillment, lalu aktifkan Enable webhook call for the intent.

a5b41336b5249e44.png

  1. Klik Simpan.
  2. Klik Deploy.

7. Uji chatbot Anda

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

  1. Pengguna: "Tetapkan janji temu untuk pendaftaran kendaraan pukul 2 siang besok".
  2. Chatbot: "Oke, biarkan saya melihat apakah kita bisa memasukkan Anda. 24 April, pukul 14.00 tidak apa-apa!"

96d3784c103daf5e.pngS

  1. Kalender akan memesan respons.

b7da9da814271db8.png

8. Pembersihan

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

Menghapus agen Dialogflow

  1. Klik dc4ac6f9c0ae94e9.png di samping agen yang ada.

520c1c6bb9f46ea6.pngS

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

9. Selamat

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

Pelajari lebih lanjut

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