การลงมือปฏิบัติ: สร้างคู่มือรายการทีวี Google Chat ด้วย Google Workspace และ Dialogflow

1. บทนำ

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

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

เราจะสร้างแชทบอท Dialogflow ที่ตอบกลับในโดเมน Google Workspace ของคุณได้พร้อมการตอบกลับที่ปรับแต่งได้

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

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

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

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

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

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

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

ในคอนโซล Google Cloud ให้คลิกเมนูการนำทาง ☰ > API และบริการ > ไลบรารี
ค้นหา "Google Chat API" แล้วคลิกเปิดใช้เพื่อใช้ API ในโปรเจ็กต์ Google Cloud
ตอนนี้เราจะกำหนดค่าแอป Google Chat ของคุณ ให้ไปที่หน้าการกำหนดค่าสำหรับ API โปรดทราบว่าโปรเจ็กต์ GCP แต่ละโปรเจ็กต์จะมีแอป Google Chat ได้อย่างมาก 1 แอป
คุณควรเห็นช่อง Dialogflow ที่ป้อนตัวเลือกการกำหนดค่า
เปลี่ยนช่อง URL ของอวตารเป็นรูปทีวีนี้: [https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png)
เปิดใช้แอป Google Chat สำหรับทั้งข้อความส่วนตัวและพื้นที่ทำงาน

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

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

3. ทดสอบใน Google Chat

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

ค้นหา tvguide แล้วเพิ่มแอป Google Chat ลงในพื้นที่ทำงาน

ตอนนี้คุณสามารถโต้ตอบกับแอป Google Chat ที่สร้างไว้แล้วใน Google Chat ได้โดยเพียงแค่พิมพ์ @tvguide ในพื้นที่ทำงาน พิมพ์ @tvguide hello เพื่อทดสอบ

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

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

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

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

{
  "text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}

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

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "Check Listings",
                    "onClick": {
                      "openLink": {
                        "url": "https://tvlistings.com/..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

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

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

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

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

คุณจะเห็นโครงสร้าง JSON

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

{
  "hangouts": {
    "header": {
      "title": "TV Guide App"
    },
    "sections": [
      {
        "widgets": [
          {
            "textParagraph": {
              "text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
            }
          }
        ]
      }
    ]
  }
}

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

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

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

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

ตอนนี้เราจะสร้างการ์ดที่มีวิดเจ็ตเพื่อแสดงรายการทีวี มาเพิ่มฟังก์ชันที่ชื่อ getGoogleCard กัน ซึ่งเราจะแสดงข้อมูลที่ได้จากข้อมูลในรายการ เราจะใช้เครื่องมือ keyValue และปุ่มเพื่อสร้างการตอบกลับของการ์ด

เพิ่มฟังก์ชันด้านล่างลงในโค้ดใน index.js ที่ด้านล่าง

/**
*  Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
   console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));

   if(tvresults['Listings'][0]) {
       let channelName = tvresults['Name'];
       let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
       let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);

       const cardHeader = {
           title: channelName + ' Shows',
       };

       const currentWidget = {
           keyValue: {
               content: `${tvresults['Listings'][0]['Title']}`,
               bottomLabel: `${currentlyPlayingTime}`,
           }
       };

       const laterWidget = {
           keyValue: {
               content: `${tvresults['Listings'][1]['Title']}`,
               bottomLabel: `${laterPlayingTime}`
           }
       };

       const buttonWidget = {
           buttons: [
             {
               textButton: {
                 text: 'View Full Listing',
                 onClick: {
                   openLink: {
                     url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
                   },
                 },
               },
             },
           ],
         };

       return {
           'hangouts': {
               header: cardHeader,
               sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
           }
       };
   } else {
       const errorWidget = {
           keyValue: {
               content: 'No listings found',
               bottomLabel: 'Please try again.'
           }
       };
       return {
           'hangouts': {
               'sections': {widgets: [errorWidget]},
           }
       };
   }
}

ตอนนี้เราต้องเรียกใช้เมธอดนี้เพื่อให้เอเจนต์รับคำตอบเพื่อส่งกลับให้ผู้ใช้ ในฟังก์ชัน channelHandler ให้แทนที่เนื้อหาของฟังก์ชันด้วยโค้ดด้านล่าง

function channelHandler(agent) {
   console.log('in channel handler');
   var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
   var results = JSON.parse(jsonResponse);
   var listItems = {};
   textResults = getListings(results);


   for (var i = 0; i < results['Listings'].length; i++) {
       listItems[`SELECT_${i}`] = {
           title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
           description: `Channel: ${results['Name']}`
       }
   }

   if (agent.requestSource === 'hangouts') {
        const cardJSON = getGoogleCard(results);
        const payload = new Payload(
           'hangouts',
           cardJSON,
           {rawPayload: true, sendAsMessage: true},
       );
       agent.add(payload);
   } else {
       agent.add(textResults);
   }
}

จดบันทึกโค้ดที่ด้านล่างซึ่งมีการเพิ่มการตอบกลับ หากแหล่งที่มาของคำขอของตัวแทนระบุว่าเป็นแพลตฟอร์มนี้ เราจะสร้างเพย์โหลด JSON ด้วยแท็ก "hangouts" ซึ่งมีความสำคัญต่อการส่งเพย์โหลดกลับอย่างถูกต้องในการดำเนินการตามคำสั่งซื้อ

ตอนนี้ให้กลับไปที่พื้นที่แชทแล้วทดสอบ พิมพ์ @tvguide What is on MTV? คุณควรเห็นการตอบกลับที่คล้ายกัน

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

คุณสร้างบ็อต Google Chat ตัวแรกด้วย Dialogflow แล้ว

สิ่งต่อไปที่ควรทำ

คุณชอบโค้ดแล็บนี้ไหม ลองดูห้องทดลองที่ยอดเยี่ยมเหล่านี้