Today we are building a web application using the Flask microframework and Bootstrap 4 to help with styling. The styles will stay simple to keep the focus on the Python code that is needed to actually build the functionality that we need.
You should have an understanding of HTML and CSS to build basic static webpages. It will also help to have an understanding of Bootstrap 4 and how to use their grid system and built in CSS classes. The final thing you will need is a basic understanding of Python. There will be more of a focus spent on explaining the Flask specific pieces and not basic Python syntax.
What is Flask?
Flask is a microframework that allows you to build web applications. Flask handles all of the behind the scenes logic that is needed for the application that we are building to function. Its dependencies are Werkzeug, a WSGI utility library and Jinja2, a template engine. We will use the Jinja2 syntax to build our templates with the data that we pull from the API. But before we jump into all of that, there are a couple of steps to set up this project.
This project requires flask, requests, and the json modules. The json module is built in so we don’t need to do anything to set that up, however we will need to install Flask and requests. This is a very simple process using Pip. Open up a terminal window and type in
pip install Flask
Do the same with requests.
pip install requests
With Flask and requests installed we can begin setting up the project and running a basic example.
Go ahead and open up a text editor and create a new file called app.py. This file will hold all of our python code for this project. The following code will set up a Flask project.
from flask import Flaskapp = Flask(__name__)
return "Hello World"
In line 1 we import Flask. In line 3 we initialize the flask app. These two lines don’t really change from app to app, they are just necessary for Flask to function properly. In line 6 we begin building our app. First we define a decorator and pass in a url path as an parameter (“/”). In this case a single forward slash tells flask that we want this to open at the root domain name that the application is running on. After that we need to define a function, in this case we name it index and for now we are not passing in any parameters. After that we will write any code to make the page function including what html to render on the screen and any logic needed to make the page function as it should. For now, we are just going to render “Hello World” on the screen as an example.
To run this application, open up a terminal window and navigate to the directory holding this file you just created and type
to run the application on the developmental server. You should see “Serving Flask app” and then the name of your python file. A couple lines below that you should see what address the app is running on. Type that ip address into a browser and you should see “Hello World” on the screen.
This is where we are stopping for part one. In the next article we will work on writing the html for this project and creating some CSS styles for it as well.