iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1

前言

去年至今,許許多多的聊天機器人問世,像是卡米狗、小歐與紳士狗…等,受到大眾歡迎。這些機器人以更貼近、接近人們溝通方式的提供服務,讓瑣碎的工作不需要透過制式指令,更具人性。

這一篇我們將簡單介紹如何註冊您的 Bot、設定通訊軟體介接、透過 Bot Framework 建構邏輯與使用模擬器測試您的 Bot。


註冊您的 Bot

Step 1. 前往 Bot Framework 網站 → 透過 Microsoft 帳號登入
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512541594582_image.png

Step 2. 登入後 → 點選 My Bots
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512541676758_image.png

Step 3. 點選 Create a bot → Create
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512541743205_image.png

https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512541789572_image.png

Step 4. 可以選擇將你的 Bot 直接佈署於 Azure 或是 透過目前網頁流程建構 Bot。我們選擇第二個。
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512541836660_image.png

Step 5. 開始輸入您的 Bot Profile。
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512542611647_image.png

Step 6. 在 Configuration 部分,Messaging endpoint 可以先留空白;先點選 Create Microsoft App ID and password。
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512542740073_image.png

Step 7. 點選產生應用程式密碼以繼續,來產生你的密碼

註:密碼需要記錄下來,若遺忘就只能重新產生。
註:APP ID(識別碼) 與密碼需要記錄下來,後續實作會使用。

https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512542823783_image.png

https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512542896941_image.pn

Step 8. 完成,返回 Bot Framework → 可以看見 configuration 已經填上識別碼
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512543172723_image.png

Step 9. 拉到頁尾,勾選同意條款後點選 Register,完成!
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512543268846_image.png

Step 10.在 Channels 這個頁籤,加入新的通訊軟體(Channel)。你可以看見 Skpe 已經被加入。 後續實作的時候會教學如何加入 Facebook Messages 與Slack。
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512543336774_image.png


下載 Bot 的 Project template 與 Item template

Step 1. 前往 Create a bot with the Bot Builder SDK for .NET 頁面 → 在Prerequisites 章節下載 Bot Application, Bot Controller, Bot Dialog Zip 檔案。
Step 2. 如文件所描述:
將 Bot Application.zip 直接放到
%USERPROFILE%\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C#
將 Bot Controller.zip 與 Bot Dialog.zip 直接放到
%USERPROFILE%\Documents\Visual Studio 2017\Templates\ItemTemplates\Visual C#
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512549223085_image.png

https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512549926004_image.png

Step 2. 開啟 Visual Studio 2017 → 開新專案 → Bot Application → 確定
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512550011785_image.png

Step 3. 專案內找到 Web.config 檔案,將剛剛步驟申請的 Id 與 password,填上 value
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512551164831_image.png

Step 4. 啟動專案,我們的機器人即在自己電腦上運作了 !

註:請記得你的URL,等等模擬器會用到 :)

https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512551277535_image.png


透過模擬器測試您的 Bot

上一個步驟,我們透過範本程式,在自己的電腦上啟動了機器人程式。 因為還沒有佈署到 Azure 上,也尚未在 My Bot profile 上設定 Azure 的服務路徑,所以沒還有辦法透過偷訊軟體進行測試。
開發階段,我們能夠過 模擬器 (Bot Framework Emulator) 來幫助我們測試機器人。

Step 1. 前往 模擬器的 Github → 下載副檔名為 exe 檔案 → 左鍵點擊兩次開啟模擬器
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512551962347_image.png

Step 2. 開啟模擬器,我們先開啟設定按鈕 (右上角 ... 的按鈕) → App Settings
https://ithelp.ithome.com.tw/upload/images/20171207/2009149426rXnp2xAN.png

Step 3. 在service 的頁簽 → 勾選 Use version 1.0 authentication tokens
https://ithelp.ithome.com.tw/upload/images/20171207/20091494r3DKuJ2tIi.png

Step 4. 輸入 URL (我們啟動專案的URL + api/messages)
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512552129693_image.png

Step 5. 輸入前面步驟得到 ID 與 Password
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512552158207_image.png

Step 6. 輸入文字進行測試
Step 7.接下來就可以開始開發 :)
註:其實在開發過程中,可以將 Web.config 內的 Id 與 Password 保持空白,使用模擬器測試時 Id 與 Password 也保留空白,也能使用 (因為早晚都需要加上,這裡就先一併先說明)。
https://d2mxuefqeaa7sj.cloudfront.net/s_D59C08F8FFFF92089919A1F9CB5CAD6CD2E959D89A7735A2E924DD5D8D329F9C_1512573112992_image.png


上一篇
02. Microsoft Azure 服務介紹
下一篇
04. Bot Template 說明與發佈於 Azure web application
系列文
利用 MS Bot framework 與 Cognitive Service 建構自用智慧小秘書31

尚未有邦友留言

立即登入留言