1. 简介
您已在上一个 Codelab 中为电视指南构建了 Dialogflow 聊天机器人，现在我们将向您展示如何将其扩展到 Google Chat。您将学习如何为该平台构建动态互动式卡片，并进行多项集成。
构建内容
我们将构建一个 Dialogflow 聊天机器人，该机器人可以在您的 Google Workspace 网域中以可自定义的回答进行响应。
学习内容
- 如何部署和配置 Google Chat 聊天应用
- 如何在 Google Chat 中构建显示卡片
- 如何在 Dialogflow fulfillment 中构建自定义载荷
所需条件
- 完成本系列教程的第 1 部分Codelab。
- 用于登录 Dialogflow 控制台的网络浏览器和电子邮件地址
- Google Workspace 网域中已启用 Chat
2. 启用和配置 Google Chat
我们将从您在之前的 Codelab 中创建的 Dialogflow 代理开始。
- 在 Dialogflow 控制台中，点击
。 - 在常规标签页中，滚动到项目 ID，然后点击 Google Cloud
。
- 在 Google Cloud Console 中，点击导航菜单 ☰ > API 和服务 > 库。
- 搜索“Google Chat API”，然后点击启用，以便在您的 Google Cloud 云项目中使用该 API。
- 现在，我们将配置您的 Google Chat 应用，请前往相应 API 的配置页面。请注意，每个 GCP 项目最多只能有一个 Google Chat 应用。
- 您应该会看到 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 应用
点击保存并退出 Cloud 控制台。
此外，还有 Dialogflow 集成。Google Chat 默认处于启用状态，但如果您想为多个平台提供服务，可以前往 Dialogflow 控制台中的集成页面启用这些平台。
3. 在 Google Chat 中测试
您的 Google Chat 应用已配置完毕，接下来我们将其添加到 Chat 聊天室并进行测试。打开 Google Chat 并创建一个测试聊天室。在聊天室的右上角，点击下拉菜单，然后选择添加联系人和应用。
搜索 tvguide 并将 Google Chat 应用添加到聊天室。
现在，您只需在聊天室中输入 @tvguide，即可与您已在 Google Chat 中构建的 Google Chat 应用互动。输入 @tvguide hello 即可进行测试。
接下来，我们将使用 Google Chat 中的自定义功能来添加更丰富的回答。
4. 自定义 Google Chat 卡片
借助 Google Chat，您可以让应用向用户返回基本的文本响应或卡片响应，从而通过不同的 widget（包括图片、按钮等）构建更丰富的界面。现在，您已将 Dialogflow 代理连接到 Google Chat 聊天应用，只需以正确的格式返回 JSON，即可在履单代码中在 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. 自定义载荷和聊天卡片
借助 Dialogflow 中的自定义载荷 ，您可以发送平台专属的富响应消息。我们将在其中添加 Hangouts Chat JSON 卡片，以便代理将这些卡片返回给用户。
我们先为欢迎 intent 添加一张基本卡片。在 Dialogflow 控制台中，前往“默认欢迎意图”，然后向下滚动到“响应”部分。
点击 Google Chat，取消选中使用默认标签页中的响应作为第一个响应，然后依次点击 ADD RESPONSES > Custom Payload。
您将看到一个 JSON 框架。
复制并粘贴以下代码。我们已设置一张包含 TextParagraph widget 的卡片。
{
"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?"
}
}
]
}
]
}
}
点击保存，然后前往测试 Chat 聊天室，看看此卡片是否已渲染。在聊天室中，输入“@tvguide hello”
接下来，我们将在履单代码中添加自定义载荷，以便使用代码动态生成内容。
如需详细了解卡片，请参阅消息格式文档。在下一部分中，我们将添加卡片。
6. 在履单过程中添加卡片
现在，我们将创建一个包含 widget 的卡片来显示电视节目列表。我们来添加一个名为 getGoogleCard 的函数，用于呈现生成的商品详情信息。我们将使用 keyValue 和 button widget 来构建卡片响应。
将以下函数添加到 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?。您应该会看到类似的响应。
7. 恭喜
您已使用 Dialogflow 创建了第一个 Google Chat 机器人！
后续操作
喜欢此 Codelab 吗？快来看看这些精彩的实验吧！