Lab 8: Introduction to Web Applications
Part 1: Intro to Flask
If you find typos or problems with the lab instructions, please let us know.
Note: Part 1 of this lab is individual work.
About Flask
Flask is a Python module/framework that provides an easy way to get started with web programming.
The easiest way to get started is to try some small examples. Below is a small example of a Python program that uses Flask. There are seven lines of code here (not including the blank lines), and before the end of this document, we’ll explain every single part of every one of these lines. But first, we’ll do a few things that will allow us to run these seven lines of code, setting up a small web application. The web application isn't very interesting — it puts the words “Hello World!” up in the browser every time you send it a request. But it provides a starting point, from which we can begin to do more interesting things. To create the simple web app, do this:
Create a shared repository (on GitHub/Repl.it) with your partner named spis20-lab08-Name1-Name2, as you have in previous labs, but choose 'Bash' as the language instead of Python.
Within this repository, create a single .replit file and copy the below into it:
language="bash"
run="echo if you see this repeatedly, try reloading Repl.it"
Also within this repository, each of you should create a file called hello_name.py, where "name" is your name.
Put these lines of code in your hello_name.py file:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run(host='0.0.0.0')
To get this working, all you have to do is type python filename in the terminal (where filename is your file; don't forget to include .py at the end of the filename!).
Here is what the output in the terminal should look like (there'll probably be some extra output as well, but this line is most important):
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
If that works, great! This may not be very impressive, but it gets a little more awesome when you realize that you’ve just put up a local web server that you can connect to with a browser! A mini web browser window should open automatically in Repl.it for you to see this -- you should see the message “Hello World” come up in the browser.
Now Check in with your partner and verify that both of you have the web server running before moving on.
What next?
Now, here are a few things to try, and some questions to answer. As you try these things and think through what is happening, you should begin to understand a few things about how this code is working:
In the mini Repl.it browser window where you see "Hello World!", hit ‘refresh’ a few times (NOT the regular browser window where you can have several tabs open). What do you see in the terminal?
In the window where you originally typed python filename, type a CTRL+C (that is, “Control-C”). Then try hitting “refresh” in the mini Repl.it browser window where you see "Hello World!", and see what happens. Then, type the python filename command again, and try hitting refresh in the browser again.
Use CTRL+C in the terminal to stop the server, edit the hello_name.py file to change the string “Hello World” to something else, for example, if your name is Cory, make it say: “Hello from Cory’s server”. Start the server up again and then hit refresh in the mini Repl.it browser window a few times.
Explaining all the lines of code
Ok, here is an explanation of each of the lines of code. Then, we’ll walk through how to do a few things that are a bit more interesting.
1) from flask import Flask
This code pulls in the definition of a new datatype called Flask (note the uppercase F) from a module called flask (note the lowercase f.) In Python, when you import something, you are telling the Python interpreter that you want to build your software on top of some software already written by someone else.
2) app = Flask(__name__)
This line of code is an assignment statement. The right hand side is evaluated, and then the variable on the left is set to the result of the right hand side. The right hand side, Flask(__name__), creates a new object of type Flask. The __name__ parameter is explained further in the box “About the First Parameter” on this page of the api documentation. We’ll defer the details for now, and just say: for very simple Flask applications, __name__ is always the correct choice.
3) @app.route("/")
The @ signals that what follows is a Python annotation. It indicates that there is some special way the following function definition should be handled. In this case, the annotation app.route("/") indicates that this function is called whenever we ask for the main page on this web server (i.e. "/". This will make more sense when we add other pages later.
4) def hello():
5) return "Hello World!"
Lines 4 and 5 are a regular plain old Python function definition. We can see that the function is called hello, and takes no parameters. This function returns a string, "Hello World!", which is used as the page to display for the main page of the web server ("/").
6) if __name__ == "__main__":
Line 6 has an if test that checks the special variable __name__ to see if it has the special value __main__. This is the mysterious “conditional script stanza”, which we aren’t going to explain in detail here. Instead, we’ll just say that whatever “main thing” a Python code is supposed to do when you type python filename.py, in this case python hello_name.py (replacing name with your name), should typically be wrapped in this if test. That makes your file much more useful, because then the definitions it contains can be included as a module in another file.
7) app.run(host='0.0.0.0')
Line 7 is the line that actually causes our web server to start running. The dot-notation app.run(host='0.0.0.0') tells us that run is a method of the object app. By putting () after it, we are making a function call to that method, and starting things in motion. The host='0.0.0.0' is necessary for Repl.it to recognize that you want to use Repl.it's browser window.