Tempo
Tempo es una plataforma diseñada para dar a los clientes la habilidad de reservar las visitas de control de plagas con una compañía que provee el servicio a través de la misma en su ubicación. La plataforma permite puentear la falta de una interfaz grafica que acerque el sitio de la compañía con el software de gestión del proveedor de control de plagas.
Etapa inicial
El cliente se acercó a nosotros con la idea de generar una plataforma que permite simplificar la comunicación entre los clientes y los proveedores del servicio de control de pestes. Se había detectado que estaba faltando la vinculación entre los sitios web de las compañías que ofrecen el servicio y el sistema de administración interno que estas utilizan. También explicó cuál era el flujo esperado que debía de tener este nuevo elemento para lograr que los clientes puedan solicitar un turno a través del sitio web del proveedor de servicios de control de pestes y cómo este se vinculaba con el sistema de gestión interno del proveedor.
Basados en estos requerimientos estuvimos a cargo de generar una solución para este tipo de cliente donde la configuración necesite solamente las claves de acceso para el sistema de gestión interno, agregar una etiqueta Javascript que pueda ser inyectada en el sitio web y definir que botón del sitio web dispara la acción para cargar nuestra aplicación. Esto simplifica el proceso de integración con cada nuevo proveedor de servicios.
Como parte del proceso también fue requerido capturar el pago del servicio o visita inicial desde dentro de la aplicación que desarrollamos, así que planificamos agregar 2 plataformas de pago (Braintree & WordPay) según la conveniencia del proveedor de servicios y registrar estos pagos en el software de administración interno de la compañía para que se pueda volver a utilizar este método de pago para futuros servicios.
Detalles del desarrollo
La aplicación está basada en una aplicación NodeJS con ExpressJS de tipo multi-tenant que permite tener diferentes proveedores en un mismo entorno y proveer una aplicación en ReactJS que se inyecta dinámicamente en el sitio web del proveedor de servicios a través de una etiqueta de Javascript creada específicamente para cada proveedor, el cual carga las preferencias del mismo.
Como paso inicial se nos encargó de tomar el sistema de API existente que el cliente ya poseía, revisarlo, testearlo y generar los casos de prueba automatizados para que podamos validar que funciona según las necesidades planteadas, específicamente en lo relacionado con el software de administración interno utilizado por los proveedores.
Una vez que esto fué completado, nos enfocamos en diseñar la interfaz, colores y pantallas para la aplicación en conjunto con el diseñador. Una vez obtenido los primeros bosquejos, validamos que se puede utilizar con todas las opciones que se pueden configurar por proveedor tales como logo, paleta de colores, etc.
Una ves confirmado el diseño, se inició el desarrollo de la aplicación en ReactJS la cual sería usada como base para paso del tutorial mostrado al cliente. Cada uno de los diferentes pasos y posibilidades que el cliente expresó inicialmente fue validado y se generó una validación automatizada de los mismos mediante una suite de pruebas automatizadas realizadas en CodeceptJS para evitar tener problemas de regresión a medida que se avanzaba en el desarrollo del mismo.
Dado que la plataforma permite a cada proveedor tener diferentes elementos como estilos, esquemas de color, logo, nombres y ubicación, se agregó a la API la posibilidad de integrarlos y se generaron 3 esquemas iniciales de colores como prueba. También se actualizó el punto de entrada de la API que esta a cargo de generar el script inicial para que tenga en cuenta todos estos elementos y la configuración de pago según la pasarela de pago elegida (Braintree o WorldPay). Esto permite que en una sola operación se pueda personalizar completamente la aplicación para cliente.
Dado que la plataforma permite elegir como tipo de servicio la posibilidad de capturar solo nuevos clientes, manejar clientes actuales o ambos, dentro del proceso de validación se generaron los casos de pruebas para probar cada una de las características que se agregan en cada uno de los flujos para cada una de las posibilidades. Estos flujos permiten validar automáticamente todo antes de publicar nuevos cambios.
Despliegue y prueba inicial
Una vez que el desarrollo fue completado se publicó todo el proyecto en un servicio auto-escalable de AWS Beanstalk que combina contenedores de EC2 donde se ejecuta la API la cual provee los archivos de configuración y tags javascript iniciales. La aplicación ReactJS es cargada automáticamente desde S3 y la API se encarga de comunicarse directamente con el sistema de administración directamente. Las transacciones de métodos de pago fueron configurados en modo prueba para validar que los pagos funcionaran correctamente.
Para realizar la demostración de la aplicación, se uso uno de los sitios web del cliente para esta configuración y se realizaron las pruebas de reserva de solicitudes, pagos y validación de email teniendo en cuenta todos los flujos posibles desde el sitio web mismo. Como entornos de prueba propios para nuevas características, se uso un proceso automático de publicación para subir todo lo necesario a la plataforma Heroku. Para validar los problemas que ocurren a los clientes y tener información confiable para eliminar y validar los errores y dar las soluciones adecuadas, se integró el sistema Sentry dentro del sistema API como de la aplicación ReactJS.
