Building a Chatbot app on iOS Using Api.AI

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

SUBTITLE FOR THIS DECK GOES HERE 謝謝大家支持！ 2016年第一次在台北舉辦開發者聚會。

Slide 3

Slide 3 text

今年分別在台北、台中和高雄各舉辦一場開發者聚會，超過 200人參加。剛剛完成台北和台中場！

Slide 4

Slide 4 text

• AppCoda創辦人，也是 iOS程式設計師關於SIMON

Slide 5

Slide 5 text

• AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括《iOS 10 App程式設計實力超進化實戰攻略》等程式開發書籍。關於SIMON

Slide 6

Slide 6 text

關於SIMON • AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括《iOS 10 App程式設計實力超進化實戰攻略》等程式開發書籍。 • 熱愛教學，Swift課程導師

Slide 7

Slide 7 text

關於SIMON • AppCoda創辦人，也是 iOS程式設計師 • 程式教學寫作人，著作包括《iOS 10 App程式設計實力超進化實戰攻略》等程式開發書籍。 • 熱愛教學，Swift課程導師 • 也熱愛咖啡，夢想有日能開一間結合程式教學的 AppCoda Cafe

Slide 8

Slide 8 text

關於APPCODA 它不只是一個網站而是一間專門提供程式教學的公司。希望透過我們的教學課程，讓更多人學懂程式設計，能將自己的想法變成真實的App。

Slide 9

Slide 9 text

有讀者問：「為何成立 APPCODA？」

Slide 10

Slide 10 text

最初只是因為日間的工作太悶而自學寫iOS App，同時我亦喜歡以部落格形式，將自己所學的分享開去。

Slide 11

Slide 11 text

「那又如何將 APPCODA 變成全職事業？」

Slide 12

Slide 12 text

有一日，一個國外讀者來信提議，可以將部落格的教學文章結習成書出售。

Slide 13

Slide 13 text

很棒的建議，但真的可以嗎？部落格的文章已是免費，還有人購買電子書？

Slide 14

Slide 14 text

讀者回信：「一定會有人買，至少我會買一本。」

Slide 15

Slide 15 text

好！一試無妨&。就這樣推出了人生第一本電子書。而且收入還不錯，那就趁年輕（其實已不年輕）辭職創業。

Slide 16

Slide 16 text

今天的APPCODA •主力編寫程式教學，出版電子書，舉辦工作坊。盡力將艱澀的程式概念變得容易明白，幫助更多人學習 App開發以及發展程式開發專業。 •我們與世界各地開發者（包括來自美國、歐洲和台灣的開發者）合作推出程式教學文章和書籍。

Slide 17

Slide 17 text

We’re Hiring •我們正擴大中文網站的教學團隊 •包括技術型編輯、程式教學作家 • 兼職或Freelance形式也可以 • 電郵你的簡歷至[email protected]

Slide 18

Slide 18 text

淺談Chatbot開發：如何於iOS實作AI聊天機器人

Slide 19

Slide 19 text

淺談iOS AI聊天機器人開發 • 什麼是Conversation Interface? • 如何處理自然語言 (Natural Language) • 如何實作一個AI聊天機器人 • 我也是Chatbot開發新手

Slide 20

Slide 20 text

為何講解 AI聊天機器人？說真的，舉辦此聚會時，還沒想到要分享什麼。

Slide 21

Slide 21 text

無意中發現一位台灣朋友在 Facebook發表他寫的 Handsome Guy魔鏡程式！ “Ask mirror who is the most handsome guy in the world.” “Of course, Ryan in Taiwan” 超酷喔。當我正苦惱要說什麼的時候

Slide 22

Slide 22 text

仍未想到分享什麼題目。又無意中在Facebook見到朋友發表Line 聊天機器人。只要拍照上傳，就可幫你從菜單中挑一個，非常適合有選擇困難症的我。兩星期後...

Slide 23

Slide 23 text

似乎人人都在打造Chatbot AI機器人什麼是聊天機器人？簡單來說，就是「用對話介面呈現的機器人程式」。

Slide 24

Slide 24 text

AI和聊天機器人對於我來說是全新的技術。要學習一門新技術，最有效就是實作一點東西。我也來實作一個AI聊天機器人

Slide 25

Slide 25 text

我也來實作一個AI聊天機器人 AI和聊天機器人對於我來說是全新的技術。要學習一門新技術，最有效就是實作一點東西。

Slide 26

Slide 26 text

AI和聊天機器人對於我來說是全新的技術。要學習一門新技術，最有效就是實作一點東西。所以我想為FoodPin App加入聊天機器人功能。我也來實作一個AI聊天機器人

Slide 27

Slide 27 text

AI和聊天機器人對於我來說是全新的技術。要學習一門新技術，最有效就是實作一點東西。使用者啟動AI聊天機器人之後，可以直接以對話形式，詢問餐廳推介。我也來實作一個AI聊天機器人所以我想為FoodPin App加入聊天機器人功能。

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

開發iOS AI機器人難題 • 難題#1： •如何令機器人理解我們的語言（自然語言） • 難題#2： • 如何在iOS實作Conversational Interface （對話介面）

Slide 32

Slide 32 text

“Please suggest me a good place to eat.” 自然語言就是我們一般人平常所用的，如中文、英文，你和我都很自然明白以上問題。但是要令機器明白我們的語言，了解它的意思，這個就不簡單。而語言的表達方式千變萬化，以上幾句看似不一樣，但其實都是想要餐廳建議。

Slide 33

Slide 33 text

“I’m going to meet a friend in Taipei for lunch. Any restaurant recommendation?” 自然語言就是我們一般人平常所用的，如中文、英文，你和我都很自然明白以上問題。但是要令機器明白我們的語言，了解它的意思，這個就不簡單。而語言的表達方式千變萬化，以上幾句看似不一樣，但其實都是想要餐廳建議。

Slide 34

Slide 34 text

“Can you recommend a good Taiwanese restaurant for dinner?” 自然語言就是我們一般人平常所用的，如中文、英文，你和我都很自然明白以上問題。但是要令機器明白我們的語言，了解它的意思，這個就不簡單。而語言的表達方式千變萬化，以上幾句看似不一樣，但其實都是想要餐廳建議。

Slide 35

Slide 35 text

那要如何解決這個問題？設計你自己的Algorithm？超級難

Slide 36

Slide 36 text

較流行的自然語言處理API Api.ai by Google Wit.ai by Facebook LUIS by Microsoft Amazon Lex IBM Watson Natural Language Classifier service

Slide 37

Slide 37 text

Api.ai by Google

Slide 38

Slide 38 text

這些自然語言處理API有個共通點，就是幫助開發者理解語句的意思，了解使用者想要什麼。

Slide 39

Slide 39 text

“I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” 當使⽤用者發問時送出問題 API.AI自然語言處理的基本運作

Slide 40

Slide 40 text

Api.ai 接收問題理理解問題，找出問者真正想要什什麼 “I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” API.AI自然語言處理的基本運作

Slide 41

Slide 41 text

Api.ai 想要什什麼餐廳推介 Restaurant Recommendation Intent 理解問題，找出問者真正想要什麼 API.AI自然語言處理的基本運作接收問題

Slide 42

Slide 42 text

Api.ai 餐廳類類型 Taiwanese Taipei 地點接收問題餐廳推介找出其他額外資訊 API.AI自然語言處理的基本運作⽤用膳類類型 Lunch Taipei, Taiwanese, Lunch

Slide 43

Slide 43 text

App 通知想要什麼（餐廳推介）處理需求並作出回應 Taipei, Taiwanese, Lunch API.AI自然語言處理的基本運作

Slide 44

Slide 44 text

比方說，我們希望為使用者提供更個人化的餐廳建議。我們需要知道使用者喜歡的餐廳類型和地點等等。這條問題問得非常好！提供了所需的資料。 “I’m going to meet a friend in Taipei for lunch. Any recommendation of a good Taiwanese restaurant?” 地點喜歡的餐廳類類型⽤用膳類類型

Slide 45

Slide 45 text

“Do you have a good suggestion for a restaurant in Taipei?” 但不是所有使⽤用者也會這樣問問題 “What kind of restaurant do you like? French, Japanese or Taiwanese?” API.AI其中一個功能，就是可以針對遺漏的資料（如：餐廳類型）再發問

Slide 46

Slide 46 text

API.AI其中一個功能，就是可以針對遺漏的資料（如：地點）再發問 “Do you have a good suggestion for a restaurant” 但不是所有使用者也會這樣問問題 “Where do you prefer to eat? Please be speciﬁc and tell me your preferred location.”

Slide 47

Slide 47 text

如何使用API.AI處理自然語言

Slide 48

Slide 48 text

如何使用API.AI處理自然語言 • 建立 Agent • 設定 Intents • 訂立所需的Entities

Slide 49

Slide 49 text

• API.AI 容許你建立超過一個Agent，你絕對可以組成一隊神盾特工隊。 • 每一個你建立的Agent都可以有獨特技能。所謂技能就是對某個領域的問題特別有認識。建立 AGENT

Slide 50

Slide 50 text

建立 AGENT • 例如：Agent Foodie專責有關餐廳的提問 • 又例如：Agent Hotel專責酒店查詢等等。

Slide 51

Slide 51 text

但很可惜... 新建立的Agent並無任何技術可言，更不知道自己活著的意義。你不要指望它能立刻推介餐廳，它連「Hello」也不懂得如何回應！

Slide 52

Slide 52 text

你需要為Agent提供培訓所謂「培訓」就是為Agent 設定 Intents，提供一些樣本問題給它學習。

Slide 53

Slide 53 text

DEMO 簡單示範如何訓練一個 Agent

Slide 54

Slide 54 text

API.AI + iOS 如何在將API.AI整合⾄至iOS App

Slide 55

Slide 55 text

API.AI 提供 iOS SDK

Slide 56

Slide 56 text

利用 CocoaPods 安裝 SDK

Slide 57

Slide 57 text

設定並準備連接至你的Agent 每個Agent都有⾃自⼰己的Client Access Token，你可以在Api.AI Console找到相關資料料。

Slide 58

Slide 58 text

如何與Agent互動

Slide 59

Slide 59 text

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 有了這些資料，就可以在資料庫搜尋相關的餐廳

Slide 60

Slide 60 text

開發iOS AI機器人難題 • 難題#1： •如何令機器人理解我們的語言（自然語言） • 難題#2： • 如何在iOS實作Conversational Interface （對話介面）

Slide 61

Slide 61 text

CONVERSATIONAL UI (對話式介⾯面)

Slide 62

Slide 62 text

利用第三方程式庫建立對話式⼤大名鼎鼎的 JSQMessagesViewController

Slide 63

Slide 63 text

簡單講解一下 import JSQMessagesViewController // 要使⽤用JSQMessagesViewController 的話，可以建立⼀一個View Controller 並繼承⾃自 JSQMessagesViewController class MessagesViewController: JSQMessagesViewController { override func viewDidLoad() { super.viewDidLoad() // 設定 Sender ID以及顯示名字 self.senderId = "simonng" self.senderDisplayName = "Simon Ng" } …… }

Slide 64

Slide 64 text

加入對話Bubbles 1. 建立JSQMessage陣列列，⽤用於儲存整段對話 2. 當使⽤用者按Send，就會呼叫didPressSend⽅方法 3. 另外，實作兩兩個和Collection View 有關的⽅方法

Slide 65

Slide 65 text

JSQMessagesBubbleImageFactory().ou tgoingMessagesBubbleImage(with: UIColor.gray) 設定對話Bubble樣式 JSQMessagesBubbleImageFactory().i ncomingMessagesBubbleImage(with: UIColor.red) JSQMessagesAvatarImageFactory.av atarImage(with: UIImage(named: user.info.avatar)!, diameter: 30)

Slide 66

Slide 66 text

JSQLocationMediaItem(location: placemarkLocation) 顯示圖像與地圖 JSQPhotoMediaItem(image: UIImage(data: selectedRestaurant?.image as! Data))

Slide 67

Slide 67 text

總結 •使用Api.AI處理自然語言 • Intents • Entities • 需要大量時間訓練Agent • JSQMessagesViewController • 對話式介面（UI）

Slide 68

Slide 68 text

Build Something No matter How Small 如你是初學者，請容許我給你少少建議。學習程式設計就是這樣開始，嘗試想一個簡單項目作練習，但不必一開始就想著要做一隻超棒的app。由一些簡易的任務來起頭，其餘的就會自然發展下去。雖然途中你會遇到不少「蟲」，只要遇蟲殺蟲，堅持下去，慢慢你就會發展出自己一套學習心法。而對於我，最有效的學習方法就是：

Slide 69

Slide 69 text

感謝各位 [email protected] http:/ /facebook.com/simonlwng AppCoda開發者社群 http:/ /facebook.com/groups/appcodatw