Funkcia Facebook Messenger Bots nie je nič nové a veľa úžasných robotov už existuje. Zdroje, ktoré sa týkajú presne ako vytvoriť vlastné boty, sú vzácne a chýbajú vysvetlením pre ľudí, ktorí sú noví v službe Facebook Graph API. Bots Messenger teraz tiež vyžadujú, aby ste používali webovú adresu spätného volania cez zabezpečený webový prehliadač SSL (viac o tom neskôr) a nastavenie protokolu SSL nie je pre všetkých a tiež stojí peniaze.
V tomto článku vás budem prechádzať celým procesom vytvárania jednoduchého Facebooku, pretože vlastná dokumentácia Facebooku je pomerne zle vysvetlená. Nastavíme aplikáciu cloud, ktorá používa https protokol, kód bot v Node.js (čo je javascript, jazyk na strane servera), použite git na stlačenie kódu do aplikácie cloud a vyskúšajte ho na Facebook Messenger.
Nastavenie Bot
Na svojom notebooku budete potrebovať uzol. Ak tak neurobíte, prejdite na webové stránky uzla a stiahnite si a nainštalujte ho.
Akonáhle skončíte, môžete pokračovať v nastavení pre bot. Postupujte podľa nasledujúcich krokov:
1. Spustite terminál.
2. Potrebujete samostatný adresár na uloženie kódu.
- Vytvorte nový adresár
mkdir testbot
- Zmeňte svoj pracovný adresár na práve vytvorený adresár
cd testbot
3. Ďalej inicializujte aplikáciu uzla. npm init
- Budete vyzvaní, aby ste zadali informácie o vašej aplikácii, stačí použiť predvolené nastavenia stlačením Enter pre všetko.
4. Nainštalujte balíky npm install express body-parser request --save
- Príkaz bude bežať a dá nejaké upozornenie; ignoruj ich.
5. V nástroji Finder otvorte adresár " testbot ", ktorý ste vytvorili, a nájdite súbor s názvom " package.json "; otvorte to v editore ako je Sublime Text.
6. V tomto súbore musíme pridať riadok "start": "node index.js"
- Nezabudnite na konci predchádzajúceho riadku pripojiť znak ", " .
7. Ďalej vytvorte nový súbor v jazyku Sublime a vložte do neho nasledujúci kód:
[Js]
var express = vyžadujú ("express");
var bodyParser = vyžadovať ('body-parser');
var request = požadovať ('request');
var app = expres ();
app.use (bodyParser.urlencoded ({rozšírené: falošné}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funkcia (req, res) {
res.send ('Toto je server TestBot');
});
app.get ('/ webhook', funkcia (req, res) {
ak (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query [ 'hub.challenge']);
} inak {
res.send ("Neplatný verifikačný token");
}
});
[/ Js]
Uložte tento súbor ako index.js
Poznámka: Na riadku 13 je hodnota 'hub.verify_token' nastavená ako ' testbot_verify_token', pamätajte si túto hodnotu, ako sa použije pri vytváraní webhook na Facebooku.
Vytvoriť úložisko Git
Teraz, keď sme nastavili spracovanie nášho botu, musíme kód posunúť na Heroku. Preto musíme vytvoriť úložisko git v našom adresári.
Poznámka: "git" je systém riadenia verzií pre súbory a softvérový kód. Viac o ňom môžete prečítať na Wikipédii.
Vytvorenie repozitára git je jednoduché a trvá iba pár príkazov terminálu.
Poznámka: Uistite sa, že sa nachádzate v priečinku " testbot " na termináli. Môžete to urobiť zadaním príkazu pwd do terminálu.
Ak chcete vytvoriť repozitár git, postupujte podľa týchto krokov:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Nastavte Heroku
Skôr než sa dostaneme aj na stránky vývojárov Facebooku, potrebujeme URL spätného volania, s ktorými môže spoločnosť Facebook komunikovať. Táto adresa URL musí používať protokol https, čo znamená, že na našich webových stránkach musíme nainštalovať certifikát SSL. ale je to sprievodca pre začiatočníkov pre robotov v službe Facebook messenger, takže sa veci nesmú skomplikovať. Budeme používať Heroku na nasadenie nášho kódu. Heroku poskytuje https adresy pre vaše aplikácie a má bezplatný plán, ktorý spĺňa naše (veľmi základné) požiadavky.
Prejdite na webovú stránku Heroku a zaregistrujte sa.
Poznámka: V poli s názvom "Vyberte si primárny rozvojový jazyk" použite "Používam iný jazyk".
Akonáhle to skončíte, nainštalujte Herokov nástroj pre váš operačný systém (Mac, pre mňa) a nainštalujte ho. To vám umožní prístup k Heroku na vašom termináli (alebo príkazovom riadku, v systéme Windows).
Ďalej vytvoríme aplikáciu na Heroku, ktorá bude obsahovať celý kód nášho topánka. Postupujte podľa nasledujúcich krokov:
1. Spustite terminál
2. Zadajte heroku login
- Budete požiadaní o zadanie e-mailu a hesla.
- Zadajte svoj email, stlačte Enter; potom zadajte heslo a stlačte kláves Enter.
- Budete prihlásení do heroku
3. Typ heroku create
- Toto vytvorí aplikáciu na Heroku a poskytne vám hypertextový odkaz. Upozorňujeme, že odkaz používa protokol https. Jednoducho, nie?
4. Teraz môžete stlačiť kód aplikácie na Heroku git push heroku master
5. Akonáhle sa to stane, vaša aplikácia je v podstate aktívna a môžete navštíviť odkaz vo vašom prehliadači, aby ste skontrolovali, či všetko funguje správne. Mala by otvoriť webovú stránku s nápisom " Toto je server TestBot ".
Nastavenie Facebook
Je načase pripojiť našu botku na Facebook! Budete musieť vytvoriť novú Facebook stránku alebo použiť existujúcu stránku, ktorú vlastníte. Ukážem vám, ako postupovať vytvorením novej Facebookovej stránky.
1. Choďte na Facebook a vytvorte novú stránku.
- Môžete vytvoriť stránku v ktorejkoľvek kategórii, ktorú chcete. Vyberám spoločnosť / organizáciu, a to z žiadneho konkrétneho dôvodu.
2. Ďalšie kroky, ktoré Facebook zobrazuje, sú voliteľné a je možné ich preskočiť.
3. Ďalej prejdite na stránku vývojárov Facebooku.
- V pravom hornom rohu umiestnite kurzor myši na položku Moje aplikácie a potom v rozbaľovacej ponuke kliknite na položku Pridať novú aplikáciu .
- Kliknite na " základné nastavenie ", keď Facebook vyzve na výber platformy.
4. Vyplňte podrobnosti pre meno aplikácie a kontaktnú e-mailovú adresu.
- V kategórii vyberte položku Aplikácie pre stránky .
- Kliknite na položku " Vytvoriť ID aplikácie ".
5. Budete prechádzajúci na informačný panel pre vašu aplikáciu. Na bočnom paneli prejdite na " + Pridať produkty " a zvoľte " Messenger " kliknutím na tlačidlo " Začíname ".
6. Zvoľte " Nastavenie webových stránok ".
7. Vyplňte požadované polia, nahraďte adresu URL spätnej väzby URL adresou aplikácie Heroku, Overte Token pomocou tokenu použitého v súbore index.js a vyberte nasledujúce pole Subscription Fields:
- message_deliveries
- správy
- message_optins
- messaging_postbacks
Poznámka: Uistite sa, že ste pridali " / webhook " do adresy URL spätného volania tak, že index.js vykoná požadovanú funkciu, keď sa pokúsi Facebook dostať ping na adresu URL, môže overiť "Verify Token".
8. Kliknite na " Overiť a uložiť ".
9. V časti " Generovanie tokenov " kliknite na " Vybrať stránku " a vyberte stránku, ktorú ste vytvorili predtým.
Vytvorí sa to " Token prístupu k stránke ", uložte ho niekde; budete to potrebovať neskôr.
10. Ďalej budete musieť vykonať dotaz POST do vašej aplikácie pomocou prístupového tokenu vytvoreného v poslednom kroku. To sa dá ľahko vykonať na termináli. Stačí spustiť nasledujúci príkaz nahrádzajúci PAGE_ACCESS_TOKEN s vygenerovaným tokenom prístupu stránky .
curl -X POST "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"
V Termináli by ste mali dostať " úspešnú " odpoveď.
Ďalšie nastavenie Heroku
Áno, ešte nie sme hotoví. Nie takmer.
1. Choďte na webovú stránku Heroku a prihláste sa pomocou svojho e-mailového ID.
2. Nájdite svoju aplikáciu na "Hlavnom paneli" a kliknite na ňu.
3. Prejdite na kartu Nastavenia.
4. Kliknite na " Reveal Config Vars "
5. Pridajte PAGE_ACCESS_TOKEN ako " config var " a kliknite na " Add ".
Kódovanie skutočného botu
Teraz, keď sme skončili s hlúposťou prácou, môžeme sa sústrediť na to, čo naozaj záleží: robiť topánku reagovať na správy. Ak chcete začať, navrhneme len topánok, ktorý jednoducho odráža správy, ktoré dostáva. Ako sa ukáže, táto jednoduchá úloha vyžaduje, aby fungoval značný kúsok kódu.
1. Kódovanie funkcie Listener správ
Predtým, ako bot môže zopakovať správu, musí byť schopný počúvať správy. Najprv to urobíme.
V súbore index.js pridajte nasledujúci kód:
[Js]
app.post ('/ webhook', funkcia (req, res) {
var udalosti = req.body.entry [0] .messaging;
pre (i = 0; i <events.length; i ++) {
var udal = udalosti [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ Js]
Čo robí táto funkcia, kontroluje prijaté správy a potom skontroluje, či je v správe text. Ak v prijatej správe nájde text, volá funkciu sendMessage (zobrazuje sa neskôr), odovzdá ID odosielateľa a text, ktorý má poslať späť. Je dôležité pochopiť nasledujúce hodnoty a to, čo znamenajú:
- event.message.text je text prijatý v správe. Napríklad, ak niekto pošle správu "Ahoj" našim botom, hodnota event.message.text bude "Ahoj".
- event.sender.id je identifikátor osoby, ktorá odoslala správu botovi. Je to potrebné, aby vedel, kto adresuje odpoveď.
2. Kódovanie funkcie sendMessage
Umožňuje teraz kódovať funkciu "sendMessage".
[Js]
funkcia sendMessage (príjemca, správa) {
Požiadavka ({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metóda: "POST",
json: {
príjemca: {id: recipientId},
správa: správa,
}
}, funkcia (chyba, odpoveď, telo) {
ak (chyba) {
console.log ('Chyba pri odosielaní správy:', chyba);
} else if (response.body.error) {
console.log ('Chyba:', response.body.error);
}
});
};
[/ Js]
Funkcia "sendMessage" má dva parametre:
- RecipientID
- správa
Identifikátor recipientId sa vyžaduje, aby sa správa mohla adresovať správnemu používateľovi.
Správa je skutočný text, ktorý sa má odoslať v odpovedi.
3. Stlačte zmeny na Heroku
Ak ste vykonali vyššie uvedené kroky, váš bot by mal mať možnosť zopakovať prijatý text. Ale najprv musíte zmeniť zmeny na aplikáciu hosťovanú na Heroku. Ak to chcete urobiť, postupujte podľa nasledujúcich krokov:
1. Spustite terminál.
2. Zmeňte adresár do adresára testbot
cd testbot
3. Vykonajte nasledujúce kroky:
- git pridať.
- Poznámka: Na konci príkazu "git add" sa nachádza znak "."
- git commit -m "First commit"
- git push heroku majster
4. Teraz pošlite správu na vašu stránku a bot bude odošle správu späť k vám.
Podmienené odpovede aka Zostavenie Bot inteligentnejšie
Môžeme použiť zhodu textu, aby sme umožnili našim Facebook messengerom odpovedať podľa určitých špeciálnych kľúčových slov.
Aby sme to dosiahli, musíme pridať ďalšiu funkciu. Nazdávam to "podmienenéResponses", ale môžete si vybrať ľubovoľné meno, ktoré uprednostňujete.
1. Kódovanie funkcie podmieneného vrátenia
[Js]
function conditionalResponses (recipientId, text) {
text = text || "";
var čo = text.match (/ čo / gi); // skontrolovať, či textový reťazec obsahuje slovo "čo"; ignorovať prípad
varGadgetInfo.com = text.match (/ beebom / gi); // skontrolujte, či textový reťazec obsahuje slovo "beebom"; ignorovať prípad
var ktorý = text.match (/ who / gi); // skontrolovať, či textový reťazec obsahuje slovo "kto"; ignorovať prípad
var you = text.match (/ you / gi); // skontrolujte, či textový reťazec obsahuje slovo "vy"; ignorovať prípad
// ak text obsahuje aj "čo" a "beebom", urobte toto:
ak (čo! = null &&; Gadget-Info.com! = null) {
message = {
text: "Beebom je webová stránka, ktorá ponúka tech zdroje.
}
sendMessage (recipientId, správa);
vrátiť pravdu;
}
// ak text obsahuje "kto" a "vy", urobte toto:
ak (kto! = null && you! = null) {
message = {
text: "Bol som požiadaný, aby som o mojej identite nehovoril on-line."
}
sendMessage (recipientId, správa);
vrátiť pravdu;
}
// ak sa nič nezhoduje, vráťte falošný, aby ste pokračovali v vykonávaní vnútornej funkcie.
vrátiť falošné;
};
[/ Js]
V riadkoch 4 až 7 máme definované premenné v závislosti na zhode prijatého reťazca s konkrétnymi slovami. Najlepšia časť o používaní slova "text.match ()" spočíva v tom, že používa regulárne výrazy (obvykle nazývané regex, prečítajte si viac.). Je to pre nás dobré, pretože to znamená, že ak sa aj časť slova v prijatom texte zhoduje so slovami, ktoré sme spomenuli v text.match (), premenná nebude nulová. To znamená, že ak prijatá správa bola "Čo je Beebom?", "Var what" a "var beebom" nebudú nulové, pretože slovo "Čo je" obsahuje slovo "čo". Takže sme ušetrení od vytvárania ďalších vyhlásení pre každú variáciu, v ktorej by niekto mohol povedať "Čo".
2. Úprava poslucháča správ
Tiež je potrebné upraviť kódovaný poslaovač správ, aby sme sa ubezpečili, že sa pokúša prispôsobiť prijatý text aj funkcii "conditionalResponses".
[Js]
app.post ('/ webhook', funkcia (req, res) {
var udalosti = req.body.entry [0] .messaging;
pre (i = 0; i <events.length; i ++) {
var udal = udalosti [i];
if (event.message && event.message.text) {
// Najprv sa pokúste skontrolovať, či sa prijatá správa kvalifikuje na podmienenú odpoveď.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// ak to nie je, jednoducho zopakujte prijatú správu späť odosielateľovi.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
Zmeny v poslucháčovi nemusia vyzerať veľmi drasticky, ale ich účinky sú isté. Poslucháč sa najskôr pokúsi odpovedať podmienenými odpoveďami a ak neexistuje žiadna platná podmienka pre prijatú správu, jednoducho zopakuje správu späť používateľovi.
3. Stlačte zmeny na Heroku
Skôr ako budete môcť vyskúšať nové funkcie, budete musieť tlačiť aktualizovaný kód na aplikáciu hosťovanú na Heroku. Postupujte podľa nasledujúcich krokov:
1. Spustite terminál.
2. Zmeňte adresár do adresára testbot
cd testbot
3. Vykonajte nasledujúce kroky:
- git pridať.
- Poznámka: Na konci príkazu "git add" sa nachádza znak "."
- git commit -m "Pridanie podmienených možností"
- git push heroku majster
4. Teraz pošlite správu na vašu stránku a bot bude odošle správu späť k vám.
Ešte viac funkčnosti
Náš bot teraz reaguje na malú sadu príkazov v pekných, dobre štruktúrovaných odpovediach. Ale stále to nie je veľmi užitočné. Urobme ešte niekoľko zmien v kóde, aby sme naši bot robili viac " funkčným " softvérom. Budeme premýšľať veľa funkcií, a pridáme ešte pár, takže sa nadchajte.
1. Úprava poslucháča správ
Náš poslucháč správy, v tejto fáze, funguje len v poriadku. Nie je to však veľmi pekne formátované a ak by sme mali pokračovať v zvyšovaní vnorených vyhlásení o tom, či pridáme dodatočné " kontrolné podmienky ", rýchlo sa stane ošklivé, aby sme sa pozreli, ťažko pochopili a pomalšie pri vykonávaní. Nechceme to teraz, my? Urobme nejaké zmeny.
Poznámka: V poslucháči správy je riadok kódu, ktorý číta "res.sendStatus (200)", tento riadok pošle kód Facebooku na stav 200, čím mu povie, že funkcia bola úspešne spustená. Podľa Facebookovej dokumentácie Facebook čaká maximálne 20 sekúnd na získanie stavu 200, skôr než sa rozhodne, že správa neprešla a zastaví vykonanie kódu.
Náš nový poslucháč správ vyzerá takto. Pomocou príkazu " res.sendStatus (200) " zastavíme vykonanie funkcie, akonáhle sa splní a vykoná podmienka.
[Js]
app.post ('/ webhook', funkcia (req, res) {
var udalosti = req.body.entry [0] .messaging;
pre (i = 0; i <events.length; i ++) {
var udal = udalosti [i];
if (event.message && event.message.text) {
// najprv skontrolovať text správy proti podmienkam introResponse
ak (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// pre nedostatok lepšieho mena som zavolal túto novú odpoveď: p; skontrolujte nasledujúci
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// else, len zazvoniť pôvodnú správu
inak {
// nahraďte echo platným zoznamom príkazov
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
2. Kódovanie funkcie newResponse
Náš poslucháč správy teraz skontroluje text správy proti súboru podmienok v "newResponse", ale najskôr musíme kódovať funkciu newResponse. Túto funkciu použijeme na overenie, či používateľ požiadal o návrhy na články z webovej stránky Gadget-Info.com, vyhľadal termín dotazu na webovej stránke a aby uviedol odkaz na používateľa. Opäť použijeme regulárne výrazy, aby sme zodpovedali textu s konkrétnymi kľúčovými slovami.
[Js]
funkcia newResponse (recipientId, text) {
text = text || "";
var navrhnúť = text.match (/ suggest / gi);
var náhodné = text.match (/ random / gi);
var článok = text.match (/ článok / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var prehliadač = text.match (/ browser / gi);
var vpn = text.match (/ vpn / gi);
// skontrolujte, či používateľ vôbec žiadal návrhy článku
ak (naznačuje! = null && článok! = null) {
var dotaz = "";
// ak sú otázky týkajúce sa článkov dotazované, skontrolujte tému, ktoré používateľ hľadá
ak (android! = null) {
dotaz = "Android";
} else ak (mac! = null) {
dotaz = "Mac";
} else ak (iphone! = null) {
dotaz = "iPhone";
} else if (prehliadač! = null) {
query = "Prehliadač";
} else ak (vpn! = null) {
dotaz = "VPN";
}
sendButtonMessage (recipientId, dotaz);
návrat true
}
vrátiť falošné;
};
[/ Js]
Používame ďalšiu vlastnú funkciu nazývanú "sendButtonMessage" na odoslanie správy v prípade, že používateľ žiada návrhy článku. Vytvoríme to ďalej.
3. Kódovanie funkcie sendButtonMessage
Funkcia sendButtonMessage má dva parametre, ID príjemcu a dotaz. Identifikátor príjemcu sa používa na identifikáciu používateľa, ktorému musí byť správa odoslaná, a dotaz sa používa na identifikáciu témy, na ktoré si užívateľ želá návrhy článkov.
[Js]
funkcia sendButtonMessage (recipientId, dotaz) {
var messageData = {
príjemca: {
id: recipientId
},
správa: {
príloha: {
typ: "šablóna",
užitočné zaťaženie: {
template_type: "tlačidlo",
text: "To je to, čo som našiel pre" + dotaz,
tlačidlá: [{
typ: "web_url",
url: "//www.beebom.com/?s="+query,
názov: "Beebom:" + dotaz
}]
}
}
}
};
callSendAPI (messaged);
}
[/ Js]
Opäť používame vlastnú funkciu. tentokrát na odoslanie konečnej správy s odkazmi na článok používateľovi. Funkcia je v mnohých ohľadoch podobná funkcii "sendMessage", ktorú sme predtým kódovali, ale je všeobecnejšia v tom, ako preberá údaje správy, čo nám vyhovuje, pretože naše dáta sa menia s dotazom, ktorý používateľ robí.
4. Kódovanie funkcie callSendAPI
Funkcia "callSendAPI" má jeden parameter, "messageData" . Tento parameter obsahuje celé dáta správ, správne naformátované podľa pravidiel Facebooku, aby správca mohol správne zobraziť používateľovi.
[Js]
funkcia callSendAPI (messageData) {
Požiadavka ({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metóda: "POST",
json: messageData
}, funkcia (chyba, odpoveď, telo) {
ak (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Úspešne odoslaná generická správa s ID% s príjemcovi% s",
messageId, recipientId);
} inak {
console.error ("Nepodarilo sa odoslať správu.");
console.error (odpovede);
console.error (chyba);
}
});
}
[/ Js]
5. Stlačte zmeny na Heroku
Sme v poslednom kroku k tomu, aby sa náš upgradovaný bot stal naživo. Potrebujeme posunúť všetky zmeny kódu na Heroku. Proces je rovnaký ako predtým a je načrtnutý nižšie:
1. Spustite terminál.
2. Zmeňte adresár do adresára testbot .
cd testbot
3. Postupujte takto:
- git pridať.
- Poznámka: Na konci tohto príkazu je "." .
- git commit -m "zlepšenie kontroly stavu a formátovanie"
- git push heroku majster
4. Teraz pošlite správu ako "Navrhnite článok o Android", alebo "Beebom, navrhnite mi nejaký článok na tému Android"; a bot bude poslať pekne naformátovanú správu s odkazom, na ktorý môžete kliknúť, aby ste otvorili články súvisiace s vašim dopytom.
Kop hlbšie
Teraz, keď viete, ako začať s vývojom Facebook Messenger robotov, prejdite do dokumentácie Facebook o tom, ako rozvíjať Facebook Messenger roboty. Zatiaľ čo dokumentácia nie je vhodná pre začiatočníkov, už nie ste začiatočníkom. Mali by ste sa pozrieť na oficiálnu dokumentáciu a pokúsiť sa zistiť, ako robiť botov ešte šikovnejšie. Teaser: Môžete posielať správy aj pomocou obrázkov a tlačidiel! Je tiež možné použiť služby ako Wit.ai a Api.ai na kódovanie vášho bota a potom ho integrovať do Facebooku, ale v mojich slabých pokusoch o použitie týchto služieb Wit.ai nefunguje príliš dobre a Api.ai má ostrú krivku učenia pre začiatočníkov.
Už ste niekedy vyvinuli Facebook messenger bot? Ak máte, ako ste to vyvíjali a čo môže robiť? Využili ste služby ako Wit.ai a Api.ai na vytvorenie bot? Ak ste niekedy skúšali svoje ruky na kódovanie botov, ísť a rozvíjať svoje vlastné Facebook Messenger bot, urobiť to chytřejší a lepší, a dajte nám vedieť o vaše skúsenosti v komentároch nižšie.
