खुद करके देखें: Google Workspace और Dialogflow की मदद से, टीवी गाइड बनाएं

1. परिचय

आपने पिछले कोडलैब में, टीवी गाइड के लिए Dialogflow चैटबॉट बना लिया है. अब हम आपको Google Chat में इसे इस्तेमाल करने का तरीका बताएंगे. आपको इस प्लैटफ़ॉर्म के लिए डाइनैमिक, इंटरैक्टिव कार्ड बनाने और एक से ज़्यादा इंटिग्रेशन जोड़ने के तरीके की जानकारी मिलेगी.

आपको क्या बनाना होगा

हम एक ऐसा Dialogflow चैटबॉट बनाएंगे जो आपके Google Workspace डोमेन में, अपनी पसंद के मुताबिक जवाब दे सके.

2e16770ceed20cb2.png

आपको इनके बारे में जानकारी मिलेगी

  • Google Chat ऐप्लिकेशन को डिप्लॉय और कॉन्फ़िगर करने का तरीका
  • Google Chat में डिसप्ले कार्ड बनाने का तरीका
  • Dialogflow के फ़ुलफ़िलमेंट में पसंद के मुताबिक पेलोड बनाने का तरीका

आपको इनकी ज़रूरत होगी

  • दो हिस्सों की इस सीरीज़ में, पहली कोडलैब को पूरा करें.
  • Dialogflow कंसोल में लॉग इन करने के लिए एक वेब ब्राउज़र और एक ईमेल पता
  • आपके Google Workspace डोमेन में चैट की सुविधा चालू कर दी गई है

2. Google Chat को चालू और कॉन्फ़िगर करें

हम पिछले कोडलैब में बनाए गए उस Dialogflow एजेंट से शुरुआत करेंगे जिसे आपने बनाया है.

  1. Dialogflow कंसोल में, d7d792687e597dd5.png पर क्लिक करें.
  2. सामान्य टैब में, स्क्रोल करके प्रोजेक्ट आईडी पर जाएं. इसके बाद, Google Cloud f2bffd4fcdb84fa9.png पर क्लिक करें.

cb893582402e4092.png

  1. Google Cloud Console में, नेविगेशन मेन्यू रजिस्ट्रेंट पर क्लिक करें > एपीआई और सेवाएं > लाइब्रेरी.
  2. "Google Chat API" खोजें. इसके बाद, अपने Google Cloud प्रोजेक्ट पर एपीआई का इस्तेमाल करने के लिए, चालू करें पर क्लिक करें.
  3. अब हम आपके Google Chat ऐप्लिकेशन को कॉन्फ़िगर करेंगे और एपीआई के कॉन्फ़िगरेशन पेज पर जाएंगे. कृपया ध्यान दें कि हर GCP प्रोजेक्ट में ज़्यादा से ज़्यादा एक Google Chat ऐप्लिकेशन हो सकता है. 85794eaaaedc7eb5.png अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  4. आपको कॉन्फ़िगरेशन के विकल्पों की जानकारी अपने-आप भरने वाले Dialogflow फ़ील्ड दिखेंगे.
  5. अवतार यूआरएल फ़ील्ड को, टीवी की इस इमेज में बदलें: [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 के कंसोल में इंटिग्रेशन पेज पर जाकर, इन्हें चालू किया जा सकता है.

63296523b678ff8d.png

3. Google Chat में जांच करें

आपका Google Chat ऐप्लिकेशन कॉन्फ़िगर हो गया है. अब इसे चैट स्पेस में जोड़ें और इसकी जांच करें. Google Chat खोलें और जांच के लिए चैट स्पेस बनाएं. स्पेस के ऊपरी दाएं कोने में मौजूद ड्रॉप-डाउन पर क्लिक करें. इसके बाद, लोगों को जोड़ें और ऐप्लिकेशन हैं.

f0dd1f5e205ef8e2.png

tvguide खोजें और स्पेस में Google Chat ऐप्लिकेशन जोड़ें.

e60fa78fdd020304.png

अब स्पेस में @tvguide टाइप करके, Google Chat में पहले से मौजूद Google Chat ऐप्लिकेशन के साथ इंटरैक्ट किया जा सकता है. इसे आज़माने के लिए, @tvguide hello टाइप करें.

e8399e33185c63ec.png

इसके बाद, बेहतर जवाब देने के लिए हम 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?"
}

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 में कस्टम पेलोड की सुविधा, प्लैटफ़ॉर्म के हिसाब से ज़्यादा बेहतर जवाब देने वाले मैसेज भेजने की सुविधा देती है. यहां हम Hangout Chat के JSON कार्ड जोड़ेंगे. यहां एजेंट, उन्हें उपयोगकर्ता को वापस भेज देगा.

चलिए, वेलकम इंटेंट के लिए बेसिक कार्ड जोड़कर शुरुआत करते हैं. Dialogflow कंसोल में, डिफ़ॉल्ट वेलकम इंटेंट पर जाएं और नीचे की ओर स्क्रोल करके जवाबों के सेक्शन पर जाएं.

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' टाइप करें

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

जवाब के सबसे नीचे मौजूद कोड को नोट करें. अगर एजेंट के अनुरोध के सोर्स की पहचान इस प्लैटफ़ॉर्म के तौर पर की जाती है, तो हम JSON पेलोड को ‘Hangouts' टैग के साथ बनाते हैं. यह ज़रूरी है कि ऑर्डर पूरा करने के लिए, पेलोड को सही तरीके से वापस भेजा जा सके.

अब चैट स्पेस में वापस जाएं और इसे आज़माएं. @tvguide What is on MTV? टाइप करें. आपको इससे मिलता-जुलता जवाब दिखेगा.

2e16770ceed20cb2.png

7. बधाई हो

आपने Dialogflow की मदद से अपना पहला Google Chat बॉट बनाया है!

आगे क्या होगा?

क्या आपको यह कोड लैब पसंद आया? ये बेहतरीन लैब देखें!