Ejemplo de la experiencia con la compatibilidad de la API de Messenger con Instagram - Original Coast Clothing

Original Coast Clothing (OC) es una marca de indumentaria ficticia creada para exhibir las funciones clave de la plataforma de Instagram y brindar una experiencia de clientes asombrosa. Al utilizar esta demostración como fuente de inspiración, cualquier persona puede crear una experiencia atractiva de compatibilidad de la API de Messenger con Instagram, que ofrece automatización y servicio de atención al cliente en vivo. Se proporcionan código abierto para la app y una guía de cómo implementar la experiencia en tu entorno local o en tu servidor remoto. También hay un ejemplo de experiencia en Messenger complementario. Pruébalo enviando un mensaje a @originalcoastclothing o comentando una publicación.

Funciones de la plataforma

Esta experiencia utiliza las siguientes funciones de la plataforma. Si decides implementar la experiencia en tu página, el código las usará todas:

• Mensajes

  • Texto, imagen y vistas previas de enlaces
  • Plantillas genéricas
• Webhooks
• Respuestas rápidas
• Perfiles de usuario
• Respuestas privadas
• Mensajes para empezar una conversación

Implementar esta experiencia en Instagram

Al final de esta guía, tendrás una app de Instagram completa ejecutándose en tu servidor y respondiendo mensajes desde tu cuenta.

El código que se utiliza para esta experiencia es abierto. Cualquier persona puede comenzar a desarrollar con facilidad a fin de obtener una gran experiencia de mensajes.

El código se lanzó con licencia BSD, lo que te permite utilizarlo libremente según tus necesidades. En caso de que necesites consultar más referencias, el código se encuentra alojado en GitHub.

Requisitos para implementar la app de Instagram

• Una cuenta profesional de Instagram (ya sea de creador o comercial).
• Una página de Facebookconectada a esa cuenta de Instagram. Asegúrate de tener una página de Facebook, ya que representa tu cuenta profesional de Instagram cuando te conectes con otros usuarios. Para crear una nueva página, visita https://www.facebook.com/pages/create. También puedes configurar una página de prueba para comenzar.
• Una cuenta de desarrollador con la que se puedan realizar tareas en la página. Una cuenta de desarrollador te permite crear apps nuevas, que son el centro de todas las integraciones de Facebook. Para registrarte como desarrollador, ve al sitio web para desarrolladores de Facebook y haz clic en el botón "Empezar".
• Una app de Facebook con la configuración básica establecida. Para crear una nueva app, visita https://developers.facebook.com/ y haz clic en Agregar app.

Pasos de configuración

El objetivo de esta sección es recopilar todos los identificadores y tokens de acceso necesarios para que la app de Instagram envíe y reciba mensajes de manera satisfactoria. Antes de empezar, asegúrate de cumplir todos los requisitos enumerados anteriormente. En este momento, deberías tener una página, una app de Facebook registrada y una cuenta profesional de Instagram.

Si acabas de crear una nueva app de Facebook, probablemente se encuentre en modo de desarrollo. Ten en cuenta que las apps que están en este modo solo tienen permitido enviar mensajes a las personas conectadas a la app (administradores, desarrolladores y evaluadores). Puedes continuar con esta guía en este modo, pero una vez que la app esté lista para ser publicada, esta deberá someterse al proceso de revisión de apps a fin de recibir el permiso instagram_manage_messages. Para obtener más información, consulta la revisión de apps

1. Configura la integración de Instagram según la documentación de primeros pasos.
2. Agrega algunas cuentas de prueba de Instagram que usarás para probar la experiencia.

En este momento, debes contar con los siguientes elementos:

• Identificador de la app
• Clave secreta de la app
• Identificador de la página
• Token de acceso a la página
• Cuenta de Instagram conectada a la página
• Cuentas de Instagram registradas como cuentas de prueba

Instalación

Necesitarás lo siguiente:

• Versión del nodo 10.x o posterior
• Un servidor para tu código. Tienes estas opciones:

  • Servicio de tunelización local, como ngrok
  • Servicios de servidor remoto, como Heroku o Glitch
  • Tu propio servidor web

Implementación de un solo clic mediante Heroku o Glitch

La experiencia se puede implementar de manera automática en Heroku o Glitch con los siguientes botones. Se te solicitará ingresar las variables del entorno necesarias para completar la configuración.

Implementa de forma local mediante ngrok

Un servicio de tunelización que expone tu servidor web local a una URL local a la que pueden llegar los webhooks de Facebook. Existen muchos de estos servicios. En este ejemplo, usaremos ngrok.

1. Clona el repositorio

Clona el repositorio en tu equipo local:

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

2. Instala el servicio de tunelización

Si no lo hiciste aún, instala ngrok descargándolo o mediante la línea de comandos:

$ npm install -g ngrok

En el directorio de este repositorio, solicita 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: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

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

3. Instala las dependencias

Abre una nueva pestaña de la terminal también en el directorio del repositorio.

$ npm install

De forma alternativa, puedes usar Yarn:

$ yarn install

4. Configura el archivo .env

Copia el archivo .sample.env en .env

$ cp .sample.env .env

Edita el archivo .env para agregar todos los valores a la app y la página.

5. Ejecuta la app de forma local

$ node app.js

En tu navegador, deberías poder acceder a la página predeterminada de la app en http://localhost:3000.

Confirma que también puedes acceder a la app desde la URL externa que se mencionó en el punto 2.

Implementa usando Heroku

1. Clona el repositorio

Clona el repositorio en tu equipo local:

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

2. Instala la CLI de Heroku

Si el directorio no es ya un repositorio git, crea uno:

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

3. Instala la CLI de Heroku

Si aún no está instalada, descarga e instala la CLI de Heroku.

4. Crea una app desde la CLI

$ heroku apps:create

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

Ten en cuenta el nombre que se le asignó a tu app. En este ejemplo, el nombre es mystic-wind-83.

5. Configura las variables de tu entorno

En el panel de apps de Heroku, encuentra tu app y establece las variables de la configuración según los comentarios del archivo .sample.env.

De forma alternativa, puedes configurar las variables .env desde la línea de comandos de la siguiente manera:

$ heroku config:set PAGE_ID=XXXX

6. Implementa el código

$ git push heroku master

7. Consulta la salida del registro

$ heroku logs --tail

Conecta tu webhook

Ahora que tu servidor está en funcionamiento, el punto de conexión del webhook es la ruta /webhook. En el ejemplo de Heroku que se mostró anteriormente, sería http://mystic-wind-83.herokuapp.com/webhook.

Configura el webhook siguiendo la [Guía de webhooks de la plataforma de Messenger](https://developers.facebook.com/docs/messenger-platform/webhooks

Una vez validada la suscripción al webhook, suscríbete a los siguientes eventos:

• comments
• messages
• messaging_postbacks

Prueba los webhooks. Para ello, haz clic en los botones "Probar", que se ubican al lado de los eventos suscritos. Deberías ver los eventos de prueba en la salida de registro de tu servidor.

Prueba que la configuración de tu app se haya realizado satisfactoriamente

Si iniciaste sesión en una cuenta con el rol de "Evaluador de Instagram", intenta enviar un mensaje a la cuenta de Instagram que está conectada a tu página, o bien deja un comentario en una publicación.

Si ves una respuesta a tu mensaje en Instagram, ¡terminaste de completar la configuración de la app! ¡Listo!

Solución de problemas

La app solo me responde a mí, pero no a los demás

Es posible que la app de Facebook continúe en modo de desarrollo. Puedes agregar a personas como evaluadores de la app. Si aceptan la solicitud, la app podrá enviarles mensajes. Una vez que estés listo, podrás solicitar el permiso instagram_manage_messages para responder a cualquier persona.

Otros problemas

¿La guía tiene errores? Presenta un informe de error para avisarnos