https://d226lax1qjow5r.cloudfront.net/blog/blogposts/santa-delivery-notifications-via-facebook-messenger-dr/Santa-Delivery-Notifications-via-Facebook-Messenger.png

Notificaciones de entrega de Papá Noel a través de Facebook Messenger

Publicado el May 11, 2021

Tiempo de lectura: 5 minutos

Aviso de caducidad del producto

A partir del 31 de agosto de 2025, la Dispatch API de Vonage estará cerrada a nuevos usuarios, aunque el producto seguirá siendo compatible para los usuarios existentes. Si deseas crear una aplicación de mensajería con funcionalidad de conmutación por error, ahora la API de Messages API admite directamente la conmutación por error.

Para obtener información general sobre la función de conmutación por error de mensajes, consulte esta guía. Para obtener información sobre la migración de Dispatch API a Messages API Failover, consulte esta guía.

Si tiene más preguntas sobre esta eliminación de productos, póngase en contacto con nosotros en la dirección comunícate con nosotros en Slack de la comunidad de Vonage.

Uno de los momentos de mayor emoción para mí cada Navidad mientras crecía era esperar a saber si Papá Noel había entregado nuestros regalos. Cada mañana de Navidad, mi padre iba a la habitación donde estaba el árbol de Navidad para comprobar si "Papá Noel había llegado" antes de que pudiéramos correr a ver nuestros regalos.

Ahora, como papá, la responsabilidad de comprobar la entrega de Papá Noel es mía.

He oído que algunas familias se levantan a las 4 de la mañana para abrir los regalos. Esto significa que Papá Noel puede llegar a algunas casas bastante temprano. Entonces, ¿qué debo hacer? ¿Debo levantarme de la cama y mirar debajo del árbol cada 30 minutos? Como alguien que antes se proclamaba "evangelista de la Web en tiempo real", no me entusiasma la idea de lo que en la práctica es la versión física del sondeo HTTP. No, no, eso no vale. Así que decidí construir un sistema de Notificación de Entrega de Papá Noel utilizando el Nexmo Dispatch API con Facebook Messenger como canal de notificación principal con fallback a SMS porque no quiero perderme esa notificación.

Santa Delivery Notifications via Facebook MessengerSanta Delivery Notifications via Facebook Messenger

En este post voy a caminar a través de los componentes utilizados y cómo se unen para ofrecer una solución de Notificación de Entrega de Santa. Los detalles del código no serán cubiertos, pero usted puede encontrar todo el código en GitHub junto con instrucciones para ejecutar tu propia instancia de la aplicación.

Cómo funciona

La aplicación utiliza una combinación de una aplicación Node.JS, la Dispatch API de Nexmo para enviar el mensaje de Facebook Messenger con SMS de reserva si el mensaje no se lee, una Santa API escrita por Steve Crow para su Seguimiento de Papá Noel con SMS y Java una página de Facebook y una aplicación de Facebook asociada.

Iniciar sesión en Facebook

La primera parte de la aplicación pide al usuario que inicie sesión en Facebook.

Facebook Login FlowFacebook Login Flow

Esto utiliza el inicio de sesión de Facebook que depende del SDK JavaScript de Facebook.

Obtener la ubicación de los usuarios

Si Papá Noel ha entregado se determina utilizando una combinación de:

  1. Dónde se encuentra el usuario

  2. Dónde está Papá Noel en su ruta de reparto

Location flowLocation flow

La ubicación del usuario se determina utilizando el navegador API de geolocalización. Esto devuelve sólo las coordenadas del usuario como una mejor suposición.

Las coordenadas se envían al back-end Node.JS que utiliza la API creada para la aplicación Rastrear a Papá Noel con SMS para encontrar la ciudad más cercana a las coordenadas.

Obtener el número de teléfono del usuario para SMS fallback

Ahora que la aplicación sabe dónde se encuentra el usuario, necesitamos saber cómo entregar las notificaciones. Si el mensaje de Facebook Messenger sigue sin leerse, la Dispatch API de Nexmo pasará a enviar el mensaje también por SMS. Para ello, necesitamos el número de teléfono del usuario.

Get user's phone number flowGet use's phone number flow

El usuario debe introducir su número de teléfono y hacer clic en el botón "Ir". Al hacer clic en el número de teléfono se envía al back-end Node.JS y el número de teléfono almacenado para ese usuario.

Una mejora de la funcionalidad actual sería utilizar la API Nexmo Number Insight API de Nexmo para asegurarse de que el número de teléfono es válido y la Verify API para confirmar la propiedad de ese número de teléfono por parte del usuario.

Suscríbete a las "Notificaciones de entrega de Papá Noel" de Facebook Messenger

Probablemente la parte más complicada de toda la aplicación fue poder enviar mensajes al usuario sin que éste enviara primero un mensaje a nuestra página de Facebook.

Finalmente, encontré el plugin Enviar a Messenger plugin que parece estar configurado para esto. Sin embargo, añade algunos requisitos adicionales en torno a la creación de un aplicación de Facebook y un "webhook "opt_in.

También descubrí que el botón "Enviar a Messenger" no aparecía a menos que el usuario ya hubiera iniciado sesión en Facebook. Si echas un vistazo al JavaScript del lado del cliente en GitHub para esta aplicación, verás algo de código en su lugar para hacer frente a algunas advertencias de la utilización de este plugin incluyendo tener que recargar la página cuando el usuario inicia sesión en Facebook.

Confirm subscription flowConfirm subscription flow

Cuando el usuario haga clic en el botón "Enviar a Messenger" (que puedes configurar para que diga "Suscribirse") se activará el webhook configurado "opt_in" de Facebook. La carga útil del webhook contiene el importantísimo Page Scoped User ID que es un identificador único para el usuario asociado a una página de Facebook.

En este punto, guardamos una suscripción oficial dentro de una base de datos. Esta aplicación utiliza una instancia de MongoDB gestionada por MLab.

Con este ID, la aplicación ya puede enviar mensajes al usuario utilizando la Dispatch API de Nexmo. Para confirmar la suscripción se envía un mensaje informando de que se ha suscrito y de su ubicación.

Subscription confirmation dialogSubscription confirmation dialog

Comprueba la ubicación de Papá Noel y envía notificaciones

Una vez guardada la suscripción, lo único que queda por hacer es controlar la ubicación de Papá Noel mediante la API de Papá Noel mencionada anteriormente.

Santa delivery notifications flowSanta delivery notifications flow

La aplicación utiliza las coordenadas del usuario con la API, y cuando la API indica que Papá Noel se está moviendo away de la ubicación del usuario, sabemos que Papá Noel debe haber entregado. Por lo tanto, se envía una Notificación de Entrega de Papá Noel a través de Facebook Messenger utilizando la Dispatch API de Nexmo. Si el mensaje no se lee en un plazo de tiempo configurable (véase expiry_time en la Referencia API) también se envía una notificación por SMS.

Conclusión

En este post, hemos cubierto cómo una Notificación de Entrega de Papá Noel a través de Facebook Messenger con SMS fallback se puede construir utilizando el Nexmo Dispatch API. Por favor, eche un vistazo a la código en GitHub o plantear una cuestión (o un pull request) si tienes alguna idea para mejorar la aplicación (ver también "Próximos pasos" más abajo) o si tienes alguna pregunta.

Ahora los padres y tutores de todo el mundo pueden dormir tranquilos sabiendo que sólo tienen que levantarse de la cama para comprobar si Papá Noel ha llegado una vez que hayan recibido la notificación de entrega de Papá Noel.

Próximo destino

  • Pruebe la Dispatch API independiente

  • Añadir la Number Insight API a la aplicación para comprobar el formato del número o incluso que el número de teléfono se encuentra en el mismo lugar que indica la API de geolocalización.

  • Utilice la Verify API para asegurarse de que el usuario es el propietario del número de teléfono que está registrando.

  • Háganos saber lo que piensa tuiteando en @NexmoDev

Compartir:

https://a.storyblok.com/f/270183/400x400/73e68604be/phil-leggetter.jpg
Phil Leggetter

Phil is Head of Developer Relations at Hookdeck, an asynchronous messaging platform, and a proud Vonage alumni.