【Azure 機器人】微軟Azure Bot 編輯器系列(5) : 機器人的卡片式回覆 (The Bot Framework Composer tutorials)

路邊兩盞燈發表於2021-06-20
機器人微軟Framework

歡迎來到微軟機器人編輯器使用教程，從這裡開始，建立一個簡單的機器人。

在該系列文章中，每一篇都將通過新增更多的功能來構建機器人。當完成教程中的全部內容後，你將成功的建立一個天氣機器人(Weather Bot)。在本系列中將學會以下內容：

 

1）建立一個簡單的對話天氣機器人

2）在機器人中提出問題，並獲取從HTTP API獲取響應

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

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

5）把機器人的回覆轉換為卡片

6）新增LUIS功能，理解自然語言

 

準備條件

 

新增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顯示效果如：

【Azure 機器人】微軟Azure Bot 編輯器系列(5) : 機器人的卡片式回覆 (The Bot Framework Composer tutorials)

 

讓我們一起來觀看新增動畫及效果演示：

【Azure 機器人】微軟Azure Bot 編輯器系列(5) : 機器人的卡片式回覆 (The Bot Framework Composer tutorials)

 

 

新增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及效果演示：

【Azure 機器人】微軟Azure Bot 編輯器系列(5) : 機器人的卡片式回覆 (The Bot Framework Composer tutorials)

 

在下一篇中將演示：新增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

 

[完]

 

 

相關文章