Developing Web Applications on a Raspberry Pi with Flask
An exploration of the different frameworks you can use with your Raspberry Pi to connect to the web!
So, you've got yourself a Raspberry Pi, and now you want to connect to the internet to display all the data you’ve collected. Exciting stuff! But how in the heck do you actually do that?
There are a few popular methods to create web servers and web applications using your small single-board computer, and today we're going to cover one of the most commonly used ones - Flask!
First, let's cover what a web framework is. A web application framework is a collection of libraries and modules that enable web application developers to write applications without worrying about low-level details such as protocol and thread management.
Each framework has a different way that it builds routes, models, views, database interactions, and the overall application configuration. All of this comes down to a compact set of API endpoints that each back end must implement, along with the allowed HTTP methods:
- GET: retrieves data
- POST: sends HTML from data to server
- HEAD: same as GET method, but just returns the HTTP headers, and no response body
- PUT: replaces the resource at the current URL with the resource contained within the request
- DELETE: deletes the specified resource
Flask is one of the most popular Python web application frameworks, because it's easy to get started with and is incredibly readable.
It's built on Jinja2, a Python template engine that renders dynamic web pages. This is what ultimately allows you to pass Python variables into Flask's HTML templates. It's also built on Werkzeug, which implements a Web Server Gateway Interface (WSGI) server to run Python code to create a web application.
Starting your first application in Flask is just a few lines of code. Make sure to check that you have Python 3 downloaded on your Pi. We will specifically use pip to install Flask, like this:
sudo pip3 install flask
Here's the web app:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return 'Hello SparkFun World!'
if __name__ == '__main__':
app.run() `
However, just because Flask is a microframework doesn't mean that the whole app exists inside an Python file. You'll ultimately have many other files, including HTML and CSS to design your webpage how you'd like. One of the best parts of Flask is that it allows you to create templates so your HTML stays consistent throughout your entire website.
First, make a directory within your app (mkdir app/templates) to create your template. Mine will be called index.html, and will display the air quality at different coordinates (thanks to my pHAT and Qwiic Environmental Sensors!).
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<h1> GPS Coordinates: {{ coordinates }} </h1>
<h1> Air Quality Index: {{ AQI }} </h1>
</body>
</html>
The {{ and }} symbols show Python variables on a webpage. They are just placeholders for variables.
Now, to use our template we have to render it; Flask has a module that can do that: from flask import render_template. We'll also change a bit of the code in our initial web app to allow for this new index file to be read.
app.route('/')
@app.route('/index')
def index():
coordinates_Boulder = '40.0150° N, 105.2705° W'
AQI_Boulder = '126'
return render_template('index.html', title='Air Quality in Colorado', coordinates = coordinates_Boulder, AQI = AQI_Boulder)
Instead of having a static website, it'd be nice to continuously monitor the air quality, right?
import RPi.GPIO as GPIO
from flask import Flask, render_template
app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
sen = 16
senStats = GPIO.LOW
# Set button and PIR sensor pins as an input
GPIO.setup(sen, GPIO.IN)
@app.route("/")
def index():
# Read Sensors Status
senStats = GPIO.input(sen)
templateData = {
'title' : 'Air Quality Index',
'Air Quality Sensor' : senStats
}
return render_template('index.html', **templateData)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80, debug=True)
Flask allows us to read in data through Python and display it on our webpage.
The opportunities are endless with this. You can connect with SQLAlchemy to enable a database abstraction layer, customize your webpage with CSS, or ultimately push it to the cloud over Google Cloud, Heroku or AWS. Let us know what kind of web dev you want to see more of, whether it's design and user experience, cloud technologies, or database integration!
