Когда я учился в Z-DEV, моим первым настоящим проектом было создание бота для обмена сообщениями под названием Money Diet, который отправлял пользователям исходящие сообщения из их учетной записи Monzo с указанной даты сброса. Раньше я не слышал о ботах для обмена сообщениями, но после небольшого исследования вскоре понял, какой огромный потенциал они представляют. Боты позволяют разработчикам создавать приложения, которые могут взаимодействовать с 1,2 миллиардами пользователей Messengers как человек.

Этот пост представляет собой руководство по настройке базового бота-мессенджера в Glitch с помощью Node, который будет иметь кнопку Начать работу для запроса взаимодействия с пользователем и будет отправлять пользователю самые популярные посты Hacker News.

Предпосылки

  • Знание JavaScript
  • Бесплатная учетная запись Glitch + учетная запись News API

Создание приложения Facebook

Выполните следующие действия, чтобы завершить настройку Facebook для вашего бота:

  • Зарегистрируйтесь как разработчик на Facebook для разработчиков
  • Создайте идентификатор нового приложения ( или Добавить новое приложение, если оно уже зарегистрировано).
  • Создайте новую страницу для своего бота, зайдя в Facebook и нажав Страницы / Создать страницу.
  • Выберите Добавить продукт на панели управления приложения и выберите Приступить к работе для Messenger.

Настройка Webhooks

Чтобы настроить веб-хуки, сначала начните ремикс нашего проекта Glitch в новой вкладке, щелкнув эту ссылку.

Чтобы связать своего бота со своей страницей Facebook, вам необходимо добавить свой токен страницы, Verify Token и секрет приложения в .env файл вашего проекта Glitch. Следующие шаги расскажут вам, как получить каждый из них:

Токен доступа

  • Перейдите на страницу своего приложения на сайте Facebook для разработчиков и выберите Messenger среди продуктов слева.
  • Прокрутите вниз до Генерация токенов и выберите страницу, которую вы создали для своего бота, в раскрывающемся списке. Будет сгенерирован ваш токен доступа к странице.
  • Добавьте это в свой файл .env в своем ремиксированном проекте Glitch.

Секрет приложения

  • Выберите Панель управления на странице своего приложения.
  • Выберите Показать секрет приложения и введите свой пароль Facebook.
  • Добавьте секрет своего приложения в файл .env

Проверить токен

  • Ваш Verify Token может иметь любое строковое значение, которое вам нравится, и используется для проверки соединения между Facebook и вашим ботом. В нашем коде мы используем «z-dev-demo»
  • Добавьте выбранный вами токен подтверждения в файл .env.

После того как вы добавите эти три бита данных, ваш файл .env должен выглядеть примерно так:

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

В приведенном выше коде используется модуль messenger-bot, который мы используем в остальной части руководства. Ознакомьтесь с документацией здесь.

Чтобы завершить настройку веб-перехватчиков:

  • Выберите Messenger в Продукты в левой части страницы приложения.
  • Прокрутите вниз до Веб-перехватчиков и выберите Настроить веб-перехватчики.
  • В диалоговом окне Новая подписка на страницу скопируйте и вставьте URL-адрес вашего проекта Glitch в поле URL-адрес обратного вызова.
  • Введите Verify Token, который вы выбрали для своего бота, в .env.
  • Выберите сообщения и сообщения_постбэки в Полях подписки.
  • Выберите Подтвердить и сохранить.

Затем, чтобы подписаться на вашу страницу:

  • Выберите Messenger на правой панели навигации в разделе Продукты.
  • В разделе Веб-перехватчики выберите страницу, которую вы создали для своего приложения, и нажмите «Подписаться».

Теперь ваша страница в Facebook и бот должны быть связаны!

Добавление кнопки "Приступить к работе"

Кнопка Начать отображается при первом открытии беседы между пользователем и вашим ботом и является отличным способом инициировать взаимодействие. Когда пользователь нажимает кнопку «Начать», Facebook отправляет обратную передачу с идентификатором пользователя и полезной нагрузкой, определенной разработчиком.

Чтобы добавить кнопку начала работы, сделайте запрос на публикацию ниже в терминале. Это говорит Facebook, что нужно добавить кнопку «Начало работы» вашему боту всякий раз, когда пользователь начинает новый разговор.

curl -X POST -H "Content-Type: application/json" -d '{ 
  "get_started":{
    "payload":"GET_STARTED_PAYLOAD"
  }
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Вам нужно будет вставить токен доступа к странице, но полезную нагрузку можно оставить как есть.

Приведенный ниже код добавляет слушателя к событию обратной передачи в проекте Glitch. Обратный вызов прослушивателя проверяет полезные данные для сообщения GET_STARTED_PAYLOAD, затем добавляет сведения о пользователях в локальную базу данных и отправляет пользователю сообщение, уведомляющее их об этом.

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

Новости Бот

В этом разделе объясняется, как бот отправляет пользователю самые популярные сообщения с веб-сайта Hacker News, когда они отправляют сообщение «новости».

Существует несколько различных шаблонов сообщений, которые вы можете отправлять пользователям, а журнал Chatbot Magazine предоставляет отличную шпаргалку, объясняющую, как работает каждый из них. В нашем проекте Glitch используется шаблон списка, поскольку он позволяет отображать несколько элементов, каждый из которых содержит заголовок, подзаголовок, изображение и кнопку URL-адреса, что идеально подходит для отображения сообщений.

Информацию о том, как форматировать шаблоны сообщений, можно найти в Справочнике по API отправки Facebook.

В проекте Glitch приведенный ниже код добавляет функцию «отправить список новостей»:

Этот код выполняет три функции. Первый - это добавление слушателя к событию message с проверкой обратного вызова для сообщения ‘news’ или ‘News’.

GET-запрос к News API затем возвращает объект, состоящий из десяти первых постов из Hacker News. В функции обратного вызова запроса отображается объект возвращенных сообщений, и каждое сообщение преобразуется в элемент, готовый для сообщения списка.

Шаблон сообщения списка позволяет отправлять только четыре элемента, поэтому возвращаемый массив элементов сокращается с десяти до четырех. Подробнее о формате шаблона списка читайте в Справочнике по шаблону списка.

Последняя часть кода отправляет список пользователю с помощью функции bot.sendMessage (…) . Вложение сообщения соответствует формату шаблона списка и дополняется массивом элементов, созданным на предыдущем шаге.

Чтобы ваш проект Glitch заработал, добавьте ключ News API к константе apiUrl в проекте Glitch, затем отправьте сообщение ‘news’ своему боту. Сменить источник новостей так же просто, как изменить GET-запрос!

Этот метод также можно легко адаптировать для выполнения других задач. Почему бы не отправить рекомендованных пользователем исполнителей с помощью Spotify API или сообщить людям, какие каналы сейчас популярны с помощью YouTube API?