Consultant Perspective: How I Built my First Web App with Flask

Article overview: Rockborne consultant Max shares their experience diving into the world of web development by creating their first web app with Flask.

After completing my training with Rockborne, I began to work on a restaurant project where I helped design software to capture data that was generated by a food business.

The task involved crafting a Python-based web application for the restaurant’s point of sale system (POS). This POS would allow servers in the restaurant to place orders and take payments. This was required to be built as a web app to allow Selenium bots to interact with it to generate sample data further into the project.

This requirement allowed me to venture into web development and explore new skills and languages, including Flask, HTML, CSS, and JavaScript.

My approach

My initial step was to ensure that I was following best practices and adhering to the industry’s standards. To research these, I began by exploring online tutorials, and tapping into the wealth of knowledge available on platforms like YouTube, freeCodeCamp, and of course, the Flask documentation.

These all highlighted the importance of tidy and well-organised code to make the project manageable. Having a well-organised codebase also made it easy for the collaborative aspect of the project as by keeping each section separate, they could be worked on simultaneously. This involved using Flask blueprints for each of the pages of the web app.

For those unfamiliar with the concept, blueprints in Flask are a way of organising related views, templates, and other components into a structured hierarchy. Constructing the app page by page, blueprint by blueprint, allowed me to gradually shape the application to meet the restaurant’s requirements.

Project structure

Maintaining a well-structured project directory is crucial to keeping the codebase clean. I did this by organizing my Python, HTML, CSS, and JavaScript functions into a Python package that could be imported into the main code. This module should include:

• Python and JavaScript functions
  • These functions drive the web app’s functionality, handling tasks like user input processing, data interactions, and enhancing user experience through dynamic content updates.
• Flask blueprints
  • Blueprints organise routes and views, telling Flask which HTML templates to render for different sections of the web app.
• HTML templates
  • Templates define the layout and content of web pages, enabling dynamic data insertion from the backend. They ensure responsive content presentation and flexibility.
• Images and CSS
  • Images and CSS enhance visual appeal and user experience. Images contribute branding elements, while CSS styles fonts, colors, layouts, and animations for a consistent and engaging design.

This approach of creating this as a Python package involved creating an __init__.py file within the project folder. This seemingly simple file transforms the folder into a Python package that can be imported and used as a module in other parts of the project. Within the __init__.py file, I included essential imports and defined functions that would be shared across different parts of the web app.

To further improve the structure of the web app, I used a base HTML template. Initially, I was writing each HTML file from scratch and then copying across elements to keep the styling of the web app consistent.

I then discovered that it is best practice to use a base.html to give a consistent style and make each subsequent template extend this. This avoids unnecessary repetition and improves code clarity.

Additionally, a crucial aspect of building the web app was establishing a secure connection to the restaurant’s database. To achieve this, I use the Python module psycopg2, a PostgreSQL adapter for Python. This allowed me to seamlessly integrate the web app with the restaurant’s database, ensuring that orders placed and payments made through the app were accurately reflected in the backend system.

Development process

As with any programming project, I experienced bugs and issues on my journey. I had to come up with error-handling and debugging strategies to overcome these issues in an efficient manner. In the backend, I placed Python print statements at critical junctures within my codebase. These print statements helped me track the flow of data, inspect variable values, and identify potential bottlenecks or errors.

I also leveraged Flask’s built-in debugging capabilities by enabling the debug mode during development. This feature provided detailed error messages, traceback information, and a live debugger interface in the browser. This approach allowed me to gain insights into the server-side operations and swiftly pinpoint the root causes of issues.

On the client side, I employed JavaScript’s console.log() statements to monitor the behavior of my web app in the browser’s developer console. These logs proved invaluable in tracking the flow of data through the user interface, catching client-side errors, and verifying the execution of JavaScript functions.

To further train myself in best practices, I used Python’s PEP 8 guidelines for writing my code. By following these, I ensured that my code remained tidy and easy to maintain. This involved using clear variable names, incorporating function docstrings, and including explanatory comments where necessary. This approach not only helped my development process and debugging but also allowed others to easily use or contribute to my codebase. As this was a group project, members joined and left at different stages, so well-documented code was an essential tool for ensuring smooth transitions.

Conclusions

This project was a fantastic learning experience that helped me elevate my web development skills and empowered me to explore new territories independently. Working with Flask, diving into HTML and CSS, and tackling the intricacies of JavaScript has not only expanded my technical toolkit but has also honed my problem-solving abilities.

This journey was a testament to my determination, and it solidified my belief in the transformative power of continuous learning.

Learning about back-end and front-end web development might feel overwhelming at first, but breaking down the task into small steps and practicing regularly will gradually build your confidence. By using the best practises and good project structure, I was able to scale my project easily.

Interested in joining our diverse team? Find out more about the Rockborne graduate programme here.