Jak utworzyć Bot programu Facebook Messenger (przewodnik)

2019

Funkcja "messenger bots" na Facebooku nie jest niczym nowym, a wiele niesamowitych botów już istnieje. Jednak zasoby dotyczące tego, jak zbudować swój własny bot, są ograniczone i brakuje im wyjaśnień dla osób, które są nowicjuszami interfejsu API Graph Graph. Boty komunikatorów wymagają teraz również użycia adresu URL wywołania zwrotnego zabezpieczonego protokołu SSL (więcej informacji na ten temat później), a konfiguracja protokołu SSL nie jest dostępna dla wszystkich, a także wiąże się z kosztami.

W tym artykule poprowadzę Cię przez cały proces tworzenia prostego bota messengerowego Facebooka, ponieważ własna dokumentacja Facebooka jest raczej słabo wyjaśniona. Skonfigurujemy aplikację w chmurze, która używa protokołu https, koduje bota w Node.js (który jest javascript, język po stronie serwera), użyj git, aby przekazać kod do aplikacji w chmurze i przetestować go na Facebooku Messenger.

Konfiguracja Bot

Będziesz potrzebował Node zainstalowanego na twoim laptopie. Jeśli nie, przejdź do witryny węzła, aby pobrać i zainstalować.

Gdy skończysz, możesz kontynuować konfigurację dla bota. Wykonaj poniższe kroki:

1. Uruchom Terminal.

2. Potrzebujesz osobnego katalogu do przechowywania twojego kodu.

Stwórz nowy katalog
mkdir testbot

Zmień katalog roboczy na nowo utworzony katalog
cd testbot

3. Następnie uruchom aplikację węzła.
npm init

Zostaniesz poproszony o podanie informacji o swojej aplikacji, po prostu użyj wartości domyślnych, naciskając Enter dla wszystkich.

4. Zainstaluj pakiety
npm install express body-parser request --save

Polecenie zostanie uruchomione i pojawi się kilka ostrzeżeń; Ignoruj ich.

5. W Finderze otwórz utworzony katalog " testbot " i odszukaj plik o nazwie " pakiet.json "; otwórz to w edytorze takim jak Sublime Text.

6. W tym pliku musimy dodać linię
"start": "node index.js"

Nie zapomnij dodać ", " na końcu poprzedniej linii.

7. Następnie utwórz nowy plik w Sublime Text i umieść w nim następujący kod:

[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 ("To jest serwer testowy");
});
app.get ('/ webhook', function (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} else {
res.send ("Nieprawidłowy token weryfikacyjny");
}
});

[/ js]

Zapisz ten plik jako index.js

Uwaga: W wierszu 13 wartość "hub.verify_token" jest ustawiona jako " testbot_verify_token", pamiętaj o tej wartości, ponieważ będzie ona używana podczas tworzenia webhooka na Facebooku.

Utwórz repozytorium Git

Teraz, gdy skonfigurowaliśmy obsługę wywołań zwrotnych naszego bota, musimy przekazać kod do Heroku. W tym celu musimy stworzyć repozytorium git w naszym katalogu.

Uwaga: "git" to system kontroli wersji dla plików i kodu oprogramowania. Możesz przeczytać więcej na ten temat na Wikipedii.

Tworzenie repozytorium git jest łatwe i wymaga tylko kilku poleceń Terminal.

Uwaga: Upewnij się, że znajdujesz się w katalogu " testbot " w Terminalu. Możesz to zrobić, wpisując polecenie pwd w Terminalu.

Wykonaj następujące kroki, aby utworzyć repozytorium git:

1. git init

2. git add .

3. git commit -m "Register Facebook Webhook"

Skonfiguruj Heroku

Zanim przejdziemy na strony dewelopera Facebooka, potrzebujemy adresu zwrotnego, z którym Facebook może rozmawiać. Ten adres URL musi korzystać z protokołu https, co oznacza, że musimy zainstalować certyfikat SSL w naszej witrynie; ale jest to przewodnik dla początkujących na temat botów na Facebooku, więc nie komplikujmy tego. Użyjemy Heroku do wdrożenia naszego kodu. Heroku udostępnia adresy URL stron https dla aplikacji i ma bezpłatny plan, który spełnia nasze (bardzo podstawowe) wymagania.

Wejdź na stronę Heroku i zarejestruj się.

Uwaga: w polu "Wybierz swój podstawowy język programowania" użyj "Używam innego języka".

Kiedy już to zrobisz, zainstaluj pasek narzędziowy Heroku dla swojego systemu operacyjnego (na Macu, dla mnie) i zainstaluj go. Umożliwi to dostęp do Heroku w terminalu (lub w wierszu polecenia, w systemie Windows).

Następnie stworzymy aplikację na Heroku, która będzie przechowywać cały kod dla naszego bota. Wykonaj poniższe kroki:

1. Uruchom Terminal

2. Wpisz heroku login

Zostaniesz poproszony o podanie swojego adresu e-mail i hasła.

Wpisz swój e-mail, naciśnij Enter; następnie wpisz swoje hasło, naciśnij Enter.

Będziesz zalogowany do heroku

3. Wpisz heroku create

Spowoduje to utworzenie aplikacji na Heroku i udostępnienie hiperłącza. Pamiętaj, że link używa protokołu https. Łatwo, prawda?

4. Teraz możesz przesłać swój kod aplikacji do Heroku
git push heroku master

5. Po wykonaniu tej czynności aplikacja będzie działać w trybie na żywo, a następnie można wyświetlić łącze w przeglądarce, aby sprawdzić, czy wszystko działa poprawnie. Powinien otworzyć stronę z napisem " This is TestBot Server ".

Konfiguracja Facebooka

Czas podłączyć naszego bota do Facebooka! Musisz utworzyć nową stronę na Facebooku lub użyć istniejącej, którą posiadasz. Pokażę ci, jak postępować, tworząc nową stronę na Facebooku.

1. Przejdź do Facebooka i utwórz nową stronę.

Możesz utworzyć stronę w dowolnej kategorii. Wybieram Firmę / Organizację, bez żadnego konkretnego powodu.

2. Kolejne kroki, które pokazuje Facebook, są opcjonalne i można je pominąć.

3. Następnie przejdź do strony deweloperów Facebooka.

W prawym górnym rogu najedź myszką na " Moje aplikacje ", a następnie w menu rozwijanym kliknij " Dodaj nową aplikację ".

Kliknij " Basic setup ", gdy Facebook poprosi cię o wybór platformy.

4. Podaj szczegółowe informacje dotyczące nazwy aplikacji i kontaktowego adresu e-mail.

Wybierz " Aplikacje dla stron " w kategorii.

Kliknij " Utwórz identyfikator aplikacji ".

5. Zostaniesz przeniesiony do deski rozdzielczej swojej aplikacji. Na pasku bocznym przejdź do " + Dodaj produkty " i wybierz " Messenger ", klikając przycisk " Rozpocznij ".

6. Wybierz " Setup Webhooks ".

7. Wypełnij wymagane pola, zastępując "URL wywołania zwrotnego" adresem URL aplikacji Heroku, Weryfikuj token za pomocą tokena użytego w pliku index.js i wybierz następujące pola subskrypcji:

message_deliveries

wiadomości

message_optins

messaging_postbacks

Uwaga: Upewnij się, że dodajesz " / webhook " do adresu zwrotnego URL, tak aby index.js wykonywał wymaganą funkcję, gdy Facebook próbuje pingować adres URL, może zweryfikować "Zweryfikuj token".

8. Kliknij " Zweryfikuj i zapisz ".

9. W sekcji " Generowanie tokenów " kliknij " Wybierz stronę " i wybierz stronę, którą utworzyłeś wcześniej.

To wygeneruje " Token dostępu do strony ", zapisz go gdzieś; będziesz go potrzebować później.

10. Następnie musisz wysłać zapytanie POST do aplikacji, korzystając z tokena dostępu do stron wygenerowanego w ostatnim kroku. Można to łatwo zrobić w terminalu. Po prostu uruchom następujące polecenie, zastępując PAGE_ACCESS_TOKEN generowanym tokenem dostępu do strony .

curl -X POST "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"

Powinieneś otrzymać odpowiedź " powodzenie " w Terminalu.

Więcej instalacji Heroku

Tak, jeszcze nie skończyliśmy. Nie blisko.

1. Przejdź do witryny Heroku i zaloguj się przy użyciu swojego identyfikatora e-mail.

2. Znajdź swoją aplikację na "pulpitach" i kliknij na nią.

3. Przejdź do karty Ustawienia.

4. Kliknij " Odsłoń Vars konfiguracji "

5. Dodaj parametr PAGE_ACCESS_TOKEN jako " config var " i kliknij " Dodaj ".

Kodowanie rzeczywistej bota

Teraz, gdy skończymy pracę, możemy skupić się na tym, co naprawdę ma znaczenie: sprawić, by boty zareagowały na wiadomości. Na początek zaprojektujemy bota, który po prostu odtwarza wiadomości, które otrzymuje. Jak się okazuje, to proste zadanie wymaga znacznej ilości kodu do działania.

1. Kodowanie odbiornika wiadomości

Zanim bot może odebrać wiadomość ponownie, musi być w stanie nasłuchiwać wiadomości. Zróbmy to najpierw.

W pliku index.js dodaj następujący kod:

[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]

Funkcja ta sprawdza, czy odebrane wiadomości są sprawdzane, a następnie sprawdza, czy w wiadomości znajduje się tekst. Jeśli znajdzie tekst w odebranej wiadomości, wywoła funkcję sendMessage (pokazaną później), przekazując identyfikator nadawcy i tekst do wysłania. Ważne jest zrozumienie następujących wartości i ich znaczenia:

event.message.text to tekst otrzymany w wiadomości. Na przykład, jeśli ktoś wyśle wiadomość "Witaj" do naszego bota, wartością event.message.text będzie "Witaj".

event.sender.id jest identyfikatorem osoby, która wysłała wiadomość do bota. Jest to wymagane, aby bot wiedział, do kogo skierować odpowiedź.

2. Kodowanie funkcji sendMessage

Pozwala teraz zakodować funkcję "sendMessage".

[js]

[/ js]

Funkcja "sendMessage" przyjmuje dwa parametry:

recipientId

wiadomość

Identyfikator odbiorcy jest wymagany, aby wiadomość mogła zostać zaadresowana do właściwego użytkownika.

Wiadomość jest faktycznym tekstem, który ma zostać wysłany w odpowiedzi.

3. Przesyłanie zmian do Heroku

Jeśli wykonałeś powyższe czynności, Twój bot powinien móc oddzwonić do otrzymanego tekstu. Najpierw jednak musisz wprowadzić zmiany w aplikacji hostowanej na Heroku. Aby to zrobić, wykonaj następujące czynności:

1. Uruchom Terminal.

2. Zmień katalog na swój katalog testbot
cd testbot

3. Wykonaj następujące czynności:

git dodaj.

Uwaga: Na końcu "git add" znajduje się "."

git commit -m "Pierwsze commitowanie"

git push heroku master

4. Teraz wyślij wiadomość na swoją stronę, a bot wyśle ci wiadomość ponownie.

Odpowiedzi warunkowe aka Making of Bot Smarter

Możemy użyć dopasowania tekstu, aby nasz bot komunikatora Facebooka zareagował zgodnie z określonymi słowami kluczowymi.

Aby to osiągnąć, musimy dodać kolejną funkcję. Nazywam to "warunkowymi odpowiedziami", ale możesz wybrać dowolną nazwę.

1. Kodowanie funkcji warunkowejResponse

[js]

funkcja conditionalResponses (recipientId, text) {
text = text || "";

var what = text.match (/ what / gi); // sprawdź, czy ciąg tekstowy zawiera słowo "co"; zignoruj sprawę
varGadget-Info.com = text.match (/ beebom / gi); // sprawdź, czy ciąg tekstowy zawiera słowo "beebom"; zignoruj sprawę
var who = text.match (/ who / gi); // sprawdź, czy ciąg tekstowy zawiera słowo "kto"; zignoruj sprawę
var you = text.match (/ you / gi); // sprawdź, czy ciąg tekstowy zawiera słowo "ty"; zignoruj sprawę

// jeśli tekst zawiera zarówno "co" i "beebom", wykonaj następujące czynności:

if (what! = null &&; Gadget-Info.com! = null) {
message = {
text: "Beebom to strona internetowa oferująca zasoby techniczne. Witamy."
}
sendMessage (recipientId, message);
return true;
}

// jeśli tekst zawiera zarówno "kto", jak i "ty", wykonaj następujące czynności:
if (who! = null && you! = null) {
message = {
text: "Poproszono mnie, abym nie dyskutował o mojej tożsamości w Internecie."
}
sendMessage (recipientId, message);
return true;
}

// jeśli nic nie pasuje, zwróć false, aby kontynuować wykonywanie funkcji wewnętrznej.
return false;
};

[/ js]

W liniach od 4 do 7 zdefiniowaliśmy zmienne w zależności od dopasowania otrzymanego ciągu do poszczególnych słów. Najlepszą rzeczą w używaniu "text.match ()" jest to, że używa Wyrażeń regularnych (zwykle nazywane regex, czytaj więcej tutaj). Jest to dla nas dobre, ponieważ oznacza to, że jeśli nawet część słowa w otrzymanym tekście pasuje do któregokolwiek ze słów, o których wspominaliśmy w text.match (), zmienna nie będzie miała wartości NULL. Oznacza to, że jeśli odebrana wiadomość brzmi "Co to jest Beebom?", "Var what" i "var beebom" nie będą miały wartości null, ponieważ słowo "What's" zawiera słowo "what". Zostajemy więc uratowani od tworzenia dodatkowych instrukcji dla każdej odmiany, w której ktoś może powiedzieć "Co".

2. Edytowanie odbiornika wiadomości

Musimy również zmodyfikować program nasłuchujący komunikaty, aby upewnić się, że stara się dopasować otrzymany tekst do funkcji "warunkoweRozpowiedzi".

[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) {

// najpierw spróbuj sprawdzić, czy odebrana wiadomość kwalifikuje się do odpowiedzi warunkowej.
if (! conditionalResponses (event.sender.id, event.message.text)) {

// jeśli nie, po prostu odeślij otrzymaną wiadomość do nadawcy.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ js]

Zmiany w słuchaczu mogą nie wyglądać bardzo drastycznie, ale ich efekty są pewne. Teraz słuchacz najpierw próbuje odpowiedzieć warunkową odpowiedzią, a jeśli nie ma poprawnego warunku dla odebranej wiadomości, po prostu odtwarza ją z powrotem do użytkownika.

3. Przesyłanie zmian do Heroku

Zanim wypróbujesz nowe funkcje, będziesz musiał przesłać zaktualizowany kod do aplikacji hostowanej na Heroku. Aby to zrobić, wykonaj następujące czynności:

1. Uruchom Terminal.

2. Zmień katalog na swój katalog testbot
cd testbot

3. Wykonaj następujące czynności:

git dodaj.

Uwaga: Na końcu "git add" znajduje się "."

git commit -m "Dodawanie funkcji warunkowych"

git push heroku master

4. Teraz wyślij wiadomość na swoją stronę, a bot wyśle ci wiadomość ponownie.

Jeszcze większa funkcjonalność

Nasz bot odpowiada teraz na mały zestaw poleceń w miłych, dobrze zorganizowanych odpowiedziach. Ale nadal nie jest zbyt użyteczny. Zróbmy więcej zmian w kodzie, aby nasz bot był bardziej " funkcjonalnym " oprogramowaniem. Będziemy ulepszać wiele funkcji i dodawać kolejne, więc ciesz się.

1. Edytowanie odbiornika wiadomości

Nasz słuchacz wiadomości na tym etapie działa dobrze. Jednak nie jest on ładnie sformatowany i jeśli nadal będziemy zwiększać zagnieżdżone instrukcje if, aby dodać dodatkowe " kontrole stanu ", szybko stanie się to brzydkie, aby je zobaczyć, trudne do zrozumienia i wolniejsze w wykonaniu. Nie chcemy tego, prawda? Zróbmy kilka zmian.

Uwaga: W odbiorniku wiadomości znajduje się wiersz kodu "res.sendStatus (200)", linia ta wysyła kod statusu 200 do Facebooka, informując, że funkcja została pomyślnie wykonana. Zgodnie z dokumentacją Facebooka, Facebook czeka na maksymalnie 20 sekund, aby otrzymać status 200, zanim zdecyduje, że wiadomość nie przeszła i zatrzymuje wykonywanie kodu.

Nasz nowy słuchacz wiadomości wygląda tak. Używamy komendy " res.sendStatus (200) ", aby zatrzymać wykonywanie funkcji, gdy tylko warunek zostanie dopasowany i wykonany.

[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) {

// najpierw sprawdź tekst wiadomości w warunkach introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// z braku lepszego imienia, nazwałem tę nowąResponse: p; sprawdź to dalej
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// else, po prostu wywołaj echo oryginalnej wiadomości
jeszcze {
// zastąp echo poprawną listą poleceń
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ js]

2. Kodowanie funkcji newResponse

Nasz program nasłuchujący teraz sprawdza również tekst wiadomości pod względem zestawu warunków w "newResponse", ale najpierw musimy zakodować funkcję newResponse. Będziemy korzystać z tej funkcji, aby sprawdzić, czy użytkownik poprosił o sugestie dotyczące artykułu na stronieGadget-Info.com, przeszuka termin zapytania na stronie internetowej i wyświetli link do użytkownika. Jeszcze raz użyjemy wyrażeń regularnych do dopasowania tekstu do konkretnych słów kluczowych.

[js]

function newResponse (recipientId, text) {
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);

// sprawdź, czy użytkownik pyta o sugestie dotyczące artykułów
if (suggest! = null && article! = null) {
var query = "";
// jeśli zapytania dotyczące artykułów są sprawdzane, sprawdź temat, którego szuka użytkownik
if (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (browser! = null) {
query = "Browser";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (recipientId, query);
return true
}
return false;
};

[/ js]

Używamy innej niestandardowej funkcji o nazwie "sendButtonMessage", aby wysłać wiadomość na wypadek, gdyby użytkownik prosi o sugestie dotyczące artykułu. Stworzymy to w następnej kolejności.

3. Kodowanie funkcji sendButtonMessage

Funkcja sendButtonMessage pobiera dwa parametry, identyfikator odbiorcy i zapytanie. Identyfikator odbiorcy służy do identyfikacji użytkownika, do którego wiadomość musi zostać wysłana, a zapytanie służy do zidentyfikowania tematu, w którym użytkownik chce otrzymywać sugestie dotyczące artykułu.

[js]

function sendButtonMessage (recipientId, query) {
var messageData = {
odbiorca: {
id: recipientId
},
wiadomość: {
przywiązanie: {
typ: "szablon",
ładunek: {
template_type: "button",
text: "To jest to, co znalazłem dla" zapytania +,
guziki:[{
wpisz: "web_url",
adres URL: "//www.beebom.com/?s="+query,
title: "Beebom:" + zapytanie
}]
}
}
}
};

callSendAPI (messageData);
}

[/ js]

Ponownie używamy funkcji niestandardowej; tym razem, aby wysłać ostateczną wiadomość, z linkami do artykułu, do użytkownika. Funkcja jest pod wieloma względami podobna do funkcji "sendMessage", którą wcześniej kodowaliśmy, ale jest bardziej ogólna w sposobie, w jaki przyjmuje dane wiadomości, co nam odpowiada, ponieważ nasze dane wiadomości zmieniają się wraz z zapytaniem, które robi użytkownik.

4. Kodowanie funkcji callSendAPI

Funkcja "callSendAPI" przyjmuje pojedynczy parametr, "messageData" . Ten parametr zawiera wszystkie dane wiadomości, odpowiednio sformatowane zgodnie z regułami Facebooka, tak aby komunikator mógł wyświetlać je poprawnie użytkownikowi.

[js]

function callSendAPI (messageData) {
żądanie({
uri: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: "POST",
json: messageData

}, function (error, response, body) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;

console.log ("Pomyślnie wysłano ogólną wiadomość o identyfikatorze% s do adresata% s",
messageId, recipientId);
} else {
console.error ("Nie można wysłać wiadomości.");
console.error (odpowiedź);
console.error (błąd);
}
});
}

[/ js]

5. Przesyłanie zmian do Heroku

Jesteśmy ostatnim krokiem w kierunku ulepszenia naszego uaktualnionego bota. Musimy tylko przesłać wszystkie zmiany kodu do Heroku. Proces jest taki sam jak poprzednio i jest opisany poniżej:

1. Uruchom Terminal.

2. Zmień katalog na katalog testbot .
cd testbot

3. Wykonaj następujące czynności:

git dodaj.

Uwaga: Na końcu tej komendy znajduje się "." .

git commit -m "poprawia sprawdzanie stanu i formatowanie"

git push heroku master

4. Teraz wyślij wiadomość typu "Zaproponuj artykuł na Androida" lub "Beebom, zasugeruj mi dowolny artykuł na temat Androida"; a bot wyśle ładnie sformatowaną wiadomość z linkiem, który możesz kliknąć, aby otworzyć artykuły związane z zapytaniem.

Kop głębiej

Teraz, kiedy już wiesz, jak rozpocząć tworzenie botów na Facebooku, przejrzyj dokumentację na Facebooku, jak tworzyć boty komunikatora Facebooka. Chociaż dokumentacja nie jest dobra dla początkujących, nie jesteś już początkującym. Powinieneś sprawdzić oficjalną dokumentację i spróbować dowiedzieć się, jak uczynić swojego bota jeszcze mądrzejszym. Teaser: możesz wysyłać wiadomości ze zdjęciami i przyciskami! Możliwe jest również korzystanie z usług takich jak Wit.ai i Api.ai, aby zakodować swój bot, a następnie zintegrować go z Facebookiem, ale w moich słabych próbach korzystania z tych usług, Wit.ai nie działa zbyt dobrze, a Api.ai ma ostrą krzywą uczenia dla początkujących.

Czy kiedykolwiek stworzyłeś bota Messengera na Facebooku? Jeśli tak, jak go opracowałeś i co możesz zrobić? Czy korzystałeś z usług takich jak Wit.ai i Api.ai, aby stworzyć swojego bota? Jeśli nigdy nie próbowałeś kodować bota, idź i stwórz własny bot komunikatora Facebooka, uczyń go mądrzejszym i lepszym, i daj nam znać o swoich doświadczeniach w komentarzach poniżej.