Facebook je "messenger bots" funkce není nic nového, a mnoho úžasných botů již existují. Nicméně, zdroje týkající se přesně, jak vytvořit svůj vlastní bot jsou vzácné, a chybí vysvětlení pro lidi, kteří jsou na Facebooku Facebook API. Messenger bots nyní také vyžadují, abyste používali zabezpečenou webovou adresu pro zpětné volání pomocí protokolu SSL (více o tom později) a nastavení SSL není pro každého a také stojí peníze.
V tomto článku vás provedu celým procesem vytváření jednoduchého botu pro posílání Facebooků, protože vlastní dokumentace Facebooku je spíše nedostatečně vysvětlena. Vytvoříme cloudovou aplikaci, která používá protokol https, kód bot v Node.js (což je javascript, jazyk na straně serveru), pomocí git posuňte kód do cloudové aplikace a otestujte jej na Facebook Messenger.
Nastavení Bot
Budete potřebovat uzel nainstalovaný na svém notebooku. Pokud ne, přejděte na webovou stránku Node a stáhněte si ji a nainstalujte.
Až budete hotovi, můžete pokračovat v nastavení botu. Postupujte podle následujících kroků:
1. Spusťte Terminál.
2. Pro uložení kódu potřebujete samostatný adresář.
- Vytvořte nový adresář
mkdir testbot
- Změňte svůj pracovní adresář na právě vytvořený adresář
cd testbot
3. Dále inicializujte aplikaci Node. npm init
- Budete požádáni o zadání informací o vaší aplikaci, stačí použít výchozí nastavení stisknutím klávesy Enter pro vše.
4. Nainstalujte balíčky npm install express body-parser request --save
- Příkaz bude spuštěn a vydá varování; ignorovat je.
5. Ve Finderu otevřete adresář „ testbot “, který jste vytvořili, a najděte soubor s názvem „ package.json “; otevřít v editoru jako Sublime Text.
6. V tomto souboru musíme přidat řádek "start": "node index.js"
- Nezapomeňte na konci předchozího řádku přidat znak „, “ .
7. Dále vytvořte nový soubor ve formátu Sublime Text a vložte do něj následující kód:
[js]
var express = vyžadují ('express');
var bodyParser = vyžadují ('body-parser');
var request = request ('požadavek');
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funkce (req, res) {
res.send ('Toto je TestBot Server');
});
app.get ('/ webhook', funkce (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} else {
res.send ('Neplatný ověřovací token');
}
});
[/ js]
Uložte tento soubor jako index.js
Poznámka: V řádku 13 je hodnota 'hub.verify_token' nastavena na ' testbot_verify_token', pamatujte si tuto hodnotu, protože bude použita při vytváření webhooku na Facebooku.
Vytvořit Git Repository
Teď, když jsme nastavili zpracování zpětného volání bota, musíme kód poslat do Heroku. K tomu je třeba vytvořit adresář git v našem adresáři.
Poznámka: „git“ je systém pro správu verzí pro soubory a softwarový kód. Více se o něm dozvíte na Wikipedii.
Vytvoření úložiště git je snadné a trvá jen několik příkazů terminálu.
Poznámka: Ujistěte se, že se nacházíte v adresáři „ testbot “ v terminálu. Můžete to provést zadáním příkazu pwd do terminálu.
Chcete-li vytvořit úložiště git, postupujte takto:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Nastavení Heroku
Než jsme dokonce jít na stránky pro vývojáře na Facebooku, potřebujeme adresu URL pro zpětné volání, se kterou může Facebook mluvit. Tato adresa URL musí používat protokol https, což znamená, že na našich webových stránkách musíme nainstalovat certifikát SSL; ale to je začátečník průvodce Facebook Messenger bots, tak pojďme nekomplikovat věci. Použijeme Heroku k nasazení našeho kódu. Heroku nabízí https URL pro vaše aplikace a má volný plán, který splňuje naše (velmi základní) požadavky.
Jděte na webovou stránku Heroku a zaregistrujte se.
Poznámka: V poli „Vyberte si svůj primární jazyk rozvoje“ použijte „Používám jiný jazyk“.
Až budete s tím hotovi, nainstalujte si nástroj Heroku pro svůj operační systém (Mac, pro mě) a nainstalujte jej. To vám umožní přístup k Heroku na terminálu (nebo příkazovém řádku v systému Windows).
Dále vytvoříme aplikaci na Heroku, která bude obsahovat celý kód našeho bota. Postupujte podle následujících kroků:
1. Spusťte Terminál
2. Zadejte heroku login
- Budete vyzváni k zadání e-mailu a hesla.
- Zadejte svůj e-mail, stiskněte klávesu Enter; pak zadejte své heslo, stiskněte klávesu Enter.
- Budete přihlášeni k heroku
3. heroku create
- To vytvoří aplikaci na Heroku a poskytne vám hypertextový odkaz. Všimněte si, že odkaz používá protokol https. Snad, že?
4. Nyní můžete svůj kód aplikace poslat do Heroku git push heroku master
5. Jakmile je to hotovo, vaše aplikace je v podstatě živá, a můžete navštívit odkaz ve vašem prohlížeči, abyste zkontrolovali, že vše funguje správně. Měla by otevřít webovou stránku s názvem „ Toto je TestBot Server “.
Nastavení služby Facebook
Je čas spojit naše boty s Facebookem! Budete muset vytvořit novou stránku na Facebooku nebo použít existující stránku, kterou vlastníte. Ukážu vám, jak postupovat vytvořením nové stránky Facebook.
1. Přejděte na Facebook a vytvořte novou stránku.
- Můžete vytvořit stránku v libovolné kategorii, kterou chcete. Rozhodl jsem se pro společnost / organizaci bez zvláštního důvodu.
2. Další kroky, které Facebook zobrazí, jsou volitelné a lze je přeskočit.
3. Dále přejděte na webovou stránku Facebook Developers '.
- V pravém horním rohu podržte kurzor myši na „ Moje aplikace “ a pak klikněte na „ Přidat novou aplikaci “ z rozbalovací nabídky.
- Klikněte na „ základní nastavení “, když vás Facebook vyzve k výběru platformy.
4. Vyplňte údaje pro svůj App Name a kontaktní e-mailovou adresu.
- V kategorii vyberte možnost „ Aplikace pro stránky “.
- Klikněte na „ Vytvořit App ID “.
5. Budete přesměrováni na řídicí panel aplikace. Na postranním panelu přejděte na „ + Přidat produkty “ a kliknutím na tlačítko „ Začínáme “ vyberte „ Messenger “.
6. Zvolte „ Nastavení Webhooků “.
7. Vyplňte požadovaná pole a nahraďte adresu URL zpětné adresy URL aplikace Heroku, ověřte token s tokenem použitým v souboru index.js a vyberte následující pole předplatného:
- message_deliveries
- zprávy
- message_optins
- messaging_postbacks
Poznámka: Ujistěte se, že k URL pro zpětné volání přidáte „ / webhook “, aby index.js provedl požadovanou funkci, když se Facebook pokusí ping na adresu URL, může ověřit „Ověřit token“.
8. Klikněte na „ Ověřit a uložit “.
9. V sekci „ Generování tokenu “ klikněte na „ Vybrat stránku “ a vyberte stránku, kterou jste vytvořili dříve.
To vygeneruje „ Page Access Token “, uložte jej někam; budete to potřebovat později.
10. Dále budete muset provést dotaz POST do své aplikace pomocí tokenu Page Access vytvořeného v posledním kroku. To lze snadno provést v terminálu. Stačí spustit následující příkaz a nahradit PAGE_ACCESS_TOKEN generovaným tokenem Přístup k stránkám .
curl -X POST “//graph.facebook.com/v2.6/me/subscrib_apps?access_token=PAGE_ACCESS_TOKEN”
V terminálu byste měli obdržet odpověď „ úspěch “.
Další nastavení Heroku
Jo, ještě jsme neskončili. Ne zcela.
1. Přejděte na webovou stránku Heroku a přihlaste se pomocí svého e-mailového ID.
2. Vyhledejte aplikaci v „řídicím panelu“ a klikněte na ni.
3. Přejděte na kartu Nastavení.
4. Klikněte na „ Reveal Config Vars “
5. Přidejte PAGE_ACCESS_TOKEN jako „ config var “ a klikněte na „ Add “.
Kódování skutečného Botu
Teď, když jsme udělali s grunt práce, můžeme se zaměřit na to, co opravdu záleží: dělat bot reagovat na zprávy. Chcete-li začít, budeme jen navrhnout bot, který jednoduše odráží zprávy, které obdrží. Jak to dopadá, tento jednoduchý úkol vyžaduje značný kus kódu fungovat.
1. Kódování posluchače zpráv
Než může bot poslat zprávu zpět, musí být schopen poslouchat zprávy. Udělejme to první.
V souboru index.js přidejte následující kód:
[js]
app.post ('/ webhook', funkce (req, res) {
var events = req.body.entry [0] .zprávy;
pro (i = 0; i <události.length; i ++) {
var event = události [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ js]
Tato funkce kontroluje přijaté zprávy a poté zkontroluje, zda je ve zprávě text. Pokud nalezne text v přijaté zprávě, zavolá funkci sendMessage (zobrazeno později), předá ID odesílatele a text, který má být odeslán zpět. Je důležité pochopit následující hodnoty a to, co znamenají:
- event.message.text je text přijatý ve zprávě. Pokud například někdo pošle zprávu „Ahoj“ našemu botu, hodnota události event.message.text bude „Ahoj“.
- event.sender.id je id osoby, která poslala zprávu botu. To je nutné, aby bot věděl, komu na odpověď reagovat.
2. Kódování funkce sendMessage
Nyní můžete kódovat funkci „sendMessage“.
[js]
funkce sendMessage (příjemceId, zpráva) {
žádost({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: 'POST',
json: {
příjemce: {id: příjemceId},
zpráva: zpráva,
}
}, funkce (chyba, odezva, tělo) {
pokud (chyba) {
console.log ('Chyba při odesílání zprávy:', chyba);
} else if (response.body.error) {
console.log ('Chyba:', response.body.error);
}
});
};
[/ js]
Funkce „sendMessage“ má dva parametry:
- příjemceId
- zpráva
PříjemceId je vyžadován tak, aby zprávu bylo možné adresovat správnému uživateli.
Zpráva je skutečný text, který má být odeslán v odpovědi.
3. Posunutí změn do Heroku
Pokud jste dokončili výše uvedené kroky, váš robot by měl být schopen zpětně přijmout přijatý text. Nejprve však musíte změny v aplikaci hostované na Heroku posunout. Postupujte takto:
1. Spusťte Terminál.
2. Změňte adresář na adresář testbot
cd testbot
3. Proveďte následující kroky:
- git add.
- Poznámka: Na konci slova „git add“ je „.“
- git commit -m „První potvrzení“
- git push heroku master
4. Nyní pošlete zprávu na vaši stránku a bot vám echo zprávu odešle zpět.
Podmíněné odezvy aka Udělat Bot chytřejší
Můžeme použít párování textu, aby náš Facebook messenger bot mohl reagovat podle určitých speciálních klíčových slov.
Abychom toho dosáhli, musíme přidat další funkci. Jmenuji to „podmíněné odpovědi“, ale můžete si vybrat, které jméno si přejete.
1. Kódování funkce conditionalResponses
[js]
function conditionalResponses (příjemceId, text) {
text = text || "";
var what = text.match (/ what / gi); // zkontrolujte, zda textový řetězec obsahuje slovo "what"; ignorovat případ
varGadget-Info.com = text.match (/ beebom / gi); // zkontrolujte, zda textový řetězec obsahuje slovo "beebom"; ignorovat případ
var who = text.match (/ who / gi); // zkontrolujte, zda textový řetězec obsahuje slovo "who"; ignorovat případ
var you = text.match (/ you / gi); // zkontrolujte, zda textový řetězec obsahuje slovo "vy"; ignorovat případ
// pokud text obsahuje text „co“ a „beebom“, postupujte takto:
if (co! = null &&; Gadget-Info.com! = null) {
message = {
text: "Beebom je webová stránka nabízející technické zdroje. Vítejte."
}
sendMessage (příjemceId, zpráva);
návrat pravdivý;
}
// pokud text obsahuje text „kdo“ a „vy“, postupujte takto:
if (who! = null && you! = null) {
message = {
text: "Byl jsem požádán, abych neprodiskutoval svou totožnost online."
}
sendMessage (příjemceId, zpráva);
návrat pravdivý;
}
// pokud nic neodpovídá, vraťte false a pokračujte v provádění vnitřní funkce.
return false;
};
[/ js]
V řádcích 4 až 7 jsme definovali proměnné v závislosti na shodě přijatého řetězce s konkrétními slovy. Nejlepším způsobem použití „text.match ()“ je, že používá regulární výrazy (obvykle nazývané regex, více zde.). Je to pro nás dobré, protože to znamená, že pokud se část slova v přijatém textu shoduje s některým ze slov uvedených v text.match (), proměnná nebude nulová. To znamená, že pokud přijatá zpráva byla „Co je Beebom?“, „Var what“ a „var beebom“ nebudou nulové, protože slovo „Co je“ obsahuje slovo „co“. Takže jsme zachráněni od vytváření zvláštních prohlášení pro každou variantu, ve které by někdo mohl říci „Co“.
2. Úprava posluchače zpráv
Potřebujeme také upravit posluchače zpráv, které jsme kódovali, aby bylo zajištěno, že se pokusí o spojení přijatého textu s funkcí „conditionalResponses“.
[js]
app.post ('/ webhook', funkce (req, res) {
var events = req.body.entry [0] .zprávy;
pro (i = 0; i <události.length; i ++) {
var event = události [i];
if (event.message && event.message.text) {
// Nejprve se pokuste zkontrolovat, zda přijatá zpráva splňuje podmínky pro podmíněnou odpověď.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// pokud ne, jednoduše echo přijaté zprávy zpět odesílateli.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
Změny v posluchači nemusí vypadat velmi drasticky, ale jejich účinky jsou jisté. Nyní se posluchač nejprve pokusí reagovat s podmíněnými odpověďmi, a pokud pro přijímanou zprávu neexistuje žádná platná podmínka, jednoduše odezní zprávu zpět uživateli.
3. Posunutí změn do Heroku
Než budete moci vyzkoušet nové funkce, budete muset poslat aktualizovaný kód do aplikace hostované na Heroku. Postupujte takto:
1. Spusťte Terminál.
2. Změňte adresář na adresář testbot
cd testbot
3. Proveďte následující kroky:
- git add.
- Poznámka: Na konci slova „git add“ je „.“
- git commit -m “Přidání podmíněných možností”
- git push heroku master
4. Nyní pošlete zprávu na vaši stránku a bot vám echo zprávu odešle zpět.
Ještě více funkcí
Náš bot nyní reaguje na malou sadu příkazů v pěkných, dobře strukturovaných odpovědích. Ale stále to není moc užitečné. Udělejme nějaké další změny kódu, aby se náš bot stal „ funkčním “ softwarem. Budeme přepracovávat spoustu funkcí a přidávat pár dalších, takže se nadchněte.
1. Úprava posluchače zpráv
Posluchač poselství v této fázi funguje v pořádku. Nicméně, to není moc pěkně formátován a kdybychom měli stále zvyšovat vnořené, pokud příkazy přidat extra " podmínky kontroly ", bude to rychle se ošklivý pohled na, obtížné pochopit a pomalejší při provádění. Nechceme to teď, že? Udělejme nějaké změny.
Poznámka: V posluchači zprávy je řádek kódu, který čte „res.sendStatus (200)“, tento řádek odešle na server Facebook kód 200, který oznamuje, že funkce byla úspěšně provedena. Podle dokumentace Facebooku Facebook čeká maximálně 20 vteřin, aby získal status 200, než se rozhodne, že zpráva neprošla a zastaví provádění kódu.
Náš nový posluchač zpráv vypadá takto. Příkazem „ res.sendStatus (200) “ zastavíme provádění funkce, jakmile je podmínka uzavřena a provedena.
[js]
app.post ('/ webhook', funkce (req, res) {
var events = req.body.entry [0] .zprávy;
pro (i = 0; i <události.length; i ++) {
var event = události [i];
if (event.message && event.message.text) {
// nejprve zkontrolujte text zprávy proti podmínkám introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// pro nedostatek lepšího jména jsem zavolal newResponse: p; Zkontrolujte to
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// else, jen odráží původní zprávu
jinak {
// nahradit echo platným seznamem příkazů
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ js]
2. Kódování funkce newResponse
Posluchač našich zpráv nyní zkontroluje text zprávy proti souboru podmínek v „newResponse“, ale nejprve musíme kódovat funkci newResponse. Tuto funkci využijeme ke kontrole, zda uživatel požádal o návrhy článku z webu Gadget-Info.comwebsite, vyhledal výraz dotazu na webových stránkách a předložil odkaz uživateli. Opět použijeme regulární výrazy, aby odpovídaly textu se specifickými klíčovými slovy.
[js]
function newResponse (příjemceId, 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);
// zkontrolujte, zda uživatel vůbec žádá o návrhy článku
if (navrhněte! = null && article! = null) {
var query = "";
// pokud jsou dotazy na článek dotazovány, zkontrolujte téma, které uživatel hledá
if (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (browser! = null) {
query = "Prohlížeč";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (příjemceId, dotaz);
vrátit true
}
return false;
};
[/ js]
Používáme jinou vlastní funkci nazvanou „sendButtonMessage“ pro odeslání zprávy v případě, že uživatel žádá o návrhy článku. Vytvoříme to další.
3. Kódování funkce sendButtonMessage
Funkce sendButtonMessage má dva parametry, ID příjemce a dotaz. ID příjemce se používá k identifikaci uživatele, kterému musí být zpráva odeslána, a dotaz se používá k identifikaci tématu, na kterém chce uživatel návrhy článku.
[js]
funkce sendButtonMessage (příjemceId, dotaz) {
var messageData = {
příjemce: {
id: příjemceId
},
zpráva: {
příloha: {
typ: "šablona",
užitečné zatížení: {
typ šablony: "tlačítko",
text: "To je to, co jsem našel pro" + dotaz,
tlačítka: [{
typ: "web_url",
adresa URL: "//www.beebom.com/?s="+query,
title: "Beebom:" + dotaz
}]
}
}
}
};
callSendAPI (messageData);
}
[/ js]
Opět používáme vlastní funkci; tentokrát poslat uživateli konečnou zprávu s odkazy na článek. Tato funkce je v mnoha ohledech podobná funkci „sendMessage“, kterou jsme kódovali dříve, ale je obecnější ve způsobu, jakým přijímá data zprávy, která nám vyhovují, protože se naše data zpráv mění s dotazem, který uživatel provede.
4. Kódování funkce callSendAPI
Funkce „callSendAPI“ má jeden parametr „messageData“ . Tento parametr obsahuje veškerá data zprávy, která jsou správně formátována podle pravidel služby Facebook, aby je mohl uživatel správně zobrazit.
[js]
funkce callSendAPI (messageData) {
žádost({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: 'POST',
json: messageData
}, funkce (chyba, odezva, tělo) {
if (! error && response.statusCode == 200) {
var příjemceId = tělo.recipient_id;
var messageId = body.message_id;
console.log ("Úspěšně odeslána obecná zpráva s id% s příjemci% s",
messageId, recipientId);
} else {
console.error ("Nelze odeslat zprávu.");
console.error (odpověď);
console.error (chyba);
}
});
}
[/ js]
5. Posunutí změn do Heroku
Jsme na posledním kroku k tomu, aby náš aktualizovaný bot žil. Potřebujeme jen posunout všechny změny kódu do Heroku. Proces je stejný jako dříve a je popsán níže:
1. Spusťte Terminál.
2. Změňte adresář na adresář testbot .
cd testbot
3. Proveďte následující:
- git add.
- Poznámka: Na konci tohoto příkazu je „.“ .
- git commit -m “zlepšení kontroly stavu a formátování”
- git push heroku master
4. Nyní odešlete zprávu jako „Navrhnout článek na Androidu“ nebo „Beebom, navrhněte mi nějaký článek na téma Android“; a bot pošle pěkně formátovanou zprávu s odkazem, na který můžete klepnout, abyste otevřeli články týkající se vašeho dotazu.
Kopej hlouběji
Nyní, když víte, jak začít s vývojem Facebook Messenger bots, jděte přes Facebook dokumentaci o tom, jak vytvořit Facebook Messenger bots. Zatímco dokumentace není dobrá pro začátečníky, už nejste začátečník. Měli byste se podívat na oficiální dokumentaci a pokusit se přijít na to, jak učinit váš bot ještě chytřejší. Teaser: Můžete také posílat zprávy s obrázky a tlačítky! Je také možné použít služby jako Wit.ai a Api.ai ke kódování bot a pak jej integrovat s Facebookem, ale v mých slabých pokusech o použití těchto služeb Wit.ai nefunguje příliš dobře a Api.ai má ostrou křivku učení pro začátečníky.
Už jste někdy vyvinuli Facebook Messenger bot? Pokud máte, jak jste to vyvíjela a co může dělat? Použili jste služby jako Wit.ai a Api.ai k vytvoření vašeho bota? Pokud jste nikdy nezkusili své ruce na kódování bot, jít a rozvíjet své vlastní Facebook Messenger bot, aby bylo chytřejší a lepší, a dejte nám vědět o své zkušenosti v komentářích níže.
