Messenger 體驗範例：Original Coast Clothing
Original Coast Clothing (OCC) 是一個虛構的服裝品牌，旨在展示 Messenger 平台的主要功能。本指南會講解如何在本機環境或遙距伺服器下載此應用程式範例的代碼，以進一步了解 Messenger 提供的功能。 為展示具備多個進入點的完整 Messenger 體驗，我們的虛構商家具備以下功能：
|
平台功能
此應用程式範例運用以下功能：
在 Messenger 部署此體驗
閱讀本指南後，您的伺服器將有一個能夠完整運行的 Messenger 應用程式，而且此應用程式可以回覆來自測試專頁的訊息。
準備工作
您需要準備下列項目：
- Facebook 專頁編號：可以是已發佈 Facebook 專頁或測試專頁的編號。
- 專頁存取憑證，由可以在專頁上執行
CREATE_CONTENT任務的用戶所要求。
- GitHub 中的程式碼範例。
如果您有不同的開發、預備和正式發佈環境，每個環境均需有各自的 Meta 應用程式和 Facebook 專頁。
本機環境設定
如要在本機環境中運行範例應用程式，您將需要 NodeJS 10.x 或以上版本。
第 1 步：複製應用程式範例儲存庫
複製本機裝置的 original-coast-clothing 儲存庫。
git clone https://github.com/fbsamples/original-coast-clothing.git cd original-coast-clothing
第 2 步：安裝代碼依賴項目
yarn install
第 3 步：獲取外部地址
為了接收訊息，您需要能夠從我們的伺服器獲得傳入 Webhooks。
如果您需要一個外部位址，可以使用 ngrok，因為此方法可提供外部 https 位址，並為運行應用程式的 NodeJS 建立傳輸隧道。
安裝 ngrok
npm install -g ngrok
使用您偏好的連接埠要求獲取本機伺服器的隧道
ngrok http 3000
畫面會顯示 ngrok 狀態：
Session Status online
Account Redacted (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding https://1c3b838deacb.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
記下轉寄至本機裝置的外部伺服器 https 網址。在以上範例中，網址為 https://1c3b838deacb.ngrok.io。
第 4 步：設定 Webhooks 和 Messenger 個人檔案
複製您應用程式中的環境範本範例
mv .sample.env .env
加入環境值
編輯 .env 檔案以加入 Facebook 應用程式編號、Facebook 專頁編號、專頁存取憑證及應用程式密鑰的值。將 VERIFY_TOKEN 的值設為隨機字串。您的應用程式會使用此字串驗證 API 呼叫。
第 5 步：運行應用程式
node app.js
您現在應該能夠在瀏覽器中透過 http://localhost:3000 存取應用程式
第 6 步：配置您的應用程式
執行以下指令，配置應用程式和專頁 Messenger 個人檔案的 Webhooks 訂閱設定。請注意，您需要使用在 .env 檔案中加入的 VERIFY_TOKEN 值。
http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>
第 7 步：測試應用程式設定
使用 Facebook 或在 Messenger 向專頁傳送訊息；如果 Webhook 收到事件，即代表您已設定好應用程式！
變更代碼
讓我們試試編輯 locales/en_US.json 檔案，將 get_started.welcome 下的訊息「你好，{{userFirstName}}！歡迎來到 Original Coast Clothing……」更改為其他內容。
回到第一個終端，每次更改代碼時，您都需要重新啟動 NodeJS 伺服器。讓我們使用 Ctrl-C 暫停並重新運行伺服器，以重新載入新代碼。
node app.js
開啟 Messenger，向您的專頁傳送訊息「Hi」；您將會收到新訊息。
Heroku 設定
Heroku 實例可用於託管商業應用程式或網站的正式發佈或預備環境。
第 1 步：建立 Heroku 應用程式
git init heroku apps:create # Creating app... done, ⬢ YOUR-APP-NAME # Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git
第 2 步：將代碼部署至 Heroku
heroku git:remote -a YOUR-APP-NAME git push heroku master
第 3 步：設定環境變數
前往「設定」下的 Heroku 應用程式管理中心，找出應用程式的配置變數。加入 Facebook 應用程式編號、Facebook 專頁編號、專頁存取憑證及應用程式密鑰的值，然後建立 VERIFY_TOKEN。
第 4 步：設定 Webhooks 和 Messenger 個人檔案
您現在應該能夠存取您的應用程式。使用您建立為配置變數的 VERIFY_TOKEN，呼叫 /profile 端點。
https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>
選用項目：以上網址將傳回已上載形象的編號。由於這些傳回的編號會儲存在記憶體中，因此您需將其加入為配置變數，以免這些編號在重新載入後消失。
heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME
第 5 步：測試應用程式
使用 Facebook 或在 Messenger 向專頁傳送訊息。如果您的 Webhook 收到事件，即表示您的應用程式已設定完成！
疑難排解
在本機重新運行應用程式
運行 ngrok 後，您將獲得新的外部位址。更新 .env 檔案的 APP_URL 位址，然後運行 NodeJS 伺服器。
node app.js
前往 http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>，以更新 Facebook 應用程式設定中的 Webhook 位址
我的專頁只回覆我，不回覆別人
您的 Facebook 應用程式可能仍然處於開發模式。您可將用戶新增為應用程式測試人員；如果用戶接受邀請，應用程式便可向他們傳送訊息。準備妥當之後，您可要求獲取 pages_messaging 權限，從而能夠回覆所有人。