Платформа Messenger

Пример решения на базе Messenger: Original Coast Clothing

Original Coast Clothing (OCC) — вымышленный бренд модной одежды. На этом примере демонстрируются основные функции и возможности платформы 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. Получите внешний адрес.

Для получения сообщений необходим доступ к входящим уведомлениям Webhook с наших серверов.

Для этого нужен внешний адрес, который можно получить с помощью 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

Сохраните URL-адрес https внешнего сервера, который перенаправляется на ваш локальный компьютер. В примере выше это https://1c3b838deacb.ngrok.io.

Шаг 4. Настройте Webhooks и профиль Messenger.

Скопируйте пример шаблона среды и добавьте его в приложение

mv .sample.env .env

Добавьте значения среды

Внесите в файл .env ID своего приложения Facebook, ID Страницы, маркер доступа к Странице и секрет приложения. Установите для VERIFY_TOKEN значение в виде произвольной строки. Приложение будет использовать его, чтобы подтверждать вызовы API.

Шаг 5. Запустите приложение.

node app.js

Теперь приложение должно быть доступно в браузере по адресу http://localhost:3000.

Шаг 6. Настройте приложение.

Запустите следующую команду, чтобы настроить подписки приложения на Webhooks и заполнить профиль Messenger Страницы. Обратите внимание: нужно использовать значение VERIFY_TOKEN, добавленное в файл .env.

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 в разделе настроек найдите Config Vars (переменные конфигурации). Укажите ID своего приложения Facebook, ID своей Страницы, маркера доступа к Странице и секрета приложения, а также создайте VERIFY_TOKEN.

Шаг 4. Настройте Webhooks и профиль Messenger.

Теперь доступ к приложению должен быть открыт. Используя маркер VERIFY_TOKEN, созданный в числе переменных конфигурации, отправьте вызов к конечной точке /profile.

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

Необязательно: указанный выше URL возвращает ID загруженных пользователей. Полученные значения 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. Если Webhook получит соответствующее событие, это будет означать, что приложение полностью настроено.

Устранение неполадок

Повторный запуск приложения локально

После запуска ngrok будет предоставлен новый внешний адрес. Обновите значение адреса APP_URL в файле .env и перезапустите сервер NodeJS.

node app.js

Обновите адрес Webhook в настройках приложения Facebook, перейдя по адресу http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>.

Моя Страница отправляет ответы только мне, но не другим пользователям

Вероятно, приложение Facebook по-прежнему находится в режиме разработки. Вы можете добавить какого-нибудь пользователя в качестве тестировщика приложения. Если он примет ваше приглашение, приложение сможет отправлять сообщения и ему. Когда приложение будет готово, вы можете запросить разрешение pages_messaging, которое позволит отправлять ответы любому пользователю.

Дополнительная информация