Flask Web Application Development. Introduction

How This Tutorial Is Organized

The tutorial is divided into four articles:

1. Introduction – Dive into web development with Flask. This article explains the basics of web development with Flask (You are here)
2. Part I – Setting up a local development environment
   • Step 1: Create virtual environment for all required dependencies
   • Step 2: required packages: Flask, psycopg2, SQLAlchemy
   • Step 3: Create requirements.txt file with all dependencies listed
   • Step 4: Install PostgreSQL 9.3 and create the local database
   • Step 5: Organize the structure of the application
   • Step 6: Make Flask say “Hello”
3. Part II – Application development
   • Step 1: Database design
   • Step 2: Create the initial database
   • Step 3: Prepare Flask-SQLAlchemy models
   • Step 4: Define view functions
   • Step 5: Templates
   • Step 6: Beautify webapp with Twitter Bootstrap
4. Part III – Deployment to Heroku

 

The aim for this tutorial is to build a simple TODO web application using Flask microframework, SQLalchemy,PostgreSQL 9.3 and Vertabelo and finally to deploy our existing app to the Heroku cloud. Please, don’t treat this application as a final product for production. The main purpose is to show the process of developing a web app in Python.

What We Are Building

This series follows the development of a simple small-sized CRUD app using Flask. The goal of this tutorial is to have a working application that will enable you to:

• add/update a TODO to list for a particular category and with priority,
• delete/mark a TODO as DONE,
• manage categories.

The finished code is hosted on Github.

I have planned three screens:

1. Create category screen

   

2. Create todo screen

   A user can create a new todo by completing the form with a description, selecting a priority from the existing priorities and selecting a category from the existing categories.

   

3. Main screen which lists all todos and available categories. By clicking on a category in the category menu on the left-hand side of the screen, a list of todos from the chosen category are listed.

   

Technology Stack – A Few Words About Each Element

Database: PostgreSQL 9.3

My choice for the database during development was PostgreSQL, which is one the most frequently chosen open source databases.

Database ORM: SQLAlchemy

To map our designed relational model into an object we use object relational mapper (ORM) SQLAlchemy. In this application we will use Flask-SQLAlchemy extension – a simple wrapper for SQLAlchemy.

Framework: Flask

Flask is a Python microframework. It’s main job is to take data from the database (by querying it with SQL using ORM) and embed the retrieved data into HTML using the Jinja2 template engine. This data can be displayed in a browser.

CSS Framework: Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Dive Into Web Development With Flask

Before we dive into real application development we will touch on some of the principles associated with web development. Indeed, it isn’t an easy task. Many libraries and frameworks provide some help. The plethora of choices and possibilities are enormous. That’s why we’ll start with a quick example of how to do this by looking at a typical Flask webapp architecture.

At the lowest level there’s a database because we need a place to store data.

The Flask framework, with the help of some extensions, retrieves the data from the database and renders into a viewable format.

Let’s start with retrieving data. The role of ORM (Object-relational Mapping) can is to map the relational model into an object. There are multiple implementations of ORM in many programming languages. In Python, the most popular is SQLAlchemy which is what we’ll use for our example application.

So, the application instance talks to a database via SQLAlchemy. Now we can process the retrieved data. The application instance can’t deliver the rendered web site on it’s own. Instead, this task is passed to a web server - another entity that sits between the Flask application and the browser. The web server participates in the communication with the browser – it processes requests via HTTP/HTTPS and passes these requests to the application instance, using a protocol called Web Server Gateway Interface (WSGI).

By combining HTML, CSS and JavaScript, a browser is able to render a nice application. HTML stands for hyper text markup language. It’s role is to define the structure of web site. CSS (Cascading Style Sheets) describes how a web site should look. In turn, JavaScript is used to implement the dynamic behavior of web site.

Next Part »