Come creare un Bot di Facebook Messenger (Guida)

• 2019

La funzione "messenger bots" di Facebook non è una novità e esistono già molti fantastici bot. Tuttavia, le risorse riguardanti esattamente come costruire il proprio bot sono scarse e mancano di spiegazione per le persone che sono nuove all'API di Facebook Graph. I bot di Messenger ora richiedono anche l'utilizzo di un URL di callback webhook protetto da SSL (ne parleremo più avanti), e l'impostazione di SSL non è per tutti, e costa anche denaro.

In questo articolo, ti guiderò attraverso l'intero processo di creazione di un semplice bot di Facebook Messenger, perché la documentazione di Facebook è spiegata piuttosto male. Creeremo un'app cloud che utilizza il protocollo https, codifica il bot in Node.js (che è un javascript, linguaggio lato server), usa git per inviare il codice all'applicazione cloud e testarlo su Facebook Messenger.

Setup Bot

Avrai bisogno di Nodo installato sul tuo laptop. In caso contrario, accedere al sito Web Node per scaricarlo e installarlo.

Una volta che hai finito, puoi continuare con l'installazione per il bot. Segui i passaggi seguenti:

1. Avvia terminale.

2. Hai bisogno di una directory separata per contenere il tuo codice.

• Crea una nuova directory
  mkdir testbot

• Cambia la directory di lavoro nella directory che hai appena creato
  cd testbot

3. Quindi, inizializzare l'applicazione Node.
npm init

• Ti verrà chiesto di inserire le informazioni sulla tua applicazione, basta usare i valori predefiniti premendo Invio per tutto.

4. Installa i pacchetti
npm install express body-parser request --save

• Il comando verrà eseguito e fornirà alcuni avvertimenti; ignorali.

5. Nel Finder, apri la directory " testbot " che hai creato e trova il file " package.json "; apri questo in un editor come Sublime Text.

6. In questo file, dobbiamo aggiungere una linea
"start": "node index.js"

• Non dimenticare di aggiungere un ", " alla fine della riga precedente.

7. Quindi, crea un nuovo file in Sublime Text e inserisci il seguente codice al suo interno:

[JS]

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

app.use (bodyParser.urlencoded ({extended: false}));
app.use (bodyParser.json ());
app.listen ((process.env.PORT || 3000));
app.get ('/', function (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']);
} altro {
res.send ('Token di verifica non valido');
}
});

[/ Js]

Salva questo file come index.js

Nota: nella riga 13, il valore di 'hub.verify_token' è impostato come ' testbot_verify_token', ricorda questo valore dato che verrà utilizzato durante la creazione del webhook in Facebook.

Crea repository Git

Ora che abbiamo impostato la gestione del callback del nostro bot, dobbiamo inviare il codice a Heroku. Per questo, abbiamo bisogno di creare un repository git nella nostra directory.

Nota: "git" è un sistema di controllo versione per file e codice software. Puoi leggere di più su Wikipedia.

Creare un repository git è semplice e richiede solo un paio di comandi Terminal.

Nota: assicurati di essere all'interno della directory " testbot " nel Terminale. Puoi farlo digitando il comando pwd nel Terminale.

Segui questi passi per creare un repository git:

1. git init

2. git add .

3. git commit -m "Register Facebook Webhook"

Imposta Heroku

Prima ancora di entrare nelle pagine degli sviluppatori di Facebook, abbiamo bisogno di un URL di richiamata con cui Facebook può parlare. Questo URL deve utilizzare il protocollo https, il che significa che è necessario installare un certificato SSL sul nostro sito Web; ma questa è una guida per principianti ai robot di messaggistica di Facebook, quindi non complicare le cose. Useremo Heroku per implementare il nostro codice. Heroku ti fornisce https URL per le tue applicazioni e ha un piano gratuito che soddisfa le nostre (molto basilari) richieste.

Vai al sito Web di Heroku e registrati.

Nota: nel campo "Scegli il tuo linguaggio di sviluppo primario", utilizza "Uso un'altra lingua".

Una volta che hai finito, installa la cintura di strumenti Heroku per il tuo sistema operativo (Mac, per me) e installalo. Questo ti darà accesso a Heroku sul tuo Terminale (o prompt dei comandi, su Windows).

Successivamente, creeremo un'app su Heroku, che manterrà l'intero codice per il nostro bot. Segui i passaggi seguenti:

1. Avvia terminale

2. Immettere il heroku login

• Ti verrà chiesto di inserire la tua email e la password.

• Inserisci la tua email, premi Invio; quindi, digita la tua password, premi Invio.

• Sarai registrato su heroku

3. heroku create

• Questo creerà un'app su Heroku e ti fornirà un collegamento ipertestuale. Si noti che il collegamento utilizza il protocollo https. Facile, giusto?

4. Ora puoi inviare il codice della tua app a Heroku
git push heroku master

5. Una volta eseguita, la tua app è fondamentalmente attiva e puoi visitare il link nel tuo browser per verificare che tutto funzioni correttamente. Dovrebbe aprire una pagina web che dice " Questo è TestBot Server ".

Installazione di Facebook

È tempo di collegare il nostro bot a Facebook! Dovrai creare una nuova pagina Facebook o utilizzarne una esistente. Ti mostrerò come procedere creando una nuova pagina Facebook.

1. Vai su Facebook e crea una nuova pagina.

• Puoi creare una pagina in qualsiasi categoria tu voglia. Sto optando per la compagnia / organizzazione, senza una ragione particolare.

2. I prossimi passi visualizzati da Facebook sono facoltativi e possono essere saltati.

3. Quindi, vai al sito web degli sviluppatori di Facebook.

• In alto a destra, passa con il mouse su "Le mie app " e quindi fai clic su " Aggiungi una nuova app " dal menu a discesa.

• Fai clic su " Impostazioni di base " quando Facebook ti chiede di scegliere una piattaforma.

4. Compila i dettagli per il nome dell'app e l'indirizzo email di contatto.

• Seleziona " App per pagine " nella categoria.

• Clicca su " Crea ID app ".

5. Verrai indirizzato alla dashboard della tua app. Nella barra laterale, vai a " + Aggiungi prodotti " e seleziona " Messenger " facendo clic sul pulsante " Inizia ".

6. Seleziona " Imposta Webhook ".

7. Compila i campi obbligatori, sostituendo "URL di richiamata" con l'URL dell'app Heroku, Verifica token con il token utilizzato nel file index.js e seleziona i seguenti campi di abbonamento:

• message_deliveries

• messaggi

• message_optins

• messaging_postbacks

Nota: assicurati di aggiungere " / webhook " all'URL di richiamata in modo che index.js esegua la funzione richiesta quando Facebook tenta di eseguire il ping dell'URL, può verificare il "token di verifica".

8. Fare clic su " Verifica e salva ".

9. Nella sezione " Generazione di token ", fare clic su " Seleziona una pagina " e selezionare la pagina creata in precedenza.

Questo genererà un " token di accesso alla pagina ", salvarlo da qualche parte; ne avrai bisogno in seguito.

10. Successivamente, dovrai eseguire una query POST alla tua app, utilizzando il token di accesso alla pagina generato nell'ultimo passaggio. Questo può essere fatto facilmente nel Terminale. Basta eseguire il seguente comando, sostituendo PAGE_ACCESS_TOKEN con il token di accesso alla pagina che hai generato .

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

Dovresti ricevere una risposta "positiva" nel terminale.

Più installazione di Heroku

Sì, non abbiamo ancora finito. Non vicino.

1. Vai al sito Web di Heroku e accedi con il tuo ID e-mail.

2. Individua la tua app nella "dashboard" e fai clic su di essa.

3. Passare alla scheda Impostazioni.

4. Fare clic su " Reveal Config Vars "

5. Aggiungi PAGE_ACCESS_TOKEN come " config var " e fai clic su " Aggiungi ".

Codifica del Bot effettivo

Ora che abbiamo finito il lavoro, possiamo concentrarci su ciò che conta davvero: fare in modo che il bot risponda ai messaggi. Per iniziare, progetteremo un bot che rispecchi semplicemente i messaggi che riceve. Come risulta, questa semplice operazione richiede un considerevole numero di codice per funzionare.

1. Coding Listener dei messaggi

Prima che il bot possa richiamare il messaggio, deve essere in grado di ascoltare i messaggi. Facciamolo prima.

Nel file index.js, aggiungi il seguente codice:

[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]

Cosa fa questa funzione, controlla i messaggi ricevuti e poi controlla se c'è del testo nel messaggio. Se trova il testo nel messaggio ricevuto, chiama la funzione sendMessage (mostrata in seguito), passando l'ID del mittente e il testo da inviare indietro. È importante capire i seguenti valori e cosa significano:

• event.message.text è il testo ricevuto nel messaggio. Ad esempio, se qualcuno invia il messaggio "Ciao" al nostro bot, il valore di event.message.text sarà "Ciao".

• event.sender.id è l'id della persona che ha inviato il messaggio al bot. Questo è richiesto in modo che il bot sappia a chi indirizzare la risposta.

2. Codifica della funzione sendMessage

Consente di codificare la funzione "sendMessage", ora.

[JS]

function sendMessage (recipientId, message) {
richiesta({
url: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metodo: 'POST',
json: {
destinatario: {id: destinatarioId},
messaggio: messaggio,
}
}, funzione (errore, risposta, corpo) {
se (errore) {
console.log ('Errore nell'invio del messaggio:', errore);
} else if (response.body.error) {
console.log ('Errore:', response.body.error);
}
});
};

[/ Js]

La funzione "sendMessage" richiede due parametri:

• recipientId

• Messaggio

L'ID destinatario è necessario affinché il messaggio possa essere indirizzato all'utente corretto.

Il messaggio è il testo effettivo che deve essere inviato nella risposta.

3. Spingendo le modifiche a Heroku

Se hai completato i passaggi precedenti, il tuo bot dovrebbe essere in grado di richiamare il testo ricevuto. Ma prima, devi trasferire le modifiche all'applicazione ospitata su Heroku. Per fare questo, seguire i passaggi indicati di seguito:

1. Avvia terminale.

2. Modificare la directory nella directory testbot
cd testbot

3. Procedere come segue:

• aggiungi git.

• Nota: c'è un "." Alla fine di "git add"

• git commit -m "Primo commit"

• git push heroku master

4. Ora invia un messaggio alla tua pagina e il bot ti rispedirà il messaggio.

Le risposte condizionali alias rendono il robot più intelligente

Possiamo utilizzare la corrispondenza del testo per consentire al nostro bot di Facebook Messenger di rispondere in base a determinate parole chiave speciali.

Per ottenere ciò, dobbiamo aggiungere un'altra funzione. Lo chiamo "ConditionalResponses", ma puoi scegliere il nome che preferisci.

1. Codifica della funzione conditionalResponses

[JS]

function conditionalResponses (recipientId, text) {
testo = testo || "";

var what = text.match (/ what / gi); // controlla se la stringa di testo contiene la parola "cosa"; ignorare il caso
varGadget-Info.com = text.match (/ beebom / gi); // controlla se la stringa di testo contiene la parola "beebom"; ignorare il caso
var who = text.match (/ who / gi); // controlla se la stringa di testo contiene la parola "who"; ignorare il caso
var you = text.match (/ you / gi); // controlla se la stringa di testo contiene la parola "tu"; ignorare il caso

// se il testo contiene sia "what" che "beebom", fai questo:

if (what! = null &&; Gadget-Info.com! = null) {
messaggio = {
testo: "Beebom è un sito Web che offre risorse tecnologiche.
}
sendMessage (recipientId, message);
ritorna vero;
}

// se il testo contiene sia "who" che "you", fai questo:
if (who! = null && you! = null) {
messaggio = {
testo: "Mi è stato chiesto di non discutere online della mia identità".
}
sendMessage (recipientId, message);
ritorna vero;
}

// se nulla corrisponde, restituisce false per continuare l'esecuzione della funzione interna.
restituisce falso;
};

[/ Js]

Nelle righe dalla 4 alla 7, abbiamo definito le variabili in base all'abbinamento della stringa ricevuta con determinate parole. La parte migliore dell'utilizzo di "text.match ()" è che utilizza le espressioni regolari (di solito chiamate regex, leggi di più qui). È un bene per noi, perché questo significa che finché una parte di una parola nel testo ricevuto corrisponde a una delle parole menzionate in text.match (), la variabile non sarà nulla. Questo significa che se il messaggio ricevuto era "Cos'è Beebom?", "Var what" e "var beebom" non saranno nulli, perché la parola "Cosa c'è" contiene la parola "cosa". Quindi siamo salvati dalla creazione di dichiarazioni extra per ogni variazione in cui qualcuno potrebbe dire "Cosa".

2. Modifica del listener dei messaggi

Abbiamo anche bisogno di modificare l'Listener dei messaggi che abbiamo codificato, per assicurarci che cerchi di abbinare anche il testo ricevuto alla funzione "conditionalResponses".

[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) {

// prima prova a verificare se il messaggio ricevuto si qualifica per la risposta condizionale.
if (! conditionalResponses (event.sender.id, event.message.text)) {

// se non lo fa, basta echo il messaggio ricevuto di nuovo al mittente.
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ Js]

I cambiamenti nell'ascoltatore potrebbero non sembrare molto drastici, ma i loro effetti sono sicuri. Ora, l'ascoltatore tenta prima di rispondere con le risposte condizionali e, se non c'è una condizione valida per il messaggio ricevuto, restituisce semplicemente all'utente il messaggio.

3. Spingendo le modifiche a Heroku

Prima di provare le nuove funzionalità, dovrai inserire il codice aggiornato nell'app ospitata su Heroku. Segui i passaggi sottostanti per fare ciò:

1. Avvia terminale.

2. Modificare la directory nella directory testbot
cd testbot

3. Procedere come segue:

• aggiungi git.

• Nota: c'è un "." Alla fine di "git add"

• git commit -m "Aggiunta di capacità condizionali"

• git push heroku master

4. Ora invia un messaggio alla tua pagina e il bot ti rispedirà il messaggio.

Ancora più funzionalità

Il nostro bot ora risponde a una piccola serie di comandi con risposte gradevoli e ben strutturate. Ma non è ancora molto utile. Facciamo qualche altra modifica al codice per rendere il nostro bot un software più " funzionale ". Potremo rinnovare molte funzioni e aggiungere un altro paio, quindi emozionatevi.

1. Modifica del listener dei messaggi

Il nostro ascoltatore di messaggi, in questa fase, funziona perfettamente. Tuttavia, non è molto ben formattato e se dovessimo continuare ad aumentare le istruzioni nidificate se aggiungere ulteriori " condition check ", diventerebbe rapidamente brutto da guardare, difficile da capire e lento nell'esecuzione. Non lo vogliamo, ora, vero? Facciamo dei cambiamenti.

Nota: c'è una riga di codice nel listener dei messaggi che legge "res.sendStatus (200)", questa riga invia a Facebook un codice di stato 200, indicando che la funzione è stata eseguita correttamente. Secondo la documentazione di Facebook, Facebook attende un massimo di 20 secondi per ricevere uno stato 200, prima che decida che il messaggio non è passato e interrompe l'esecuzione del codice.

Il nostro nuovo listener di messaggi ha questo aspetto. Usiamo il comando " res.sendStatus (200) " per interrompere l'esecuzione della funzione non appena una condizione viene soddisfatta ed eseguita.

[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) {

// prima controlla il testo del messaggio contro le condizioni di introResponse
if (introResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// per mancanza di un nome migliore, l'ho chiamato newResponse: p; controlla questo dopo
else if (newResponse (event.sender.id, event.message.text)) {
res.sendStatus (200);
}

// else, rispondi semplicemente al messaggio originale
altro {
// sostituisce echo con una lista di comandi valida
sendMessage (event.sender.id, {text: "Echo:" + event.message.text});
}
}
}
res.sendStatus (200);
});

[/ Js]

2. Codifica della nuova funzione Risposta

Il nostro listener di messaggi ora controlla il testo del messaggio rispetto a una serie di condizioni in "newResponse", ma prima dobbiamo codificare la funzione newResponse. Utilizzeremo questa funzione per verificare se l'utente ha richiesto suggerimenti di articoli dal sito Web di Google Info, ha cercato il termine di ricerca sul sito Web e ha presentato il collegamento all'utente. Ancora una volta, useremo le espressioni regolari per abbinare il testo con parole chiave specifiche.

[JS]

function newResponse (recipientId, text) {
testo = testo || "";
var suggerisce = 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);

// controlla se l'utente sta chiedendo suggerimenti per gli articoli
if (suggerisci! = null && article! = null) {
var query = "";
// se i suggerimenti degli articoli vengono interrogati, controlla l'argomento che l'utente sta cercando
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);
ritorna vero
}
restituisce falso;
};

[/ Js]

Stiamo utilizzando un'altra funzione personalizzata chiamata "sendButtonMessage" per inviare il messaggio nel caso in cui l'utente stia chiedendo suggerimenti per gli articoli. Lo creeremo in seguito.

3. Codifica della funzione sendButtonMessage

La funzione sendButtonMessage accetta due parametri, un ID destinatario e una query. L'ID del destinatario viene utilizzato per identificare l'utente a cui il messaggio deve essere inviato e la query viene utilizzata per identificare l'argomento su cui l'utente desidera i suggerimenti degli articoli.

[JS]

function sendButtonMessage (recipientId, query) {
var messageData = {
destinatario: {
id: destinatarioId
},
Messaggio: {
allegato: {
tipo: "modello",
carico utile: {
template_type: "button",
testo: "Questo è quello che ho trovato per" + query,
pulsanti: [{
digitare: "web_url",
url: "//www.beebom.com/?s="+query,
titolo: "Beebom:" + query
}]
}
}
}
};

callSendAPI (messageData);
}

[/ Js]

Ancora una volta, stiamo usando una funzione personalizzata; questa volta per inviare il messaggio finale, con i collegamenti dell'articolo, all'utente. La funzione è, in molti modi, simile alla funzione "sendMessage" che abbiamo codificato prima, ma è più generica nel modo in cui prende i dati del messaggio, che ci si addice, perché i nostri dati dei messaggi cambiano con la query che l'utente fa.

4. Codifica della funzione callSendAPI

La funzione "callSendAPI" accetta un singolo parametro, "messageData" . Questo parametro contiene l'intero messaggio, formattato correttamente secondo le regole di Facebook, in modo che il messenger possa visualizzarlo correttamente all'utente.

[JS]

function callSendAPI (messageData) {
richiesta({
uri: '//graph.facebook.com/v2.6/me/messages',
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
metodo: 'POST',
json: messageData

}, funzione (errore, risposta, corpo) {
if (! error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;

console.log ("Messaggio generico inviato con successo con id% s al destinatario% s",
messageId, recipientId);
} altro {
console.error ("Impossibile inviare il messaggio.");
Console.Error (risposta);
Console.Error (errore);
}
});
}

[/ Js]

5. Spingendo le modifiche a Heroku

Siamo all'ultimo passo verso la realizzazione del nostro robot aggiornato. Dobbiamo solo trasferire tutte le modifiche al codice in Heroku. Il processo è lo stesso di prima ed è descritto di seguito:

1. Avvia terminale.

2. Modificare la directory nella directory testbot .
cd testbot

3. Effettuare quanto segue:

• aggiungi git.

• Nota: c'è un "." Alla fine di quel comando.

• git commit -m "miglioramento dei controlli delle condizioni e della formattazione"

• git push heroku master

4. Ora invia un messaggio come "Suggerisci un articolo su Android" o "Beebom, suggeriscimi qualsiasi articolo sull'argomento Android"; e il bot invierà un messaggio ben formattato con un link che puoi toccare per aprire gli articoli relativi alla tua query.

Scava più a fondo

Ora che sai come iniziare a sviluppare i robot di messaggistica di Facebook, consulta la documentazione di Facebook su come sviluppare i robot di messaggistica di Facebook. Mentre la documentazione non è buona per i principianti, non sei più un principiante. Dovresti controllare la documentazione ufficiale e cercare di capire come rendere il tuo robot ancora più intelligente. Teaser: puoi anche inviare messaggi con immagini e pulsanti! È anche possibile utilizzare servizi come Wit.ai e Api.ai per codificare il tuo bot e quindi integrarlo con Facebook, ma nei miei deboli tentativi di utilizzare quei servizi, Wit.ai non funziona troppo bene e Api.ai ha una curva di apprendimento acuta per i principianti.

Hai mai sviluppato un bot di Facebook Messenger? Se hai, come hai fatto a svilupparlo e cosa può fare? Hai usato servizi come Wit.ai e Api.ai per creare il tuo bot? Se non hai mai provato le mani sulla codifica di un bot, vai a sviluppare il tuo bot di Facebook Messenger, rendilo più intelligente e migliore e facci sapere della tua esperienza nei commenti qui sotto.