Create the Flask web app

November 14, 2019 · View on GitHub

In this step you will create a Flask web app.

Create folders for the project

Create a folder called HappySadAngry somewhere on your machine.

Open this folder in Visual Studio Code

Launch Visual Studio Code.
Open the newly created folder
- On MacOS select File->Open...
- On Windows select File->Open Folder...
Navigate to the new HappySadAngry folder and select Open.

You will see the empty folder appear in the Explorer.

Install the Flask package

Flask is a Python micro-framework for creating Web Apps. It is lightweight and easy to use to create simple Web Apps. It is available as a Python package that can be installed with pip.

Instead of installing it using pip from the terminal, it should be configured inside a requirements.txt file. This file lists all the packages that a Python app depends on, and will be needed once the Web App is deployed to the cloud in a later step. This file will tell whatever server in the cloud that the web site is running on that packages that have to be installed before the Web App can be started.

Create a new file in the folder called requirements.txt
Add the following package to the file:
```
flask
```
Save the file

If you don't want to have to remember to always save files, you can turn on Auto Save by selecting File -> Auto Save.
Install the packages from the terminal using the following command:
```
pip3 install -r requirements.txt
```
This will install all packages in the requirements.txt file, skipping any that are already installed.

Create a file for the code

From Visual Studio Code, select the New File button in the Explorer bar in the HappySadAngry section.
Name the file app.py.

You may be prompted to install a Linter. This is a tool that can inspect your code for error as you write it. If a popup appears asking if you want to install this, select Install.

Write the code

Add the following code to the app.py file:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
  return 'Hello World'

Save the file

Run the code

This code can't be run from the terminal using the Python command, instead it has to be run as a Flask app using the Flask package. There are two ways to do this:

From the Debug pane of the toolbar, drop down the Debug configuration box and select Python: Flask.

If you do not see this option, then select Add configuration to edit the launch.json file. This should create a set of launch options for Python files.

If these options are not created automatically, select Add Configuration... and select the Flask option. Save this file.

Select Python: Flask from the Debug configuration box.

Select the green Start Debugging button.

If you use this method you will be able to set breakpoints and debug your code.
From the terminal, run the file as a Flask app using:
```
flask run
```
If you use this method you will not be able to set breakpoints and debug your code.

The Web App will be run, and can be accessed from your device at http://127.0.0.1:5000. You will see this URL in the output window, and you can use ctrl+click to go directly to this site.

Open this URL in a web browser to see the Hello World message.
Stop the debugger once you have tested this out.

What does this code do

from flask import Flask

This tells the Python compiler that we want to use code in the Flask module. This module was installed as part of the flask package.

app = Flask(__name__)

This creates a Flask Web App called whatever the file is called. __name__ is a special variable in Python that returns the name of the current module - so the file without the .py extension.

@app.route('/')
def home():

This defines a function called home. This function is mapped to a route called /. In a Web App, a route is the part of the URL after the domain name, and different routes can be mapped to different web pages. / is usually the home page, and there can be as many other routes as needed, for example /about would route to an about page, /basket could route to a shopping basket. If your website was at http://www.mywebsite.com then the / route is the one that would be used when you point your browser to http://www.mywebsite.com, /about would be used when you went to http://www.mywebsite.com/about and so on.

return 'Hello World'

The contents of the home function just returns simple text, and this will be rendered by a web browser as raw text.

Next step

In this step you created a simple Flask Web App that showed 'Hello World' when run. In the next step, you will create the web page for the game that shows the emotion you are trying to show, and captures images from the camera.