Plataforma de Messenger

Experiencia de ejemplo de Messenger con Original Coast Clothing

Original Coast Clothing (OCC) es una marca de ropa ficticia creada para mostrar las principales funciones de la plataforma de Messenger. En esta guía se muestra cómo descargar el código de esta aplicación de ejemplo en tu entorno local o servidor remoto para obtener más información sobre las funciones que ofrece Messenger.

Para mostrar la experiencia de Messenger completa con varios puntos de acceso, nuestra empresa ficticia tiene las funciones siguientes:

Funciones de la plataforma

Esta aplicación de ejemplo utiliza las funciones siguientes:

Implementar esta experiencia en Messenger

Al finalizar esta guía, tendrás una aplicación de Messenger completa ejecutándose en el servidor y respondiendo mensajes desde tu página de prueba.

Antes de empezar

Necesitarás lo siguiente:

Si tienes entornos independientes para el desarrollo, el almacenamiento provisional y la producción, cada uno de ellos necesitará su propia página de Facebook y aplicación de Meta.

Configuración del entorno local

Para ejecutar la aplicación de ejemplo en el entorno local, necesitarás NodeJS 10.x o una versión posterior.

Paso 1. Clonar el repositorio de la aplicación de ejemplo

Clona el repositorio original-coast-clothing en la máquina local.

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

Paso 2. Instalar las dependencias del código

yarn install

Paso 3. Obtener una dirección externa

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

Si necesitas una dirección externa, utiliza ngrok, ya que proporcionará una dirección HTTPS externa que generará un túnel hasta la aplicación de NodeJS.

Instalar ngrok

npm install -g ngrok

Solicitar un túnel al servidor local con tu puerto preferido

ngrok http 3000

En la pantalla debería aparecer el estado de 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 reenvía a tu máquina local. En el ejemplo anterior es https://1c3b838deacb.ngrok.io.

Paso 4. Definir los webhooks y el perfil de Messenger

Copiar la plantilla del entorno de ejemplo en la aplicación

mv .sample.env .env

Añadir los valores del entorno

Edita el archivo .env para añadir los valores del identificador de la aplicación de Facebook, el identificador de la página de Facebook, el identificador de acceso a la página y la clave secreta de la aplicación. Establece el valor de VERIFY_TOKEN en una cadena aleatoria. La aplicación usará esta cadena para validar las llamadas a la API.

Paso 5. Ejecutar la aplicación

node app.js

Ahora deberías poder acceder a la aplicación desde tu navegador en http://localhost:3000.

Paso 6. Configurar la aplicación

Ejecuta el comando siguiente a fin de definir la configuración de suscripción de webhooks para la aplicación y el perfil de Messenger de la página. Ten en cuenta que debes utilizar el valor para VERIFY_TOKEN añadido en el archivo .env.

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

Paso 7. Probar la configuración de la aplicación

Envía un mensaje a tu página desde Facebook o en Messenger. Si el webhook recibe un evento, has completado correctamente la configuración de la aplicación.

Realizar un cambio en el código

Vamos a editar el archivo locales/en_US.json. Para ello, reemplazaremos el mensaje en get_started.welcome y lo cambiaremos de “Hi {{userFirstName}}! Welcome to Original Coast Clothing..." por otra cosa.

Volvemos al primer terminal. Cada vez que cambies el código, tendrás que reiniciar el servidor de NodeJS. Detenemos el servidor con Ctrl-C y volvemos a ejecutarlo para cargar el código nuevo.

node app.js

Abre Messenger y envía un mensaje a tu página con la palabra “Hi”. Deberías recibir el nuevo mensaje.

Configuración de Heroku

Una instancia de Heroku puede ser útil para hospedar el entorno de producción o almacenamiento provisional de un sitio web o una aplicación empresarial.

Paso 1. Crear una aplicación 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. Implementar el código en Heroku

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

Paso 3. Establecer las variables de entorno

Busca las variables de configuración de la aplicación en la sección “Settings” (Configuración) del panel de aplicaciones de Heroku. Añade los valores del identificador de la aplicación de Facebook, el identificador de la página de Facebook, el identificador de acceso a la página y la clave secreta de la aplicación. Asimismo, crea un objeto VERIFY_TOKEN.

Paso 4. Definir los webhooks y el perfil de Messenger

Ya deberías poder acceder a la aplicación. Utiliza el objeto VERIFY_TOKEN que has creado para las variables de configuración y llama al extremo /profile.

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

Opcional La URL anterior devolverá los identificadores de las identidades subidas. Dado que se conservan en la memoria, debes añadir los identificadores devueltos como variables de configuración, de modo que se puedan mantener después de volver a cargarse.

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. Probar la aplicación

Envía un mensaje a tu página desde Facebook o en Messenger. Si el webhook recibe un evento, has completado correctamente la configuración de la aplicación.

Solución de problemas

Volver a ejecutar la aplicación localmente

Después de ejecutar ngrok, se proporcionará una nueva dirección externa. Actualiza la dirección APP_URL en el archivo .env y, luego, ejecuta el servidor NodeJS.

node app.js

Visita http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN> para actualizar la dirección del webhook en la configuración de la aplicación de Facebook.

Mi página solo me responde a mí y a nadie más

Es posible que la aplicación de Facebook aún esté en modo de desarrollo. Puedes añadir a usuarios como evaluadores de la aplicación y, si aceptan, la aplicación les podrá enviar mensajes. Cuando estés listo, puedes solicitar el permiso pages_messaging para poder responder a cualquier persona.

Más información