Как да създадете Facebook Messenger Bot (Ръководство)

• 2019

Функцията „Messenger ботове“ на Facebook не е нищо ново и вече съществуват много страхотни ботове. Въпреки това, ресурсите за това как точно да изградите своя собствен бот са оскъдни и липсват обяснения за хората, които са нови за Facebook Graph API. Ботовете за Messenger също изискват от вас да използвате SSL защитен URL адрес за обратно извикване (повече за това по-късно), а настройката на SSL не е за всеки и също струва пари.

В тази статия ще ви преведа през целия процес на създаване на обикновен Facebook бот, защото собствената документация на 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 “; отворете това в редактор като 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 ({разширен: 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', запомнете тази стойност, тъй като ще се използва при създаването на уебшука във 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 и се регистрирайте.

Забележка: В полето, което казва „Избери своя първичен език за развитие“, използвай „Използвам друг език“.

След като приключите с това, инсталирайте лентата с инструменти 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, потвърдете Token с токена, използван в файла 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: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});

[/ JS]

Това, което прави тази функция, е да проверява получените съобщения и след това да проверява дали има текст в съобщението. Ако открие текст в полученото съобщение, той извиква функцията sendMessage (показана по-късно), като предава ID на изпращача и текста, който се изпраща обратно. Важно е да разберете следните стойности и какво означават те:

• 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 ("Грешка при изпращане на съобщение:", грешка);
} else if (response.body.error) {
console.log ('Грешка:', response.body.error);
}
});
};

[/ JS]

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

• recipientId

• съобщение

Изисква се получателят, така че съобщението да може да бъде адресирано до правилния потребител.

Съобщението е действителният текст, който трябва да бъде изпратен в отговора.

3. Натискане на промените в Heroku

Ако сте изпълнили горните стъпки, вашият бот трябва да може да отразява обратно получения текст. Но първо трябва да променяте промените в приложението, което се хоства на Heroku. За целта изпълнете следните стъпки:

1. Стартирайте терминала.

2. Променете директорията в директорията testbot
cd testbot

3. Направете следните стъпки:

• git add.

• Забележка: В края на „git add“ има „.“

• git commit -m „Първо фиксиране“

• git тласък heroku майстор

4. Сега изпратете съобщение на страницата си и ботът ще ви повтори съобщението.

Условни реакции, наричани още „Усъвършенстване на Bot“

Можем да използваме текстово съвпадение, за да позволим на нашия Facebook бот да реагира според определени специални ключови думи.

За да постигнем това, трябва да добавим друга функция. Наричам го „conditionalResponses“, но можете да изберете каквото предпочитате.

1. Кодиране на функцията conditionalResponses

[JS]

функция conditionalResponses (получател, текст) {
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"; игнорирайте случая

// ако текстът съдържа и "what" и "beebom", направете това:

if (какво! = null &&; Gadget-Info.com! = null) {
message = {
текст: "Beebom е уебсайт, предлагащ технологични ресурси. Добре дошли."
}
sendMessage (получател, съобщение);
return true;
}

// ако текстът съдържа и „кой“ и „вие“, направете следното:
ако (кой! = null && you! = null) {
message = {
текст: "Бях помолен да не обсъждам идентичността си онлайн."
}
sendMessage (получател, съобщение);
return true;
}

// ако нищо не съвпада, върнете false, за да продължите изпълнението на вътрешната функция.
return false;
};

[/ JS]

В редове от 4 до 7 имаме дефинирани променливи в зависимост от съответствието на получения низ с определени думи. Най-добрата част за използването на “text.match ()” е, че използва регулярни изрази (обикновено наричани regex, прочетете повече тук.). Това е добре за нас, защото това означава, че докато част от дума в получения текст съвпада с някоя от думите, които споменахме в text.match (), променливата няма да бъде null. Това означава, че ако полученото съобщение е „Какво е Beebom?“, „Var what“ и „var beebom“ няма да бъдат нули, защото думата „Какво“ съдържа думата „какво“. Така че ние сме спасени от създаването на допълнителни изявления за всяка вариация, в която някой може да каже „Какво“.

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: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ JS]

Промените в слушателя може да не изглеждат много драстични, но ефектите им са сигурни. Сега слушателят първо се опитва да отговори с условни отговори и ако няма валидно условие за полученото съобщение, той просто отразява съобщението обратно на потребителя.

3. Натискане на промените в Heroku

Преди да можете да изпробвате новите функции, ще трябва да натиснете актуализирания код на приложението, което се хоства на Heroku. Следвайте стъпките по-долу, за да направите това:

1. Стартирайте терминала.

2. Променете директорията в директорията testbot
cd testbot

3. Направете следните стъпки:

• git add.

• Забележка: В края на „git add“ има „.“

• git commit -m „Добавяне на условни възможности“

• git тласък heroku майстор

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; Проверете това по-нататък
иначе ако (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

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

[/ JS]

2. Кодиране на функцията newResponse

Сега нашият слушател на съобщения проверява текста на съобщението срещу набор от условия в “newResponse”, но първо трябва да кодираме функцията newResponse. Ще използваме тази функция, за да проверим дали потребителят е поискал предложения за статии от сайта на Gadget-Info.com, потърсете термина на заявката на уебсайта и да предоставите връзката на потребителя. Още веднъж ще използваме регулярни изрази, за да съответстваме на текста с конкретни ключови думи.

[JS]

функция newResponse (получател, текст) {
text = text || "";
var suggest = text.match (/ предложете / gi);
var random = text.match (/ случайно / 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";
} друго, ако (mac! = null) {
query = "Mac";
} друго, ако (iphone! = null) {
query = "iPhone";
} иначе, ако (браузър! = null) {
query = "Браузър";
} друго, ако (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,
заглавие: "Beebom:" + запитване
}]
}
}
}
};

callSendAPI (messageData);
}

[/ JS]

За пореден път използваме персонализирана функция; този път, за да изпрати на потребителя последното съобщение с връзките на статиите. Функцията е, по много начини, подобна на функцията "sendMessage", която кодирахме по-рано, но е по-обща в начина, по който приема данните за съобщенията, което ни подхожда, защото данните ни за съобщения се променят с заявката, която потребителят прави.

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

Функцията “callSendAPI” заема един параметър, “messageData” . Този параметър съдържа цялата информация за съобщенията, форматирана правилно според правилата на Facebook, така че пратеникът може да го покаже правилно на потребителя.

[JS]

функция callSendAPI (съобщениеData) {
искане ({
uri: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
метод: „POST“,
json: съобщениеДанни

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

console.log ("Успешно изпратено родово съобщение с id% s на получателя% s",
messageId, receiverId);
} else {
console.error ("Не може да се изпрати съобщение.");
console.error (отговор);
console.error (грешка);
}
});
}

[/ JS]

5. Натискане на промените в Heroku

Ние сме на последната стъпка към нашия обновен бот. Просто трябва да прокараме всички промени в кода на Heroku. Процесът е същият както преди и е описан по-долу:

1. Стартирайте терминала.

2. Променете директорията в директорията testbot .
cd testbot

3. Направете следното:

• git add.

• Забележка: В края на тази команда има "." .

• git commit -m "подобряване на проверките на състоянието и форматирането"

• git тласък heroku майстор

4. Сега изпратете съобщение като „Предложете статия на Android“ или „Beebom, предложете ми всяка статия на тема Android“; и ботът ще изпрати добре форматирано съобщение с връзка, която можете да докоснете, за да отворите статиите, свързани с вашата заявка.

Копайте по-дълбоко

Сега, след като знаете как да започнете с разработването на ботове за посланици на Facebook, прегледайте документацията на Facebook за това как да развивате ботс-мейджъри във Facebook. Докато документацията не е добра за начинаещи, вече не сте начинаещ. Трябва да проверите официалната документация и да се опитате да разберете как да направите своя бот още по-умен. Teaser: Можете да изпращате съобщения с изображения и бутони! Също така е възможно да използвате услуги като Wit.ai и Api.ai, за да кодирате вашия бот и след това да го интегрирате с Facebook, но в моите слаби опити да използвате тези услуги, Wit.ai не работи много добре и Api.ai има рязка крива на учене за начинаещи.

Разработвали ли сте някога бот от Facebook Messenger? Ако имате, как сте го разработили и какво може да направи? Използвали ли сте услуги като Wit.ai и Api.ai за създаване на бот? Ако никога не сте опитвали ръцете си да кодирате бот, отидете и разработете свой собствен Facebook бот, направете го по-интелигентен и по-добър, и ни уведомете за опита си в коментарите по-долу.