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

1. บทนำ

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

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

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

2e16770ceed20cb2.png

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

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

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

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

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

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

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

cb893582402e4092.png

  1. ใน Google Cloud Console ให้คลิกเมนูการนำทาง ☰ > API และ บริการ > คลัง
  2. ค้นหา "Google Chat API" แล้วคลิกเปิดใช้เพื่อใช้ API ในโปรเจ็กต์ Google Cloud
  3. ตอนนี้เราจะกำหนดค่าแอป Google Chat ของคุณ ให้ไปที่หน้าการกำหนดค่าของ API โปรดทราบว่าโปรเจ็กต์ GCP แต่ละโปรเจ็กต์มีแอป Google Chat ได้ไม่เกิน 1 แอป 85794eaaaedc7eb5.png
  4. คุณควรเห็นช่อง Dialogflow ที่ป้อนข้อมูลตัวเลือกการกำหนดค่า
  5. เปลี่ยนช่อง 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)
  6. เปิดใช้แอป Google Chat ให้กับทั้งข้อความส่วนตัวและพื้นที่ทำงาน 9d439f492c8b71bb.png

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

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

63296523b678ff8d.png

3. ทดสอบใน Google Chat

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

f0dd1f5e205ef8e2.png

ค้นหา tvguide และเพิ่มแอป Google Chat ไปยังพื้นที่ทำงาน

e60fa78fdd020304.png

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

e8399e33185c63ec.png

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

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

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

e8399e33185c63ec.png

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

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

c390a0cb75486fe0.png

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

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

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

9624208f0d266afd.png

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

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

bb064f7ec1237fd3.png

คัดลอกและวางโค้ดต่อไปนี้ เราได้ตั้งค่าการ์ดด้วยวิดเจ็ต 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 Hello" ในพื้นที่ใน Chat

6941003ee06e4655.png

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

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

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

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

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

2e16770ceed20cb2.png

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

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

สิ่งที่ต้องทำต่อไป

ชอบ Code Lab นี้ไหม ลองดูห้องทดลองที่ยอดเยี่ยมเหล่านี้สิ