Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 記錄軟體開發的點點滴滴 著重於微軟技術、網頁開發、DevOps、C#, Asp .net Mvc、Azure、AI、Chatbot、Docker、Data Science

[chatbot + AI = 下一代操作模式][03]建立第一個chatbot - EchoBot

[chatbot + AI = 下一代操作模式][03]建立第一個chatbot - EchoBot.jpg
圖片來源:https://pixabay.com/en/books-spine-colors-pastel-1099067/ 

在上一篇([02]微軟的Bot Framework是什麽?)以一個high level的角度看了微軟的Bot Framework的CaaP解決方案,接下來就要看看細節的地方。

這篇將會以建立一個chatbot的hello world來看看開發chatbot會用到什麽工具,并且整體的感受是如何。

這篇的程式碼github頁面是alantsai-samples/mhat-hotelbot:blog/chapter-03

情景介紹

在接下來的一系列demo當中都會環繞在一個情景,這樣希望給大家在開發的過程中不是只是瞭解如何使用,而是以解決問題的角度去看到chatbot的優勢。

想象一下,我們有家專門在訂房的網站,我們是否能夠開發一個bot讓訂房變得簡單以及流暢呢?

千里之行始於足下,我們就先來建立出最基本的chatbot,先瞭解一下開發是什麽feel。

雖然説我們主體的情景是訂房bot,但是有些基礎的介紹還是會先獨立分開。

建立第一個Bot - EchoBot

要開始開發bot當然要先熟悉使用到的工具以及使用到的Template。

首先,需要有2個工具準備好:

Visual Studio 2017
如果還沒有Visual Studio,可以去下載一個community版本,如果需要離綫安裝可以參考我之前寫過的一篇 建立離線安裝(Offline Install)包
BotBuilder的Project Template

可以從Visual Studio Marketplace下載到Bot Builder Template for Visual Studio

下載下來是一個vsix檔案,只需要點兩下安裝即可。

題外話,這個vsix是最近才出來的,以前還需要自己手動下載zip template檔案然後放到特定資料夾,對製作template有興趣可以看看我之前另外一個系列:「打造自己的template-建立一致性程式碼」

兩個工具都准備好了之後,就可以把Visual Studio啓動起來,然後準備開一個EchoBot的專案:Visual C# -> Bot Framework -> Bot Builder Echo Bot


建立一個echo bot的template

建立出來了之後,直接透過Ctrl + F5把網站啓動起來:

ApplicationFrameHost_2018-07-07_17-03-01.png
啓動看到的畫面

之前有提過底層是Asp .Net Web Api,那麽我們要用REST client例如Postman來和bot溝通嗎?可以使用Postman但是要自己組合那些json内容非常的累,微軟也知道所以做了一個工具叫做Bot Emulator讓我們和bot溝通變得容易。

用bot emulator測試bot

Bot Emulator和BotBuilder一樣是open source的專案Microsoft/BotFramewokr-Emulator,然後也一樣有兩個版本V3以及V4.

V3和V4可以同時存在,因此可以兩個都裝。V3和V4各有優缺點,我兩個都會介紹一下,一般來説主要用V4,但是測試一些功能的時候會需要V3。

可以直接從github的release頁面找到最新的版本,下載下來之後,點兩下安裝就可以了。

Bot Framework Emulator_2018-07-07_17-13-19.png
左邊是V3版本,右邊是V4,很明顯V4用的是electron為基地

接下來分別介紹一下V3以及V4的操作方式 - 其實差不多,有i額深入功能未來有使用在介紹。

bot emulator v3

使用emulator第一件事情要先輸入網址,如果port沒有被占用,預設會是3978。因此只要在網址輸入:http://localhost:3978/api/messages然後選connect即可。

botframework-emulator_2018-07-07_17-16-27.png
連上chatbot

連上了之後,就可以和捏機器人聊天啦,我們輸入任何東西,他都會反回來并且告訴我們總共幾個字:

botframework-emulator_2018-07-07_17-19-44.png
測試chatbot

在每一個訊息上面,可以點一下能夠看到實際傳遞的json内容:

botframework-emulator_2018-07-07_17-20-27.png
選了一筆訊息右邊會顯示json格式

在右下角則是整體的log訊息,有時候出現錯誤或者emulator有什麽問題可以在裡面看到:

2018-07-07_17-22-18.png
log資訊

bot emulator v4

使用v4版本從整體來説比v3完整,他有專案的概念。舉例來説,我們這個專案叫做HotelBot,可能有很多測試的點,例如local一個網址,上production有個網址,上uat有個網址。如果是v3的話,我們只能夠自己手動設定網址。

不過到了v4,可以把他們存到一個檔案.bot,然後不同的網址是endpoint。要建立這個檔案可以透過File -> New bot來建立,或者透過File -> Open Bot 直接開啓專案裡面的MHAT.HotelBot.bot

Bot Framework Emulator_2018-07-07_17-32-12.png
開啓.bot檔案

從左邊可以看到Endpoint,這邊可以有多筆,主要設定的是網址的部分,可以點右鍵做修改,或者按下+來增加新的網址(例如有local網址,production 網址等):

Bot Framework Emulator_2018-07-07_17-34-39.png
修改鏈接設定

和V3一樣,可以直接輸入,然後點了某一比可以看到原始的json檔案,以及右小角的log資訊:

Bot Framework Emulator_2018-07-07_17-35-57.png
v4的操作界面

假設今天要demo,可以進入Presentation Mode,在右上角,點下去了之後,畫面變成全螢幕,并且只顯示輸入的畫面。

gvim_2018-07-07_17-37-45.png
Presentation Mode的按鈕位置

然後輸入的内容是可以保存下來成爲一個.transcribe檔案,如果之後需要重現,就直接打開這個transcribe檔案就好:

Bot Framework Emulator_2018-07-07_17-39-13.png
把對話儲存下來

結語

這篇把開發用到的工具以及template准備了好。并且嘗試建立出了一個Hello World等級的Chatbot,EchoBot。

透過這一篇大家對於開發的流程應該有個概念,用Visual Studio改code,然後用bot emulator做測試。

接下來的問題是,怎麽改code呢?botbuilder是怎麽運作的呢?我們下一篇([04]瞭解BotBuilder的組成 )在介紹。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付QR Code
街口支付QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
comments powered by Disqus