Facebooks "messenger bots" -funktion är inget nytt, och många fantastiska robotar finns redan. Resurserna med exakt hur du bygger din egen bot är dock knappa och saknar förklaring till personer som är nya i Facebook Graph API. Messenger-robotar kräver nu att du också använder en SSL-skyddad webhook-återkopplingsadress (mer om det senare) och att konfigurera SSL är inte för alla och kostar också pengar.
I den här artikeln kommer jag att gå igenom hela processen med att skapa en enkel Facebook-budbärare, eftersom Facebooks egen dokumentation är ganska dåligt förklarad. Vi kommer att skapa ett molnapp som använder https-protokollet, kod botten i Node.js (vilket är ett javascript, server-sidsspråk), använd git för att trycka koden på molnprogrammet och testa det på Facebook Messenger.
Setup Bot
Du behöver Node installerad på din bärbara dator. Om du inte gör det, gå till Node webbplats för att ladda ner och installera det.
När du är klar kan du fortsätta med inställningen för boten. Följ stegen nedan:
1. Starta terminal.
2. Du behöver en separat katalog för att hålla din kod.
- Skapa en ny katalog
mkdir testbot
- Ändra din arbetsmapp till den katalog du just skapat
cd testbot
3. Starta sedan nodprogrammet. npm init
- Du kommer att bli ombedd att ange information om din ansökan, använd bara standardinställningarna genom att trycka på Enter för allt.
4. Installera paket npm install express body-parser request --save
- Kommandot kommer att springa och ge några varningar; ignorera dem.
5. I Finder öppnar du katalogen " testbot " som du skapade och hittar filen heter " package.json "; öppna detta i en redigerare som Sublime Text.
6. I den här filen måste vi lägga till en rad "start": "node index.js"
- Glöm inte att lägga till en ", " i slutet av föregående rad.
7. Skapa sedan en ny fil i Sublime Text och sätt in följande kod inuti den:
[Js]
var express = kräver ("express");
var bodyParser = kräver ("body-parser");
var request = require ("request");
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funktion (req, res) {
res.send ('Detta är TestBot Server');
});
app.get ('/ webhook', funktion (req, res) {
om (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query [ 'hub.challenge']);
} annat {
res.send ('Ogiltig verifieringstoken');
}
});
[/ Js]
Spara den här filen som index.js
Obs! I rad 13 ställs värdet för "hub.verify_token" som " testbot_verify_token", kom ihåg det här värdet som det ska användas när du skapar webhaket i Facebook.
Skapa Git Repository
Nu när vi har ställt in vår bots återhämtningshantering, måste vi trycka koden på Heroku. För det behöver vi skapa ett git repository i vår katalog.
Obs! "Git" är ett versionskontrollsystem för filer och programkod. Du kan läsa mer om det på Wikipedia.
Skapa ett gitförteckning är enkelt, och tar bara ett par terminalkommandon.
Obs! Kontrollera att du är inne i " testbot " -katalogen i terminalen. Du kan göra detta genom att skriva kommandot pwd till terminalen.
Följ dessa steg för att skapa ett git-repository:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Installera Heroku
Innan vi ens går in på Facebooks utvecklarsidor behöver vi en återuppringningsadress som Facebook kan prata med. Den här webbadressen måste använda https-protokollet, vilket innebär att vi måste installera ett SSL-certifikat på vår webbplats. men det här är en nybörjar guide till Facebook messenger bots, så låt oss inte komplicera saker. Vi använder Heroku för att distribuera vår kod. Heroku ger dig https webbadresser för dina applikationer och har en fri plan som uppfyller våra (mycket grundläggande) krav.
Gå till Heroku hemsida och registrera dig själv.
Obs! I fältet som säger "Välj ditt primära utvecklingsspråk" använder du "Jag använder ett annat språk".
När du är färdig med det, installera verktyget för Heroku för ditt operativsystem (Mac, för mig) och installera det. Detta ger dig tillgång till Heroku på din terminal (eller kommandotolken, på Windows).
Därefter kommer vi att skapa en app på Heroku, som kommer att hålla hela koden för vår bot. Följ stegen nedan:
1. Starta terminal
2. Skriv in heroku login
- Du kommer att bli ombedd att ange ditt email och lösenord.
- Skriv in din email, tryck Enter; Skriv sedan ditt lösenord, tryck på Enter.
- Du kommer vara inloggad på heroku
3. Skriv in heroku create
- Detta skapar en app på Heroku och ger dig en hyperlänk. Observera att länken använder https-protokollet. Lätt, eller hur?
4. Nu kan du trycka din appkod på Heroku git push heroku master
5. När det här är klart är din app i grunden levande, och du kan besöka länken i din webbläsare för att kontrollera att allt fungerar bra. Det borde öppna en webbsida som säger " Detta är TestBot Server ".
Facebook Setup
Det är dags att ansluta vår bot till Facebook! Du måste skapa en ny Facebook-sida eller använda en befintlig som du äger. Jag ska visa dig hur du går vidare genom att skapa en ny Facebook-sida.
1. Gå till Facebook och skapa en ny sida.
- Du kan skapa en sida i vilken kategori du vill ha. Jag väljer företag / organisation, utan någon speciell anledning.
2. Nästa steg som Facebook visar är valfritt och kan hoppas över.
3. Gå sedan vidare till Facebook Developers hemsida.
- Höger musen på " Mina Apps " och klicka på " Lägg till en ny app " i rullgardinsmenyn högst upp till höger.
- Klicka på " grundläggande inställning " när Facebook uppmanar dig att välja en plattform.
4. Fyll i uppgifterna för din Appnamn och kontaktadress.
- Välj " Apps for Pages " i kategorin.
- Klicka på " Skapa App ID ".
5. Du kommer att tas till instrumentpanelen för din app. På sidofältet navigerar du till " + Lägg till produkter " och väljer " Messenger " genom att klicka på " Komma igång " -knappen.
6. Välj " Setup Webhooks ".
7. Fyll i de obligatoriska fälten, ersätt "Återkopplingsadressen" med URL-adressen till Heroku-appen, Verifiera Token med den token som används i index.js-filen och välj följande prenumerationsfält:
- message_deliveries
- meddelanden
- message_optins
- messaging_postbacks
Obs! Se till att du lägger till " / webhook " på Återuppringningsadressen så att index.js exekverar den nödvändiga funktionen när Facebook försöker pinga URL-adressen, den kan verifiera "Verifiera Token".
8. Klicka på " Verifiera och spara ".
9. I avsnittet " Token Generation " klickar du på " Välj en sida " och väljer den sida du skapade tidigare.
Detta kommer att generera en " Page Access Token ", spara den någonstans; du behöver det senare.
10. Därefter måste du göra en POST-fråga till din app, med hjälp av Sidåtkomst Token genererad i det sista steget. Detta kan enkelt göras i terminalen. Kör bara följande kommando, ersätt PAGE_ACCESS_TOKEN med den sidåtkomsttoken du genererade .
curl -X POST "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"
Du bör få ett " framgång " -svar i terminalen.
Mer Heroku Setup
Ja, vi är inte färdiga ännu. Inte nära.
1. Gå till Heroku hemsida och logga in med ditt email-ID.
2. Leta reda på din app i "Dashboard" och klicka på den.
3. Navigera till fliken Inställningar.
4. Klicka på " Reveal Config Vars "
5. Lägg till PAGE_ACCESS_TOKEN som en " config var " och klicka på " Lägg till ".
Kodning av den faktiska botten
Nu när vi är färdiga med det grunt arbetet kan vi fokusera på det som verkligen betyder att boten ska reagera på meddelanden. För att börja, ska vi bara designa en bot som helt enkelt echo de meddelanden som den tar emot. Som det visar sig kräver denna enkla uppgift en stor del av kod för att fungera.
1. Koda Message Listener
Innan bot kan echo tillbaka meddelandet måste det kunna lyssna på meddelanden. Låt oss göra det först.
I index.js-filen lägger du till följande kod:
[Js]
app.post ('/ webhook', funktion (req, res) {
var händelser = req.body.entry [0] .messaging;
för (i = 0; i <events.length; i ++) {
var händelse = händelser [i];
om (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ Js]
Vad den här funktionen gör är att den kontrollerar mottagna meddelanden och kontrollerar om det finns text i meddelandet. Om det hittar text i det mottagna meddelandet kallas det funktionen sendMessage (visas senare), skickar avsändarens ID och texten som ska skickas tillbaka. Det är viktigt att förstå följande värden och vad de menar:
- event.message.text är texten som mottas i meddelandet. Om någon till exempel skickar meddelandet "Hej" till vår bot, kommer värdet av event.message.text att vara "Hej".
- event.sender.id är den person som skickade meddelandet till botten. Detta krävs så att bot vet vem som ska ta itu med svaret på.
2. Kodning av sendMessage-funktionen
Låt oss koda funktionen "sendMessage" nu.
[Js]
funktion sendMessage (mottagare, meddelande) {
begäran({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metod: "POST",
json: {
mottagare: {id: recipientId},
meddelande: meddelande,
}
}, funktion (fel, svar, kropp) {
om (fel) {
console.log ('Fel att skicka meddelande:', fel);
} annars om (response.body.error) {
console.log ('Error:', response.body.error);
}
});
};
[/ Js]
Funktionen "sendMessage" tar två parametrar:
- recipientId
- meddelande
Mottagaren är nödvändig så att meddelandet kan adresseras till rätt användare.
Meddelandet är den faktiska texten som ska skickas i svaret.
3. Tryck på ändringarna till Heroku
Om du har genomfört stegen ovan ska din bot kunna återge den mottagna texten. Men först måste du trycka på ändringarna i programmet som finns på Heroku. Gör så här genom att följa stegen nedan:
1. Starta terminal.
2. Ändra katalog till testbot-katalogen
cd testbot
3. Gör så här:
- git lägg till.
- Obs! Det finns en "." I slutet av "git add"
- git commit -m "Första commit"
- git push heroku master
4. Skicka nu ett meddelande till din sida, och boten kommer att echo meddelandet tillbaka till dig.
Villkorliga svar aka Att göra botten smartare
Vi kan använda textmatchning så att vår Facebook-messenger bot kan svara enligt vissa speciella nyckelord.
För att uppnå detta måste vi lägga till en annan funktion. Jag heter "villkorliga svar", men du kan välja vilket namn du föredrar.
1. Kodning av conditionalResponses Function
[Js]
funktionen villkorliga svar (mottagare, text) {
text = text || "";
var vad = text.match (/ vad / gi); // kontrollera om textsträngen innehåller ordet "vad"; ignorera fall
varGadget-Info.com = text.match (/ beebom / gi); // kontrollera om textsträng innehåller ordet "beebom"; ignorera fall
var vem = text.match (/ vem / gi); // kontrollera om textsträng innehåller ordet "vem"; ignorera fall
var du = text.match (/ you / gi); // kontrollera om textsträngen innehåller ordet "du"; ignorera fall
// om texten innehåller både "vad" och "beebom", gör så här:
om (vad! = null &&; Gadget-Info.com! = null) {
meddelande = {
text: "Beebom är en webbplats som erbjuder tekniska resurser. Välkommen."
}
sendMessage (mottagare, meddelande);
återvänd sant;
}
// om texten innehåller både "vem" och "du" gör du så här:
om (vem! = null && you! = null) {
meddelande = {
text: "Jag har blivit ombedd att inte diskutera min identitet online."
}
sendMessage (mottagare, meddelande);
återvänd sant;
}
// om ingenting matchas, returnera false för att fortsätta exekvering av inre funktion.
returnera false;
};
[/ Js]
I raderna 4 till 7 har vi definierat variabler beroende på att den mottagna strängen matchar specifika ord. Det bästa med att använda "text.match ()" är att det använder Regular Expressions (vanligtvis kallad regex, läs mer här.). Det är bra för oss, för det betyder att så länge som en del av ett ord i den mottagna texten matchar något av orden vi nämnde i text.match (), kommer variabeln inte att vara null. Det betyder att om det mottagna meddelandet var "What's Beebom?", "Var vad" och "var beebom" kommer inte att vara null eftersom ordet "What's" innehåller ordet "vad". Så vi är rädda från att skapa extra uttalanden för varje variation där någon kan säga "Vad".
2. Redigering av meddelandelysaren
Vi behöver också redigera Message Listener som vi kodade för att försäkra att den matchar den mottagna texten med funktionen "conditionalResponses" också.
[Js]
app.post ('/ webhook', funktion (req, res) {
var händelser = req.body.entry [0] .messaging;
för (i = 0; i <events.length; i ++) {
var händelse = händelser [i];
om (event.message && event.message.text) {
// först försök att kontrollera om mottaget meddelande kvalificerar för villkorligt svar.
om (! conditionalResponses (event.sender.id, event.message.text)) {
// om det inte gör det, enkelt echo det mottagna meddelandet tillbaka till avsändaren.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
Förändringarna i lyssnaren kanske inte ser väldigt drastiska ut, men deras effekter är säkert. Nu försöker lyssnaren först reagera med villkorliga svar, och om det inte finns något giltigt villkor för det mottagna meddelandet, klickar det enkelt meddelandet tillbaka till användaren.
3. Tryck på ändringarna till Heroku
Innan du kan prova de nya funktionerna måste du trycka den uppdaterade koden på appen som är värd för Heroku. Följ stegen nedan för att göra det här:
1. Starta terminal.
2. Ändra katalog till testbot-katalogen
cd testbot
3. Gör så här:
- git lägg till.
- Obs! Det finns en "." I slutet av "git add"
- git commit -m "Lägga till villkorade möjligheter"
- git push heroku master
4. Skicka nu ett meddelande till din sida, och boten kommer att echo meddelandet tillbaka till dig.
Ännu mer funktionalitet
Vår bot svarar nu på en liten uppsättning kommandon i fina, välstrukturerade svar. Men det är fortfarande inte särskilt användbart. Låt oss göra några fler ändringar i koden för att göra vår bot till en mer " funktionell " bit av programvara. Vi kommer att revampa många funktioner och lägga till ett par mer, så bli upphetsad.
1. Redigering av meddelandelysaren
Vårt meddelande lyssnare, i detta skede, fungerar bara ok. Det är emellertid inte så snyggt formaterat och om vi skulle fortsätta öka de nestade om uttalandena för att lägga till extra " villkorskontroller " kommer det snabbt att bli fult att titta på, svårt att förstå och långsammare vid utförandet. Vi vill inte ha det, nu gör vi det? Låt oss göra några ändringar.
Obs! Det finns en kodlinje i meddelandelyttaren som läser "res.sendStatus (200)", den här raden skickar en status 200-kod till Facebook och berättar att funktionen lyckades exekveras. Enligt Facebook: s dokumentation väntar Facebook i högst 20 sekunder för att få en 200-status innan den bestämmer att meddelandet inte gick igenom och slutar att koden utförts.
Vår nya meddelande lyssnare ser ut så här. Vi använder kommandot " res.sendStatus (200) " för att stoppa utförandet av funktionen så snart ett villkor matchas och exekveras.
[Js]
app.post ('/ webhook', funktion (req, res) {
var händelser = req.body.entry [0] .messaging;
för (i = 0; i <events.length; i ++) {
var händelse = händelser [i];
om (event.message && event.message.text) {
// Första kontrollmeddelandeteksten mot introResponse-villkoren
om (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// för avsaknad av ett bättre namn, kallade jag detta nya svar: p; kolla här nästa
annars om (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// annars, bara echo tillbaka det ursprungliga meddelandet
annars {
// ersätta echo med giltig kommandolista
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
2. Kodning av newResponse-funktionen
Vårt meddelande lyssnare kontrollerar nu meddelandetexten mot en uppsättning villkor i "newResponse" också, men först måste vi koda newResponse-funktionen. Vi använder den här funktionen för att kontrollera om användaren begärde artikelförslag från theGadget-Info.comwebbplatsen, leta efter frågan på webbplatsen och presentera länken till användaren. Återigen använder vi vanliga uttryck för att matcha text med specifika sökord.
[Js]
funktion newResponse (recipientId, text) {
text = text || "";
var föreslår = text.match (/ suggest / gi);
var slumpmässig = text.match (/ slumpmässig / gi);
varartikel = text.match (/ artikel / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var webbläsare = text.match (/ browser / gi);
var vpn = text.match (/ vpn / gi);
// kontrollera om användaren ber om förslag på artikeln alls
om (föreslå! = null && artikel! = null) {
varfråga = "";
// Om artikelförslag förfrågas, kontrollera det ämne som användaren letar efter
om (android! = null) {
fråga = "Android";
} annars om (mac! = null) {
fråga = "Mac";
} annars om (iphone! = null) {
fråga = "iPhone";
} annars om (webbläsare! = null) {
query = "Browser";
} annars om (vpn! = null) {
fråga = "VPN";
}
sendButtonMessage (recipientId, query);
returnera sant
}
returnera false;
};
[/ Js]
Vi använder en annan anpassad funktion som heter "sendButtonMessage" för att skicka meddelandet om användaren ber om artikelförslag. Vi kommer att skapa det här nästa.
3. Kodning av sendButtonMessage-funktionen
Funktionen sendButtonMessage tar två parametrar, ett mottagar-ID och en fråga. Mottagarens ID används för att identifiera användaren till vilken meddelandet måste skickas, och frågan används för att identifiera ämnet som användaren vill ha artikelförslag.
[Js]
funktion sendButtonMessage (mottagare, fråga) {
var messageData = {
mottagare: {
id: recipientId
},
meddelande: {
bilaga: {
skriv: "mall",
nyttolast: {
template_type: "button",
text: "Detta är vad jag hittade för" + fråga,
knappar: [{
typ: "web_url",
url: "//www.beebom.com/?s="+query,
titel: "Beebom:" + fråga
}]
}
}
}
};
callSendAPI (messageData);
}
[/ Js]
Än en gång använder vi en anpassad funktion; den här gången att skicka det slutliga meddelandet, med artikeln länkar, till användaren. Funktionen är på många sätt lik den "sendMessage" -funktionen vi kodade tidigare, men är mer generisk när det tar meddelandedata som passar oss, eftersom våra meddelandedata ändras med den fråga som användaren gör.
4. Kodning av callSendAPI-funktionen
Funktionen "callSendAPI" tar en enda parameter, "messageData" . Denna parameter innehåller hela meddelandedata, formaterad korrekt enligt Facebook-regler, så att budbäraren kan visa den korrekt för användaren.
[Js]
funktion callSendAPI (messageData) {
begäran({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metod: "POST",
json: messageData
}, funktion (fel, svar, kropp) {
om (! fel && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Skickat generiskt meddelande med id% s till mottagare% s",
messageId, recipientId);
} annat {
console.error ("Kan inte skicka meddelande.");
console.error (svar);
console.error (fel);
}
});
}
[/ Js]
5. Tryck på ändringarna till Heroku
Vi är på sista steget mot att göra vår uppgraderade bot live. Vi behöver bara trycka alla kodändringar till Heroku. Processen är densamma som tidigare och beskrivs nedan:
1. Starta terminal.
2. Ändra katalog till testbot- katalogen.
cd testbot
3. Gör följande:
- git lägg till.
- Obs! Det finns en "." I slutet av det här kommandot.
- git commit -m "förbättra villkorskontroller och formatering"
- git push heroku master
4. Skicka nu ett meddelande som "Föreslå en artikel på Android", eller "Beebom, föreslå mig någon artikel om ämnet Android"; och boten skickar ett snyggt formaterat meddelande med en länk som du kan klicka på för att öppna artiklarna som är relaterade till din fråga.
Gräv djupare
Nu när du vet hur du kommer igång med att utveckla Facebook messenger bots, gå igenom Facebook-dokumentationen om hur du utvecklar Facebook messenger bots. Medan dokumentationen inte är bra för nybörjare är du inte nybörjare längre. Du bör kolla in den officiella dokumentationen och försöka ta reda på hur du gör din bot ännu smartare. Teaser: Du kan även skicka meddelanden med bilder och knappar! Det är också möjligt att använda tjänster som Wit.ai och Api.ai för att koda din bot och sedan integrera den med Facebook, men i min svaga försök att använda dessa tjänster fungerar Wit.ai inte för bra, och Api.ai har en skarp inlärningskurva för nybörjare.
Har du någonsin utvecklat en Facebook messenger bot? Om du har, hur gick du till att utveckla den, och vad kan den göra? Användte du tjänster som Wit.ai och Api.ai för att skapa din bot? Om du inte någonsin har provat på att koda en bot, gå och utveckla din egen Facebook messenger bot, gör det smartare och bättre och låt oss veta om din erfarenhet i kommentarerna nedan.
