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

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

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

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

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

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

आगे बढ़ने से पहले, आपको ये कोडलैब पूरे करने होंगे:

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

आपको 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 Console में इंटिग्रेशन पेज पर जाकर, उन्हें चालू किया जा सकता है.

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

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

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

इस प्लैटफ़ॉर्म पर, पिछले कोडलैब से मिले इनपुट का इस्तेमाल करके इसे आज़माएं:

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

इसके बाद, हम Google Chat में उपलब्ध सुविधाओं का इस्तेमाल करके, ज़्यादा जानकारी वाले जवाब जोड़ेंगे.

5. Google Chat के कस्टम कार्ड

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

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

6. कस्टम पेलोड और चैट कार्ड

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

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

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."
           }
         }
       ]
     }
   ]
 }
}

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

91af6321f3a26e19.png

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

7. फ़ुलफ़िलमेंट में कार्ड जोड़ना

अब हम शेड्यूल किए गए अपॉइंटमेंट को दिखाने के लिए, कई विजेट वाला एक कार्ड बनाएंगे. आइए, 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 Static API से जनरेट होता है. इस एपीआई की मदद से, यूआरएल पैरामीटर का इस्तेमाल करके Maps इमेज बनाई जा सकती है. इसके बाद, हम इस इमेज का इस्तेमाल अपने कार्ड में मौजूद इमेज विजेट में कर सकते हैं.

5b4ca104638f9e8d.png

  1. Google Cloud Console में, Maps Static API को उसी तरह चालू करें जिस तरह आपने Calendar और Google Chat API को चालू किया था.
  2. कंसोल में एपीआई और सेवाएं पेज पर जाकर, अपने प्रोजेक्ट के लिए एक एपीआई पासकोड बनाएं और उसे सेव करें. Maps API के साथ एपीआई पासकोड को वापस पाने और इस्तेमाल करने के सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, कृपया यहां देखें. 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 स्पेस में Chat ऐप्लिकेशन को आज़माएं. आपको आज जोड़े गए कोड के आधार पर, ज़्यादा बेहतर जवाब मिलेगा!

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

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

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

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

520c1c6bb9f46ea6.png

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

10. बधाई हो

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

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

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