1. 简介
现在，您已在上一个 Codelab 中为 TV Guide 构建了一个 Dialogflow 聊天机器人。接下来，我们将向您展示如何将其扩展到 Google Chat。您将学习如何为此平台构建动态的互动卡片，以及如何实现多种集成。
构建内容
我们将构建一个 Dialogflow 聊天机器人，它能够在您的 Google Workspace 网域中提供可自定义的回复作为回复。
学习内容
- 如何部署和配置 Google Chat 应用
- 如何在 Google Chat 中制作显示卡片
- 如何在 Dialogflow fulfillment 中构建自定义载荷
所需条件
- 完成此系列教程中的第一个 Codelab（共 2 个部分）。
- 用于登录 Dialogflow 控制台的网络浏览器和电子邮件地址
- 您的 Google Workspace 网域已启用聊天功能
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 应用已配置完毕，我们来将其添加到聊天室并进行测试。打开 Google Chat 并创建测试聊天室。在该聊天室的右上角，点击下拉菜单，然后选择加人和应用。
搜索“tvguide”，然后将 Google Chat 应用添加到聊天室。
现在，只需在聊天室中输入 @tvguide，即可与内置于 Google Chat 中的 Google Chat 应用互动。输入 @tvguide hello 进行测试。
接下来，我们将使用 Google Chat 中的自定义设置来添加更丰富的回复。
4. 自定义 Google Chat 卡片
借助 Google Chat，您可以让应用向用户返回基本的文本响应或卡片响应，从而获得由不同的微件（包括图片、按钮等）构建更丰富的界面。现在，我们已将您的 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?"
}
包含 widget 的示例卡片响应如下所示：
{
"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 卡片，并且代理会将这些卡片返回给用户。
首先，为欢迎意图添加基本卡片。在 Dialogflow 控制台中，导航到“默认欢迎意图”并向下滚动到“响应”部分。
点击 Google Chat 并取消选择使用默认标签页中的回复作为第一个回复，然后添加回复 >自定义载荷。
您将看到一个 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?"
}
}
]
}
]
}
}
点击保存，然后前往测试聊天室，看看此卡片是否已呈现。在聊天室中输入“@tvguide hello”
接下来，我们将在 fulfillment 代码中添加自定义载荷，以便使用代码动态生成内容。
如需详细了解卡片，请参阅邮件格式文档。在下一部分，我们将添加卡片。
6. 在 Fulfillment 中添加卡片
现在，我们将创建一个包含 widget 的卡片，用于显示电视节目列表。我们添加一个名为 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]},
}
};
}
}
现在，我们需要调用此方法，以便代理获得响应并发回给用户。在函数 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 载荷。这对于在 fulfillment 中正确传回载荷非常重要。
现在，请返回到您的 Chat 聊天室进行测试。输入 @tvguide What is on MTV?。您应该会看到类似的响应。
7. 恭喜
您已使用 Dialogflow 创建了您的第一个 Google Chat 聊天机器人！
后续操作
喜欢此 Codelab？快来看看这些优秀的实验吧！