Facebook's "messenger bots" -functie is niets nieuws en er bestaan al veel geweldige bots. De middelen met betrekking tot het maken van een eigen bot zijn echter schaars en ontbreken in de uitleg voor mensen die nog niet bekend zijn met de Facebook Graph-API. Messenger bots vereisen nu ook dat je een SSL-beveiligde webhook callback-URL gebruikt (daarover later meer), en het instellen van SSL is niet voor iedereen, en kost ook geld.
In dit artikel zal ik je door het hele proces van het maken van een eenvoudige Facebook messenger-bot heen leiden, omdat de eigen documentatie van Facebook nogal slecht wordt uitgelegd. We zullen een cloud-app opzetten die het https-protocol gebruikt, de bot coderen in Node.js (wat een javascript, server-side taal is), git gebruiken om de code naar de cloud-applicatie te pushen en uit te testen op Facebook Messenger.
Setup Bot
U heeft Node op uw laptop geïnstalleerd. Als u dat niet doet, gaat u naar de knooppuntwebsite om deze te downloaden en te installeren.
Als je klaar bent, kun je doorgaan met de setup voor de bot. Volg onderstaande stappen:
1. Start Terminal.
2. U hebt een aparte map nodig om uw code vast te houden.
- Maak een nieuwe map
mkdir testbot
- Verander uw werkdirectory in de map die u zojuist hebt aangemaakt
cd testbot
3. Initialiseer vervolgens de Node-applicatie. npm init
- U wordt gevraagd om informatie over uw toepassing in te voeren, gebruik gewoon de standaardwaarden door op Enter te drukken voor alles.
4. Installeer pakketten npm install express body-parser request --save
- De opdracht zal worden uitgevoerd en enkele waarschuwingen geven; negeer hun.
5. Open in Finder de directory " testbot " die u hebt gemaakt en zoek het bestand met de naam " package.json "; Open dit in een editor zoals Sublime Text.
6. In dit bestand moeten we een regel toevoegen "start": "node index.js"
- Vergeet niet om een ", " aan het einde van de vorige regel toe te voegen.
7. Maak vervolgens een nieuw bestand in Sublime-tekst en plaats daarin de volgende code:
[Js]
var express = require ('express');
var bodyParser = require ('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 ('/', functie (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 ('Ongeldig verificatie-token');
}
});
[/ Js]
Sla dit bestand op als index.js
Opmerking: in regel 13 wordt de waarde van 'hub.verify_token' ingesteld als ' testbot_verify_token', onthoud deze waarde, want deze wordt gebruikt bij het maken van de webhook op Facebook.
Git Repository maken
Nu we de callback-afhandeling van onze bot hebben ingesteld, moeten we de code naar Heroku pushen. Daarvoor moeten we een git repository aanmaken in onze directory.
Opmerking: "git" is een versiecontrolesysteem voor bestanden en softwarecodes. Je kunt er meer over lezen op Wikipedia.
Het creëren van een git repository is eenvoudig en er zijn maar een paar Terminal-commando's nodig.
Opmerking: zorg ervoor dat u zich binnen de " testbot " -directory in de terminal bevindt. U kunt dit doen door het commando pwd in de terminal te typen.
Volg deze stappen om een git repository aan te maken:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Heroku instellen
Voordat we zelfs naar de ontwikkelaarspagina's van Facebook gaan, hebben we een callback-URL nodig waarmee Facebook kan praten. Deze URL moet het https-protocol gebruiken, wat betekent dat we een SSL-certificaat moeten installeren op onze website; maar dit is een beginnershandleiding voor Facebook-messenger-bots, dus laten we het niet ingewikkeld maken. We zullen Heroku gebruiken om onze code te implementeren. Heroku geeft u https-URL's voor uw toepassingen en heeft een gratis abonnement dat voldoet aan onze (zeer eenvoudige) eisen.
Ga naar de Heroku-website en registreer jezelf.
Opmerking: gebruik "Ik gebruik een andere taal" in het veld met de tekst "Kies je primaire ontwikkelingstaal".
Als je daarmee klaar bent, installeer dan de Heroku toolbelt voor je OS (Mac, voor mij) en installeer het. Dit geeft je toegang tot Heroku op je Terminal (of opdrachtprompt, op Windows).
Vervolgens zullen we een app maken op Heroku, die de volledige code voor onze bot zal bevatten. Volg onderstaande stappen:
1. Start Terminal
2. Typ heroku login
- U wordt gevraagd om uw e-mailadres en wachtwoord in te voeren.
- Typ uw e-mail, druk op Enter; typ dan je wachtwoord, druk op Enter.
- Je wordt ingelogd op heroku
3. Typ heroku create
- Hiermee wordt een app op Heroku gemaakt en krijgt u een hyperlink. Merk op dat de link het https-protocol gebruikt. Makkelijk, toch?
4. Nu kun je je app-code naar Heroku pushen git push heroku master
5. Zodra dit is gebeurd, is uw app in feite live en kunt u de link in uw browser bezoeken om te controleren of alles goed werkt. Er zou een webpagina moeten verschijnen met de tekst " This is TestBot Server ".
Facebook instellen
Het is tijd om onze bot met Facebook te verbinden! U moet een nieuwe Facebook-pagina maken of een bestaande pagina gebruiken waarvan u de eigenaar bent. Ik zal je laten zien hoe je verder moet gaan door een nieuwe Facebook-pagina te maken.
1. Ga naar Facebook en maak een nieuwe pagina.
- U kunt een pagina maken in elke gewenste categorie. Ik kies voor een bedrijf / organisatie, zonder een speciale reden.
2. De volgende stappen die Facebook laat zien zijn optioneel en kunnen worden overgeslagen.
3. Ga vervolgens naar de Facebook-website voor ontwikkelaars.
- Klik in de rechterbovenhoek op " Mijn apps " en klik vervolgens op " Nieuwe app toevoegen " in het vervolgkeuzemenu.
- Klik op " basisinstellingen " wanneer Facebook u vraagt om een platform te kiezen.
4. Vul de gegevens in voor uw app-naam en e-mailadres voor contact.
- Selecteer ' Apps voor pagina's ' in de categorie.
- Klik op ' App-ID maken '.
5. U wordt naar het dashboard van uw app gebracht. Navigeer in de zijbalk naar " + Producten toevoegen " en selecteer " Messenger " door op de knop "Aan de slag " te klikken.
6. Selecteer " Webhooks instellen ".
7. Vul de vereiste velden in, vervang de "Callback-URL" door de URL van de Heroku-app, verifieer token met het token dat wordt gebruikt in het index.js-bestand en selecteer de volgende abonnementsvelden:
- message_deliveries
- berichten
- message_optins
- messaging_postbacks
Opmerking: zorg ervoor dat u " / webhook " toevoegt aan de terugbel-URL, zodat index.js de vereiste functie uitvoert wanneer Facebook probeert de URL te pingen, het kan het "Verify token" verifiëren.
8. Klik op " Verifiëren en opslaan ".
9. Klik in het gedeelte " Token Generation " op " Selecteer een pagina " en selecteer de pagina die u eerder hebt gemaakt.
Dit genereert een " Page Access Token ", bewaar het ergens; je hebt het later nodig.
10. Vervolgens moet u een POST-query maken voor uw app met behulp van de toegangstoken voor pagina's die in de laatste stap is gegenereerd. Dit kan eenvoudig worden gedaan in de Terminal. Voer de volgende opdracht uit en vervang PAGE_ACCESS_TOKEN door het toegangstoken voor pagina's dat u hebt gegenereerd .
curl -X POST "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"
U zou een " succes " antwoord in de Terminal moeten ontvangen.
Meer Heroku-installatie
Ja, we zijn nog niet klaar. Lang niet.
1. Ga naar de Heroku-website en log in met uw e-mail-ID.
2. Lokaliseer uw app in het "dashboard" en klik erop.
3. Navigeer naar het tabblad Instellingen.
4. Klik op " Reveal Config Vars "
5. Voeg PAGE_ACCESS_TOKEN toe als een " config var " en klik op " Toevoegen ".
Codering van de werkelijke bot
Nu we klaar zijn met het gruntwerk, kunnen we ons concentreren op wat echt belangrijk is: de bot laten reageren op berichten. Om te beginnen ontwerpen we gewoon een bot die eenvoudigweg de echo's weerspiegelt van de berichten die worden ontvangen. Aangezien het blijkt, vereist deze eenvoudige taak een aanzienlijk beetje code om te functioneren.
1. Coding the Message Listener
Voordat de bot het bericht kan echoën, moet het in staat zijn om naar berichten te luisteren. Laten we dat eerst doen.
Voeg in het index.js-bestand de volgende code toe:
[Js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ Js]
Wat deze functie doet, is dat deze controleert op ontvangen berichten en vervolgens controleert of er tekst in het bericht staat. Als het tekst in het ontvangen bericht vindt, wordt de functie sendMessage (later weergegeven) aangeroepen, waarbij de ID van de afzender en de tekst die moet worden teruggestuurd worden doorgegeven. Het is belangrijk om de volgende waarden en wat ze betekenen te begrijpen:
- event.message.text is de tekst die in het bericht wordt ontvangen. Als iemand bijvoorbeeld het bericht "Hallo" naar onze bot verzendt, is de waarde van event.message.text "Hallo".
- event.sender.id is de id van de persoon die het bericht naar de bot heeft verzonden. Dit is nodig zodat de bot weet aan wie de reactie moet worden gericht.
2. Codering van de sendMessage-functie
Laat code nu de "sendMessage" -functie gebruiken.
[Js]
function sendMessage (recipientId, message) {
verzoek({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
methode: 'POST',
json: {
ontvanger: {id: recipientId},
bericht: bericht,
}
}, function (error, response, body) {
if (error) {
console.log ('Fout bij verzenden van bericht:', fout);
} else if (response.body.error) {
console.log ('Fout:', response.body.error);
}
});
};
[/ Js]
De functie "sendMessage" heeft twee parameters:
- recipientid
- bericht
Het recipientId is vereist, zodat het bericht kan worden geadresseerd aan de juiste gebruiker.
Het bericht is de daadwerkelijke tekst die in het antwoord moet worden verzonden.
3. De veranderingen naar Heroku duwen
Als u de bovenstaande stappen hebt voltooid, zou uw bot de ontvangen tekst moeten kunnen terugkaatsen. Maar eerst moet je de wijzigingen naar de toepassing pushen die op Heroku wordt gehost. Om dit te doen, volgt u de onderstaande stappen:
1. Start Terminal.
2. Verander de map naar uw testbot-map
cd testbot
3. Voer de volgende stappen uit:
- git add.
- Opmerking: er is een "." Aan het einde van "git add"
- git commit -m "Eerste commit"
- git push heroku master
4. Stuur nu een bericht naar uw pagina en de bot zal het bericht naar u teruglezen.
Voorwaardelijke reacties aka Making the Bot Smarter
We kunnen tekstafstemming gebruiken om onze Facebook-messenger-bot te laten reageren op bepaalde speciale zoekwoorden.
Om dit te bereiken, moeten we nog een functie toevoegen. Ik noem het "conditionalResponses", maar u kunt kiezen welke naam u verkiest.
1. Codering van de conditionalResponses-functie
[Js]
function conditionalResponses (recipientId, text) {
tekst = tekst || "";
var what = text.match (/ what / gi); // controleer of de tekststring het woord "wat" bevat; negeer zaak
varGadget-Info.com = text.match (/ beebom / gi); // controleer of de tekststring het woord "beebom" bevat; negeer zaak
var who = text.match (/ who / gi); // controleer of de tekststring het woord "who" bevat; negeer zaak
var you = text.match (/ you / gi); // controleer of de tekststring het woord "u" bevat; negeer zaak
// als tekst zowel "wat" als "beebom" bevat, doe dit dan:
if (what! = null &&; Gadget-Info.com! = null) {
bericht = {
tekst: "Beebom is een website die technische hulpmiddelen biedt. Welkom."
}
sendMessage (recipientId, bericht);
keer terug waar;
}
// als tekst zowel "wie" als "jij" bevat, doe dit dan:
if (who! = null && you! = null) {
bericht = {
tekst: "Er is mij gevraagd om mijn identiteit niet online te bespreken."
}
sendMessage (recipientId, bericht);
keer terug waar;
}
// als niets overeenkomt, retourneer false om de uitvoering van de innerlijke functie voort te zetten.
return false;
};
[/ Js]
In regels 4 tot 7 hebben we variabelen gedefinieerd afhankelijk van het matchen van de ontvangen reeks met bepaalde woorden. Het beste deel over het gebruik van "text.match ()" is dat het reguliere expressies gebruikt (meestal regex genoemd, lees hier meer). Het is goed voor ons, want dit betekent dat zolang een deel van een woord in de ontvangen tekst overeenkomt met een van de woorden die we in text.match () hebben genoemd, de variabele niet nul zal zijn. Dit betekent dat als het ontvangen bericht "Wat is Beebom?", "Var what" en "var beebom" niet nul zullen zijn, omdat het woord "What's" het woord "what" bevat. We zijn dus gered van het creëren van extra verklaringen voor elke variatie waarin iemand zou kunnen zeggen "Wat".
2. De bericht-luisteraar bewerken
We moeten ook de Message Listener die we hebben gecodeerd bewerken, om ervoor te zorgen dat deze ook de ontvangen tekst probeert te matchen met de "conditionalResponses" -functie.
[Js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {
// probeer eerst of het ontvangen bericht in aanmerking komt voor voorwaardelijke reactie.
if (! conditionalResponses (event.sender.id, event.message.text)) {
// als dit niet het geval is, herhaalt u eenvoudigweg het ontvangen bericht terug naar de afzender.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
De veranderingen in de luisteraar zien er misschien niet erg ingrijpend uit, maar de effecten ervan wel. De luisteraar probeert nu eerst te reageren met voorwaardelijke antwoorden en als er geen geldige voorwaarde is voor het ontvangen bericht, echoot het eenvoudigweg het bericht terug naar de gebruiker.
3. De veranderingen naar Heroku duwen
Voordat u de nieuwe functies kunt uitproberen, moet u de bijgewerkte code pushen naar de app die wordt gehost op Heroku. Volg de onderstaande stappen om dit te doen:
1. Start Terminal.
2. Verander de map naar uw testbot-map
cd testbot
3. Voer de volgende stappen uit:
- git add.
- Opmerking: er is een "." Aan het einde van "git add"
- git commit -m "Voorwaardelijke mogelijkheden toevoegen"
- git push heroku master
4. Stuur nu een bericht naar uw pagina en de bot zal het bericht naar u teruglezen.
Nog meer functionaliteit
Onze bot reageert nu op een kleine set opdrachten in mooie, goed gestructureerde antwoorden. Maar het is nog steeds niet erg nuttig. Laten we nog wat meer wijzigingen in de code aanbrengen om van onze bot een meer " functioneel " stuk software te maken. We zullen veel functies vernieuwen en er nog een paar toevoegen, dus raak enthousiast.
1. De berichtluisteraar bewerken
Onze berichtluisteraar werkt in deze fase gewoon goed. Het is echter niet erg mooi geformatteerd en als we de geneste if-instructies zouden blijven verhogen om extra " voorwaardecontroles " toe te voegen, wordt het snel lelijk om te zien, moeilijk te begrijpen en langzamer bij de uitvoering. Dat willen we toch niet? Laten we een paar veranderingen aanbrengen.
Opmerking: Er is een coderegel in de berichtlistener met de tekst "res.sendStatus (200)", deze regel verzendt een status 200-code naar Facebook, die aangeeft dat de functie met succes is uitgevoerd. Volgens Facebook's documentatie wacht Facebook maximaal 20 seconden om een 200-status te ontvangen, voordat het besluit dat het bericht niet doorging en de uitvoering van de code stopt.
Onze nieuwe berichtlistener ziet er zo uit. We gebruiken de opdracht " res.sendStatus (200) " om de uitvoering van de functie te stoppen zodra een voorwaarde is gekoppeld en uitgevoerd.
[Js]
app.post ('/ webhook', function (req, res) {
var events = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var event = events [i];
if (event.message && event.message.text) {
// controleer eerst berichttekst tegen introResponse-voorwaarden
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// bij gebrek aan een betere naam heb ik deze nieuwe reactie gebeld: p; controleer dit volgende
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// anders, echo gewoon het originele bericht terug
anders {
// vervang echo door geldige opdrachtenlijst
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
2. Codering van de nieuwe antwoordfunctie
Onze berichtlistener controleert nu ook de berichttekst tegen een reeks voorwaarden in "newResponse", maar eerst moeten we de nieuweResponse-functie coderen. We zullen deze functie gebruiken om te controleren of de gebruiker heeft gevraagd naar artikelsuggesties van deGadget-Info.comwebsite, de zoekterm op de website te doorzoeken en de link naar de gebruiker te presenteren . Nogmaals, we zullen reguliere expressies gebruiken om tekst te matchen met specifieke zoekwoorden.
[Js]
function newResponse (recipientId, text) {
tekst = tekst || "";
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);
// Controleer of de gebruiker überhaupt om suggesties voor artikelen vraagt
if (suggest! = null && article! = null) {
var query = "";
// als suggesties voor artikelen worden opgevraagd, bekijk dan het onderwerp waar de gebruiker naar op zoek is
if (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (browser! = null) {
query = "Browser";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (recipientId, query);
geef waar terug
}
return false;
};
[/ Js]
We gebruiken een andere aangepaste functie genaamd "sendButtonMessage" om het bericht te verzenden voor het geval de gebruiker om suggesties voor artikelen vraagt. We zullen dit volgende maken.
3. Codering van de functie sendButtonMessage
De functie sendButtonMessage neemt twee parameters, een ontvanger-ID en een query. De ontvanger-ID wordt gebruikt om de gebruiker te identificeren naar wie het bericht moet worden verzonden en de query wordt gebruikt om het onderwerp te identificeren waarop de gebruiker artikelsuggesties wil.
[Js]
function sendButtonMessage (recipientId, query) {
var messageData = {
ontvanger: {
id: recipientId
},
bericht: {
bijlage: {
type: "sjabloon",
payload: {
template_type: "knop",
tekst: "Dit is wat ik vond voor" + zoekopdracht,
toetsen:[{
type: "web_url",
url: "//www.beebom.com/?s="+query,
titel: "Beebom:" + vraag
}]
}
}
}
};
callSendAPI (messageData);
}
[/ Js]
Nogmaals, we gebruiken een aangepaste functie; dit keer om het laatste bericht met de artikelkoppelingen naar de gebruiker te sturen. De functie is in veel opzichten vergelijkbaar met de functie "sendMessage" die we eerder hebben gecodeerd, maar is generieker in de manier waarop de berichtgegevens worden gebruikt, wat ons goed uitkomt, omdat onze berichtgegevens veranderen met de query die de gebruiker maakt.
4. Codering van de functie callSendAPI
De "callSendAPI" -functie neemt één enkele parameter, de "messageData" . Deze parameter bevat de volledige berichtgegevens, op de juiste manier geformatteerd volgens de Facebook-regels, zodat de messenger deze correct naar de gebruiker kan weergeven.
[Js]
function callSendAPI (messageData) {
verzoek({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
methode: 'POST',
json: messageData
}, function (error, response, body) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Generiek bericht succesvol verzonden met id% s naar ontvanger% s",
messageId, recipientId);
} else {
console.error ("Kan bericht niet verzenden.");
console.error (respons);
console.error (fout);
}
});
}
[/ Js]
5. De veranderingen naar Heroku duwen
We zijn bezig met de laatste stap om onze geüpgrade bot live te maken. We hoeven alleen maar alle codeveranderingen in Heroku te pushen. Het proces is hetzelfde als hiervoor en wordt hieronder beschreven:
1. Start Terminal.
2. Verander de map naar de testbot- map.
cd testbot
3. Doe het volgende:
- git add.
- Opmerking: aan het einde van die opdracht staat een "."
- git commit -m "conditie controle en formattering verbeteren"
- git push heroku master
4. Stuur nu een bericht zoals "Stel een artikel voor op Android", of "Beebom, stel me een artikel voor over het onderwerp Android"; en de bot stuurt een mooi opgemaakt bericht met een link waarop je kunt tikken om de artikelen te openen die betrekking hebben op je vraag.
Graaf dieper
Nu je weet hoe je moet beginnen met het ontwikkelen van Facebook-messenger-bots, bekijk je de Facebook-documentatie over het ontwikkelen van Facebook-messengerrobots. Hoewel de documentatie niet goed is voor beginners, ben je geen beginneling meer. Bekijk de officiële documentatie en probeer erachter te komen hoe je je bot nog slimmer kunt maken. Voorbeeldweergave: u kunt ook berichten verzenden met afbeeldingen en knoppen! Het is ook mogelijk om services zoals Wit.ai en Api.ai te gebruiken om je bot te coderen en vervolgens te integreren met Facebook, maar in mijn zwakke pogingen om die services te gebruiken, werkt Wit.ai niet zo goed, en Api.ai heeft een scherpe leercurve voor beginners.
Heb je ooit een Facebook messenger bot ontwikkeld? Als je dat hebt gedaan, hoe heb je het ontwikkeld en wat kan het doen? Heb je diensten zoals Wit.ai en Api.ai gebruikt om je bot te maken? Als je nog nooit hebt geprobeerd een bot te coderen, ga dan je eigen Facebook-messenger-bot ontwikkelen, maak het slimmer en beter, en laat het ons weten over je ervaringen in de onderstaande opmerkingen.
