Internet

Jak stworzyć bota na Facebooku Messenger (przewodnik)

Jak stworzyć bota na Facebooku Messenger (przewodnik)

Funkcja „botów komunikatorów” na Facebooku nie jest niczym nowym, a wiele niesamowitych botów już istnieje. Jednak zasoby dotyczące tego, jak dokładnie zbudować własnego bota, są ograniczone i brakuje im wyjaśnienia dla osób, które są nowicjuszami w interfejsie Facebook Graph API. Boty komunikatora wymagają teraz również korzystania z adresu URL wywołania zwrotnego elementu webhook zabezpieczonego protokołem SSL (więcej o tym później), a konfigurowanie SSL nie jest dla wszystkich i również kosztuje.

W tym artykule przeprowadzę Cię przez cały proces tworzenia prostego bota komunikatora na Facebooku, ponieważ dokumentacja Facebooka jest raczej słabo wyjaśniona. Skonfigurujemy aplikację w chmurze, która używa protokołu https, zakodujemy bota w Node.js (który jest javascript, język po stronie serwera), użyjemy git do wypchnięcia kodu do aplikacji w chmurze i przetestujemy go na Facebooku Messenger.

Konfiguracja Bot

Będziesz potrzebować Node zainstalowanego na swoim laptopie. Jeśli nie, przejdź do witryny sieci Web Node, aby go pobrać i zainstalować.

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

1. Uruchom Terminal.

2. Potrzebujesz oddzielnego katalogu do przechowywania kodu.

3. Następnie zainicjuj aplikację Node.
npm init

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

5. W Finderze otwórz katalog „testbot”, Który utworzyłeś i znajdź plik o nazwie„package.json„; otwórz to w edytorze, takim jak Sublime Text.

6. W tym pliku musimy dodać linię
"start": "index.js węzła"

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 TestBot Server');
);
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 ', zapamiętaj tę wartość, 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 utworzyć repozytorium git w naszym katalogu.

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

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

Uwaga: Upewnij się, że znajdujesz się w „testbot”W terminalu. Możesz to zrobić, wpisując polecenie pwd do 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 nawet do stron programistów Facebooka, potrzebujemy adresu URL wywołania zwrotnego, z którym Facebook może rozmawiać. Ten adres URL musi używać rozszerzenia protokół https, co oznacza, że ​​musimy zainstalować certyfikat SSL na naszej stronie internetowej; ale to jest przewodnik dla początkujących po botach Facebook Messenger, więc nie komplikujmy rzeczy. Użyjemy Heroku do wdrożenia naszego kodu. Heroku udostępnia adresy URL https dla Twoich aplikacji i ma bezpłatny plan, który spełnia nasze (bardzo podstawowe) wymagania.

Wejdź na stronę Heroku i zarejestruj się.

Uwaga: W polu z napisem „Wybierz swój podstawowy język programowania” wpisz „Używam innego języka”.

Gdy skończysz, zainstaluj pasek narzędzi Heroku dla swojego systemu operacyjnego (Mac, dla mnie) i zainstaluj go. Dzięki temu uzyskasz dostęp do Heroku na swoim terminalu (lub w wierszu poleceń w systemie Windows).

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

1. Uruchom Terminal

2. Wpisz Zaloguj się do heroku

3. Wpisz heroku create

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

5. Po wykonaniu tej czynności aplikacja jest w zasadzie aktywna i możesz odwiedzić łącze w przeglądarce, aby sprawdzić, czy wszystko działa poprawnie. Powinien otworzyć stronę internetową z napisem „To jest serwer testbota„.

Konfiguracja Facebooka

Czas połączyć naszego bota z Facebookiem! Będziesz musiał 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ę.

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

3. Następnie przejdź do witryny programistów Facebooka.

4. Uzupełnij dane dotyczące nazwy aplikacji i kontaktowego adresu e-mail.

5. Zostaniesz przeniesiony do pulpitu nawigacyjnego aplikacji. Na pasku bocznym przejdź do „+Dodaj produkty”I wybierz„Posłaniec”Klikając na„Zaczynaj”.

6. Wybierz „Skonfiguruj webhooki„.

7. Wypełnij wymagane pola, zastępując „Callback URL” adresem URL aplikacji Heroku, Verify Token tokenem używanym w pliku index.js i wybierz następujące pola subskrypcji:

Uwaga: Upewnij się, że dodałeś „/ webhook”Na adres URL wywołania zwrotnego, aby plik index.js wykonywał wymaganą funkcję, gdy Facebook próbuje pingować adres URL, może zweryfikować„ Weryfikuj token ”.

8. Kliknij „Zweryfikuj i zapisz„.

9. W „Generowanie tokenów”, Kliknij„Wybierz stronę”I wybierz utworzoną wcześniej stronę.

Spowoduje to wygenerowanie „Token dostępu do strony„, Zapisz to gdzieś; będziesz go potrzebować później.

10. Następnie będziesz musiał wykonać zapytanie POST do swojej aplikacji, używając tokena dostępu do strony wygenerowanego w ostatnim kroku. Można to łatwo zrobić w terminalu. Po prostu uruchom następujące polecenie, zastąpienie PAGE_ACCESS_TOKEN wygenerowanym tokenem dostępu do strony.

curl -X POST “https://graph.facebook.com/v2.6/me/subscribe_apps?access_token=PAGE_ACCESS_TOKEN”

Powinieneś otrzymać „sukces”Odpowiedź w Terminalu.

Więcej Heroku Setup

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

1. Przejdź do witryny Heroku i zaloguj się za pomocą swojego identyfikatora e-mail.

2. Zlokalizuj swoją aplikację w „pulpicie nawigacyjnym” i kliknij ją.

3. Przejdź do zakładki Ustawienia.

4. Kliknij „Pokaż zmienne konfiguracji

5. Dodaj PAGE_ACCESS_TOKEN jako „config var„I kliknij„Dodaj„.

Kodowanie rzeczywistego bota

Teraz, gdy skończyliśmy z podstawową pracą, możemy skupić się na tym, co naprawdę ważne: sprawieniu, by bot odpowiadał 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 do działania znacznej ilości kodu.

1. Kodowanie odbiornika wiadomości

Zanim bot będzie mógł powtórzyć wiadomość, musi mieć możliwość nasłuchiwania 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;
dla (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]

Co robi ta funkcja, to sprawdza otrzymane wiadomości, a następnie sprawdza, czy w wiadomości jest tekst. Jeśli znajdzie tekst w otrzymanej wiadomości, wywołuje funkcję sendMessage (pokazaną później), przekazując identyfikator nadawcy i tekst do odesłania. Ważne jest, aby zrozumieć następujące wartości i ich znaczenie:

2. Kodowanie funkcji sendMessage

Zakodujmy teraz funkcję „sendMessage”.

[js]

function sendMessage (recipientId, message)
żądanie(
url: „https://graph.facebook.com/v2.6/me/messages”,
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
metoda: „POST”,
json:
odbiorca: id: recipientId,
wiadomość: wiadomość,

, function (błąd, odpowiedź, treść)
if (błąd)
console.log ('Błąd podczas wysyłania wiadomości:', błąd);
else if (response.body.error)
console.log ('Błąd:', response.body.error);

);
;

[/ js]

Funkcja „sendMessage” przyjmuje dwa parametry:

Identyfikator odbiorcy jest wymagany, aby można było zaadresować wiadomość do właściwego użytkownika.

Wiadomość to rzeczywisty tekst, który ma zostać wysłany w odpowiedzi.

3. Przekazywanie zmian do Heroku

Jeśli wykonałeś powyższe kroki, twój bot powinien być w stanie powtórzyć otrzymany tekst. Ale najpierw musisz wprowadzić zmiany do aplikacji hostowanej na Heroku. Aby to zrobić, wykonaj poniższe czynności:

1. Uruchom Terminal.

2. Zmień katalog na katalog testbota
cd testbot

3. Wykonaj następujące kroki:

4. Teraz wyślij wiadomość na swoją stronę, a bot odeśle wiadomość z powrotem do Ciebie.

Odpowiedzi warunkowe, czyli uczynienie bota mądrzejszym

Możemy użyć dopasowywania tekstu, aby umożliwić naszemu botowi Facebook Messenger odpowiadanie na określone specjalne słowa kluczowe.

Aby to osiągnąć, musimy dodać kolejną funkcję. Nazywam to „ConditionalResponses”, ale możesz wybrać dowolną nazwę.

1. Kodowanie funkcji conditionalResponses

[js]

function conditionalResponses (recipientId, text)
tekst = tekst || "";

var what = text.match (/ what / gi); // sprawdź, czy ciąg tekstowy zawiera słowo "co"; ignoruj ​​wielkość liter
var beebom = text.match (/ beebom / gi); // sprawdź, czy ciąg tekstowy zawiera słowo „beebom”; ignoruj ​​wielkość liter
var who = text.match (/ who / gi); // sprawdź, czy ciąg tekstowy zawiera słowo „who”; ignoruj ​​wielkość liter
var you = text.match (/ you / gi); // sprawdź, czy ciąg tekstowy zawiera słowo „ty”; ignoruj ​​wielkość liter

// jeśli tekst zawiera zarówno „co”, jak i „beebom”, zrób to:

if (co! = null &&; beebom! = null)
wiadomość =
text: "Beebom to witryna oferująca zasoby techniczne. Witamy."

sendMessage (recipientId, message);
powrót prawda;

// jeśli tekst zawiera zarówno „who”, jak i „you”, zrób to:
if (who! = null && you! = null)
wiadomość =
tekst: "Poproszono mnie, żebym nie rozmawiał o swojej tożsamości w Internecie."

sendMessage (recipientId, message);
powrót prawda;

// jeśli nic nie zostało dopasowane, zwraca 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. Najlepsze w używaniu metody „text.match ()” jest to, że używa ona wyrażeń regularnych (zwykle nazywanych regex, więcej informacji znajdziesz tutaj). Jest to dla nas dobre, ponieważ oznacza to, że tak długo, jak nawet część słowa w otrzymanym tekście pasuje do któregokolwiek ze słów, które wymieniliśmy w text.match (), zmienna nie będzie pusta. Oznacza to, że jeśli odebraną wiadomością było „What's Beebom?”, „Var what” i „var beebom” nie będą zerowe, ponieważ słowo „What's” zawiera słowo „what”. Dzięki temu nie musimy tworzyć dodatkowych instrukcji dla każdej odmiany, w których ktoś mógłby powiedzieć „Co”.

2. Edycja Listenera

Musimy również wyedytować zakodowany przez nas odbiornik wiadomości, aby upewnić się, że próbuje dopasować otrzymany tekst również do funkcji „conditionalResponses”.

[js]

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

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

// jeśli nie, po prostu powtórz odebraną wiadomość z powrotem do nadawcy.
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

Zmiany w słuchaczu mogą nie wyglądać zbyt drastycznie, ale ich skutki na pewno są. Teraz słuchacz najpierw próbuje odpowiedzieć warunkowymi odpowiedziami, a jeśli nie ma prawidłowego warunku dla odebranej wiadomości, po prostu odsyła wiadomość z powrotem do użytkownika.

3. Przekazywanie zmian do Heroku

Zanim będziesz mógł wypróbować nowe funkcje, musisz przesłać zaktualizowany kod do aplikacji hostowanej na Heroku. Aby to zrobić, wykonaj poniższe czynności:

1. Uruchom Terminal.

2. Zmień katalog na katalog testbota
cd testbot

3. Wykonaj następujące kroki:

4. Teraz wyślij wiadomość na swoją stronę, a bot odeśle wiadomość z powrotem do Ciebie.

Jeszcze większa funkcjonalność

Nasz bot odpowiada teraz na niewielki zestaw poleceń w ładnych, dobrze zorganizowanych odpowiedziach. Ale nadal nie jest to zbyt przydatne. Wprowadźmy więcej zmian w kodzie, aby nasz bot był bardziej ”funkcjonalny”Kawałek oprogramowania. Będziemy przebudowa wielu funkcji, i dodać jeszcze kilka, więc bądź podekscytowany.

1. Edycja odbiornika wiadomości

Nasz odbiornik wiadomości na tym etapie działa po prostu dobrze. Jednak nie jest dobrze sformatowany i gdybyśmy nadal zwiększali zagnieżdżone instrukcje if, aby dodać dodatkowe „kontrole stanu„, Szybko stanie się brzydki, trudny do zrozumienia i wolniejszy w wykonaniu. Nie chcemy tego, prawda? Wprowadźmy pewne zmiany.

Uwaga: W odbiorniku wiadomości znajduje się wiersz kodu, który czyta „Res.sendStatus (200)”, ta linia wysyła kod statusu 200 do Facebooka, informując go, że funkcja została pomyślnie wykonana. Zgodnie z dokumentacją Facebooka, Facebook czeka maksymalnie 20 sekund, aby otrzymać status 200, zanim zdecyduje, że wiadomość nie przeszła i przestaje wykonywać kod.

Nasz nowy odbiornik wiadomości wygląda następująco. Używamy "res.sendStatus (200)”Polecenie zatrzymania wykonywania funkcji, gdy tylko warunek zostanie dopasowany i wykonany.

[js]

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

// najpierw sprawdź tekst wiadomości pod kątem warunków introResponse
if (introResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// z braku lepszej nazwy nazwałem to newResponse: p; sprawdź to dalej
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// w przeciwnym razie powtórz echo oryginalnej wiadomości
else
// zamień echo na prawidłową listę poleceń
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

2. Kodowanie funkcji newResponse

Nasz odbiornik wiadomości sprawdza teraz tekst wiadomości pod kątem zestawu warunków w „Nowa odpowiedź” również, ale najpierw musimy zakodować funkcję newResponse. Będziemy używać tej funkcji, aby sprawdzić, czy użytkownik o to poprosił sugestie dotyczące artykułów ze strony internetowej Beebom, wyszukaj zapytanie termin na stronie internetowej i Przedstaw link do użytkownika. Po raz kolejny użyjemy wyrażeń regularnych, aby dopasować tekst do określonych słów kluczowych.

[js]

function newResponse (recipientId, text)
tekst = tekst || "";
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 w ogóle pyta o propozycje artykułów
if (Suggest! = null && article! = null)
var query = "";
// jeśli są zapytania o sugestie artykułów, 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 (przeglądarka! = null)
query = "Przeglądarka";
else if (vpn! = null)
zapytanie = "VPN";

sendButtonMessage (recipientId, zapytanie);
powrót prawda

return false;
;

[/ js]

Używamy innej funkcji niestandardowej o nazwie „SendButtonMessage” aby wysłać wiadomość w przypadku, gdy użytkownik prosi o sugestie dotyczące artykułów. Stworzymy to w następnej kolejności.

3. Kodowanie funkcji sendButtonMessage

Funkcja sendButtonMessage przyjmuje dwa parametry: a identyfikator odbiorcy i a pytanie. Identyfikator odbiorcy służy do identyfikacji użytkownika, do którego ma zostać wysłana wiadomość, a zapytanie służy do określenia tematu, na który użytkownik oczekuje sugestii dotyczących artykułów.

[js]

function sendButtonMessage (recipientId, query)
var messageData =
odbiorca:
id: odbiorcaId
,
wiadomość:
przywiązanie:
type: "szablon",
ładunek:
template_type: "przycisk",
text: "Oto, co znalazłem dla" + zapytanie,
guziki:[
type: "web_url",
url: „http://www.beebom.com/?s="+query,
title: "Beebom:" + zapytanie
]



;

callSendAPI (messageData);

[/ js]

Po raz kolejny używamy funkcji niestandardowej; tym razem, aby wysłać użytkownikowi końcową wiadomość z linkami do artykułów. Funkcja jest pod wieloma względami podobna do funkcji "Wyślij wiadomość" funkcja, którą zakodowaliśmy wcześniej, ale jest bardziej ogólna w sposobie, w jaki pobiera dane wiadomości, co nam odpowiada, ponieważ nasze dane wiadomości zmieniają się wraz z zapytaniem, które użytkownik zadaje.

4. Kodowanie funkcji callSendAPI

Plik „CallSendAPI” funkcja przyjmuje pojedynczy parametr, plik „MessageData”. Ten parametr zawiera wszystkie dane wiadomości, odpowiednio sformatowane zgodnie z regułami Facebooka, tak aby komunikator mógł je poprawnie wyświetlić użytkownikowi.

[js]

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

, function (błąd, odpowiedź, treść)
if (! błąd && 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 odbiorcy% s",
messageId, recipientId);
else
console.error ("Nie można wysłać wiadomości.");
console.error (odpowiedź);
console.error (błąd);

);

[/ js]

5. Przekazywanie zmian do Heroku

Jesteśmy na ostatnim etapie, aby nasz ulepszony bot zaczął działać. Musimy tylko przekazać wszystkie zmiany w kodzie do Heroku. Proces jest taki sam jak poprzednio i został przedstawiony poniżej:

1. Uruchom Terminal.

2. Zmień katalog na testbot informator.
cd testbot

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

4. Teraz wyślij wiadomość taką jak „Zaproponuj artykuł na Androida” lub „Beebom, zasugeruj mi dowolny artykuł na temat Androida”; a bot wyśle ​​ładnie sformatowaną wiadomość z linkiem, którego możesz dotknąć, aby otworzyć artykuły związane z zapytaniem.

ZOBACZ RÓWNIEŻ: 16 porad i wskazówek na Facebooku Messenger, które powinieneś wiedzieć

Kop głębiej

Teraz, gdy wiesz, jak rozpocząć tworzenie botów komunikatorów Facebooka, zapoznaj się z dokumentacją Facebooka, aby dowiedzieć się, jak tworzyć boty komunikatorów 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 z obrazami i przyciskami! Możliwe jest również użycie usług takich jak Wit.ai i Api.ai do zakodowania swojego bota, a następnie zintegrowania 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 się dla początkujących.

Czy kiedykolwiek stworzyłeś bota komunikatora na Facebooku? Jeśli tak, to w jaki sposób go opracowałeś i co może zrobić? Czy użyłeś usług takich jak Wit.ai i Api.ai do stworzenia swojego bota? Jeśli nigdy nie próbowałeś kodować bota, stwórz własnego bota komunikatora na Facebooku, uczyń go mądrzejszym i lepszym, i daj nam znać o swoich doświadczeniach w komentarzach poniżej.

Najczęściej rekrutowani studenci indyjscy według Facebooka w 2011
Facebook przyciąga wielu studentów z większości najlepszych indyjskich uczelni, takich jak IIT i NIT, oferując im pięciocyfrową pensję. Oto kilku szcz...
Dodanie obsługi czatu na żywo do Twojej witryny za pomocą Zopim
Jest całkiem oczywiste, że jako użytkownicy czasami napotykamy trudności podczas poruszania się po witrynie internetowej. Nienawidzimy tej części, gdy...
Jak Jak chronić swój iPhone przed złośliwym oprogramowaniem
Jak chronić swój iPhone przed złośliwym oprogramowaniem
Podobnie jak ludzie nie myślą, że komputery Mac mogą dostać wirusy, wielu użytkowników iPhone'ów uważa, że ​​nie muszą martwić się złośliwym oprogramo...