Building a Chatbot app on iOS Using Api.AI

How to use Api.ai and JSQMessagesViewController to build a chatbot on iOS. This talk was given at AppCoda Taiwan Developer Meetup 2017.

如何利用Api.ai以及JSQMessagesViewController打造一個AI 聊天機器人

Transcript

2. SUBTITLE FOR THIS DECK GOES HERE 謝謝大家支持！ 2016年第一次在 台北舉辦開發者聚會。
3. 今年分別在台北、台中和 高雄各舉辦一場開發者聚 會，超過 200人參加。 剛剛完成台北和台中場！
4. • AppCoda創辦人，也是 iOS程式設計師 關於SIMON
5. • AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括 《iOS 10 App程式設計實 力超進化實戰攻略》等程式 開發書籍。 關於SIMON
6. 關於SIMON • AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括 《iOS 10 App程式設計實 力超進化實戰攻略》等程式 開發書籍。 • 熱愛教學，Swift課程導師
7. 關於SIMON • AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括 《iOS 10 App程式設計實 力超進化實戰攻略》等程式 開發書籍。 • 熱愛教學，Swift課程導師 • 也熱愛咖啡，夢想有日能開 一間結合程式教學的 AppCoda Cafe
8. 關於APPCODA 它不只是一個網站而是一間專門提供程式教學的 公司。希望透過我們的教學課程，讓更多人學懂 程式設計，能將自己的想法變成真實的App。
9. 有讀者問： 「為何成立 APPCODA？」
10. 最初只是因為日間的工作太悶而自學 寫iOS App，同時我亦喜歡以部落格 形式，將自己所學的分享開去。
11. 「那又如何將 APPCODA 變成全職事業？」
12. 有一日，一個國外讀者來信提議， 可以將部落格的教學文章 結習成書出售。
13. 很棒的建議，但真的可以嗎？ 部落格的文章已是免費， 還有人購買電子書？
14. 讀者回信：「一定會有人買， 至少我會買一本。」
15. 好！一試無妨&。就這樣推出了人生 第一本電子書。而且收入還不錯， 那就趁年輕（其實已不年輕） 辭職創業。
16. 今天的APPCODA •主力編寫程式教學，出版電子書，舉辦工作坊。盡力 將艱澀的程式概念變得容易明白，幫助更多人學習 App開發以及發展程式開發專業。 •我們與世界各地開發者（包括來自美國、歐洲和台灣 的開發者）合作推出程式教學文章和書籍。
17. We’re Hiring •我們正擴大中文網站的教學團隊 •包括技術型編輯、程式教學作家 • 兼職或Freelance形式也可以 • 電郵你的簡歷至support@appcoda.com
18. 淺談Chatbot開發： 如何於iOS實作AI聊天機器人
19. 淺談iOS AI聊天機器人開發 • 什麼是Conversation Interface? • 如何處理自然語言 (Natural Language) • 如何實作一個AI聊天機器人 • 我也是Chatbot開發新手
20. 為何講解 AI聊天機器人？ 說真的，舉辦此聚會時， 還沒想到要分享什麼。
21. 無意中發現一位台灣朋友在 Facebook發表他寫的 Handsome Guy魔鏡程式！ “Ask mirror who is the most handsome guy in the world.” “Of course, Ryan in Taiwan” 超酷喔。 當我正苦惱要說什麼 的時候
22. 仍未想到分享什麼題目。 又無意中在Facebook見到朋 友發表Line 聊天機器人。 只要拍照上傳，就可幫你從菜 單中挑一個，非常適合有選擇 困難症的我。 兩星期後...
23. 似乎人人都在打造Chatbot AI機器人 什麼是聊天機器人？簡單來說，就是 「用對話介面呈現的機器人程式」。
24. AI和聊天機器人對於我來說是 全新的技術。要學習一門新技 術，最有效就是實作一點東西。 我也來 實作一個AI聊天機器人
25. 我也來 實作一個AI聊天機器人 AI和聊天機器人對於我來說是 全新的技術。要學習一門新技 術，最有效就是實作一點東西。
26. AI和聊天機器人對於我來說是 全新的技術。要學習一門新技 術，最有效就是實作一點東西。 所以我想為FoodPin App加 入聊天機器人功能。 我也來 實作一個AI聊天機器人
27. AI和聊天機器人對於我來說是 全新的技術。要學習一門新技 術，最有效就是實作一點東西。 使用者啟動AI聊天機器人之 後，可以直接以對話形式，詢 問餐廳推介。 我也來 實作一個AI聊天機器人 所以我想為FoodPin App加 入聊天機器人功能。
31. 開發iOS AI機器人難題 • 難題#1： •如何令機器人理解我們的語言（自然語言） • 難題#2： • 如何在iOS實作Conversational Interface （對話介面）
32. “Please suggest me a good place to eat.” 自然語言就是我們一般人平常所用的， 如中文、英文，你和我都很自然明白以上問題。 但是要令機器明白我們的語言， 了解它的意思，這個就不簡單。 而語言的表達方式千變萬化， 以上幾句看似不一樣， 但其實都是想要餐廳建議。
33. “I’m going to meet a friend in Taipei for lunch. Any restaurant recommendation?” 自然語言就是我們一般人平常所用的， 如中文、英文，你和我都很自然明白以上問題。 但是要令機器明白我們的語言， 了解它的意思，這個就不簡單。 而語言的表達方式千變萬化， 以上幾句看似不一樣， 但其實都是想要餐廳建議。
34. “Can you recommend a good Taiwanese restaurant for dinner?” 自然語言就是我們一般人平常所用的， 如中文、英文，你和我都很自然明白以上問題。 但是要令機器明白我們的語言， 了解它的意思，這個就不簡單。 而語言的表達方式千變萬化， 以上幾句看似不一樣， 但其實都是想要餐廳建議。
35. 那要如何解決這個問題？ 設計你自己的Algorithm？超級難
36. 較流行的自然語言處理API Api.ai by Google Wit.ai by Facebook LUIS by Microsoft Amazon Lex IBM Watson Natural Language Classifier service
37. Api.ai by Google
38. 這些自然語言處理API有個共通點， 就是幫助開發者理解語句的意思， 了解使用者想要什麼。
39. “I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” 當使⽤用者 發問時 送出問題 API.AI自然語言處理的基本運作
40. Api.ai 接收問題 理理解問題，找出問者真正想要什什麼 “I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” API.AI自然語言處理的基本運作
41. Api.ai 想要什什麼 餐廳推介 Restaurant Recommendation Intent 理解問題，找出問者真正想要什麼 API.AI自然語言處理的基本運作 接收問題
42. Api.ai 餐廳類類型 Taiwanese Taipei 地點 接收問題 餐廳推介 找出其他額外資訊 API.AI自然語言處理的基本運作 ⽤用膳類類型 Lunch Taipei, Taiwanese, Lunch
43. App 通知想要什麼 （餐廳推介） 處理需求 並作出回應 Taipei, Taiwanese, Lunch API.AI自然語言處理的基本運作
44. 比方說，我們希望為使用者提供更個人化的餐廳建議。 我們需要知道使用者喜歡的餐廳類型和地點等等。 這條問題問得非常好！提供了所需的資料。 “I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” 地點 喜歡的餐廳類類型 ⽤用膳類類型
45. “Do you have a good suggestion for a restaurant in Taipei?” 但不是所有使⽤用者也會這樣問問題 “What kind of restaurant do you like? French, Japanese or Taiwanese?” API.AI其中一個功能，就是可以針對 遺漏的資料（如：餐廳類型）再發問
46. API.AI其中一個功能，就是可以針 對遺漏的資料（如：地點）再發問 “Do you have a good suggestion for a restaurant” 但不是所有使用者也會這樣問問題 “Where do you prefer to eat? Please be specific and tell me your preferred location.”
47. 如何使用API.AI處理自然語言
48. 如何使用API.AI處理自然語言 • 建立 Agent • 設定 Intents • 訂立所需的Entities
49. • API.AI 容許你建立超過一 個Agent，你絕對可以組成 一隊神盾特工隊。 • 每一個你建立的Agent都可 以有獨特技能。所謂技能就 是對某個領域的問題特別有 認識。 建立 AGENT
50. 建立 AGENT • 例如：Agent Foodie專 責有關餐廳的提問 • 又例如：Agent Hotel專 責酒店查詢等等。
51. 但很可惜... 新建立的Agent並無任何技術可言， 更不知道自己活著的意義。 你不要指望它能立刻推介餐廳， 它連「Hello」也不懂得如何回應！
52. 你需要為Agent提供培訓 所謂「培訓」就是為Agent 設定 Intents，提供一些樣本問題給它學習。
53. DEMO 簡單示範如何訓練一個 Agent
54. API.AI + iOS 如何在將API.AI整合⾄至iOS App
55. API.AI 提供 iOS SDK
56. 利用 CocoaPods 安裝 SDK
57. 設定並準備連接至你的Agent 每個Agent都有⾃自⼰己的Client Access Token，你 可以在Api.AI Console找到相關資料料。
58. 如何與Agent互動
59. Response and Action • response.result.fulfillment.speech / / Please give me a moment. I will pick a restaurant for you. • response.result.action / / restaurant.recommendation • response.result.parameters • parameters[“food-type”] / / Taiwanese • parameters[“location”] / / Taipei 有了這些資料，就可以在資料庫搜尋相關的餐廳
60. 開發iOS AI機器人難題 • 難題#1： •如何令機器人理解我們的語言（自然語言） • 難題#2： • 如何在iOS實作Conversational Interface （對話介面）
61. CONVERSATIONAL UI (對話式介⾯面)
62. 利用第三方程式庫建立對話式 ⼤大名鼎鼎的 JSQMessagesViewController
63. 簡單講解一下 import JSQMessagesViewController // 要使⽤用JSQMessagesViewController 的話， 可以建立⼀一個View Controller 並繼承⾃自 JSQMessagesViewController class MessagesViewController: JSQMessagesViewController { override func viewDidLoad() { super.viewDidLoad() // 設定 Sender ID以及顯示名字 self.senderId = "simonng" self.senderDisplayName = "Simon Ng" } …… }
64. 加入對話Bubbles 1. 建立JSQMessage陣列列，⽤用於儲存整段對話 2. 當使⽤用者按Send，就會呼叫didPressSend⽅方法 3. 另外，實作兩兩個和Collection View 有關的⽅方法
65. JSQMessagesBubbleImageFactory().ou tgoingMessagesBubbleImage(with: UIColor.gray) 設定對話Bubble樣式 JSQMessagesBubbleImageFactory().i ncomingMessagesBubbleImage(with: UIColor.red) JSQMessagesAvatarImageFactory.av atarImage(with: UIImage(named: user.info.avatar)!, diameter: 30)
66. JSQLocationMediaItem(location: placemarkLocation) 顯示圖像與地圖 JSQPhotoMediaItem(image: UIImage(data: selectedRestaurant?.image as! Data))
67. 總結 •使用Api.AI處理自然語言 • Intents • Entities • 需要大量時間訓練Agent • JSQMessagesViewController • 對話式介面（UI）
68. Build Something No matter How Small 如你是初學者，請容許我給你少少建議。學習程 式設計就是這樣開始，嘗試想一個簡單項目作練 習，但不必一開始就想著要做一隻超棒的app。 由一些簡易的任務來起頭，其餘的就會自然發展 下去。雖然途中你會遇到不少「蟲」，只要遇蟲 殺蟲，堅持下去，慢慢你就會發展出自己一套學 習心法。而對於我，最有效的學習方法就是：
69. 感謝各位 simonng@appcoda.com http:/ /facebook.com/simonlwng AppCoda開發者社群 http:/ /facebook.com/groups/appcodatw