Пример поддержки Instagram в API Messenger — Original Coast Clothing

Original Coast Clothing (OC) — это вымышленный бренд модной одежды. На этом примере демонстрируются основные функции и возможности платформы Instagram, позволяющие создать удобное решение для обслуживания клиентов. Взяв этот демонстрационный пример за основу, любой разработчик может создать прекрасное решение для поддержки Instagram в API Messenger, в котором реализованы как средства автоматизации, так и интерактивная поддержка клиентов. Мы предоставляем открытый исходный код приложения и инструкции по развертыванию решения в локальной среде или на удаленном сервере. Также имеется связанный пример решения на базе Messenger. Чтобы испытать его в действии, отправьте сообщение на страницу @originalcoastclothing или добавьте комментарий к публикации.

Функции платформы

В этом решении используются перечисленные ниже функции платформы. Если вы решите развернуть его на своей Странице, все они будут использоваться в вашем коде.

• Обмен сообщениями

  • Текст, изображения и предварительный просмотр ссылок
  • Общие шаблоны
• Webhooks
• Быстрые ответы
• Профили пользователей
• Частные ответы
• Вводные фразы

Развертывание этого решения в Instagram

Проработав это руководство, вы получите полноценное приложение для Instagram, которое развертывается на вашем сервере и отвечает на сообщения вашего аккаунта.

Оно создано на базе открытого кода. Любой разработчик может взять его за основу для создания собственного решения.

Этот код распространяется по лицензии BSD, поэтому вы можете свободно использовать его в своих целях. Для дальнейшей работы его можно скачать с платформы GitHub.

Требования для развертывания приложения Instagram

• Профессиональный аккаунт Instagram (аккаунт автора или бизнес-аккаунт).
• Страница Facebook, связанная с этим аккаунтом Instagram. У вас должна быть Страница Facebook, которая представляет ваш профессиональный аккаунт Instagram при общении с людьми. Чтобы создать новую Страницу, перейдите по адресу https://www.facebook.com/pages/create. Для начала можно создать тестовую Страницу.
• Аккаунт разработчика Facebook, который может выполнять задачи на соответствующей Странице. Аккаунт разработчика позволяет создавать новые приложения, которые являются основой любой интеграции Facebook. Зарегистрироваться в качестве разработчика можно на сайте Facebook for Developers, нажав кнопку "Начать работу".
• Приложение Facebook с заданными базовыми настройками. Чтобы создать приложение, откройте страницу https://developers.facebook.com/ и нажмите Добавить новое приложение.

Инструкции по настройке

Этот раздел посвящен получению всех маркеров доступа и идентификаторов, которые необходимы приложению на базе Instagram для успешной отправки и получения сообщений. Перед началом работы убедитесь, что выполнены все перечисленные выше требования. На этом этапе у вас уже должны быть Страница, зарегистрированное приложение Facebook и профессиональный аккаунт Instagram.

Если вы только что создали приложение Facebook, скорее всего, оно находится в режиме разработки. Обратите внимание: в этом режиме приложение может отправлять сообщения только пользователям, которые с ним связаны (администраторам, разработчикам и тестировщикам). Вы можете продолжить работу с этим руководством в режиме разработки, однако когда приложение будет готово к публикации, оно должно будет пройти проверку, чтобы получить разрешение instagram_manage_messages. Дополнительные сведения см. в статье о проверке приложения.

1. Настройте интеграцию Instagram согласно инструкциям из документации по началу работы.
2. Добавьте тестовые аккаунты Instagram для тестирования интеграции.

На этом этапе у вас уже должны быть следующие данные:

• ID приложения;
• секрет приложения;
• ID Страницы;
• маркер доступа к Странице;
• аккаунт Instagram, подключенный к Странице;
• аккаунты Instagram, зарегистрированные в качестве тестовых.

Установка

Вам понадобятся:

• Узел 10.x или более поздней версии.
• Сервер для размещения кода. Дополнительные компоненты:

  • локальная служба туннелирования, например ngrok;
  • удаленная серверная служба, такая как Heroku или Glitch;
  • ваш собственный веб-сервер.

Моментальное развертывание с помощью Heroku или Glitch

Решение можно автоматически развернуть в Heroku или Glitch с помощью кнопок ниже. Для завершения настройки вам будет предложено указать необходимые переменные среды.

Локальное развертывание с помощью ngrok

Служба туннелирования делает ваш локальный веб-сервер доступным по внешнему URL, к которому могут обращаться объекты Webhooks Facebook. Существует множество таких сервисов. В этом примере мы используем 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

Сохраните URL-адрес 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

Также убедитесь, что приложение доступно по внешнему URL, полученному на шаге 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.

Переменные среды также можно настроить из командной строки следующим образом:

$ heroku config:set PAGE_ID=XXXX

6. Развертывание кода

$ git push heroku master

7. Просмотр выходных данных журнала

$ heroku logs --tail

Подключение Webhooks

Теперь, когда сервер запущен, путь к вашей конечной точке Webhooks — /webhook. В примере Heroku выше это http://mystic-wind-83.herokuapp.com/webhook.

Настройте Webhook, как указано в руководстве по Webhooks для Messenger (https://developers.facebook.com/docs/messenger-platform/webhooks).

После проверки подписки Webhook подпишитесь на следующие события:

• comments;
• messages;
• messaging_postbacks.

Чтобы протестировать работу Webhooks, используйте кнопки "Тестировать" рядом с событиями, на которые оформлена подписка. Тестовые события должны отобразиться в выходных данных журнала на вашем сервере.

Тестирование конфигурации приложения

После входа в аккаунт с ролью "Тестировщик Instagram" попробуйте отправить сообщение аккаунту Instagram, подключенному к вашей Странице, или оставить комментарий к публикации.

Если вы увидите ответ на свое сообщение в Instagram, это значит, что приложение настроено и готово к работе!

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

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

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

Другие проблемы

Обнаружили ошибку в этом руководстве? Сообщите нам.