Hace mucho tiempo, creé una aplicación web para una empresa (más de 200k empleados). Los comentarios sobre la aplicación web me llevaron a hacer un experimento. ¿Qué pasaría si creara un WhatsApp? chatterbot para resolver el caso de uso específico, en lugar de una aplicación web? ¿A la gente le gustaría más? ¿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 aplicación frente a la pregunta de chatbot. Y más allá: ¿los chatbots algún día reemplazarán todas las aplicaciones tradicionales?
La compañía para la que trabajé tenía una oficina para alrededor de 2,000 empleados en el centro de Tel Aviv. El espacio de estacionamiento es muy limitado, por lo que las personas se estacionan en espacios diseñados intencionalmente para estacionamiento doble, donde un automóvil bloquea a otro. En cada espacio de estacionamiento doble, el primer conductor estaciona adentro y el segundo estaciona afuera.
De una pizarra a una aplicación web
Antes de que hubiera una aplicación, había una gran pizarra. Todos los conductores marcaron dónde estaban estacionando, y sus nombres y números de teléfono. Antes de salir de la oficina, un conductor tuvo que verificar si alguien estaba bloqueando su automóvil. 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 mover su automóvil fuera del camino.
Para mejorar el proceso, creé una aplicación web.
Fue simple No hay back end. Sin servidor de alojamiento. Sin mantenimiento de la base de datos. Ni siquiera cualquier marco de UI. ¡Sin paquete web y sin paquetes JS! Solo JavaScript vainilla.
Fue alojado utilizando 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 una ranura registrada, verían los detalles de contacto relevantes y podrían elegir llamar al conductor.
Funcionó muy bien durante casi un año. Menos de un día de desarrollo ayudó y ahorró tiempo para muchas personas, una buena inversión.
De una aplicación web a chatbot
Un día, Facebook anunció que lanzarán una API para WhatsApp. Al día siguiente, mi hermano compró un Amazon Echo, con Alexa. Alrededor de ese tiempo, también comencé a ver el Asistente de Google en todas partes.
Empecé a pensar que tal vez el mundo se estaba moviendo hacia chatbots, así que debería experimentar. ¿Preferirían los usuarios usar chatbots? ¿Necesitaría dar menos apoyo? ¿Introduciría nuevas meta-características simplemente aprovechando la infraestructura diferente?
Recibí algunos comentarios sobre la aplicación web normal, y creí que podría abordarla si creara un chatbot de WhatsApp:
- La aplicación no funcionaba bien en algunos teléfonos móviles viejos.
- No funcionaba bajo tierra (donde está el estacionamiento, no hay una buena señal móvil allí).
- Los conductores deseaban enviar mensajes a los bloqueadores en lugar de abrir el marcador del teléfono.
- Los conductores querían recibir notificaciones automáticas si alguien las bloqueaba, en lugar de abrir la aplicación web cada vez antes de partir.
Es importante recordar que a los desarrolladores de plataformas de chat les gusta Telegram o WhatsApp había trabajado días y noches 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 para los desarrolladores de la plataforma de chat. Todo lo que tenía que hacer era investigar 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 tuve que hacer pruebas de extremo a extremo.
¿Sin señal? No hay problema.
No solo eso, ya no necesitaba un complicado proceso de CI / CD. Si funciona en un emulador de chat, funcionaría en todas partes. No .apk, sin Xcode, sin App Store, ni Google Play. El chatbot pudo enviar mensajes a los usuarios sin que yo tuviera que registrar dispositivos, usar PubSub o servicios similares para notificaciones push 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 fuera de línea usando archivos de manifiesto: WhatsApp me lo dio de inmediato. El mensaje saldría 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 beneficiaría de inmediato. Wow, ahora 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 piense detenidamente antes de implementar tareas críticas para el negocio).
Escribiendo estacionar unasistente, 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 el desarrollo: al pasar a la 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 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ía un mensaje especial al número compartido, todos los mensajes de su número serán dirigidos a su cuenta Twilio y webhooks. Esta es la razón por la que se necesita un número dedicado en la producción: no hay garantía de que un usuario determinado solo quiera usar una aplicación en un número compartido dado.
Enviar 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:
Para asociar usuarios, deberán enviar un mensaje especial al número que Twilio proporciona. Una vez que los usuarios hacen eso, podemos comenzar a enviarles mensajes y procesarlos a través de Twilio.
Esta es un ejemplo de 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 cruciales de los mensajes de WhatsApp:
- Cuando el bot recibe un mensaje, puede enviar una respuesta de texto de forma gratuita. Más que eso cuesta dinero.
- El bot puede enviar mensajes a los usuarios solo durante el período de 24 horas que comienza cuando recibe un mensaje de un usuario. Fuera de esta ventana, el bot solo puede enviar mensajes usando 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 al número compartido de WhatsApp. Durante el desarrollo, servicios como Ngrok o Serveo pueden proporcionar URL públicas que se dirigen a máquinas de desarrolladores locales.
Los mensajes de Twilio WhatsApp 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 los usuarios están preguntando. 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 apropiada (o mensaje de éxito / falla) 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 están "actualmente" interactuando con ellos, es decir, durante el período de 24 horas. Pero si desea enviar mensajes a nuevos usuarios, o fuera de la ventana, debe usar plantillas de mensajes aprobadas previamente. 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, usando 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: quizás algún día la gente podrá comprar cualquier cosa usando chatbots. Sería tan fácil como enviar mensajes de WhatsApp y adjuntar imágenes. Imagínense si los usuarios pudieran adjuntar dinero real a cada mensaje de WhatsApp. Sería muy sencillo comprar cosas. Los usuarios podrían fácilmente comprar cualquier cosa hablando con el chatbot de un proveedor.
Imagine un chatbot que reemplaza a Waze o Google Maps. Le envía un mensaje de texto de su 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 WhatsApp actualmente admite el uso compartido de ubicaciones 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 con 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 Webview para Messenger. Los usuarios no necesitan instalar nada, solo usan 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 hay necesidad de 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 chatbot UX antes de comenzar, para aprender de los errores de los demás.)
- 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 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 solicitar 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 notificaciones push. Las notificaciones push son las que marcan la diferencia entre las aplicaciones que los usuarios olvidan y las aplicaciones con las que los usuarios se involucrarán regularmente.
- Las plataformas de chat manejan el movimiento entre las condiciones fuera de línea y en línea para 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 aconseja a los desarrolladores que estén listos para construir uno que comiencen de a poco, con un chatbot que comprende un mensaje. Y lo maneja bien.
Los chatbots deberían atenerse a mensajes cortos. La gente no lee mensajes largos. Cuando tiene algo importante para enviar que no se puede expresar de manera concisa, es mejor dividir los mensajes en varios mensajes pequeños.
Los chatbots con personalidad se reciben mejor. Incluso un poco de "habla humana" mínima va mucho 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 pueden no estar en condiciones de comprender.
Este tutorial de chatbot de WhatsApp no entró en los detalles de analizar el mensajes en lenguaje natural los usuarios enviarán a chatbots. Pero los aspirantes a proveedores de servicios de desarrollo de chatbot son bienvenidos a examinar el código fuente del bot de Asistente de estacionamiento de WhatsApp (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, y al mismo tiempo seguir el enfoque de inyección de dependencia para la programación, consulte el artículo de Toptal Tutorial de chatbot de TypeScript.
¡Mucha suerte con tu propio desarrollo de chatbot de WhatsApp!
La Blog de ingeniería de Toptal es un centro para tutoriales de desarrollo en profundidad y anuncios de nuevas tecnologías creados por ingenieros de software profesionales en la red de Toptal. Puedes leer la pieza original escrita por Aminadav Glickshtein aquí. [LINK] Sigue el Blog de diseño de Toptal en Twitter y Etiqueta LinkedIn.
Cobertura corona
Lea nuestras cobertura diaria sobre cómo la industria tecnológica está respondiendo al coronavirus y suscríbase a nuestro boletín semanal Coronavirus en contexto.
Para obtener consejos y trucos sobre cómo trabajar de forma remota, consulte nuestros artículos sobre Growth Quarters esta página o síguenos en Twitter.
