View source for Python-Flask/C2/First-Flask-Web-App/English

'''Title of script: First Flask web application'''

'''Author: Siddhartha Sarkar'''

Keywords: Video tutorial, Python Flask, Hello World, Routes, View Functions, HTTP protocol.



{| border=1
|- 
| | '''Visual Cue'''
| | '''Narration'''
|- 
|| '''Slide 1: First Flask web app'''
|| Welcome to the spoken tutorial on''' '''the first '''Flask web application.'''
|- 
|| '''Slide 2: Learning Objectives'''
|| In this tutorial, we will learn
* To write and analyze our first '''Flask application'''.
* The concept of '''Routes '''and''' View''' '''functions'''.
* About '''Dynamic content''' served by dynamic '''URLs'''.

|- 
|| '''Slides 3: System Requirements'''
|| To record this tutorial, I’m using
* '''Ubuntu Linux 16.04''' '''OS'''
* '''Python''' '''3.5.2'''
* '''Atom text editor 1.22.1 '''and''' '''
* '''Firefox web browser'''

You can use any text editor and web browser of your choice.
|- 
|| '''Slide 5:'''

'''Pre-requisites'''

|| To follow this tutorial, you should have working knowledge on
* '''Linux commands''' and

* Basic '''Python programming'''

If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org
|-
|| Open a Terminal window

|| Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.
|- 
|| [Terminal]

Type cd project_flask & Press Enter
|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
|- 
|| [Terminal]

$ . flask_venv/bin/activate

[Enter]
|| Let us activate our '''virtualenv'''.

Type the command

'''Dot space flask_venv slash bin slash activate'''

And press '''Enter'''.

'''(dot)''' refers to the present working '''directory'''.
|- 
|| [Terminal]

Highlight (flask_venv)
|| Notice that we are now inside the''' virtual environment flask_venv.'''
|- 
|| Only narration
|| Open the file '''hello_flask.py '''in a '''text editor'''.

I will be using the '''atom text editor '''but you can use your prefered '''text editor.'''
|- 
|| [Terminal]

$ atom hello_flask.py
|| I will type the command. '''atom<space> hello underscore flask dot py'''

and press '''Enter.'''

Now let us understand what the code does, line by line.
|- 
|| [Text Editor]

Highlight

“from flask import Flask”
|| The first line is '''from flask import Flask.'''

It simply says '''import''' '''Flask''' '''module''' from '''flask''' folder. 
|- 
|| [Text Editor]

Point to the left pane of Atom.

Collapse flask_venv->lib->python3.5->site-packages

And hover over flask foder.
|| Look at the '''directory''' structure at the left pane of the '''Atom text editor''' window.

Observe that there is no '''flask''' folder in the '''project'''. 

So how does the '''compiler''' find and import the '''Flask module'''?

'''Python''' is set to look for '''modules''' in the '''site hyphen packages'''.
|- 
|| Highlight

app = Flask(__name__)
|| In the second line, we have created an '''object''' for the '''flask class.'''

This '''object''' of the '''Flask class''' is our '''WSGI application.'''

'''WSGI''' stands for '''Web Server Gateway Interface.'''

We will come to what '''WSGI''' is later.

This takes an '''argument double underscore name double underscore. '''

This '''argument''' basically refers to the name of the file.

In our case it is “'''hello_flask'''”.

'''Flask''' uses this '''argument''' to determine the '''root path''' of the '''application'''.
|- 
|| [Text Editor]

Highlight

@app.route('/')
|| In the next line, the''' route function''' of the '''Flask class''' is a '''decorator.'''

It tells the '''application''', which '''URL''' should call the associated '''function'''.

In this case, '''root slash''' is the '''URL'''. 

It refers to '''home''' or top '''domain'''.
|- 
|| [Text Editor]

Highlight

@app.route('/')
|| '''Decorators''' are a standard feature of the '''Python''' language.

They can modify the behavior of a '''function''' in different ways. 

In our case, it is used to associate a '''function''' with a '''URL'''.

To know more about '''decorators''' you may refer to the '''Python Spoken Tutorial series'''.
|- 
|| '''Slide 5: Routes (img 1)'''
|| Let us understand the concept of '''routes''' in detail now.

Look at this diagram.

This shows a simplified '''client''' and '''server''' diagram.
|- 
|| '''Slide 6: Routes (img 2)'''

|| The client sends a '''request''' to the '''web server'''.

In our case, the '''web browser''' is the '''client'''.
|- 
|| '''Slide 7: Routes (img 3)'''
|| Then the '''web server''' has to process the '''request''' and generate a '''response'''.

And the '''Flask application '''instance does this job.

The '''web server''' sends the '''request''' to the '''Flask application''' instance.
|- 
|| '''Slide 8: Routes (img 4)'''
|| On receiving the '''request''' the '''app''' matches it with the available '''route patterns'''.

|- 
|| '''Slide 9: Routes '''
||
* Thus the '''application''' instance knows which '''function''' to execute for which '''URL'''.
* This happens because it keeps a mapping of the '''URLs''' to '''functions'''.
* Here we need the concept of '''routes'''.

|- 
|| '''Slide 9: Routes '''
|| 
* The association between a '''URL''' and the '''function''' that handles it, is called a '''route'''.
* The '''Flask app''' executes the associated '''function''' and returns a '''response'''.

|- 
|| '''Slide 9: Routes '''
|| 
* '''Routes''' can be either '''static''' or '''dynamic'''.
* In the present case, we have a static '''route'''.

We will discuss '''dynamic routes''' in a moment.
|- 
|| [Text Editor]

Highlight

def hello_world():
|| Let’s come back to our '''“hello world” app.'''

In the next line, we define the associated '''function''' for this '''route'''. 

This '''function''' gets executed when the '''root URL''' is hit.

In our case the '''root''' '''URL''' is http://127.0.0.1:5000/

Here, we have named the '''function''' as “'''hello_world'''”.

However, you may choose any other name of your choice.

This '''function''' associated with a '''route '''is called ‘'''view function'''’.
|- 
|| [Text Editor]

Highlight

return 'Hello, World!'
|| The next line says '''return 'Hello, World!''''

So this '''view function''' simply returns a '''string “Hello World”. '''
|- 
|| [Text Editor]

Type

if __name__ == '__main__':(Tab) app.run()
|| Now let us add a few more lines of code at the end.

Line 8 and 9.
|- 
|| [Text Editor]

Highlight

if __name__ == '__main__':(Tab) app.run()
|| This is a customary common practice.

This ensures that '''server '''is launched only if the '''script''' runs directly from the '''terminal'''.

Otherwise '''app dot run''' is skipped.

It may happen that a '''script''' is being called from another '''script'''.

In that case the imported '''script''' should not start a new '''server'''.

Hence we follow this practice.
|- 
|| '''Ctrl+S'''
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys.
|- 
|| [Terminal]

Type 

$ export FLASK_APP=hello_flask.py
|| Now back in the '''terminal''' and run the''' hello world app.'''

Type '''export <space> FLASK_APP <equal to > hello underscore flask dot py'''

Press '''Enter'''.
|- 
|| [Terminal]

Type $ python3 -m flask run
|| Now type

'''python3 <space> hyphen m <space> flask <space> run'''

And press '''Enter'''.

We can see a message '''“Running on http://127.0.0.1:5000/”'''

Here, '''127.0.0.1''' is the '''IP''' '''address''' for the '''localhost'''.

'''Flask app''' is running in the '''local host''' on '''port 5000.'''
|- 
|| [Firefox]

Type http://127.0.0.1:5000/

And press Enter.
|| Now, open any '''web browser. '''

In the '''address bar''', type http://127.0.0.1:5000/ and press '''Enter'''.
|- 
|| [Firefox]

Highlight ‘Hello, World!’
|| We can see the message ‘'''Hello, World!'''’ written in the browser window. 
|- 
|| 
|| Switch back to the '''terminal'''.

Stop the '''server''' by pressing '''Ctrl''' and '''C '''keys together.
|- 
|| [Terminal]

atom hello_flask.py
|| Now we will write code for a '''dynamic''' '''route''' and also define a '''view function''' called '''hello underscore user'''.

Switch to '''the editor window.'''
|- 
|| Type

@app.route('/user/<username>')

def hello_user(username):

<nowiki>(Tab) return '<h1>Hello, %s!</h1>' % username </nowiki>
|| Before the''' if condition''', type the code as shown here.
|- 
|| Highlight

@app.route('/user/<username>')

|| This '''route''' has a '''URL''', '''home slash user slash username'''

where '''home''' is the '''root domain URL''' of the '''server'''.

whereas, '''username''' is a '''variable'''.

We will use this '''variable '''in the '''view function''' to change the content in the browser.
|- 
|| Highlight


def hello_user(username):

<nowiki>(Tab) return '<h1>Hello, %s!</h1>' % username </nowiki>
|| This '''function '''will simply return a string '''‘Hello’''' '''username'''.

Note that the output in the '''browser '''will vary as per the '''username''' in the '''URL'''.

'''h1''' is the level one '''heading tag '''of '''HTML'''.
|- 
|| 
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys

Switch back to the terminal.
|- 
|| [Terminal]

$ python3 -m flask run [Enter]
|| Run the '''app''' by executing the following command.

|- 
|| [Firefox]

Type http://127.0.0.1:5000/user/Sid 

[Enter]
|| Switch to the '''web browser'''.

In the''' address bar''', type http://127.0.0.1:5000/user/Sid 

and press '''Enter'''.
|- 
|| [Firefox]

Type http://127.0.0.1:5000/user/Tom

[Enter]
|| We got the output as '''“Hello Sid!”.'''

Now let’s try '''Tom''' instead of '''Sid'''

In the '''address bar''', replace '''Sid''' with '''Tom.'''

Press '''Enter'''.

The output has changed to '''‘Hello Tom!’ '''

We have a dynamic '''URL''' in play here.
|- 
|| Slide 10: Example URL 
|| This is what you may have observed in '''facebook''' as well.

'''Facebook''' individual '''users''' have a '''URL''' of the type:

www.facebook.com/profile_id

Here '''profile_id''' refers to the unique '''ID''' of a '''facebook user.'''

Depending on the unique '''ID, facebook server''' fetches the individual '''profile pages'''.

Switch to the '''browser window'''.
|- 
|| [Firefox]

Type  http://127.0.0.1:5000/posts

[Enter]
|| Switch to the '''browser '''window.

Let’s try a '''URL''' for which we did not define a '''route'''.

Replace '''/user/tom''' with '''posts '''and press '''Enter.'''

Observe that we got '''Not found''' message.
|- 
|| [Terminal]

Highlight 404.

Highlight 200’s.
|| Switch to the '''terminal'''.

Observe that, the '''server''' has returned a '''404 response code.'''

This '''error code''' indicates that the web page requested for, does not exist.

Whereas most previous '''response codes''' were '''200'''.

We will discuss in detail these '''HTTP responses''' in the upcoming tutorials.
|-
|| Press Ctrl+c simultaneously 
|| To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.
|-
|| [Terminal]

Type deactivate and press Enter
|| We will deactivate the '''Virtual Environment.'''

Type '''deactivate''' and press '''Enter'''.
|-
|| 
|| This brings us to the end of this tutorial.

Let us summarise
|- 
|| Slide 10: Summary
|| In this tutorial, we learnt about

* The working of our first '''Flask application.'''
* The concepts of '''routes '''and the view '''functions.'''
* Running a '''Flask app '''in a '''Web''' '''browser'''.
* '''Dynamic content''' served by dynamic '''URLs'''.

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide:

Spoken Tutorial workshops
|| The ''Spoken Tutorial Project''' team conducts workshops and gives certificates.

For more details, please write to us.
|- 
|| Slide 13:

Forum for specific questions:
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.
|- 
|| 
|| This is Siddhartha Sarkar signing off. 


Thanks for watching.
|-
|}