Facebooks "messenger bots" -funksjon er ikke noe nytt, og mange kjempebra bots eksisterer allerede. Imidlertid er ressursene angående nøyaktig hvordan du bygger din egen bot, knappe, og mangler i forklaring til folk som er nye til Facebook Graph API. Messenger-roboter krever nå at du også bruker en SSL-sikret webhook-tilbakekallingsadresse (mer om det senere), og konfigurering av SSL er ikke for alle, og koster også penger.
I denne artikkelen vil jeg gå gjennom hele prosessen med å lage en enkel Facebook messenger bot, fordi Facebooks egen dokumentasjon er ganske dårlig forklart. Vi vil sette opp en sky app som bruker https-protokollen, kode boten i Node.js (som er et javascript, server-side språk), bruk git til å skyve koden til sky applikasjonen, og teste den ut på Facebook Messenger.
Setup Bot
Du trenger node installert på den bærbare datamaskinen. Hvis du ikke gjør det, kan du gå til Node-webområdet for å laste ned og installere det.
Når du er ferdig, kan du fortsette med oppsettet for boten. Følg trinnene nedenfor:
1. Start terminalen.
2. Du trenger en egen katalog for å holde koden din.
- Lag en ny katalog
mkdir testbot
- Endre arbeidskatalogen til katalogen du nettopp har opprettet
cd testbot
3. Neste, initialiser nod-programmet. npm init
- Du vil bli bedt om å legge inn informasjon om søknaden din, bare bruk standardene ved å trykke på Enter for alt.
4. Installer pakker npm install express body-parser request --save
- Kommandoen vil løpe, og gi noen advarsler; Ignorer dem.
5. I Finder, åpne katalogen " testbot " som du opprettet, og finn filen heter " package.json "; åpne dette i en editor som Sublime Text.
6. I denne filen må vi legge til en linje "start": "node index.js"
- Ikke glem å legge til en ", " på slutten av forrige linje.
7. Lag deretter en ny fil i Sublime Text, og legg inn følgende kode i den:
[Js]
var express = krever ('express');
var bodyParser = krever ('body-parser');
var request = krever ('request');
var app = express ();
app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funksjon (req, res) {
res.send ('Dette er TestBot Server');
});
app.get ('/ webhook', funksjon (req, res) {
hvis (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query [ 'hub.challenge']);
} annet {
res.send ('Ugyldig bekreftelsestoken');
}
});
[/ Js]
Lagre denne filen som index.js
Merk: I linje 13 er verdien av 'hub.verify_token' satt som ' testbot_verify_token', husk denne verdien som den vil bli brukt når du lager webhook på Facebook.
Opprett Git Repository
Nå som vi har satt opp botens tilbakekallingshåndtering, må vi trykke koden til Heroku. For det må vi lage et git-repository i katalogen vår.
Merk: "git" er et versjonskontrollsystem for filer og programvarekode. Du kan lese mer om det på Wikipedia.
Å lage et git-repository er enkelt, og tar bare et par Terminal-kommandoer.
Merk: Pass på at du er inne i " testbot " -katalogen i Terminal. Du kan gjøre dette ved å skrive kommandoen pwd til Terminal.
Følg disse trinnene for å opprette et git-repository:
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
Oppsett Heroku
Før vi går inn på Facebooks utviklersider, trenger vi en tilbakekallingsadresse som Facebook kan snakke med. Denne nettadressen må bruke https-protokollen, noe som betyr at vi må installere et SSL-sertifikat på nettstedet vårt. men dette er en nybegynner guide til Facebook messenger bots, så la oss ikke komplisere ting. Vi bruker Heroku til å distribuere koden vår. Heroku gir deg https webadresser for dine applikasjoner og har en gratis plan som oppfyller våre (svært grunnleggende) krav.
Gå til Heroku nettside og registrer deg selv.
Merk: I feltet som sier "Velg ditt primære utviklingsspråket", bruk "Jeg bruker et annet språk".
Når du er ferdig med det, installerer du verktøyet for Heroku for operativsystemet ditt (Mac, for meg), og installerer det. Dette gir deg tilgang til Heroku på din terminal (eller ledetekst, på Windows).
Deretter skal vi lage en app på Heroku, som vil holde hele koden for vår bot. Følg trinnene nedenfor:
1. Start terminalen
2. Skriv inn heroku login
- Du vil bli bedt om å skrive inn e-post og passord.
- Skriv inn din epost, trykk Enter; Skriv inn passordet ditt, trykk Enter.
- Du vil bli logget inn på heroku
3. Skriv heroku create
- Dette vil opprette en app på Heroku og gi deg en hyperkobling. Merk at lenken bruker https-protokollen. Enkelt, ikke sant?
4. Nå kan du skyve appkoden til Heroku git push heroku master
5. Når dette er gjort, er appen din i utgangspunktet live, og du kan besøke lenken i nettleseren din for å sjekke at alt fungerer bra. Det skal åpne en nettside som sier " Dette er TestBot Server ".
Facebook Setup
Det er på tide å koble vår bot til Facebook! Du må opprette en ny Facebook-side eller bruke en eksisterende som du eier. Jeg skal vise deg hvordan du går videre ved å opprette en ny Facebook-side.
1. Gå til Facebook og opprett en ny side.
- Du kan opprette en side i hvilken kategori du vil ha. Jeg velger ikke selskap / organisasjon, uten spesiell grunn.
2. De neste trinnene som Facebook viser er valgfrie, og kan hoppes over.
3. Neste, gå over til Facebook Developers hjemmeside.
- Høyreklikk musen på " Mine apper " og klikk på " Legg til ny app " fra rullegardinmenyen øverst til høyre.
- Klikk på " grunnleggende oppsett " når Facebook ber deg om å velge en plattform.
4. Fyll opp detaljene for Appnavn og kontakt-e-postadresse.
- Velg « Apps for Pages » i kategorien.
- Klikk på " Opprett app ID ".
5. Du blir tatt til dashbordet for appen din. I sidelinjen navigerer du til " + Legg til produkter " og velg " Messenger " ved å klikke på " Komme i gang " -knappen.
6. Velg " Setup Webhooks ".
7. Fyll ut de obligatoriske feltene, erstatt "Tilbakeringingsadressen" med URLen til Heroku-appen, Bekreft Token med symbolet som brukes i Index.js-filen, og velg følgende Abonnementsfelt:
- message_deliveries
- meldinger
- message_optins
- messaging_postbacks
Merk: Pass på at du legger til " / webhook " på tilbakeringingsadressen, slik at index.js kjører den nødvendige funksjonen når Facebook prøver å pinge nettadressen, den kan bekrefte "Bekreft Token".
8. Klikk på " Bekreft og lagre ".
9. I delen " Token Generation " klikker du på " Select a Page " og velger siden du opprettet tidligere.
Dette vil generere et " Page Access Token ", lagre det et sted; du trenger det senere.
10. Deretter må du lage en POST-spørring til appen din, ved hjelp av Pages Access Token generert i det siste trinnet. Dette kan enkelt gjøres i Terminal. Bare kjør følgende kommando, erstatt PAGE_ACCESS_TOKEN med sidetilgangstoken du genererte .
curl -X POST "//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN"
Du bør få et " suksess " svar i Terminal.
Mer Heroku Setup
Ja, vi er ikke ferdige ennå. Ikke nesten.
1. Gå til Heroku nettside og logg inn med epost-ID.
2. Finn appen din i "dashbordet" og klikk på den.
3. Naviger til Innstillinger-fanen.
4. Klikk på " Reveal Config Vars "
5. Legg til PAGE_ACCESS_TOKEN som en " config var ", og klikk " Legg til ".
Koding av den faktiske botten
Nå som vi er ferdige med det grunne arbeidet, kan vi fokusere på det som virkelig betyr noe: gjør boten til å svare på meldinger. For å starte, skal vi bare lage en bot som bare ekko meldingene den mottar. Som det viser seg, krever denne enkle oppgaven en betydelig del kode for å fungere.
1. Koding av Message Listener
Før boten kan ekko meldingen, må den kunne lytte til meldinger. La oss gjøre det først.
I index.js-filen legger du til følgende kode:
[Js]
app.post ('/ webhook', funksjon (req, res) {
var hendelser = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var hendelse = hendelser [i];
hvis (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});
[/ Js]
Hva denne funksjonen gjør, er det sjekker for mottatte meldinger, og kontrollerer deretter om det er tekst i meldingen. Hvis den finner tekst i den mottatte meldingen, kalles den SendMessage (vist senere) -funksjonen, sender avsenderens ID og teksten som skal sendes tilbake. Det er viktig å forstå følgende verdier og hva de betyr:
- event.message.text er teksten mottatt i meldingen. For eksempel, hvis noen sender meldingen "Hei" til vår bot, blir verdien av event.message.text "Hello".
- event.sender.id er iden til personen som sendte meldingen til botten. Dette kreves slik at boten vet hvem du skal adressere svaret på.
2. Koding av sendMessage-funksjonen
Lar kode "SendMessage" -funksjonen, nå.
[Js]
funksjon sendMessage (mottaker, melding) {
be om({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metode: 'POST',
json: {
mottaker: {id: recipientId},
melding: melding,
}
}, funksjon (feil, respons, kropp) {
hvis (feil) {
console.log ('Feil ved sending av melding:', feil);
} annet hvis (response.body.error) {
console.log ('Feil:', respons.body.error);
}
});
};
[/ Js]
Funksjonen "sendMessage" tar to parametere:
- recipientId
- budskap
Mottakeren er nødvendig, slik at meldingen kan adresseres til den riktige brukeren.
Meldingen er den faktiske teksten som skal sendes i svaret.
3. Trykk på endringene til Heroku
Hvis du har fullført trinnene ovenfor, bør boten kunne ekko tilbake den mottatte teksten. Men først må du skyve endringene til programmet som er hostet på Heroku. For å gjøre dette, følg trinnene nedenfor:
1. Start terminalen.
2. Endre katalog til testbot-katalogen din
cd testbot
3. Gjør følgende trinn:
- git add.
- Merk: Det er en "." På slutten av "git add"
- git commit -m "Først commit"
- git push heroku master
4. Send nå en melding til siden din, og boten vil ekko meldingen tilbake til deg.
Betingede svar aka Gjør bot smartere
Vi kan bruke tekstavstemning for å tillate at vår Facebook messenger bot svarer etter bestemte spesielle søkeord.
For å oppnå dette må vi legge til en annen funksjon. Jeg navngir det "conditionalResponses", men du kan velge hvilket navn du helst foretrekker.
1. Koding av conditionalResponses-funksjonen
[Js]
fungere conditionalResponses (recipientId, text) {
tekst = tekst || "";
var hva = text.match (/ hva / gi); // Sjekk om tekststrengen inneholder ordet "hva"; ignorere saken
varGadget-Info.com = text.match (/ beebom / gi); // Sjekk om tekststrengen inneholder ordet "beebom"; ignorere saken
var hvem = text.match (/ hvem / gi); // Sjekk om tekststrengen inneholder ordet "hvem"; ignorere saken
var du = text.match (/ du / gi); // Sjekk om tekststrengen inneholder ordet "deg"; ignorere saken
// hvis teksten inneholder både "hva" og "beebom", gjør dette:
hvis (hva! = null &&; Gadget-Info.com! = null) {
melding = {
Tekst: "Beebom er et nettsted som tilbyr tekniske ressurser. Velkommen."
}
sendMessage (mottaker, melding);
returnere sant;
}
// hvis teksten inneholder både "hvem" og "deg", gjør dette:
hvis (hvem! = null && you! = null) {
melding = {
Tekst: "Jeg har blitt bedt om ikke å diskutere identiteten min på nettet."
}
sendMessage (mottaker, melding);
returnere sant;
}
// Hvis ingenting stemmer overens, returner du false for å fortsette å utføre indre funksjon.
returner falsk;
};
[/ Js]
I linjene 4 til 7 har vi definert variabler avhengig av at den mottatte strengen samsvarer med bestemte ord. Den beste delen om å bruke "text.match ()" er at den bruker Regular Expressions (vanligvis kalt regex, les mer her.). Det er bra for oss, fordi dette betyr at så lenge en del av et ord i den mottatte teksten stemmer overens med et av ordene vi nevnte i text.match (), vil variabelen ikke være null. Dette betyr at hvis mottatt melding var "Hva er Beebom?", "Var hva" og "var beebom" ikke vil være null, fordi ordet "Hva er" inneholder ordet "hva". Så vi er reddet fra å skape ekstra setninger for hver variasjon som noen kan si "Hva".
2. Redigere Message Listener
Vi må også redigere Message Listener vi kodet for å sikre at den prøver å matche mottatt tekst med "conditionalResponses" -funksjonen også.
[Js]
app.post ('/ webhook', funksjon (req, res) {
var hendelser = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var hendelse = hendelser [i];
hvis (event.message && event.message.text) {
// Prøv først å sjekke om mottatt melding kvalifiserer for betinget respons.
hvis (! conditionalResponses (event.sender.id, event.message.text)) {
// hvis det ikke, ekko bare den mottatte meldingen tilbake til avsenderen.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
Endringene i lytteren ser kanskje ikke veldig drastisk ut, men deres virkninger er sikkert. Nå prøver lytteren først å reagere med betingede svar, og hvis det ikke er en gyldig betingelse for mottatt melding, ekko det bare meldingen tilbake til brukeren.
3. Trykk på endringene til Heroku
Før du kan prøve ut de nye funksjonene, må du trykke den oppdaterte koden til appen som er hostet på Heroku. Følg trinnene under for å gjøre dette:
1. Start terminalen.
2. Endre katalog til testbot-katalogen din
cd testbot
3. Gjør følgende trinn:
- git add.
- Merk: Det er en "." På slutten av "git add"
- git commit -m "Legge til betingede evner"
- git push heroku master
4. Send nå en melding til siden din, og boten vil ekko meldingen tilbake til deg.
Enda mer funksjonalitet
Vår bot reagerer nå på et lite sett med kommandoer i fine, godt strukturerte svar. Men det er fortsatt ikke veldig nyttig. La oss gjøre noen flere endringer i koden for å gjøre vår bot et mer " funksjonelt " stykke programvare. Vi vil revamping mange funksjoner, og legge til et par flere, så bli begeistret.
1. Redigere Meldingslytten
Vår meldingslytter, på dette stadiet, fungerer bare ok. Det er imidlertid ikke veldig pent formatert, og hvis vi skulle fortsette å øke den nestede hvis uttalelser for å legge til ekstra " tilstandskontroller ", vil det raskt bli stygg å se på, vanskelig å forstå og langsommere ved utførelse. Vi vil ikke ha det, nå gjør vi det? La oss gjøre noen endringer.
Merk: Det er en linje med kode i meldingslytteren som leser "res.sendStatus (200)", denne linjen sender en status 200-kode til Facebook, og forteller at funksjonen er vellykket utført. Ifølge Facebook-dokumentasjonen venter Facebook i maksimalt 20 sekunder for å motta en 200-status, før den bestemmer at meldingen ikke gikk gjennom og stopper kjøringen.
Vår nye meldingslytter ser slik ut. Vi bruker kommandoen " res.sendStatus (200) " for å stoppe utførelsen av funksjonen så snart en tilstand er kombinert og utført.
[Js]
app.post ('/ webhook', funksjon (req, res) {
var hendelser = req.body.entry [0] .messaging;
for (i = 0; i <events.length; i ++) {
var hendelse = hendelser [i];
hvis (event.message && event.message.text) {
// første sjekk meldingstekst mot introResponse betingelser
hvis (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// i mangel av et bedre navn, ringte jeg dette nye svaret: p; sjekk dette neste
ellers hvis (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}
// annet, bare ekko tilbake den opprinnelige meldingen
ellers {
// erstatte ekko med gyldig kommandoliste
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});
[/ Js]
2. Koding av newResponse-funksjonen
Vår meldingslytter kontrollerer nå meldingsteksten mot et sett med forhold i "newResponse" også, men først må vi koden for nyResponse-funksjonen. Vi bruker denne funksjonen for å sjekke om brukeren har bedt om artikkelforslag fra theGadget-Info.comwebsite, søk etter spørringsbegrepet på nettstedet, og legg linken til brukeren. Igjen, vil vi bruke vanlige uttrykk for å matche tekst med bestemte søkeord.
[Js]
fungere newResponse (mottakerId, tekst) {
tekst = tekst || "";
var foreslå = text.match (/ suggest / gi);
var tilfeldig = text.match (/ random / gi);
varartikkel = text.match (/ artikkel / gi);
var iphone = text.match (/ iphone / gi);
var android = text.match (/ android / gi);
var mac = text.match (/ mac / gi);
var-leser = text.match (/ nettleser / gi);
var vpn = text.match (/ vpn / gi);
// Sjekk om brukeren ber om forslag til artikkelen i det hele tatt
hvis (foreslå! = null && artikkel! = null) {
var spørring = "";
// Hvis du har spørsmål om artikkelforslag, kontroller du emnet brukeren leter etter
hvis (android! = null) {
spørring = "Android";
} annet hvis (mac! = null) {
spørring = "Mac";
} annet hvis (iphone! = null) {
spørring = "iPhone";
} annet hvis (nettleser! = null) {
query = "Browser";
} annet hvis (vpn! = null) {
spørring = "VPN";
}
sendButtonMessage (mottakerId, spørring);
returnere sant
}
returner falsk;
};
[/ Js]
Vi bruker en annen tilpasset funksjon kalt "sendButtonMessage" for å sende meldingen hvis brukeren ber om artikkelforslag. Vi vil opprette dette neste.
3. Koding av sendButtonMessage-funksjonen
SendButtonMessage-funksjonen tar to parametre, en mottaker-ID og en forespørsel. Mottaker-IDen brukes til å identifisere brukeren til hvem meldingen skal sendes, og spørringen brukes til å identifisere emnet som brukeren ønsker artikkelforslag.
[Js]
funksjon sendButtonMessage (mottaker, spørring) {
var messageData = {
mottaker: {
ID: mottakerId
}
budskap: {
vedlegg: {
skriv inn: "mal",
nyttelast: {
template_type: "button",
tekst: "Dette er hva jeg fant for" + spørring,
knapper: [{
skriv inn: "web_url",
url: "//www.beebom.com/?s="+query,
tittel: "Beebom:" + spørring
}]
}
}
}
};
callSendAPI (messageData);
}
[/ Js]
Igjen bruker vi en tilpasset funksjon; denne gangen for å sende den endelige meldingen, med artikkelen lenker, til brukeren. Funksjonen er på mange måter ligner på "sendMessage" -funksjonen vi kodet tidligere, men er mer generisk i den måten det tar meldingsdataene, som passer oss, fordi våre meldingsdata endres med spørringen som brukeren lager.
4. Koding av callSendAPI-funksjonen
Funksjonen "callSendAPI" tar en enkelt parameter, "messageData" . Denne parameteren inneholder hele meldingsdataene, formatert riktig i henhold til Facebook-regler, slik at budbringeren kan vise den riktig til brukeren.
[Js]
funksjon callSendAPI (messageData) {
be om({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metode: 'POST',
json: messageData
}, funksjon (feil, respons, kropp) {
hvis (! feil && respons.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log ("Sender sendt generisk melding med id% s til mottaker% s",
messageId, recipientId);
} annet {
console.error ("Kan ikke sende melding.");
console.error (respons);
console.error (error);
}
});
}
[/ Js]
5. Trykk på endringene til Heroku
Vi er på siste skritt mot å gjøre vår oppgraderte bot live. Vi trenger bare å presse alle kodendringene til Heroku. Prosessen er den samme som før, og er skissert nedenfor:
1. Start terminalen.
2. Endre katalog til testbot- katalogen.
cd testbot
3. Gjør følgende:
- git add.
- Merk: Det er en "." På slutten av den kommandoen.
- git commit -m "forbedre tilstandskontroll og formatering"
- git push heroku master
4. Send nå en melding som "Foreslå en artikkel på Android", eller "Beebom, foreslå meg en artikkel om emnet Android"; og boten vil sende en pent formatert melding med en lenke du kan trykke på for å åpne artiklene relatert til søket ditt.
Grave dypere
Nå som du vet hvordan du kommer i gang med å utvikle Facebook messenger-bots, gå gjennom Facebook-dokumentasjonen om hvordan du utvikler Facebook messenger-bots. Selv om dokumentasjonen ikke er bra for nybegynnere, er du ikke en nybegynner lenger. Du bør sjekke ut den offisielle dokumentasjonen og prøve å finne ut hvordan du gjør din bot enda smartere. Teaser: Du kan også sende meldinger med bilder og knapper! Det er også mulig å bruke tjenester som Wit.ai og Api.ai for å kode din bot og deretter integrere den med Facebook, men i mine svake forsøk på å bruke disse tjenestene virker Wit.ai ikke så bra, og Api.ai har en skarp læringskurve for nybegynnere.
Har du noen gang utviklet en Facebook messenger bot? Hvis du har, hvordan har du gått med å utvikle den, og hva kan den gjøre? Har du brukt tjenester som Wit.ai og Api.ai for å lage din bot? Hvis du aldri har prøvd hendene på å kode en bot, gå og utvikle din egen Facebook messenger bot, gjør det smartere og bedre, og gi oss beskjed om din erfaring i kommentarene nedenfor.
