Značajka "messenger botova" na Facebooku nije ništa novo, a već postoji mnogo strašnih robota. Međutim, resursi koji se tiču točno kako izgraditi svoj vlastiti bot su rijetki, a nedostaje im objašnjenje za ljude koji su novi u API-ju Facebook Grapha. Messenger botovi sada također zahtijevaju korištenje SSL sigurnog webhook URL-a za povratni poziv (više o tome kasnije), a postavljanje SSL-a nije za svakoga, a košta i novac.
U ovom članku, provest ću vas kroz cijeli proces stvaranja jednostavnog botova na Facebooku, jer je vlastita dokumentacija Facebooka prilično slabo objašnjena. Postavit ćemo aplikaciju u oblaku koja koristi https protokol, kodirati bot u Node.js (koji je javascript, jezik na strani poslužitelja), koristiti git kako bi gurnuo kôd u aplikaciju u oblaku i testirao ga na Facebook Messengeru.
Postavi Bot
Trebat će vam Node instaliran na vašem prijenosnom računalu. Ako to ne učinite, idite na web-mjesto Node da biste ga preuzeli i instalirali.
Kada završite, možete nastaviti s postavljanjem za bot. Slijedite korake u nastavku:
1. Pokrenite terminal.
2. Potreban vam je poseban direktorij za držanje koda.
- Izradite novi direktorij
mkdir testbot
- Promijenite svoj radni direktorij u direktorij koji ste upravo stvorili
cd testbot
3. Zatim pokrenite program Node. npm init
- Od vas će se tražiti da unesete podatke o svojoj aplikaciji, samo koristite zadane postavke pritiskom na Enter za sve.
4. Instalirajte pakete npm install express body-parser request --save
- Naredba će se pokrenuti i dati neka upozorenja; ignoriraj ih.
5. U Finderu otvorite direktorij “ testbot ” koji ste stvorili i pronađite datoteku pod nazivom “ package.json ”; otvorite ga u uređivaču kao što je Sublime Text.
6. U ovoj datoteci moramo dodati redak "start": "node index.js"
- Ne zaboravite dodati ", " na kraju prethodnog retka.
7. Zatim kreirajte novu datoteku u Sublime Text i stavite sljedeći kod u nju:
[Js]
var express = require ('express');
var bodyParser = require ('body-parser');
var zahtjev = zahtijeva ('zahtjev');
var app = express ();
app.use (bodyParser.urlencoded ({prošireno: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funkcija (req, res) {
res.send ('Ovo je TestBot poslužitelj');
});
app.get ('/ webhook', funkcija (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query [ 'hub.challenge']);
} else {
res.send ("Nevažeći znak potvrde");
}
});
[/ Js]
Spremite ovu datoteku kao index.js
Napomena: U retku 13, vrijednost 'hub.verify_token' postavljena je kao ' testbot_verify_token', zapamtite ovu vrijednost jer će se koristiti pri izradi webhooka na Facebooku.
Stvorite spremište Git
Sada kada smo postavili botovo rukovanje povratnim pozivom, moramo gurnuti kod u Heroku. Za to trebamo stvoriti git repozitorij u našem imeniku.
Napomena: "git" je sustav kontrole verzija za datoteke i softverski kod. Više o tome možete pročitati na Wikipediji.
Stvaranje git repozitorija je jednostavno i traje samo nekoliko naredbi Terminala.
Napomena: Provjerite nalazite li se u imeniku " testbot " na terminalu. To možete učiniti tako da upišete naredbu pwd u terminal.
Slijedite ove korake da biste stvorili git repozitorij:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Postavite Heroku
Prije nego što odemo na stranice razvojnih programera Facebooka, potreban je URL za povratni poziv s kojim Facebook može razgovarati. Ovaj URL mora koristiti https protokol, što znači da trebamo instalirati SSL certifikat na našu web-lokaciju; ali, ovo je početnički vodič za botove na Facebooku, pa nemojmo komplicirati stvari. Upotrijebit ćemo Heroku za implementaciju našeg koda. Heroku daje https URL-ove za vaše aplikacije i ima besplatan plan koji zadovoljava naše (vrlo osnovne) zahtjeve.
Idite na Heroku web stranicu i registrirajte se.
Napomena: U polju koje glasi “Izaberite vaš primarni razvojni jezik” koristite “Koristim drugi jezik”.
Kada završite s tim, instalirajte Heroku toolbelt za vaš OS (Mac, za mene) i instalirajte ga. To će vam omogućiti pristup Herokuu vašeg Terminala (ili naredbenog retka u sustavu Windows).
Zatim ćemo izraditi aplikaciju na Heroku, koja će sadržavati cijeli kod za našeg bota. Slijedite korake u nastavku:
1. Pokrenite terminal
2. Upišite heroku login
- Od vas će se tražiti da unesete adresu e-pošte i zaporku.
- Upišite svoju e-poštu, pritisnite Enter; zatim upišite svoju lozinku, pritisnite Enter.
- Bit ćete prijavljeni na heroku
3. Upišite heroku create
- To će stvoriti aplikaciju na Heroku i pružiti vam hipervezu. Imajte na umu da veza koristi https protokol. Polako, zar ne?
4. Sada možete gurnuti svoj kôd aplikacije na Heroku git push heroku master
5. Kada se to učini, vaša je aplikacija u osnovi živa, a možete posjetiti vezu u pregledniku kako biste provjerili radi li se sve dobro. Trebao bi otvoriti web-stranicu s natpisom " Ovo je TestBot poslužitelj ".
Postavljanje Facebooka
Vrijeme je za povezivanje našeg bota s Facebookom! Morat ćete stvoriti novu Facebook stranicu ili koristiti postojeću koju posjedujete. Pokazat ću vam kako nastaviti s izradom nove Facebook stranice.
1. Idite na Facebook i stvorite novu stranicu.
- Možete stvoriti stranicu u kojoj god kategoriji želite. Odlučio sam se za tvrtku / organizaciju, bez posebnog razloga.
2. Sljedeći koraci koje Facebook prikazuje nisu obavezni i mogu se preskočiti.
3. Zatim prijeđite na web-lokaciju Facebook programera.
- U gornjem desnom kutu postavite pokazivač miša na " Moje aplikacije ", a zatim na padajućem izborniku kliknite " Dodaj novu aplikaciju ".
- Kliknite na " osnovno podešavanje " kada vas Facebook zatraži da odaberete platformu.
4. Popunite podatke o nazivu aplikacije i adresi e-pošte za kontakt.
- Odaberite " Aplikacije za stranice " u kategoriji.
- Kliknite na " Kreiraj ID aplikacije ".
5. Bit ćete preusmjereni na nadzornu ploču svoje aplikacije. Na bočnoj traci idite na " + Dodaj proizvode " i odaberite " Messenger " klikom na gumb " Započni ".
6. Odaberite “ Postavljanje web-kuka ”.
7. Ispunite potrebna polja, zamjenjujući "URL povratnog poziva" s URL-om aplikacije Heroku, potvrdite oznaku s oznakom koja se koristi u datoteci index.js i odaberite sljedeća polja pretplate:
- message_deliveries
- poruke
- message_optins
- messaging_postbacks
Napomena: Provjerite jeste li dodali " / webhook " na URL za povratni poziv kako bi index.js izvršio potrebnu funkciju kada Facebook pokuša pingati URL, može provjeriti "Verify Token".
8. Kliknite na " Potvrdi i spremi ".
9. U odjeljku " Generiranje tokena " kliknite na " Odabir stranice " i odaberite stranicu koju ste ranije stvorili.
To će generirati “ Token pristupa stranici ”, spremiti ga negdje; trebat će vam kasnije.
10. Zatim ćete morati napraviti upit za POST aplikaciju pomoću oznake toka pristupa stranici generirane u zadnjem koraku. To se lako može učiniti na terminalu. Samo pokrenite sljedeću naredbu, zamjenjujući PAGE_ACCESS_TOKEN oznakom pristupa stranici koju ste generirali .
curl -X POST “//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”
Trebali biste dobiti odgovor " uspjeha " na terminalu.
Više postavke za Heroku
Da, još nismo završili. Ni blizu.
1. Idite na web-mjesto Heroku i prijavite se s ID-om svoje e-pošte.
2. Pronađite aplikaciju u “nadzornoj ploči” i kliknite na nju.
3. Idite na karticu Postavke.
4. Kliknite na " Otkrij konfig. Vars "
5. Dodajte PAGE_ACCESS_TOKEN kao " config var " i kliknite " Dodaj ".
Kodiranje stvarnog bot-a
Sada kada smo završili s radom, možemo se usredotočiti na ono što je doista važno: učiniti bot odgovoriti na poruke. Za početak ćemo samo dizajnirati bot koji jednostavno odjekuje poruke koje prima. Kako se ispostavilo, ovaj jednostavan zadatak zahtijeva značajnu količinu koda za funkcioniranje.
1. Kodiranje slušatelja poruka
Prije nego bot može vratiti e-poruku, mora biti u stanju slušati poruke. Učinimo to prvo.
U datoteci index.js dodajte sljedeći kôd:
[Js]
app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0].
za (i = 0; i <događaji.length; i ++) {
var događaj = događaji [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ Js]
Ono što ova funkcija radi jest da provjerava primljene poruke, a zatim provjerava ima li u poruci tekst. Ako pronađe tekst u primljenoj poruci, poziva funkciju sendMessage (prikazano kasnije), prosljeđujući ID pošiljatelja i tekst za slanje. Važno je razumjeti sljedeće vrijednosti i što oni znače:
- event.message.text je tekst primljen u poruci. Na primjer, ako netko pošalje poruku "Hello" našem botu, vrijednost event.message.text će biti "Hello".
- event.sender.id je id osobe koja je poslala poruku botu. To je potrebno kako bi bot znao kome treba odgovoriti.
2. Kodiranje funkcije sendMessage
Sada kodiramo funkciju "sendMessage".
[Js]
funkcija sendMessage (receiverId, message) {
zahtjev({
url: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: "POST",
json: {
primatelj: {id: receiverId},
poruka: poruka,
}
}, funkcija (pogreška, odgovor, tijelo) {
ako (pogreška) {
console.log ("Greška pri slanju poruke:", pogreška);
} else if (response.body.error) {
console.log ('Greška:', response.body.error);
}
});
};
[/ Js]
Funkcija "sendMessage" ima dva parametra:
- recipientId
- poruka
Prijemnik je potreban kako bi se poruka mogla uputiti na ispravnog korisnika.
Poruka je stvarni tekst koji treba poslati u odgovoru.
3. Guranje promjena u Heroku
Ako ste dovršili gore navedene korake, vaš bot bi trebao biti u mogućnosti odzvanjati primljeni tekst. Ali prvo, morate gurnuti izmjene u aplikaciju koja se nalazi na Heroku. Da biste to učinili, slijedite niže navedene korake:
1. Pokrenite terminal.
2. Promijenite direktorij u direktorij testbot
cd testbot
3. Izvedite sljedeće korake:
- git add.
- Napomena: na kraju "git add" postoji "."
- git urezivanje -m "Prvo izdavanje"
- git push heroku majstor
4. Sada pošaljite poruku na svoju stranicu, a bot će vam ponoviti poruku.
Uvjetno odgovaranje aka
Možemo koristiti tekstualno podudaranje kako bismo omogućili našem botu Facebook Messenger da odgovori prema određenim posebnim ključnim riječima.
Da bismo to postigli, moramo dodati još jednu funkciju. Nazvao sam je "conditionalResponses", ali možete odabrati što god želite.
1. Kodiranje funkcije conditionalResponses
[Js]
funkcija conditionalResponses (receiverId, text) {
text = text || "";
var što = text.match (/ what / gi); // provjerava da li tekst sadrži niz "what"; ignoriraj slučaj
varGadget-Info.com = text.match (/ beebom / gi); // provjerava sadrži li tekstni tekst riječ "beebom"; ignoriraj slučaj
var who = text.match (/ tko / gi); // provjerava sadrži li tekstni tekst riječ "tko"; ignoriraj slučaj
var you = text.match (/ vi / gi); // provjerava sadrži li tekstualni niz riječ "vi"; ignoriraj slučaj
// ako tekst sadrži i "što" i "beebom", učinite sljedeće:
ako (što! = null &&; Gadget-Info.com! = null) {
message = {
tekst: "Beebom je web stranica koja nudi tehničke resurse. Dobrodošli."
}
sendMessage (primatelj, poruka);
return true;
}
// ako tekst sadrži i "tko" i "vi", učinite sljedeće:
ako (tko! = null && you! = null) {
message = {
tekst: "Od mene se tražilo da ne raspravljam o svom identitetu na internetu."
}
sendMessage (primatelj, poruka);
return true;
}
// ako se ništa ne podudara, vratite false za nastavak izvršavanja unutarnje funkcije.
return false;
};
[/ Js]
U redovima od 4 do 7 definirali smo varijable ovisno o podudarnosti primljenog niza s određenim riječima. Najbolji dio o korištenju “text.match ()” je da koristi regularne izraze (obično se naziva regex, pročitajte više ovdje.). To je dobro za nas, jer to znači da sve dok se čak i dio riječi u primljenom tekstu podudara s bilo kojom od riječi koje smo spomenuli u text.match (), varijabla neće biti null. To znači da ako primljena poruka bude "Što je Beebom?", "Var what" i "var beebom" neće biti nula, jer riječ "Što je" sadrži riječ "što". Tako smo spašeni od stvaranja dodatnih izjava za svaku varijaciju u kojoj bi netko mogao reći "Što".
2. Uređivanje slušatelja poruka
Također moramo urediti Poslušatelja poruka koje smo kodirali, kako bismo osigurali da pokuša uskladiti primljeni tekst s funkcijom "conditionalResponses".
[Js]
app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0].
za (i = 0; i <događaji.length; i ++) {
var događaj = događaji [i];
if (event.message && event.message.text) {
// prvo pokušajte provjeriti da li primljena poruka ispunjava uvjete za uvjetni odgovor.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// ako ne, jednostavno echo primljenu poruku natrag pošiljatelju.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
Promjene u slušatelju možda ne izgledaju jako drastično, ali njihovi učinci su sigurni. Sada, slušatelj najprije pokušava odgovoriti uvjetnim odgovorima, a ako ne postoji valjani uvjet za primljenu poruku, on jednostavno odzvanja poruku korisniku.
3. Guranje promjena u Heroku
Prije nego što možete isprobati nove značajke, morat ćete gurnuti ažurirani kod u aplikaciju koja se nalazi na Heroku. Da biste to učinili, slijedite korake u nastavku:
1. Pokrenite terminal.
2. Promijenite direktorij u direktorij testbot
cd testbot
3. Izvedite sljedeće korake:
- git add.
- Napomena: na kraju "git add" postoji "."
- git commit -m "Dodavanje uvjetnih mogućnosti"
- git push heroku majstor
4. Sada pošaljite poruku na svoju stranicu, a bot će vam ponoviti poruku.
Još više funkcionalnosti
Naš bot sada odgovara na mali skup naredbi u lijepim, dobro strukturiranim odgovorima. Ali to još uvijek nije jako korisno. Napravimo još nekoliko izmjena u kodu kako bi naš bot bio " funkcionalniji " dio softvera. Obnovit ćemo mnogo funkcija i dodati još par, pa se uzbudite.
1. Uređivanje slušatelja poruka
Naša slušateljica poruka, u ovoj fazi, radi samo u redu. Međutim, to nije jako lijepo oblikovano i ako bismo nastavili povećavati ugniježđene tvrdnje kako bismo dodali dodatne provjere stanja, brzo će postati ružno gledati, teško ih je razumjeti i sporije na izvršavanju. Ne želimo to, zar ne? Napravimo neke promjene.
Napomena: U slušatelju poruke nalazi se redak koda koji glasi "res.sendStatus (200)", a taj redak šalje Facebooku statusni kod 200, govoreći mu da je funkcija uspješno izvršena. Prema dokumentaciji Facebooka, Facebook čeka najviše 20 sekundi da dobije 200 status, prije nego odluči da poruka nije prošla i zaustavlja izvršavanje koda.
Naš novi slušatelj poruka izgleda ovako. Koristimo naredbu " res.sendStatus (200) " za zaustavljanje izvršavanja funkcije čim se uvjet uskladi i izvrši.
[Js]
app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0].
za (i = 0; i <događaji.length; i ++) {
var događaj = događaji [i];
if (event.message && event.message.text) {
// prvo provjerite tekst poruke protiv uvjeta introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// zbog nedostatka boljeg imena, nazvao sam ovaj newResponse: p; označite ovo sljedeće
inače ako (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// else, samo ponovite izvornu poruku
else {
// zamijeni echo s važećom listom naredbi
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
2. Kodiranje funkcije newResponse
Naša poruka slušatelja sada provjerava tekst poruke protiv skupa uvjeta u “newResponse”, ali najprije moramo kodirati funkciju newResponse. Koristit ćemo ovu funkciju za provjeru je li korisnik tražio prijedloge za članke sGadget-Info.com web-lokacije, pretražio pojam upita na web-lokaciji i predstavio vezu korisniku. Još jednom ćemo koristiti regularne izraze za povezivanje teksta s određenim ključnim riječima.
[Js]
funkcija newResponse (receiverId, text) {
text = text || "";
var suggest = text.match (/ predložite / gi);
var random = text.match (/ slučajni / gi);
var article = text.match (/ članak / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var browser = text.match (/ preglednik / gi);
var vpn = text.match (/ vpn / gi);
// provjerite da li korisnik uopće traži prijedloge za članak
ako (predložite! = null && članak! = null) {
var query = "";
// ako se upita o prijedlozima članaka, provjerite temu koju korisnik traži
ako (android! = null) {
query = "Android";
} inače ako (mac! = null) {
query = "Mac";
} inače ako (iphone! = null) {
query = "iPhone";
} else if (preglednik! = null) {
query = "Preglednik";
} inače ako (vpn! = null) {
query = "VPN";
}
sendButtonMessage (receiveId, query);
return true
}
return false;
};
[/ Js]
Koristimo drugu prilagođenu funkciju nazvanu "sendButtonMessage" za slanje poruke u slučaju da korisnik traži prijedloge za članak. Izradit ćemo ovo sljedeće.
3. Kodiranje funkcije sendButtonMessage
Funkcija sendButtonMessage uzima dva parametra, ID primatelja i upit. ID primatelja koristi se za identifikaciju korisnika kojem se poruka mora poslati, a upit se koristi za identifikaciju teme na kojoj korisnik želi prijedloge za članak.
[Js]
funkcija sendButtonMessage (receiveId, query) {
var messageData = {
primatelj: {
id: receiverId
}
poruka: {
privitak: {
upišite: "predložak",
teret: {
template_type: "gumb",
tekst: "To je ono što sam pronašao za" + upit,
tipke: [{
upišite: "web_url",
url: "//www.beebom.com/?s="+query,
naslov: "Beebom:" + upit
}]
}
}
}
};
callSendAPI (messageData);
}
[/ Js]
Još jednom koristimo prilagođenu funkciju; ovaj put za slanje konačne poruke, s linkovima članaka, korisniku. Funkcija je na mnogo načina slična funkciji "sendMessage" koju smo ranije kodirali, ali je općenitija u načinu na koji uzima podatke o poruci, što nam odgovara, jer se podaci naših poruka mijenjaju s upitom koji korisnik napravi.
4. Kodiranje funkcije CallSendAPI
Funkcija “callSendAPI” uzima jedan parametar, “messageData” . Ovaj parametar sadrži podatke o cijeloj poruci, ispravno formatirane prema pravilima Facebooka, tako da ga korisnik može ispravno prikazati.
[Js]
funkcija callSendAPI (porukaData) {
zahtjev({
uri: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: "POST",
json: messageData
}, funkcija (pogreška, odgovor, tijelo) {
ako (! error && response.statusCode == 200) {
var receiveId = body.recipient_id;
var messageId = body.message_id;
console.log ("Uspješno poslana generička poruka s id% s primatelju% s",
messageId, receiverId);
} else {
console.error ("Nije moguće poslati poruku.");
console.error (reakcija);
console.error (pogreška);
}
});
}
[/ Js]
5. Guranje promjena u Heroku
Mi smo na posljednjem koraku u stvaranju našeg nadograđenog bota. Samo trebamo gurnuti sve promjene koda u Heroku. Postupak je isti kao i prije i opisan je u nastavku:
1. Pokrenite terminal.
2. Promijenite imenik u direktorij testbot .
cd testbot
3. Učinite sljedeće:
- git add.
- Napomena: Na kraju te naredbe postoji "." .
- git commit -m "poboljšanje provjere uvjeta i oblikovanje"
- git push heroku majstor
4. Sada pošaljite poruku poput "Predložite članak na Androidu" ili "Beebom, predložite mi bilo koji članak na temu Android"; i bot će poslati lijepo oblikovanu poruku s vezom koju možete dotaknuti da biste otvorili članke vezane uz vaš upit.
Kopaj Dublje
Sada kada znate kako započeti s razvojem Facebook messenger botova, prođite kroz Facebook dokumentaciju o tome kako razviti Facebook messenger botove. Dok dokumentacija nije dobra za početnike, više niste početnik. Trebali biste provjeriti službenu dokumentaciju i pokušati shvatiti kako bi vaš bot bio još pametniji. Teaser: Možete slati poruke i sa slikama i gumbima! Također je moguće koristiti usluge kao što su Wit.ai i Api.ai kodirati vaš bot, a zatim ga integrirati s Facebookom, ali u mojim slabim pokušajima da koristim te usluge, Wit.ai ne radi previše dobro i Api.ai ima oštru krivulju učenja za početnike.
Jeste li ikada razvili bot za Facebook? Ako imate, kako ste to razvili i što može učiniti? Jeste li koristili usluge kao što su Wit.ai i Api.ai za izradu botova? Ako niste ikada pokušali svoje ruke na kodiranje bot, ići i razviti svoj vlastiti Facebook Messenger bot, čine ga pametnije i bolje, i javite nam o svom iskustvu u komentarima ispod.
