◎於中軟 S1 智匯中心舉辦的講座( 4 月 22 日),現場聽眾將近 50 人,講了大約 3 個小時,投影片可以從這裡下載。因逐字稿文長,分成上下兩集,本文是下集,主講個案和實作,另有上集,主講概論。
(接續,上集)
75
今年 2 月份的時候,為了參加 LINE 聊天機器人全球大賽,決賽是在日本東京舉行,感覺可以來趟日本之旅,所以我們也開發了一支聊天機器人。這邊跟大家分享一下開發心得,因為今年是農曆雞年,所以我們把它取名為 Peep ,也就是英文裡面公雞叫的聲音。
76
我們同樣套用前面提過的檢查表來檢驗這個點子,因為主要目的是參加比賽,所以我們一定要做成 LINE 聊天機器人。
77
讓我們來看一下 Peep 這個點子的實現流程,首先在創意發想階段,我們想要解決的是使用者來到餐廳面對幾十種餐點卻不知道要點什麼的情況,接著在開發階段,我們打算做成 LINE 聊天機器人,至於行銷推廣的話,只要秀出 QR Code ,人家就可以掃描加為好友,超方便的。我以前參加 App 比賽,請親朋好友來下載都沒什麼人要安裝(笑)。
78
左邊看到的是 Peep 的實際操作畫面,你人來到餐廳,拍下菜單傳給 Peep , Peep 會呼叫微軟的雲端影像辨識演算法來抓出菜單上面的字;右邊看到的是大致的系統架構圖,首先你使用自己手機裡面的 LINE App ,拍照傳送訊息, LINE 平台收到之後,轉給 Peep 的聊天機器人後台,後台再去呼叫影像辨識 API ,同時也把一些數據存到資料庫裡面。
79
我們繼續看投影片的右邊,後台處理完畢之後,回傳給 LINE 平台, LINE 再轉送到使用者手機裡面的 LINE App 。所以從左邊的操作畫面來看,推薦的是一道「蕃茄經典炒蛋」。使用者如果覺得這個推薦不錯的話,可以回覆「這個好喔」,然後 Peep 也會回應一張貼圖笑臉,形成一個有來有往的互動。
80
如果畫成狀態機的話,大概長得像這個樣子。 Peep 可能會收到使用者傳來的圖片、文字,或其他,大家也許不知道,這些其他包括了貼圖、錄音、影片等等,接著 Peep 會做出相對應的回應。
如果是收到圖片的話,也就是拍照的菜單, Peep 首先會去呼叫微軟的影像辨識 API 來進行 OCR 文字擷取,如果有抓到字的話,也就是菜色名稱,就回覆給使用者,如果沒有抓到字的話,就繼續呼叫微軟的另外一支影像辨識 API 來描述圖片的內容,也就是所謂的看圖說故事,然後同樣把描述的結果回覆給使用者。
如果是收到文字的話,在前面的操作畫面裡面有看到, Peep 回覆的對話框下方有兩個按鈕,所以如果是「我要重選」字樣的話,就從「開始」狀態重新再走一遍整個狀態機的流程,而如果是「這個好喔」的話,就把使用者的偏好記錄下來,知道他喜歡吃飯或吃麵,作為下次推薦時的依據。
如果是其他格式的內容,一開始我們是回覆一段制式的操作說明,請使用者拍照上傳菜單之類的,後來收到不少使用者回饋,發現這樣不太友善,所以現在都會先從後台資料庫隨機撈一個熱門的菜色來推薦給使用者,然後才秀操作說明,這樣的 UX 對於使用者來說比較友善。
81
最後再讓我們回顧一下 Peep 的兩個主要功能,一個是左邊看到的推薦菜色,另一個是右邊看到的,如果是一般照片的話,它會看圖說故事,像這張照片是我兩個兒子在做勞作,但是它會說是一個男孩坐在桌子上之類的。
82
講到這邊,既然在台灣使用 LINE 的族群佔了大宗,那麼就讓我來看一下,基於 LINE 的聊天機器人會有哪些特性,以及應該如何因應。
83
前面曾經說過, LINE 聊天機器人都是用 LINE@ 帳號去改的,把真人換成機器人。
84
所以一旦改成 LINE 聊天機器人,原本手機上的 LINE@ App 就不能夠使用了,也就是說沒有辦法再由人工去接收和回覆訊息。
85
再來是 LINE@ ID 的部分,在申請的時候,預設會自動產生一組 8 個英文和數字隨機拼湊的 ID ,如果想要取一個好記的名稱,可以付費購買,我覺得 LINE 很聰明,這東西賣得比網域名稱還要貴,你去 GoDaddy 買 .com 網址差不多新台幣 500 元就可以搞定了,但是你又不得不買專屬的 LINE@ ID ,然後第二年之後又比第一年便宜,逼得你一直想要續約,難怪 LINE 會賺錢。(聽眾笑)
這裡分享一個實務上的小技巧,就是 ID 裡面可以包含點,所以我看到滿多帳號會取名為「 @ 什麼什麼 .tw 」。
86
在 PUSH 推播的部分,就是很常我們沒有跟他聊天,但是對方,通常是 LINE@ 官方帳號,會自己丟一些商品的優惠訊息過來的那種。免費額度是每個月 1,000 則,如果使用量超過的話,月租費至少 798 元起跳,而且只能夠在管理者後台網頁去設定發送,如果想要跟聊天機器人一樣,通通寫成自動化程式的話,至少要購買月租費 3,888 元的那個方案。(倒吸一口氣)
87
最後回到稍早看到的真人小編和機器人小編的比較表,機器人小編在正確率的部分比較弱一點。
88
所以要怎麼樣才能夠讓你的聊天機器人不會被冷落呢?讓人時常想要跟它聊上幾句。
89
最簡單的策略就是讓機器人「貼近」真人!一個作法是盡量推播有用的資訊,比方說商品優惠訊息,而且還不能夠太常推播,這個部分很多社群行銷的課程都有教。另一個作法是回覆內容要有梗、好笑,就像你平常會跟朋友做的那樣,很白爛,但是很真實。
90
不過光用想的就知道這是一件很難的事情。
91
其實我自己也有在 Peep 裡面鋪了一些梗,只是可能小小的不是很明顯。一個是當使用者丟出「這個好喔」的時候,它會回應一些有趣的貼圖。
92
另一個梗是在推薦的菜色下方,有一行星號開頭的文字。我會去判斷這次推薦的菜色跟之前的有沒有很相似,有的話就會回覆「最近好像很常挑這個」、「我記得這個是你的最愛」之類的,如果沒有的話,就回覆「這個好像還沒有嘗試過」、「試試看新的東西也不賴」。
不過我後來發現,如果聊天機器人想要爆紅的話,應該要回覆一些負能量版本的對話,比方說「怎麼又點飯」或者「都這麼胖了還吃」之類的,這些話大家好像還比較愛聽。(聽眾笑)
93
剛剛看的是我自己寫的聊天機器人,現在讓我們來看一下別人寫的。
這些是我從一些比賽和新聞媒體上看到的,覺得還不錯,可以給大家參考。
94
剛剛提到 LINE 在 2 月份有舉辦一個全球競賽,我發現入圍的作品都是日本人做的,這支 TaxiGo 是少數不是日本人做的,也是台灣唯一(應該是吧?)入圍的作品。你看最左邊的截圖,加為好友後它首先就問你要用什麼語言,有支援日語也許就是獲得青睞的原因之一。
接著滿多人會問我的一個問題,就是使用者的帳號如何綁定,讓聊天機器人可以確認聊天對象的身分,方便後續購物訂單或退貨的事宜。你可以看到中間這張截圖,滿多服務會使用手機簡訊驗證碼。
然後最右邊看到的這種方塊左右滑、有圖有字有按鈕的介面,在 LINE 聊天機器人裡面叫做 Carousel 旋轉木馬,左右滑一滑就可以選擇你要的功能,然後按一下,這種介面在 LINE 聊天機器人服務裡面還滿常見的,對於 UX 加分不少。
95
這個是 VoiceTube ,在年初的台灣 LINE 開發者大會有上台 promote 。你可以看到最下面那列可以彈出選單,選單的形式還滿多元的,另一個特點是訊息的內容都是滿版的大圖,點下去之後會外連到網站,因為使用者喜歡這類的「圖文訊息」,所以成為許多小編的慣用行銷技巧,藉此吸引使用者的注意,在 LINE 聊天機器人裡面叫做 Imagemap 影像地圖。
【按】在 4 月 27 日的 iThome Chatbot Day 大會上,許多講者不約而同提到要多用、善用 Rich Content(豐富的內容)來提升 UX ,在 LINE 聊天機器人中,可以考慮範本和滿版大圖,範本有 Buttons 按鈕、 Confirm 確認方塊、 Carousel 旋轉木馬這三種,滿版大圖就是 Imagemap 影像地圖。
96
這個是 EZTABLE ,同樣在 LINE 開發者大會的時候有上台。它這個的選單是二乘二田字形,這種選單還滿常見的。然後你看到最右邊的截圖,點擊選項後可以外連到網頁,也可以按右上角的叉叉返回,基本上並沒有跳離 LINE App 。
97
現在讓我們問自己第三次,也是今天這場講座的最後一次:「我們的點子非要做成聊天機器人不可嗎?」
98
這是我很喜歡的一位作者,叫做 Mike ,他在台灣有出版兩本書叫做《南瓜計畫》和《衛生紙計畫》,畫面上這本書在台灣還沒有翻譯成中文,叫做 Profit First ,也就是獲利優先,他說我們在做任何事業的時候,應該優先考慮獲利,否則一定無法長久。
99
所以聊天機器人要如何獲利呢?
100
對於開發商而言,像我這種軟體公司,我可以先 2B ,比方說幫便當店老闆做訂便當聊天機器人,再 2C ,讓便當店老闆推廣給他的客人,最後我來向便當店老闆收取平台使用費,因為他使用的是我開發的聊天機器人系統。
101
對於像便當店這種小資老闆,現在聊天機器人都瞬間秒回,而且訂單從此再也不會漏接,使用者都超級開心的,一直來跟他訂便當,所以他也跟著賺到很多錢。
102
對於想要訂便當的使用者來說,就跟在操作 LINE 一樣,介面完全沒變,用起來超習慣的!
所以聊天機器人可以是一個三贏的局面!
但是如果初期不以 2B 為目標,那麼不妨先將獲利放兩旁,單純以增加好友人數和提升服務為優先考量,等好友人數跨過了數百,來到成千上萬,甚至數十萬,進入另一個數量級層次,到時候再來考慮往外找或是自己找上門來的商業合作也不遲。
103
現在就讓我們實際來製作一支 Echo 聊天機器人,親自體驗一下效果。
實務上我們喜歡用 Echo 當作範例,因為如果可以你丟什麼、它就回應什麼,代表底層架構沒有問題,後續熟悉了 SDK 和 API 之後,只要把功能再往上加就可以了。
這邊我們需要做三件事,首先是申請 LINE@ ID ,然後下載 SDK ,裡面就有 Echo 範例程式,最後要把聊天機器人放到網站上面當作後台。
我比較熟的是 PHP ,所以這裡會使用 PHP 當作範例,不過 LINE 的 SDK 提供許多程式語言版本,比方說還有 Python 、 Ruby 這些。
【按】在 4 月 27 日的 iThome Chatbot Day 上,看到有講者使用 Go 語言,然後將 Echo 部署到 Heroku 上,還有錄影展示,過程只要 3 分鐘,超酷的。
104
第一步是申請 LINE@ ID ,請來到 LINE Business Center ,網址是 https://business.line.me/auth 。
這邊的電子郵件帳號是你用來登入個人 LINE 帳號的那個電子郵件,欄位右邊有個問號,你點下去看提示的話,會教你去 LINE 的「設定」裡面的「我的帳號」那邊找到這組電子郵件。
如果之前沒有登入過 LINE Business Center 或是 LINE 帳號沒有綁定電子郵件的話,這邊可能會需要花點時間設定一下。
105
輸入完電子郵件帳號和密碼之後,可能會收到簡訊驗證碼。
106
輸入完驗證碼之後,就成功登入了。
107
接著切換到「帳號清單」的分頁。
108
網頁往下捲一點,點擊「建立商用帳號」的按鈕。商用帳號其實也就是我們常聽到的 LINE@ 官方帳號,有分一般和認證兩種,後者要經過審核才能夠取得資格。如果是大型企業的官方帳號,那又是另外一種了。
109
我這邊的網頁畫面截圖都是講座前一兩天才抓的,如果各位看到的畫面不一樣,不知道是不是因為我這個帳號是綁定公司統編的緣故。
請大家找到藍色的「 Messaging API 」這項,我們今天要申請的是機器人小編的 LINE@ ID ,不是真人小編的,所以不要選第一項綠色的那個「 LINE@ 」,不然後續有些設定步驟會沒有辦法操作。
「 Messaging API 」這邊有兩個超連結,一個是下方的註冊成 Developer Trail 帳號,另一個是右邊的一般帳號。
這裡請按右邊綠色的「開始使用 Messaging API 」按鈕。
110
Developer Trail 可以免費試用所有的功能,但是最多只能夠加 50 位好友,當初我們在參加 LINE 聊天機器人大賽的時候,有一項指標是好友人數,所以我們後來很快就換成一般帳號,所以在我們自己的帳號清單裡面會看到有兩支 Peep 。
左邊這個是一般帳號,下方寫「免費版」,是因為我們還沒有付月租費加購其他功能,這個可以等使用量變多的時候再來考慮。
111
剛才點擊了「開始使用 Messaging API 」之後,下一步是設定圖片和名稱。
112
圖片和名稱就是我們平常看到的那些資訊,一個是出現在聊天那個分頁裡面(左圖),另一個則是出現在對話視窗有人點擊了大頭照的時候(右圖)。
113
接著要設定業種,有大分類和小分類,大家可以從下拉式選單當中選擇最適合的。像 Peep 是推薦菜單的服務,所以我是選擇「生活相關服務」。
114
最後確認填寫的資料無誤,按下綠色的「申請」按鈕。
115
到這邊為止, LINE@ ID 就建立完成了。
在設定 LINE 聊天機器人的過程當中,會連到三、四個網站,我們稍後會幫大家歸納出來。這邊的 LINE Business Center 是第一個,現在可以按綠色的「前往 LINE@ MANAGER 」按鈕來連線到第二個 LINE@ Manager 網站。
116
如果有被要求登入的話,同樣使用剛才那組你個人的 LINE 帳號的電子郵件和密碼來登入 LINE@ Manager 。
117
同樣可能會需要輸入簡訊驗證碼。
118
登入成功之後,立刻看到的就是「帳號一覽」的畫面,如果沒有看到東西的話,請點擊左側選單的「帳號一覽」選項。
現在清單最上面的那個帳號,就是我們剛才建立的那組 LINE@ ID 。
119
請將左側選單往下捲找到「帳號設定」,展開後裡面有一個「 Bot 設定」,點擊後看到的會是像這樣的畫面。
我們要做的就是去按綠色的「開始使用 API 」按鈕。
但是你可以看到它的上方有一塊紅字警語,講的就是我們剛才提到的事情,一旦啟用 API 功能之後,機器人小編就回不去真人小編了。因為從此以後,使用者透過 LINE 傳送過來的訊息,都會被轉到你自己的後台,不會再存到 LINE 那邊了。
120
因為這件事情很重要,所以點擊「開始使用 API 」之後,會再次出現確認方塊。請按「確認」。
121
然後按「 OK 」。
122
現在你看到的「 Bot 設定」會跟剛才第一眼看到的不太一樣,這邊比較重要的設定有兩項,一個是「 LINE developers 」的超連結,點擊後會連到第三個網站,我們寫程式需要用到的金鑰和設定,都可以在那個網頁上面找到;另一個則是「 Webhook 傳訊」要改成「允許」,代表同意 LINE 把使用者傳遞給聊天機器人的訊息都轉送到你的後台。
下方「詳細資訊」這邊還有幾個有趣的設定,大家可以玩玩看。一般會建議把「自動回應」取消,否則使用者傳的每句話都會先收到聊天機器人的罐頭回覆,實在有點囉唆。另外就是可以到左側選單的「訊息」那邊去客製化問候語,當有人把你的聊天機器人加為好友的時候,都會收到同樣的罐頭問候語,有的會寫一些操作說明,但是你可以寫得活潑一點,不要那麼罐頭。
123
現在請按「 LINE developers 」超連結跳到第三個網站。
「 Channel Secret 」這個等一下寫程式的時候會用到,你可以按右邊的「 SHOW 」,然後把那個明碼複製起來放著。
124
網頁往下捲,可以看到「 Channel Access Token 」,這個等一下寫程式的時候也會用到,你可以按右邊的「 ISSUE 」來產生。
下方還有一個綠色的「 EDIT 」按鈕,我們先點下去看一下。
125
剛才「 Channel Access Token 」欄位上方的「 Webhook URL 」變成可以編輯了,這裡就是你跑程式的地方,你的後台就是從這邊收到 LINE 轉送過來的訊息。
請注意網址必須是 HTTPS 開頭的,如果你本來就有網站,但是沒有 HTTPS 所需的 SSL 憑證,可以考慮 Let’s Encrypt 服務,他們是推廣 HTTPS 的組織,所以有提供免費的 SSL 憑證,但是有效期限比較短,好像 3 個月就到期了,所以你必須一直去續約,或是寫一支 Shell Script 定期去續約,這類的 Shell Script 在網路上都找得到範例(例如這裡有一篇關於如何在 Ubuntu 上自動加入和續約 Let’s Encrypt 的教學)。
如果需要自建網站的話,我推薦可以去註冊微軟的 Azure 雲端服務,每個帳號可以免費建立 10 個網站,這是我的印象,數字不知道有沒有變多或變少,當然等級會比較弱一點,但是初期測試的時候都還夠用,如果不夠的話再付費加開資源就好,而且每個新帳號都有提供 30 天免費試用的額度。註冊過程會需要填寫信用卡資訊,不過如果沒有超額使用的話,一般並不會被扣錢,而且要扣錢之前,微軟也會跟你確認。
126
那麼究竟 LINE 的 App 、 Messaging API 和開發者自己的聊天機器人後台三者之間是如何運作的呢?在 LINE 的開發者文件上面有一張流程圖說明了這個關係。
簡單來講,就是使用者透過 Messaging API 跟聊天機器人後台傳送訊息,然後聊天機器人後台也透過 Messaging API 來回覆使用者。
127
套用到前面在展示 Peep 時看過的架構圖,如果是真人小編的話,使用者是透過自己的 LINE App 來聊天,訊息被 LINE 的後台接收,被存到 LINE 的資料庫,被 LINE 處理。
128
但是今天如果換成是你自己開發的機器人小編的話,使用者雖然同樣是透過自己的 LINE App 來聊天,但是訊息會被「你」的後台接收,被存到「你」的資料庫,被「你」或串接的第三方服務處理。
從此以後已經沒有 LINE 的後台和資料庫了,這也就是為什麼會有前面的紅色警語,因為很可能在架構上無法允許再切換回 LINE 的後台和資料庫了。
129
再次回到 LINE 開發者文件上的流程圖,我們剛剛在前面三個網站, LINE Business Center 、 LINE@ Manager 和 LINE developers 那邊,已經把 Messaging API 的設定完成了,接下來要做的是右半段串接聊天機器人後台的部分。
130
LINE 的 SDK 有好多程式語言版本,從開發者網站那邊來看,目前至少有 Java 、 PHP 、 Go 、 Perl 、 Ruby 和 Python 這些版本。
131
我自己比較熟悉的是 PHP ,所以我下載的是 PHP SDK ,在那包程式碼裡面就有一個 Echo 範例了。
132
我們打開 Echo 聊天機器人的程式碼,把前面在 LINE developers 網站那邊取得的 Access Token 和 Secret 填進去,這樣其實就改完了。
133
不過真的要會動的話,還需要再三個步驟。
第 1 步是把剛剛改過程式碼的那包程式碼,上傳到你的 Web Server ,以 PHP SDK 為例,只要上傳 line-bot-sdk-tiny 這個資料夾就可以了。如果是自建的 Web Server 主機,務必要申請 SSL 憑證,如果沒有 Web Server 主機的話,可以花點時間去註冊 Azuer 帳號,他們家的網站本身就有 HTTPS 了。
第 2 步是回去 LINE developers 那裡,把「 Webhook URL 」指到你剛才上傳那個程式的網址。
第 3 步,不止是最後一步,也是最令人興奮的一步,就是拿出你自己的手機,打開 LINE App ,到 LINE developers 那個網頁,去掃描這支聊天機器人的 QR Code ,然後你對它傳送訊息,看它有沒有回覆你,這就叫做 Echo 應聲蟲,有的話就恭喜,你成功了。(沒多久,聽眾之間就陸續傳來歡聲雷動的鼓舞聲響。)
134
在開發者文件的部分,如果第一次閱讀的話,可能會不知道怎麼參考,所以我大概講一下。最左邊是目錄,當你點選了想要知道的主題,例如 Reply message 回覆訊息,畫面中間就會出現內容,寫得其實還滿詳細的,有哪些參數,哪些參數是必填的,最右邊是範例程式碼,你可以切換上方的分頁來查看自己熟悉的語言。
千萬不要忽視必填參數,也就是文件上, Required 欄位標示為 Yes 的部分。很多時候,你的 LINE 聊天機器人無聲無息沒有反應,就是因為遺漏了某些必填參數。比方說在使用 Carousel 旋轉木馬來當作回應訊息的時候,標題可以不填,但是內文一定要填,當然最好的方式是兩者都填,如果只填標題而不填內文,保證旋轉木馬整個都不會出現。曾經我也 Debug 了好久,這邊特別提出來請大家務必留意!
135
部署到 Web Server 主機,也研究了開發者文件之後,你可以考慮擴充 Echo 的功能,導入資料庫來收集數據,或是串接第三方的服務。
136
這邊讓我們再回顧一下,在開發 LINE 聊天機器人時會需要瀏覽 4 個網站,我自己很常跳來跳去忘記要去哪裡,這時候就可以回來看這一頁。要建立 LINE@ ID 就去 LINE Business Center ,要管理 LINE@ ID 就去 LINE@ Manager ,與程式開發有關的就去 LINE developers ,要看文件就去 API Reference 。
137
最後請容我工商服務一下,今天聊天機器人講座的內容,我們調整之後會製作成線上課程,並且與知名的 iOS 教育機構 AppCoda 合作,放在他們的平台上,確切的推出時間請大家關注我們公司的粉絲專頁,我們會在上面發佈消息。
另外就是我們公司有在徵人,我們都是遠端工作,有興趣的話可以來應徵看看,我們會出幾個考題。
138
感謝大家的聆聽,以上是我今天的簡報!
139
最後這頁有我的聯絡方式,歡迎與我聯絡。