Crea un chatbot de WhatsApp, no una aplicación

Hace mucho tiempo, creé una aplicación web para una empresa (más de 200 000 empleados). Los comentarios sobre la aplicación web me impulsaron a hacer un experimento. ¿Qué pasaría si tuviera que crear un chatbot de WhatsApp para resolver el caso de uso específico, en lugar de una aplicación web? ¿Le gustaría más a la gente? ¿Sería más útil?

Pero la historia es mucho más grande que eso. ¡Los chatbots tienen mucho potencial! En este tutorial de chatbot de WhatsApp, quería compartir mi viaje de aprendizaje, las mejores prácticas que descubrí y mis predicciones sobre la pregunta entre la aplicación y el chatbot. Y más allá: ¿los chatbots algún día reemplazarán todas las aplicaciones tradicionales?

La empresa para la que trabajaba tenía una oficina para unos 2000 empleados en pleno centro de Tel Aviv. El espacio de estacionamiento es muy limitado, por lo que las personas estacionan en espacios diseñados intencionalmente para estacionamiento en doble fila, donde un automóvil bloquea a otro. En cada espacio de estacionamiento en doble fila, el primer conductor estaciona adentro y el segundo afuera.

De una pizarra a una aplicación web

Antes de que existiera una aplicación, había un tablero grande. Todos los conductores marcaron dónde estacionaban, y sus nombres y números de teléfono. Antes de salir de la oficina, un conductor tenía que comprobar si alguien bloqueaba su coche. Si es así, tendrían que llamar al otro conductor y esperar que no estuvieran en medio de una reunión para poder ir y apartar su automóvil del camino.

Para mejorar el proceso, creé una aplicación web.

fue sencillo Sin back-end. Sin alojamiento de servidor. Sin mantenimiento de base de datos. Ni siquiera cualquier marco de interfaz de usuario. ¡Sin paquete web ni paquetes JS en absoluto! Solo vainilla JavaScript.

Fue alojado mediante el alojamiento de páginas estáticas gratuito de GitHub. La base de datos era FireBase, por lo que teníamos soporte en tiempo real y soporte JSON, y no necesitábamos un back-end.

La interfaz de usuario era sencilla. Los usuarios verían todos los lugares de estacionamiento y harían clic en uno vacío para completar sus detalles. Si ya estuvieran estacionados, tomaría los datos del almacenamiento local del navegador. Si hacían clic en un espacio registrado, verían los datos de contacto relevantes y podrían optar por llamar al conductor.

Estuvo funcionando muy bien durante casi un año. Menos de un día de desarrollo ayudó y ahorró tiempo a muchas personas: una buena inversión.

De la aplicación web al chatbot

Un día, Facebook anunció que lanzaría una API para WhatsApp. Al día siguiente, mi hermano compró un Amazon Echo con Alexa. Por esa época, también comencé a ver el Asistente de Google en todas partes.

Empecé a pensar que tal vez el mundo se estaba moviendo hacia los chatbots, así que debería experimentar. ¿Preferirían los usuarios usar chatbots? ¿Tendría que dar menos apoyo? ¿Introduciría nuevas metacaracterísticas simplemente aprovechando una infraestructura diferente?

Recibí algunos comentarios sobre la aplicación web normal y pensé que podría solucionarlo si tuviera que crear un chatbot de WhatsApp:

• La aplicación no funcionó bien en algunos teléfonos móviles antiguos.
• No funcionó bajo tierra (donde está el estacionamiento, allí no hay buena señal móvil).
• Los conductores deseaban enviar mensajes a los bloqueadores en lugar de abrir el marcador telefónico.
• Los conductores querían recibir notificaciones automáticas si alguien los bloqueaba, en lugar de abrir la aplicación web cada vez antes de salir.

Es importante recordar que los desarrolladores de plataformas de chat como Telegram o WhatsApp trabajaron día y noche durante años para garantizar la estabilidad de sus aplicaciones. Al usar sus recursos y desarrollar solo un pequeño motor para responder preguntas, eso dejaría el arduo trabajo de mantenimiento a los desarrolladores de la plataforma de chat. Todo lo que tenía que hacer era profundizar en cómo hacer un chatbot de WhatsApp.

Inmediatamente después de comenzar a desarrollar el nuevo chatbot asistente de estacionamiento, me di cuenta de lo fantástica que era la idea. Fue muy fácil y rápido agregar nuevas funciones, y ni siquiera necesité hacer pruebas de principio a fin.

¿Sin señal? No hay problema.

Pío

No solo eso, ya no necesitaba un complicado proceso de CI/CD. Si funciona en un emulador de chat, funcionaría en todas partes. Sin .apk , sin Xcode, sin App Store ni Google Play. El chatbot pudo enviar mensajes a los usuarios sin necesidad de registrar dispositivos, usar PubSub o servicios similares para notificaciones automáticas o guardar tokens de usuario. No es necesario un sistema de autenticación: estaba usando el número de teléfono del usuario como identificación.

¿Sin señal? No hay problema. No necesitaba agregar soporte sin conexión usando archivos de manifiesto: WhatsApp me lo dio de inmediato. El mensaje saldría lo suficientemente pronto, cuando el usuario iría a un nivel superior donde el wifi era mejor.

Luego me di cuenta de que cada vez que una plataforma de chat introducía una nueva función, mi aplicación se beneficiaba inmediatamente de ella. Guau, ahora sí que es una muy buena inversión. (Para ser justos, también existe el riesgo de que las nuevas características puedan limitar la funcionalidad o crear cambios importantes que requieran un mayor esfuerzo de desarrollo, así que piénselo detenidamente antes de implementar tareas críticas para el negocio).

Writing Parking Assistant , un prototipo de chatbot de WhatsApp

Para crear un chatbot de WhatsApp, el primer desafío es enviar mensajes de WhatsApp a su programa. La solución más simple que encontré es usar un número de teléfono compartido de Twilio. Es solo para desarrollo: al pasar a producción, los desarrolladores querrán usar un número de teléfono dedicado.

Los números gratuitos de Twilio se comparten entre muchos usuarios de Twilio. Para diferenciar a los usuarios finales de una aplicación de los de las aplicaciones de otros usuarios de Twilio, los usuarios finales deben enviar un mensaje predefinido al chatbot.

Después de que un usuario envíe un mensaje especial al número compartido, todos los mensajes de su número se dirigirán a su cuenta y webhooks de Twilio. Esta es la razón por la que se necesita un número dedicado en producción: no hay garantía de que un usuario determinado solo quiera usar una aplicación en un número compartido determinado.

Envío de mensajes de WhatsApp

En el "Panel de control de SMS programable" de Twilio, hay un enlace "WhatsApp Beta" en la barra de navegación de la izquierda:

Al hacer clic en eso, los desarrolladores verán una página con la opción "Sandbox".

Para asociar usuarios, deberán enviar un mensaje especial al número que proporciona Twilio. Una vez que los usuarios hacen eso, podemos comenzar a enviarles mensajes y procesarlos a través de Twilio.

Aquí hay un ejemplo de cómo enviar un mensaje usando cURL:

 curl 'https://api.twilio.com/2010-04-01/Accounts/{user_account}/Messages.json' -X POST \ --data-urlencode 'To=whatsapp:+{to_phone_number}' \ --data-urlencode 'From=whatsapp:+{from_phone_number}' \ --data-urlencode 'Body={escaped_message_body}' \ -u {user_account}:user_token

Este es un mensaje de texto simple. Pero también puede adjuntar medios (imágenes, etc.) a sus mensajes. Aquí hay un ejemplo de Node.js:

 function sendWhatsApp(to, body, media) { const auth = "twilio_clientid:twilio_api" const sendURL = "https://api.twilio.com/2010-04-01/Accounts/{account_id}/Messages.json" const res = await fetch(sendURL, { headers: { Authorization: "Basic " + Buffer.from(auth).toString("base64"), }, method: "POST", body: objToFORM( JSONRemoveUndefined({ To: "whatsapp:+972" + to.replace(/-/g, "").replace(/^0/, ""), From: "whatsapp:+18454069614", Body: body, MediaUrl: media, }), ), }) } function objToFORM(obj) { const params = new URLSearchParams() for (var a in obj) { params.append(a, obj[a]) } return params } function JSONRemoveUndefined(obj) { return JSON.parse(JSON.stringify(obj)) }

Eso es todo: ¡Ahora podemos comenzar a enviar mensajes a los clientes! Pero es importante recordar las dos limitaciones técnicas más importantes de los mensajes de WhatsApp:

1. Cuando el bot recibe un mensaje, puede enviar una respuesta de texto de forma gratuita. Más que eso cuesta dinero.
2. El bot puede enviar mensajes a los usuarios solo durante la ventana de 24 horas que comienza cuando recibe un mensaje de un usuario. Fuera de esta ventana, el bot solo puede enviar mensajes utilizando plantillas aprobadas, como veremos más adelante.

Recibir mensajes de WhatsApp

Enviar mensajes fue bastante fácil, pero recibir y procesar mensajes es aún más fácil.

En la página de "sandbox" de Twilio, los desarrolladores pueden definir dónde Twilio debe enviar los mensajes que recibe en el número compartido de WhatsApp. Durante el desarrollo, los servicios como Ngrok o Serveo pueden proporcionar direcciones URL públicas que se enrutan a las máquinas de desarrollo locales.

Los mensajes de WhatsApp de Twilio se ven así:

 { "NumMedia": "0", "SmsSid": "{sms_id}", "SmsStatus": "received", "Body": "Example Message from user", "To": "whatsapp:+{phone_number}", "NumSegments": "1", "MessageSid": "{message_sid}", "AccountSid": "{account_sid}", "From": "whatsapp:+{phone_number}", "ApiVersion": "2010-04-01" }

Eso es todo lo que necesitamos. Podemos usar cualquier lenguaje de programación para obtener este mensaje, analizarlo e intentar comprender lo que preguntan los usuarios. Esto probablemente dará como resultado algunas operaciones CRUD en una base de datos, después de lo cual el bot puede entregar la información adecuada (o un mensaje de éxito/fallo) al usuario en su respuesta. Esos son los conceptos básicos de cómo crear un chatbot de WhatsApp.

Plantillas de mensajes

Como se mencionó, los chatbots pueden enviar mensajes de estilo libre solo a los usuarios que "actualmente" interactúan con ellos, es decir, durante la ventana de 24 horas. Pero si desea enviar mensajes a nuevos usuarios, o fuera de la ventana, debe usar plantillas de mensajes preaprobadas. Esto es para prevenir spam.

En mi caso de uso, quería actualizar los controladores cuando alguien los bloqueaba, incluso si no son usuarios del chatbot. En Twilio, haga clic en "remitente" y "configurar".

Esta es la plantilla que elegí:

 {{1}} is blocking your exit from the parking lot. I will notify you when they leave.

Varios días después, Facebook aprobó mi plantilla y pude comenzar a enviar esos mensajes a todos los que tenían WhatsApp, no solo a los conductores que habían enviado un mensaje al chatbot.

Enviar un mensaje desde una plantilla es exactamente como enviar un mensaje normal, utilizando la misma API. WhatsApp ve automáticamente que coincide con una plantilla y aprueba el mensaje.

No solo para asistente de estacionamiento

Esta estrategia es emocionante para mí cuando imagino una tienda en línea: tal vez algún día la gente pueda comprar cualquier cosa usando chatbots. Sería tan fácil como enviar mensajes de WhatsApp y adjuntar imágenes. Imagínese si los usuarios pudieran adjuntar dinero real a cada mensaje de WhatsApp. Sería muy sencillo comprar cosas. Los usuarios podrían comprar fácilmente cualquier cosa hablando con el chatbot de un proveedor.

Imagina un chatbot que reemplace a Waze o Google Maps. Le envías un mensaje de texto de tu destino. La plataforma de chatbot está rastreando su ubicación, y el chatbot le envía un mensaje grabado que se reproduce automáticamente con la dirección hablada en tiempo real de la navegación.

No es fantasía. Actualmente, WhatsApp admite compartir la ubicación en tiempo real; todo lo que necesitan es la opción de reproducir automáticamente los mensajes recibidos y listo.

Piense en un chatbot de Waze o un chatbot de taxi en lugar de las aplicaciones Gett o Uber. Envías un mensaje diciendo dónde estás, luego llega el taxi y pagas por WhatsApp. Tan sencillo.

Algunos lectores pueden estar pensando: "¿No prefieren los usuarios las interfaces gráficas y no solo escribir?" Creo que las plataformas de chatbot le darán al propietario del chatbot la opción de enviar botones, imágenes y cuadros HTML puros durante la conversión. Facebook ya es compatible con Webview para Messenger. Los usuarios no necesitan instalar nada, simplemente usen su aplicación de mensajería instantánea preferida.

Estas ventajas son la razón por la cual los desarrolladores buscan crear chatbots de WhatsApp para manejar tareas importantes, como dar respuestas autorizadas instantáneas sobre la pandemia de coronavirus, para ayudar a frenar la propagación de información errónea.

TL;DR: 7 conclusiones sobre la migración de aplicaciones web a chatbots

En resumen:

• Muchas veces, desarrollar un chatbot puede reducir significativamente el tiempo de desarrollo, porque no es necesario diseñar y planificar una interfaz gráfica de usuario. (Dicho esto, vale la pena mirar los puntos más finos del diseño de UX de chatbot antes de comenzar, para aprender de los errores de otros).
• Es mucho más fácil agregar nuevas funciones a los chatbots. Los desarrolladores no necesitan rediseñar o cambiar ningún elemento actual. El chatbot solo necesita comenzar a comprender el nuevo tipo de mensaje.
• Los chatbots son mucho más accesibles por defecto para las personas con necesidades especiales.
• No es necesario personalizar una solución multiplataforma. La plataforma de chatbot ya lo hace.
• Los usuarios confían mucho más en los chatbots para compartir información. No necesita pedir permiso ni mostrar advertencias; por ejemplo, el usuario puede simplemente elegir una imagen de su galería y enviarla a su chatbot; el permiso para acceder a la galería de imágenes ya está otorgado a la plataforma de chat.
• Las plataformas de chat facilitan el manejo de las notificaciones automáticas. Las notificaciones push son lo que marca la diferencia entre las aplicaciones que los usuarios olvidan y las aplicaciones con las que los usuarios interactúan regularmente.
• Las plataformas de chat manejan el cambio entre las condiciones fuera de línea y en línea por usted.

Cómo construir un chatbot de WhatsApp: consejos de despedida y mejores prácticas

Los méritos de escribir un chatbot son bastante claros. Se recomienda a los desarrolladores que estén listos para construir uno que comiencen poco a poco, con un chatbot que entienda un mensaje. Y lo maneja bien.

Los chatbots deben ceñirse a los mensajes cortos. La gente no lee mensajes largos. Cuando tiene algo importante que enviar que no se puede expresar de manera concisa, es mejor dividir los mensajes en varios mensajes pequeños.

Los chatbots con personalidad son mejor recibidos. Incluso un mínimo de "habla humana" es muy útil en comparación con un enfoque de "formalidad de mensaje del sistema": "Actualizaré el mapa de estacionamiento para usted", en lugar de "La base de datos se ha actualizado". Un chatbot debe dejar al usuario con la sensación de que es una máquina que está ahí para servir al usuario, en lugar de una caja negra que realiza operaciones técnicas que tal vez no puedan entender.

Este tutorial de chatbot de WhatsApp no ​​abordó los detalles del análisis de los mensajes en lenguaje natural que los usuarios enviarán a los chatbots. Pero los aspirantes a proveedores de servicios de desarrollo de chatbots pueden leer detenidamente el código fuente del bot WhatsApp Parking Assistant (particularmente hackparkDialogFlow.ts , que acepta solicitudes del usuario como acciones) para tener una idea de cómo funciona ese aspecto.

Para obtener un artículo más detallado sobre cómo detectar diferentes tipos de mensajes de usuario, al mismo tiempo que sigue el enfoque de inyección de dependencia para la programación, consulte el tutorial de chatbot TypeScript de Toptal.

¡La mejor de las suertes con tu propio desarrollo de chatbot de WhatsApp!