এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

এই কোডল্যাবে আপনি শিখবেন, কীভাবে Dialogflow, Google Workspace API-এর সাথে সংযোগ স্থাপন করে Google Calendar সহ একটি সম্পূর্ণ কার্যকরী অ্যাপয়েন্টমেন্ট শিডিউলার তৈরি করে, যেখানে Google Chat-এ ডায়নামিক প্রতিক্রিয়াও পাওয়া যায়।

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

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

পূর্বশর্ত

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

আপনাকে Dialogflow-এর মৌলিক ধারণা এবং গঠন সম্পর্কেও বুঝতে হবে, যা আপনি 'Build a chatbot with Dialogflow' পাথওয়েতে থাকা নিম্নলিখিত ভিডিওগুলো থেকে জেনে নিতে পারেন।

আপনি যা শিখবেন

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

আপনি যা তৈরি করবেন

ডায়ালগফ্লো, গুগল চ্যাট এবং ক্যালেন্ডারের মধ্যে একটি ইন্টিগ্রেশন
(ঐচ্ছিক) আরও সমৃদ্ধ কার্ডের জন্য গুগল ম্যাপস যুক্ত করুন।

আপনার যা যা লাগবে

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

২. গুগল চ্যাট সক্রিয় এবং কনফিগার করুন

আমরা পূর্ববর্তী কোডল্যাবগুলোতে আপনার তৈরি করা Dialogflow Agent-টি দিয়ে শুরু করব।

Dialogflow কনসোলে , ক্লিক করুন .
জেনারেল ট্যাবে, প্রজেক্ট আইডি পর্যন্ত স্ক্রোল করুন, তারপর গুগল ক্লাউড-এ ক্লিক করুন। .

গুগল ক্লাউড কনসোলে, নেভিগেশন মেনু ☰ > এপিআই ও পরিষেবা > লাইব্রেরি- তে ক্লিক করুন।
'Google Chat API' লিখে সার্চ করুন, তারপর আপনার Google Cloud প্রজেক্টে API-টি ব্যবহার করার জন্য Enable-এ ক্লিক করুন।
এখন আমরা আপনার চ্যাট অ্যাপটি কনফিগার করব, এর জন্য API-এর কনফিগারেশন পেজে যান। অনুগ্রহ করে মনে রাখবেন, প্রতিটি GCP প্রজেক্টে সর্বাধিক একটি চ্যাট অ্যাপ থাকতে পারে।

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

সেভ-এ ক্লিক করুন এবং ক্লাউড কনসোল থেকে বেরিয়ে যান।

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

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

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

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

স্থানটির উপরের ডান কোণায় ড্রপ-ডাউনে ক্লিক করে ‘Add people & apps’ নির্বাচন করুন।
AppointmentScheduler অনুসন্ধান করুন এবং অ্যাপটি আপনার স্পেসে যুক্ত করুন।
এখন আপনি নির্দিষ্ট স্থানে শুধু @AppointmentScheduler টাইপ করে গুগলে আপনার আগে থেকে তৈরি করা অ্যাপটি ব্যবহার করতে পারবেন।

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

ব্যবহারকারী: "@AppointmentScheduler আগামীকাল দুপুর ২টায় যানবাহন নিবন্ধনের জন্য একটি অ্যাপয়েন্টমেন্ট নির্ধারণ করুন।"
চ্যাট অ্যাপ: "আচ্ছা, দেখি আপনাকে জায়গা দেওয়া যায় কিনা। ২৪শে এপ্রিল, দুপুর ২টা আপনার জন্য সুবিধাজনক!"

এরপরে আমরা গুগল চ্যাটের কাস্টমাইজেশন ব্যবহার করে আরও বিশদ উত্তর যোগ করব।

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

গুগল চ্যাটের মাধ্যমে, আপনি আপনার অ্যাপ থেকে ব্যবহারকারীকে একটি সাধারণ টেক্সট রেসপন্স অথবা একটি কার্ড রেসপন্স পাঠাতে পারেন, যা আপনাকে ছবি, বাটন ইত্যাদি বিভিন্ন উইজেট দিয়ে তৈরি একটি আরও সমৃদ্ধ ইন্টারফেসের সুবিধা দেয়। এখন যেহেতু আমরা আপনার Dialogflow Agent-কে একটি গুগল চ্যাট অ্যাপের সাথে সংযুক্ত করেছি, আপনার ফুলফিলমেন্ট কোডে গুগলে দেখানোর জন্য আপনাকে শুধু সঠিক ফরম্যাটে 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 কার্ডগুলো যুক্ত করব, যেগুলো এজেন্টের মাধ্যমে ব্যবহারকারীকে ফেরত পাঠানো হবে।

ওয়েলকাম ইন্টেন্টের জন্য একটি বেসিক কার্ড যোগ করার মাধ্যমে শুরু করা যাক। Dialogflow Console-এ, Default Welcome Intent-এ যান এবং responses সেকশন পর্যন্ত স্ক্রল ডাউন করুন।

Google Chat- এ ক্লিক করুন এবং 'Use responses from the DEFAULT tab as the first responses' অপশনটি আনসিলেক্ট করুন, তারপর '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}.`);
 });
}

যখন এজেন্ট গুগল চ্যাটে উত্তর দেবেন, তখন তিনি উপরে তৈরি করা কার্ডটি ফেরত দিতে জানবেন। একটি শিডিউলিং অনুরোধের মাধ্যমে এটি পরীক্ষা করে দেখুন।

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

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

ক্যালেন্ডার এবং গুগল চ্যাট এপিআই যেভাবে সক্রিয় করেছিলেন, ঠিক সেভাবেই গুগল ক্লাউড কনসোলে ম্যাপস স্ট্যাটিক এপিআই সক্রিয় করুন।
কনসোলের APIs & Services পেজে আপনার প্রোজেক্টের জন্য একটি API কী তৈরি করে সংরক্ষণ করুন। Maps-এর সাথে API কী পুনরুদ্ধার এবং এর সর্বোত্তম অনুশীলন সম্পর্কে আরও তথ্যের জন্য, অনুগ্রহ করে এখানে দেখুন।
আপনার 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';

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

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

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

৯. পরিষ্কার করুন

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

Dialogflow এজেন্টটি মুছে ফেলুন

ক্লিক করুন আপনার বর্তমান এজেন্টের পাশে।

জেনারেল ট্যাবে, একদম নিচে স্ক্রোল করুন এবং ‘ডিলিট দিস এজেন্ট’ এ ক্লিক করুন।
ডায়ালগ বক্সে Delete টাইপ করুন এবং Delete-এ ক্লিক করুন।

১০. অভিনন্দন

আপনি Dialogflow-তে একটি চ্যাটবট তৈরি করেছেন এবং সেটিকে ক্যালেন্ডার ও এখন গুগল চ্যাটের সাথে ইন্টিগ্রেট করেছেন, আপনি একজন গুগল ওয়ার্কস্পেস প্রো!

আরও জানুন

আরও জানতে, Dialogflow গিটহাব পেজে থাকা কোড নমুনাগুলো দেখুন।