Enviando mensajes de WhatsApp con Xamarin y Twilio
¡Hola! En esta entrada del blog traigo un tema muy interesante que me han preguntado en muchas ocasiones: ¿Es posible integrar el envío de mensajes de WhatsApp a mi aplicación móvil desarrollada con Xamarin? Es por todos conocido que WhatsApp es una de las aplicaciones de mensajería más utilizadas en el mundo y muchas empresas quisieran poder integrar su funcionalidad para mejorar el servicio al cliente, por ejemplo notificarles sobre un cambio en el status de su orden de compra, informarles de algún descuento o simplemente enviarles información, todo ello desde la aplicación desarrollada por la empresa.
Normalmente la respuesta que daba sobre integrar WhatsApp a tu aplicación móvil era negativa, debido a que no hay había un API oficial de WhatsApp (si bien en GitHub puedes encontrar varias librerías no oficiales desarrolladas por la comunidad, las cuales funcionan pero si existe una actualización de WhatsApp es probable que la librería deje de funcionar por un instante mientras el desarrollador modifica el código para hacerla trabajar nuevamente -o de plano que dejen de funcionar si es muy compleja la actualización-).
Bueno, pues recién hace un par de meses se anunció que WhatsApp ha lanzado su Business API, principalmente dirigido a medias y grandes empresas, tal como se describe en su página oficial. Cabe mencionar, sin embargo, que hay una serie de pasos a seguir para poder acceder al API, tienes que aplicar al servicio, configurar una infraestructura en Docker o en la nube, registrar un número totalmente nuevo para usar el servicio y otros pasos adicionales que puedes consultar en el sitio de Facebook for Developers.
Sin embargo, eso no significa que no puedas probar cómo funciona sino todo lo contrario. Existen varios proveedores de comunicaciones en la nube que permiten integrar el envío de SMS a teléfonos, hacer llamadas, crear números virtuales y más. Uno de ellos es Twilio (otro es Nexmo, del cual te hablaré en otra ocasión) y con la incorporación del Business API previamente mencionado, ellos también han desarrollado recientemente su versión beta del API para WhatsApp, disponible en diferentes lenguajes (Python, PHP, Node.js, Ruby, cURL y por supuesto C#).
Yo tenía la duda de si podía utilizarse este API en una aplicación móvil de Xamarin ¡y la buena noticia es que sí! De hecho está tan sencillo que ¡sólo requieres muy pocas líneas de código para lograr tu objetivo!
¡Listo! Eso es todo lo que necesitas para enviar un mensaje de WhatsApp desde Xamarin 🙂
Gracias por tu visita al blog, espero este post te haya sido de utilidad.
Jaja, no te creas 🙂 Por supuesto que hay que hacer una configuración previa, conocer sus limitaciones y demostrar su uso con un caso práctico. Ahí es donde entro yo y te voy a ayudar con una guía paso a paso para desarrollar algo bonito. Eso sí, en esencia las líneas de código presentadas con anterioridad son la base y puedes integrarlas en cualquier tipo de proyecto, no solo de Xamarin, sino que también puedes enviar mensajes de WhatsApp desde un proyecto web de ASP .NET, una aplicación de escritorio con Windows Forms/WPF, una aplicación universal de UWP, etc. así que esta guía te puede servir para otro tipo de proyectos sin duda.
¡Manos a la obra! ¡Vas a ver que en menos de una hora vas a tener una aplicación móvil capaz de enviar mensajes de WhatsApp a tu teléfono!
El código fuente del proyecto está disponible en mi repositorio de GitHub (dale una estrellita poderosa en GitHub si te gustó el proyecto 🙂 )
Paso 1. Regístrate en primer lugar en el servicio de Twilio. Puedes crear una cuenta gratuita en modo Trial haciendo clic en este enlace. Ingresa tus datos y posteriormente es posible que te pidan tu número de teléfono para validar la cuenta con un código. De momento no llenes la información de tarjeta de crédito, pues no queremos que nos cobren 🙂
Paso 2. Ingresa a este enlace para acceder al dashboard del servicio de SMS. Selecciona Programmable SMS del menú lateral, haz clic en el servicio WhatsApp Beta y después en el botón Get Started.
Paso 3. Ahora da clic en el botón Activate Your Sandbox. (Sandbox es un término que se refiere a un entorno de testing que puedes ocupar para realizar tus pruebas antes de pasar a producción, y la ventaja es que en este caso no se generan costos por los servicios utilizados.)
Paso 4. Acepta los términos de servicio y da clic en Confirm.
Paso 5. Ahora hay que configurar el entorno de Sandbox. Las instrucciones dicen que tienes que enviar el mensaje de WhatsApp mostrado a un número virtual proporcionado por Twilio.
Lo primero entonces es agregar el contacto a nuestro teléfono y luego enviamos el mensaje indicado en una nueva conversación de WhatsApp con este usuario. Si la configuración es correcta, recibirás un mensaje indicando que el Sandbox se ha establecido sin problemas.
Y además aparecerá Mensaje Recibido en el dashboard de Twilio.
Paso 6. Ahora accede a la consola de desarrollador de Twilio y copia tanto el valor del Account SID como el del Auth Token. Ambos serán utilizados en la aplicación móvil. (Pequeño paréntesis; si completas el primer set de misiones del TwilioQuest vas a aprender cómo utilizar el API de Twilio en tus proyectos ¿quieres más motivación? Bueno, también puedes obtener una playera gratis. Más información aquí)
Paso 7. Ahora viene lo bueno. Abre Visual Studio 2017 y crea un proyecto de tipo Mobile App (Xamarin.Forms) de la categoría Cross-Platform (en el lenguaje C#). El nombre de este proyecto es XamarinWhatsApp (recuerda utilizar rutas cortas para la ubicación de tu solución).
Paso 8. Vamos a usar la tecnología de .NET Standard para un proyecto de aplicación vacía (blank) y vamos a seleccionar las 3 plataformas de destino disponibles.
Paso 9. Da clic derecho sobre la solución y elige la opción Administrar paquetes Nuget para la solución.
Paso 10. Solo necesitamos agregar un paquete, el de Twilio. En este caso estamos usando la última versión disponible del API a la fecha, la versión 5.19.0. Instálala en los 4 proyectos.
Paso 11. Agrega 4 carpetas al proyecto XamarinWhatsApp: Helpers, Modelos, Paginas y Servicios.
Paso 12. En la carpeta Helpers agrega una nueva clase llamada Constantes, la cual contiene el siguiente código y que será utilizado para la inicialización del servicio de Twilio.
Reemplaza los valores predeterminados de estas constantes por:
- El Account SID obtenido en el paso 6.
- El Token de Autorización del paso 6.
- El número virtual de Twilio (es el contacto que agregaste en WhatsApp y que aparece al configurar el Sandbox del paso 5)
- Tu número de teléfono que comúnmente utilizas para WhatsApp.
Nota: Los dos números de teléfono deben aparecer en formato internacional con el prefijo +. En la consola de Sandbox aparecen los números que has registrado (bajo User ID) con el formato completo (solo copia el número con el +, omite el prefijo whatsapp: )
Paso 13. En la carpeta Modelos agrega una clase llamada Mensaje con el siguiente código. Las propiedades las vamos a pasar al servicio de Twilio para enviar el mensaje de WhatsApp:
Paso 14. Ahora agrega la clase ServicioWhatsAppTwilio en la carpeta Servicios. Observa que en esta clase vienen las líneas de código que mencioné al inicio de la publicación, las que hacen posible la comunicación entre la aplicación y WhatsApp (utilizando a Twilio como intermediario).
Paso 15. A continuación agrega un nuevo elemento de tipo Content Page en la carpeta Paginas. El nombre de este elemento es PaginaMensaje.
Paso 16. Antes de proceder con el código de la interfaz, vamos a agregar una fuente a nuestra aplicación para utilizar íconos en nuestra página. Accede al sitio de FontAwesome y descarga la versión gratuita para la web. FontAwesome es una fuente ttf que representa una serie de íconos que puedes agregar como texto en tus proyectos.
Paso 17. Descomprime el zip descargado y ubica la fuente fa-regular-400.ttf que se encuentra en la carpeta webfonts.
Paso 18. La fuente se agrega en cada proyecto. Realiza lo siguiente por cada proyecto:
- En el proyecto de Android da clic derecho sobre la carpeta Assets y selecciona Agregar elemento existente. Selecciona el archivo del paso 17 y establece los valores Android Asset con la opción No copiar.
- En el proyecto de iOS da clic derecho sobre la carpeta Resources y selecciona Agregar elemento existente. Selecciona el archivo del paso 17 y establece los valores BundleResource con la opción No copiar.
Además, abre el archivo Info.plist y escribe el código mostrado en la imagen dentro de la etiqueta dict.
<key>UIAppFonts</key> <array> <string>fa-regular-400.ttf</string> </array> <key>UIDeviceFamily</key>
- En el proyecto de UWP da clic derecho sobre la carpeta Assets y selecciona Agregar elemento existente. Selecciona el archivo del paso 17 y establece los valores Contenido con la opción Copiar siempre.
Paso 19. Ahora sí, vamos con el código de la interfaz de usuario. En el archivo PaginaMensaje.xaml va el siguiente código, que representa una sencilla página donde el usuario puede ingresar el número de teléfono de origen, de destino y el mensaje. También se incluye una lista con los mensajes que ha enviado el usuario. NOTA IMPORTANTE: Hasta este momento, esta aplicación solo puede usar dos números de teléfono: el virtual (proporcionado por Twilio) y el tuyo (el que registraste en WhatsApp). Sigue leyendo más abajo para saber cómo cambiar este comportamiento.
Paso 20. El code-behind de esta página es:
Paso 21. Ya para terminar, modifica App.xaml.cs para establecer la configuración de Twilio y la página de inicio de nuestro proyecto.
Paso 22. ¡Listo! Compila y ejecuta tu aplicación. Si se ejecuta correctamente, verás la siguiente interfaz. Debe aparecer el número virtual de Twilio en primer lugar (+14…) luego tu número registrado en WhatsApp (+521… en mi caso) y el campo para escribir tu mensaje. Si das clic en el botón Enviar, después de unos segundos se mostrará el mensaje con el SID como prueba de que fue enviado. Envía más mensajes y aparecerán uno a continuación del otro.
Por supuesto, si veo la conversación en WhatsApp el mensaje ha sido recibido. ¡Funciona! =)
Genial, ¿no? ¿Qué te pareció la práctica? Espero que haya funcionado a la perfección, en caso contrario déjame un comentario para darle revisión. Hay muchas cosas que puedes hacer para aprovechar el conocimiento adquirido, espero lo puedas implementar en tus proyectos; cuéntame qué tal te fue 😀
Consideraciones de uso (importante leer)
Ahora, seguramente tienes muchas preguntas y yo también tengo mucho qué decir, pues el servicio tiene algunas limitaciones… o más que eso, consideraciones que debes tener en cuenta (todas ellas solventables hasta cierto punto).
Primero, en realidad el teléfono From no deberías modificarlo en la aplicación, pues es el número virtual registrado con Twilio que se encarga de enviar los mensajes. En una aplicación real ya en producción este número representa un número telefónico dedicado registrado por tu empresa (o tu cliente) para enviar mensajes a sus usuarios. Fuera del entorno Sandbox puedes comprar un número virtual en Twilio y luego debes registrarlo cuando apliques al Business API de WhatsApp (explico eso a detalle más abajo).
Segundo, seguramente en el teléfono To intentaste enviarle el mensaje de WhatsApp a un amigo y falló el mensaje o no fue enviado. Para que más números puedan recibir mensajes desde el número virtual es simple, diles que ejecuten el paso 5, es decir, que agreguen el contacto de WhatsApp y luego le envíen el mensaje indicado (join …). En una aplicación real ya en producción este número representa el teléfono de los clientes con los que quieres establecer comunicación desde tu aplicación vía WhatsApp.
La documentación de Twilio explica que WhatsApp está lentamente aceptando que los desarrolladores puedan utilizar su Business API para integrar el servicio de mensajería en sus aplicaciones. Si recuerdas mencioné que debías tener un número telefónico dedicado para ello; como el servicio está limitado, de momento puedes utilizar números virtuales de Twilio (sin costo mientras uses el Sandbox).
Siempre ten presente que el Twilio Api para WhatsApp está en fase Beta, por lo que puede cambiar la manera de implementar la librería (código) así como su funcionalidad.
Precio (ayyyyy). Todo lo que hemos hecho hasta ahora ha sido en entorno de pruebas (sandbox) por lo que no hay costos asociados por el uso del API. Cuando quieres implementar la aplicación en entorno de producción viene lo bueno. Existen cargos por el uso del servicio de Twilio que puedes consultar en la documentación; básicamente se paga por el número de teléfonos virtuales y el número de mensajes enviados (creo que no afecta cuántos usuarios utilicen tu app)…
…peeeeeeero el precio por mensaje es variable dependiendo el país hacia donde se envíen. Por ejemplo, enviar un mensaje a un número telefónico registrado en México cuesta 0.0316 USD.
Y bueno, son cosas que hay que ir considerando cuando ya queramos implementar en producción este tipo de servicios. Pero podemos irnos preparando de momento, explorando el API y haciendo pequeños ejercicios.
En este post aprendimos a enviar mensajes de WhatsApp utilizando el API de Twilio desde una aplicación móvil desarrollada en Xamarin. ¡¡Felicidades!! Pero, ¿y que pasa si en mi app quiero recibir mensajes enviados por los usuarios a través de WhatsApp? Eso también se puede pero se utiliza un concepto llamado webhooks, el cual exploraremos muy pronto en una futura entrega (tal vez esta semana, ¿o hacemos webcast?)
Házme saber en los comentarios qué tal te pareció la publicación. Espero que haya sido de utilidad. No olvides compartirla con tus amigos si fue interesante o si crees que puede servirles.
Sin más por el momento, me despido. ¡Nos vemos en la próxima entrega!
¡Gracias por tu visita!
Luis
