聊天機器人實作：Chatfuel 基礎篇
前言：
聊天機器人超級潮，是不是該自己也玩個試試？這篇文章會帶你一步一步走過，從對於 Chatbot 毫無概念，到自己做出一支呆萌呆萌的聊天機器人。
2017世界大學運動會時，應景地使用 Chatfuel 建構了 2017世大運知識+ Messenger Chatbot。這個聊天機器人徹頭徹尾都是由 Chatfuel 所建造，除了需熟悉 Chatfuel 的操作，更重要的是 Chatbot 的脈絡與邏輯，這部分不會在此篇文章多提，可以滑到文章底部的簡報稍作了解。畢竟，最重要的是多嘗試，藉此累積思維與經驗。
P.S. 這篇文章是最最最基礎版的 Chatfuel 教學，若您已是入門的大大，可能沒有實質的幫助，文章底部有對於聊天機器人分析與大環境比較的簡報：
🔖 概觀 Chatbot 的古今中外 🔖，也許能讓你獲得一些啟發。
在開始之前…
最近，臉書大哥出了一些隱私權的大包，所以，進入 Chatfuel 後，你會看到以下警示…
帶著忐忑不安的心情，點開「HERE」。
簡單來說，近期不允許建立新的聊天機器人，並且會處處受限，直到 FB 大哥解決了麻煩事。
彷彿可以聽到 Chatfuel 的心聲…
Chatfuel 近期的大更新與優化，就是為了這一輪的收費制度，如今，FB 大哥被揍得冰火五重天，Chatfuel 小弟更是傻眼一隻大貓咪 🙀
別擔心！聊天機器人的潮流仍在，如潮汐起伏，暫緩而已，相信下一輪起身，Chatbot 會以更成熟的姿態立足在這新世代中。
養兵千日，用兵一時《南史·陳暄傳》
屆時，你準備好了嗎？
一、建立粉絲專頁
首先，建立一個測試用粉絲專頁，以防開發中失誤傳送訊息給真正的使用者，悲劇🎃
二、前往 Chatfuel，登入並連結粉專
- 【必備條件】：擁有一個粉專，並且為此粉專的管理員。
- 第一次進入Chatfuel：Chatfuel 會引導你使用FB登入，並給予權限。照著指示，下一步、下一部 etc… (這邊中間的圖就不再贅述)，最後 Chatfuel 會幫你新增一個 Bot，連結好你的粉專。
3. 擁有兩個或兩個以上的 bot：第一次進入 Chatfuel，Chatfuel 會引導你一步一步進行，但第二個以上的 Chatbot，Chatfuel 視你為老手，即要藉由點擊「Create a new bot」來新增一個全新的 Chatbot。
二、Baby Step of Chatfuel
以下步驟，將融合「解說功能」與「實作」。
Chatbot 就像是一個初出茅廬的寶寶 👶，從一個赤裸的小 baby，到跟 FB 媽媽連結，學會說話、走路、甚至有點討人厭頂嘴，這個寶寶都是由我們一手帶大的，你可以決定這個 Chatbot 的人生怎麼發展，它是否可以長長久久地跟其他人互動，或是不人性化地句點別人、被捨棄，它的靈魂皆由你掌控。
In order to 讓你真正了解怎麼從頭到尾完成一個 Chatbot，我們這邊會從「Create a blank bot」開始。️
1. Create a new bot：點選新增聊天機器人的按鈕
2. 建立與連接 Fb
檢視一下，我們剛剛做了哪些事情：
1. 建立一個 Blank Bot
2. Connect To FB 粉專：左側邊欄 Configure
3. 在一個 Card (這是 Text 卡片) 打字
4. 接觸了 Chatbot 搖滾區：左側邊欄 Automate
So far，應該不會太困難，只是你可能還是很困惑：「umm… 所以這麼大一片，這麼多功能，到底分別代表什麼？」別緊張，接下來我們一起來好好瞧一瞧整個區域。
3. Chatfuel 基本區域講解
為了清楚講解，我們將整個頁面切成四大塊：分別為綠區〈導航欄〉、黃區〈左側邊欄〉、紅區〈 Chatbot 邏輯編輯區〉、藍區〈 Chatbot 內容區〉
綠區：導航欄。
手機的 App 中很常見，左邊的返回鍵就會回到這帳號所有建立過的 Chatbot 總覽表，右上可以 Test this bot，以及如果還沒連接粉專會有一個 Conntect to facebook 的按鈕。黃區：左側邊欄。
一覽表。Chatfuel 除了基本的聊天機器人，你儂我儂聊聊天的邏輯，還有其他的延伸功能，如：基本 AI 設置、分析等，將在「 3. 左側邊欄分別是什麼？」進一步說明。紅區：Chatbot 邏輯編輯區。
聊天機器人的運作邏輯，主要大分類為：Group & Sequence，其中又有無數個白色框框（稱作 Block）。這一區佔據了 Chatbot 50% 的運作邏輯。詳細內容，將在「4. Chatbot 邏輯編輯區」解說。藍區：Chatbot 內容區。
簡單來說，就是對話內容囉！這一區則佔據了 Chatbot 剩餘 50% 的運作邏輯。詳細功能，將在「5. Chatbot 內容區」進行講解。
So far，我們概略地瞭解，整個 Chatfuel 的基本區域分別代表什麼，又有什麼用途，接下來，我們來拆分上面黃區〈左側邊欄〉、紅區〈 Chatbot 邏輯編輯區〉、藍區〈 Chatbot 內容區〉。
4. 左側邊欄分別是什麼？
左側邊欄，總共分成七種：Automate、Set Up AI、People、Broadcast、Configure、Grow、Analyze，請搭配著下列簡短的文字與「實際點開每個功能」一起享用 😬 ，Chatfuel 的操作非常直覺，稍微略過即會大大地加深印象。
Automate: Chatbot 邏輯編輯區
Set Up AI: 簡單 AI 設置，像是常見問題關鍵字「客服」，可以直接設置 default 回答。
People: 用戶管理（需付費）
Broadcast: 推播資訊予用戶
Configure: 設置、設定
Grow: Chatbot 成長工具
Analyze: 分析圖表、數據
這篇文章將主要討論 Automate，因為如前所說，此為搖滾區！！！Chatbot 所有邏輯將在這裡實現。另一方面， People、Grow、Analyze 在這篇文章不會特別敘述，這需要一定的用戶數才看得到明顯結果。
So far，我們初步接觸了左側邊欄的每個功能（你應該也有乖乖地每個都點開來看看吧~）。事不宜遲，直接進入搖滾區 YO!
5. Chatbot 邏輯編輯區
先來看一小段實作，Chatbot 邏輯編輯區的使用方式：
延續實作步驟，我們剛剛做了哪些事情：
5. 瞄一眼 Welcome message & Default answer
6. 改名 Group / Sequence、收合 Group / Sequence、複製 Group / Sequence《 Clone 》、刪除 Group / Sequence《 DELETE 》
7. Sample Sequence：更改發佈時間的方式、新增一個 Sequence 的 Block (Group is the same way)
8. 拖拉 Block
So far，我們大概體驗了一下整個 「Chatbot 邏輯編輯區」的使用與新增方式，不外乎是拖拉、新增、刪除等，Chatfuel 以非常直覺的方式，讓開發者能輕鬆掌控過程。
However，還記得高中數學老師說過什麼嗎？ 「觀念最重要！」
因此，我們還是得回到觀念：
剛剛在第一步驟時，從赤裸裸地什麼都沒有，到神奇地按下 Create a new bot 即出現了上述的圖片，但到目前為止，我們還不知道會發生什麼事情，也不知道上圖所代表的意義。（除非你已經迫不及待地測試 Chatbot 了！）接下來，我們一個一個拆解討論。
同樣地，為了清楚講解，我們將整個頁面切成四大塊：
紅區：Welcome message & Default Answer。
1. Welcome message：歡迎訊息，使用者第一次訪問 Messenger Chatbot 時所顯示的對話。
2. Default Answer：默認訊息，使用者做出了出乎預料的反應，如：回應 Chatbot 一個貼圖，這時，Default Answer 的 Block 就會被呼叫。
P.S. 還記得 Block 是什麼嗎？也就是上述白色的框框。藍區：Sample Sequence 〈這只是名稱，輕點可以編輯〉，是兩大分類中（Group、Sequence）的其中一種，主要加強「時間、順序」的處理，如：30 min. 後自動觸發某 block。
綠區：Group of content blocks〈同樣地名稱輕點可以編輯〉，是為兩大分類中（Group、Sequence）的另一種，可以將 Group 當作「資料夾」，Block 則是「檔案」，一個 Group（資料夾） 裡面可以有多個 Block（檔案）。
請你仔細回想你的電腦桌面，是不是有一定數量的資料夾，但想必聰明的你也一定知道資料夾只是一個殼、分類，重點還是檔案本身，因此，Block 才是我們可以多做文章的地方。黃區：點選新增 Group 或 Sequence。
So far，好像有點混亂呀 😖，別擔心，我們來統整一下加強印象吧！
小統整：這一區是為「Chatbot邏輯編輯區」，聊天機器人的運作邏輯有50%在這裡實現，操控「對話的轉換」。那另50%呢？即是下一個主題〈Chatbot內容區〉。這一區分為兩大類：Group & Sequence，其中又有無數個白色框框，稱為「Block」。 1. Group：一般群組，類似「資料夾」的概念，Block 則可說是裡面的「檔案」。 2. Sequence：序列群組，與Group類似，差別在於Sequence可以按照「時間、順序」來呼叫，如：30min.後自動觸發某block。
6. Chatbot 內容區
首先，我們簡單看一下 Chatbot 內容區的基本使用方式，後續再詳細解析：
延續前面實作步驟，我們在這裡做了什麼？
9. 新增一個 Group、一個 Block：更改成中英融合的名稱
10. 添加Card、拖拉Card、刪除Card
11. 《紅色》 看到紅色就是有錯誤，這邊碰到兩個BUG(情境眾多無法詳舉)
(1) Text: 必填文字。
(2) Quick Reply: 只能添加在 text, gallery or image cards 後面。12. ＋：加號後面，還有非常多的 Card 可以使用，但我們在這一篇文章中不會討論到。前往 Chatfuel Doc 查看全部。
So far，我們大概體驗了一下整個 「Chatbot內容區」的基本操作，與「Chatbot邏輯區」相同，不外乎是拖拉、新增、刪除，非常直覺。緊接著，我會詳細解說「Chatbot 內容區」與其主功能。
1. 沿著 Chatbot 內容區滾到最下面
2. 你會看到一整排的 ADD A CARD，每一個按鈕都是一個卡片，依據不同的需求，放置在不同的位置。
🎊 🎊 🎊 🎊 🎊 🎊 中場休息 🎊 🎊 🎊 🎊 🎊 🎊
千言萬語，不如一試。經驗就是犯錯誤的總和。
我們會利用上圖 Text、Typing、Quick Reply、Image、Gallery 製作一個範例的 Chatbot，如果你不熟悉 Chatfuel，請一併跟著實作看看喔！（別擔心，過程簡短易懂 👍 ）
3. Text：可以用來放入字串，並可選擇要不要添加按鈕，按鈕必須導向 ”Blocks” or “URL” or “Phone call” 三者其中一種。
13. 新增一個稱為 “Practice Time!” 的 Group 與一個 “ Hello” 的Block
14. 在 ”Hello” 裡面新增一個 Text 的 Card：添加文字「嗨你好，你是豬嗎？」
15. 新增另外兩個 Block：分別稱為”Pig” 、”No Pig”
16. 回到 “Hello”，添加兩個按鈕(藍色為按鈕)，新增「文字」與「點選後前往的 Block 名稱」：
(1) 「你才豬勒！」《文字》：點擊後前往 ”No Pig”
(2) 「我是豬謝謝」《文字》：點擊後前往 ”Pig”
Question: 如前所說，Text 可以用來放入字串，並可選擇要不要添加按鈕，按鈕必須導向 ”Blocks” or “URL” or “Phone call” 三者其中一種。那如果我只是想要使用者的簡單回答呢？情境：
Bot：「再次確認，請問 09XXXXXXXX 是您的手機號碼嗎？」
User：「確認。」 or 取消
在此情況，「確認」需要繼續在同一個Block繼續進行對話，「取消」才需導向另一個Block。那這時應該怎麼辦呢Answer: 適用 Quick Reply。後面我們會再討論到。
4. Typing：打字中。讓使用者覺得你是真人，還在打字中… 同時控制訊息，不跳那麼快，給人壓迫感，其中秒數可自己調整。
17. 前往 “Pig”：新增一個 Typing 跟 Text 「太好了！遇到同類了！！！」
18. 前往 “No Pig”：這次，優先新增一個 Text 「好麻對不起，別生氣氣麻」，再新增 Typing，並練習使用拖拉將 Typing 放置在正確位置，另外，調整一些秒數。
5. 測試時間A：~ TEST THIS CHATBOT
19. 點選 TEST THIS CHATBOT
20. Ummm… Where’s my pig??? 出了點狀況，Chatbot 並未如我們所預期，跳出剛剛的 Practice Time 裡面的內容。
6. 解 BUG：事出必有因，”PRACTICE TIME!” 這個資料夾被獨立了，並未與初始化的 Welcome Message 產生連接，也就是說， PRACTICE TIME 沒有進入點，接下來我們替 PRACTICE TIME 建造一個入口。
21. 替 Practice Time 資料夾建立接口：接口指向 Hello 這個 Block，還記得前面所說嗎？Practice Time 只是「資料夾 (Group)」，存放「檔案 (Block)」 的地方，真正有功用的是 Block ，而非 Group。
7. 測試時間B：~ TEST THIS CHATBOT
22. 測試成功了！！！這邊我們可以看到剛剛建立的邏輯，雖然不是很正規的邏輯 😜，並且，重複測試之後，會存留之前的對話紀錄，因此，務必在確認測試完成，再發布 Chatbot，以防使用者各種黑人問號❓
8. Image 圖片：加油添醋，營造生動活潑的小機器人。
23. 添加圖片：不多說，Simple as Fx 😆
9. Quick Reply & Image Gallery：最後練習 Quick Reply (短回覆) & Image Gallery (照片集)
24. 添加 Quick Reply：「原諒他」，還記得之前哪裡也會有 Button 嗎？沒錯，就是 Text！
「Text」的按鈕與「Quick Reply」的按鈕不同，Quick Reply 不需要非得導引到另一個 Block 不可，而 Text 必須從 ”Blocks” or “URL” or “Phone call” 三者擇其一。因此，Quick Reply 可以當作簡單版的回覆。25. 添加 Image Gallery：也非常直觀這邊就不多說了，唯一值得注意的是 Heading 是紅字的，代表是為必填項目，Description 與 Url 則是選填。
10. 測試時間C：~ TEST THIS CHATBOT ( Final Test )
結語：
基礎實作，在這邊先告個段落，相信你已經對操作有基本的瞭解。
🥇🥇🥇🥇🥇🥇🥇🥇 Homework 🥇🥇🥇🥇🥇🥇🥇🥇
請打開連結：🔖 概觀 Chatbot 的古今中外 🔖
瀏覽過前面章節，至第五章 Chatbot 實作，依照文章三大步驟：需求分析、功能地圖、對話流程，建構屬於你的「履歷 Bot」。
在職場中，別出心裁的履歷，帶給你的絕對是加分效果，用心製作，想像你的使用者就是 HR 或 CEO，你希望帶給他什麼樣的體驗，又如何引導使用者步步朝向你建構的畫面而去，展現出你最精彩的一面。
相信經過這次練習，便能熟撚 Chatfuel 的大多功能（記得多加嘗試，以上沒有提及的功能，有些也非常實用喔）。
若這篇文章對你有所啟發或幫助，請不吝給個拍手 👏👏👏
