ทำความเข้าใจการดำเนินการตามคำสั่งซื้อโดยการผสานรวม Dialogflow กับปฏิทิน

ทำความเข้าใจการดำเนินการตามคำสั่งซื้อโดยการผสานรวม Dialogflow กับปฏิทิน

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ ม.ค. 18, 2023
account_circleเขียนโดย Joanna Smith

1 ก่อนเริ่มต้น

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีการที่ Dialogflow เชื่อมต่อกับระบบแบ็กเอนด์เพื่อการตอบสนองที่สมบูรณ์และแบบไดนามิกแก่ผู้ใช้ คำถาม

ข้อกำหนดเบื้องต้น

ก่อนดำเนินการต่อ คุณต้องทำ Codelab ต่อไปนี้ให้เสร็จ

  1. สร้างเครื่องจัดตารางเวลาการนัดหมายด้วย Dialogflow
  2. ผสานรวม Dialogflow กับ Actions on Google
  3. ทำความเข้าใจเอนทิตีใน Dialogflow

นอกจากนี้ คุณยังต้องเข้าใจแนวคิดและโครงสร้างของ Dialogflow จากวิดีโอต่อไปนี้ซึ่งอยู่ในเส้นทางสร้างแชทบ็อตด้วย Dialogflow

สิ่งที่คุณจะได้เรียนรู้

  • Fulfillment คืออะไร
  • วิธีตั้งค่าบัญชีบริการสำหรับปฏิทิน
  • วิธีตั้งค่าปฏิทิน
  • วิธีเปิดใช้การดำเนินการตามคำสั่งซื้อใน Dialogflow
  • วิธีทดสอบ Fulfillment

สิ่งที่คุณจะสร้าง

  • การดำเนินการตามคำสั่งซื้อโดยใช้ Cloud Functions
  • การผสานรวมระหว่าง Dialogflow กับปฏิทิน

สิ่งที่ต้องมี

  • เว็บเบราว์เซอร์และอีเมลสำหรับเข้าสู่ระบบคอนโซล Dialogflow
  • บัญชี Google สำหรับเข้าถึงปฏิทิน

2 Fulfillment คืออะไร

Fulfillment คือโค้ดที่จะทำให้ใช้งานได้เป็นเว็บฮุคที่ช่วยให้ Agent ของ Dialogflow เรียกใช้ตรรกะทางธุรกิจตามความตั้งใจต่อความตั้งใจได้ ในระหว่างการสนทนา Fulfillment ช่วยให้คุณสามารถใช้ข้อมูลที่ดึงมาโดยการประมวลผลภาษาธรรมชาติของ Dialogflow เพื่อสร้างการตอบกลับแบบไดนามิกหรือทริกเกอร์การทำงานในแบ็กเอนด์ของคุณ Agent ส่วนใหญ่ของ Dialogflow ใช้ประโยชน์จากการดำเนินการตามคำสั่งซื้อ

ตัวอย่างกรณีที่สามารถใช้การจำหน่ายเพื่อขยายตัวแทนได้มีดังนี้

  • เพื่อสร้างคำตอบแบบไดนามิกโดยอิงตามข้อมูลที่ค้นหาจากฐานข้อมูล
  • เพื่อสั่งซื้อตามผลิตภัณฑ์ที่ลูกค้าขอ
  • ใช้กฎและเงื่อนไขที่ชนะในเกม

3 เปิดใช้ API ปฏิทิน

  1. ในคอนโซล Dialogflow ให้คลิก d7d792687e597dd5.png
  2. ในแท็บทั่วไป ให้เลื่อนไปที่รหัสโปรเจ็กต์ แล้วคลิก Google Cloudf2bffd4fcdb84fa9.png

34be16fcd4c5aeff.png

  1. ใน Google Cloud Console ให้คลิกเมนูการนำทาง ☰ > API และ บริการ > คลัง
  2. ค้นหา "Google Calendar API" แล้วคลิกเปิดใช้เพื่อใช้ API ในโปรเจ็กต์ Google Cloud

4 ตั้งค่าบัญชีบริการ

  1. คลิกเมนูนำทาง ☰ > API และ บริการ > ข้อมูลเข้าสู่ระบบ
  2. คลิกสร้างข้อมูลเข้าสู่ระบบ > บัญชีบริการ

86f51af0e7886fdd.png

  1. ป้อน "appointment-scheduler" ในรายละเอียดบัญชีบริการ เป็นชื่อบัญชีบริการ แล้วคลิกสร้าง

845d25f3e07ff770.png

  1. ตรงข้อความให้สิทธิ์บัญชีบริการนี้ในการเข้าถึงโปรเจ็กต์ ให้คลิกต่อไปเพื่อข้าม
  2. ในตำแหน่งของข้อความให้สิทธิ์ผู้ใช้เข้าถึงบัญชีบริการนี้ (ไม่บังคับ) ให้คลิกสร้างคีย์ จากนั้นเลือก JSON และคลิกสร้าง

ระบบจะดาวน์โหลดไฟล์ JSON ลงในคอมพิวเตอร์ ซึ่งคุณจะต้องใช้ในส่วนการตั้งค่าต่อไปนี้ a424cec60144d707.png

5 การตั้งค่าปฏิทิน

  1. ไปที่ปฏิทิน แล้วคลิกเมนูหลัก ⋮ > เพิ่มปฏิทินอื่น fbc354048b0a2c6c.png> สร้างปฏิทินใหม่

d6ec2fcf0bd2ae22.png

  1. ป้อน "ปฏิทินการนัดหมาย" เป็นชื่อปฏิทินและคลิกสร้างปฏิทิน
  2. โหลดหน้านี้ซ้ำ จากนั้นคลิกปฏิทินการนัดหมาย เลื่อนไปที่ใช้ร่วมกับบุคคลที่ระบุ แล้วคลิกเพิ่มบุคคล
  3. คัดลอก client_email จากไฟล์ JSON ที่คุณดาวน์โหลดเป็นส่วนหนึ่งของการสร้างบัญชีบริการ แล้ววางลงในกล่องโต้ตอบ

7927f6fa675e3e87.png

  1. คลิกรายการสิทธิ์แบบเลื่อนลง แล้วคลิกเปลี่ยนแปลงกิจกรรม > ส่ง

2ee99d3d15eed97b.png

  1. ขณะที่ยังอยู่ในการตั้งค่า ให้เลื่อนไปที่ใช้งานร่วมกับปฏิทิน แล้วคัดลอกรหัสปฏิทิน

df8a731f0713c52.png

6 ตั้งค่าการดำเนินการตามคำสั่งซื้อใน Dialogflow

เพิ่มบัญชีบริการและรหัสปฏิทินในการดำเนินการตามคำสั่งซื้อ

  1. ไปที่ Agent AppointmentScheduler Dialogflow แล้วคลิก Fulfillment
  2. เปิดใช้เครื่องมือแก้ไขในบรรทัด

c8574c6ef899393f.png

  1. อัปเดตไฟล์ index.js ด้วยโค้ดต่อไปนี้
'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. แทนที่ <INSERT YOUR CALENDAR ID> ด้วยรหัสปฏิทินที่คัดลอกไว้ในส่วนก่อนหน้า
  2. ให้แทนที่ <INSERT CONTENTS OF YOUR JSON FILE HERE> ด้วยเนื้อหาของไฟล์ JSON
  3. (ไม่บังคับ) เปลี่ยน const timeZone และ const timeZoneOffset ตามเขตเวลาสำหรับปฏิทินการนัดหมาย
  4. คลิกทำให้ใช้งานได้

เปิดใช้การตอบกลับการดำเนินการตามคำสั่งซื้อ

  1. ไปที่คอนโซล Dialogflow แล้วคลิก Intent
  2. คลิกกำหนดเวลาความตั้งใจในการนัดหมาย
  3. เลื่อนลงไปที่การดำเนินการตามคำสั่งซื้อ แล้วเปิดเปิดใช้การเรียกเว็บฮุคสำหรับ Intent

a5b41336b5249e44.png

  1. คลิกบันทึก
  2. คลิกทำให้ใช้งานได้

7 ทดสอบแชทบ็อต

คุณทดสอบแชทบ็อตได้ในเครื่องมือจำลอง Actions หรือใช้การผสานรวมเว็บหรือ Google Home ที่เคยรู้จักมาก่อนหน้านี้ได้

  1. ผู้ใช้: "กำหนดนัดจดทะเบียนรถเวลา 14.00 น. ของพรุ่งนี้"
  2. แชทบ็อต: "โอเค ขอดูว่าเราสะดวกให้คุณไหม วันที่ 24 เมษายน เวลา 14:00 น. ดีนะ"

96d3784c103daf5e.png

  1. ปฏิทินจะจองคำตอบ

b7da9da814271db8.png

8 ล้างข้อมูล

หากคุณกำลังวางแผนที่จะทำ Codelab อื่นๆ ของ Dialogflow ให้เสร็จสิ้น ให้ข้ามส่วนนี้ไปก่อนแล้วกลับมาทำต่อภายหลัง

ลบ Agent ของ Dialogflow

  1. คลิก dc4ac6f9c0ae94e9.png ถัดจากตัวแทนที่มีอยู่

520c1c6bb9f46ea6.png

  1. ในแท็บทั่วไป ให้เลื่อนไปที่ด้านล่างแล้วคลิกลบตัวแทนนี้
  2. พิมพ์ Delete ในกล่องโต้ตอบ และคลิก Delete

9 ขอแสดงความยินดี

คุณสร้างแชทบ็อตใน Dialogflow และผสานรวมกับปฏิทินแล้ว ตอนนี้คุณเป็นนักพัฒนาแชทบ็อตแล้ว

ดูข้อมูลเพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติม โปรดดูตัวอย่างโค้ดในหน้า Dialogflow GitHub