Python Flask: The Guide to the Ultimate UI
Just Recently I was trying to create a UI for my facial recognition-based attendance tracker so that it would be easier for general users to use. I reasonably guessed based on some prior knowledge, that there would be some really nice library like how Java has JavaFX. However, upon some research, the best I was able to find were Kivy and Tkinter, which in their own regard are some very nice UI libraries, however, they were not exactly what I was looking for.
I remember looking at some websites and commenting on how nice they were. And that's when I had the epiphany: Can I use HTML, CSS, and Javascript to create a Python UI? Sure enough, I could. After a bit of research, I was down to two frameworks: Python Flask or Django. With no preference of one over the other, I chose Flask.
Flask allows you to integrate Python into HTML and use Python as your backend and HTML, CSS, and JS as your frontend. Through the integration, you can create a beautiful web application. However, I was not looking to make a web application but rather a desktop application. That's when I came across the WebUI library which allowed me to convert a Web application into a Desktop application.
Let's start with a simple HTML and Python Flask Application.
Python File:
application.py
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
@app.route('/index')
def index():
return render_template('index.html')if __name__ == '__main__':
app.run(debug=True)
HTML File:
templates/index.html
<!DOCTYPE html>
<html>
<body></body>
</html>
In the first file you will notice that we create an app using Flask. This will serve as the basis of connecting Python to HTML. We then come across a decorator the @app.route(‘/’). What this does is that when you run application.py, your command line should give you localhost such as 127.0.0.1:5000 and when you go to 127.0.0.1:5000/ it will call the function index() which will then render index.html. Similarly, the same will happen if you go to 127.0.0.1:5000/index because of the @app.route(‘/index’) decorator. Finally, if you go down to the bottom, you will notice the app.run(debug=True). This will allow you to run your web application via the localhost. You are probably wondering what the debug=True allows you to do. When debugging mode is on, you are able to make edits within your code and refresh the page to see the updates live rather than having to restart your localhost every time.
Here are some UI’s I have made through using a Flask backend:
Flask is a powerful tool to Python application developers. I would highly recommend one learn it because there is a good chance you will be using it sooner or later. If you have any questions then feel free to leave me a message on medium!
