DigiRamp — Flask application
The 21st of January 2021 was my first day at Holberton School, my first day to start learning programming and how to build software, and the 29th of October 2021 was the presentation day of the result of 9 months of struggle and hard work. In this blog, I will present my first portfolio project!
1. Introduction
- Purpose and Timeline
My project is a web application solution for airline companies. It offers leaner communication across multiple departments while preparing the aircraft for the next flight.
Week 1, was dedicated to the ideation phase, reading resources and asking people in the field, designing the architecture of the web application, and deciding what technologies to use.
Week 2, was dedicated to clarifying the business logic, and what features should be done that are close to the real-life situation!
Week 3, was dedicated to planning and setting objectives with deadlines. Also, start setting up the flask application basics and the database.
In week 4, I started building the front end, and setting up the base template. Then I started developing the back end, setting the controllers and forms with Python Flask micro-framework one feature after the other, and finally, the MVP was completed.
During week 5, I had the opportunity to start an observation internship with the Tunisair airline company, discovering the field more closely and comparing the real-life situation with the built MVP. Then I have deployed the application with digital ocean VPS (virtual private server) using Nginx and Gunicorn to serve the static and the dynamic part of the application!
- Personal focus
For this portfolio project, my personal focus was to apply my learning knowledge of coding and frameworks learned(python, js, Html, CSS, flask micro-framework, Nginx. ) for the purpose of solving a real-life problem in the field that I am interested in (aeronautics).
2. the story behind
Since my childhood, my aspiration is to work in the aviation sector. I admire this field for many reasons, starting with the physics principles behind it that make such a big aircraft fly! To the whole discipline and rules that constitute the aeronautical field and the fact that teams are working all together for the same goal, which is to make travel happen and ensure that the airplane takes off safely and on time.
Aviation has always been my inspiration! And when I had the opportunity with Holberton school to build my portfolio project that solves a real problem, I didn’t hesitate to take my first step and start with what I have of coding skills and humble knowledge of this field to build DigiRamp!
3. Getting more technical
For the Frontend I chosen to use a template built with HTML5, CSS3 and bootstrap5, for three main reasons. First to facilitate the design of the web application, second it is an opportunity to learn bootstrap and third, I preferred not starting from scratch to gain more time on the design. Also for the frontend I have used JavaScript, Jquery and Jinja templating engine to make the application more dynamic.
back end code for the API call:
This is an overview of some features I’ve completed.
1- Add a flight:
2- supervise a flight turnaround processes:
3- upload and display required information!:
Back end code:
4- List the operated flight and search for a flight number
Back end code:
4. The most difficult technical challenge
Build the “ supervise the turnaround processes” feature:
— STAR Method —
Situation ** At this point of the project I have to build a solution for the ramp agent that supervises the flight preparation to communicate with different stockholders about the situation at the airport ramp and record the start and the end of a specific process.
Task** For each process I have to add a button that saves the process status, a button to save the start time, and a final button to save the end time of that process and save all these records to the database. More explanation:
1- status: “NO” as the default status — not ready, “YES” when the process is really ready.
2- Start and End Time: button to detect the time of the click. Print it to the user and save it to the database.
At first, I had no idea what to do and how to start with all these processes to record.
Action**I made things easier by building something visual = the front end static part(table with buttons).
Then I moved to the back end side. for each button, I added a script tag to make it dynamic.
With the help of jquery it was easy to manipulate the DOM, the dynamic part is complete successfully.
1- detect the event then respond to the user ( change the color of the button and the textcontent or print the exact time or allow the use of the next button — Case: not saving the time before having a status, not saving the end time before the start time — )
2- save that data by sending it with an httprequest object
3- with python there is a function that will accept a request and read the data sent and finally save it to the database.
Result**
1- friendly and guided UI for the tables
2- we have records for the data we need
5. What I’ve learned
- Technical take-aways:
In this portfolio project I learned how to build a flask application using the flask third parties modules like Flask-wtf — to simply manipulate the forms, Flask-migrate — to update the databases with just 2 commands, flask_sqlalchemy — to create and update tables in the database, flask_caching — to cach the data called from the API for IATA airport codes.
Adding, I learned how to build controllers and render templates with url_for() or write the path of the template directly depending on the call.
Not forgetting the Jinja2 templating engine that I have used a lot in the HTML templates to write ‘if’ conditions to manipulate which HTML tag to display, print data from the databases, and save the input of the forms.
Jinja2 was also helpful in building the base template and adding any block of code to the desired template.
lastly, my big achievement is to deploy the application to the digital ocean VPS, configuration the Nginx and Gunicorn with the supervisor to serve the application. This video was so helpful.
- What I might do differently:
After finishing the Project within the deadline and having a working web application, I thought that there a lot of things I might have done differently, like the functions that handle the turnaround processes buttons, and I might have used a separate JS file to handle the Jquey.
In final words, what ever the size of the project using the divide and conquer concept to turn it into small pieces helped me a lot.
Thank you for reading my blog, I am a software developer student at Holberton school, I love technology and I admire aviation.
Here is my GitHub link for this project.
You can visit the DigiRamp application with this link(it is not available anymore!)
This is my LinkedIn Profile, I am happy to connect!