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

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

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

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

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

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

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

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

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

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

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

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

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

สิ่งที่คุณต้องมี

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

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

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

เราจะเริ่มด้วยเอเจนต์ Dialogflow ที่คุณสร้างไว้ใน Codelab ก่อนหน้านี้

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

3. ในคอนโซล Google Cloud ให้คลิกเมนูการนำทาง ☰ > 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 เพื่อเปิดใช้ได้

4. ทดสอบใน Google Chat

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

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

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

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

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

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

Google Chat ช่วยให้แอปของคุณแสดงการตอบกลับด้วยข้อความพื้นฐานหรือการตอบกลับด้วยการ์ดแก่ผู้ใช้ ซึ่งช่วยให้คุณมีอินเทอร์เฟซที่สมบูรณ์ยิ่งขึ้นซึ่งสร้างขึ้นโดยวิดเจ็ตต่างๆ รวมถึงรูปภาพ ปุ่ม ฯลฯ ตอนนี้เมื่อเราเชื่อมต่อเอเจนต์ 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 ในส่วนนี้ ซึ่ง Agent จะแสดงการ์ดดังกล่าวต่อผู้ใช้

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

คลิก 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 ให้พิมพ์ "@เครื่องมือจัดการการนัดหมาย สวัสดี"

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

7. การเพิ่มบัตรในการจัดการคำสั่งซื้อ

ตอนนี้เราจะสร้างการ์ดที่มีวิดเจ็ตหลายรายการเพื่อแสดงการนัดหมายที่กำหนดเวลาไว้ มาเพิ่มฟังก์ชันที่ชื่อ 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}.`);
 });
}

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

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

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

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

ลบเอเจนต์ Dialogflow

1. คลิก ข้างตัวแทนที่มีอยู่

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่ตัวอย่างโค้ดในหน้า Dialogflow Github