適用於 Instagram 的 Messenger API 支援體驗範例 – Original Coast Clothing
Original Coast Clothing（OC）是一個虛構的服裝品牌，旨在展示 Instagram 平台的主要功能，以提供優質的顧客體驗。透過此示範所提供的靈感，任何人都可以利用自動化和即時客戶支援團隊，打造愉快的適用於 Instagram 的 Messenger API 支援體驗。我們有提供應用程式的開放原始碼，以及有關如何在本機環境或遠端伺服器上部署此體驗的指南。此外，我們也提供對應的 Messenger 體驗範例。 現在就傳訊至 @originalcoastclothing 或在貼文留言試試看。 |  |
在 Instagram 部署此體驗
本指南結束時，您將能在伺服器上執行完整的 Instagram 應用程式，從您的帳號回覆訊息。
提供此體驗動力的程式碼是開放原始碼，任何人都可以輕鬆地開始開發優質的傳訊體驗。
該程式碼是依據 BSD 授權條款發行，可讓您針對需求免費使用。程式碼由 GitHub 代管並供您進一步參考。
部署 Instagram 應用程式的必備條件
- Instagram 專業帳號（創作者或企業帳號）。
- 連結該 Instagram 帳號的 Facebook 粉絲專頁。請確認您有 Facebook 粉絲專頁，因為聯繫用戶時，該粉絲專頁即代表您的 Instagram 專業帳號身分。若要建立新的粉絲專頁，請前往 https://www.facebook.com/pages/create，或是先設定測試粉絲專頁再開始。
- 能夠在您的粉絲專頁執行任務的開發人員帳號。開發人員帳號可建立新應用程式，這些新應用程式是任何 Facebook 整合的核心。若要註冊成為開發人員，請前往 Facebook Developers 網站，然後點擊「開始使用」按鈕。
- 已完成「基本」設定的 Facebook 應用程式。若要建立新的應用程式，請前往 https://developers.facebook.com/ 並點擊新增新應用程式
設定步驟
本節的目標是收集能夠讓 Instagram 應用程式成功傳送和接收訊息所需要的所有存取權杖和編號。開始之前，請務必先完成上述所有必備條件。此時，您應該已經擁有粉絲專頁、已註冊的 Facebook 應用程式和 Instagram 專業帳號。
如果您剛建立了新的 Facebook 應用程式，它很可能處於開發模式。請注意，此模式下的應用程式僅允許傳送訊息給連結至應用程式的用戶（管理員、開發人員和測試人員）。您可以在此模式下繼續使用本指南，但是當您的應用程式準備好公開發佈時，應用程式就必須進行 instagram_manage_messages 權限的應用程式審查。如需詳細資訊，請參閱應用程式審查
- 按照開始使用文件設定 Instagram 整合。
- 新增幾個您要用於測試這項體驗的 Instagram 測試帳號。
此時，您應該已經擁有下列各項
- 應用程式編號
- 應用程式密鑰
- 粉絲專頁編號
- 粉絲專頁存取權杖
- 連結至粉絲專頁的 Instagram 帳號
- 註冊為測試帳號的 Instagram 帳號
使用 Heroku 或 Glitch 一鍵部署
您可以使用下列按鈕，自動將此體驗部署至 Heroku 或 Glitch。系統會提示您輸入所需的環境變數來完成設定。
部署在 Heroku 上部署在 Glitch 上使用 ngrok 部署在本機
通道服務會將您的本機網站伺服器公開至 Facebook Webhook 可以連結的外部網址。這類服務很多。在此範例中，我們會使用 ngrok。
1.複製存放庫
將以下存放庫複製到本機電腦：
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2.安裝通道服務
如果尚未安裝，請下載或利用命令列安裝 ngrok：
$ npm install -g ngrok
在此存放庫的目錄中，使用偏好的連接埠要求前往本機伺服器的通道
$ ngrok http 3000
畫面應該會顯示 ngrok 狀態：
Session Status online
Account Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln 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
記下轉送至本機電腦之外部伺服器的 https 網址。在上述範例中，此網址為 https://1c3b838deacb.ngrok.io。
3.安裝相依項目
開啟新的終端機頁籤，也是在 repo 目錄中。
$ npm install
或者，您可以使用 Yarn：
$ yarn install
4.設定 .env 檔案
將 .sample.env 檔案複製到 .env
$ cp .sample.env .env
編輯 .env 檔，加入您的應用程式和粉絲專頁的所有值。
5.在本機執行您的應用程式
$ node app.js
您現在應能夠在瀏覽器中輸入 http://localhost:3000 後進入應用程式預設頁面
請確認您也可以在步驟 2 中的外部網址存取應用程式。
使用 Heroku 部署
1.複製存放庫
將以下存放庫複製到本機電腦：
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2.安裝 Heroku CLI
如果目錄還不是 git 存放庫，請建立存放庫：
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3.安裝 Heroku CLI
如果尚未安裝，請下載並安裝 Heroku CLI
4.從 CLI 建立應用程式
$ heroku apps:create
Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
記下應用程式的名稱。在此範例中，其名為 mystic-wind-83。
5.設定您的環境變數
在 Heroku 應用程式主控板上找出您的應用程式，並按照 .sample.env 檔案中的註解設定 config vars
或者，您可以利用命令列設定 env 變數，如下所示：
$ heroku config:set PAGE_ID=XXXX
6.部署程式碼
$ git push heroku master
7.檢視記錄匯出項目
$ heroku logs --tail
連結您的 Webhook
現在您的伺服器已在執行中，Webhook 端點位於路徑 /webhook。在上述的 Heroku 範例中，此路徑會是 http://mystic-wind-83.herokuapp.com/webhook。
按照 [Messenger 開放平台 Webhook 指南](https://developers.facebook.com/docs/messenger-platform/webhooks 設定 Webhook
Webhook 訂閱驗證過後，訂閱下列事件：
- 註解
- 訊息
- messaging_postbacks
點擊所訂閱事件旁的「測試」按鈕，以測試 Webhook。您應會在伺服器的記錄匯出項目中看到這些測試事件。
測試您的應用程式設定是否成功
以「Instagram 測試人員」角色登入後，嘗試傳送訊息至連結您的粉絲專頁的 Instagram 帳號，或是在貼文留言。
如果您在 Instagram 中看到對您訊息的回覆，表示您已完成設定應用程式！大功告成！
疑難排解
應用程式只回覆我，而不回覆其他人
Facebook 應用程式可能仍處於開發模式。您可以新增某用戶為應用程式的測試人員，如果對方接受，應用程式將能夠向對方傳送訊息。準備就緒後，您可以要求 instagram_manage_messages 權限，這樣就能回覆任何用戶。
其他問題
本指南的內容是否有誤？請提出問題讓我們知道