當 Facebook Messenger Bot 遇上 Firebase Hosting , Cloud Functions

By | 2018-03-01

大家最近有沒有發現,不少 Facebook 粉絲團都推出了 Messenger Bot (自動回覆機器人),如同客服系統電話語音般,一來節省人力,二來可針對客戶常見問題快速回覆。早在 2016 年 Facebook 開發者大會上就發表的API,直到最近才廣泛被應用。

Messenger Bot 如何運作

為什麼 Facebook 會遇上 Firebase 呢,明明是死對頭競爭對手?這就要從 Messenger平台運作方式說起了。如同一般 APP ,使用者的聊天室就像個 Client 端,當訊息發送出去後,Facebook Messenger 平台的核心功能 Webhooks 會根據(Facebook)應用程式訂閱的事件決定要不要傳送事件給粉絲團自己的回呼網址,讓粉絲團所建置的程式決定如何處理收到的訊息,再將訊息、圖片、畫面等資訊回送到聊天室。

回呼網址

提供 Facebook Messenger Webhook 回呼網址必需符合三個要件 :

  1. HTTPS 支援
  2. 有效的 SSL 憑證
  3. 可接受 GET 和 POST 要求的開放連接埠

那麼,回呼網址可佈署在哪裡?

  • 自架伺服器

自行架設 Web Server,開發網頁所使用的程式語言任選,只要符合 Facebook API 規範,能解析事件內容、回覆即可。

  • APP 托管

托管主機提供托管、佈署網站等功能,不須自行架設作業系統,也不須自行建立Web執行環境,只要將開發好的網站上傳到托管主機即可,如GCP 的 Google App Engine、AWS、Raspberry Pi、Facebook官方推薦的Glitch,和近來熱門的Firebase Hosting等等。

Why Firebase ?

本圖截自 https://firebase.google.com/docs/

除去耗費人力、物力及能力的自架伺服器不說,托管主機這麼多,為什麼選擇Firebase?Firebase不僅僅具托管功能,還具有有身份驗證、雲端訊息、資料庫、檔案儲存、….等功能,Firebase 優勢可參考為什麼Firebase這麼紅?從它解決什麼問題開始一文,更多Firebase系列文章請點選這裡。以下就本文所使用的 Hosting 及 Cloud Functions 簡單介紹功能。

Firebase Hosting 

  • 可以設定自己申請的 Domain name,例如 https://litotom.com。 Firebase Hosting 提供 SSL 憑證,並將內容提供給 CDN (Content delivery network)。
  • 可連結到 Firebase Cloud Functions 執行動態網頁。
  • 可自訂錯誤頁面、設定轉址、重寫頁面、透過設定檔設定頁面標頭(headers)、Cache等等。

Cloud Functions

  • Cloud Functions 可自動執行程式,不須設定Web執行環境,除了接收https請求,還可接收Firebase系列功能的觸發程序。
  • 不少使用廣泛的前端框架所開發的網頁程式,如Angular、Vue等,和Polymer 皆可佈署到 Cloud Functions。

倘若除了靜態網站托管外,若希望程式接收到粉絲傳送來的資訊能寫入資料庫供日後分析,或加入會員、串接第三方API等等進階功能,Firebase再適合不過。

準備工作

安裝本機環境

  • 安裝Node.js、firebase-tools、編輯器

請參考使用Firebase Functions前的環境準備與開發工具安裝,Serverless真的來了

  • 建立本機資料夾並初始化Firebase

請選取 Functions 及 Hosting

Facebook Messenger Bot

此安裝分成兩個部份,Functions及Hosting

Facebook Messenger Bot

Facebook Messenger Bot

安裝完成後,樹狀目錄如下

Facebook Messenger Bot

進到 functions 子目錄,安裝 express 及 body-parser 套件

至此,所有安裝已完成,接下來要進入寫接收messenger測試程式

開發Bot

Messenger 平台會在各種互動或事件發生時(包括用戶傳送訊息時),將不同事件傳送至 Webhook,以通知您的 Bot。Messenger 平台會以 POST 要求的方式,將 Webhook 事件傳送至 Webhook。 (來源 : Facebook Messenger 開放平台)

撰寫符合Facebook API 規格程式

  • 接收 POST 要求
  • 解析 Messenger Webhook事件格式
  • 必須回覆 200 OK

以下使用 Facebook 所提供範例測試程式,開啟 functions目錄下的 index.js

<YOUR-VERIFY-TOKEN>為一任意字串,將提供給 Facebook Messenger Webhook 設定回呼網址時使用。

若參考過 Facebook 範例程式,會發現上述程式和範例略有不同,少了一行

因使用 Firebase 執行環境,而非單以 Node.js 執行 index.js ,所以不須另行listen。

Firebase Hosting 進入點

佈署到 Firebase Hosting 的預設對外路徑為 public,預設執行檔案為 public下的 index.html,可於 firebase.json修改進入點。

按 Facebook API 文件,callback網址須可接收 POST / GET 請求,且要能夠解析 Facebook Messenger Webhook 所傳遞的事件內容,故在此我們要將 Hosting 預設進入點改為 index.js 。

開啟 firebase.json,並更改進入點

在 index.js 加入firebase.json所設的進入點

exports.app 即為 firebase.json 所設之”app”

將 functions 設為公開

最後別忘了最重要的,由於 functions 預設為 private,在此要將進入點設為 index.js,故須設為公開,請開啟 package.json,將 private設為 false。

本機測試

啟動Firebase執行環境

Mac 前面請加上 sudo

倘若無法啟動 emulator 訊息如下 :

請按照GCP官方所提供 Troubleshooting,移除並重新安裝 firebase-tools,如下 :

倘若執行後出現 Node 版本不符 :

因 Cloud Functions 僅支援 Node.js v 6.11.5 (Current Version 9.6.0),請切換 Node 版本至 6.11.5。

Firebase 執行環境啟動後畫面如下:

Facebook Messenger Bot

GET

在 browser 網址列輸入 http://localhost:5000/webhook?hub.verify_token=<YOUR_VERIFY_TOKEN>&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe

得到結果如下 :

Facebook Messenger Bot

POST

開啟另一命令提示,輸入下列指令 :

看到 EVENT_RECEIVED 即代表傳送成功,

測試完成後,就可以準備佈署到 Firebase 上了。

版權聲明

本文章版權為郭香宜所有,授權範圍僅限綠豆湯網站使用,除Facebook之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

One thought on “當 Facebook Messenger Bot 遇上 Firebase Hosting , Cloud Functions

  1. Tim Wong

    我是菜鳥一名,只用過Firebase Function 連到 Dialogflow 上,之後連上Messenger.

    想問一下,為什麼要用 Firebase Hosting 呢?可不可以叫 Messenger 直接call Firebase Function 的 link?

    我不需要網頁的,只想Messenger 的 chatbot 跟webhook 聯繫就好了。不可以嗎?

    Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *