Facebook Messenger Bot Sample

Quick steps

Read https://developers.facebook.com/docs/messenger-platform/guides/quick-start
登入FB, 建立一個Facebook粉絲專頁以及App
- 建立一個Page
- 建立一個App, 類型為App for messenger, 操作畫面
- 設定這個App會管理上面的Page(Create Page Token), 操作畫面
- 在App Review for Messenger內勾選 pages_messaging 選項, 操作畫面
設定Bot
- git tag: 1_basic_setup
- config/default.json: 輸入appSecret, pageAccessToken, 任意一個validationToken
- 安裝ngrok from https://ngrok.com/, 我們需要一個可以對外的https的節點, 在開發階段可以使用ngrok來當這個gateway
- 啟動ngrok, port傳入local web server的port一致
```
$ ngrok http 5000
```
- 啟動bot, 目前default會listen在5000 port
```
$ npm start
```
- 設定webhook, 操作畫面
  - 把webhook的url設定為 https://.....ngrok.io/webhook, 這個啟動點可以從ngrok的畫面內看到, 注意要加上'webhook' suffix,
  - 設定validationToken: 這是一個任意的字串, 可是必須跟default.json內的一模一樣
- 把webhook跟page連結在一起, 操作畫面
修改粉絲專頁, 在首頁新增傳送訊息按鈕, 就可以開始測試了, 操作畫面, alternatively也可以使用手機測試

請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/thread-settings/greeting-text
- https://developers.facebook.com/docs/messenger-platform/thread-settings/get-started-button
設定後畫面
設定greeting text的code放在 /api/set_greetingtext 內
設定get started button的code放在 /api/set_getstartedbutton 內
使用者按了Get started之後會產生一個postback, 此時可以開始進行對談

使用Button template來提示使用者, 請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/send-api-reference/button-template
Button內使用webview來串連XQ帳號登入畫面
webview內可以運用messenger extension來跟messenger做溝通, 請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/messenger-extension
程式碼放在 send_LinkAccount內, 以及views/login.ejs內的javascript

在輸入框旁邊放置一個按鈕, 擺置常用的功能, 請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/thread-settings/persistent-menu
設定persistent menu的code放在 /api/set_persistentmenu內
設定後畫面
開啟menu畫面

可以在訊息之後夾帶多個按鈕, 讓使用者可以快速挑選(不同於button template), 請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/send-api-reference/quick-replies
請參考 send_QueryStock 內的程式碼
QuickReply畫面

可以傳送carousel式的訊息, 內含多個訊息, 每個訊息內可以有圖片, 文字, 按鈕等功能, 適合傳送新聞/報價類的資料, 請參考以下文件
- https://developers.facebook.com/docs/messenger-platform/send-api-reference/generic-template
請參考 apiSendNews 內的程式碼, 注意Bot端需要紀錄使用者的psid, 使用這個id來主動push訊息
新聞畫面