Hand to hand to create a awesome chat bot. sample code :https://github.com/johnsonkao/UVbot

1. Learn from the Expert
利用Luis打造FB聊天機器人
Johnson Gau
高榮章 2017.7

2. 關於我
部落格:(松露筆管麵) http://trufflepenne.blogspot.tw
Microsoft
MVP

3. Agenda
聊天機器人趨勢
LUIS 介紹
Bot Webapi
FB Bot
Iot 和 AI 的融合 - 魔鏡
Sample code : https://github.com/johnsonkao/UVbot

4. 聊天機器人趨勢

5. mid-80s
PC
mid-90s
Web
mid-00s
Smartphone
mid-10s
Messaging
The world and technology are once again transforming
– Satya Nadella, CEO Microsoft
UI的演進
交談式UI成為新的平台

6. 聊天機器人是甚麼
什麼是 Chatbot？他是種服務，透過 AI（人工智慧）或自行
定義的自動化規則，讓使用者可以透過聊天通訊的介面，與
其進行互動。如美國的 Carbros，就是一個能回答使用者購
車相關訊息的自動化購車服務。

7. 查詢紫外線
宜蘭地點
宜蘭紫外線指數為 0.5
APP
宜蘭紫外線
指數為 0.5
宜蘭紫外
線多少
我
B
Chatbot

8. 聊天機器人如何運作
理解
動機
提供回應

9. 聊天機器人可提供哪些功能
• 理解動機
• 身分識別
• 歷史資料串接
• 地理資料解析
• 資料查詢
• 機器學習

10. 聊天機器人的組成
AI人工智慧/ML機器學習
大量資料加上雲端運算和人工智慧、機
器學習，讓聊天機器人更像人類。
NLP自然語言處理
隨著演算法的快速進步、自然語言學也
跟著認知更好，越來越能理解人類的話。
通訊軟體
FB Messanger、WeChat、Line、Skype、
Teams紛紛支援Chat bot。

11. 如何設計你的Bot
資料整合是全通路使用者體驗的致勝之道
用戶原本擁有的資訊 用戶的即時資訊
內外部系統整合 即時資訊
CRM、KM、銷售資料、
貨運資料、歷史資料
時區、地理座標、使用者
登入

12. 開始規劃我們的Bot
通訊軟體
FB Messanger
Bot api
Bot framework
語意分析
Luis
你的服務
紫外線

13. LUIS 介紹

14. AI應用
• Wit.ai
• API.AI
• Microsoft Cognitive
service
AI Tools Smart HomeService
Edge
computing

15. Microsoft Cognitive service
Luis 語意分析

16. Luis.ai網站 https://www.luis.ai

17. LUIS設計流程
建立APP Entity Intent
輸入語
句訓練
Publish

18. Intent & Entity
Intent
• 意圖
• 功能
Entity
• 關鍵字
• 變數
意圖 Intent
• 買機票
Entity 關鍵字
• Entity:Quntity, Location(From/To)
我想買[兩張][東京][來回]機票

19. 語意分析的訓練
意圖 Intent
• 問紫外線指數
Entity 關鍵字
• Location > 宜蘭
告訴我[宜蘭]紫外線指數
[宜蘭]紫外線指數如何
[宜蘭]紫外線

20. 建立APP

21. 產生APP ID

22. 建立Entity

23. Entity Type
Type 說明 用途
Simple 單一的關鍵字 一般用途
List 同義字的集合 主類別—子類別
水果:鳳梨 香蕉 蘋果
Hierarchical 有子關鍵字的應用 機票起訖地點
Location
--FromLocation
--ToLocation
https://docs.microsoft.com/zh-tw/azure/cognitive-services/luis/luis-concept-entity-types

24. Entity Type
Type 說明 用途
Composite 一個Composite由其他Entity
組成
最多包含20Entity
像是語句
“幫我找2016年紅色Ford Mondeo和2008年白色Audi A4”
Car
--Color
--車廠
--型號
Prebuild dates, times, 和 geograph

25. List Entity

26. 建立Intent

27. 輸入Utterances

28. Training & Publish

29. Bot webapi

30. Bot webapi設計流程
下載範本
建立Bot
專案
撰寫Luis
對話
上傳
Azure
註冊Bot
FW網站

31. 1. 下載Bot Template
• 下載template LINK
• 儲存 zip 檔並解壓縮放到Visual Studio 2015 templates 目錄
"%USERPROFILE%DocumentsVisual Studio
2015TemplatesProjectTemplatesVisual C#"

32. 2. 建立一個Bot專案
• Visual C# – Bot
Application
• 專案右鍵-重新建置
就會根據 Package.config把參考
的套件下載 。

33. 3. 撰寫Luis對話
• Copy UV.cs , OpenData.cs
• 新增UVDialog.cs
• 繼承LuisDialog<Ob ject >
• 設定[LuisModel…] 的key
• Intent撰寫
• MessagesController.cs
• Post 的RootDialoge改為UVDialog
• message.Type == ActivityTypes.ConversationUpdate 加入歡迎詞
• WebConfig把MicrosoftAppId/ MicrosoftAppPassword輸入

34. 下載Bot Framework Emulator
https://emulator.botframework.com/

35. Bot Framework Emulator測試

36. 4. 發行到Azure web site
成功後

37. 5.註冊你的Bot
1. 登入到Bot Framework portal
https://dev.botframework.com/
2. Create a bot

38. 5.註冊你的Bot-cont
Profile
Configuration
先貼上https://your_bots_hostname/api/messages
把your_bots_hostname換成你在azue webs site的網址,

39. key對照
1. LUIS App id
2. LUIS End point key

40. Bot framework key對照
1. Microsoft App id
2. Microsoft AppPassword
1
2

41. Bot Framework 範例
https://github.com/Microsoft/BotBuilder-Samples

42. FB Bot

43. 連接FB Bot 流程
註冊FB Developer
建立個人粉
絲頁
FB APP新增
Messnger應
用程式
設定Bot FW
的APP
設定FB APP

44. 1. 註冊FB Developer
https://developers.facebook.com/

45. 2. 建立個人粉絲頁

46. 3. FB 新增Messenger應用程式
• 新增應用程式

47. • 新增產品-Messenger

48. • 產生權杖,最後會用到,先記住

49. 4. 設定Bot FW的APP
Add a channel

50. • 設定下四個欄位

51. 打開FB開發者頁面---主控版，作資料查詢
A. Facebook Page ID:粉絲專頁編號
B. FB APP ID ：以下
C. Facebook App Secret:應用程式密鑰：以下
D:Page Access Token: FB 粉絲專頁存取權杖

52. 5. 設定Bot FW的APP
回到FB webhook

53. • 成功後最後要記得訂閱自己的粉絲頁

54. 測試

55. 魔鏡

56. 架構
Bot Web API
Open
Data
Topic
Message
Hub
魔鏡
Bot Framework
Channel
Web
IOPI
Weath
er API
MQTT
PushSubscribe
LUIS.AI 語意分析
人臉辨識
Mail
Sigfox
Unashield Sigfox web
人臉辨識

57. 影片