Когда я учился в Z-DEV, моим первым настоящим проектом было создание бота для обмена сообщениями под названием Money Diet, который отправлял пользователям исходящие сообщения из их учетной записи Monzo с указанной даты сброса. Раньше я не слышал о ботах для обмена сообщениями, но после небольшого исследования вскоре понял, какой огромный потенциал они представляют. Боты позволяют разработчикам создавать приложения, которые могут взаимодействовать с 1,2 миллиардами пользователей Messengers как человек.
Этот пост представляет собой руководство по настройке базового бота-мессенджера в Glitch с помощью Node, который будет иметь кнопку Начать работу для запроса взаимодействия с пользователем и будет отправлять пользователю самые популярные посты Hacker News.
Предпосылки
Создание приложения 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?