【Azure 机器人】微软Azure Bot 编辑器系列(5) : 机器人的卡片式回复 (The Bot Framework Composer tutorials)

欢迎来到微软机器人编辑器使用教程，从这里开始，创建一个简单的机器人。

在该系列文章中，每一篇都将通过添加更多的功能来构建机器人。当完成教程中的全部内容后，你将成功的创建一个天气机器人(Weather Bot)。在本系列中将学会以下内容：

1）创建一个简单的对话天气机器人

2）在机器人中提出问题，并获取从HTTP API获取响应

3）在机器人中增加帮助提示和取消功能

4）使用语言生成功能（LG: Language Generation)

5）把机器人的回复转换为卡片

6）添加LUIS功能，理解自然语言

准备条件

• 完成系列(1，2，4)中的简单对话机器人创建（https://www.cnblogs.com/lulight/p/14891002.html），发送HTTP请求（https://www.cnblogs.com/lulight/p/14897260.html）和使用LG（https://www.cnblogs.com/lulight/p/14902657.html）
• LG: Language Generation (https://docs.microsoft.com/en-us/composer/concept-language-generation?tabs=v2x) 在Bot中定义多种形式的短语，根据机器人运行时的参数组合生成回复内容。
• Cards: 让机器人能使用图片+文字，音频或者按钮多样化的形式提供响应(https://docs.microsoft.com/en-us/azure/bot-service/bot-service-design-user-experience?view=azure-bot-service-4.0#cards)。

添加Button

Button作为一个建议操作添加在机器人与人之间的对话中，通过预设按钮，代替输入文字，改善用户体验。让我们在本文你中为输入邮政编码的提问部分增加“Help”和“Cancel”两个按钮。

第一步：启动Bot编辑器，打开 weather_bot 项目

第二步：在getWeather对话组件中，选择“BeginDialog”事件 ，在其第二个组件“Prompt for text”的右侧属性栏中，点击文本旁边的“+”号按钮。

第三步：在弹出的窗口中选择“建议的操作”。然后点击“Add suggested action”并在文本框中输入“ HELP ”. 重复点击“Add suggested action”，再次输入“ CANCEL ”

第三步（可选）：也可以通过修改代码的方式添加SuggestedActions。操作步骤为：

在属性栏的右边，选择显示代码

在Activity中添加SuggestedActions属性。代码内容如下：

[Activity
    Text = What is your postal code?
    SuggestedActions = help | cancel
]

UI显示效果如：

让我们一起来观看添加动画及效果演示：

添加Cards

第一步：在getWeather对话的True分支下，选择"Send a response"组件

第二步：在右边的属性栏中，点击“+”号按钮，在下拉列表中选择“Attachments”

第三步：在出现的附件栏中，点击 “ 添加新附件 ” --> “ 通过模板创建 ” --> “ 缩略图卡 ”

第四步：在代码编辑框中会列出缩略图模板所需要填充的内容。可以使用以下的内容替换：

[ThumbnailCard
    title = Weather in ${dialog.city} in ${dialog.country}
    text =  ${DescribeWeather(dialog.weather)} 
    image = http://openweathermap.org/img/wn/${dialog.icon}@2x.png
]

完成以上4步后，一起观看添加Cards及效果演示：

在下一篇中将演示：添加LUIS功能，理解自然语言

(以上内容均是参考微软官方的机器人文档进行的中文操作步骤，原文连接见参考资料)

参考资料

Tutorial: Add cards and buttons to your bot：https://docs.microsoft.com/en-us/composer/tutorial/tutorial-cards?tabs=v2x

Design the user experience: https://docs.microsoft.com/en-us/azure/bot-service/bot-service-design-user-experience?view=azure-bot-service-4.0#cards

[完]