1. ভূমিকা
এখন যেহেতু আপনি আগের কোডল্যাবে একটি টিভি গাইডের জন্য একটি ডায়ালগফ্লো চ্যাটবট তৈরি করেছেন, আমরা আপনাকে দেখাব কিভাবে এটি Google চ্যাটে প্রসারিত করা যায়৷ আপনি শিখবেন কিভাবে এই প্ল্যাটফর্মের জন্য ডায়নামিক, ইন্টারেক্টিভ কার্ড তৈরি করতে হয় এবং একাধিক ইন্টিগ্রেশন আছে।
যা আপনি নির্মাণ করবেন
আমরা একটি ডায়ালগফ্লো চ্যাটবট তৈরি করব যা আপনার Google Workspace ডোমেনে কাস্টমাইজযোগ্য প্রতিক্রিয়া সহ প্রতিক্রিয়া জানাতে পারে।
আপনি কি শিখবেন
- কিভাবে একটি Google Chat অ্যাপ স্থাপন এবং কনফিগার করবেন
- গুগল চ্যাটে কীভাবে ডিসপ্লে কার্ড তৈরি করবেন
- ডায়ালগফ্লো পূরণে কাস্টম পেলোডগুলি কীভাবে তৈরি করবেন
আপনি কি প্রয়োজন হবে
- এই 2-পার্টের সিরিজের প্রথম কোডল্যাবটি সম্পূর্ণ করুন।
- ডায়ালগফ্লো কনসোলে লগ ইন করার জন্য একটি ওয়েব ব্রাউজার এবং একটি ইমেল ঠিকানা৷
- আপনার Google Workspace ডোমেনে চ্যাট চালু করা আছে
2. Google চ্যাট সক্ষম এবং কনফিগার করুন৷
আমরা আগের কোডল্যাবগুলিতে আপনার তৈরি করা ডায়ালগফ্লো এজেন্ট দিয়ে শুরু করব।
- ডায়ালগফ্লো কনসোলে , ক্লিক করুন
. - সাধারণ ট্যাবে, প্রজেক্ট আইডিতে স্ক্রোল করুন, তারপর Google ক্লাউডে ক্লিক করুন
.
- Google ক্লাউড কনসোলে, নেভিগেশন মেনুতে ক্লিক করুন ☰ > APIs এবং পরিষেবাগুলি > লাইব্রেরি ।
- "Google Chat API" অনুসন্ধান করুন, তারপর আপনার Google ক্লাউড প্রকল্পে API ব্যবহার করতে সক্ষম করুন ক্লিক করুন৷
- এখন আমরা আপনার Google Chat অ্যাপ কনফিগার করব, API-এর কনফিগারেশন পৃষ্ঠায় নেভিগেট করব। অনুগ্রহ করে মনে রাখবেন প্রতিটি GCP প্রকল্পে সর্বাধিক একটি Google Chat অ্যাপ থাকতে পারে।
- আপনি কনফিগারেশন বিকল্পগুলিকে পপুলেট করে ডায়ালগফ্লো ক্ষেত্রগুলি দেখতে পাবেন।
- এই টিভি ছবিতে অবতার 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 অ্যাপ চালু করুন
সংরক্ষণ করুন ক্লিক করুন এবং ক্লাউড কনসোল থেকে প্রস্থান করুন।
অতিরিক্ত ডায়ালগফ্লো ইন্টিগ্রেশন। Google Chat ডিফল্টরূপে সক্রিয় থাকে কিন্তু আপনি যদি একাধিক প্ল্যাটফর্ম পরিবেশন করতে চান, তাহলে আপনি ডায়ালগফ্লো কনসোলের ইন্টিগ্রেশন পৃষ্ঠাতে যেতে পারেন।
3. Google চ্যাটে পরীক্ষা করুন৷
এখন যেহেতু আপনার Google চ্যাট অ্যাপ কনফিগার করা হয়েছে, আসুন এটিকে একটি চ্যাট স্পেসে যোগ করে পরীক্ষা করে দেখি। Google Chat খুলুন এবং একটি পরীক্ষামূলক চ্যাট স্পেস তৈরি করুন। স্পেসের উপরের ডানদিকের কোণায় ড্রপ ডাউনে ক্লিক করুন এবং লোক ও অ্যাপ যোগ করুন নির্বাচন করুন।
tvguide অনুসন্ধান করুন এবং স্পেসে Google চ্যাট অ্যাপ যোগ করুন।
আপনি এখন শুধু স্পেসে @tvguide টাইপ করে Google Chat-এ ইতিমধ্যেই তৈরি করা Google Chat অ্যাপের সাথে ইন্টারঅ্যাক্ট করতে পারেন। এটি পরীক্ষা করতে @tvguide hello টাইপ করুন।
পরবর্তীতে আমরা আরও সমৃদ্ধ প্রতিক্রিয়া যোগ করতে Google Chat-এ কাস্টমাইজেশন ব্যবহার করব।
4. কাস্টম Google চ্যাট কার্ড
Google চ্যাটের মাধ্যমে, আপনি আপনার অ্যাপ ব্যবহারকারীকে একটি মৌলিক পাঠ্য প্রতিক্রিয়া বা একটি কার্ড প্রতিক্রিয়া ফেরত দিতে পারেন যা আপনাকে ছবি, বোতাম ইত্যাদি সহ বিভিন্ন উইজেট দ্বারা নির্মিত একটি সমৃদ্ধ ইন্টারফেসের অনুমতি দেয়৷ এখন আমরা আপনার ডায়ালগফ্লো এজেন্টকে একটি Google চ্যাট অ্যাপের সাথে সংযুক্ত করেছি৷ , আপনার পূরণ কোডে 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/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. কাস্টম পেলোড এবং চ্যাট কার্ড
ডায়ালগফ্লোতে কাস্টম পেলোডগুলি প্ল্যাটফর্ম-নির্দিষ্ট সমৃদ্ধ প্রতিক্রিয়া বার্তাগুলির জন্য অনুমতি দেয়। এখানেই আমরা আমাদের হ্যাঙ্গআউট চ্যাট JSON কার্ড যোগ করব যেখানে সেগুলি এজেন্টের দ্বারা ব্যবহারকারীকে ফিরিয়ে দেওয়া হবে।
স্বাগত অভিপ্রায়ের জন্য একটি মৌলিক কার্ড যোগ করে শুরু করা যাক। ডায়ালগফ্লো কনসোলে, ডিফল্ট স্বাগতম অভিপ্রায়ে নেভিগেট করুন এবং প্রতিক্রিয়া বিভাগে স্ক্রোল করুন।
Google চ্যাটে ক্লিক করুন এবং ডিফল্ট ট্যাব থেকে প্রতিক্রিয়াগুলিকে প্রথম প্রতিক্রিয়া হিসাবে ব্যবহার করুন , তারপরে প্রতিক্রিয়া যোগ করুন > কাস্টম পেলোড নির্বাচন করুন ।
আপনি একটি 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' টাইপ করুন
পরবর্তীতে আমরা পরিপূর্ণতা কোডে একটি কাস্টম পেলোড যোগ করব যাতে আমরা আমাদের কোডের সাথে গতিশীলভাবে বিষয়বস্তু তৈরি করতে পারি।
কার্ড সম্পর্কে আরও জানতে দয়া করে বার্তা বিন্যাস ডকুমেন্টেশন দেখুন। পরবর্তী বিভাগে আমরা কার্ড যোগ করব।
6. পূরণে একটি কার্ড যোগ করা
এখন আমরা টিভি তালিকা দেখানোর জন্য উইজেট সহ একটি কার্ড তৈরি করব। আসুন getGoogleCard নামে একটি ফাংশন যোগ করি যেখানে আমরা ফলাফল তালিকার তথ্য রেন্ডার করব। কার্ডের প্রতিক্রিয়া তৈরি করতে আমরা কী-ভ্যালু এবং বোতাম উইজেট ব্যবহার করব।
নিচের দিকের 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]},
}
};
}
}
এখন আমাদের এই পদ্ধতিতে কল করতে হবে যাতে এজেন্ট ব্যবহারকারীকে ফেরত পাঠানোর প্রতিক্রিয়া পেতে পারে। চ্যানেলহ্যান্ডলার ফাংশনে, নিচের কোড দিয়ে ফাংশনের বিষয়বস্তু প্রতিস্থাপন করুন।
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? . আপনি একটি অনুরূপ প্রতিক্রিয়া দেখতে হবে.
7. অভিনন্দন
আপনি ডায়ালগফ্লো দিয়ে আপনার প্রথম Google চ্যাট বট তৈরি করেছেন!
এরপর কি?
এই কোড ল্যাব উপভোগ করেছেন? এই মহান ল্যাব মধ্যে একটি কটাক্ষপাত আছে!