LESSON 5

Building your first local Flask app

Lesson 5

Screen 1 of 15

Course progress review

This is lesson 5 of 8

1) Components of a Web application

2) Web frameworks and Flask

3) Installing Python and packages

4) Creating your development environment

5) Building your first local Flask app

6) Running your first Flask app

7) Web application deployment

8) Deploying to PythonAnywhere

Lesson 5

Screen 2 of 15

Lesson 5 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

Lesson 5

Screen 3 of 15

Requirements

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

Lesson 5

Screen 4 of 15

This lesson requires that you:

The following components are required for your first Flask app:

• An import statement to import the Flask package into your Web application
• The Flask constructor
• One or multiple decorators which link functions to the URLs (URL routing)
• The functions
• A call of Flask's run method,  to run your application locally

Lesson 5

Screen 5 of 15

Components of a Flask app

The components are explained on the following slides.

The code components  1/4

The import statement: 

Imports the module Flask from the package flask

from flask import Flask

app = Flask(__name__)

Lesson 5

Screen 6 of 15

The Flask constructor:

Creates an instance of the Flask class.

__name__ is a Python predefined variable.

The code components  2/4

Decorator:

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

Lesson 5

Screen 7 of 15

@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

Lesson 5

Screen 8 of 15

def hello_world():
	return 'Hello World!'

Function:

Defines the function that is called when the corresponding URL is requested.  In this case, the function returns the simple text message 'Hello World!'.

Note: A HTML template can be returned, instead of text.  HTML templates should be placed the directory "c\:~\myproject\app\static\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 to Flask's run method runs a Flask application locally:

This is correct way to tell Python to run a Flask application, in a local development environment.

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

Lesson 5

Screen 9 of 15

Write your Python code 1/2

Lesson 5

Screen 10 of 15

There are many ways to write Python code.  For example, you could...

• use a professional Integrated Development Environment (IDE) like PyCharm or Eclipse
• write Python with standard text editor like Windows Notepad
• use Python's integrated console to execute code without writing code into a file
• use a text editor that is designed to write computer programming code, like Notepad++

Write your Python code 2/2

Lesson 5

Screen 11 of 15

With Notepad++ open, create a new file called app.py

Add the code fragments from previous slides to the file:

from flask import Flask
app = Flask(__name__)

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

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

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

We recommend you download and install the Notepad++ text editor, to write your first Flask app.

Now it is your turn

Please perform the following steps before you proceed:

Lesson 5

Screen 12 of 15

Refer to the previous slides if necessary.

1. Download and install the Notepad++ text editor
2. Familiarise yourself with using Notepad++
3. Write the "Hello World" Flask application with Notepad++
4. Save the "Hello World" Flask application, with the filesname "app.py", to your project's app folder

Flask code quiz

Lesson 5

Screen 13 of 15

Which of the following is NOT a required component of a simple Flask application (A, B or C)?

Test your knowledge of Flask by completing this short quiz.  Move forward to reveal the answers.

Which of the following CANNOT be used for writing Python code (A, B or C)?

Fill in the missing word.  The keyword "def", after a Flask "@app.route" decorator, defines the ____ called by accessing a URL (A, B or C).

A. Flask constructor    B. function        

C. import Flask object statement

A. IDE    B. Text editor    C. Web browser

A. URL route    B. HTML     C. function

1.

2.

3.

Lesson 5 review

You have completed Lesson 5 on building your first Flask app.  Now you can:

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

Lesson 5

Screen 14 of 15

Next lesson

In lesson 6 you will start and stop your Flask Web application "app.py" from a command prompt window.

Please proceed to lesson 6.

Lesson 5

Screen 15 of 15