Tech & Experiences Vol. 4
Tech & Experiences is the lightning-fast way in which the Flux IT tech community shares its most juicy experiences and learnings from projects in multiple industries.
Emails with Jinja2
By Gabriel Moran, Technical Leader
Scenario
We faced the challenge of developing a new version of an email service for users of one of our client’s platforms. These emails serve as daily summaries that compile all the news from the last 24 hours based on each user’s interests. The service is implemented in Python and runs as an AWS Lambda function which is triggered once a day by a cron job.
In the past, for previous versions of this service, we would use SendGrid’s templating system, which, although popular, has many issues and discrepancies between the preview when developing the templates and the actual emails that are sent.
Adding to the inconveniences of this tool, and considering that the emails we create are rich in terms of layout and design, there is the added complexity of needing to define the entire template in a single HTML file with mostly inline styles while following the conditional rendering logic (common in templating tools) which is embedded within that file.
How We Solved It
For this new version, we aimed at creating something much more sustainable in the long term, and above all, easier to develop. The solution we found to this problem was a combination of three key components. While we continued to use SendGrid for email delivery, we replaced the templating service offered by this tool with the combined use of Jinja2 and inline CSS, both Python libraries with different yet related functions.
We used Jinja2 to build the email template. However, to address the issue of having a single file representing the entire template, we decided to leverage this library’s features to generate overwritable code blocks and macros that could be called and embedded in other templates so as to design a layout and components structure.
Regarding CSS styles, we also took advantage of the possibility to include other templates so as to inject the content of CSS files into the components, separating them from the layout, emulating a structure and naming conventions as similar as possible to React’s conventions.
Finally, once the final HTML was rendered with instantiated components and embedded CSS types, the last step was to process this generated document through the inline CSS library, which is simply a CSS inliner that removes types with no media queries and injects the styles into the HTML tags that use such types.
All this allowed us to come up with a solution that was easy to develop and sustain throughout client-requested changes. Additionally, the benefit was that the templates from which the emails were generated could share structure and be included in version control with the rest of the solution’s code.
I firmly believe that it is important not to stick with a well-known solution just because we know it works and to embrace the premise of continuous improvement as much as possible — not only when it comes to deliverables’ quality but also when finding and sharing tools that make our daily tasks more pleasant, simpler, and less error-prone.
Bonus track!
In addition, to simplify the development process even further, we created a small tool capable of rendering any component or layout and sending the result as an email for testing both in isolation and as a whole.
While at first, it seemed that this tool only injected more speed into our testing process, it turned out to be crucial in the detection of discrepancies between styles that often occurred when rendering emails in different services (like Gmail, Outlook, etc.).
IA Score Answers App: An App to Evaluate Questions and Answers Provided by a Chatbot
By Ornella Irigo, Software Developer
Scenario
During the research and development phase of an internally used chatbot at Flux IT, which was designed to answer queries related to procedure documents from the Human Resources Area, there arose a need to create an app with an intuitive interface that allowed users to rate the questions and answers generated in this initial stage of the project on a scale of 1 to 5.
The goal was to determine the chatbot’s effectiveness in this phase and to compare it with the assessment of internal GPT models.
How We Solved It
We developed “IA Score Answers App,” a tool that allows users to choose their name, last name, and area, and with this information, users can make a random question and answer to assess its effectiveness.
In this way, the user reviews the question and answer provided by the chatbot and rates it with a score from 1 to 5 (the site includes definitions of the scores to guide users in their evaluation). Once rated, both the information given and the chosen score are stored in a database.
For the app development, we used Streamlit, an open-source Python framework which makes it easier to develop interactive web apps and perform data analysis.
Additionally, once the development was complete, the implementation of Docker and Kubernetes presented its own set of challenges. We used Docker to create app containers, ensuring that environments are consistent and replicable, and Kubernetes for the orchestration of these containers, thus facilitating app scalability and management.
The participation of developers specialized in DevOps and Python (special mention to Gerardo Velázquez, Aimon Cabral, and Leonardo Galdames) was crucial in advancing the app’s deployment, since they helped to correctly configure Docker and Kubernetes, thus ensuring an efficient and effective deployment of the app within Flux IT’s environment.
A Customized 2FA for a Provincial Bank
By Gabriel García, Technical Leader
Scenario
The world of finance and banking transactions has been constantly evolving ever since apps have taken on more prominence. Consequently, security measures have also had to evolve to overcome the new challenges posed by this context.
While accompanying one of our banking clients in modernizing security on their mobile app and home banking, we addressed the implementation of a two-factor authentication system that intervened in the validation of transactions.
What Is a Soft Token?
The concept of a soft token relates to the use of an algorithm that continuously generates a numeric or alphanumeric combination which is valid for short periods of time. This combination is required by apps to verify that the person initiating an operation is who they claim to be.
Therefore, to complete the requested operation, this code or token is sent to the user’s email or a registered mobile phone, and it must be validated and matched before the specified time expires.
How We Solved It
To tackle our challenge, we designed a component in Angular capable of intervening between the various operations that require two-factor authentication (around thirty operations) and their completion.
One aspect of this component was that it had to be versatile since operations differed from one another and the information that the component had to handle was remarkably diverse.
We also faced the challenge that the token needed to interact with a notification system on both the mobile app and the home banking app, while synchronizing their clocks.
We used Angular for the implementation of the soft token in web banking, React Native for the mobile app, Node.js for the API Gateway, and other tools like Firebase for notifications.
After a successful collaboration between our teams and the client’s, we managed to develop the soft token and integrated it into the bank’s core system.
