Original Coast Clothing의 샘플 Messenger 경험
Original Coast Clothing(OCC)은 Messenger 플랫폼의 주요 특징을 보여주기 위해 만든 가상 의류 브랜드입니다. 이 가이드에서는 Messenger가 제공하는 기능에 대해 자세히 알아보기 위해 로컬 환경이나 원격 서버에서 이 샘플 앱의 코드를 다운로드하는 방법을 설명합니다. 여러 개의 진입점으로 완전한 Messenger 경험을 보여주기 위해 이 가상 비즈니스에는 다음과 같은 기능이 있습니다.
|
플랫폼 기능
이 샘플 앱은 다음 기능을 활용합니다.
Messenger에 해당 경험 배포
이 가이드의 과정을 모두 완료하면 서버에서 실행되고, 테스트 페이지에서 전송된 메시지에 응답하는 완전한 Messenger 앱이 구현됩니다.
시작하기 전에
다음과 같은 항목이 필요합니다.
- Facebook 페이지 ID(라이브 Facebook 페이지 또는 테스트 페이지의 ID일 수 있음)
- 사용자가 요청한 페이지 액세스 토큰(해당 사용자는 페이지에서
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를 사용합니다. 이는 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 URL을 메모합니다. 위의 예시에서는 https://1c3b838deacb.ngrok.io입니다.
4단계. Webhooks 및 Messenger 프로필 설정하기
앱에 샘플 환경 템플릿 복사
mv .sample.env .env
환경 값 추가
.env 파일을 수정하여 Facebook 앱 ID, Facebook 페이지 ID, 페이지 액세스 토큰 및 앱 시크릿 코드에 대한 값을 추가합니다. 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에서 페이지로 메시지를 전송합니다. Webhooks가 이벤트를 수신하면 앱 설정이 완료된 것입니다!
코드 변경
locales/en_US.json 파일을 수정하고 get_started.welcome의 메시지를 '안녕하세요, {{userFirstName}} 님! Original Coast Clothing에 오신 것을 환영합니다...'에서 다른 말로 변경합니다.
첫 번째 터미널로 돌아옵니다. 코드를 바꿀 때마다 NodeJS 서버를 다시 시작해야 합니다. Ctrl-C로 서버를 정지했다가 다시 실행해 새 코드를 다시 읽어들입니다.
node app.js
Messenger를 열고 페이지에 '안녕하세요'라는 메시지를 보내면 새 메시지가 수신되어야 합니다.
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 앱 대시보드에서 앱의 Config Vars를 찾습니다. Facebook 앱 ID, Facebook 페이지 ID, 페이지 액세스 토큰 및 앱 시크릿 코드에 대한 값을 추가하고 VERIFY_TOKEN을 만듭니다.
4단계. Webhooks 및 Messenger 프로필 설정하기
이제 앱에 액세스할 수 있습니다. Config Vars로 생성된 VERIFY_TOKEN을 사용하여 /profile 엔드포인트를 호출합니다.
https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>
선택 사항 위의 URL은 업로드된 가상 사용자의 ID를 반환합니다. 이 ID는 메모리에 저장되므로 Config Vars로 반환된 ID를 추가해야 다시 읽어들인 후에도 유지가 가능합니다.
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에서 페이지로 메시지를 보냅니다. Webhooks가 이벤트를 수신하면 앱 설정이 완료됩니다!
문제 해결
로컬에서 앱 다시 실행
ngrok를 실행한 후에 새로운 외부 주소가 제공됩니다. .env 파일에서 APP_URL 주소를 업데이트한 후 NodeJS 서버를 실행합니다.
node app.js
http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>에서 Facebook 앱 설정에 대한 Webhook 주소를 업데이트합니다.
페이지에서 나를 제외한 다른 사람에게 답장하지 않음
Facebook 앱이 아직 개발 모드일 가능성이 큽니다. 누군가를 앱의 테스터로 추가하고 그 사람이 이를 수락하면 앱은 해당 테스터에게 메시지를 보낼 수 있습니다. 준비되고 나서 pages_messaging 권한을 요청하면 누구에게나 답장을 보낼 수 있게 됩니다.