Alan Tsai 的學習筆記


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

[chatbot + AI = 下一代操作模式][13]上綫 - 開啓web control channel

[chatbot + AI = 下一代操作模式][13]上綫 - 開啓web control channel.jpg
圖片來源:https://pixabay.com/en/books-spine-colors-pastel-1099067/ 

透過上一篇([12]準備上綫 - 用Bot Channel Registration注冊chatbot),chatbot已經和bot channel registration設定好了,可以上綫了。

接下來需要做的就是設定對應的channel。

這篇將來看看最容易的channel,web control。看如何取得相關的資訊讓chatbot可以在任意網站上面出現。

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

什麽是web control channel

channel代表不同類型的來源。例如FB、Slack、Telegram等。由於大部分的channel是和某一個平臺綁定,因此各個平臺設定方式有點不同,因此下一篇將會介紹常見的channel,FB。

有一種channel設定最簡單,也就是web control channel。這種channel本質上就是一個ifram,因此可以放在任意可以host html的地方。由於沒有牽扯到第三方,因此設定上最簡單。

設定channel的方式

要加入任何channel都會需要做2個事情:

  1. 在bot channel registration加入channel
  2. 在對應的channel平臺做設定

在bot channel registration加入channel

首先,進入azure的portal,然後開啓上一篇建立的channel registration服務。

開啓channel registration之後,選擇:

  1. Channels
  2. 預設有增加web control的channel,可以從右邊的edit來取得一些相關資訊

chrome_2018-07-17_09-57-32.png
調整web control channel的資訊

在右邊下半部則是可以加入其他的channel。之後介紹加入FB chanenl將會使用到。

點下Edit之後,可以看到一些設定需要的值:

  1. secret key有兩組,用來控制避免任何人可以把你的bot放在自己的網站裡面。按下show可以看到實際的key
  2. 把key複製下來
  3. 複製 提供的 iframe 代碼
  4. 在第2步取得的key要替換YOUR_SECRET_HERE
chrome_2018-07-17_10-02-06.png
web control的edit畫面

在對應的channel平臺做設定

以web control爲例,channel 平臺就是任何頁面可以host html。以目前的例子,可以把他放到chatbot網站啓動的那個html頁面上面。

開啓Visual Studio,然後在專案的root有個default.htm,打開然後在結束body前加入上一步取得的設定:

<iframe style="height:600px" src='https://webchat.botframework.com/embed/MHATHotelBotChannelReg?s=YOUR_SECRET_HERE'>

這邊和原始複製有點不同是增加了一個style="height:600px",這樣web control的chatbot才不會太短。
要注意需要把取得的secret key放入到YOUR_SECRET_HERE

發佈上去之後,在chatbot的首頁就會多出一個chatbot的輸入框:

chrome_2018-07-17_10-19-56.png
測試結果

結語

這篇介紹了如何設定bot channel registration的另外一邊,也就是和channel連接的設定方式。

透過最容易的channel,web control,可以看出chatbot可以透過iframe的方式在任意網站非常容易地挂載上去。

下一篇([14]上綫 - 把facebook粉絲頁和chatbot接上)將會介紹和其他第三方平臺接上的channel設定方式。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付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