১. ভূমিকা
যেহেতু আপনি আগের কোডল্যাবে একটি টিভি গাইডের জন্য ডায়ালগফ্লো চ্যাটবট তৈরি করেছেন, আমরা এখন আপনাকে দেখাবো কিভাবে এটিকে গুগল চ্যাটে সম্প্রসারিত করতে হয়। আপনি শিখবেন কিভাবে এই প্ল্যাটফর্মের জন্য ডায়নামিক, ইন্টারেক্টিভ কার্ড তৈরি করতে হয় এবং একাধিক ইন্টিগ্রেশন যুক্ত করতে হয়।
আপনি যা তৈরি করবেন
আমরা একটি Dialogflow চ্যাটবট তৈরি করব যা আপনার Google Workspace ডোমেনে কাস্টমাইজযোগ্য প্রতিক্রিয়া জানাতে পারবে।
আপনি যা শিখবেন
- কীভাবে একটি গুগল চ্যাট অ্যাপ স্থাপন এবং কনফিগার করবেন
- গুগল চ্যাটে কীভাবে ডিসপ্লে কার্ড তৈরি করবেন
- 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/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - সরাসরি বার্তা এবং স্পেস উভয়ের জন্য আপনার গুগল চ্যাট অ্যাপটি চালু করুন।
সেভ-এ ক্লিক করুন এবং ক্লাউড কনসোল থেকে বেরিয়ে যান।
এছাড়াও ডায়ালগফ্লো ইন্টিগ্রেশন রয়েছে। গুগল চ্যাট ডিফল্টরূপে সক্রিয় থাকে, কিন্তু আপনি যদি একাধিক প্ল্যাটফর্ম ব্যবহার করতে চান, তবে সেগুলি সক্রিয় করার জন্য ডায়ালগফ্লো কনসোলের ইন্টিগ্রেশন পৃষ্ঠায় যেতে পারেন।
৩. গুগল চ্যাটে পরীক্ষা করুন
এখন যেহেতু আপনার গুগল চ্যাট অ্যাপটি কনফিগার করা হয়ে গেছে, চলুন এটিকে একটি চ্যাট স্পেসে যুক্ত করে পরীক্ষা করে দেখি। গুগল চ্যাট খুলুন এবং একটি পরীক্ষামূলক চ্যাট স্পেস তৈরি করুন। স্পেসটির উপরের ডান কোণায় থাকা ড্রপ-ডাউনে ক্লিক করে ‘Add people & apps’ নির্বাচন করুন।
tvguide অনুসন্ধান করুন এবং নির্দিষ্ট স্থানে Google Chat অ্যাপটি যুক্ত করুন।
এখন আপনি Google Chat-এ আগে থেকেই থাকা অ্যাপটি ব্যবহার করতে পারবেন, শুধু নির্দিষ্ট জায়গায় @tvguide টাইপ করে। এটি পরীক্ষা করার জন্য @tvguide hello টাইপ করুন।
এরপরে আমরা গুগল চ্যাটের কাস্টমাইজেশন ব্যবহার করে আরও বিশদ উত্তর যোগ করব।
৪. কাস্টম গুগল চ্যাট কার্ড
গুগল চ্যাটের মাধ্যমে, আপনি আপনার অ্যাপ থেকে ব্যবহারকারীকে একটি সাধারণ টেক্সট রেসপন্স অথবা একটি কার্ড রেসপন্স পাঠাতে পারেন, যা আপনাকে ছবি, বাটন ইত্যাদি বিভিন্ন উইজেট দিয়ে তৈরি একটি আরও সমৃদ্ধ ইন্টারফেসের সুবিধা দেয়। এখন যেহেতু আমরা আপনার Dialogflow Agent-কে একটি গুগল চ্যাট অ্যাপের সাথে সংযুক্ত করেছি, আপনার ফুলফিলমেন্ট কোডে গুগল চ্যাটে দেখানোর জন্য আপনাকে শুধু সঠিক ফরম্যাটে JSON রিটার্ন করতে হবে। চলুন কিছু JSON উদাহরণ দেখে নেওয়া যাক।
মূল লিখিত উত্তরটি দেখতে এইরকম:
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
উইজেট সহ একটি নমুনা কার্ড প্রতিক্রিয়া দেখতে এইরকম:
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
৫. কাস্টম পেলোড এবং চ্যাট কার্ড
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": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
সেভ করুন, তারপর এই কার্ডটি রেন্ডার হয়েছে কিনা তা দেখতে আপনার টেস্ট চ্যাট স্পেসে যান। চ্যাট স্পেসে, '@tvguide hello' টাইপ করুন।
এরপরে আমরা ফুলফিলমেন্ট কোডে একটি কাস্টম পেলোড যোগ করব, যাতে আমাদের কোডের মাধ্যমে ডাইনামিকভাবে কন্টেন্ট তৈরি করা যায়।
কার্ড সম্পর্কে আরও জানতে অনুগ্রহ করে মেসেজ ফরম্যাট ডকুমেন্টেশন দেখুন। পরবর্তী বিভাগে আমরা কার্ড যুক্ত করব।
৬. ফুলফিলমেন্টে একটি কার্ড যোগ করা
এখন আমরা টিভি অনুষ্ঠানের তালিকা দেখানোর জন্য উইজেটসহ একটি কার্ড তৈরি করব। চলুন getGoogleCard নামে একটি ফাংশন যোগ করি, যেখানে আমরা প্রাপ্ত তালিকার তথ্য রেন্ডার করব। কার্ডের প্রতিক্রিয়াটি তৈরি করতে আমরা keyValue এবং button উইজেট ব্যবহার করব।
আপনার index.js ফাইলের একদম শেষে নিচের ফাংশনটি যোগ করুন।
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
এখন আমাদের এই মেথডটি কল করতে হবে যাতে এজেন্ট ব্যবহারকারীকে ফেরত পাঠানোর জন্য রেসপন্সটি পেতে পারে। `channelHandler` ফাংশনের ভেতরের কোড নিচের কোড দিয়ে প্রতিস্থাপন করুন।
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
নিচের কোডটি লক্ষ্য করুন যেখানে রেসপন্সটি যোগ করা হয়েছে। যদি এজেন্টের রিকোয়েস্ট সোর্স হিসেবে এই প্ল্যাটফর্মটিকে চিহ্নিত করা হয়, তাহলে আমরা 'hangouts' ট্যাগটি দিয়ে JSON পেলোডটি তৈরি করি। ফুলফিলমেন্টের সময় পেলোডটি সঠিকভাবে ফেরত পাঠানোর জন্য এটি গুরুত্বপূর্ণ।
এখন আপনার চ্যাট স্পেসে ফিরে যান এবং এটি পরীক্ষা করে দেখুন। টাইপ করুন @tvguide What is on MTV? আপনি একটি অনুরূপ প্রতিক্রিয়া দেখতে পাবেন।
৭. অভিনন্দন
আপনি Dialogflow ব্যবহার করে আপনার প্রথম গুগল চ্যাট বট তৈরি করেছেন!
এরপর কী?
এই কোড ল্যাবটি কি আপনার ভালো লেগেছে? তাহলে এই চমৎকার ল্যাবগুলোও দেখে নিন!