Priporočena, 2024

Izbira Urednika

Kako ustvariti Facebook Messenger Bot (vodnik)

Funkcija »Messenger Bots« na Facebooku ni nič novega, in veliko čudovitih robotov že obstaja. Vendar pa so viri v zvezi s tem, kako natančno zgraditi vaš lasten bot, redki in manjkajo pojasnila za ljudi, ki so novi v API-ju za Facebook Graph. Messengerji vam zdaj prav tako zahtevajo, da uporabite SSL zavarovan spletni klicni URL (več o tem pozneje), nastavitev SSL-ja pa ni za vsakogar, ampak tudi za denar.

V tem članku vas bom vodil skozi celoten proces ustvarjanja preprostega botra Facebook Messengerja, saj je lastna dokumentacija Facebooka precej slabo razložena. Postavili bomo aplikacijo v oblaku, ki uporablja protokol https, kodiramo bot v Node.js (ki je javascript, jezik na strani strežnika), uporabimo git, da kodo potisnemo v aplikacijo v oblaku in jo preizkusimo na Facebook Messengerju.

Namestitev Bot

Potrebovali boste Node, nameščeno na prenosnem računalniku. Če ne, pojdite na spletno stran Node in prenesite in namestite.

Ko končate, lahko nadaljujete z nastavitvijo za bot. Sledite spodnjim korakom:

1. Zaženite terminal.

2. Za shranjevanje kode potrebujete ločen imenik.

  • Naredite nov imenik
    mkdir testbot
  • Spremenite svoj delovni imenik v imenik, ki ste ga pravkar ustvarili
    cd testbot

3. Nato zaženite aplikacijo Node.
npm init

  • Boste morali vnesti podatke o vaši aplikaciji, uporabite privzete nastavitve s pritiskom na Enter za vse.

4. Namestite pakete
npm install express body-parser request --save

  • Ukaz se bo zagnal in dal nekaj opozoril; prezrite.

5. V Finderju odprite imenik » testbot «, ki ste ga ustvarili, in poiščite datoteko » package.json «; odprite to v urejevalniku, kot je Sublime Text.

6. V tej datoteki moramo dodati vrstico
"start": "node index.js"

  • Ne pozabite dodati », « na koncu prejšnje vrstice.

7. Nato ustvarite novo datoteko v sublimnem besedilu in v njej vstavite naslednjo kodo:

[js]

var express = require ("express");
var bodyParser = require ('body-parser');
var request = require ('request');
var app = express ();

app.use (bodyParser.urlencoded ({razširjen: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', funkcija (req, res) {
res.send ('To je TestBot strežnik');
});
app.get ('/ webhook', funkcija (req, res) {
if (req.query ['hub.verify_token'] === 'testbot_verify_token') {
res.send (req.query ['hub.challenge']);
} else {
res.send ('Neveljaven žeton preverjanja');
}
});

[/ js]

Shranite to datoteko kot index.js

Opomba: V vrstici 13 je vrednost 'hub.verify_token' nastavljena na ' testbot_verify_token', zapomnite si to vrednost, kot bo uporabljena pri ustvarjanju spletnega zaklepa v Facebooku.

Ustvarite skladišče Git

Zdaj, ko smo nastavili obdelavo povratnih klicev, moramo kodo potisniti v Heroku. Za to moramo ustvariti git repozitorij v našem imeniku.

Opomba: »git« je sistem za nadzor različic datotek in programske kode. Več o tem lahko preberete na Wikipediji.

Ustvarjanje git repozitorija je preprosto in traja le nekaj ukazov Terminala.

Opomba: Preverite, ali ste v imeniku » testbot « na terminalu. To lahko storite tako, da v terminal vtipkate ukaz pwd .

Če želite ustvariti git repozitorij, sledite tem korakom:

1. git init

2. git add .

3. git commit -m "Register Facebook Webhook"

Namestite Heroku

Preden se spustimo na strani razvijalcev Facebooka, potrebujemo URL za povratni klic, s katerim se lahko pogovarja Facebook. Ta URL mora uporabljati protokol https, kar pomeni, da moramo na našo spletno stran namestiti potrdilo SSL; toda, to je začetniški priročnik za pogovore s sporočili na Facebooku, zato ne zapletajmo stvari. Heroku bomo uporabili za uvajanje naše kode. Heroku vam omogoča https URL za vaše aplikacije in ima brezplačen načrt, ki ustreza našim (zelo osnovnim) zahtevam.

Pojdite na spletno stran Heroku in se registrirajte.

Opomba: V polju, ki pravi »Izberite svoj primarni razvojni jezik«, uporabite »Uporabljam drug jezik«.

Ko končate s tem, namestite Heroku toolbelt za vaš OS (Mac, zame) in ga namestite. To vam bo omogočilo dostop do programa Heroku na terminalu (ali v ukaznem pozivu v sistemu Windows).

Nato bomo ustvarili aplikacijo na Heroku, ki bo vsebovala celotno kodo za našega bot. Sledite spodnjim korakom:

1. Zaženite terminal

2. Vpišite heroku login

  • Vnesli boste svoj e-poštni naslov in geslo.
  • Vnesite e-poštno sporočilo, pritisnite Enter; nato vnesite svoje geslo, pritisnite Enter.
  • Prijavljeni boste v heroku

3. Vpišite heroku create

  • To bo ustvarilo aplikacijo na Heroku in vam ponudilo hiperpovezavo. Upoštevajte, da povezava uporablja protokol https. Počasi, kajne?

4. Sedaj lahko aplikacijsko kodo potisnete na Heroku
git push heroku master

5. Ko je to storjeno, je vaša aplikacija v bistvu v živo in lahko obiščete povezavo v brskalniku, da preverite, ali vse deluje. Moral bi odpreti spletno stran z besedami » To je strežnik TestBot «.

Nastavitev Facebooka

Čas je, da povežemo bot na Facebook! Ustvariti boste morali novo Facebook stran ali uporabiti obstoječo, ki jo imate. Pokazal vam bom, kako nadaljevati z ustvarjanjem nove Facebook strani.

1. Pojdite na Facebook in ustvarite novo stran.

  • Ustvarite lahko stran v kateri koli kategoriji, ki jo želite. Odločil sem se za podjetje / organizacijo, brez posebnega razloga.

2. Naslednji koraki, ki jih prikaže Facebook, so neobvezni in jih lahko preskočite.

3. Nato nadaljujte s spletno stranjo Facebook razvijalcev.

  • V zgornjem desnem kotu miške premaknite na » Moje aplikacije « in nato v spustnem meniju kliknite » Dodaj novo aplikacijo «.

  • Kliknite » Osnovna nastavitev «, ko vas Facebook pozove, da izberete platformo.

4. Izpolnite podatke za ime aplikacije in kontaktni e-poštni naslov.

  • Izberite » Aplikacije za strani « v kategoriji.
  • Kliknite » Ustvari ID aplikacije «.

5. Odprla se bo na nadzorno ploščo za vašo aplikacijo. V stranski vrstici se pomaknite do » + Dodaj izdelke « in izberite » Messenger « s klikom na gumb » Začni «.

6. Izberite » Nastavitev spletnih piškotkov «.

7. Izpolnite obvezna polja in zamenjajte »URL povratnega klica« z URL-jem aplikacije Heroku, preverite žeton z žetonom, uporabljenim v datoteki index.js, in izberite naslednja polja naročnine:

  • message_deliveries
  • sporočila
  • message_optins
  • messaging_postbacks

Opomba: Poskrbite, da boste dodali » / webhook « na URL povratnega klica, tako da index.js izvede zahtevano funkcijo, ko Facebook poskuša preveriti URL, lahko preveri »Preveri žeton«.

8. Kliknite » Preveri in shrani «.

9. V razdelku » Generiranje žetonov « kliknite » Izberi stran « in izberite stran, ki ste jo ustvarili prej.

S tem boste ustvarili » žeton za dostop do strani «, ki ga shranite nekje; potrebovali ga boste kasneje.

10. Nato boste morali v aplikacijo izdelati poizvedbo POST z uporabo žetona za dostop do strani, ustvarjenega v zadnjem koraku. To je lahko enostavno na terminalu. Zaženite naslednji ukaz in zamenjajte PAGE_ACCESS_TOKEN z žetonom za dostop do strani, ki ste ga ustvarili .

curl -X POST “//graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”

Na terminalu bi morali prejeti odgovor » uspeh «.

Več nastavitev za Heroku

Ja, še nismo končali. Ne skoraj.

1. Pojdite na spletno mesto Heroku in se prijavite s svojim e-poštnim ID-jem.

2. Poiščite aplikacijo v “nadzorni plošči” in jo kliknite.

3. Pomaknite se na kartico Settings (Nastavitve).

4. Kliknite » Razkrij konfig.

5. Dodajte PAGE_ACCESS_TOKEN kot » config var « in kliknite » Dodaj «.

Kodiranje dejanskega bot-a

Zdaj, ko smo končali z grunt delom, se lahko osredotočimo na tisto, kar je resnično pomembno: da bot odzove na sporočila. Za začetek bomo oblikovali bot, ki preprosto odziva na sporočila, ki jih prejme. Kot se je izkazalo, ta preprosta naloga zahteva precejšen del kode.

1. Kodiranje poslušalca sporočil

Preden bot lahko odzove nazaj na sporočilo, mora biti sposoben poslušati sporočila. Naredimo to najprej.

V datoteki index.js dodajte naslednjo kodo:

[js]

app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0] .sporočanje;
za (i = 0; i <dogodki.length; i ++) {
var dogodek = dogodki [i];
if (event.message && event.message.text) {
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
res.sendStatus (200);
});

[/ js]

Ta funkcija deluje tako, da preverja prejeta sporočila in nato preveri, ali je v sporočilu besedilo. Če v prejetem sporočilu najde besedilo, pokliče funkcijo sendMessage (prikazano pozneje), posreduje ID pošiljatelja in besedilo, ki ga pošlje nazaj. Pomembno je razumeti naslednje vrednosti in kaj pomenijo:

  • event.message.text je besedilo, prejeto v sporočilu. Na primer, če nekdo pošlje našemu botu sporočilo »Pozdravljeni«, bo vrednost »Event.message.text« »Hello«.
  • event.sender.id je id osebe, ki je poslala sporočilo botu. To je potrebno, da bo bot vedel, na koga naj se odzove.

2. Kodiranje funkcije sendMessage

Omogoča kodiranje funkcije »sendMessage«.

[js]

funkcija sendMessage (prejemnik, sporočilo) {
prošnja({
url: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: "POST",
json: {
prejemnik: {id: receiverId},
sporočilo: sporočilo,
}
}, funkcija (napaka, odziv, telo) {
če (napaka) {
console.log ("Napaka pri pošiljanju sporočila:", napaka);
} else if (response.body.error) {
console.log ('Napaka:', response.body.error);
}
});
};

[/ js]

Funkcija “sendMessage” ima dva parametra:

  • receiverId
  • sporočilo

ReceiverId je potreben, da je sporočilo lahko naslovljeno na pravilnega uporabnika.

Sporočilo je dejansko besedilo, ki ga je treba poslati v odgovoru.

3. Potiskanje sprememb v Heroku

Če ste dokončali zgornje korake, mora biti vaš bot sposoben ponoviti prejeto besedilo. Najprej pa morate spremeniti spremembe v aplikaciji, ki jo gosti Heroku. To naredite tako:

1. Zaženite terminal.

2. Spremenite imenik v imenik testbot
cd testbot

3. Naredite naslednje:

  • git add.
  • Opomba: na koncu "git add" je "."
  • git commit -m »Prva objava«
  • git push heroku mojster

4. Sedaj pošljite sporočilo na svojo stran in bot vam bo vrnil sporočilo.

Pogojni odzivi - izdelava Bot-pametnejše

Lahko uporabimo ujemanje besedil, da omogočimo, da se naš bot v Facebooku odzove v skladu z določenimi ključnimi besedami.

Da bi to dosegli, moramo dodati še eno funkcijo. Imenujem ga »conditionalResponses«, vendar lahko izberete katerokoli ime.

1. Kodiranje funkcije conditionalResponses

[js]

funkcija conditionalResponses (receiverId, text) {
text = text || "";

var what = text.match (/ kaj / gi); // preveri, ali besedilni niz vsebuje besedo "what"; ignoriraj primer
varGadget-Info.com = text.match (/ beebom / gi); // preverite, ali besedilni niz vsebuje besedo "beebom"; ignoriraj primer
var who = text.match (/ who / gi); // preveri, ali besedilni niz vsebuje besedo "who"; ignoriraj primer
var si = text.match (/ vi / gi); // preveri, ali besedilni niz vsebuje besedo "ti"; ignoriraj primer

// če besedilo vsebuje »kaj« in »beebom«, naredite to:

if (kaj! = null &&; Gadget-Info.com! = null) {
message = {
besedilo: "Beebom je spletna stran, ki ponuja tehnične vire. Dobrodošli."
}
sendMessage (prejemnik, sporočilo);
return true;
}

// če besedilo vsebuje »kdo« in »vi«, naredite to:
če (kdo! = null && you! = null) {
message = {
besedilo: "Prosili so me, da ne razpravljam o svoji identiteti na spletu."
}
sendMessage (prejemnik, sporočilo);
return true;
}

// če se nič ne ujema, vrnite false za nadaljevanje izvajanja notranje funkcije.
return false;
};

[/ js]

V vrsticah od 4 do 7 smo definirali spremenljivke glede na ujemanje prejetega niza z določenimi besedami. Najboljši del o uporabi “text.match ()” je, da uporablja regularne izraze (ponavadi se imenuje regex, preberite več tukaj.). To je dobro za nas, ker to pomeni, da dokler se del besede v prejetem besedilu ujema z eno od besed, ki smo jih omenili v text.match (), spremenljivka ne bo nič. To pomeni, da če je prejeto sporočilo »Kaj je Beebom?«, »Var what« in »var beebom« ne bosta nič, ker beseda »Kaj« vsebuje besedo »kaj«. Tako smo rešeni ustvarjanja dodatnih izjav za vsako različico, v kateri bi nekdo rekel »Kaj«.

2. Urejanje poslušalca sporočil

Prav tako moramo urediti poslušalca sporočil, ki smo ga kodirali, da zagotovimo, da poskuša tudi prejeti besedilo s funkcijo »conditionalResponses«.

[js]

app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0] .sporočanje;
za (i = 0; i <dogodki.length; i ++) {
var dogodek = dogodki [i];
if (event.message && event.message.text) {

// najprej poskusite preveriti, ali prejeto sporočilo izpolnjuje pogoje za pogojni odgovor.
if (! conditionalResponses (event.sender.id, event.message.text)) {

// če ne, preprosto ponovite prejeto sporočilo nazaj pošiljatelju.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ js]

Spremembe v poslušalcu morda ne izgledajo zelo drastično, vendar so njihovi učinki zagotovo. Sedaj poslušalec najprej poskuša odgovoriti s pogojnimi odzivi in ​​če ni veljavnega pogoja za prejeto sporočilo, preprosto odmeva sporočilo uporabniku.

3. Potiskanje sprememb v Heroku

Preden lahko preizkusite nove funkcije, boste morali potisniti posodobljeno kodo v aplikacijo, ki jo gosti Heroku. Sledite spodnjim korakom:

1. Zaženite terminal.

2. Spremenite imenik v imenik testbot
cd testbot

3. Naredite naslednje:

  • git add.
  • Opomba: na koncu "git add" je "."
  • git commit -m »Dodajanje pogojnih zmogljivosti«
  • git push heroku mojster

4. Sedaj pošljite sporočilo na svojo stran in bot vam bo vrnil sporočilo.

Še več funkcionalnosti

Naš bot se zdaj odziva na majhen nabor ukazov v lepih, dobro strukturiranih odzivih. Ampak to še vedno ni zelo koristno. Naredimo še nekaj sprememb kode, da bo naš bot bolj » funkcionalen « del programske opreme. Prenovili bomo veliko funkcij in dodali še nekaj, zato se razburite.

1. Urejanje poslušalca sporočil

Naš poslušalec sporočil, v tej fazi, deluje samo ok. Vendar pa to ni zelo lepo oblikovano in če bi še naprej povečevali ugnezdene izjave, da bi dodali dodatne » preveritve pogojev «, bo hitro postalo grdo za pogled, težko razumljivo in počasnejše pri izvajanju. Ne želimo tega, kajne? Naredimo nekaj sprememb.

Opomba: V poslušalniku sporočila je vrstica kode, ki se glasi »res.sendStatus (200)«, ta vrstica pošlje Facebooku statusno kodo 200, ki ji sporoča, da je funkcija uspešno izvedena. Glede na dokumentacijo Facebooka Facebook čaka največ 20 sekund, da prejme status 200, preden se odloči, da sporočilo ne preide in ustavi izvajanje kode.

Naš novi poslušalec sporočil je videti takole. Za zaustavitev izvajanja funkcije uporabimo ukaz " res.sendStatus (200) ", takoj ko je pogoj usklajen in izveden.

[js]

app.post ('/ webhook', funkcija (req, res) {
var events = req.body.entry [0] .sporočanje;
za (i = 0; i <dogodki.length; i ++) {
var dogodek = dogodki [i];
if (event.message && event.message.text) {

// najprej preverite besedilo sporočila proti pogojem introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// zaradi pomanjkanja boljšega imena sem imenoval to novoResponse: p; to preverite
tudi če (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// else, samo ponovite izvirno sporočilo
else {
// zamenjaj echo z veljavnim seznamom ukazov
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ js]

2. Kodiranje funkcije newResponse

Naš poslušalec sporočil zdaj preveri besedilo sporočila proti nizu pogojev v “newResponse”, vendar najprej moramo kodirati funkcijo newResponse. To funkcijo bomo uporabili za preverjanje, ali je uporabnik zahteval predloge člankov iz spletne straniGadget-Info.com, iskalnega izraza na spletni strani in povezave do uporabnika. Še enkrat, bomo uporabili regularne izraze za uskladitev besedila s specifičnimi ključnimi besedami.

[js]

funkcija newResponse (receiveId, text) {
text = text || "";
var suggest = text.match (/ predlagam / gi);
var random = text.match (/ naključno / gi);
var article = text.match (/ članek / 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);

// preverite, ali uporabnik sploh prosi za predloge člankov
if (predlagam! = null && članek! = null) {
var query = "";
// če se poiščejo predlogi člankov, preverite temo, ki jo išče uporabnik
če (android! = null) {
query = "Android";
} else if (mac! = null) {
query = "Mac";
} else if (iphone! = null) {
query = "iPhone";
} else if (brskalnik! = null) {
query = "Brskalnik";
} else if (vpn! = null) {
query = "VPN";
}
sendButtonMessage (prejemnik, poizvedba);
return true
}
return false;
};

[/ js]

Za pošiljanje sporočila uporabljamo drugo funkcijo po meri, imenovano »sendButtonMessage«, če uporabnik prosi za predloge člankov. To bomo ustvarili naslednjič.

3. Kodiranje funkcije sendButtonMessage

Funkcija sendButtonMessage ima dva parametra, ID prejemnika in poizvedbo. ID prejemnika se uporablja za identifikacijo uporabnika, kateremu je treba poslati sporočilo, in poizvedba se uporablja za identifikacijo teme, na kateri želi uporabnik predlagati članke.

[js]

funkcija sendButtonMessage (prejemnik, poizvedba) {
var messageData = {
prejemnik: {
id: receiverId
},
sporočilo: {
Priponka: {
vnesite: "predlogo",
tovor: {
template_type: "gumb",
besedilo: "To je tisto, kar sem našel za" + poizvedba,
gumbi: [{
vnesite: "web_url",
url: "//www.beebom.com/?s="+query,
naslov: "Beebom:" + poizvedba
}]
}
}
}
};

callSendAPI (sporočiloData);
}

[/ js]

Še enkrat uporabljamo funkcijo po meri; tokrat uporabniku pošljete končno sporočilo s povezavami člankov. Funkcija je na veliko načinov podobna funkciji »sendMessage«, ki smo jo kodirali prej, vendar je bolj splošna v načinu, kako vzame podatke o sporočilu, kar nam ustreza, saj se podatki sporočil spreminjajo s poizvedbo, ki jo ustvari uporabnik.

4. Kodiranje funkcije callSendAPI

Funkcija »callSendAPI« ima en sam parameter, »messageData« . Ta parameter vsebuje celotne podatke sporočil, ki so pravilno oblikovani v skladu s pravili Facebooka, tako da jih lahko uporabnik pravilno prikaže.

[js]

funkcija callSendAPI (sporočiloData) {
prošnja({
uri: "//graph.facebook.com/v2.6/me/messages",
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metoda: "POST",
json: messageData

}, funkcija (napaka, odziv, telo) {
če (! error && response.statusCode == 200) {
var acceptId = body.recipient_id;
var messageId = body.message_id;

console.log ("Uspešno poslano generično sporočilo z ID% s prejemniku% s",
messageId, receiverId);
} else {
console.error ("Ne morem poslati sporočila.");
console.error (odziv);
console.error (napaka);
}
});
}

[/ js]

5. Potiskanje sprememb na Heroku

Na zadnjem koraku smo naredili naš nadgrajeni bot v živo. Samo spremembo kode moramo vnesti v Heroku. Postopek je enak kot prej in je opisan spodaj:

1. Zaženite terminal.

2. Spremenite imenik v imenik testbot .
cd testbot

3. Naredite naslednje:

  • git add.
  • Opomba: Na koncu tega ukaza je "." .
  • git commit -m "izboljšanje preverjanja pogojev in oblikovanje"
  • git push heroku mojster

4. Sedaj pošljite sporočilo, kot je »Predlagajte članek na Androidu« ali »Beebom, predlagajte mi kateri koli članek na temo Android«; in bot bo poslal lepo oblikovano sporočilo s povezavo, na katero se lahko dotaknete, da odprete članke, povezane z vašo poizvedbo.

Koplji globje

Zdaj, ko veste, kako začeti z razvijanjem botov Facebook Messengerja, pojdite skozi dokumentacijo na Facebooku o tem, kako razviti bote za sporočila na Facebooku. Medtem ko dokumentacija ni dobra za začetnike, niste več začetnik. Oglejte si uradno dokumentacijo in poskusite ugotoviti, kako narediti bot še pametnejši. Teaser: Sporočila lahko pošiljate tudi s slikami in gumbi! Uporabite lahko tudi storitve, kot sta Wit.ai in Api.ai, da kodirate vaš bot in ga nato vključite v Facebook, vendar v mojih slabih poskusih uporabe teh storitev Wit.ai ne deluje preveč dobro in Api.ai ima ostro krivuljo učenja za začetnike.

Ste že kdaj razvili bot za Facebook? Če ste, kako ste ga razvili in kaj lahko storite? Ste uporabili storitve, kot sta Wit.ai in Api.ai, da ustvarite bot? Če še nikoli niste poskušali rokovati s kodiranjem bot-a, pojdite in razvijete svoj lastni bot za Facebook, ga naredite pametnejši in boljši ter nam sporočite svoje izkušnje v spodnjih komentarjih.

Top