Piattaforma Messenger

Esempio di esperienza con Messenger API con supporto per Instagram - Original Coast Clothing

Original Coast Clothing (OC) è un brand di abbigliamento immaginario creato per mostrare le funzioni chiave della piattaforma Instagram che consentono di offrire un'esperienza utente ottimale. Ispirandosi a questa demo, chiunque può creare un'esperienza con Messenger API con supporto per Instagram eccezionale che sfrutti sia l'automazione sia l'assistenza clienti in tempo reale. Sono disponibili codice open source per l'app e una guida su come distribuire l'esperienza nell'ambiente locale o su un server remoto. In più, è disponibile anche un esempio di esperienza con Messenger.

Provala subito inviando un messaggio a @originalcoastclothing o pubblicando un commento su un post.

Funzioni della piattaforma

Questa esperienza sfrutta le funzioni della piattaforma seguenti. Se decidi di distribuire l'esperienza sulla tua Pagina, il codice le userà tutte:

Distribuisci questa esperienza su Instagram

Raggiunta la fine di questa guida, avrai un'app completa di Instagram in esecuzione sul tuo server, che risponderà ai messaggi dal tuo account.

Il codice grazie al quale è possibile fornire questa esperienza è open source. Chiunque può facilmente iniziare a sviluppare una fantastica esperienza di messaggistica.

Il codice è rilasciato ai sensi della licenza BSD e ciò ti consente di usarlo liberamente per le tue esigenze. Per ulteriore riferimento, è disponibile su GitHub.

Requisiti per la distribuzione di un'app Instagram

Procedura di configurazione

L'obiettivo di questa sezione è raccogliere tutti i token d'accesso e gli ID necessari affinché l'app Instagram invii e riceva messaggi correttamente. Prima di iniziare, assicurati di soddisfare tutti i requisiti indicati in precedenza. A questo punto dovresti avere una Pagina, un'app Facebook registrata e un account Instagram per professionisti.

Se hai appena creato una nuova app Facebook, probabilmente è in modalità sviluppo. Le app in questa modalità possono solo inviare messaggi agli utenti connessi all'app (amministratori, sviluppatori e tester). Puoi continuare con questa guida in questa modalità, ma una volta che la tua app sarà pronta per essere pubblicata, dovrà essere sottoposta alla procedura di analisi per ottenere l'autorizzazione instagram_manage_messages. Per maggiori informazioni, consulta Analisi dell'app.

  1. Configura la tua integrazione Instagram seguendo le indicazioni fornite nella documentazione Primi passi.
  2. Aggiungi alcuni account di prova di Instagram che userai per testare l'esperienza.

A questo punto dovresti avere i seguenti elementi

  • ID app
  • Chiave segreta
  • ID della Pagina
  • Token d'accesso della Pagina
  • Account Instagram collegato alla Pagina
  • Uno o più account Instagram registrati come account di prova

Installazione

Ecco cosa ti servirà:

  • Node 10.x o versioni successive
  • Un server per il codice. Le opzioni includono:
    • Servizio di tunneling locale come ngrok
    • Un servizio di server remoto come Heroku o Glitch
    • Il tuo server web

Distribuzione con un clic tramite Heroku o Glitch

L'esperienza può essere distribuita in modo automatico su Heroku o Glitch usando i seguenti pulsanti. Ti verrà richiesto di immettere le variabili ambientali necessarie per completare la configurazione.

Distribuzione su HerokuDistribuzione su Glitch

Distribuzione locale tramite ngrok

Un servizio di tunneling espone il tuo server web locale a un URL esterno raggiungibile mediante i webhook di Facebook. Esistono diversi servizi di questo tipo. In questo esempio, useremo ngrok.

1. Clonazione del repository

Clona il repository sulla tua macchina locale:

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

2. Installazione del servizio di tunneling

Se non è stato ancora installato, installa ngrok tramite download o tramite la riga di comando:

$ npm install -g ngrok

Nella directory di questo repository, richiedi un tunnel al server locale con la porta che preferisci

$ ngrok http 3000

La schermata dovrebbe mostrare lo stato di ngrok:

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln 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

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

3. Installazione delle dipendenze

Apri una nuova tab terminale, anche nella directory del repository.

$ npm install

In alternativa, puoi usare Yarn:

$ yarn install

4. Configurazione di un file .env

Copia il file .sample.env su .env

$ cp .sample.env .env

Modifica il file .env per aggiungere tutti i valori per app e Pagina.

5. Esecuzione dell'app in locale

$ node app.js

A questo punto dovresti poter accedere alla pagina predefinita dell'app nel tuo browser all'indirizzo http://localhost:3000

Verifica di poter accedere all'app anche tramite l'URL esterno del passaggio 2.

Distribuzione con Heroku

1. Clonazione del repository

Clona il repository sulla tua macchina locale:

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

2. Installazione della CLI Heroku

Se la directory non è ancora un repository git, creane uno:

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"

3. Installazione della CLI Heroku

Se non l'hai già fatto, scarica e installa la CLI Heroku

4. Creazione di un'app dalla CLI

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

Prendi nota del nome assegnato alla tua app. In questo esempio, il nome è mystic-wind-83.

5. Impostazione delle variabili ambientali

Nella Dashboard gestione app di Heroku, trova la tua app e imposta le variabili di configurazione seguendo i commenti nel file .sample.env

In alternativa, puoi impostare le variabili ambientali da riga di comando in questo modo:

$ heroku config:set PAGE_ID=XXXX

6. Distribuzione del codice

$ git push heroku master

7. Visualizzazione dell'output del registro

$ heroku logs --tail

Collega il tuo webhook

Ora che il tuo server è in esecuzione, l'endpoint del webhook si trova nel percorso /webhook. Nell'esempio in alto con Heroku, questo sarebbe http://mystic-wind-83.herokuapp.com/webhook.

Configura il tuo webhook seguendo la [guida Webhook della Piattaforma Messenger](https://developers.facebook.com/docs/messenger-platform/webhooks)

Dopo la convalida dell'iscrizione al webhook, attiva l'iscrizione ai seguenti eventi:

  • comments
  • messages
  • messaging_postbacks

Testa i webhook cliccando sul pulsante "Testa" accanto a ciascun evento per i quale hai attivato l'iscrizione. Dovresti vedere gli eventi test nell'output del registro del tuo server.

Verifica che la configurazione dell'app sia avvenuta correttamente

Mentre sei collegato a un account con il ruolo di "Tester di Instagram", prova a inviare un messaggio all'account Instagram collegato alla tua Pagina, oppure a lasciare un commento sotto un post.

Se visualizzi una risposta al tuo messaggio su Instagram, significa che la configurazione dell'app è avvenuta con successo. Ecco fatto!

Risoluzione dei problemi

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

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

Altri problemi

La guida presenta degli errori? Faccelo sapere inviando un ticket