1. ভূমিকা
এখন যেহেতু আপনি আগের কোডল্যাবে একটি টিভি গাইডের জন্য একটি Dialogflow চ্যাটবট তৈরি করেছেন, আমরা আপনাকে দেখাবো কিভাবে এটি Google Chat-এ প্রসারিত করবেন। আপনি শিখবেন কিভাবে এই প্ল্যাটফর্মের জন্য গতিশীল, ইন্টারেক্টিভ কার্ড তৈরি করতে হয় এবং একাধিক ইন্টিগ্রেশন করতে হয়।
তুমি কী তৈরি করবে
আমরা একটি Dialogflow চ্যাটবট তৈরি করব যা আপনার Google Workspace ডোমেনে কাস্টমাইজযোগ্য প্রতিক্রিয়া সহ প্রতিক্রিয়া জানাতে পারবে।
তুমি কি শিখবে
- কীভাবে একটি Google Chat অ্যাপ স্থাপন এবং কনফিগার করবেন
- গুগল চ্যাটে কীভাবে ডিসপ্লে কার্ড তৈরি করবেন
- ডায়ালগফ্লো পরিপূর্ণতায় কাস্টম পেলোড কীভাবে তৈরি করবেন
তোমার যা লাগবে
- এই ২-পর্বের সিরিজের প্রথম কোডল্যাবটি সম্পূর্ণ করুন।
- Dialogflow কনসোলে লগ ইন করার জন্য একটি ওয়েব ব্রাউজার এবং একটি ইমেল ঠিকানা
- আপনার Google Workspace ডোমেনে চ্যাট চালু করা হয়েছে
2. গুগল চ্যাট সক্ষম এবং কনফিগার করুন
আমরা আগের কোডল্যাবগুলিতে আপনার তৈরি করা ডায়ালগফ্লো এজেন্ট দিয়ে শুরু করব।
- Dialogflow কনসোলে , ক্লিক করুন
. - সাধারণ ট্যাবে, Project ID তে স্ক্রোল করুন, তারপর Google Cloud এ ক্লিক করুন।
.
- গুগল ক্লাউড কনসোলে, নেভিগেশন মেনু ☰ > APIs & Services > Library এ ক্লিক করুন।
- "গুগল চ্যাট এপিআই" অনুসন্ধান করুন, তারপর আপনার গুগল ক্লাউড প্রোজেক্টে এপিআই ব্যবহার করতে সক্ষম করুন এ ক্লিক করুন।
- এখন আমরা আপনার Google Chat অ্যাপটি কনফিগার করব, API এর জন্য কনফিগারেশন পৃষ্ঠায় নেভিগেট করব। অনুগ্রহ করে মনে রাখবেন প্রতিটি GCP প্রকল্পে সর্বাধিক একটি Google Chat অ্যাপ থাকতে পারে।
- আপনি ডায়ালগফ্লো ক্ষেত্রগুলি কনফিগারেশন বিকল্পগুলি পূরণ করতে দেখতে পাবেন।
- 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) - সরাসরি বার্তা এবং স্পেস উভয়ের জন্যই আপনার Google Chat অ্যাপটি সক্ষম করুন
সংরক্ষণ করুন এ ক্লিক করুন এবং ক্লাউড কনসোল থেকে প্রস্থান করুন।
অতিরিক্তভাবে, Dialogflow ইন্টিগ্রেশন। Google Chat ডিফল্টরূপে সক্ষম থাকে কিন্তু আপনি যদি একাধিক প্ল্যাটফর্ম পরিবেশন করতে চান, তাহলে আপনি Dialogflow Console-এর Integrations পৃষ্ঠায় গিয়ে সেগুলি সক্ষম করতে পারেন।
৩. গুগল চ্যাটে পরীক্ষা করুন
এখন আপনার Google Chat অ্যাপটি কনফিগার করা হয়েছে, আসুন এটি একটি চ্যাট স্পেসে যোগ করি এবং এটি পরীক্ষা করে দেখি। Google Chat খুলুন এবং একটি পরীক্ষামূলক চ্যাট স্পেস তৈরি করুন। স্পেসের উপরের ডানদিকের কোণায় ড্রপ ডাউনে ক্লিক করুন এবং "মানুষ এবং অ্যাপ যোগ করুন" নির্বাচন করুন।
tvguide খুঁজুন এবং স্পেসে Google Chat অ্যাপ যোগ করুন।
এখন আপনি Google Chat-এ ইতিমধ্যেই তৈরি করা Google Chat অ্যাপের সাথে ইন্টারঅ্যাক্ট করতে পারবেন, শুধুমাত্র @tvguide টাইপ করে। এটি পরীক্ষা করে দেখতে @tvguide hello টাইপ করুন।
এরপর আমরা আরও উন্নত প্রতিক্রিয়া যোগ করার জন্য Google Chat-এ কাস্টমাইজেশন ব্যবহার করব।
৪. কাস্টম গুগল চ্যাট কার্ড
গুগল চ্যাটের সাহায্যে, আপনি আপনার অ্যাপ ব্যবহারকারীকে একটি বেসিক টেক্সট রেসপন্স অথবা একটি কার্ড রেসপন্স ফেরত দিতে পারেন যা আপনাকে ছবি, বোতাম ইত্যাদি সহ বিভিন্ন উইজেট দ্বারা তৈরি একটি সমৃদ্ধ ইন্টারফেস প্রদান করে। এখন যেহেতু আমরা আপনার ডায়ালগফ্লো এজেন্টকে একটি গুগল চ্যাট অ্যাপের সাথে সংযুক্ত করেছি, তাই আপনাকে কেবল আপনার পূর্ণতা কোডে গুগল চ্যাটে প্রদর্শিত হওয়ার জন্য সঠিক ফর্ম্যাটে 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 কার্ডগুলি যুক্ত করব যেখানে এজেন্ট দ্বারা ব্যবহারকারীকে সেগুলি ফেরত দেওয়া হবে।
আসুন স্বাগতম অভিপ্রায়ের জন্য একটি মৌলিক কার্ড যোগ করে শুরু করি। ডায়ালগফ্লো কনসোলে, ডিফল্ট স্বাগতম অভিপ্রায়ে নেভিগেট করুন এবং প্রতিক্রিয়া বিভাগে স্ক্রোল করুন।
গুগল চ্যাটে ক্লিক করুন এবং প্রথম প্রতিক্রিয়া হিসেবে DEFAULT ট্যাব থেকে Use response অনির্বাচন করুন, তারপর 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 এবং বোতাম উইজেট ব্যবহার করব।
নিচের 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 ব্যবহার করে আপনার প্রথম Google Chat বট তৈরি করেছেন!
এরপর কী?
এই কোড ল্যাবটি উপভোগ করেছেন? এই দুর্দান্ত ল্যাবগুলি একবার দেখে নিন!