Tech & Experiences vol. 4

Tech & Experiences es la forma relámpago en la que la comunidad techie de Flux IT comparte sus experiencias y aprendizajes más jugosos de proyectos en múltiples industrias.

Flux IT
Flux IT Thoughts
Published in
6 min readSep 2, 2024

--

Emails con Jinja2

Por Gabriel Moran, Technical Leader

Escenario

Teníamos el desafío de hacer una nueva versión de un servicio de emails para personas usuarias que utilizan la plataforma de uno de nuestros clientes. Estos emails funcionan como resúmenes diarios que compaginan todas las novedades de las últimas 24 horas a partir de los intereses de cada persona usuaria. El servicio está implementado en Python y se ejecuta como una función Lambda de AWS, disparada una vez por día por un cron job.

En el pasado, y para las versiones anteriores de este servicio, veníamos utilizando el sistema de templating de SendGrid que, a pesar de ser tan popular, presenta bastantes problemas y discrepancias entre la previsualización al momento de desarrollar los templates, y los emails generados que efectivamente se envían.

Sumado a los inconvenientes de esta herramienta, y teniendo en cuenta que los emails que generamos tienen una gran carga de maquetado y estilos, se agrega la complejidad de tener que definir todo el template en un solo archivo HTML con estilos en línea (en su mayoría) y con la lógica de los renderizados condicionales (común en herramientas de templating) embebida dentro de este archivo.

¿Cómo lo resolvimos?

Para esta nueva versión, pensamos en hacer algo mucho más mantenible a largo plazo y, sobre todo, más sencillo de desarrollar. La solución que encontramos a este problema fue una combinación de 3 piezas claves. Si bien para el envío de correos seguimos utilizando SendGrid, reemplazamos el servicio de templating que esta herramienta ofrece por el uso en conjunto de Jinja2 y CSS inline, ambas librerías de Python con funciones diferentes pero asociadas.

Utilizamos Jinja2 para armar el template del email. Sin embargo, para no caer en el mismo problema de tener un solo archivo que represente el template completo, optamos por aprovechar las capacidades de esta librería de generar bloques sobreescribibles de código y macros que se pueden llamar y embeber en otros templates, diseñando así una estructura de layouts y componentes.

En lo que refiere a los estilos CSS, también hicimos uso de la capacidad de incluir otros templates para inyectar dentro de los componentes el contenido de archivos CSS separados del maquetado, emulando una estructura y nomenclatura lo más similar posible a las convenciones de React.

Por último, ya renderizado el HTML final con los componentes instanciados y las clases CSS embebidas, el último paso es pasar este documento generado por la librería CSS inline, que no es más que un inliner de CSS que remueve las clases que no tengan media queries e inyecta los estilos en los tags HTML que utilicen esas clases.

Todo esto permitió tener una solución que fuera fácil de desarrollar y mantener frente a los cambios solicitados por el cliente. Además, se suma el beneficio de que los templates a partir de los cuales se generan los emails pueden compartir estructura y ser versionados con el resto del código de la solución.

Creo firmemente que es importante no quedarse con una solución conocida sólo porque sabemos que funciona, y abrazar lo más posible la premisa de la mejora continua, no sólo en la calidad de los entregables, sino a la hora de conseguir y compartir herramientas que hagan que nuestro trabajo del día a día sea más ameno, sencillo y menos propenso a errores.

Bonus track!

Además, para simplificar aún más el proceso de desarrollo, armamos una pequeña herramienta que fuera capaz de renderizar cualquier componente o layout y enviar el resultado como email, para poder probarlo tanto de manera aislada como conjunta.

Si bien en primera instancia parecía que esta herramienta sólo nos inyectaba más velocidad al momento de realizar pruebas, en realidad fue crucial, porque nos dio la posibilidad de detectar de manera temprana las discrepancias entre estilos que suelen darse al renderizar emails en los distintos servicios (como Gmail, Outlook, etc.).

IA score answers app: Aplicación para evaluar las preguntas y respuestas proporcionadas por un chatbot

Por Ornella Irigo, Software Developer

El escenario

En la fase de investigación y desarrollo de un chatbot de uso interno en Flux IT, diseñado para responder a consultas relacionadas con documentos de procedimientos del área de Valor Humano, se presentó la necesidad de crear una aplicación con una interfaz intuitiva que permita a las personas usuarias calificar con una escala de 1 a 5 las preguntas y respuestas generadas en esta etapa inicial del proyecto.

El objetivo era determinar la efectividad del chatbot en esta fase y compararla con la evaluación de modelos internos de GPT.

¿Cómo lo resolvimos?

Desarrollamos la aplicación IA score answers app”, una herramienta que permite a las personas usuarias seleccionar su nombre, apellido y área y, con esta información, presentar una pregunta y respuesta aleatoria para evaluar su efectividad.

Así, la persona revisa la pregunta y la respuesta proporcionada por el chatbot y la califica con una puntuación de 1 a 5 (en la página se incluyen las definiciones de las puntuaciones para guiarlas en su evaluación). Una vez calificada, la información otorgada junto con el score seleccionado, se almacenan en una base de datos.

En el desarrollo de la app usamos Streamlit, un marco de trabajo de código abierto en Python que facilita la creación de aplicaciones web interactivas y de análisis de datos.

Además, una vez completado el desarrollo, la implementación de Docker y Kubernetes presentó su propio conjunto de retos. Usamos Docker para crear contenedores de la aplicación, asegurando que los entornos sean consistentes y reproducibles; y Kubernetes para la orquestación de estos contenedores, facilitando la escalabilidad y gestión de la aplicación.

La participación de developers especializados en DevOps y Python (mención especial para Gerardo Velázquez, Aimon Cabral y Leonardo Galdames) fue crucial para avanzar con el despliegue de la aplicación, quienes ayudaron a configurar correctamente Docker y Kubernetes, garantizando un despliegue eficiente y efectivo de la app en el entorno de Flux IT.

Un 2FA a medida para un banco provincial

Por Gabriel García, Technical Leader

El escenario

El mundo de las finanzas y las transacciones bancarias ha ido evolucionando constantemente desde que las aplicaciones han tomado más y más protagonismo. En consecuencia, las medidas de seguridad también han tenido que evolucionar y afrontar los nuevos desafíos que este contexto presenta.

Acompañando a uno de nuestros clientes bancarios a modernizar la seguridad en su aplicación mobile y su home banking, abordamos la implementación de un sistema de doble factor que interviniera en la validación de las transacciones.

¿Qué es un soft token?

El concepto de soft token está relacionado con el uso de un algoritmo que genera, de manera constante y con cortos tiempos de duración, una combinación numérica o alfanumérica que las aplicaciones requieren para verificar que la persona que está iniciando una operación sea quien dice ser.

Así, para completar la operación solicitada, este código o token se envía a un correo electrónico de la persona usuaria, o a un teléfono celular registrado, y debe validarse y coincidir antes de que el tiempo establecido se venza.

¿Cómo lo resolvimos?

Para encarar nuestro desafío, diseñamos un componente en Angular capaz de interponerse entre las diferentes operaciones en las que se requiere de un doble factor de autenticación (alrededor de una treintena de operaciones), y su finalización.

Una de las claves de este componente es que tenía que ser versátil, ya que las operaciones son diferentes entre sí y la información que debe manejar el componente es muy variada.

Además, nos encontramos con la dificultad de que el token debía interactuar con un sistema de notificaciones, tanto en el móvil como en la aplicación del home banking, y sincronizar sus relojes.

Usamos Angular para la implementación del soft token en la banca web, React Native a la hora de implementar el soft token en la aplicación móvil, Node.js como API Gateway, y otras herramientas como Firebase para las notificaciones.

Luego de una gran integración entre nuestros equipos y el del cliente, logramos desarrollar el soft token y fusionarlo al sistema core del banco.

Conocé más sobre Flux IT: Website · Instagram · LinkedIn · Twitter · Dribbble · Breezy

--

--

Flux IT
Flux IT Thoughts

Desarrollamos soluciones de alto voltaje que transforman la realidad tecnológica de grandes empresas.