Google Chat-এর সাথে Dialogflow একীভূত করা

১. শুরু করার আগে

এই কোডল্যাবে, আপনি শিখবেন কিভাবে ডায়ালগফ্লো গুগল ওয়ার্কস্পেস এপিআই-এর সাথে সংযোগ স্থাপন করে গুগল ক্যালেন্ডারের মাধ্যমে একটি সম্পূর্ণ কার্যকরী অ্যাপয়েন্টমেন্ট শিডিউলার তৈরি করে যা গুগল চ্যাটে গতিশীল প্রতিক্রিয়া প্রদান করে।

যদি আপনার পূর্ববর্তী কোডল্যাবগুলি থেকে সেট আপ না থাকে অথবা ডায়ালগফ্লো এবং পরিপূর্ণতার সাথে আত্মবিশ্বাসী হন, তাহলে আপনি এখান থেকে স্টার্টার কোড এবং এজেন্ট কনফিগারেশন ডাউনলোড করতে পারেন।

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

পূর্বশর্ত

এগিয়ে যাওয়ার আগে, আপনাকে নিম্নলিখিত কোডল্যাবগুলি সম্পূর্ণ করতে হবে:

1. Dialogflow ব্যবহার করে একটি অ্যাপয়েন্টমেন্ট শিডিউলার তৈরি করুন
2. Google-এ অ্যাকশনের সাথে ডায়ালগফ্লো ইন্টিগ্রেট করুন
3. Dialogflow-এ সত্তাগুলি বুঝুন
4. ক্যালেন্ডারের সাথে ডায়ালগফ্লো ইন্টিগ্রেট করে পরিপূর্ণতা বুঝুন

আপনাকে Dialogflow-এর মৌলিক ধারণা এবং গঠনগুলিও বুঝতে হবে, যা আপনি "Dialogflow পাথওয়ে দিয়ে চ্যাটবট তৈরি করুন "-এ পাওয়া নিম্নলিখিত ভিডিওগুলি থেকে শিখতে পারেন।

তুমি কি শিখবে

• কীভাবে একটি Google Chat অ্যাপ স্থাপন এবং কনফিগার করবেন
• গুগল চ্যাটে কীভাবে ডিসপ্লে কার্ড তৈরি করবেন
• ডায়ালগফ্লো পরিপূর্ণতায় কাস্টম পেলোড কীভাবে তৈরি করবেন

তুমি কী তৈরি করবে

• ডায়ালগফ্লো, গুগল চ্যাট এবং ক্যালেন্ডারের মধ্যে একটি ইন্টিগ্রেশন
• (ঐচ্ছিক) রিচার কার্ডের জন্য Google Maps ইন্টিগ্রেট করুন

তোমার যা লাগবে

• Dialogflow কনসোলে লগ ইন করার জন্য একটি ওয়েব ব্রাউজার এবং একটি ইমেল ঠিকানা
• আপনার Google Workspace ডোমেনে Calendar এবং Google Chat চালু করা হয়েছে

সতর্কতা : এই কোডল্যাবটি সম্পূর্ণ করতে আপনাকে অবশ্যই একটি Google Workspace অ্যাকাউন্ট ব্যবহার করতে হবে। API সক্ষম করার চেষ্টা করার সময় @gmail.com অ্যাকাউন্ট ব্যবহার করলে একটি ত্রুটি দেখা দেবে।

2. গুগল চ্যাট সক্ষম এবং কনফিগার করুন

আমরা আগের কোডল্যাবগুলিতে আপনার তৈরি করা ডায়ালগফ্লো এজেন্ট দিয়ে শুরু করব।

1. Dialogflow কনসোলে , ক্লিক করুন .
2. সাধারণ ট্যাবে, Project ID তে স্ক্রোল করুন, তারপর Google Cloud এ ক্লিক করুন। .

3. গুগল ক্লাউড কনসোলে, নেভিগেশন মেনু ☰ > APIs & Services > Library এ ক্লিক করুন।
4. "গুগল চ্যাট এপিআই" অনুসন্ধান করুন, তারপর আপনার গুগল ক্লাউড প্রোজেক্টে এপিআই ব্যবহার করতে সক্ষম করুন এ ক্লিক করুন।
5. এখন আমরা আপনার চ্যাট অ্যাপটি কনফিগার করব, API এর জন্য কনফিগারেশন পৃষ্ঠায় নেভিগেট করব। অনুগ্রহ করে মনে রাখবেন প্রতিটি GCP প্রকল্পে সর্বাধিক একটি চ্যাট অ্যাপ থাকতে পারে।

6. আপনি ডায়ালগফ্লো ক্ষেত্রগুলি কনফিগারেশন বিকল্পগুলি পূরণ করতে দেখতে পাবেন।
7. Avatar URL ফিল্ডটি এই গাড়ির ছবিতে পরিবর্তন করুন: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
8. আপনার চ্যাট অ্যাপটিকে সরাসরি বার্তা এবং স্পেস উভয়ের জন্য সক্ষম করতে, নির্বাচন করুন অ্যাপটি সরাসরি বার্তা পাঠানো যেতে পারে এবং অ্যাপ একাধিক ব্যবহারকারীর সাথে স্পেসে কাজ করে ।

সংরক্ষণ করুন এ ক্লিক করুন এবং ক্লাউড কনসোল থেকে প্রস্থান করুন।

৩. অতিরিক্ত ডায়ালগফ্লো ইন্টিগ্রেশন

গুগল চ্যাট ডিফল্টরূপে সক্ষম থাকে কিন্তু আপনি যদি চান যে একটি বট একাধিক প্ল্যাটফর্ম পরিবেশন করুক, তাহলে আপনি ডায়ালগফ্লো কনসোলের ইন্টিগ্রেশন পৃষ্ঠায় গিয়ে সেগুলি সক্ষম করতে পারেন।

৪. গুগল চ্যাটে পরীক্ষা করুন

এখন আপনার চ্যাট অ্যাপটি কনফিগার করা হয়েছে, আসুন এটি একটি চ্যাট স্পেসে যোগ করি এবং এটি পরীক্ষা করে দেখি। গুগল চ্যাট খুলুন এবং একটি পরীক্ষামূলক স্পেস তৈরি করুন।

1. উপরের ডানদিকের কোণায় ড্রপ ডাউনে ক্লিক করুন এবং "লোক এবং অ্যাপ যোগ করুন" নির্বাচন করুন।
2. AppointmentScheduler অনুসন্ধান করুন এবং অ্যাপটি স্পেসে যুক্ত করুন।
3. এখন আপনি গুগলে ইতিমধ্যেই তৈরি করা অ্যাপটির সাথে ইন্টারঅ্যাক্ট করতে পারবেন, শুধুমাত্র @AppointmentScheduler টাইপ করে।

পূর্ববর্তী কোডল্যাবগুলি থেকে একই ইনপুট ব্যবহার করে এই প্ল্যাটফর্মে এটি পরীক্ষা করে দেখুন:

1. ব্যবহারকারী: "@AppointmentScheduler আগামীকাল দুপুর ২ টায় গাড়ির নিবন্ধনের জন্য একটি অ্যাপয়েন্টমেন্ট নির্ধারণ করুন।"
2. চ্যাট অ্যাপ: "ঠিক আছে, দেখি তোমাকে আমরা ফিট করতে পারি কিনা। ২৪শে এপ্রিল, দুপুর ২টা ঠিক আছে!"

এরপর আমরা আরও উন্নত প্রতিক্রিয়া যোগ করার জন্য Google Chat-এ কাস্টমাইজেশন ব্যবহার করব।

৫. কাস্টম গুগল চ্যাট কার্ড

গুগল চ্যাটের সাহায্যে, আপনি আপনার অ্যাপ ব্যবহারকারীকে একটি বেসিক টেক্সট রেসপন্স অথবা একটি কার্ড রেসপন্স ফেরত দিতে পারেন যা আপনাকে ছবি, বোতাম ইত্যাদি সহ বিভিন্ন উইজেট দ্বারা তৈরি একটি সমৃদ্ধ ইন্টারফেস প্রদান করে। এখন যেহেতু আমরা আপনার ডায়ালগফ্লো এজেন্টকে একটি গুগল চ্যাট অ্যাপের সাথে সংযুক্ত করেছি, তাই আপনাকে কেবল আপনার পূর্ণতা কোডে গুগলে প্রদর্শিত হওয়ার জন্য সঠিক ফর্ম্যাটে JSON ফেরত দিতে হবে। আসুন কিছু JSON উদাহরণ দেখি।

মৌলিক টেক্সট প্রতিক্রিয়াটি এরকম দেখাচ্ছে:

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

উইজেট সহ একটি নমুনা কার্ড প্রতিক্রিয়া দেখতে এরকম:

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

কার্ড সম্পর্কে আরও জানতে দয়া করে মেসেজ ফরম্যাট ডকুমেন্টেশন দেখুন। পরবর্তী বিভাগে আমরা আমাদের চ্যাট অ্যাপে কার্ড যুক্ত করব।

৬. কাস্টম পেলোড এবং চ্যাট কার্ড

Dialogflow-এ কাস্টম পেলোডগুলি প্ল্যাটফর্ম-নির্দিষ্ট সমৃদ্ধ প্রতিক্রিয়া বার্তাগুলির জন্য অনুমতি দেয়। এখানে আমরা আমাদের Hangout Chat JSON কার্ডগুলি যুক্ত করব যেখানে এজেন্ট দ্বারা ব্যবহারকারীকে সেগুলি ফেরত দেওয়া হবে।

আসুন স্বাগতম অভিপ্রায়ের জন্য একটি মৌলিক কার্ড যোগ করে শুরু করি। ডায়ালগফ্লো কনসোলে, ডিফল্ট স্বাগতম অভিপ্রায়ে নেভিগেট করুন এবং প্রতিক্রিয়া বিভাগে স্ক্রোল করুন।

গুগল চ্যাটে ক্লিক করুন এবং প্রথম প্রতিক্রিয়া হিসেবে DEFAULT ট্যাব থেকে Use response অনির্বাচন করুন, তারপর ADD ReSPONSES > Custom Payload করুন ।

আপনি একটি JSON কঙ্কাল দেখতে পাবেন।

নিচের কোডটি কপি করে পেস্ট করুন। আমরা একটি 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' টাইপ করুন।

এরপর আমরা পূর্ণতা কোডে একটি কাস্টম পেলোড যুক্ত করব যাতে আমরা আমাদের কোড দিয়ে গতিশীলভাবে কন্টেন্ট তৈরি করতে পারি।

৭. পূর্ণতায় একটি কার্ড যোগ করা

এখন আমরা একটি নির্ধারিত অ্যাপয়েন্টমেন্ট দেখানোর জন্য বেশ কয়েকটি উইজেট সহ একটি কার্ড তৈরি করব। 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-এ সাড়া দিচ্ছে, তখন এজেন্ট উপরে তৈরি কার্ডটি ফেরত দিতে জানবে। একটি সময়সূচী অনুরোধের মাধ্যমে এটি পরীক্ষা করে দেখুন।

৮. (ঐচ্ছিক) একটি গুগল ম্যাপস ইমেজ উইজেট যোগ করুন

যদি আপনি আপনার রেসপন্স কার্ডটিকে আরও দৃশ্যমান করতে চান, তাহলে আপনি Maps Static API দ্বারা তৈরি অ্যাপয়েন্টমেন্ট অবস্থানের একটি স্ট্যাটিক মানচিত্র যোগ করতে পারেন। API আপনাকে URL প্যারামিটার অনুসারে একটি Maps চিত্র তৈরি করতে দেয়। এরপর আমরা আমাদের কার্ডের একটি চিত্র উইজেটে চিত্রটি ব্যবহার করতে পারি।

1. গুগল ক্লাউড কনসোলে ম্যাপস স্ট্যাটিক এপিআই সক্ষম করুন, ঠিক যেমন আপনি ক্যালেন্ডার এবং গুগল চ্যাট এপিআই সক্ষম করেছেন।
2. কনসোলের API এবং পরিষেবা পৃষ্ঠায় আপনার প্রকল্পের জন্য একটি API কী তৈরি করুন এবং সংরক্ষণ করুন। মানচিত্রের মাধ্যমে API কীগুলির পুনরুদ্ধার এবং সর্বোত্তম অনুশীলন সম্পর্কে আরও তথ্যের জন্য, দয়া করে এখানে দেখুন।
3. index.js ফাইলের উপরে API কী এবং নিম্নলিখিত ধ্রুবকগুলি কপি করুন।

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';

4. এরপর আপনার getGoogleChatCard ফাংশনে একটি ইমেজ উইজেট যোগ করুন।

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

5. আপনার infoSection ভেরিয়েবলের উইজেটের তালিকায় mapImageWidget যোগ করুন, সংরক্ষণ করুন এবং স্থাপন করুন।
6. আপনার চ্যাট অ্যাপটি আপনার চ্যাট স্পেসে পরীক্ষা করে দেখুন এবং আজ আপনার যোগ করা কোডের উপর ভিত্তি করে আপনার একটি সমৃদ্ধ প্রতিক্রিয়া আসবে!

9. পরিষ্কার করা

যদি আপনি অন্যান্য Dialogflow কোডল্যাব সম্পূর্ণ করার পরিকল্পনা করেন, তাহলে আপাতত এই বিভাগটি এড়িয়ে যান এবং পরে আবার এটিতে ফিরে আসুন।

ডায়ালগফ্লো এজেন্ট মুছে ফেলুন

1. ক্লিক করুন আপনার বিদ্যমান এজেন্টের পাশে।

2. জেনারেল ট্যাবে, নীচে স্ক্রোল করুন এবং Delete This Agent এ ক্লিক করুন।
3. ডায়ালগে Delete টাইপ করুন এবং Delete এ ক্লিক করুন।

১০. অভিনন্দন

তুমি Dialogflow-এ একটি চ্যাটবট তৈরি করে Calendar-এর সাথে ইন্টিগ্রেট করেছো, আর এখন Google Chat, তুমি একজন Google Workspace Pro!

আরও জানুন

আরও জানতে, Dialogflow Github পৃষ্ঠায় কোড নমুনাগুলি দেখুন।