As some of you might know, I mostly work with Java on a daily basis, and, on top of that, and honestly speaking, I don't really build a lot of real web apps during my free time. So, I figured a good way to stay motivated, would be to...write a new post series about it! Let's see how far I get.
The single-page web app
The application I'll build will be very simple, a recipe aggregator using REST.
Users will be presented with a search bar where they can enter a list of comma separated ingredients and hit a search button.
Then, as a result of their search query, they get back an interactive list of recipes where they can click on the title of a recipe and in a sub-view of the current page, they can see the recipe details, ingredients list, see an image etc.
I'll use one of the many free and freemium APIs available online to get this information. It seems super trivial and it is, but, if you've never built a lot of stuff before, it can be slightly overwhelming...Let's distill a kind of roadmap to guide our efforts.
Flask: our framework of choice
The roadmap we can follow, can be something along the lines of:
1) We need to install and configure Python and Flask locally.
2) Connect to the API we'll be consuming and ideally test the endpoints we'll be using in tools like Postman, to ensure it all works.
3) Decide on how to present the page on the front-end. For this, Flask has a small template engine it works very well with, called Jinja, which we'll be using. CSS for the presentation of course :)
4) Understand how we can make vanilla get/post requests with Python and how they connect with Flask's philosophy.
5) How to potentially model the JSON responses we'll receive by adapting them into our own front-end model objects, and figure if Jinja even supports things like iteration and table building.
6) Drilldown into a record should be our next step. We need information about the current record we've clicked on and a way to retrieve the relevant information about it.
7) Handling errors with users input and/or invalid responses should be our concern as well, both for security reasons and UX reasons as well.
8) Tie it all together by deploying this on a free deployment platform like Heroku so we can use it and see it live!
Wow! That's quite a long list for such a small application! This is definitely one of the benefits of building something yourself. You realize how much work it is, even to build such a simple web application. Think of the valuable lessons you can learn along every milestone of the road. It's both challenging and really rewarding, and also not easy of course! But the knowledge gained and the sense of accomplishment will be great! :)
Flask Hello World
Let's see how to write a basic flask endpoint that returns a greet to us:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
Seems pretty simple, right?
The magic happens in the line:
app = Flask(__name__)
That line will create a new Flask application by creating an instance of the Flask class.
The first argument is the name of the application’s module or package. If you are using a single module (as in this example), you should use name because depending on if it’s started as application or imported as module the name will be different ('main' versus the actual import name). This is needed so that Flask knows where to look for templates, static files, and so on.
We then use the route() decorator to tell Flask what URL should trigger our function.
The function is given a name which is also used to generate URLs for that particular function, and returns the message we want to display in the user’s browser.
Just save it as hello.py or something similar. Make sure to not call your application flask.py because this would conflict with Flask itself.
To run the application you can either use the flask command or python’s -m switch with Flask. Before you can do that you need to tell your terminal the application to work with by exporting the FLASK_APP environment variable:
$ export FLASK_APP=hello.py
$ flask run
* Running on http://127.0.0.1:5000/
Alternatively you can use python -m flask:
$ export FLASK_APP=hello.py
$ python -m flask run
* Running on http://127.0.0.1:5000/
This launches a very simple builtin server, which is good enough for testing but probably not what you want to use in production. Hopefully, we'll get around to do a better real-world example of a deployment configuration.
Conclusion
Now head over to http://127.0.0.1:5000/, and you should see your hello world greeting.
This is it for the first part of a hopefully interesting Flask series!
Thanks for reading and stay tuned!
Top comments (0)