Jak vytvořit Facebook Messenger Bot (průvodce)

Funkce „messenger bots“ na Facebooku není nic nového a již existuje spousta úžasných robotů. Zdroje týkající se přesně toho, jak vytvořit svého vlastního robota, jsou však vzácné a chybí jim vysvětlení pro lidi, kteří jsou v rozhraní Facebook Graph API noví. Roboti Messenger nyní také vyžadují, abyste použili adresu URL zpětného volání webhooku zabezpečeného 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 robota Facebook Messenger, protože vlastní dokumentace Facebooku je poměrně špatně vysvětlena. Nastavíme cloudovou aplikaci, která používá protokol https, kódujeme robota v Node.js (což je javascript, jazyk na straně serveru), použijeme git k odeslání kódu do cloudové aplikace a otestujeme to na Facebooku Messenger.

Nastavit Bot

Na svém notebooku budete potřebovat nainstalovat Node. Pokud tak neučiníte, přejděte a stáhněte a nainstalujte jej na web Node.

Až budete hotovi, můžete pokračovat v nastavení robota. Postupujte podle následujících pokynů:

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 adresář, který jste právě vytvořili
  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í hodnoty a pro vše stisknout Enter.

4. Nainstalujte balíčky
npm install express body-parser požadavek --save

• Příkaz se spustí a vydá několik varování; ignorovat je.

5. Ve Finderu otevřete adresář „testbot„Který jste vytvořili, a najděte soubor s názvem„balíček.json„; otevřete to v editoru, jako je Sublime Text.

6. V tomto souboru musíme přidat řádek
"start": "node index.js"

• Nezapomeňte připojit a „,“ na konci předchozího řádku.

7. Dále vytvořte nový soubor v Sublime Text a vložte do něj následující kód:

[js]

var express = require ('express');
var bodyParser = require ('body-parser');
var request = require ('požadavek');
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 ('This is 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 ('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 na tuto hodnotu, protože bude použita při vytváření webhooku na Facebooku.

Vytvořte úložiště Git

Nyní, když jsme nastavili zpracování zpětného volání našeho robota, musíme kód odeslat do Heroku. K tomu musíme v našem adresáři vytvořit úložiště git.

Poznámka: „Git“ je systém pro správu verzí souborů a softwarového kódu. Více o tom si můžete přečíst na Wikipedii.

Vytvoření úložiště git je snadné a vyžaduje jen několik příkazů terminálu.

Poznámka: Ujistěte se, že jste uvnitřtestbot”Adresář v Terminálu. Můžete to udělat zadáním příkazu pwd do terminálu.

Chcete-li vytvořit úložiště git, postupujte takto:

1. git init

2. git přidat .

3. git commit -m "Zaregistrovat Facebook Webhook"

Nastavit Heroku

Než půjdeme na vývojářské stránky Facebooku, potřebujeme adresu URL zpětného volání, se kterou může Facebook mluvit. Tato adresa URL musí používat protokol https, což znamená, že si musíme na naši webovou stránku nainstalovat certifikát SSL; ale toto je průvodce pro začátečníky pro roboty Facebook Messenger, tak si to nekomplikujme. K nasazení našeho kódu použijeme Heroku. Heroku vám dává https URL pro vaše aplikace a má bezplatný plán, který splňuje naše (velmi základní) požadavky.

Přejděte na web Heroku a zaregistrujte se.

Poznámka: V poli „Vyberte svůj primární vývojový jazyk“ použijte „Používám jiný jazyk“.

Až to dokončíte, nainstalujte si nástrojový pás Heroku pro svůj OS (Mac, pro mě) a nainstalujte jej. Tím získáte přístup k Heroku ve vašem 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 robota. Postupujte podle následujících pokynů:

1. Spusťte terminál

2. Napište heroku přihlášení

• Budete požádáni o zadání e-mailu a hesla.

• Zadejte svůj e-mail, stiskněte klávesu Enter; poté zadejte heslo a stiskněte klávesu Enter.

• Budete přihlášeni k heroku

3. Napište heroku vytvořit

• Tím se vytvoří aplikace na Heroku a poskytne vám hypertextový odkaz. Všimněte si, že odkaz používá protokol https. Snadné, správně?

4. Nyní můžete odeslat kód aplikace do Heroku
git push heroku master

5. Jakmile to uděláte, vaše aplikace je v podstatě živá a můžete navštívit odkaz v prohlížeči a zkontrolovat, zda vše funguje dobře. Měl by otevřít webovou stránku se slovy „Toto je TestBot Server".

Nastavení Facebooku

Je čas připojit našeho robota k Facebooku! Budete muset vytvořit novou stránku na Facebooku nebo použít existující, kterou vlastníte. Ukážu vám, jak postupovat vytvořením nové stránky na Facebooku.

1. Přejděte na Facebook a vytvořte novou stránku.

• Můžete vytvořit stránku v kterékoli kategorii, kterou chcete. Rozhodl jsem se pro společnost / organizaci, a to bez zvláštního důvodu.

2. Další kroky, které Facebook zobrazuje, jsou volitelné a lze je přeskočit.

3. Dále přejděte na web vývojářů Facebooku.

• Vpravo nahoře najeďte myší na „Moje aplikace“A poté klikněte na„Přidat novou aplikaci“Z rozevírací nabídky.

• Klikněte na "základní nastavení„Když vás Facebook vyzve k výběru platformy.

4. Vyplňte podrobnosti o názvu aplikace a kontaktní e-mailové adrese.

• Vyberte „Aplikace pro stránky“V kategorii.

• Klikněte na "Vytvořte ID aplikace".

5. Budete přesměrováni na řídicí panel své aplikace. Na postranním panelu přejděte na „+Přidat produkty“A vyberte„Posel”Kliknutím na„Začít" knoflík.

6. Vyberte „Nastavení Webhooků".

7. Vyplňte požadovaná pole a nahraďte „URL zpětného volání“ adresou URL aplikace Heroku, ověřte token 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 jste připojili „/ webhook„Na adresu URL zpětného volání, 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ěřte a uložte".

9. V „Generování tokenů“Klikněte na„Vyberte stránku”A vyberte stránku, kterou jste vytvořili dříve.

Tím se vygeneruje „Token přístupu na stránku„, Uložte to někde; budete to potřebovat později.

10. Dále budete muset provést POST dotaz do vaší aplikace pomocí Tokenu pro přístup k stránce vygenerovaného v posledním kroku. To lze snadno provést v terminálu. Stačí spustit následující příkaz, nahrazení PAGE_ACCESS_TOKEN tokenem pro přístup na stránku, který jste vygenerovali.

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

Měli byste obdržet „úspěch”Odpověď v Terminálu.

Další nastavení Heroku

Jo, ještě jsme neskončili. Ne zcela.

1. Přejděte na web Heroku a přihlaste se pomocí svého e-mailového ID.

2. Najděte svou aplikaci na „ří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„Přidat".

Kódování skutečného robota

Nyní, když jsme skončili s gruntovou prací, se můžeme soustředit na to, na čem opravdu záleží: aby robot reagoval na zprávy. Nejprve navrhneme robota, který jednoduše odráží zprávy, které přijímá. Jak se ukázalo, tento jednoduchý úkol vyžaduje k fungování značný kus kódu.

1. Kódování posluchače zpráv

Než robot může odezvu zpět na zprávu, musí být schopen poslouchat zprávy. Udělejme to jako první.

V souboru index.js přidejte následující kód:

[js]

app.post ('/ webhook', function (req, res)
var events = req.body.entry [0] .messaging;
pro (i = 0; i < events.length; i++)
var událost = události [i];
if (event.message && event.message.text)
sendMessage (event.sender.id, text: "Echo:" + event.message.text);


res.sendStatus (200);
);

[/ js]

Tato funkce dělá, kontroluje přijaté zprávy a poté kontroluje, zda je ve zprávě text. Pokud v přijaté zprávě najde text, zavolá funkci sendMessage (zobrazeno později) a předá ID odesílatele a text, který se má odeslat zpět. Je důležité porozumět následujícím hodnotám a jejich významu:

• event.message.text je text přijatý ve zprávě. Například pokud někdo pošle našemu botovi zprávu „Hello“, hodnota event.message.text bude „Hello“.

• event.sender.id je ID osoby, která odeslala zprávu robotovi. To je nutné, aby robot věděl, komu má odpovědět.

2. Kódování funkce sendMessage

Umožňuje nyní kódovat funkci „sendMessage“.

[js]

funkce sendMessage (recipientId, zpráva)
žádost(
url: „https://graph.facebook.com/v2.6/me/messages“,
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
metoda: 'POST',
json:
recipient: id: recipientId,
zpráva: zpráva,

, funkce (chyba, odpověď, tělo)
if (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:

• recipientId

• zpráva

PříjemceId je vyžadován, aby bylo možné zprávu 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 ozvěnu přijatého textu zpět. Nejprve ale musíte změny odeslat do aplikace hostované na Heroku. Postupujte podle níže uvedených kroků:

1. Spusťte terminál.

2. Změňte adresář na svůj adresář testbot
cd testbot

3. Proveďte následující kroky:

• git přidat .

• Poznámka: Tady je "." na konci „git add“

• git commit -m „První potvrzení“

• git push heroku master

4. Nyní pošlete zprávu na svou stránku a robot vám zprávu odráží zpět.

Podmíněné odpovědi aka Zajištění chytřejšího robota

Můžeme použít shodu textu, abychom umožnili našemu robotu Facebook Messenger reagovat podle určitých speciálních klíčových slov.

Abychom toho dosáhli, musíme přidat další funkci. Jmenuji to „conditionalResponses“, ale můžete si vybrat, jaké jméno chcete.

1. Kódování funkce conditionalResponses

[js]

funkce conditionalResponses (recipientId, text)
text = text || "";

var what = text.match (/ what / gi); // zkontrolovat, zda textový řetězec obsahuje slovo „what“; ignorovat případ
var beebom = text.match (/ beebom / gi); // zkontrolovat, zda textový řetězec obsahuje slovo „beebom“; ignorovat případ
var who = text.match (/ who / gi); // zkontrolovat, zda textový řetězec obsahuje slovo „who“; ignorovat případ
var you = text.match (/ you / gi); // zkontrolovat, zda textový řetězec obsahuje slovo „vy“; ignorovat případ

// pokud text obsahuje jak „co“, tak „beebom“, proveďte toto:

if (what! = null &&; beebom! = null)
zpráva =
text: "Beebom je web nabízející technické zdroje. Vítejte."

sendMessage (recipientId, zpráva);
návrat true;

// pokud text obsahuje „kdo“ i „vy“, proveďte toto:
if (who! = null && you! = null)
zpráva =
text: „Byl jsem požádán, abych o své totožnosti neprobíral online.“

sendMessage (recipientId, zpráva);
návrat true;

// pokud se nic neshoduje, vraťte hodnotu false a pokračujte v provádění vnitřní funkce.
návrat false;
;

[/ js]

V řádcích 4 až 7 jsme definovali proměnné v závislosti na porovnání přijatého řetězce s konkrétními slovy. Nejlepší částí používání „text.match ()“ je to, že používá regulární výrazy (obvykle nazývané regex, více si přečtěte zde.). Je to pro nás dobré, protože to znamená, že pokud se i část slova v přijatém textu shoduje s jedním ze slov, která jsme zmínili v text.match (), proměnná nebude mít hodnotu null. To znamená, že pokud byla přijatá zpráva „What Beebom?“, „Var what“ a „var beebom“ nebudou null, protože slovo „What's“ obsahuje slovo „what“. Takže jsme zachráněni od vytváření dalších příkazů pro každou variantu, ve které by někdo mohl říct „Co“.

2. Úpravy posluchače zpráv

Musíme také upravit posluchač zpráv, který jsme kódovali, aby bylo zajištěno, že se pokusí porovnat přijatý text také s funkcí „conditionalResponses“.

[js]

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

// nejprve zkuste zkontrolovat, zda přijatá zpráva splňuje podmínky pro podmíněnou odpověď.
if (! conditionalResponses (event.sender.id, event.message.text))

// pokud se tak nestane, jednoduše ozvěte přijatou zprávu zpět odesílateli.
sendMessage (event.sender.id, text: "Echo:" + event.message.text);



res.sendStatus (200);
);

[/ js]

Změny v posluchači nemusí vypadat příliš drasticky, ale jejich účinky určitě jsou. Nyní se posluchač nejprve pokusí odpovědět podmíněnými odpověďmi, a pokud pro přijatou zprávu neexistuje platná podmínka, jednoduše ozve zprávu zpět uživateli.

3. Posunutí změn do Heroku

Než budete moci vyzkoušet nové funkce, budete muset aktualizovaný kód odeslat do aplikace hostované na Heroku. Postupujte podle následujících pokynů:

1. Spusťte terminál.

2. Změňte adresář na svůj adresář testbot
cd testbot

3. Proveďte následující kroky:

• git přidat .

• Poznámka: Tady je "." na konci „git add“

• git commit -m „Přidání podmíněných schopností“

• git push heroku master

4. Nyní pošlete zprávu na svou stránku a robot vám zprávu odráží zpět.

Ještě více funkcí

Náš robot 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ěkolik dalších změn v kódu, aby byl náš robot více “funkční„Kus softwaru. Budeme přepracování mnoha funkcí, a přidáním dalších pár, tak se vzrušujte.

1. Úpravy posluchače zpráv

Náš posluchač zpráv v této fázi funguje dobře. Není to však moc pěkně naformátované a pokud bychom měli neustále zvyšovat vnořené příkazy if, abychom přidali další “kontroly stavu„, Rychle se stane ošklivým na pohled, těžko pochopitelným a pomalejší při provádění. To teď nechceme, že? Udělejme několik změn.

Poznámka: V posluchači zpráv je řádek kódu, který čte „Res.sendStatus (200)“, tento řádek odešle na Facebook kód stavu 200 a sdělí mu, že funkce byla úspěšně provedena. Podle dokumentace Facebooku Facebook čeká maximálně 20 sekund na získání stavu 200, než se rozhodne, že zpráva neprošla, a zastaví provádění kódu.

Náš nový posluchač zpráv vypadá takto. Používáme „res.sendStatus (200)”Příkaz k zastavení provádění funkce, jakmile je podmínka spárována a provedena.

[js]

app.post ('/ webhook', function (req, res)
var events = req.body.entry [0] .messaging;
pro (i = 0; i < events.length; i++)
var událost = 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 nazval newResponse: p; zaškrtněte toto další
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);

// jinak, stačí zopakovat původní zprávu
else
// 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

Náš posluchač zpráv nyní zkontroluje text zprávy podle sady podmínek v „NewResponse“ stejně, ale nejprve musíme kódovat funkci newResponse. Tuto funkci použijeme ke kontrole, zda o to uživatel požádal návrhy článků z webu Beebom, prohledat dotaz termín na webových stránkách a předložit odkaz uživateli. Opět použijeme regulární výrazy, abychom text přiřadili konkrétním klíčovým slovům.

[js]

funkce 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);

// zkontrolovat, zda uživatel vůbec žádá o návrhy článků
if (navrhnout! = null && článek! = null)
var dotaz = "";
// pokud jsou dotazovány návrhy článků, 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 (prohlížeč! = null)
query = "Prohlížeč";
else if (vpn! = null)
query = "VPN";

sendButtonMessage (recipientId, dotaz);
návrat true

návrat false;
;

[/ js]

Používáme další vlastní funkci s názvem „SendButtonMessage“ odeslat zprávu v případě, že uživatel požaduje návrhy článků. Toto vytvoříme příště.

3. Kódování funkce sendButtonMessage

Funkce sendButtonMessage trvá dva parametry, a ID příjemce a 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, ke kterému chce uživatel návrhy článků.

[js]

funkce sendButtonMessage (recipientId, dotaz)
var messageData =
příjemce:
id: recipientId
,
zpráva:
příloha:
typ: "šablona",
užitečné zatížení:
template_type: "button",
text: "To je to, co jsem našel pro" + dotaz,
tlačítka: [
typ: "web_url",
url: „http://www.beebom.com/?s="+query,
title: "Beebom:" + dotaz
]



;

callSendAPI (messageData);

[/ js]

Opět používáme vlastní funkci; tentokrát k odeslání závěrečné zprávy s odkazy na články uživateli. Funkce je v mnoha ohledech podobná funkci "poslat zprávu" funkce, kterou jsme kódovali dříve, ale je obecnější ve způsobu, jakým bere data zprávy, což nám vyhovuje, protože data našich zpráv se mění s dotazem, který uživatel provede.

4. Kódování funkce callSendAPI

The „CallSendAPI“ Funkce přebírá jediný parametr, „MessageData“. Tento parametr obsahuje celá data zprávy, správně naformátovaná podle pravidel Facebooku, aby je Messenger mohl uživateli správně zobrazit.

[js]

funkce callSendAPI (messageData)
žádost(
uri: „https://graph.facebook.com/v2.6/me/messages“,
qs: access_token: process.env.PAGE_ACCESS_TOKEN,
metoda: 'POST',
json: messageData

, funkce (chyba, odpověď, tělo)
if (! error && response.statusCode == 200)
var recipientId = body.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 (response);
console.error (chyba);

);

[/ js]

5. Posunutí změn do Heroku

Jsme v posledním kroku k tomu, aby byl náš upgradovaný robot aktivní. Musíme jen poslat 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 testbot adresář.
cd testbot

3. Postupujte následovně:

• git přidat .

• Poznámka: Tady je "." na konci tohoto příkazu.

• git commit -m „vylepšení kontroly stavu a formátování“

• git push heroku master

4. Nyní pošlete zprávu jako „Navrhněte článek pro Android“ nebo „Beebom, navrhněte mi jakýkoli článek na téma Android“; a robot pošle pěkně naformátovanou zprávu s odkazem, na který můžete klepnout a otevřít články související s vaším dotazem.

VIZ TÉŽ: 16 Facebook Messenger tipů a triků, které byste měli vědět

Kopej hlouběji

Nyní, když víte, jak začít s vývojem robotů Facebook Messenger, projděte si dokumentaci Facebook o vývoji robotů Facebook Messenger. I když dokumentace není vhodná pro začátečníky, už nejste začátečník. Měli byste si prohlédnout oficiální dokumentaci a pokusit se přijít na to, jak udělat vašeho robota ještě chytřejším. Upoutávka: Můžete také odesí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í vašeho robota a jeho integraci s Facebookem, ale při mých slabých pokusech tyto služby 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 robota Facebook Messenger? Pokud máte, jak jste jej vyvinuli a co může dělat? Použili jste k vytvoření svého robota služby jako Wit.ai a Api.ai? Pokud jste si nikdy nezkoušeli programovat robota, jděte a vytvořte si svého vlastního robota pro Facebook, udělejte ho chytřejším a lepším a dejte nám vědět o svých zkušenostech v komentářích níže.