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 SDK的開發lifecycle,并且看看每一個步奏微軟都提供了什麽并且這個系列都介紹了什麽。


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