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

Made with Slides.com