Bygg din egen facebook messenger chatbot med node.js på mindre än en dag.

Från de senaste veckorna arbetar jag med att utveckla en chatbot-plattform som gör det möjligt för användare att bygga och ansluta sina bots utan att koda hela vägen från grunden och processen att bygga plattformen, jag gjorde en hel del utforskning och forskning och kom över många artiklar och inlägg som talade om att bygga chatbots och vad jag insåg är att de flesta av artiklarna missar enkla nyckelelement som att lägga till knappen GET STARTED, skriva indikatorer, animationer, lista och kortmallar, ihållande meny, hantera postbacks etc.

Så idag bygger vi en Facebook messenger-bot från grunden med node.js och vi kommer att distribuera den på Heroku (eftersom vi behöver ett giltigt SSL-certifikat) kan du också använda ngrok för samma men jag föredrar Heroku. Messenger-plattformen är vår verktygslåda för att bygga vår bot och vi kommer också att använda de flesta av dess redan tillgängliga kärnkomponenter som de jag talade ovan.

Förutsättningarna för denna handledning är Node.js, gitHub och grundläggande JavaScript-förståelse. Så innan vi fortsätter, låt mig dela upp processen i fem steg. Du kan också hänvisa till GitHub-lagringsinkaset som du fastnar.

  • Skapa vår expressserver.
  • Ställa in webbhaken.
  • Distribuera till heroku
  • Ställer in facebook-appen.
  • Bygg botten.
Steg 1: Skapa vår app

Vi kommer att skapa en enkel chatbot som berättar näringsvärdet för matvaror som konsumeras av oss (vi kommer att använda en tredjeparts api för att få näringsdata). Så låt oss komma igång genom att skapa en enkel webbserver med vår endpoint för webhook. Allt som händer med din Messenger-bot skickas som en händelse till din webhook. Det är här din kod bor och är kärnan i din Messenger-plattformsintegration, där du kommer att ta emot, bearbeta och skicka meddelanden.

Låt oss skapa en katalog så ska vi namnge det facebook-bot. Du kan namnge det du vill

Jag använder VS-kod som min kodredigerare.

Nu när vi har skapat kan katalogen initialisera nodappen genom att skriva npm init.

Nu när din nod är inställd låt oss installera några paket som vi skulle behöva för att ställa in vår server.

npm installera express body-parser morgan begäran nodemon - spara

När installationen är klar kan du se dessa paket i din package.json-fil och glöm inte heller att lägga till "start": "nodemon server.js" till din package.json-fil Det startar i princip applikationen när det är någon ändring i koden sparar du smärtan av att manuellt starta om din server.

Nu ska vi skapa en fil med namnet server.js och en mapp som heter rutter och inuti ruttmappen skapar vi en fil webhook_verify.js

Om allt gick bra så bör din katalog se ut så här

Låt oss nu lägga till följande kod i vår server.js-fil

const express = kräva ('uttryck') const morgan = kräva ('morgan'); const bodyParser = kräva ('body-parser');
const app = express ();
// appkonfiguration app.set ('port', (process.env.PORT || 3000));
// konfigurera vår expressapplikation
app.use (Morgan ( 'dev')); // logga varje begäran till konsolen. app.use (bodyParser.urlencoded ({utvidgad: falsk}); app.use (bodyParser.json ());
// app-rutter kräver ('./ routes / webhook_verify') (app);
// värma upp motorerna !! setta !! gå !!!
app.listen (app.get ('port'), funktion () {const url = 'http: // localhost:' + app.set ('port'); console.log ('Program som körs på port:', app.get ( 'port'));
});
Steg 2: ställa in webbhaken.

Nu är det dags att skriva koden för att skapa en webhook-slutpunkt som accepterar POST-förfrågningar, kontrollerar att begäran är en webbhook-händelse och sedan analyserar meddelandet. Denna slutpunkt är där Messenger-plattformen skickar alla webbhook-händelser. Skriv nu följande kod i filen webhook_verify.js.

const processPostback = kräva ('../ processer / postback'); const processMessage = kräva ('../ processer / meddelanden');
module.exports = funktion (app, krita) {app.get ('/ webhook', funktion (req, res) {if (req.query ['hub.verify_token'] === process.env.VERIFY_TOKEN) {konsol .log ('webhook verified'); res.status (200). skicka (req.query ['hub.challenge']);} else {console.error ('verifiering misslyckades. Token Misslyckning.'); res.sendStatus (403);}}); app.post ('/ webhook', funktion (req, res) {// kolla efter sidabonnemang. if (req.body.object === 'page') {/ * Iterera över varje post kan det finnas flera poster om återuppringningar är samlade. * /
req.body.entry.forEach (funktion (post) {// Iterera över varje meddelandehändelsens post.messaging.forEach (funktion (event) {console.log (event); if (event.postback) {processPostback (event); } annat om (event.message) {processMessage (event);}});}); res.sendStatus (200); }}); }

Processen.env.VERIFY_TOKEN är verifieringstoken som vi skapar medan vi skapar en Facebook-app och sedan sparar vi den i miljövariabeln när vi distribuerar den till heroku. Du kan direkt hård kod men det är inte bra att göra det.

processPostback och processMessage är enskilda funktioner som hanterar olika händelser som mottagits, det kan vara ett meddelande eller en postback, vi kommer att försöka förstå dessa två termer i detalj i de senare delarna av denna tutorial. Skapa nu två filer postback.js och message.js i nya mappnamn processer. Vi kunde ha skrivit allt i samma fil men jag gillar att hålla koden ren och organiserad. ProcessPostback-funktionen kommer att hantera postback-händelserna, dvs svara på mottagna nyttolaster och den andra funktionen processMessage kommer att hantera textsvaren.

Steg 3: Distribuera på heroku

Nu när vi har skapat vår server måste vi distribuera vår kod till heroku eftersom vår lokala server inte är tillgänglig för alla på internet och dessutom stöder den inte HTTPS-protokoll, vilket är ett måste eftersom facebook antyder att alla webhook-abonnemang måste använda ett säkert HTTPS återuppringnings-URL som betyder localhost eller någon typ av självsignerat certifikat fungerar inte.

Besök Heroku → skapa konto → logga in → skapa app.

Nästa steg är att välja din distributionsmetod som i princip innebär att du antingen kan använda Heroku Git eller Github. Jag kommer att använda mitt GitHub-arkiv istället för Heroku Git. Men innan jag ansluter mitt GitHub-arkiv måste jag skapa ett tomt arkiv på GitHub där jag trycker på all den kod vi har skrivit hittills.

Nu när vi har drivit vår kod till våra respektive förvar kan vi gå vidare och ansluta vår GitHub.

När du är klar med att ansluta ditt GitHub-arkiv aktiverar du automatiskt distributioner så att koden automatiskt distribueras varje gång du skjuter ett nytt kodstycke till ditt arkiv.

Och vi är klara här !!!
Steg 4: Ställa in facebook-appen.

Nu ska vi skapa en app på https://developers.facebook.com/.

Klicka på mitt appar-avsnitt och skapa en ny app.

Nu måste vi lägga till messenger-plattform i vår app.

Klicka på Set Up för att lägga till messenger till din app.

Nu i messenger-inställningen måste vi konfigurera webhook-slutpunkten och prenumerera en sida på slutpunkten.

Innan du trycker på verifiera och spara, kopiera verifieringstoken och ställ in miljövariabeln i Heroku. Klicka på inställningsfliken och sedan → avslöja config vars → ställa in VERIFY_TOKEN och PAGE_ACCESS_TOKEN

Nu är det sista steget innan vi faktiskt börjar bygga vår bot prenumerera på webben.

Nu när vi har vår webhook klar och distribuerad är det dags att gå över till det slutliga segmentet där vi ska bygga botlogiken och säga den ska göra baserat på svaret den får.

Steg: 4 Bygg botten

Vi börjar först med att lägga till en GET STARTED-knapp till vår bot som kommer att vara startpunkten för användaren att börja kommunicera med chatbot.

curl -X POST -H "Content-Type: application / json" -d '{"get_started": {"payload": "GET_STARTED_PAYLOAD"}}' "https://graph.facebook.com/v2.6/me / messenger_profile? access_token = PAGE_ACCESS_TOKEN"

Använd ovanstående curl-kommando för att lägga till en startknapp. Se till att du byter ut både GET_STARTED_PAYLOAD och PAGE_ACCESS_TOKEN med konkreta värden och vid framgång får du ett meddelande som

{ "Result": "framgång"}
Det här är vad jag refererar till

Tja, jag har ställt in min nyttolast på VÄLKOMMEN så låt gå vidare och skicka en välkomsthälsning när användaren klickar på knappen Komma igång. vi skapar en ny mapp och namnger mallarna och skapar 3 filer

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

Nu när vi har skapat våra filer kan vi skriva respektive funktioner.

senderAction.js
const request = kräva ('begäran'); module.exports = function senderAction (mottagareId) {
begäran ({url: "https://graph.facebook.com/v2.6/me/messages", qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, metod: "POST", json: {mottagare: {id : recipientId}, "sender_action": "typing_on"}}, funktion (fel, svar, kropp) {if (fel) {console.log ("Fel vid skicka meddelande:" + response.error);}}); }
sendMessage.js
const request = kräva ('begäran'); module.exports = funktion sendMessage (mottagar-ID, meddelande) {
returnera nytt löfte (funktion (lösa, avvisa) {begäran ({url: "https://graph.facebook.com/v2.6/me/messages", qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, metod: "POST", json: {mottagare: {id: mottagareId}, meddelande: meddelande,}}, funktion (fel, svar, kropp) {if (fel) {konsol.log ("Fel vid skicka meddelande:" + svar.error ); avvisa (respons.error);} else {resoluta (organ);}});})}

Funktionen avsändare visar en skrivindikator i konversationen via Skicka API. Detta är användbart för att låta meddelandemottagarna veta att du har sett och bearbetar sitt meddelande och funktionen sendMessage skickar svaret till användaren. Låt oss nu gå tillbaka till postback.js-filen och skriva koden för att hantera användares postbacks.

const request = kräva ('begäran'); const senderAction = kräva ('../ mallar / senderAction'); const sendMessage = kräva ('../ mallar / sendMessage');
module.exports = funktion processPostback (händelse) {
const senderID = event.sender.id; const nyttolast = event.postback.payload; if (nyttolast === 'VÄLKOMMEN') {begäran ({url: "https://graph.facebook.com/v2.6/" + avsändareID, qs: {access_token: process.env.PAGE_ACCESS_TOKEN, fält: "first_name "}, metod:" GET "}, funktion (fel, svar, kropp) {let greeting = ''; if (error) {console.error (" Fel vid användarnamn: "+ fel);} annars {let bodyObject = JSON.parse (body); console.log (bodyObject); name = bodyObject.first_name; hälsning = "Hej" + namn + ".";}
     låt meddelande = hälsning + "Välkommen till Healthbot. Hoppas att du har det bra idag";
     let message2 = "Jag är din näringsspårare :-)"
     let message3 = "vänligen skriv in vad du åt: jag åt kyckling birayani och 2 chapatis med dal.";
senderAction (SenderID); sendMessage (avsändar-ID, {text: meddelande}). sedan (() => {sendMessage (avsändare, {text: meddelande2}). sedan (() => {sendMessage (avsändare, {text: meddelande3}). sedan (() ) => {sendMessage (avsändar-ID, {text: ''});})});}); }); }}

Nu är det dags att driva vår nyligen tillagda kod till servern

git add. git commit -m "ditt commit-meddelande" git push origin master

Om allt fungerade bra får du ett svar som detta efter att du klickat på startknappen.

I början hade jag nämnt att vi också kommer att lägga till några animationer till din konversation och dess mer av en hack typ av sak där genom att skicka uttryckssymboler via sendAPI kommer att visa några animationer på skärmen så här

sendMessage (avsändar-ID, {text: ''});

Nu när vi har hälsat användaren låt oss hantera användarens svarstext. Gå till din messages.js-fil och lägg till följande kodkod.

const request = kräva ('begäran'); const senderAction = kräva ('../ mallar / senderAction'); const sendMessage = kräva ('../ mallar / sendMessage'); const sendGenericTemplate = kräva ('../ mallar / sendGenericTemplate');
module.exports = funktion processMessage (händelse) {if (! event.message.is_echo) {const meddelande = event.message; const senderID = event.sender.id; console.log ("Mottaget meddelande från senderId:" + avsändareID); console.log ("Meddelande är:" + JSON.stringify (meddelande)); if (message.text) {// nu tar vi den mottagna texten och skickar den till ett API för matspårning. låt text = meddelande.text; låt begäran = kräva ("begäran"); låt alternativ = {metod: 'POST', url: 'https://mefit-preprod.herokuapp.com/api/getnutritionvalue', rubriker: {'cache-control': 'no-cache', 'content-type' : 'application / json'}, body: {userID: process.env.USERID, searchTerm: text}, json: true};
begäran (alternativ, funktion (fel, svar, kropp) {om (fel) kasta nytt fel (fel); avsenderAktion (avsändar-ID); // efter att svaret erhållits kommer vi att skicka informationen i en generisk mall sendGenericTemplate (avsändareID, kropp );
}); }}}

Vi kommer att använda en API som tar en sträng som en inmatning försök att identifiera livsmedel från den källa dess näringsvärde. och skicka sedan API-svaret till vår funktion sendGenericTemplate () och kommer att skapa en mall för att visa svaret.

const request = kräva ('begäran');
module.exports = funktion sendGenericTemplate (recipientId, respBody) {console.log (respBody); const nutritionionalValue = []; för (låt i = 0; i 
} nutritionionalValue.push (obj); } let messageData = {"bilaga": {"type": "mall", "nyttolast": {"template_type": "generisk", "element": nutritionionalValue}}}
begäran ({url: 'https://graph.facebook.com/v2.6/me/messages', qs: {access_token: process.env.PAGE_ACCESS_TOKEN}, metod: 'POST', json: {mottagare: {id : mottagareId}, meddelande: meddelandeData,}}, funktion (fel, svar, kropp) {if (fel) {konsol.log ("Fel vid skicka meddelande:" + svar.error)}})}
Du kan klona den faktiska koden från https://github.com/soulreaper02/facebook-bot-demo.
Nu är det dags för oss att se vår bot i aktion.

Och vi har äntligen kommit till slutet av denna tutorial om hur du bygger din egen facebook messenger bot från grunden med node js. Så vi täckte i princip hur vi hanterar de två olika typerna av händelser, dvs postbacks och meddelanden, vi använde typindikatorer, lade till en startknapp, en ballonganimation och byggde en dynamisk kortmall för att visa våra data. Jag hoppas att du gillar det och om du gör snälla ge alla klapparna du kan.