Dialogflow को Google Chat के साथ इंटिग्रेट करना

1. शुरू करने से पहले

इस कोडलैब में, आपको यह जानकारी मिलेगी कि Dialogflow, Google Workspace API के साथ कैसे कनेक्ट करता है. इससे Google Calendar और Google Chat में डाइनैमिक रिस्पॉन्स की सुविधा के साथ, अपॉइंटमेंट शेड्यूल करने की सुविधा पूरी तरह से काम करती है.

अगर आपके पास अब भी पिछले कोडलैब का सेट अप नहीं है या आपको Dialogflow और एजेंट को कॉन्फ़िगर करने का भरोसा है, तो यहां से स्टार्टर कोड और एजेंट कॉन्फ़िगरेशन डाउनलोड किया जा सकता है

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

ज़रूरी शर्तें

आगे बढ़ने से पहले, आपको नीचे दिए गए कोडलैब पूरे करने होंगे:

  1. Dialogflow की मदद से अपॉइंटमेंट शेड्यूल करने वाला टूल बनाना
  2. Actions on Google के साथ Dialogflow को इंटिग्रेट करना
  3. Dialogflow में मौजूद इकाइयों को समझना
  4. Calendar के साथ Dialogflow को इंटिग्रेट करके, ऑर्डर पूरा करने की जानकारी पाएं

आपको Dialogflow के बुनियादी सिद्धांतों और स्ट्रक्चर को भी समझना होगा. इन वीडियो को Dialogflow की मदद से चैटबॉट बनाएं पाथवे में देखा जा सकता है. इन वीडियो की मदद से, इन्हें बनाया जा सकता है.

आप इन चीज़ों के बारे में जानेंगे

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

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

  • Dialogflow, Google Chat, और Calendar को इंटिग्रेट करना
  • (वैकल्पिक) रिच कार्ड के लिए Google Maps को इंटिग्रेट करें

5b4ca104638f9e8d.png

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

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

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

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

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

34be16fcd4c5aeff.png

  1. Google Cloud Console में, नेविगेशन मेन्यू रजिस्ट्रेंट पर क्लिक करें > एपीआई और सेवाएं > लाइब्रेरी.
  2. "Google Chat API" खोजें. इसके बाद, अपने Google Cloud प्रोजेक्ट पर एपीआई का इस्तेमाल करने के लिए, चालू करें पर क्लिक करें.
  3. अब हम आपके Chat ऐप्लिकेशन को कॉन्फ़िगर करेंगे और एपीआई के कॉन्फ़िगरेशन पेज पर जाएंगे. कृपया ध्यान दें कि हर GCP प्रोजेक्ट में ज़्यादा से ज़्यादा एक Chat ऐप्लिकेशन हो सकता है.
  1. आपको कॉन्फ़िगरेशन के विकल्पों की जानकारी अपने-आप भरने वाले Dialogflow फ़ील्ड दिखेंगे.
  2. अवतार यूआरएल फ़ील्ड को कार की इस इमेज में बदलें: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. अगर आपको डायरेक्ट मैसेज और स्पेस, दोनों के लिए Chat ऐप्लिकेशन चालू करना है, तो ऐप्लिकेशन को सीधे तौर पर मैसेज भेजा जा सकता है और ऐप्लिकेशन एक से ज़्यादा उपयोगकर्ताओं वाले स्पेस में काम करता है को चुनें.

सेव करें पर क्लिक करें और Cloud Console से बाहर निकलें.

3. Dialogflow के अन्य इंटिग्रेशन

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

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

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

  1. स्पेस के ऊपरी दाएं कोने में मौजूद ड्रॉप-डाउन पर क्लिक करें. इसके बाद, लोगों को जोड़ें और ऐप्लिकेशन हैं.
  2. AppointmentScheduler खोजें और ऐप्लिकेशन को स्पेस में जोड़ें.
  3. अब स्पेस में @AppointmentScheduler पर टाइप करके, Google में पहले से मौजूद ऐप्लिकेशन के साथ इंटरैक्ट किया जा सकता है.

पिछले कोडलैब के उसी इनपुट की मदद से, इस प्लैटफ़ॉर्म पर इसे टेस्ट करें:

  1. उपयोगकर्ता: "@AppointmentScheduler, कल दोपहर 2 बजे गाड़ी के रजिस्ट्रेशन के लिए, अपॉइंटमेंट सेट करो."
  2. चैट ऐप्लिकेशन: "ठीक है, मुझे देखते हैं कि क्या हम आपको इस मुहिम में शामिल कर सकते हैं. 24 अप्रैल, दोपहर 2 बजे ठीक रहेगा!"

इसके बाद, बेहतर जवाब देने के लिए हम Google Chat में पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करेंगे.

5. पसंद के मुताबिक बनाए गए Google Chat कार्ड

Google Chat में, अपने ऐप्लिकेशन से उपयोगकर्ता को सामान्य टेक्स्ट रिस्पॉन्स या कार्ड रिस्पॉन्स भेजा जा सकता है. इसकी मदद से, अलग-अलग विजेट के ज़रिए बेहतर इंटरफ़ेस बनाया जा सकता है. इसमें इमेज, बटन वगैरह शामिल हैं. अब हमने आपके Dialogflow एजेंट को Google Chat ऐप्लिकेशन से कनेक्ट कर दिया है. इसलिए, आपको बस JSON को सही फ़ॉर्मैट में लौटाना होगा, ताकि उसे Google में आपके फ़ुलफ़िलमेंट कोड में दिखाया जा सके. आइए, JSON के कुछ उदाहरण देखते हैं.

सामान्य टेक्स्ट रिस्पॉन्स ऐसा दिखता है:

 {
  "text": "Your pizza delivery is here!"
}

7e1cd3efb4fe9d1f.png

विजेट के साथ एक सैंपल कार्ड रिस्पॉन्स कुछ ऐसा दिखता है:

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

72ac1b2903ed60b6.png

कार्ड के बारे में ज़्यादा जानने के लिए, कृपया मैसेज फ़ॉर्मैट से जुड़े दस्तावेज़ देखें. अगले सेक्शन में, हम अपने चैट ऐप्लिकेशन में कार्ड जोड़ेंगे.

6. पसंद के मुताबिक पेलोड और चैट कार्ड

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

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

9624208f0d266afd.png

Google Chat पर क्लिक करें. इसके बाद, डिफ़ॉल्ट टैब से मिले जवाबों को पहले जवाबों के तौर पर इस्तेमाल करें से, चुने हुए का निशान हटाएं. इसके बाद, जवाब जोड़ें > पसंद के मुताबिक पेलोड.

आपको एक JSON स्केलेटन दिखेगा.

bb064f7ec1237fd3.png

नीचे दिए गए कोड को कॉपी करके चिपकाएं. हमने TextParagraph विजेट के साथ एक कार्ड सेट अप किया है.

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

सेव करें को दबाएं. इसके बाद, इस कार्ड को रेंडर किया गया देखने के लिए, आपके टेस्ट चैट स्पेस में जाते हैं. चैट स्पेस में, ‘@AppointmentScheduler hello' को टाइप करें.

91af6321f3a26e19.png

इसके बाद, हम फ़ुलफ़िलमेंट कोड में कस्टम पेलोड जोड़ देंगे, ताकि हम अपने कोड का इस्तेमाल करके, डाइनैमिक तरीके से कॉन्टेंट जनरेट कर सकें.

7. Fulfillment में कार्ड की जानकारी जोड़ी जा रही है

अब हम शेड्यूल किया गया अपॉइंटमेंट दिखाने के लिए, कई विजेट वाला एक कार्ड बनाएंगे. अब 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}.`);
 });
}

जब एजेंट Google Chat में जवाब देगा, तब एजेंट को पता चल जाएगा कि वह ऊपर दिया गया कार्ड लौटा रहा है. इसे शेड्यूल करने के अनुरोध की मदद से टेस्ट करें.

8. (ज़रूरी नहीं) Google Maps का इमेज विजेट जोड़ें

अगर आपको अपने जवाब कार्ड को ज़्यादा विज़ुअल बनाना है, तो अपॉइंटमेंट की जगह का स्टैटिक मैप जोड़ें. इसे Maps ढूंढने के लिए एपीआई से जनरेट किया जाता है. एपीआई की मदद से, यूआरएल पैरामीटर का इस्तेमाल करके Maps की इमेज बनाई जा सकती है. इसके बाद, हम उस इमेज को अपने कार्ड के इमेज विजेट में इस्तेमाल कर सकते हैं.

5b4ca104638f9e8d.png

  1. Google Cloud Console में, Maps का स्टैटिक एपीआई उसी तरह चालू करें जिस तरह आपने Calendar और Google Chat API को चालू किया है.
  2. अपने प्रोजेक्ट के लिए एपीआई पासकोड बनाएं और उसे एपीआई और कंसोल में सेवाएं पेज पर जाएं. Maps पर एपीआई पासकोड की जानकारी वापस पाने और सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, कृपया यहां देखें. c0238236d3c709c5.png
  3. 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';
  1. इसके बाद अपने getGoogleChatCard फ़ंक्शन में एक इमेज विजेट जोड़ें
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. अपने infosection वैरिएबल के विजेट की सूची में mapImageWidget जोड़ें, तो सेव करें और डिप्लॉय करें.
  2. चैट स्पेस में अपने Chat ऐप्लिकेशन की जांच करें. आपने आज ही जो कोड जोड़ा है उसके हिसाब से आपको बेहतर जवाब मिलेगा!

9. व्यवस्थित करें

अगर आपको अन्य Dialogflow कोडलैब पूरे करने हैं, तो इस सेक्शन को अभी के लिए छोड़ें और बाद में इस पर वापस आएं.

Dialogflow एजेंट को मिटाएं

  1. अपने मौजूदा एजेंट के बगल में मौजूद, dc4ac6f9c0ae94e9.png पर क्लिक करें.

520c1c6bb9f46ea6.png

  1. सामान्य टैब में, स्क्रोल करके नीचे जाएं और इस एजेंट को मिटाएं पर क्लिक करें.
  2. डायलॉग बॉक्स में Delete टाइप करें और मिटाएं पर क्लिक करें.

10. बधाई हो

आपने Dialogflow में चैटबॉट बनाया है और उसे Calendar और अब Google Chat में इंटिग्रेट कर दिया है. आप अब Google Workspace Pro हैं!

ज़्यादा जानें

ज़्यादा जानने के लिए, Dialogflow GitHub पेज पर कोड सैंपल देखें.