Messenger 開放平台

Original Coast Clothing 的 Messenger 體驗範例

Original Coast Clothing（OCC）是一個虛構的服裝品牌，旨在展示 Messenger 平台的主要功能。這份指南會說明如何在本機環境或遠端伺服器上下載這個範例應用程式的程式碼，協助您進一步瞭解 Messenger 提供的功能。

為了展示具有多個進入點的完整 Messenger 體驗，這個虛構的商家具備下列功能：

開放平台功能

這個範例應用程式採用下列功能：

在 Messenger 上部署此體驗

本指南結束時，您將能在伺服器上執行完整的 Messenger 應用程式，並回覆測試粉絲專頁的訊息。

準備工作

必備項目：

如果個別擁有開發、暫存和生產環境，則每個環境都需要具備專屬的 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 來取得通往 NodeJS 應用程式的外部 https 位址。

安裝 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 底下的訊息，將 "Hi {{userFirstName}}!Welcome to 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 權限，以便能夠回覆任何用戶。

瞭解詳情