聊天機器人實作:Chatfuel基礎篇

前言:

聊天機器人超級潮,是不是該自己也玩個試試?這篇文章會帶你一步一步走過,從對於 Chatbot 毫無概念,到自己做出一支呆萌呆萌的聊天機器人。

P.S. 這篇文章內容主要是「實作」,想看概念請轉彎至演講簡報,瞄一眼來概觀聊天機器人的古今中外:聊天機器人基礎篇(P.S.S. 裡面資源已失效),純聊天的Chatbot通常會牽涉大量AI,這裡是屬於任務型Chatbot。


一、建立粉絲專頁

一開始要先建立一個粉絲專頁,來當作測試,以防開發中失誤傳送訊息給真正的使用者,就悲劇了。


二、前往Chatfuel,登入並連結粉專

Chatfuel可以創建很多個chatbot,要用「connect FB」(連結FB)來達到與粉專連結,也可以隨時 disconnect (中斷連結),以這部分來說彈性蠻大,不用擔心開發了這個Chatbot就綁死粉專。

第一次連結Chatfuel與FB,Chatfuel會引導你從FB登入,並給予權限(一定要有一個粉專,並且為管理員),照著指示下一步、下一步、下一步,最後會有一個Bot,連結好一個粉專,下圖則為如果要再另外新增一個Bot的「Create a blank bot」(創造一個空的Bot)。


Chatfuel總共分成六大功能:Build、Set Up AI、Broadcast、 Configure、Grow、Analyze。(介面上Mac跟Windows有一點點不一樣,但本質是一樣的。)

1. Build:Chatfuel的基本邏輯將會在這裡建立。

(1) 左區是Bot Structure,又可以說是基本架構,其中Group像是一個資料夾,Block則是資料夾內的文件,舉例來說,創造一個履歷Bot,可能分成最基本的區塊就是「履歷、作品集、聯絡我」,這樣就會是三個Group,那履歷又有求學過程、工作經歷等,就會屬於履歷Group的Block,有點像是在履歷的資料夾裡面,放求學過程、工作經歷的文件。
(2) 右區是每一個Block的編輯區,裡面有「Add a card」,Card種類繁多,會在第三個大Part,跟大家詳細說明幾大基本功能。


2. Set Up AI:

如果使用者做出你設計的Chatbot沒有預估到的事情怎麼辦?Set Up AI幫助你解決基本的問題,比如說看到使用者打出類似「請問、不好意思、聯絡」等詞彙,Bot沒辦法解決的問題,那代表使用者需要找真人服務,我們可以給予「文字回覆」(請撥打xxx)或是「引導至特定的Block」(此Block可能是常見問題的導覽etc.)。


3. Broadcast:

中文翻為「推播」,知道中文應該懂一半了吧!應用方式非常多,Chatfuel可以做到幫助你基本的篩選,那這部分的篩選,在你前面給使用者玩Chatbot的時候就要給他一些篩選的機制,這樣講有點抽象,比如說,請使用者Share location,推播時可以選擇台北地區做推播,並且如Build一樣可以放各式各樣的Card,或是連結到特定在Build裡面的Block。


4. Configure:

中文為「設置」,你想得到的設置功能都會在這裡出現,其中比較重要的為Menu(在Messenger的呈現像是一個「三」的按鈕)、連結粉專、共同編輯Chatbot。


5. Grow:

怎麼讓你的Chatbot的曝光率更高,這裡有提供幾個功能,包括連結網頁的Landing Page等等。


6. Analyze:

俗稱「分析」,可以看到使用者的反應,大家在哪裡都卡住跳出了?什麼時候使用者最活躍?


三、Build 基本功能講解 — ADD A CARD —

第一次,總是陌生的,這邊會教大家最常用的Card的基本功能,無法涵括全部還請見諒。

下圖是Chatfuel提供最基本的功能,但點選最右邊的「+」號,還有非常多功能,等一下在實作時,會使用到+裡面的功能。

1. TEXT:文字,主要是用來「文字表達」。

(1) 灰色部分:「選擇一個動物」如果說你想表達的字句很長,想要分很多句話講,可以連續放好幾個不設定回覆的TEXT(豬牛羊這邊是option,可放可不放,若不放就是純粹的一句話)。
(2) 藍色:「豬、牛、羊」,使用者會在Messenger看到的訊息,Chatfuel限制最多只能三個按鈕。
(3) 淺色:「Pig、Cow、Sheep」,Block的名稱(如下圖),使用者不會看到這些字。

P.S. 一般來說,Block使用英文表示,較容易辨識。

重點提醒:TEXT,可以放 0~3 個回覆,但這邊的回覆是一定要跳轉到另一個Block的,從App的角度來說是「換一個介面」,如果你只是想要確認使用者還在玩弄你的Bot,可以使用「QUICK REPLY」代替。


2. GALLERY、LIST:列舉一系列,並可以放置 Url 或 Block 給各項目(也可不放),訂閱的話就蠻適合使用Gallery,List的部分較一目瞭然,應用方面廣。

(1) GALLERY

(2) LIST

Gallery V.S. List

基本上兩者相差不大,但List只能放三個項目,並另外加一個按鈕,而Gallery則可以非常多組,主要取決於你希望呈現的方式。


3. QUICK REPLY 搭配 TEXT

這裡可以分成兩個面向討論:

(1) 同一個話題:如前面所說,我只是要他回答「好呀XDDD 知識永遠不嫌多」,並沒有要換一個話題或介面的意思,如果使用Quick Reply,這裡可以避免Block轉換(如果不用Quick Reply,僅使用Text下面的Button,這樣要創造很多Block,專案若大,難以管理)。

(2) 我想要給使用者很多options(>3):TEXT只能給三個選項,如:心理測驗中,這四個塔牌你會直覺選哪一個(這話題好宅XD),這時候要前往「四個」不同的Block給使用者答案對吧,但原本的TEXT沒辦法達到這樣的要求,就可以使用Quick Reply來完成。


4. TYPING:讓使用者覺得你是真人,還在打字中… 也讓bot訊息不跳那麼快,給人壓迫感,秒數可自己調整。


5. USER INPUT 搭配 SEND EMAIL

User Input: 給使用者「打字來呈現答案」,如:請提供駕照號碼。在這裡的話,粉專會說「你喜歡什麼動物?」等待使用者回答之後,才會再進行後續動作。

Send Email: 寄 Email 給特定人,如果有重要資訊可以傳送Email給管理者,這裡也可以說是比較牽強的對話儲存,因為在這個單元,我們還沒辦法儲存對話紀錄,後續單元會再教大家怎麼儲存需要的資訊到資料庫(屆時會使用到一些程式碼)
(1) Title 是收件者會呈現的主旨 
(2) Email Addresses 以目前經驗,Gmail可以成功
(3) Email Body 的應用如上圖,其實在Chatfuel很多地方(如「Go To Block」、「JSON API」),加上「{{ 」可以找到目前已有的參數,內建的即有first name, last name等等。
P.S. 常見問題:有時候Chatfuel會有Bug,卡到什麼,在「{{」後會找不到變數,就會要使用「Set Up User Attribute」來設定,在此不多加贅述。

6. VIDEO

影片上傳的方式,我目前使用App版的dropbox連結,才能成功,記得將最後改成「 dl=1 」。


基本功能講解大概到這邊,此外還有Plugins、IFTTT、Zapier,總共有三十個,這邊只能針對最常用、較簡單的來說明。

四、跟我一起實際玩玩看吧!

我們在這邊做個基本的測試,內容比較粗淺一點,但可以做到一些基本練習:
1. Bot基本架構開發,成功上傳一個聊天機器人
2. 參數測試,如:{{first name}}
3. TEXT、QUICK REPLY、USER INPUT、IMAGE、SEND EMAIL、TYPING
4. Text 的 Reply V.S. QUICK REPLY
5. Blocks 之間的連結,最後回到 Default answer (一般來說是用來回應Bot沒辦法處理的訊息,Bot會自動跳到Default answer,這裡的話我們刻意把Default answer當作每一回合的Ending。)


接下來我們直接開始吧!記得搭配每個範例圖進行唷~

1. 進入到Build

2. 左區Bot Structure:

(1) 將Group名稱改成:GROUP KNOW STH
(2) 新增三個Blocks:KnowMore、Good、Bad(添加Block,點選那顆小+號)

先把基本的架構處理好,之後可以省很多時間,不然在 blocks 之間跳來跳去,很容易思緒混亂~

注意!!!

接下來的Part,要分別到「各個Block裡面」做唷,如3. Welcome message,就要在Welcome message;4. KnowMore,就要點KnowMore那個Block,到KnowMore Block裡面做 etc.。

不要全部都做在Welcome message裡面唷!!!


3. Welcome message

  1. 添加一個 Text:打上上圖那些字,並且「不添加」任何Button,我們把 Button 的動作留給 Quick Reply。
  2. 添加一個 Quick Reply :
    Enter Button Name — 嗨你好(這裡是會顯示給使用者看到的字)
    Enter Block Name — KnowMore (這是 2. Bot Structure 中的其中一個Block,也就是說點了這個按鈕,我們會跳到 KnowMore這個Block)

4. KnowMore(記得到KnowMore的Block!!!)

  1. Typing:秒數可以自己調整,讓使用者覺得你的機器人在打字中~
  2. Text:我這邊打「我最喜歡的動物是狗」,因為後續要問他他喜歡什麼動物。
  3. User input:位置在下圖
    (1) Add fields 
    (2) What do you want to ask:你最喜歡什麼動物呢?
    (3) Validation:None(也可以限制Phone, Email, Number,這樣Bot會幫你過濾,如果是Email的話,使用者沒打@,Bot會自動幫你提醒使用者重輸入。)
    (4) Require:參數,把使用者的回答,儲存在animal這個參數當中,之後如果要用到就尋找{{animal}}就好囉~
    P.S. 有時候Chatfuel會笨笨的,找不到參數,可是你明明就設置了呀!這時就要用Set Up User Attribute來幫助Chatfuel新增一個參數。

4. Image:練習在這裏放一張圖片

5. Text:你喜歡這張圖嗎?接著直接給這個Text,添加兩個Button,其他的Button name、Block name 依樣畫葫蘆這邊就不多說囉!
補充:這裡就不是我們Welcome message 的 Quick Reply 囉~練習兩種不同的轉換方式,如果你忘記什麼時候要用哪一個,可以回到「三、Build 基本功能講解 — ADD A CARD — /3. QUICK REPLY 搭配 TEXT」,再看一次什麼時候用哪一個比較恰當。

5. Good

Text:「我也挺喜歡的,我今天累了,明天再聊吧!可以跟你分享更多的好圖~」並添加一個Button,這裡把Block name 設定成 Default answer。

6. Bad

  1. Typing:自行設定時間
  2. User Input:「那你喜歡什麼樣的圖呢?」將參數儲存成 {{photo}} 。
  3. Send email:
    (1) Title:Email標題「使用者喜歡的圖」。
    (2) Email Addresses:你的Gmail。
    (3) Email Body:{{first name}} 喜歡 {{photo}} 類型的圖片。
  4. Typing:再放個typing來緩一下~
  5. Text:「很感謝你的回饋,那我們明天再聊,再一起欣賞美圖」 添加一個 Button,同樣指到 Default answer 的 Block。

7. Default answer

  1. Text:「那我們明天再聊囉!」這邊不放置Button,一樣到Quick Reply讓使用者回覆,為什麼呢?因為Text有限制,這些Button的回覆,都要到「其他Block」(一定要輸入Block name,不然就會紅紅的錯誤),但我這邊已經要結束對話了,這樣不是又跳出去了嗎?所以,可以轉個彎用Quick Reply來回答。
  2. Quick Reply:Quick Reply 沒有規定一定要輸入Block name,可以當作單純回覆「好唷知道了」。
  3. Image:再放一個Image來提醒使用者我們會回來,因為Bot儘量不要讓他有「哎呀已經結束!」的感覺,而是「噢好唷下次見!」

8. 小提醒:

補充1:

如果出現這樣的小紅點在Block的角角,代表這個Block有error,要點進去檢查看看。

像這邊,多一欄,我沒有刪除乾淨,Chatfuel會想說,你不是要問問題,為什麼沒問?還有各式各樣的狀況,有時Chatfuel會顯示紅紅的在特定的Card上面,讓你一眼就看到「噢我忘了弄這邊」,不勝枚舉,這邊就不多說囉!


補充2:可以隨時點「TEST THIS CHATBOT」來看看你目前做得狀況如何~

補充3:Disconnect FB 或 Connect FB 都可以到 Configure 來動作。


9. 右上方的 TEST THIS CHATBOT,來測試這個BOT

剛剛開發的功能都成功了嗎?都成功的話,我們來繼續下一個單元,如果有失敗或有問題的話,請留言發問

五、回家作業 (!?


在開始之前,練習Disconnect Fb,重新Connect 到新的Bot

為什麼要這樣呢?

假設有一個機器人,我們要給他腦,他才會動作,如果沒有腦,他只是空有一個軀體,而腦本身,沒有機器人的身體也沒辦法呈現任何事情,現在 A 腦的行為是做伏地挺身, B 腦的行為是做作業,如果我要機器人從做伏地挺身,到做作業,就要先把 A 腦 移走,放上 B 腦,如果同時有兩個腦,那機器人就會呈現混亂狀態。

這是什麼意思呢,機器人在這裡就是「粉專」,腦在這裡則是「Bot」,所以說我們要先把原本的連結斷掉,與新的 Bot 連結在一起,這樣才能利用同樣的粉專來測試。


  1. 先到Configure,中斷 (disconnect) 跟粉專的連結

2. 回到Dashboard

3. Create a blank bot

4. 好了這時你就會有一個新的Bot,先到Configure,重新 connect 跟粉專的連結,就成功轉移囉!


測你的心理性別(點我):

這個心理測驗非常適合拿來練習Chatfuel的邏輯跟各種技巧唷!接下來,花一點時間做這個練習吧!


提示:可以參照以下Bot Structure來創建整個概念。

三大Group

  1. Divide:區分男生女生(GB)、更多測驗(KnowMore 類似前面練習的Default answer,還想知道更多測驗嗎?Coming Soon)
  2. Girl:每一題一個Block,並且把四個結果各放一個Block。
  3. Boy:如Girl,每一題一個Block,並且把四個結果各放一個Block。

More 提示

  1. Welcome message = 把使用者引導到Divide的GB(如下圖)

2. GB = GirlBoy(區分男生女生)

3. KnowMore = 如上述Default answer,最後才會引導到這一頁,來提醒使用者我們會回來,因為Bot儘量不要讓他有「哎呀已經結束!」的感覺,而是「噢好唷下次見!」

4. GQ or BQ = 重複確認(如下圖)

5. G1-G8 or B1-B8 = 測驗中的問題(如下圖)

6. GA1-GA4 or BA1-BA4 = <GirlAns1-GirlAns4> or <BoyAns1-BoyAns4> (如下圖)記得給使用者兩種不同狀態,再玩一次,或返回目錄,KnowMore Block 就會類似「我們之後再帶給您更有趣的心理測驗」、「Coming Soon」等。


P.S. 做完全部男生、女生可能比較繁瑣,可以先針對一個性別完成就ok^^,單純練習用!

做完這個練習,你的技巧就已經足夠熟稔,可以從頭到尾創建一個粉專服務,再接再厲!自己粉專的設計,可以參考簡報的「肆、設計聊天機器人」(P61)。

歡迎至留言處分享你的粉專Bot,讓大家幫你一起測試!


「聊天機器人實作:Chatfuel基礎篇」到這邊告一個段落~如果有幫助的話,請不吝給個拍拍手,之後會再添加進階一點的Chatfuel,甚至是coding 由簡至難的聊天機器人,只要有心,人人都可以是 Bot 神!

我是Sunny,歡迎追蹤與指教!若有任何問題,也歡迎留言。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.