Alan Tsai 的學習筆記


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

[chatbot + AI = 下一代操作模式][41]使用Chatdown做Chatbot的UI Prototyping

[chatbot + AI = 下一代操作模式][41]使用Chatdown做Chatbot的UI Prototyping.jpg
圖片來源:https://pixabay.com/en/books-spine-colors-pastel-1099067/ 

在上一篇([40]Visual Studio Tools for AI - 用VS管理Cognitive Service的服務)介紹完了管理Cognitive Service的好工具Visual Studio Tools for AI,這篇來看看另外一個協助開發Chatbot的工具Chatdown

來看看這個工具能夠提供什麽功能,并且如何協助Chatbot的開發。

Chatdown是什麽?

不管開發什麽類型的軟體,一般來説多多少少都要做一些UI Prototyping以協助和客戶溝通需求。

這些Prototyping的用途有用來確認UI是否正確,也有用來看使用流程是否符合需求,那到了Chatbot的開發,如何做這些Prototyping呢?

眼尖的朋友應該有發現,在V4版本的Bot Framework Emulator有提供一個功能是Save Transcript as....,能夠把對話過程儲存成爲.transcript的檔案,并且可以用Open Transcript的方式重新打開 看到之前的對話流程。


Save Transcript as....的功能位置

所以是不是能夠手動編輯這個Transcript檔案就可以用Bot Emulator作爲Chatbot開發的Prototype?

可是transcript檔案編輯起來可不容易,有沒有什麽編輯起來容易又能夠專程transcript的工具?

這個工具就是Chatdown,透過定義一個交談式的檔案(.chat檔),然後透過chatdown這個npm的程式就能夠轉成transcript檔案。

開始使用Chatdown

上面瞭解了Chatdown是什麽了之後,接下來就看看怎麽使用這個工具:

  1. 安裝Chatdown
  2. 建立一個範例chat檔案
  3. 把範例chat檔案轉換為transcript檔案
  4. 用emulator看效果

安裝Chatdown

chatdown是node js寫的一個工具,因此可以透過npm來安裝:npm i -g chatdown

這邊注意一下,nodejs要8.5以上版本。

安裝好了之後,直接輸入chatdown可以看到幫助訊息:

powershell_2018-08-27_21-30-36.png
測試chatdown安裝成功

建立一個範例chat檔案

再來建立一個chat檔案,可以用任何的編輯器(例如notepad)建立一個檔案,結尾是.chat (這個沒有硬性規定,只是習慣),然後可以輸入以下内容:

user=Joe
bot=LulaBot

bot: Hi!
user: yo!
bot:Greetings!
What would you like to do?
* update - You can update your account
* List - You can list your data
* help - you can get help

user: I need the bot framework logo.

bot:
Here you go.
[Attachment=https://docs.microsoft.com/en-us/bot-framework/media/how-it-works/architecture-resize.png]
[Attachment=https://www.kayee.nl/wp-content/uploads/2017/05/bot-framework-logo-session.png]
[AttachmentLayout=carousel]

透過直接看上面的内容,會發現其實不需要懂格式也大概知道整個流程是什麽。不過接下來就看看在Emulator看起來是什麽樣子。

把範例chat檔案轉換為transcript檔案

接下來直接呼叫:chatdown sample.chat > sample.transcript

執行完了之後,在資料夾的下面會多出一個sample.transcript的檔案。

用emulator看效果

接下來用emulator看看效果。

開啓V4版本的emulator,然後開啓File -> Open Transcript File....選擇剛剛產生的sample.transcript檔案。

Bot Framework Emulator_2018-08-27_21-51-12.png
開啓transcript的按鈕

開啓了之後,就可以看到好像是真的對話一樣的結果。這邊不止有文字類型,還有圖片類型的carousel,這個可以切換圖片:

Bot Framework Emulator_2018-08-27_21-53-11.png
看到模擬結果

參考資料

這個工具還是滿直覺,并且裡面接受一些複雜的格式例如HeroCard,AdaptiveCard等等。這些我就不一一介紹,可以去參考官方的文件,看一下馬上就會了。

chatdown的工具首頁以及文件
https://github.com/Microsoft/botbuilder-tools/tree/master/packages/Chatdown
官方的範例chat檔案 - 這裡面有其他的複雜格式,例如adaptive card
https://github.com/Microsoft/botbuilder-tools/tree/master/packages/Chatdown/Examples

結語

這篇介紹了chatdown的這個工具,這個工具可以用來做Chatbot開發的Prototyping用。透過做Prototyping不止在和客戶溝通的時候更加容易理解意思,并且整個的操作流程會有一個更加清晰地畫面, 讓工程師只需要專注在做,而不是“猜測”整個的操作流程。

這個系列要到了一個終點了,所謂結束才是剛剛要開始,下一篇([42]回顧整個系列 - 開發Chatbot的整個生命周期)將來Review一下在開篇介紹的Bot Builder的開發lifecycle,并且看看每一個步奏微軟都提供了什麽并且這個系列都介紹了什麽。

comments powered by Disqus