การผสานรวม Dialogflow กับ Google Chat

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

ใน Codelab นี้ คุณจะได้ดูวิธีที่ Dialogflow เชื่อมต่อกับ Google Workspace API เพื่อสร้างเครื่องจัดตารางเวลาการนัดหมายที่ทำงานได้อย่างสมบูรณ์ด้วย Google ปฏิทินพร้อมคำตอบแบบไดนามิกใน Google Chat

หากยังไม่มีการตั้งค่าจาก Codelab ก่อนหน้านี้หรือรู้สึกมั่นใจกับ Dialogflow และการดำเนินการตามคำสั่งซื้อ คุณจะดาวน์โหลดโค้ดเริ่มต้นและการกำหนดค่า Agent ได้จากที่นี่

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

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

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

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

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

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

• วิธีทำให้แอป Google Chat ใช้งานได้และกำหนดค่าแอป
• วิธีสร้างการ์ด Display ใน Google Chat
• วิธีสร้างเพย์โหลดที่กำหนดเองใน Fulfillment ของ Dialogflow

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

• การผสานรวมระหว่าง Dialogflow, Google Chat และปฏิทิน
• (ไม่บังคับ) ผสานรวม Google Maps สำหรับการ์ดที่สมบูรณ์ยิ่งขึ้น

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

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

คำเตือน: คุณต้องใช้บัญชี Google Workspace เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์ การใช้บัญชี @gmail.com จะทำให้เกิดข้อผิดพลาดเมื่อคุณพยายามเปิดใช้ API

2. เปิดใช้และกำหนดค่า Google Chat

โดยเริ่มจาก Agent ของ Dialogflow ที่สร้างไว้ใน Codelab ก่อนหน้านี้

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

3. ใน Google Cloud Console ให้คลิกเมนูการนำทาง ☰ > API และ บริการ > คลัง
4. ค้นหา "Google Chat API" แล้วคลิกเปิดใช้เพื่อใช้ API ในโปรเจ็กต์ Google Cloud
5. ตอนนี้เราจะกำหนดค่าแอปใน Chat โดยไปที่หน้าการกำหนดค่าสำหรับ API โปรดทราบว่าโปรเจ็กต์ GCP แต่ละโปรเจ็กต์มีแอป Chat ได้ไม่เกิน 1 รายการ

6. คุณควรเห็นช่อง Dialogflow ที่ป้อนข้อมูลตัวเลือกการกำหนดค่า
7. เปลี่ยนช่อง URL ของรูปโปรไฟล์เป็นรูปภาพรถนี้: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. หากต้องการเปิดใช้แอป Chat สําหรับทั้งข้อความส่วนตัวและพื้นที่ทำงาน ให้เลือกส่งข้อความโดยตรงได้และแอปใช้งานได้ในพื้นที่ทำงานที่มีผู้ใช้หลายคน

คลิกบันทึกและออกจาก Cloud Console

3. การผสานรวม Dialogflow เพิ่มเติม

ระบบจะเปิดใช้ Google Chat โดยค่าเริ่มต้น แต่หากคุณต้องการให้บ็อตทำงานในหลายแพลตฟอร์ม ให้ไปที่หน้าการผสานรวมใน Dialogflow Console เพื่อเปิดใช้

4. ทดสอบใน Google Chat

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

1. ที่มุมขวาบนของพื้นที่ทำงาน ให้คลิกเมนูแบบเลื่อนลงแล้วเลือกเพิ่มบุคคลและ แอป
2. ค้นหา AppointmentScheduler แล้วเพิ่มแอปไปยังพื้นที่ทำงาน
3. ตอนนี้คุณโต้ตอบกับแอปที่สร้างไว้แล้วใน Google ได้แล้ว เพียงแค่พิมพ์ @AppointmentScheduler ลงในพื้นที่ทำงาน

ทดสอบแพลตฟอร์มนี้โดยใช้อินพุตเดียวกันจาก Codelab ก่อนหน้า:

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

ต่อไปเราจะใช้การปรับแต่งใน Google Chat เพื่อเพิ่มคำตอบที่สมบูรณ์ยิ่งขึ้น

5. การ์ด Google Chat ที่กำหนดเอง

เมื่อใช้ Google Chat คุณสามารถให้แอปแสดงผลข้อความตอบกลับพื้นฐานหรือการตอบกลับการ์ดแก่ผู้ใช้ได้ ซึ่งช่วยให้อินเทอร์เฟซมีความสมบูรณ์ยิ่งขึ้นซึ่งสร้างจากวิดเจ็ตต่างๆ เช่น รูปภาพ ปุ่ม ฯลฯ ตอนนี้เราได้เชื่อมต่อ Agent ของ Dialogflow กับแอป Google Chat แล้ว คุณเพียงต้องส่งคืน JSON ในรูปแบบที่ถูกต้องเพื่อแสดงใน Google ในรหัสการดำเนินการตามคำสั่งซื้อ มาดูตัวอย่าง JSON กัน

ข้อความตอบกลับเบื้องต้นจะมีลักษณะดังนี้

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

ตัวอย่างการตอบกลับการ์ดที่มีวิดเจ็ตจะมีลักษณะดังนี้

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

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการ์ดในเอกสารประกอบเกี่ยวกับรูปแบบข้อความ ในส่วนถัดไป เราจะเพิ่มการ์ดลงในแอป Chat ของเรา

6. เพย์โหลดและการ์ดแชทที่กำหนดเอง

เพย์โหลดที่กำหนดเอง ใน Dialogflow จะให้ข้อความตอบกลับแบบริชมีเดียเฉพาะแพลตฟอร์มได้ ซึ่งในที่นี้เราจะเพิ่มการ์ด JSON ของ Hangouts Chat ซึ่งตัวแทนจะส่งกลับการ์ดเหล่านั้นให้กับผู้ใช้

เริ่มต้นด้วยการเพิ่มบัตรพื้นฐานสำหรับจุดประสงค์ในการต้อนรับ ใน Dialogflow Console ให้ไปที่ Intent การต้อนรับเริ่มต้น แล้วเลื่อนลงไปที่ส่วนการตอบกลับ

คลิก Google Chat และยกเลิกการเลือกใช้คำตอบจากแท็บค่าเริ่มต้นเป็นคำตอบแรก จากนั้นคลิกเพิ่มคำตอบ > เพย์โหลดที่กำหนดเอง

คุณจะเห็นโครงกระดูก JSON

คัดลอกและวางโค้ดต่อไปนี้ เราได้ตั้งค่าการ์ดด้วยวิดเจ็ต TextParagraph

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

คลิกบันทึก จากนั้นไปที่พื้นที่ทดสอบใน Chat เพื่อดูการ์ดนี้แสดงผล ในพื้นที่ใน Chat ให้พิมพ์ "@AppointmentScheduler Hello"

ถัดไป เราจะเพิ่มเพย์โหลดที่กำหนดเองในโค้ดการดำเนินการตามคำสั่งซื้อเพื่อให้เราสร้างเนื้อหาแบบไดนามิกด้วยโค้ดของเราได้

7. การเพิ่มบัตรใน Fulfillment

ตอนนี้เราจะสร้างการ์ดที่มีวิดเจ็ตต่างๆ เพื่อแสดงการนัดหมายที่กำหนดเวลาไว้ เพิ่มฟังก์ชันชื่อ getGoogleChatCard ที่เราจะแสดงอินพุต appointmentType, date และ time

เพิ่มฟังก์ชันด้านล่างลงในโค้ดของคุณใน index.js ด้านล่าง

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],
     },
   };
 }

การ์ดใบนี้มีคู่คีย์-ค่าและวิดเจ็ตปุ่ม จากนั้นวิดเจ็ตจะเรียงลำดับตาม section และ card จะมีรายการส่วนต่างๆ ที่จะแสดง

ตอนนี้เราจะเรียกฟังก์ชันนี้เมื่อสร้างกิจกรรมในปฏิทิน ในฟังก์ชัน createCalendarEvent ให้แทนที่เนื้อหาด้วยโค้ดด้านล่างและทำให้ฟังก์ชันใช้งานได้

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}.`);
 });
}

เมื่อตัวแทนตอบกลับใน Google Chat ตัวแทนจะทราบว่าต้องส่งคืนบัตรที่สร้างขึ้นข้างต้น ทดสอบด้วยคำขอนัดหมายเวลา

8. (ไม่บังคับ) เพิ่มวิดเจ็ตรูปภาพของ Google Maps

ถ้าคุณต้องการทำให้การ์ดการตอบกลับเป็นภาพมากขึ้น คุณสามารถเพิ่มแผนที่แบบคงที่ของตำแหน่งการนัดหมายที่สร้างโดย Maps Static API API ช่วยให้คุณสร้างรูปภาพ Maps ตามพารามิเตอร์ของ URL ได้ จากนั้น เราจะใช้ภาพในวิดเจ็ตภาพในการ์ดของเรา

1. เปิดใช้ Maps Static API ในคอนโซล Google Cloud แบบเดียวกับที่คุณเปิดใช้ API ของปฏิทินและ Google Chat
2. สร้างและบันทึกคีย์ API สำหรับโปรเจ็กต์ของคุณใน API และ บริการในคอนโซล ดูข้อมูลเพิ่มเติมเกี่ยวกับการดึงข้อมูลและแนวทางปฏิบัติแนะนำเกี่ยวกับคีย์ API สำหรับ Maps ได้ที่นี่
3. คัดลอกคีย์ API และค่าคงที่ต่อไปนี้ไปไว้ด้านบนสุดของไฟล์ใน 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. จากนั้น เพิ่มวิดเจ็ตรูปภาพในฟังก์ชัน getGoogleChatCard

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

5. เพิ่ม mapImageWidget ลงในรายการวิดเจ็ตในตัวแปร infoSection แล้วบันทึกและทำให้ใช้งานได้
6. ทดลองใช้แอปใน Chat ในพื้นที่ใน Chat ของคุณ แล้วคุณจะได้รับคำตอบที่ครบถ้วนตามโค้ดที่ใส่ไว้วันนี้

9. ล้างข้อมูล

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

ลบ Agent ของ Dialogflow

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

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

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

คุณสร้างแชทบ็อตใน Dialogflow และผสานรวมเข้ากับปฏิทิน และตอนนี้ Google Chat ก็ได้เลื่อนขั้นเป็น Google Workspace Pro แล้ว

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

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