1. 准备工作
在此 Codelab 中，您将了解 Dialogflow 如何与 Google Workspace API 连接，通过 Google 日历创建功能齐全的预约安排程序，并在 Google Chat 中使用动态回复功能。
如果您仍然没有在之前的 Codelab 中进行的设置，或者对 Dialogflow 和 fulfillment 有信心，则可以从此处下载起始代码和代理配置
https://github.com/googleworkspace/appointment-scheduler-codelab
前提条件
在继续操作之前，您需要完成以下 Codelab：
- 使用 Dialogflow 构建预约安排程序
- 将 Dialogflow 与 Actions on Google 集成
- 了解 Dialogflow 中的实体
- 通过将 Dialogflow 与日历集成来了解 fulfillment
您还需要了解 Dialogflow 的基本概念和结构，您可以从使用 Dialogflow 构建聊天机器人在线课程中的以下视频中获得这些信息。
学习内容
- 如何部署和配置 Google Chat 应用
- 如何在 Google Chat 中制作显示卡片
- 如何在 Dialogflow fulfillment 中构建自定义载荷
构建内容
- Dialogflow、Google Chat 和 Google 日历之间的集成
- （可选）集成 Google 地图以获取更丰富的卡片
所需条件
- 用于登录 Dialogflow 控制台的网络浏览器和电子邮件地址
- 在您的 Google Workspace 网域中启用了 Google 日历和 Google Chat
2. 启用并配置 Google Chat
我们将从您在之前的 Codelab 中创建的 Dialogflow 代理开始。
- 在 Dialogflow 控制台中，点击
。 - 在常规标签页中，滚动到项目 ID，然后点击 Google Cloud
。
- 在 Google Cloud Console 中，点击导航菜单 ☰ > API 和服务 > 库。
- 搜索“Google Chat API”然后点击启用，以便在您的 Google Cloud 项目中使用该 API。
- 现在，我们将配置您的 Chat 应用，请前往该 API 的配置页面。请注意，每个 GCP 项目最多只能有一个 Chat 扩展应用。
- 您应该会看到填充配置选项的 Dialogflow 字段。
- 将“头像网址”字段更改为以下汽车图片：
**https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png** - 如要为您的 Chat 应用同时启用私信和聊天室，请选择应用可以直接发送消息和应用可在包含多名用户的聊天室中工作。
点击保存，然后退出 Cloud 控制台。
3. 其他 Dialogflow 集成
Google Chat 默认处于启用状态，但如果您希望聊天机器人服务于多个平台，可以前往 Dialogflow 控制台中的集成页面启用它们。
4. 在 Google Chat 中测试
现在，您的 Chat 应用已配置完毕，接下来我们将其添加到 Chat 聊天室并进行测试。打开 Google Chat 并创建测试聊天室。
- 在该聊天室的右上角，点击下拉菜单，然后选择加人和应用。
- 搜索“
AppointmentScheduler”并将应用添加到聊天室。 - 现在，只需在聊天室中输入 @AppointmentScheduler，即可与内置在 Google 中的应用互动。
在此平台上使用之前的 Codelab 中的相同输入进行测试：
- 用户：“@AppointmentScheduler Set an appointment for vehicle registration at 2 PM tomorrow.”
- 聊天应用：“好的，我看看是否适合你。April 24, 2 PM is fine!"
接下来，我们将使用 Google Chat 中的自定义设置来添加更丰富的回复。
5. 自定义 Google Chat 卡片
借助 Google Chat，您可以让应用向用户返回基本的文本响应或卡片响应，从而获得由不同的微件（包括图片、按钮等）构建更丰富的界面。现在，我们已将您的 Dialogflow 代理与 Google Chat 应用关联，您只需返回正确格式的 JSON，即可在 Google 的 fulfillment 代码中返回该 JSON。我们来看一些 JSON 示例。
基本文本响应如下所示：
{
"text": "Your pizza delivery is here!"
}
包含 widget 的示例卡片响应如下所示：
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://..." }
},
{
"buttons": [
{
"textButton": {
"text": "OPEN IN GOOGLE MAPS",
"onClick": {
"openLink": {
"url": "https://..."
}
}
}
}
]
}
]
}
]
}
]
}
如需详细了解卡片，请参阅邮件格式文档。在下一部分中，我们将向 Chat 应用中添加卡片。
6. 自定义载荷和聊天卡片
Dialogflow 中的自定义载荷 支持针对具体平台的富响应消息。我们将在此函数中添加 Hangouts Chat JSON 卡片，并且代理会将这些卡片返回给用户。
首先，为欢迎意图添加基本卡片。在 Dialogflow 控制台中，导航到“默认欢迎意图”并向下滚动到“响应”部分。
点击 Google Chat 并取消选择使用默认标签页中的回复作为第一个回复，然后添加回复 >自定义载荷。
您将看到一个 JSON 框架。
复制并粘贴以下代码。我们设置了一张带有 TextParagraph widget 的卡片。
{
"hangouts": {
"header": {
"title": "Appointment Scheduler"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
}
}
]
}
]
}
}
点击保存，然后前往测试用 Chat 聊天室，看看此卡片的呈现效果。在 Chat 聊天室中，输入“@AppointmentScheduler hello”。
接下来，我们将在 fulfillment 代码中添加自定义载荷，以便使用代码动态生成内容。
7. 在 Fulfillment 中添加卡
现在，我们将创建一个包含几个微件的卡片来显示已安排的预约。我们来添加一个名为 getGoogleChatCard 的函数，并在该函数中渲染输入：appointmentType、date 和 time。
将下面的函数添加到底部 index.js 中的代码中。
function getGoogleChatCard(appointmentType, date, time) {
const cardHeader = {
title: 'Appointment Confirmation',
subtitle: appointmentType,
imageUrl: ICON_IMAGE_URL,
imageStyle: 'IMAGE',
};
const dateWidget = {
keyValue: {
content: 'Date',
bottomLabel: date,
},
};
const timeWidget = {
keyValue: {
content: 'Time',
bottomLabel: time,
},
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Appointment',
onClick: {
openLink: {
url: CALENDAR_URL,
},
},
},
},
],
};
const infoSection = {widgets: [dateWidget, timeWidget,
buttonWidget]};
return {
'hangouts': {
'name': 'Confirmation Card',
'header': cardHeader,
'sections': [infoSection],
},
};
}
此卡片包含一个键值对和按钮 widget。然后，这些 widget 按 section 进行排序，card 包含要呈现的部分的列表。
现在，让我们在创建日历活动时调用此函数。在 createCalendarEvent 函数中，将内容替换为以下代码并部署函数。
return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);
const dateString = dateTimeStart.toLocaleString(
'en-US',
{month: 'long', day: 'numeric'},
);
const dateParts = appointmentTimeString.split(',');
const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
const payload = new Payload(
'hangouts',
json,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
}).catch(() => {
agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
});
}
当代理在 Google Chat 中回复时，代理会知道返回上面制作的卡片。使用时间安排请求对其进行测试。
8. （可选）添加 Google 地图图片微件
如果您想让回复卡片更直观，可以添加由 Maps Static API 生成的预约地点的静态地图。该 API 可让您通过网址参数构建地图图像。然后，我们可以在卡片的图片 widget 中使用该图片。
- 在 Google Cloud 控制台中启用 Maps Static API，启用方式与启用 Google 日历和 Google Chat API 相同。
- 在 API 和服务页面。如需详细了解如何使用 Google 地图进行检索以及有关 API 密钥的最佳实践，请参阅此处。
- 将 API 密钥和以下常量复制到 index.js 文件中的文件顶部
const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';
- 接下来，在 getGoogleChatCard 函数中添加图片微件。
const mapImageWidget = {
'image': {
'imageUrl': MAP_IMAGE_URL,
'onClick': {
'openLink': {
'url': MAP_IMAGE_URL,
},
},
},
};
- 将 mapImageWidget 添加到 infoSection 变量中的微件列表，然后保存并部署。
- 在 Chat 聊天室中测试您的 Chat 应用，您应该会看到根据您今天添加的代码生成的丰富响应！
9. 清理
如果您计划完成其他 Dialogflow Codelab，请暂时跳过此部分，稍后再回来查看。
删除 Dialogflow 代理
- 点击现有代理旁边的
。
- 在常规标签页中，滚动到底部，然后点击删除此代理。
- 在对话框中输入 Delete，然后点击删除。
10. 恭喜
您已在 Dialogflow 中创建了一个聊天机器人，并将其与 Google 日历集成，现在您已成为 Google Workspace 专业人员！
了解详情
如需了解详情，请查看 Dialogflow GitHub 页面上的代码示例。