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

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

1. আপনি শুরু করার আগে

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

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

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

পূর্বশর্ত

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

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

আপনি কি শিখবেন

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

আপনি কি নির্মাণ করবেন

ডায়ালগফ্লো, গুগল চ্যাট এবং ক্যালেন্ডারের মধ্যে একীকরণ
(ঐচ্ছিক) সমৃদ্ধ কার্ডের জন্য Google Maps একত্রিত করুন

আপনি কি প্রয়োজন হবে

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

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

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

ডায়ালগফ্লো কনসোলে , ক্লিক করুন .
সাধারণ ট্যাবে, প্রজেক্ট আইডিতে স্ক্রোল করুন, তারপর Google ক্লাউডে ক্লিক করুন .

Google ক্লাউড কনসোলে, নেভিগেশন মেনুতে ক্লিক করুন ☰ > APIs এবং পরিষেবাগুলি > লাইব্রেরি ।
"Google Chat API" অনুসন্ধান করুন, তারপর আপনার Google ক্লাউড প্রকল্পে API ব্যবহার করতে সক্ষম করুন ক্লিক করুন৷
এখন আমরা আপনার চ্যাট অ্যাপ কনফিগার করব, API-এর কনফিগারেশন পৃষ্ঠায় নেভিগেট করব। অনুগ্রহ করে মনে রাখবেন প্রতিটি GCP প্রকল্পে সর্বাধিক একটি চ্যাট অ্যাপ থাকতে পারে।

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

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

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

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

4. Google চ্যাটে পরীক্ষা করুন৷

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

স্পেসের উপরের ডানদিকের কোণায় ড্রপ ডাউনে ক্লিক করুন এবং লোক ও অ্যাপ যোগ করুন নির্বাচন করুন।
AppointmentScheduler জন্য অনুসন্ধান করুন এবং অ্যাপটিকে স্পেসে যোগ করুন।
আপনি এখন শুধু স্পেসে @AppointmentScheduler লিখে Google-এ যে অ্যাপটি তৈরি করেছেন তার সাথে ইন্টারঅ্যাক্ট করতে পারেন।

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

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

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

5. কাস্টম Google চ্যাট কার্ড

Google চ্যাটের মাধ্যমে, আপনি আপনার অ্যাপ ব্যবহারকারীকে একটি মৌলিক পাঠ্য প্রতিক্রিয়া বা একটি কার্ড প্রতিক্রিয়া ফেরত দিতে পারেন যা আপনাকে ছবি, বোতাম ইত্যাদি সহ বিভিন্ন উইজেট দ্বারা নির্মিত একটি সমৃদ্ধ ইন্টারফেসের অনুমতি দেয়৷ এখন আমরা আপনার ডায়ালগফ্লো এজেন্টকে একটি Google চ্যাট অ্যাপের সাথে সংযুক্ত করেছি৷ , আপনার পূরণ কোডে Google-এ দেখানোর জন্য আপনাকে সঠিক বিন্যাসে 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://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

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

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

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

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

Google চ্যাটে ক্লিক করুন এবং ডিফল্ট ট্যাব থেকে প্রতিক্রিয়াগুলিকে প্রথম প্রতিক্রিয়া হিসাবে ব্যবহার করুন , তারপরে প্রতিক্রিয়া যোগ করুন > কাস্টম পেলোড নির্বাচন করুন ।

আপনি একটি 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' টাইপ করুন।

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

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 ইমেজ উইজেট যোগ করুন

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

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

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

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

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

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

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

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

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

সাধারণ ট্যাবে, নীচে স্ক্রোল করুন এবং এই এজেন্ট মুছুন ক্লিক করুন।
ডায়ালগে Delete টাইপ করুন এবং Delete এ ক্লিক করুন।

10. অভিনন্দন

আপনি Dialogflow-এ একটি চ্যাটবট তৈরি করেছেন এবং এটিকে ক্যালেন্ডার এবং এখন Google Chat-এর সাথে একীভূত করেছেন, আপনি একজন Google Workspace Pro!

আরও জানুন

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