Hoe maak je een Facebook Messenger Bot (gids)

De "messenger bots" -functie van Facebook is niets nieuws, en er bestaan ​​al veel geweldige bots. De bronnen met betrekking tot hoe u precies uw eigen bot kunt bouwen, zijn echter schaars en ontbreken aan uitleg voor mensen die nieuw zijn bij 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 weggelegd, en kost ook geld.

In dit artikel zal ik je door het hele proces van het maken van een eenvoudige Facebook-messenger-bot 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 is, server-side taal), git gebruiken om de code naar de cloud-applicatie te pushen en deze testen op Facebook Messenger.

Bot instellen

U moet Node op uw laptop hebben geïnstalleerd. Als je dat niet doet, ga dan naar de Node-website om het te downloaden en te installeren.

Als u klaar bent, kunt u doorgaan met de installatie voor de bot. Volg onderstaande stappen:

1. Start Terminal.

2. U heeft een aparte directory nodig om uw code in op te slaan.

• Maak een nieuwe map
  mkdir-testbot

• Verander uw werkmap naar de map die u zojuist heeft gemaakt
  cd-testbot

3. Initialiseer vervolgens de Node-toepassing.
npm init

• U wordt gevraagd om informatie over uw toepassing in te voeren, gebruik gewoon de standaardinstellingen door voor alles op Enter te drukken.

4. Installeer pakketten
npm install express body-parser request --save

• Het commando wordt uitgevoerd en geeft enkele waarschuwingen; negeer hun.

5. Open in Finder de map "testbot"Die u heeft 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 een ​ aan het einde van de vorige regel.

7. Maak vervolgens een nieuw bestand in Sublime Text en voer de volgende code erin in:

[js]

var express = vereisen ('express');
var bodyParser = vereisen ('body-parser');
var request = vereisen ('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 ('Dit is TestBot Server');
​
app.get ('/ webhook', function (req, res)
if (req.query ['hub.verify_token'] === 'testbot_verify_token')
res.send (req.query ['hub.challenge']);
anders
res.send ('Ongeldig verificatietoken');
​
​

[/ js]

Bewaar dit bestand als index.js

Opmerking: In regel 13 is de waarde van 'hub.verify_token' ingesteld als 'testbot_verify_token ', onthoud deze waarde, want deze zal worden gebruikt bij het maken van de webhook op Facebook.

Maak een Git-repository

Nu we de callback-afhandeling van onze bot hebben ingesteld, moeten we de code naar Heroku pushen. Daarvoor moeten we een git-repository in onze directory maken.

Opmerking: "Git" is een versiebeheersysteem voor bestanden en softwarecode. Je kunt er meer over lezen op Wikipedia.

Het aanmaken van een git-repository is eenvoudig en er zijn maar een paar Terminal-commando's voor nodig.

Opmerking: Zorg ervoor dat u zich in de "testbot”Directory in de Terminal. U kunt dit doen door de opdracht te typen pwd in de Terminal.

Volg deze stappen om een ​​git-repository te maken:

1. git init

2. git add .

3. git commit -m "Facebook Webhook registreren"

Stel Heroku in

Voordat we zelfs maar naar de ontwikkelaarspagina's van Facebook gaan, hebben we een call-back-URL nodig waarmee Facebook kan praten. Deze URL moet de https-protocol, wat betekent dat we een SSL-certificaat op onze website moeten installeren; maar dit is een beginnershandleiding voor Facebook-messenger-bots, dus laten we de zaken niet ingewikkelder maken. We gebruiken Heroku om onze code te implementeren. Heroku geeft je https-URL's voor je applicaties en heeft een gratis abonnement dat voldoet aan onze (zeer basale) eisen.

Ga naar de Heroku-website en registreer uzelf.

Opmerking: Gebruik in het veld 'Kies uw primaire ontwikkelingstaal' 'Ik gebruik een andere taal'.

Als je daarmee klaar bent, installeer je de Heroku-toolbelt voor je besturingssysteem (Mac, voor mij) en installeer je deze. Dit geeft je toegang tot Heroku op je Terminal (of opdrachtprompt, op Windows).

Vervolgens maken we een app op Heroku, die de volledige code voor onze bot bevat. Volg onderstaande stappen:

1. Start Terminal

2. Typ heroku login

• U wordt gevraagd uw e-mailadres en wachtwoord in te voeren.

• Typ uw e-mail, druk op Enter; typ vervolgens uw wachtwoord en druk op Enter.

• U wordt aangemeld bij heroku

3. Typ heroku maken

• 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 kunt u uw app-code naar Heroku pushen
git push heroku master

5. Zodra dit is gebeurd, is uw app in principe live en kunt u de link in uw browser bezoeken om te controleren of alles goed werkt. Het zou een webpagina moeten openen met de tekst "Dit is TestBot Server​.

Facebook-instellingen

Het is tijd om onze bot met Facebook te verbinden! U moet een nieuwe Facebook-pagina maken of een bestaande 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 Bedrijf / Organisatie, zonder specifieke reden.

2. De volgende stappen die Facebook laat zien, zijn optioneel en kunnen worden overgeslagen.

3. Ga vervolgens naar de Facebook-ontwikkelaarswebsite.

• Beweeg uw muis in de rechterbovenhoek op 'Mijn apps"En klik vervolgens op"Voeg een nieuwe app toe”In het vervolgkeuzemenu.

• Klik op "basisopstelling”Wanneer Facebook je vraagt ​​om een ​​platform te kiezen.

4. Vul de gegevens in voor uw app-naam en e-mailadres voor contact.

• Selecteer 'Apps voor Pages”In de categorie.

• Klik op "Maak een app-ID​.

5. U wordt naar het dashboard voor uw app geleid. Navigeer in de zijbalk naar '+Producten toevoegen'En selecteer'Boodschapper"Door te klikken op de"Begin”Knop.

6. Selecteer “Stel webhooks in​.

7. Vul de vereiste velden in, vervang de "Call-back-URL" door de URL van de Heroku-app, Verifieer het 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"Naar de terugbel-URL zodat index.js de vereiste functie uitvoert wanneer Facebook de URL probeert te pingen, kan het de" Verify Token "verifiëren.

8. Klik op “Verifieer en bewaar​.

9. In het "Token Generation"Sectie, klik op"Selecteer een pagina”En selecteer de pagina die u eerder heeft gemaakt.

Dit genereert een "Token voor paginatoegang“, Bewaar het ergens; je hebt het later nodig.

10. Vervolgens moet u een POST-query naar uw app maken met behulp van het paginatoegangstoken dat in de laatste stap is gegenereerd. Dit kan eenvoudig in de Terminal worden gedaan. Voer gewoon de volgende opdracht uit, het vervangen van PAGE_ACCESS_TOKEN door het paginatoegangstoken dat u hebt gegenereerd.

curl -X POST "https://graph.facebook.com/v2.6/me/subscscribe_apps?access_token=PAGE_ACCESS_TOKEN"

U zou een "succes”Antwoord in de Terminal.

Meer Heroku-instellingen

Ja, we zijn nog niet klaar. Lang niet.

1. Ga naar de Heroku-website en log in met uw e-mail-ID.

2. Zoek uw app in het "dashboard" en klik erop.

3. Navigeer naar het tabblad Instellingen.

4. Klik op “Onthul Config Vars​

5. Voeg de 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 er echt toe doet: de bot laten reageren op berichten. Om te beginnen ontwerpen we gewoon een bot die de ontvangen berichten gewoon weergeeft. Het blijkt dat deze eenvoudige taak een aanzienlijke hoeveelheid code vereist om te functioneren.

1. Codering van de berichtenluisteraar

Voordat de bot het bericht kan echoën, moet hij naar berichten kunnen luisteren. Laten we dat eerst doen.

Voeg in het bestand index.js de volgende code toe:

[js]

app.post ('/ webhook', function (req, res)
var events = req.body.entry [0] .messaging;
voor (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 het controleert op ontvangen berichten en vervolgens controleert of er tekst in het bericht staat. Als het tekst vindt in het ontvangen bericht, roept het de functie sendMessage (later weergegeven) op, waarbij het de ID van de afzender en de terug te sturen tekst doorgeeft. Het is belangrijk om de volgende waarden te begrijpen en te begrijpen wat ze betekenen:

• event.message.text is de tekst die in het bericht is ontvangen. Als iemand bijvoorbeeld het bericht "Hallo" naar onze bot stuurt, is de waarde van event.message.text "Hallo".

• event.sender.id is de id van de persoon die het bericht naar de bot heeft gestuurd. Dit is vereist zodat de bot weet aan wie hij de reactie moet richten.

2. Codering van de functie sendMessage

Laten we nu de functie "sendMessage" coderen.

[js]

functie sendMessage (ontvanger-id, bericht)
verzoek(
url: 'https://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 (fout)
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:

• ontvanger-ID

• bericht

De 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 wijzigingen doorvoeren naar Heroku

Als je de bovenstaande stappen hebt voltooid, zou je bot de ontvangen tekst moeten kunnen echoën. Maar eerst moet u de wijzigingen doorvoeren in de applicatie die op Heroku wordt gehost. Volg hiervoor de onderstaande stappen:

1. Start Terminal.

2. Verander de directory naar je testbot-directory
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 terug echoën.

Voorwaardelijke reacties oftewel de bot slimmer maken

We kunnen tekstmatching gebruiken om onze Facebook-messenger-bot te laten reageren op bepaalde speciale trefwoorden.

Om dit te bereiken, moeten we nog een functie toevoegen. Ik noem het "conditioneleResponses", maar je kunt elke gewenste naam kiezen.

1. Codering van de conditionele responsfunctie

[js]

functie conditioneleResponses (ontvanger-id, tekst)
text = text ||​

var what = text.match (/ what / gi); // controleer of de tekstreeks het woord "wat" bevat; negeer zaak
var beebom = text.match (/ beebom / gi); // controleer of de tekstreeks het woord "beebom" bevat; negeer zaak
var who = text.match (/ who / gi); // controleer of de tekstreeks het woord "wie" bevat; negeer zaak
var you = text.match (/ you / gi); // controleer of de tekstreeks het woord "jij" bevat; negeer zaak

// als tekst zowel "wat" als "beebom" bevat, doe dit dan:

if (wat! = null &&; beebom! = null)
message =
tekst: "Beebom is een website die technische bronnen aanbiedt. Welkom."
​
sendMessage (ontvanger-ID, bericht);
terugkeer waar;
​

// als tekst zowel "wie" als "jij" bevat, doe dit dan:
if (wie! = null && jij! = null)
message =
tekst: "Er is mij gevraagd mijn identiteit niet online te bespreken."
​
sendMessage (ontvanger-ID, bericht);
terugkeer waar;
​

// als niets overeenkomt, retourneert u false om de uitvoering van de innerlijke functie voort te zetten.
teruggeven false;
​

[/ js]

In de regels 4 tot en met 7 hebben we variabelen gedefinieerd, afhankelijk van het afstemmen van de ontvangen string op bepaalde woorden. Het beste van 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 zelfs maar een deel van een woord in de ontvangen tekst overeenkomt met een van de woorden die we in text.match () noemden, de variabele niet nul zal zijn. Dit betekent dat als het ontvangen bericht "What's Beebom?" Was, "var what" en "var beebom" niet nul zullen zijn, omdat het woord "What's" het woord "wat" bevat. We hoeven dus geen extra uitspraken te doen voor elke variant waarin iemand 'Wat' zou kunnen zeggen.

2. De berichtenluisteraar bewerken

We moeten ook de Message Listener die we hebben gecodeerd bewerken, om ervoor te zorgen dat deze de ontvangen tekst ook probeert te matchen met de functie "conditionele reacties".

[js]

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

// Probeer eerst te controleren of ontvangen bericht in aanmerking komt voor voorwaardelijke reactie.
if (! conditioneleResponses (event.sender.id, event.message.text))

// als dat niet het geval is, echo het ontvangen bericht dan gewoon 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 hun effecten zijn dat zeker. Nu probeert de luisteraar eerst te reageren met voorwaardelijke antwoorden, en als er geen geldige voorwaarde is voor het ontvangen bericht, stuurt het het bericht eenvoudig terug naar de gebruiker.

3. De wijzigingen doorvoeren naar Heroku

Voordat u de nieuwe functies kunt uitproberen, moet u de bijgewerkte code naar de app op Heroku pushen. Volg de onderstaande stappen om dit te doen:

1. Start Terminal.

2. Verander de directory naar je testbot-directory
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 terug echoën.

Nog meer functionaliteit

Onze bot reageert nu op een kleine set commando's in mooie, goed gestructureerde reacties. Maar het is nog steeds niet erg handig. Laten we wat meer wijzigingen in de code aanbrengen om onze bot een meer "functioneel”Stukje software. We zullen zijn het vernieuwen van veel functies, en er nog een paar toevoegen, dus raak opgewonden.

1. De berichtenluisteraar bewerken

Onze berichtenluisteraar werkt in dit stadium gewoon goed. Het is echter niet erg mooi opgemaakt en als we de geneste if-statements zouden blijven verhogen om extra 'conditiecontroles“, Wordt het snel lelijk om naar te kijken, moeilijk te begrijpen en langzamer bij de uitvoering. Dat willen we nu niet, of wel? Laten we wat wijzigingen aanbrengen.

Opmerking: Er is een regel code in de berichtenluisteraar die leest "Res.sendStatus (200)", deze regel stuurt een status 200-code naar Facebook om aan te geven dat de functie met succes is uitgevoerd. Volgens de documentatie van Facebook wacht Facebook maximaal 20 seconden om de status 200 te krijgen, voordat het besluit dat het bericht niet is doorgekomen en de uitvoering van de code stopt..

Onze nieuwe berichtenluisteraar ziet er zo uit. Wij gebruiken de "res.sendStatus (200)”Commando om de uitvoering van de functie te stoppen zodra een voorwaarde is aangepast en uitgevoerd.

[js]

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

// controleer eerst de berichttekst tegen de introResponse-voorwaarden
if (introResponse (event.sender.id, event.message.text))
res.sendStatus (200);
​

// bij gebrek aan een betere naam heb ik deze newResponse genoemd: p; controleer dit hierna
else if (newResponse (event.sender.id, event.message.text))
res.sendStatus (200);
​

// else, echo gewoon het oorspronkelijke bericht terug
anders
// vervang echo door geldige commandolijst
sendMessage (event.sender.id, text: "Echo:" + event.message.text);
​
​
​
res.sendStatus (200);
​

[/ js]

2. Codering van de nieuwe responsfunctie

Onze berichtluisteraar controleert nu de berichttekst aan de hand van een reeks voorwaarden in "NewResponse" ook, maar eerst moeten we de functie newResponse coderen. We zullen deze functie gebruiken om te controleren of de gebruiker erom heeft gevraagd artikel suggesties van de Beebom-website, zoek de zoekopdracht term op de website, en presenteer de link aan de gebruiker. Nogmaals, we zullen reguliere expressies gebruiken om tekst met specifieke zoekwoorden te matchen.

[js]

functie newResponse (ontvanger-id, tekst)
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);

// controleer of de gebruiker überhaupt om artikelsuggesties vraagt
if (suggest! = null && article! = null)
var query = "";
// Als er naar artikelsuggesties wordt gevraagd, controleer dan het onderwerp waarnaar de gebruiker 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 (ontvanger-id, vraag);
terugkeer waar
​
teruggeven false;
​

[/ js]

We gebruiken een andere aangepaste functie genaamd "SendButtonMessage" om het bericht te verzenden voor het geval de gebruiker om artikelsuggesties vraagt. We zullen dit vervolgens maken.

3. Codering van de functie sendButtonMessage

De functie sendButtonMessage heeft twee parameters, een ontvanger-ID en een vraag. De ontvanger-ID wordt gebruikt om de gebruiker te identificeren aan wie het bericht moet worden verzonden, en de vraag wordt gebruikt om het onderwerp te identificeren waarover de gebruiker artikelsuggesties wil.

[js]

functie sendButtonMessage (recipientId, query)
var messageData =
ontvanger:
id: ontvangerId
​,
bericht:
hechting:
type: "sjabloon",
laadvermogen:
template_type: "knop",
text: "Dit is wat ik heb gevonden voor" + query,
toetsen:[
type: "web_url",
url: "http://www.beebom.com/?s="+query,
title: "Beebom:" + vraag
​
​
​
​
​

callSendAPI (messageData);
​

[/ js]

Nogmaals, we gebruiken een aangepaste functie; dit keer om het laatste bericht, met de artikellinks, naar de gebruiker te sturen. De functie is in veel opzichten vergelijkbaar met de "bericht versturen" functie die we eerder hebben gecodeerd, maar generieker is in de manier waarop het de berichtgegevens ontvangt, wat bij ons past, omdat onze berichtgegevens veranderen met de vraag die de gebruiker maakt.

4. Codering van de callSendAPI-functie

De "CallSendAPI" functie heeft een enkele parameter, de "MessageData". Deze parameter bevat de volledige berichtgegevens, correct opgemaakt volgens de Facebook-regels, zodat de messenger deze correct kan weergeven aan de gebruiker.

[js]

functie callSendAPI (messageData)
verzoek(
uri: 'https://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 ("Algemeen bericht met id% s verzonden naar ontvanger% s",
messageId, recipientId);
anders
console.error ("Kan bericht niet verzenden.");
console.error (reactie);
console.error (fout);
​
​
​

[/ js]

5. De wijzigingen doorvoeren naar Heroku

We zijn bij de laatste stap om onze geüpgradede bot live te maken. We hoeven alleen maar alle codewijzigingen naar Heroku te pushen. Het proces is hetzelfde als voorheen en wordt hieronder beschreven:

1. Start Terminal.

2. Wijzig de directory naar het testbot directory.
cd-testbot

3. Doe het volgende:

• git add .

• Opmerking: Er is een ​ aan het einde van dat commando.

• git commit -m "conditiecontroles en opmaak verbeteren"

• git push heroku master

4. Stuur nu een bericht zoals "Stel een artikel op Android voor" of "Beebom, stel me een artikel over het onderwerp Android voor"; en de bot stuurt een mooi opgemaakt bericht met een link waarop u kunt tikken om de artikelen te openen die betrekking hebben op uw vraag.

ZIE OOK: 16 Facebook Messenger-tips en -trucs die u moet weten

Graaf dieper

Nu u weet hoe u aan de slag moet met het ontwikkelen van Facebook-messenger-bots, kunt u de Facebook-documentatie doornemen over het ontwikkelen van Facebook-messenger-bots. Hoewel de documentatie niet goed is voor beginners, ben je geen beginner meer. Bekijk de officiële documentatie en probeer erachter te komen hoe u uw bot nog slimmer kunt maken. Teaser: u kunt ook berichten met afbeeldingen en knoppen verzenden! 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? Zo ja, hoe heeft u het ontwikkeld en wat kan het doen? Heb je services 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 hem slimmer en beter en laat het ons weten over je ervaringen in de reacties hieronder.