Készítsen saját facebook messenger chatbotot a node.js segítségével kevesebb, mint egy nap alatt.

Az elmúlt néhány hétben egy olyan chatbot platform fejlesztésén dolgozom, amely lehetővé teszi a felhasználók számára a botok összeállítását és összekapcsolását anélkül, hogy a kódolást egészen a semmiből el kellene végezni, és a platform felépítésének folyamatát, sok felfedezést és kutatást végeztem, és találkoztam sok cikk és üzenet, amelyek a chatbotok felépítéséről szóltak, és rájöttem, hogy a legtöbb cikkben hiányoznak az egyszerű kulcsfontosságú elemek, például a GET STARTED gomb hozzáadása, indikátorok gépelése, animációk, lista- és kártyasablonok, tartós menü, visszacsatolások kezelése stb.

Tehát ma egy Facebook messenger botot építünk a semmiből, a node.js használatával, és telepítjük a Heroku-ra (mivel érvényes SSL-tanúsítványra van szükségünk), az ngrok-ot szintén használhatja ugyanazon, de én inkább a Heroku-t részesítem előnyben. A messenger platform az eszközkészlet a bot felépítéséhez, és a már elérhető alapvető alkotóelemeinek nagy részét is használjuk, mint amilyeneket fentebb beszéltünk.

Ennek az oktatóanyagnak a feltétele a Node.js, a gitHub és az alapvető javascript megértés. Tehát mielőtt folytatnánk, hadd szakítsam fel a folyamatot 5 lépésre. Hivatkozhat a GitHub-tárházra is, amikor elakad.

  • Expressz szerver létrehozása.
  • A webhook beállítása.
  • Telepítse a herokuba
  • A facebook alkalmazás beállítása.
  • Építsd meg a botot.
1. lépés: Az alkalmazás létrehozása

Létrehozunk egy egyszerű csevegőbotot, amely megmutatja nekünk az általunk fogyasztott élelmiszerek tápértékét (a táplálkozási adatok megszerzéséhez harmadik fél API-t fogunk használni). Tehát kezdjük el létrehozni egy egyszerű webszervert a webhook végponttal. Minden, ami a Messenger botjával történik, eseményként kerül elküldésre a webhookba. Itt él a kód, és a Messenger Platform integrációjának központi eleme, ahol üzeneteket fog fogadni, feldolgozni és elküldeni.

Hozzunk létre egy könyvtárat, és el fogjuk nevezni facebook-bot-nak. Megnevezheti, amit csak akar

VS kódot használok kódszerkesztőmként.

Most, hogy létrehoztuk a könyvtárat, az npm init gépelésével inicializálhatjuk a csomópont alkalmazást.

Most, hogy a csomópont beállítva, telepítsünk néhány csomagot, amelyre szükségünk lenne a szerver beállításához.

npm telepítés expressz test-elemző morgan kérés nodemon - mentés

Miután a telepítés befejeződött, láthatja ezeket a csomagokat a package.json fájlban, és ne felejtse el hozzáfűzni a „start”: „nodemon server.js” fájlt a package.json fájlhoz. Alapvetően újraindítja az alkalmazást, ha bármilyen változás történik. a kódban megtakarítja a szerver kézi újraindításának fájdalmát.

Most létrehozunk egy server.js nevű fájlt és egy útvonalak nevű mappát, az útvonalak mappában pedig a webhook_verify.js fájlt fogjuk létrehozni.

Ha minden jól ment, akkor a könyvtárnak így kell kinéznie

Most hozzáadjuk a következő kódot a server.js fájlhoz

const express = igényel ('express') const morgan = igény ('morgan'); const bodyParser = igényelni ('body-parser');
const app = express ();
// alkalmazáskonfiguráció app.set ('port', (process.env.PORT || 3000));
// állítsa be az expressz alkalmazásunkat
app.use (Morgan ( 'dev')); // minden kérést naplózzon a konzolra. app.use (bodyParser.urlencoded ({kiterjesztett: hamis})); app.use (bodyParser.json ());
// Az alkalmazás útvonalai megkövetelik ('./ route / webhook_verify') (alkalmazás);
// a motorok felmelegítése !! setta !! menj !!!.
app.listen (app.get ('port'), function () {const url = 'http: // localhost:' + app.set ('port'); console.log ('Porton futó alkalmazás fut:', app.get ( 'port'));
});
2. lépés: a webhook beállítása.

Most itt az ideje, hogy megírja a webhook végpont létrehozásának kódját, amely elfogadja a POST kéréseket, ellenőrzi, hogy a kérés webhook esemény, majd elemzi az üzenetet. Ebben a végpontban a Messenger Platform küld minden webhook eseményt. Írja be a következő kódot a webhook_verify.js fájlba.

const processPostback = igényelni ('../ folyamatok / visszacsatolás'); const processMessage = igényelni ('../ folyamatok / üzenetek');
module.exports = function (alkalmazás, kréta) {app.get ('/ webhook', function (req, res) {if (req.query ['hub.verify_token'] === process.env.VERIFY_TOKEN) {console .log ('webhook verified'); res.status (200) .send (req.query ['hub.challenge']);} else {console.error ('ellenőrzés nem sikerült. Token eltérés.'); res.sendStatus (403);}}); app.post ('/ webhook', funkció (req, res) {// az oldal feliratkozásának ellenőrzése. ha (req.body.object === 'oldal') {/ * Minden tételnél megismételjük, több bejegyzés is lehet. ha a visszahívások kötegelt. * /
req.body.entry.forEach (függvény (bejegyzés) {// Minden egyes üzenetküldési esemény fölé kerüljön bejegyzés.messaging.forEach (függvény (esemény) {console.log (esemény); if (esemény.postback) {processPostback (esemény); } egyébként if (esemény.üzenet) {processMessage (esemény);}});}); res.sendStatus (200); }}); }

A process.env.VERIFY_TOKEN az ellenőrző jogkivonat, amelyet létrehozunk egy facebook alkalmazás létrehozásakor, majd azt a környezeti változóba mentjük, amikor a herokuba telepítjük. Közvetlenül megadhatja a kemény kódot, de erre nem jó gyakorlat.

A processPostback és a processMessage egyéni funkciók, amelyek kezelik a különböző eseményeket, amelyeket fogadnak, lehet üzenet vagy visszajelzés. Megpróbáljuk megérteni ezt a két kifejezést az oktatóanyag későbbi részeiben. Most hozzon létre két postback.js és message.js fájlt az új folyamatok nevű mappába. Mindent ugyanabba a fájlba írhattunk volna, de szeretném, ha a kód tiszta és szervezett marad. A processPostback függvény a visszamenőleges események meghallgatását foglalja magában, azaz reagál a kapott hasznos rakományokra, a másik függvény pedig a processMessage a szöveges válaszokat.

3. lépés: Telepítés a heroku-ra

Most, hogy létrehoztuk a szerverünket, telepítenünk kell a kódot a heroku-ra, mert a helyi szerver nem mindenki számára elérhető az interneten, és nem is támogatja a HTTPS protokollt, amely elengedhetetlen, mivel a facebook azt sugallja, hogy minden webhook-előfizetésnek biztonságosnak kell lennie. A HTTPS visszahívási URL-je, ami azt jelenti, hogy a localhost vagy bármilyen önaláírt tanúsítvány nem fog működni.

Látogassa meg a Heroku → fiók létrehozása → bejelentkezés → alkalmazás létrehozása lehetőséget.

A következő lépés a telepítési módszer kiválasztása, ami alapvetően azt jelenti, hogy a Heroku Git vagy a Github felhasználót is használhatja. A Herit Git helyett a GitHub lerakatomat fogom használni. De mielőtt összekapcsolnám a GitHub-tárolómat, el kell készítenem egy üres tárházat a GitHub-on, ahol minden eddig írt kódot átadom.

Most, hogy elküldtük kódunkat a megfelelő tárolókhoz, továbbléphetünk és csatlakoztathatjuk a GitHub-ot.

Miután befejezte a GitHub tárház összekapcsolását, engedélyezze az automatikus telepítést, hogy a kód automatikusan települjön minden alkalommal, amikor új kóddarabot helyez a tárolóba.

És itt végeztünk !!!
4. lépés: A facebook alkalmazás beállítása.

Most létrehozunk egy alkalmazást a https://developers.facebook.com/ oldalon.

Kattintson az Alkalmazások szakaszra, és hozzon létre egy új alkalmazást.

Most hozzá kell adnunk messenger platformot a mi alkalmazásunkhoz.

Kattintson a Beállítás gombra az üzenetküldő alkalmazás hozzáadásához.

A messenger beállításban be kell állítanunk a webhook végpontot, és fel kell előfizetnünk egy oldalt a végponthoz.

Mielőtt elkezdené az ellenőrzést és a mentést, másolja át az ellenőrző tokent, és állítsa be a környezeti változót a Heroku-ban. Kattintson a Beállítások fülre, majd → jelenítse meg a konfigurációs verziókat → állítsa be a VERIFY_TOKEN és PAGE_ACCESS_TOKEN

Most az utolsó lépés, mielőtt ténylegesen megkezdenénk a bot felépítését, feliratkozunk az oldalra a webhookon.

Most, hogy készen állunk a webhookunkra és telepítésre került, ideje átjutni a végső szegmensbe, ahol felépítjük a bot logikát, és azt mondjuk, hogy tegye meg a kapott válasz alapján.

4. lépés: A bot felépítése

Először azzal kezdjük, hogy egy GET STARTED gombot adunk a botunkhoz, amely lesz a belépési pont a felhasználó számára a chatbottal való kommunikáció megkezdéséhez.

göndör -X POST -H "Tartalom-típus: application / json" -d '{"get_started": {"payload": "GET_STARTED_PAYLOAD"}}' "https://graph.facebook.com/v2.6/me / messenger_profile? access_token = PAGE_ACCESS_TOKEN”

A fenti göndör parancs segítségével adjon hozzá egy kezdő gombot. Feltétlenül cserélje ki mind a GET_STARTED_PAYLOAD, mind a PAGE_ACCESS_TOKEN értékeket konkrét értékekre, és a siker esetén olyan üzenetet fog kapni, mint például

{ "Eredmény": "siker"}
Erre utalok

Nos, a hasznos teherét WELCOME-ra állítottam, tehát hagyja tovább, és küldjön üdvözlő üdvözletet minden alkalommal, amikor a felhasználó rákattint az Indítás gombra. létrehozunk egy új mappát, elnevezzük a sablonokat, és 3 fájlt hozunk létre

  • senderAction.js
  • sendMessage.js
  • sendGenericTemplate.js

Most, hogy elkészítettük fájljainkat, megírhatjuk a megfelelő függvényeket.

senderAction.js
const request = igényelni ('kérés'); module.exports = funkció senderAction (recipiend) {
kérés ({url: "https://graph.facebook.com/v2.6/me/messages", kérdések: {access_token: process.env.PAGE_ACCESS_TOKEN}, módszer: "POST", json: {címzett: {id : recipiend}, "sender_action": "typing_on"}}, funkció (hiba, válasz, test) {if (hiba) {console.log ("Hiba az üzenet küldésekor:" + válasz.error);}}); }
sendMessage.js
const request = igényelni ('kérés'); module.exports = sendMessage funkció (recipiend, üzenet) {
új ígéret visszaadása (funkció (megoldás, elutasítás) {kérés ({url: "https://graph.facebook.com/v2.6/me/messages", kérdések: {hozzáférési_token: folyamat.env.PAGE_ACCESS_TOKEN}, módszer: "POST", json: {címzett: {azonosító: címzettId}, üzenet: üzenet,}}, funkció (hiba, válasz, test) {if (hiba) {console.log ("Üzenet küldése:" + response.error ); elutasítás (response.error);} egyéb {megoldás (test);}});})}

A SenderAction funkció megjeleníti a gépelési mutatót a beszélgetésben a Küldés API-n keresztül. Ez akkor hasznos, ha lehetővé teszi, hogy az üzenet címzettjei, amelyeket már ismertek, hogy látják, és feldolgozzák az üzenetüket, a sendMessage funkció a választ küldje a felhasználónak. Most térjünk vissza a postback.js fájlhoz, és írjuk be a kódot a felhasználói visszatérések kezeléséhez.

const request = igényelni ('kérés'); const senderAction = igényelni ('../sablonok / senderAction'); const sendMessage = igény ('../sablonok / sendMessage');
module.exports = functionPostback (esemény) {
const senderID = esemény.sender.id; const payload = event.postback.payload; if (payload === 'WELCOME') {kérés ({url: "https://graph.facebook.com/v2.6/" + feladó azonosítója, qs: {access_token: process.env.PAGE_ACCESS_TOKEN, mezők: "first_name "}, módszer:" GET "}, funkció (hiba, válasz, test) {hagyja az üdvözlést = ''; if (hiba) {console.error (" Hiba a felhasználónév lekérdezésekor: "+ hiba);} egyéb {had bodyObject = JSON.parse (body); console.log (bodyObject); name = bodyObject.first_name; greeting = "Hello" + name + ".";}
     hagyja, hogy üzenet = üdvözlet + "Üdvözöljük a Healthbotban. Remélem, hogy jól teljesítesz ma";
     hadd message2 = "Én vagyok a táplálkozási nyomkövetőed :-)"
     hadd üzenet3 = "kérjük írja be, hogy mit ettél: Birayáni csirkét etettem és 2 dallatos chapatist etettem.";
senderAction (senderID); sendMessage (senderID, {text: message}). majd (() => {sendMessage (senderID, {text: message2}). then (() => {sendMessage (senderID, {text: message3}), majd (( ) => {sendMessage (senderID, {szöveg: ''});})});}); }); }}

Itt az ideje, hogy az újonnan hozzáadott kódunkat eljuttassuk a szerverre

add hozzá. git activ -m "az átadási üzenet" git push származási mester

Ha minden jól működött, akkor az indulás gombra kattintás után ilyen választ kap.

Az elején megemlítettem, hogy néhány animációt is hozzáadunk a beszélgetéshez, és inkább egy hack jellegű dolog, amelyben a emoticonok küldése a sendAPI-n keresztül néhány animációt jelenít meg a képernyőn, mint ez

sendMessage (senderID, {text: ''});

Most, hogy üdvözöltük a felhasználót, kezeljük a felhasználói válasz szövegét. Keresse meg az messages.js fájlt, és adja hozzá a következő kóddarabot.

const request = igényelni ('kérés'); const senderAction = igényelni ('../sablonok / senderAction'); const sendMessage = igény ('../sablonok / sendMessage'); const sendGenericTemplate = igény ('../ templates / sendGenericTemplate');
module.exports = függvény processMessage (esemény) {if (! event.message.is_echo) {const message = event.message; const senderID = esemény.sender.id; console.log ("Beérkezett üzenet a senderId-től:" + senderID); console.log ("Üzenet:" + JSON.stringify (üzenet)); if (message.text) {// most átvesszük a kapott szöveget, és elküldjük egy élelmiszer-követő API-nak. hagyja, hogy a szöveg = üzenet.text; let kérés = igényelni ("kérés"); let options = {módszer: 'POST', URL: 'https://mefit-preprod.herokuapp.com/api/getnutritionvalue', fejlécek: {'cache-control': 'no-cache', 'content-type' : 'application / json'}, törzs: {userID: process.env.USERID, searchTerm: text}, json: true};
kérés (opciók, funkció (hiba, válasz, törzs) {if (hiba) új hibát okoz (hiba); senderAction (senderID); // a válasz megérkezése után küldjük el a részleteket egy sendGenericTemplate (senderID, body) általános sablonban. );
}); }}}

Olyan API-t fogunk használni, amely egy karakterláncot vesz bemenetként, és megkísérli azonosítani az élelmiszereket táplálkozási értékéből. majd küldje el az API válaszát a sendGenericTemplate () függvényünkre, és létrehoz egy sablont a válasz megjelenítéséhez.

const request = igényelni ('kérés');
module.exports = sendGenericTemplate (recipiend, respBody) funkció {console.log (respBody); const NutrialValue = []; for (legyen i = 0; i 
} NutritionValue.push (obj); } hagyja, hogy messageData = {"melléklet": {"type": "template", "payload": {"template_type": "generic", "elements": nutralValue}}}
kérés ({url: 'https://graph.facebook.com/v2.6/me/messages', kérdések: {hozzáférési_token: process.env.PAGE_ACCESS_TOKEN}, módszer: 'POST', json: {címzett: {id : címzettId}, üzenet: messageData,}}, funkció (hiba, válasz, törzs) {if (hiba) {console.log ("Hiba az üzenet küldésekor:" + válasz.error)}})}
klónozhatja a tényleges kódot a https://github.com/soulreaper02/facebook-bot-demo webhelyről.
Itt az ideje, hogy látjuk a botot működésben.

És végre végül eljutottunk ennek az oktatóanyagnak a végéhez, amellyel a js csomóponttal saját facebook messenger botot építhetünk a semmiből. Tehát alapvetően áttekintettük, hogyan kell kezelni a két különféle típusú eseményt, azaz a visszamenőleges üzeneteket és az üzeneteket, gépelési mutatókat használtunk, hozzáadtuk a kezdés gombot, egy léggömb animációt és egy dinamikus kártya sablont készítettünk az adatok megjelenítéséhez. Remélem tetszik, és ha igen, kérjük, adja meg az összes tapsot.