Как создать бота Facebook Messenger (руководство)

2019

Функция «ботов-мессенджеров» в Facebook не нова, и множество удивительных ботов уже существует. Тем не менее, ресурсы, касающиеся того, как именно создать своего собственного бота, скудны и не имеют объяснения для людей, которые плохо знакомы с API Graph Facebook. Боты Messenger теперь также требуют, чтобы вы использовали URL-адрес обратного вызова через веб-крюк с защитой SSL (подробнее об этом позже), а настройка SSL не для всех, а также стоит денег.

В этой статье я проведу вас через весь процесс создания простого бота Facebook messenger, потому что собственная документация Facebook довольно плохо объяснена. Мы создадим облачное приложение, которое использует протокол https, закодируем бота в Node.js (который является javascript, языком на стороне сервера), используем git для отправки кода в облачное приложение и протестируем его в Facebook Messenger.

Настройка бота

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

Как только вы закончите, вы можете продолжить настройку бота. Следуйте инструкциям ниже:

1. Запустите терминал.

2. Вам нужен отдельный каталог для хранения вашего кода.

Создать новый каталог
mkdir testbot

Измените свой рабочий каталог на каталог, который вы только что создали
cd testbot

3. Затем инициализируйте приложение Node.
npm init

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

4. Установите пакеты
npm install express body-parser request --save

Команда запустится и выдаст несколько предупреждений; игнорируй их.

5. В Finder откройте созданный вами каталог « testbot » и найдите файл с именем « package.json »; откройте это в редакторе как Sublime Text.

6. В этом файле нам нужно добавить строку
"start": "node index.js"

Не забудьте добавить «, » в конце предыдущей строки.

7. Затем создайте новый файл в Sublime Text и вставьте в него следующий код:

[JS]

var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('request');
var app = express ();

app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', function (req, res) {
res.send ('Это сервер TestBot');
});
app.get ('/ webhook', function (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query [ 'hub.challenge']);
} еще {
res.send («Неверный токен проверки»);
}
});

[/ JS]

Сохраните этот файл как index.js

Примечание. В строке 13 значение hub.verify_token установлено как « testbot_verify_token», запомните это значение, так как оно будет использоваться при создании веб-крючка в Facebook.

Создать Git-репозиторий

Теперь, когда мы настроили обработку обратного вызова нашего бота, нам нужно отправить код в Heroku. Для этого нам нужно создать репозиторий git в нашем каталоге.

Примечание: «git» - это система контроля версий файлов и программного кода. Вы можете прочитать больше об этом в Википедии.

Создать git-репозиторий легко, и требуется всего пара команд Terminal.

Примечание. Убедитесь, что вы находитесь в каталоге « testbot » в Терминале. Вы можете сделать это, набрав команду pwd в Терминале.

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

1. git init

2. git add .

3. git commit -m "Register Facebook Webhook"

Настройка Heroku

Прежде чем мы перейдем на страницы разработчиков Facebook, нам нужен URL обратного вызова, с которым Facebook может поговорить. Этот URL должен использовать протокол https, что означает, что нам нужно установить сертификат SSL на нашем веб-сайте; но это руководство для новичков по работе с ботами в Facebook, поэтому давайте не будем усложнять ситуацию. Мы будем использовать Heroku для развертывания нашего кода. Heroku предоставляет вам https URL для ваших приложений и предлагает бесплатный план, который отвечает нашим (самым базовым) требованиям.

Зайдите на сайт Heroku и зарегистрируйтесь.

Примечание. В поле «Выберите свой основной язык разработки» используйте «Я использую другой язык».

Как только вы закончите с этим, установите набор инструментов Heroku для вашей ОС (Mac для меня) и установите его. Это даст вам доступ к Heroku в вашем терминале (или в командной строке в Windows).

Далее мы создадим приложение на Heroku, которое будет содержать весь код для нашего бота. Следуйте инструкциям ниже:

1. Запустить терминал

2. Типа heroku login

Вам будет предложено ввести адрес электронной почты и пароль.

Введите адрес электронной почты, нажмите Enter; затем введите свой пароль, нажмите Enter.

Вы будете авторизованы в Heroku

3. Типа heroku create

Это создаст приложение на Heroku и предоставит вам гиперссылку. Обратите внимание, что ссылка использует протокол https. Легко, правда?

4. Теперь вы можете отправить код своего приложения в Heroku
git push heroku master

5. Как только это будет сделано, ваше приложение станет активным, и вы сможете перейти по ссылке в браузере, чтобы убедиться, что все работает нормально. Он должен открыть веб-страницу с надписью « Это сервер TestBot ».

Настройка Facebook

Пришло время подключить нашего бота к Facebook! Вам нужно будет создать новую страницу Facebook или использовать существующую, которая принадлежит вам. Я покажу вам, как продолжить, создав новую страницу Facebook.

1. Зайдите в Facebook и создайте новую страницу.

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

2. Следующие шаги, которые показывает Facebook, являются необязательными и могут быть пропущены.

3. Затем перейдите на сайт разработчиков Facebook.

В правом верхнем углу наведите курсор мыши на « Мои приложения », а затем нажмите « Добавить новое приложение » в раскрывающемся меню.

Нажмите « Основные настройки », когда Facebook предложит вам выбрать платформу.

4. Заполните данные для вашего имени приложения и контактного адреса электронной почты.

Выберите « Приложения для страниц » в категории.

Нажмите « Создать идентификатор приложения ».

5. Вы попадете на панель инструментов для своего приложения. На боковой панели перейдите к « + Добавить продукты » и выберите « Messenger », нажав кнопку « Начать ».

6. Выберите « Setup Webhooks ».

7. Заполните обязательные поля, заменив «URL-адрес обратного вызова» на URL-адрес приложения Heroku, проверьте токен токеном, используемым в файле index.js, и выберите следующие поля подписки:

message_deliveries

Сообщения

message_optins

messaging_postbacks

Примечание. Убедитесь, что вы добавляете « / webhook » к URL-адресу обратного вызова, чтобы index.js выполнял требуемую функцию, когда Facebook пытается пропинговать URL-адрес, он может проверить «Проверка токена».

8. Нажмите « Подтвердить и сохранить ».

9. В разделе « Создание токена » нажмите « Выбрать страницу » и выберите страницу, созданную ранее.

Это создаст « токен доступа к странице », сохраните его где-нибудь; это понадобится тебе позже.

10. Затем вам нужно будет выполнить запрос POST к вашему приложению, используя токен доступа к странице, сгенерированный на последнем шаге. Это легко сделать в Терминале. Просто запустите следующую команду, заменив PAGE_ACCESS_TOKEN на созданный вами токен доступа к странице .

curl -X POST «//graph.facebook.com/v2.6/me/subscribeed_apps?access_token=PAGE_ACCESS_TOKEN»

Вы должны получить ответ « Успех » в Терминале.

Больше настроек Heroku

Да, мы еще не закончили. Не почти.

1. Перейдите на веб-сайт Heroku и войдите в систему, используя свой адрес электронной почты.

2. Найдите свое приложение в «панели управления» и нажмите на него.

3. Перейдите на вкладку «Настройки».

4. Нажмите « Показать настройки »

5. Добавьте PAGE_ACCESS_TOKEN как « config var » и нажмите « Добавить ».

Кодирование актуального бота

Теперь, когда мы закончили с тяжелой работой, мы можем сосредоточиться на том, что действительно важно: заставить бот отвечать на сообщения. Для начала, мы просто спроектируем бота, который просто повторяет сообщения, которые он получает. Как оказалось, эта простая задача требует значительного количества кода для функционирования.

1. Кодирование прослушивателя сообщений

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

В файле index.js добавьте следующий код:

[JS]

app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});

[/ JS]

Эта функция выполняет проверку принятых сообщений, а затем проверяет, есть ли в сообщении текст. Если он находит текст в полученном сообщении, он вызывает функцию sendMessage (будет показано позже), передавая идентификатор отправителя и текст для отправки обратно. Важно понимать следующие значения и их значение:

event.message.text - текст, полученный в сообщении. Например, если кто-то отправит сообщение «Hello» нашему боту, значением event.message.text будет «Hello».

event.sender.id - это идентификатор человека, который отправил сообщение боту. Это необходимо для того, чтобы бот знал, кому адресовать ответ.

2. Кодирование функции sendMessage

Теперь давайте закодируем функцию «sendMessage».

[JS]

[/ JS]

Функция sendMessage принимает два параметра:

recipientId

сообщение

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

Сообщение является фактическим текстом, который должен быть отправлен в ответе.

3. Внесение изменений в Heroku

Если вы выполнили описанные выше шаги, ваш бот должен иметь возможность отобразить полученный текст. Но сначала вам нужно отправить изменения в приложение, размещенное на Heroku. Для этого выполните следующие действия:

1. Запустите терминал.

2. Измените каталог на ваш каталог testbot
cd testbot

3. Выполните следующие шаги:

мерзавец добавить.

Примечание: в конце «git add» стоит «.»

git commit -m «Первый коммит»

гит пуш герой мастер

4. Теперь отправьте сообщение на свою страницу, и бот вернет вам сообщение.

Условные ответы, иначе говоря, умнее бота

Мы можем использовать сопоставление текста, чтобы наш бот Facebook Messenger отвечал по определенным специальным ключевым словам.

Для этого нам нужно добавить еще одну функцию. Я называю это «условными ответами», но вы можете выбрать любое имя, которое вы предпочитаете.

1. Кодирование функции условных ответов

[JS]

функция conditionalResponses (receientId, text) {
текст = текст || "";

var what = text.match (/ what / gi); // проверяем, содержит ли текстовая строка слово «что»; игнорировать регистр
varGadget-Info.com = text.match (/ beebom / gi); // проверяем, содержит ли текстовая строка слово "beebom"; игнорировать регистр
var who = text.match (/ who / gi); // проверяем, содержит ли текстовая строка слово "who"; игнорировать регистр
var you = text.match (/ you / gi); // проверяем, содержит ли текстовая строка слово «ты»; игнорировать регистр

// если текст содержит слова "что" и "beebom", сделайте это:

if (what! = null &&; Gadget-Info.com! = null) {
сообщение = {
текст: «Beebom - это сайт, предлагающий технические ресурсы. Добро пожаловать».
}
sendMessage (получатель, сообщение);
вернуть истину;
}

// если текст содержит «кто» и «вы», сделайте это:
if (who! = null && you! = null) {
сообщение = {
текст: «Меня попросили не обсуждать мою личность в Интернете».
}
sendMessage (получатель, сообщение);
вернуть истину;
}

// если ничего не найдено, вернуть false, чтобы продолжить выполнение внутренней функции.
вернуть ложь;
};

[/ JS]

В строках с 4 по 7 мы определили переменные в зависимости от соответствия полученной строки определенным словам. Лучшая часть использования «text.match ()» заключается в том, что он использует регулярные выражения (обычно называемые регулярными выражениями, подробнее здесь). Это хорошо для нас, потому что это означает, что до тех пор, пока даже часть слова в полученном тексте совпадает с любым из слов, упомянутых нами в text.match (), переменная не будет нулевой. Это означает, что если полученное сообщение было «Что Beebom?», То «var what» и «var beebom» не будут нулевыми, потому что слово «Что» содержит слово «что». Таким образом, мы избавлены от создания дополнительных утверждений для каждого варианта, в котором кто-то может сказать «что».

2. Редактирование прослушивателя сообщений

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

[JS]

app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {

// сначала попробуем проверить, соответствует ли полученное сообщение условному ответу.
if (! conditionalResponses (event.sender.id, event.message.text)) {

// если это не так, просто отправьте полученное сообщение обратно отправителю.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ JS]

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

3. Внесение изменений в Heroku

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

1. Запустите терминал.

2. Измените каталог на ваш каталог testbot
cd testbot

3. Выполните следующие шаги:

мерзавец добавить.

Примечание: в конце «git add» стоит «.»

git commit -m «Добавление условных возможностей»

гит пуш герой мастер

4. Теперь отправьте сообщение на свою страницу, и бот вернет вам сообщение.

Еще больше функциональности

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

1. Редактирование прослушивателя сообщений

Наш прослушиватель сообщений на данном этапе работает нормально. Тем не менее, он не очень хорошо отформатирован, и если мы будем продолжать увеличивать вложенные операторы if для добавления дополнительных « проверок условий », это быстро станет уродливым, трудным для понимания и медленным при выполнении. Мы не хотим этого сейчас, не так ли? Давайте внесем некоторые изменения.

Примечание: в приемнике сообщений есть строка кода, которая гласит «res.sendStatus (200)», эта строка отправляет код состояния 200 в Facebook, сообщая, что функция успешно выполнена. Согласно документации Facebook, Facebook ожидает максимум 20 секунд, чтобы получить статус 200, прежде чем решит, что сообщение не прошло и остановит выполнение кода.

Наш новый слушатель сообщений выглядит следующим образом. Мы используем команду « res.sendStatus (200) », чтобы остановить выполнение функции, как только условие будет найдено и выполнено.

[JS]

app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {

// сначала проверяем текст сообщения на соответствие условиям introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// из-за отсутствия лучшего имени я назвал этот newResponse: p; проверить это дальше
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// иначе, просто верните исходное сообщение
еще {
// заменить echo действительным списком команд
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ JS]

2. Кодирование новой функции отклика

Теперь наш прослушиватель сообщений проверяет текст сообщения на соответствие ряду условий в «newResponse», но сначала нам нужно кодировать функцию newResponse. Мы будем использовать эту функцию, чтобы проверить, запрашивал ли пользователь предложения статей на веб-сайте Gadget-Info.com, выполнять поиск по запросу на веб-сайте и предоставлять ссылку пользователю. Еще раз, мы будем использовать регулярные выражения для сопоставления текста с конкретными ключевыми словами.

[JS]

function newResponse (receientId, text) {
текст = текст || "";
var предложить = text.match (/ предложить / ги);
var random = text.match (/ random / gi);
var article = text.match (/ article / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var browser = text.match (/ browser / gi);
var vpn = text.match (/ vpn / gi);

// проверяем, спрашивает ли пользователь предложения статьи вообще
if (предложить! = null && article! = null) {
var query = "";
// если запрашиваются предложения статьи, проверьте тему, которую ищет пользователь
if (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (browser! = null) {
query = "Browser";
} иначе if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (receientId, query);
вернуть истину
}
вернуть ложь;
};

[/ JS]

Мы используем другую пользовательскую функцию под названием «sendButtonMessage» для отправки сообщения в случае, если пользователь запрашивает предложения по статье. Мы создадим это дальше.

3. Кодирование функции sendButtonMessage

Функция sendButtonMessage принимает два параметра, идентификатор получателя и запрос. Идентификатор получателя используется для идентификации пользователя, которому должно быть отправлено сообщение, а запрос используется для определения темы, по которой пользователю нужны предложения статей.

[JS]

function sendButtonMessage (receientId, query) {
var messageData = {
получатель: {
идентификатор: получателя
},
сообщение: {
приложение: {
тип: "шаблон",
полезная нагрузка: {
template_type: "кнопка",
текст: «Это то, что я нашел» + запрос,
Кнопки: [{
тип: "web_url",
url: "//www.beebom.com/?s="+query,
title: "Beebom:" + запрос
}]
}
}
}
};

callSendAPI (MessageData);
}

[/ JS]

Еще раз, мы используем пользовательскую функцию; на этот раз, чтобы отправить пользователю окончательное сообщение со ссылками на статью. Эта функция во многом похожа на функцию «sendMessage», которую мы кодировали ранее, но она более универсальна в том, как она принимает данные сообщения, которые нам подходят, потому что наши данные сообщения изменяются в зависимости от запроса, который делает пользователь.

4. Кодирование функции callSendAPI

Функция «callSendAPI» принимает один параметр, «messageData» . Этот параметр содержит все данные сообщения, правильно отформатированные в соответствии с правилами Facebook, чтобы мессенджер мог правильно отображать их для пользователя.

[JS]

function callSendAPI (messageData) {
запрос({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
метод: 'POST',
json: messageData

}, функция (ошибка, ответ, тело) {
if (! error && response.statusCode == 200) {
var receientId = body.recipient_id;
var messageId = body.message_id;

console.log («Успешно отправлено универсальное сообщение с идентификатором% s получателю% s»,
идентификатор сообщения, получателя);
} еще {
console.error («Невозможно отправить сообщение.»);
console.error (ответ);
console.error (ошибка);
}
});
}

[/ JS]

5. Внесение изменений в Heroku

Мы находимся на последнем этапе создания нашего обновленного бота. Нам просто нужно перенести все изменения кода в Heroku. Процесс такой же, как и раньше, и описан ниже:

1. Запустите терминал.

2. Перейдите в каталог testbot .
cd testbot

3. Сделайте следующее:

мерзавец добавить.

Примечание. В конце этой команды есть «.» .

git commit -m «улучшение проверки состояния и форматирования»

гит пуш герой мастер

4. Теперь отправьте сообщение типа «Предложить статью на Android» или «Beebom, предложите мне любую статью на тему Android»; и бот отправит красиво отформатированное сообщение со ссылкой, по которой вы можете нажать, чтобы открыть статьи, относящиеся к вашему запросу.

Копать глубже

Теперь, когда вы знаете, как начать разработку ботов для мессенджера Facebook, просмотрите документацию Facebook о том, как разрабатывать ботов для мессенджера Facebook. Хотя документация не подходит для начинающих, вы больше не новичок. Вы должны проверить официальную документацию и попытаться выяснить, как сделать вашего бота еще умнее. Тизер: Вы также можете отправлять сообщения с изображениями и кнопками! Также возможно использовать сервисы, такие как Wit.ai и Api.ai, для кодирования вашего бота, а затем интегрировать его с Facebook, но в моих слабых попытках использовать эти сервисы Wit.ai работает не слишком хорошо, и Api.ai имеет четкую кривую обучения для начинающих.

Вы когда-нибудь разрабатывали бота на Facebook? Если у вас есть, как вы пошли на его разработку, и что он может сделать? Использовали ли вы такие сервисы, как Wit.ai и Api.ai, чтобы создать своего бота? Если вы никогда не пробовали программировать бота, зайдите и разработайте своего собственного бота на Facebook, сделайте его умнее и лучше, и сообщите нам о своем опыте в комментариях ниже.

Рекомендуем, 2024

Выбор редакции

Руководство по устранению неполадок PS4

Разница между статическим и динамическим IP-адресом

Топ 5 альтернатив SwiftKey для Android и iOS

Как создать бота Facebook Messenger (руководство)

Настройка бота

Создать Git-репозиторий

Настройка Heroku

Настройка Facebook

Больше настроек Heroku