1. Введение
Теперь, когда вы создали чат-бота Dialogflow для телепрограммы в предыдущем практическом занятии , мы покажем вам, как расширить его функциональность для Google Chat. Вы узнаете, как создавать динамические интерактивные карточки для этой платформы и как осуществлять множество интеграций.
Что вы построите
Мы создадим чат-бота Dialogflow, который сможет отвечать в вашем домене Google Workspace, используя настраиваемые параметры.
Что вы узнаете
- Как развернуть и настроить приложение Google Chat
- Как создавать карточки-отображатели в Google Chat
- Как создавать пользовательские полезные нагрузки в Dialogflow для обработки запросов
Что вам понадобится
- Выполните первое практическое задание из этой серии из двух частей.
- Для входа в консоль Dialogflow вам потребуется веб-браузер и адрес электронной почты.
- Чат включен в вашем домене Google Workspace.
2. Включите и настройте Google Чат.
Начнём с агента Dialogflow, который вы создали в предыдущих практических занятиях.
- В консоли Dialogflow нажмите
. - На вкладке «Общие» прокрутите до раздела «Идентификатор проекта» , затем нажмите «Google Cloud».
.
- В консоли Google Cloud перейдите в меню навигации ☰ > API и сервисы > Библиотека .
- Найдите "Google Chat API", затем нажмите " Включить" , чтобы использовать API в своем проекте Google Cloud.
- Теперь перейдем к настройке вашего приложения Google Chat. Для этого перейдите на страницу конфигурации API. Обратите внимание, что в каждом проекте GCP может быть не более одного приложения Google Chat.
- Вы должны увидеть, как поля Dialogflow заполняются параметрами конфигурации.
- Измените поле «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, чтобы включить их.
3. Протестируйте в Google Чате.
Теперь, когда ваше приложение Google Chat настроено, давайте добавим его в чат и протестируем. Откройте Google Chat и создайте тестовый чат. В правом верхнем углу чата нажмите на выпадающее меню и выберите «Добавить людей и приложения» .
Найдите приложение tvguide и добавьте в него приложение Google Chat.
Теперь вы можете взаимодействовать с уже созданным вами приложением Google Chat, просто набрав @tvguide в соответствующем поле. Чтобы протестировать это, напишите @tvguide hello .
Далее мы воспользуемся настройками Google Chat, чтобы добавить более подробные ответы.
4. Пользовательские карточки чата Google
С помощью Google Chat ваше приложение может возвращать пользователю простой текстовый ответ или ответ в виде карточки, что позволяет создать более функциональный интерфейс с использованием различных виджетов, включая изображения, кнопки и т. д. Теперь, когда мы подключили ваш агент Dialogflow к приложению Google Chat, вам просто нужно вернуть JSON в правильном формате для отображения в Google Chat в вашем коде обработки запросов. Давайте рассмотрим несколько примеров 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. Пользовательские полезные нагрузки и карточки чата
Пользовательские полезные нагрузки в Dialogflow позволяют создавать расширенные ответы, специфичные для каждой платформы. Именно сюда мы добавим наши JSON-карточки Hangout Chat, которые будут отправлены пользователю агентом.
Начнём с добавления простой карточки для приветственного намерения. В консоли Dialogflow перейдите к «По умолчанию — приветственное намерение» и прокрутите вниз до раздела «Ответы».
Нажмите на Google Chat и снимите флажок «Использовать ответы по умолчанию» в вкладке «По умолчанию» в качестве первых ответов , затем ДОБАВИТЬ ОТВЕТЫ > Пользовательская полезная нагрузка .
Вы увидите 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` , которая будет отображать полученную информацию о программе. Для формирования ответа карточки будем использовать виджеты `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? . Вы должны увидеть похожий ответ.
7. Поздравляем!
Вы создали своего первого чат-бота Google с помощью Dialogflow!
Что дальше?
Вам понравилась эта практическая работа по программированию? Тогда взгляните и на эти замечательные практические работы!