Особливість "посильних ботів" Facebook нічого нового, і багато дивовижних ботів вже існують. Однак ресурси, що стосуються того, як саме побудувати свій власний бот, є дефіцитними, і їм не вистачає пояснення для людей, які є новими користувачами у програмі Facebook Graph. Роботи Messenger тепер також вимагають, щоб ви використовували URL-адресу зворотного виклику SSL (більше про це пізніше), а налаштування SSL не для всіх, а також коштує грошей.
У цій статті я прокажу вас через весь процес створення простого ботника Facebook Messenger, тому що власна документація Facebook досить погано пояснена. Ми налаштуємо програму хмари, яка використовує протокол https, кодуйте бота в Node.js (який є JavaScript, мовою на стороні сервера), використовуйте git, щоб підштовхнути код до хмари, і перевірити його на Facebook Messenger.
Налаштування Bot
Вам знадобиться 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 "; відкрийте це у редакторі, подібному до "Високого тексту".
6. У цьому файлі потрібно додати рядок "start": "node index.js"
- Не забудьте додати ", " в кінці попереднього рядка.
7. Далі створіть новий файл у Sublime Text і вставте в нього наступний код:
[js]
var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('запит');
var app = express ();
app.use (bodyParser.urlencoded ({розширено: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', функція (req, res) {
res.send ("Це сервер TestBot");
});
app.get ('/ webhook', функція (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} else {
res.send ("Недійсний маркер перевірки");
}
});
[/ js]
Збережіть цей файл як index.js
Примітка: у рядку 13 значення 'hub.verify_token' встановлено як ' testbot_verify_token', запам'ятайте це значення, оскільки воно буде використано при створенні webhook у Facebook.
Створити сховище Git
Тепер, коли ми налаштували обробку зворотного виклику нашого бота, нам потрібно підштовхнути код до Heroku. Для цього нам потрібно створити сховище git в нашому каталозі.
Примітка: «git» - система контролю версій файлів і програмного коду. Докладніше про це можна прочитати у Вікіпедії.
Створення сховища git легко та займає лише пару команд терміналу.
Примітка: Переконайтеся, що ви знаходитесь у каталозі " 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 і зареєструйтеся.
Примітка: У полі, де йдеться про «Вибір мови первинного розвитку», використовуйте «Я використовую іншу мову».
Як тільки ви закінчите з цим, встановіть Toolkelt 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 Server ".
Налаштування Facebook
Пора підключити наш бот до Facebook! Вам потрібно створити нову сторінку Facebook або скористатися існуючою власною. Я покажу вам, як продовжити, створивши нову сторінку Facebook.
1. Перейдіть до Facebook і створіть нову сторінку.
- Ви можете створити сторінку в будь-якій потрібній категорії. Я вибираю компанію / організацію без особливої причини.
2. Наступні кроки, які демонструє Facebook, є необов'язковими і можуть бути пропущені.
3. Потім перейдіть на веб-сайт розробників Facebook.
- У правому верхньому кутку наведіть курсор миші на " Мої програми ", після чого натисніть " Додати нову програму " у спадному меню.
- Натисніть на " Базове налаштування ", коли Facebook запропонує вам вибрати платформу.
4. Заповніть інформацію про назву програми та контактну адресу електронної пошти.
- Виберіть " Програми для сторінок " у категорії.
- Натисніть " Створити ідентифікатор програми ".
5. Ви перейдете на інформаційну панель програми. На бічній панелі перейдіть до пункту " + Додати продукти " і виберіть " Посланник ", натиснувши кнопку " Почати роботу ".
6. Виберіть " Setup Webhooks ".
7. Заповніть необхідні поля, замінивши "URL-адресу зворотного виклику" URL-адресою програми Heroku, перевірте маркер з маркером, використаним у файлі index.js, і виберіть такі поля підписки:
- message_deliveries
- повідомлень
- message_optins
- messaging_postbacks
Примітка: Переконайтеся, що додайте “ / webhook ” до URL-адреси зворотного виклику, щоб index.js виконав необхідну функцію, коли Facebook намагається перевірити URL-адресу, він може перевірити “Verify Token”.
8. Натисніть " Перевірити і зберегти ".
9. У розділі “ Generation Token ” натисніть “ Select a Page ” і виберіть сторінку, яку ви створили раніше.
Це дозволить створити “ Токен доступу до сторінки ”, зберегти його де-небудь; Вам знадобиться пізніше.
10. Потім вам доведеться зробити запит POST до вашої програми, використовуючи маркер доступу до сторінки, сформований на останньому кроці. Це можна легко зробити в терміналі. Просто запустіть наступну команду, замінивши PAGE_ACCESS_TOKEN маркером доступу до сторінки, який ви створили .
curl -X POST “//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”
Ви повинні отримати відповідь «на успіх » у терміналі.
Більше установки Heroku
Так, ми ще не закінчили. Не майже.
1. Перейдіть на веб-сайт Heroku і увійдіть до системи за допомогою свого ідентифікатора електронної пошти.
2. Знайдіть вашу програму на панелі інструментів і натисніть її.
3. Перейдіть до вкладки Настройки.
4. Натисніть " Показувати конфігурацію Vars "
5. Додайте PAGE_ACCESS_TOKEN як " config var " і натисніть " Додати ".
Кодування фактичного бота
Тепер, коли ми закінчили роботу з грунтом, ми можемо зосередитися на тому, що дійсно важливо: змусити бота реагувати на повідомлення. Щоб розпочати роботу, ми просто розробимо бота, який просто віддзеркалює отримані повідомлення. Як виявилося, ця проста задача потребує значного коду для функціонування.
1. Кодування слухача повідомлень
Перш ніж бот зможе повторити повідомлення, він повинен мати можливість слухати повідомлення. Давайте зробимо це першим.
У файлі index.js додайте наступний код:
[js]
app.post ('/ webhook', функція (req, res) {
var events = req.body.entry [0].
для (i = 0; i <events.length; i ++) {
var event = події [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Ехо:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ js]
Що робить ця функція, це перевірка отриманих повідомлень, а потім перевіряє, чи є текст у повідомленні. Якщо знайдений текст у отриманому повідомленні, він викликає функцію sendMessage (показано пізніше), передаючи ідентифікатор відправника та текст, який буде відправлено назад. Важливо розуміти такі значення і що вони означають:
- event.message.text - це текст, отриманий у повідомленні. Наприклад, якщо хтось посилає повідомлення "Привіт" на наш бот, значення event.message.text буде "Привіт".
- event.sender.id - ідентифікатор особи, яка надіслала повідомлення боту. Це потрібно, щоб бот знав, до кого звертатися.
2. Кодування функції sendMessage
Тепер дозволяє кодувати функцію "sendMessage".
[js]
функція sendMessage (получач, повідомлення) {
запит ({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
метод: "POST",
json: {
одержувач: {id: receiverId},
повідомлення: повідомлення,
}
}, функція (помилка, відповідь, тіло) {
якщо (помилка) {
console.log ("Помилка надсилання повідомлення:", помилка);
} if if (response.body.error) {
console.log ('Помилка:', response.body.error);
}
});
};
[/ js]
Функція “sendMessage” приймає два параметри:
- одержувачId
- повідомлення
ОдержувачId необхідний для того, щоб повідомлення було адресовано правильному користувачеві.
Повідомлення - це фактичний текст, який потрібно надіслати у відповіді.
3. Натискання змін на Heroku
Якщо ви виконали наведені вище дії, ваш бот повинен мати можливість повторювати отриманий текст. Але спочатку вам доведеться підштовхнути зміни до програми, розміщеної на Heroku. Для цього виконайте наведені нижче дії.
1. Запустіть термінал.
2. Змініть каталог на каталог testbot
cd testbot
3. Виконайте наступні дії:
- git додайте.
- Примітка: в кінці слова "git add" є "."
- git commit -m "Перша фіксація"
- git штовхає героку майстра
4. Тепер надішліть повідомлення на свою сторінку, і бот повторить повідомлення.
Умовний відповідь aka Створення Bot розумніше
Ми можемо скористатися відповідним текстом, щоб дозволити нашому бот-посланню Facebook відповідати за певними спеціальними ключовими словами.
Для цього потрібно додати ще одну функцію. Я називаю його "conditionalResponses", але ви можете вибрати будь-яке ім'я, яке ви віддаєте перевагу.
1. Кодування функції ConditionalResponses
[js]
Функція conditionalResponses (receiverId, text) {
text = text || "";
var what = text.match (/ what / gi); // перевіряємо, чи містить текстовий рядок слово "what"; ігнорувати справу
varGadget-Info.com = text.match (/ beebom / gi); // перевіряємо, чи містить текстовий рядок слово "beebom"; ігнорувати справу
var who = text.match (/ who / gi); // перевіряємо, чи містить текстовий рядок слово "хто"; ігнорувати справу
var you = text.match (/ ви / gi); // перевіряємо, чи містить текстовий рядок слово "you"; ігнорувати справу
// якщо текст містить як "що", так і "beebom", виконайте такі дії:
if (що! = null &&; Gadget-Info.com! = null) {
message = {
текст: "Бібом - це веб-сайт, що пропонує технічні ресурси.
}
sendMessage (одержувачId, повідомлення);
return true;
}
// якщо текст містить як "хто", так і "ви", виконайте такі дії:
if (хто! = null && you! = null) {
message = {
текст: "Мене попросили не обговорювати свою особистість в Інтернеті".
}
sendMessage (одержувачId, повідомлення);
return true;
}
// якщо нічого не збігається, поверніть false, щоб продовжити виконання внутрішньої функції.
return false;
};
[/ js]
У рядках 4-7 ми визначили змінні в залежності від відповідності отриманого рядка конкретним словам. Найкраща частина використання тексту «text.match ()» полягає в тому, що він використовує регулярні вирази (зазвичай їх називають регулярними, читайте далі). Це добре для нас, тому що це означає, що до тих пір, поки навіть частина слова в отриманому тексті збігається з будь-яким із слів, які ми згадували в text.match (), змінна не буде нульовою. Це означає, що якщо отримане повідомлення було “What's Beebom?”, “Var what” та “var beebom” не буде нульовим, оскільки слово “What's” містить слово “what”. Таким чином, ми врятовані від створення додаткових заяв для кожного варіанта, в якому хтось може сказати «Що».
2. Редагування слухача повідомлень
Нам також потрібно відредагувати переглядач повідомлень, який ми кодували, щоб переконатися, що він також намагається відповідати отриманому тексту функцією "conditionalResponses".
[js]
app.post ('/ webhook', функція (req, res) {
var events = req.body.entry [0].
для (i = 0; i <events.length; i ++) {
var event = події [i];
if (event.message && event.message.text) {
// спочатку спробуйте перевірити, чи отримане повідомлення кваліфікується для умовної відповіді.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// якщо це не так, просто повторіть отримане повідомлення назад до відправника.
sendMessage (event.sender.id, {text: "Ехо:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
Зміни у слухачеві можуть виглядати не дуже радикально, але їхні наслідки є впевненими. Тепер, слухач спочатку намагається відповісти умовними відповідями, і якщо немає прийнятної умови для отриманого повідомлення, він просто відтворює повідомлення назад користувачеві.
3. Натискання змін на Heroku
Перш ніж ви зможете спробувати нові функції, вам доведеться натиснути оновлений код на додаток, розміщене на Heroku. Щоб зробити це, виконайте наведені нижче дії.
1. Запустіть термінал.
2. Змініть каталог на каталог testbot
cd testbot
3. Виконайте наступні дії:
- git додайте.
- Примітка: в кінці слова "git add" є "."
- git commit -m "Додавання умовних можливостей"
- git штовхає героку майстра
4. Тепер надішліть повідомлення на свою сторінку, і бот повторить повідомлення.
Ще більше функціональності
Наш бот тепер реагує на невеликий набір команд у приємних, добре структурованих відповідях. Але це ще не дуже корисно. Давайте зробимо ще кілька змін до коду, щоб зробити наш бот більш " функціональним " програмним забезпеченням. Ми будемо реконструювати багато функцій, і додаємо ще пару, так що збудимося.
1. Редагування слухача повідомлень
Наш слухач повідомлень, на даному етапі, працює просто нормально. Тим не менш, це не дуже красиво відформатовані, і якщо ми будемо продовжувати збільшувати вкладені якщо твердження, щоб додати додаткові " перевірки стану ", це швидко стане потворним дивитися, важко зрозуміти і повільніше при виконанні. Ми цього не хочемо, чи не так? Давайте внесемо деякі зміни.
Примітка: У слухачеві повідомлень є рядок коду, який читає “res.sendStatus (200)”, ця лінія надсилає код стану 200 на Facebook, повідомляючи йому, що функція успішно виконана. Згідно з документацією Facebook, Facebook чекає максимум 20 секунд, щоб отримати статус 200, перш ніж він вирішить, що повідомлення не пройшло і припиняє виконання коду.
Наш новий слухач повідомлень виглядає так. Ми використовуємо команду " res.sendStatus (200) ", щоб зупинити виконання функції, як тільки умова збігається і виконується.
[js]
app.post ('/ webhook', функція (req, res) {
var events = req.body.entry [0].
для (i = 0; i <events.length; i ++) {
var event = події [i];
if (event.message && event.message.text) {
// спочатку перевірте текст повідомлення на умови introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// через відсутність кращого імені я назвав це newResponse: p; перевірте це далі
інакше if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// else, просто повторіть початкове повідомлення
else {
// замінити ехо з правильним списком команд
sendMessage (event.sender.id, {text: "Ехо:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
2. Кодування функції newResponse
Наш слухач повідомлень тепер перевіряє текст повідомлення на набір умов у “newResponse”, але спочатку нам потрібно кодувати функцію newResponse. Ми будемо використовувати цю функцію, щоб перевірити, чи користувач запитав про пропозицію статті на веб-сайті Gadget-Info.com, виконати пошук за терміном запиту на веб-сайті та представити посилання користувачеві. Ще раз ми будемо використовувати регулярні вирази для відповідності тексту певним ключовим словам.
[js]
функція newResponse (получач, текст) {
text = text || "";
var suggest = text.match (/ suggest / gi);
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";
} if if (iphone! = null) {
query = "iPhone";
} else if (браузер! = null) {
query = "Браузер";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (получач, запит);
return true
}
return false;
};
[/ js]
Ми використовуємо іншу користувальницьку функцію під назвою "sendButtonMessage", щоб надіслати повідомлення у випадку, якщо користувач запитує пропозиції статей. Ми створимо це наступне.
3. Кодування функції SendButtonMessage
Функція sendButtonMessage приймає два параметри, ідентифікатор одержувача та запит. Ідентифікатор одержувача використовується для ідентифікації користувача, якому потрібно надіслати повідомлення, а запит використовується для визначення теми, на яку користувач хоче запропонувати статті.
[js]
функція sendButtonMessage (получач, запит) {
var messageData = {
одержувач: {
id: receiverId
},
повідомлення: {
вкладення: {{
тип: "шаблон",
корисне навантаження: {
template_type: "кнопка",
текст: "Це те, що я знайшов для" + запит,
кнопки: [{
введіть: "web_url",
url: "//www.beebom.com/?s="+query,
title: "Beebom:" + запит
}]
}
}
}
};
callSendAPI (повідомленняДані);
}
[/ js]
Ми знову використовуємо спеціальну функцію; на цей раз, щоб відправити останнє повідомлення, з посиланнями на статтю, користувачеві. Функція багато в чому схожа на функцію “sendMessage”, яку ми кодували раніше, але є більш загальною в тому, як вона приймає дані повідомлень, які нам підходять, оскільки наші дані повідомлень змінюються з запитом, який робить користувач.
4. Кодування функції callSendAPI
Функція “callSendAPI” приймає один параметр, “messageData” . Цей параметр містить всі дані повідомлення, належним чином відформатовані відповідно до правил Facebook, так що месенджер може правильно відобразити його користувачеві.
[js]
функція callSendAPI (повідомленняДані) {
запит ({
uri: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
метод: "POST",
json: повідомленняДані
}, функція (помилка, відповідь, тіло) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Успішно надіслано загальне повідомлення з id% s одержувачу% s",
messageId, получачId);
} else {
console.error ("Не вдається надіслати повідомлення.");
console.error (відповідь);
console.error (помилка);
}
});
}
[/ js]
5. Натискання змін на Heroku
Ми знаходимося на заключному кроці на шляху до нашого оновленого бота. Нам просто потрібно підштовхнути всі зміни до коду Heroku. Процес такий же, як і раніше, і наведено нижче:
1. Запустіть термінал.
2. Змініть каталог на каталог testbot .
cd testbot
3. Виконайте такі дії:
- git додайте.
- Примітка: У кінці цієї команди є "."
- git commit -m "поліпшення перевірки стану та форматування"
- git штовхає героку майстра
4. Тепер надішліть повідомлення, наприклад, "Запропонувати статтю на Android", або "Beebom, запропонувати мені будь-яку статтю на тему Android"; і бот надішле красиво відформатоване повідомлення з посиланням, на якому можна натиснути, щоб відкрити статті, пов'язані з вашим запитом.
Копати глибше
Тепер, коли ви знаєте, як розпочати роботу з ботами-посланцями Facebook, перегляньте документацію Facebook про те, як розробити ботів-мессенджерів Facebook. Незважаючи на те, що документація не підходить для початківців, ви вже не новачок. Ви повинні перевірити офіційну документацію і спробувати з'ясувати, як зробити ваш бот ще розумнішим. Teaser: Ви також можете надсилати повідомлення з зображеннями та кнопками! Також можна використовувати такі послуги, як Wit.ai і Api.ai для кодування вашого бота, а потім інтегрувати його з Facebook, але в моїх слабких спробах використовувати ці служби, Wit.ai не працює надто добре, і Api.ai має різку криву навчання для початківців.
Ви коли-небудь розробляли бот-мессенджер Facebook? Якщо у вас є, як ви розробили її, і що вона може зробити? Ви використовували такі послуги, як Wit.ai і Api.ai для створення свого бота? Якщо ви ніколи не пробували свої руки на кодуванні бота, перейдіть і розвивайте свій власний бот-посланник Facebook, зробіть його розумнішим і кращим, і повідомте нам про свій досвід у коментарях нижче.
