Piattaforma Messenger

Esempio di esperienza su Messenger con Original Coast Clothing

Original Coast Clothing (OCC) è un brand di abbigliamento immaginario che abbiamo creato per mostrare le funzioni chiave della piattaforma Messenger. Questa guida mostra come scaricare il codice per questa app di esempio nel tuo ambiente locale o su server remoto e scoprire maggiori informazioni sulle funzioni che Messenger ha da offrire.

Per illustrare l'esperienza su Messenger completa con diversi punti di accesso, la nostra azienda di fantasia presenta le seguenti funzioni:

Funzioni della piattaforma

Questa app di esempio utilizza le seguenti funzioni:

Distribuzione dell'esperienza su Messenger

Raggiunta la fine di questa guida, avrai un'app completa di Messenger in esecuzione sul tuo server, che risponderà ai messaggi dalla tua Pagina di test.

Prima di iniziare

Ecco cosa ti servirà:

Se disponi di ambienti di sviluppo, staging e produzione separati, ognuno di essi avrà bisogno della propria app di Meta e Pagina Facebook.

Configurazione dell'ambiente locale

Per eseguire l'app di esempio nel tuo ambiente locale, avrai bisogno di NodeJS 10.x o versioni successive.

Passaggio 1: clonare il repository dell'app di esempio

Clona il repository original-coast-clothing sul computer locale.

git clone https://github.com/fbsamples/original-coast-clothing.git
cd original-coast-clothing

Passaggio 2: installare le dipendenze del codice

yarn install

Passaggio 3: ottenere un indirizzo esterno

Per ricevere messaggi, devi essere in grado di ricevere webhook in arrivo dai nostri server.

Se hai bisogno di un indirizzo esterno, usa ngrok: fornirà un indirizzo https esterno che eseguirà il tunneling nella tua app NodeJS.

Installa ngrok.

npm install -g ngrok

Richiedi un tunnel al server locale con la porta preferita.

ngrok http 3000

Sulla schermata dovrebbe apparire lo stato ngrok:

Session Status                online
Account                       Redacted (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

Prendi nota dell'URL https del server esterno che esegue l'inoltro al computer locale. Nell'esempio precedente, è https://1c3b838deacb.ngrok.io.

Passaggio 4: impostare webhook e profilo Messenger

Copia il modello di ambiente di esempio nella tua app.

mv .sample.env .env

Aggiungi i valori dell'ambiente.

Modifica il file .env aggiungendo i valori per l'ID app Facebook, l'ID della Pagina Facebook, il token d'accesso della Pagina e la chiave segreta. Imposta il valore di VERIFY_TOKEN su una stringa casuale. La tua app lo userà per convalidare le chiamate all'API.

Passaggio 5: eseguire l'app

node app.js

Ora dovresti essere in grado di accedere all'app nel browser all'indirizzo http://localhost:3000.

Passaggio 6: configurare l'app

Esegui il seguente comando per configurare le impostazioni di iscrizione ai webhook per la tua app e per il profilo Messenger della Pagina. Devi utilizzare il valore per VERIFY_TOKEN aggiunto nel file .env.

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

Passaggio 7. Testare la configurazione dell'app

Invia un messaggio alla tua Pagina da Facebook o in Messenger; se il tuo webhook riceve un evento, la configurazione dell'app è completata.

Apportare una modifica al codice

Modifichiamo il file locales/en_US.json, sostituendo il messaggio in get_started.welcome e cambiandolo da "Hi {{userFirstName}}! Welcome to Original Coast Clothing..." in qualcos'altro.

Tornando al primo terminale, ogni volta che modifichi il codice, devi riavviare il server NodeJS. Arrestiamo il server con Ctrl-C ed eseguiamolo di nuovo, per ricaricare il nuovo codice.

node app.js

Apri il tuo Messenger e invia alla tua Pagina la parola "Hi": dovresti ricevere il nuovo messaggio.

Configurazione di Heroku

Un'istanza Heroku può essere utile per ospitare l'ambiente di produzione o di staging per la tua app business o per il sito web.

Passaggio 1: Creare un'app Heroku

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

Passaggio 2: Distribuire il codice su Heroku

heroku git:remote -a YOUR-APP-NAME
git push heroku master

Passaggio 3: Impostare le variabili ambientali

Trova le Config Vars dell'app nella dashboard gestione app di Heroku in Impostazioni. Aggiungi i valori per l'ID app Facebook, l'ID della Pagina Facebook, il token d'accesso della Pagina e la chiave segreta, quindi crea un VERIFY_TOKEN.

Passaggio 4: Impostare webhook e profilo Messenger

Ora dovresti essere in grado di accedere all'app. Usa il VERIFY_TOKEN che hai creato come config vars e chiama l'endpoint /profile.

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

Facoltativo L'URL sopra riportato restituirà gli ID dei profili caricati. Dal momento che sono conservati in memoria, devi aggiungere gli ID restituiti come Config Vars, in modo che rimangano anche dopo essere stati ricaricati.

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

Passaggio 5: Testare l'app

Invia un messaggio alla tua Pagina da Facebook o in Messenger. Se il tuo webhook riceve un evento, la configurazione dell'app è completata.

Risoluzione dei problemi

Riesecuzione dell'app localmente

Dopo l'esecuzione di ngrok, verrà fornito un nuovo indirizzo esterno. Aggiorna l'indirizzo APP_URL sul file .env, quindi esegui il server NodeJS.

node app.js

Aggiorna l'indirizzo webhook nelle impostazioni dell'app Facebook visitando http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>

La mia Pagina risponde solo a me, non ad altri utenti

L'app Facebook è probabilmente ancora in modalità sviluppo. Puoi aggiungere un utente come tester dell'app; se accetta, l'app potrà inviargli messaggi. Quando è tutto pronto, puoi richiedere l'autorizzazione pages_messaging per poter rispondere a chiunque.

Per saperne di più