UNIT C LESSON C1

Building your first local Flask app

Unit C Lesson C1

Screen 1 of 13

Course progress review

This is lesson 5 of 8

1) Installing Python

2) Creating a virtual environment

3) Installing Flask

4) Configuring Flask

5) Building your first local Flask app

6) Running your first Flask app

7) Understanding web servers

8) Deploying to PythonAnywhere

Unit C Lesson C1

Screen 2 of 13

Lesson outcomes

This lesson prepares you to:

• write your first Python/Flask app
• understand the concept of
  • import statements
  • Flask constructor and decorators
  • functions
• write Python code using a text editor
• build your first simple Flask application

Unit C Lesson C1

Screen 3 of 13

From Unit B Lesson B2 you

• have an open command window
• have your virtual environment activated
• are in folder ~\myproject\venv\Scripts

Unit C Lesson C1

Screen 4 of 13

The following components are required for your first Flask app:

• An import statement to import the Flask package
• The Flask constructor
• One or multiple decorators which link the functions to the URLs
• The functions
• The call of Flask's run method to locally run the application

The components are explained on the following slides.

Unit C Lesson C1

Screen 5 of 13

Components of a Flask app

The code components  1/4

The import statement: 

Imports the module Flask from the package flask

The Flask constructor:

Creates an instance of the Flask class. __name__ is a Python predefined variable.

from flask import Flask

app = Flask(__name__)

Unit C Lesson C1

Screen 6 of 13

The code components  2/4

Decorator:

Creates an association between the URL ('/') and the function that follows.

Unit C Lesson C1

Screen 7 of 13

@app.route('/')

Note: A more complex web site with multiple pages would require a separate decorator for each page. Example:

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/signup', methods=['POST'])
def signup():
    ...
    return ...

@app.route('/message')
def message():
    ...
    return ...

The code components  3/4

Unit C Lesson C1

Screen 8 of 13

def hello_world():
	return 'Hello World!'

Function:

Defines the function which is called by accessing the URL. In this case a simple text message is returned.

Note: Instead of returning a simple text as above, a rendered template can be returned. Templates in the form of html pages stay in a folder "/templates". Example:

from flask import render_template

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
    return render_template('hello.html', 
        name=name)

The code components  4/4

The call of Flask's run method to locally run the application:

The correct way to tell Python to execute the code 

if __name__ == '__main__':
	app.run()

Unit C Lesson C1

Screen 9 of 13

Write your Python code 1/2

Unit C Lesson C1

Screen 10 of 13

There are multiple ways to write Python code. You could...

• use a professional IDE (integrated development environment) like PyCharm or Eclipse
• write Python with a simple editor like Windows Notepad
• make use of the Python integrated console to execute code without writing into a file
• use an intelligent open source, 'Python-aware' editor like Notepad++

Write your Python code 2/2

Unit C Lesson C1

Screen 11 of 13

We recommend Notepad++, a light-weight, easy to learn editor for your first Python app.

Create a new file called app.py with the code fragments of the previous slides:

Save the new file with the name app.py into the c:\~\myproject\app folder.

from flask import Flask
app = Flask(__name__)

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

if __name__ == '__main__':
	app.run()

Lesson review

Having completed Unit C Lesson C1 you should now successfully be able to:

• understand the concept of Flask
• use Flask as a micro web framework within Python
• write Python code using a text editor
• build a simple Flask application

Unit C Lesson C1

Screen 12 of 13

Now it is your turn

Please perform the following steps before you proceed to Lesson 2:

1. Make yourself familiar with the 'Python-aware' editor Notepad++ 
2. Write the "Hello World" code fragment with Notepad++ and save it to your app folder 

Refer to the previous slides if necessary. Complete the assignment C1 once you are finished with above steps.

Unit C Lesson C1

Screen 13 of 13