Messenger API Instagram 支援體驗範例 - Original Coast Clothing
Original Coast Clothing (OC) 是一個虛構的服裝品牌，旨在展示 Instagram 平台如何透過主要功能提供出色的顧客體驗。此範例可為開發人員提供靈感，讓任何人都能運用自動化功能與即時顧客支援，建立令用戶滿意的 Messenger API Instagram 支援體驗。了解應用程式的開放來源代碼，以及有關如何在本機環境或遙距伺服器上部署體驗的指南。此外，我們亦提供一個 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 進行本機部署
隧道服務會將您的本機 Web 伺服器暴露給一個外部網址，以供 Facebook webhooks 存取。此外還有多項此類服務。在這個例子中，我們會使用 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.安裝相依性項目
在儲存庫目錄中開啟新的終端標籤。
$ 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 指令行介面
如果目錄還不是一個 git 儲存庫，請建立一個：
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3.安裝 Heroku 指令行介面
如果仍未安裝，請下載並安裝 Heroku 指令行介面
4.以指令行介面建立應用程式
$ 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 中的留言後面設定配置變數
您也可以像這樣於指令行設定 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 平台 Webhooks 指南](https://developers.facebook.com/docs/messenger-platform/webhooks)的指示設定 Webhook。
在 Webhook 訂閱生效之後，訂閱以下事件：
- comments
- messages
- messaging_postbacks
點擊訂閱事件旁邊的「測試」按鈕測試 webhook。您應可在伺服器的記錄輸出中看到測試事件。
測試應用程式設定是否成功
您以「Instagram 測試人員」的角色登入帳戶時，可嘗試將訊息傳送至與專頁連結的 Instagram 帳戶，或者在帖子上留言。
如果您在 Instagram 上收到自己的訊息回覆，就表示您已經將應用程式完全設定就緒！就是如此簡單！
疑難排解
應用程式只回覆我，但沒有回覆其他人
Facebook 應用程式可能仍處於開發模式。您可將用戶新增為應用程式測試人員；如果用戶接受邀請，應用程式便可向他們傳送訊息。準備好後，您可以要求獲取 instagram_manage_messages 權限，以回覆其他用戶。
其他問題
這個指南有錯嗎？提出問題，讓我們得知您的想法