۱. مقدمه
حالا که در کدنویسی قبلی یک ربات چت Dialogflow برای راهنمای تلویزیون ساختید، قصد داریم نحوه گسترش آن به Google Chat را به شما نشان دهیم. شما یاد خواهید گرفت که چگونه کارتهای پویا و تعاملی برای این پلتفرم بسازید و چندین ادغام داشته باشید.
آنچه خواهید ساخت
ما یک چتبات Dialogflow خواهیم ساخت که میتواند در دامنه Google Workspace شما با پاسخهای قابل تنظیم پاسخ دهد.
آنچه یاد خواهید گرفت
- نحوه استقرار و پیکربندی برنامه Google Chat
- نحوه ساخت کارتهای نمایشی در گوگل چت
- نحوه ساخت پیلودهای سفارشی در تکمیل Dialogflow
آنچه نیاز دارید
- اولین codelab را در این مجموعه دو قسمتی تکمیل کنید.
- یک مرورگر وب و یک آدرس ایمیل برای ورود به کنسول Dialogflow
- چت در دامنه Google Workspace شما فعال باشد
۲. فعالسازی و پیکربندی گوگل چت
ما با Dialogflow Agent که در codelabs قبلی ایجاد کردهاید، شروع خواهیم کرد.
- در کنسول Dialogflow ، کلیک کنید
. - در برگه عمومی ، به شناسه پروژه بروید، سپس روی Google Cloud کلیک کنید
.
- در کنسول گوگل کلود، روی منوی ناوبری ☰ > APIها و خدمات > کتابخانه کلیک کنید.
- عبارت «Google Chat API» را جستجو کنید، سپس برای استفاده از API در پروژه Google Cloud خود، روی فعالسازی کلیک کنید.
- حالا برنامه گوگل چت شما را پیکربندی میکنیم، به صفحه پیکربندی API بروید. لطفاً توجه داشته باشید که هر پروژه GCP میتواند حداکثر یک برنامه گوگل چت داشته باشد.
- شما باید فیلدهای Dialogflow را که گزینههای پیکربندی را پر میکنند، ببینید.
- فیلد آدرس اینترنتی آواتار را به این تصویر تلویزیون تغییر دهید:
[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. گوگل چت به طور پیشفرض فعال است، اما اگر میخواهید چندین پلتفرم را ارائه دهید، میتوانید به صفحه ادغامها در کنسول Dialogflow بروید تا آنها را فعال کنید.
۳. در گوگل چت تست کنید
حالا که برنامهی گوگل چت شما پیکربندی شده است، بیایید آن را به یک فضای چت اضافه کنیم و آن را آزمایش کنیم. گوگل چت را باز کنید و یک فضای چت آزمایشی ایجاد کنید. در گوشهی سمت راست بالای فضا، روی منوی کشویی کلیک کنید و گزینهی «افزودن افراد و برنامهها» را انتخاب کنید.
عبارت tvguide را جستجو کنید و برنامه Google Chat را به آن اضافه کنید.
اکنون میتوانید با تایپ کردن @tvguide در فضای خالی، با برنامهی چت گوگل که از قبل در گوگل چت ساختهاید، تعامل داشته باشید. برای امتحان کردن آن، @tvguide hello را تایپ کنید.
در ادامه از سفارشیسازیهای موجود در گوگل چت برای افزودن پاسخهای غنیتر استفاده خواهیم کرد.
۴. کارتهای چت گوگل سفارشی
با استفاده از گوگل چت، میتوانید از برنامه خود بخواهید که یک پاسخ متنی ساده یا یک پاسخ کارتی به کاربر برگرداند که به شما امکان میدهد رابط کاربری غنیتری با ویجتهای مختلف از جمله تصاویر، دکمهها و غیره ایجاد کنید. اکنون که عامل Dialogflow خود را به یک برنامه گوگل چت متصل کردهایم، کافیست 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 امکان ارسال پیامهای پاسخ غنی مختص پلتفرم را فراهم میکنند. اینجاست که کارتهای JSON چت Hangout خود را اضافه میکنیم و توسط عامل به کاربر ارسال میشوند.
بیایید با اضافه کردن یک کارت ساده برای هدف خوشامدگویی شروع کنیم. در کنسول Dialogflow، به هدف خوشامدگویی پیشفرض بروید و به پایین اسکرول کنید تا به بخش پاسخها برسید.
روی Google Chat کلیک کنید و از تب DEFAULT، گزینهی «استفاده از پاسخها به عنوان اولین پاسخها» را غیرفعال کنید، سپس به مسیر 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' را تایپ کنید.
در مرحله بعد، یک payload سفارشی به کد تکمیل سفارش اضافه میکنیم تا بتوانیم به صورت پویا محتوا را با کد خود تولید کنیم.
برای کسب اطلاعات بیشتر در مورد کارتها، لطفاً به مستندات قالب پیام مراجعه کنید. در بخش بعدی کارتها را اضافه خواهیم کرد.
۶. اضافه کردن کارت در بخش تکمیل سفارش
حالا یک کارت با ویجتها برای نمایش لیست برنامههای تلویزیونی ایجاد خواهیم کرد. بیایید تابعی به نام 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);
}
}
به کد پایین که پاسخ در آن اضافه شده است توجه کنید. اگر منبع درخواست عامل به عنوان این پلتفرم شناسایی شود، ما محتوای JSON را با برچسب 'hangouts' میسازیم. این برای ارسال صحیح محتوای درخواست در حین انجام کار مهم است.
حالا به فضای چت خود برگردید و آن را امتحان کنید. عبارت @tvguide What is on MTV? باید پاسخ مشابهی را ببینید.
۷. تبریک
شما اولین ربات گوگل چت خود را با Dialogflow ایجاد کردید!
بعدش چی؟
از این آزمایشگاه کد لذت بردید؟ نگاهی به این آزمایشگاههای عالی بیندازید!