![[chatbot + AI = 下一代操作模式][41]使用Chatdown做Chatbot的UI Prototyping.jpg](/posts/2018/08/2018-08-27-bot-framework-with-ai-cognitive-service-41-use-chatdown-to-prototype-chatbot-ui/614e5e95-f673-4b9a-a5ef-88798ecf168e.jpg)
在上一篇([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的方式重新打開
看到之前的對話流程。
所以是不是能夠手動編輯這個Transcript檔案就可以用Bot Emulator作爲Chatbot開發的Prototype？
可是transcript檔案編輯起來可不容易，有沒有什麽編輯起來容易又能夠專程transcript的工具？
這個工具就是Chatdown，透過定義一個交談式的檔案（.chat檔），然後透過chatdown這個npm的程式就能夠轉成transcript檔案。
開始使用Chatdown
上面瞭解了Chatdown是什麽了之後，接下來就看看怎麽使用這個工具：
- 安裝Chatdown
- 建立一個範例chat檔案
- 把範例chat檔案轉換為transcript檔案
- 用emulator看效果
安裝Chatdown
chatdown是node js寫的一個工具，因此可以透過npm來安裝：npm i -g chatdown。
安裝好了之後，直接輸入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檔案。
開啓了之後，就可以看到好像是真的對話一樣的結果。這邊不止有文字類型，還有圖片類型的carousel，這個可以切換圖片：
參考資料
這個工具還是滿直覺，并且裡面接受一些複雜的格式例如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 SDK的開發lifecycle，并且看看每一個步奏微軟都提供了什麽并且這個系列都介紹了什麽。
_1477.png)
_1485.png)
_1486.png)