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

1. परिचय

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

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

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

2e16770ceed20cb2.png

आपको क्या सीखने को मिलेगा

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

आपको किन चीज़ों की ज़रूरत होगी

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

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 ऐप्लिकेशन को कॉन्फ़िगर करेंगे. इसके लिए, API के कॉन्फ़िगरेशन पेज पर जाएं. कृपया ध्यान दें कि हर 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 Console में इंटिग्रेशन पेज पर जाकर, उन्हें चालू किया जा सकता है.

63296523b678ff8d.png

3. Google Chat में टेस्ट करना

Google 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 की मदद से, आपका ऐप्लिकेशन उपयोगकर्ता को सामान्य टेक्स्ट वाला जवाब या कार्ड वाला जवाब दे सकता है. कार्ड वाले जवाब में, आपको अलग-अलग विजेट से बना बेहतर इंटरफ़ेस मिलता है. इसमें इमेज, बटन वगैरह शामिल होते हैं. हमने आपके 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 Console में, डिफ़ॉल्ट वेलकम इंटेंट पर जाएं और नीचे की ओर स्क्रोल करके जवाब वाले सेक्शन पर जाएं.

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

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

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

2e16770ceed20cb2.png

7. बधाई हो

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

आगे क्या करना है?

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