Plataforma de Messenger

Ejemplo de la experiencia de Original Coast Clothing con Messenger

Original Coast Clothing (OC) es una marca de indumentaria ficticia que creamos para exhibir las funciones clave de la plataforma de Messenger. En esta guía te mostramos cómo descargar el código para esta app de ejemplo en tu entorno local o servidor remoto. De esta manera, podrás obtener más información sobre las funciones que ofrece Messenger.

Para que puedas mostrar la experiencia completa de Messenger con varios puntos de entrada, nuestra empresa ficticia incluye las siguientes características:

Funciones de la plataforma

Esta app de ejemplo utiliza las siguientes funciones:

Implementación de la experiencia en Messenger

Al finalizar esta guía, la totalidad de la app de Messenger estará funcionando en tu servidor y se responderán los mensajes de tu página de prueba.

Antes de empezar

Deberás contar con lo siguiente:

Si tienes entornos de desarrollo, preparación y producción separados, cada uno de estos deberá tener su propia app de Meta y página de Facebook.

Configuración del entorno local

Para ejecutar la app de ejemplo en tu entorno local, necesitarás NodeJS 10.x o posterior.

Paso 1: Clona el repositorio de la app de ejemplo

Clona el repositorio original-coast-clothing en tu equipo local.

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

Paso 2: Instala las dependencias del código

yarn install

Paso 3: Obtén una dirección externa

Para recibir mensajes, debes poder obtener los webhooks entrantes de nuestros servidores.

Si necesitas una dirección externa, usa ngrok, ya que te proporcionará una dirección https externa que funcionará de túnel a la app que ejecuta NodeJS.

Instala ngrok

npm install -g ngrok

Solicita un túnel al servidor local con el puerto de tu preferencia

ngrok http 3000

En la pantalla debería aparecer el estado 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

Toma nota de la URL https del servidor externo que se envía a tu equipo local. En el ejemplo anterior, es https://1c3b838deacb.ngrok.io.

Paso 4: Configura webhooks y el perfil de Messenger

Copia la plantilla del entorno de ejemplo en tu app

mv .sample.env .env

Agrega los valores de entorno

Edita el archivo .env y agrega los valores de tu identificador de la app de Facebook, el identificador de la app de Facebook, el token de acceso a la página y la clave secreta de la app. Define el valor de VERIFY_TOKEN con una cadena aleatoria. Tu app la utilizará para validar las llamadas a las API.

Paso 5: Ejecuta tu app

node app.js

Ahora deberías poder acceder a la app en tu navegador en http://localhost:3000.

Paso 6: Configura tu app

Ejecuta el siguiente comando para configurar la suscripción de webhooks de tu app y el perfil de la página de Messenger. Ten en cuenta que debes usar el valor de VERIFY_TOKEN agregado al archivo .env.

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

Paso 7. Prueba la configuración de tu app

Envía un mensaje a la página desde Facebook o Messenger; si tu webhook recibe un evento, significa que configuraste la app de forma correcta.

Realiza un cambio en el código

Edita el archivo locales/en_US.json, reemplaza el mensaje de "get_started.welcome" y cambia "Hola, {{userFirstName}}. Te damos la bienvenida a Original Coast Clothing..." por otra cosa.

Vuelve a la primera terminal, donde deberás reiniciar el servidor NodeJS cada vez que necesites cambiar el código. Presiona Ctrl + C para detener el servidor y vuelve a ejecutarlo para cargar otra vez el nuevo código.

node app.js

Abre Messenger y envía "Hola" a tu página para asegurarte de que recibes el nuevo mensaje.

Configuración de Heroku

Puedes usar una instancia de Heroku para alojar el entorno de producción o preparación en la página o el sitio web comercial.

Paso 1: Crea una app de 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

Paso 2: Implementa el código en Heroku

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

Paso 3: Define las variables de entorno

Encuentra las variables de configuración de tu app en el panel de apps de Heroku debajo de Configuración. Agrega los valores de tu identificador de la app de Facebook, el identificador de la página de Facebook, el token de acceso a la página y la clave secreta de la app, y crea un VERIFY_TOKEN.

Paso 4: Configura webhooks y el perfil de Messenger

Ahora deberías poder acceder a tu app. Usa el VERIFY_TOKEN que creaste como variables de configuración y llama al punto de conexión /profile.

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

Opcional La URL anterior devolverá los identificadores de los perfiles cargados. Dado que se conservan en la memoria, deberás agregar aquellos identificadores devueltos como variables de configuración para que permanezcan al volver a cargar.

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

Paso 5: Prueba tu app

Envía un mensaje a la página desde Facebook o en Messenger. Si el webhook recibe un evento, terminaste de configurar tu app.

Solución de problemas

Nueva ejecución local de la app

Una vez que se ejecute ngrok, se proporcionará una nueva dirección externa. Actualiza la dirección APP_URL en el archivo .env y, luego, vuelve a ejecutar el servidor NodeJS.

node app.js

Actualiza la dirección de webhook en la configuración de la app de Facebook; para ello, visita http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>.

La página me responde, pero no a los demás

Es posible que la app de Facebook continúe en el modo de desarrollo. Puedes agregar personas como evaluadoras de la app. Si aceptan la solicitud, la app podrá enviarles mensajes. Una vez que tengas todo listo, podrás solicitar el permiso pages_messaging para responderle a cualquier persona.

Más información