Plateforme Messenger

Exemple d’expérience Messenger avec Original Coast Clothing

Original Coast Clothing (OCC) est une marque de vêtements fictive créée pour présenter les principales fonctionnalités de la plateforme Messenger. Ce guide vous explique comment télécharger le code de cette application fictive dans votre environnement local ou serveur distant, afin que vous puissiez explorer les fonctionnalités de Messenger.

Notre entreprise fictive propose des fonctionnalités qui vous permettront de découvrir tous les aspects de Messenger, à partir de divers points d’entrée :

Fonctionnalités de la plateforme

Cette application fictive utilise les fonctionnalités suivantes :

Déploiement de cette expérience sur Messenger

À la fin de ce guide, vous aurez une application Messenger complète qui fonctionnera sur votre serveur et répondra aux messages de votre Page de test.

Avant de commencer

Vous aurez besoin des éléments suivants :

Si vous disposez d’environnements de développement, de simulation et de production distincts, chaque environnement aura besoin de ses propres application Meta et Page Facebook.

Configuration de l’environnement local

Pour exécuter l’application fictive dans votre environnement local, vous aurez besoin de NodeJS 10.X ou version ultérieure.

Étape 1. Cloner le dépôt de l’application fictive

Clonez le dépôt original-coast-clothing sur votre machine locale.

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

Étape 2. Installer les dépendances de code

yarn install

Étape 3. Obtenir une adresse externe

Afin de recevoir des messages, vous devez pouvoir récupérer les webhooks entrants de nos serveurs.

Si vous avez besoin d’une adresse externe, utilisez ngrok : il fournira une adresse https externe qui servira de tunnel au travers de votre application NodeJS.

Installez ngrok

npm install -g ngrok

Demandez un tunnel à votre serveur local avec le port souhaité

ngrok http 3000

L’écran devrait afficher le statut 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

Notez l’URL https du serveur externe effectuant le transfert vers votre machine locale. Dans l’exemple précédent, il s’agit de https://1c3b838deacb.ngrok.io.

Étape 4. Définir les webhooks et le profil Messenger

Copiez l’exemple de modèle d’environnement dans votre application

mv .sample.env .env

Ajoutez les valeurs de votre environnement

Modifiez le fichier .env en ajoutant les valeurs suivantes : votre ID d’app Facebook, l’ID de votre Page Facebook, le token d’accès de votre Page et la clé secrète de votre application. Choisissez une valeur quelconque pour le paramètre VERIFY_TOKEN. Votre application l’utilisera pour valider les appels d’API.

Étape 5. Exécuter l’application

node app.js

Vous devriez maintenant pouvoir accéder à l’application dans votre navigateur à partir de http://localhost:3000

Étape 6. Configurer l’application

Exécutez la commande ci-dessous pour configurer les paramètres d’abonnement aux webhooks de votre application et le profil Messenger de la Page. Notez que vous devez utiliser la valeur du paramètre VERIFY_TOKEN ajouté dans le fichier .env.

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

Étape 7. Tester la configuration de votre application

Envoyez un message à votre Page à partir de Facebook ou de Messenger : si votre webhook reçoit un évènement, votre application est correctement configurée !

Modifier le code

Ouvrez le fichier locales/en_US.json et remplacez le message sous get_started.welcome, « Salut {{userFirstName}} ! Bienvenue chez Original Coast Clothing... » par un autre message.

De retour sur le premier terminal, chaque fois que vous modifiez le code, vous devrez redémarrer le serveur NodeJS. Arrêtez le serveur avec Ctrl-C et exécutez-le une nouvelle fois pour recharger le nouveau code.

node app.js

Ouvrez votre Messenger et envoyez à votre Page le mot « Salut » ; vous devriez recevoir le nouveau message.

Configuration Heroku

Une instance Heroku peut être utilisée pour héberger l’environnement de production ou de simulation pour le site web ou l’application de votre entreprise.

Étape 1. Créer une application 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

Étape 2. Déployer le code sur Heroku

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

Étape 3. Configurer les variables de l’environnement

Dans le tableau de bord de votre application Heroku, sous Paramètres, repérez les variables de configuration de votre application. Ajoutez les valeurs suivantes : votre ID d’app Facebook, l’ID de votre Page Facebook, le token d’accès de votre Page et la clé secrète de votre application. Créez ensuite un VERIFY_TOKEN.

Étape 4. Définir les webhooks et le profil Messenger

Vous devriez maintenant pouvoir accéder à votre application. Utilisez le VERIFY_TOKEN que vous avez créé en tant que variables de configuration et appelez le point de terminaison /profile.

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

Facultatif L’URL ci-dessus renvoie les identifiants des personas importées. Puisqu’elles sont conservées en mémoire, vous devez ajouter les identifiants renvoyés en tant que variables de configuration, afin qu’elles puissent être maintenues après un rechargement.

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

Étape 5. Tester l’application

Envoyez un message à votre Page à partir de Facebook ou de Messenger. Si votre webhook reçoit un évènement, votre application est correctement configurée !

Résolution des problèmes

Redémarrage de l’application en local

Après l’exécution de ngrok, vous recevrez une nouvelle adresse externe. Mettez à jour l’adresse APP_URL du fichier .env, puis exécutez le serveur NodeJS.

node app.js

Mettez à jour l’adresse webhook dans les paramètres de l’application Facebook en consultant http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>.

Ma Page ne répond à personne d’autre que moi

L’application Facebook est probablement encore en mode développement. Vous pouvez ajouter une personne en tant que testeur de l’application. Si elle accepte, l’application pourra lui envoyer un message. Dès que cela est fait, vous pouvez demander l’autorisation pages_messaging afin de pouvoir répondre à tout le monde.

En savoir plus