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

Original Coast Clothing (OC) es una marca de ropa ficticia creada para mostrar las principales funciones de la plataforma de Instagram y ofrecer una experiencia de cliente excelente. Con esta demostración como inspiración, cualquier usuario puede crear una experiencia satisfactoria de compatibilidad de la API de Messenger con Instagram que aproveche la automatización y el servicio de atención al cliente en directo. Se proporcionan el código abierto de la aplicación y una guía sobre cómo implementar la experiencia en el entorno local o el servidor remoto. También se incluye un ejemplo de experiencia de Messenger complementario. Para probarlo ahora, envía un mensaje a @originalcoastclothing o comenta una publicación.

Funciones de la plataforma

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

• Mensajes

  • Vistas previas de mensajes de texto, imágenes y enlaces
  • Plantillas genéricas
• Webhooks
• Respuestas rápidas
• Perfiles de usuario
• Respuestas privadas
• Frases para romper el hielo

Implementación de la experiencia en Instagram

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

Esta experiencia funciona con código abierto. Cualquier usuario puede empezar fácilmente a desarrollar una excelente experiencia de mensajes.

El código se publica en virtud de la licencia de BSD, lo que te permite usarlo de manera gratuita para satisfacer tus necesidades. El código se hospeda en GitHub a modo de referencia adicional.

Requisitos para implementar una aplicación de Instagram

• Una cuenta profesional de Instagram (de creador o empresarial).
• Una página de Facebookconectada a la cuenta de Instagram. Asegúrate de tener una página de Facebook que represente la identidad de tu cuenta profesional de Instagram al conectar con usuarios. Para crear una nueva página, visita https://www.facebook.com/pages/create. Para empezar, también puedes configurar una página de prueba.
• Una cuenta de desarrollador que pueda realizar tareas en tu página. Una cuenta de desarrollador te permite crear nuevas aplicaciones, que son el elemento fundamental de cualquier integración con Facebook. Para registrarte como desarrollador, ve al sitio web de Facebook para desarrolladores y haz clic en el botón “Empezar”.
• Una aplicación de Facebook con la configuración básica establecida. Para crear una nueva aplicación, visita https://developers.facebook.com/ y haz clic en Añadir nueva aplicación.

Pasos de la configuración

El objetivo de esta sección es recopilar todos los identificadores e identificadores de acceso necesarios para que la aplicación de Instagram pueda enviar y recibir mensajes correctamente. Antes de empezar, asegúrate de cumplir todos los requisitos que hemos mencionado antes. Llegado este punto, debes tener una página, una aplicación de Facebook registrada y una cuenta profesional de Instagram.

Si acabas de crear una nueva aplicación de Facebook, es probable que se encuentre en modo de desarrollo. Ten en cuenta que las aplicaciones en este modo solo pueden enviar mensajes a usuarios conectados a la aplicación (administradores, desarrolladores y evaluadores). Puedes continuar con esta guía en este modo. Sin embargo, cuando la aplicación esté lista para publicarse, deberá someterse a la revisión de la aplicación para obtener el permiso instagram_manage_messages. Si quieres obtener más información, consulta Revisión de la aplicación.

1. Configura la integración con Instagram con la ayuda de la documentación Introducción.
2. Añade algunas cuentas de prueba de Instagram que usarás para probar la experiencia.

Llegado este punto, debes tener lo siguiente:

• Identificador de la aplicación
• Clave secreta de la aplicación
• Identificador de la página
• Identificador 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:

• Node 10.x o posterior
• Un servidor para el código. Las opciones son las siguientes:

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

Implementación con un clic mediante Heroku o Glitch

La experiencia se puede implementar automáticamente en Heroku o Glitch mediante los botones siguientes. Se te pedirá que introduzcas las variables de entorno necesarias para completar la configuración.

Implementación local con ngrok

Un servicio de tunelización expone tu servidor web local a una URL externa a la que los webhooks de Facebook puede acceder. Existen muchos servicios de este tipo. En este ejemplo, utilizaremos ngrok.

1. Clonar el repositorio

Clona el repositorio en tu máquina local:

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

2. Instalar el servicio de tunelización

Si aún no lo has hecho, instala ngrok mediante una descarga o 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

La pantalla debería mostrar 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

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.

3. Instalar las dependencias

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

$ npm install

Como alternativa, puedes utilizar Yarn:

$ yarn install

4. Configurar el archivo .env

Copia el archivo .sample.env en .env.

$ cp .sample.env .env

Edita el archivo .env para añadir todos los valores de tu aplicación y página.

5. Ejecutar la aplicación localmente

$ node app.js

Ahora deberías poder acceder a la página predeterminada de la aplicación en el navegador en http://localhost:3000.

Confirma que también puedes acceder a la aplicación en la URL externa del paso 2.

Implementación mediante Heroku

1. Clonar el repositorio

Clona el repositorio en tu máquina local:

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

2. Instalar la CLI de Heroku

Si el directorio no es un repositorio Git, crea uno:

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

3. Instalar la CLI de Heroku

Si todavía no está instalada, descarga e instala la CLI de Heroku.

4. Crear una aplicación 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

Toma nota del nombre asignado a tu aplicación. En este ejemplo, era mystic-wind-83.

5. Configurar las variables de entorno

En el panel de aplicaciones de Heroku, busca tu aplicación y define las variables de configuración siguiendo los comentarios del archivo .sample.env.

Como alternativa, puedes definir variables de entorno desde la línea de comandos de la siguiente manera:

$ heroku config:set PAGE_ID=XXXX

6. Implementar el código

$ git push heroku master

7. Ver la salida del registro

$ heroku logs --tail

Conexión del webhook

Ahora que el servidor está en funcionamiento, el extremo del webhook se encuentra en la ruta /webhook. En el ejemplo de Heroku anterior, sería http://mystic-wind-83.herokuapp.com/webhook.

Para configurar tu webhook, sigue la [guía de webhooks para la plataforma de Messenger](https://developers.facebook.com/docs/messenger-platform/webhooks

Después de validar la suscripción del webhook, suscríbete a los eventos siguientes:

• comments
• messages
• messaging_postbacks

Para probar los webhooks, haz clic en los botones “Hacer prueba” junto a los eventos suscritos. Deberías ver los eventos de prueba en la salida del registro del servidor.

Prueba de la correcta configuración de la aplicación

Con la sesión iniciada en una cuenta con el rol “Evaluador de Instagram”, intenta enviar un mensaje a la cuenta de Instagram conectada a tu página o deja un comentario en una publicación.

Si ves una respuesta a tu mensaje en Instagram, la aplicación está configurada correctamente. ¡Eso es todo!

Solución de problemas

La aplicación 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. Una vez que tengas todo listo, puedes solicitar el permiso instagram_manage_messages para poder responder a cualquier persona.

Otros problemas

¿Esta guía es incorrecta? Envía un problema para comunicárnoslo.