Difference between revisions of "Python-Flask/C2/First-Flask-Web-App/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script: First Flask web application''' '''Author: Siddhartha Sarkar''' Keywords: ​Video tutorial, Python Flask, Hello World, Routes, View Functions, HTTP proto...")
 
(Script synced with video.)
Line 8: Line 8:
  
 
{| class="wikitable" style="border-spacing:0;width:16.695cm;"
 
{| class="wikitable" style="border-spacing:0;width:16.695cm;"
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
| align=center| '''Visual Cue'''
 
| align=center| '''Visual Cue'''
 
| align=center| '''Narration'''
 
| align=center| '''Narration'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 1: First Flask web app'''
 
|| '''Slide 1: First Flask web app'''
 
|| Welcome to the spoken tutorial on''' '''the first '''Flask web application.'''
 
|| Welcome to the spoken tutorial on''' '''the first '''Flask web application.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 2: Learning Objectives'''
 
|| '''Slide 2: Learning Objectives'''
 
|| In this tutorial, we will learn
 
|| In this tutorial, we will learn
Line 22: Line 22:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slides 3: System Requirements'''
 
|| '''Slides 3: System Requirements'''
 
|| To record this tutorial, I’m using
 
|| To record this tutorial, I’m using
Line 29: Line 29:
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Atom text editor 1.22.1 '''and''' '''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Atom text editor 1.22.1 '''and''' '''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser'''</div>
 
 
 
  
  
 
You can use any text editor and web browser of your choice.
 
You can use any text editor and web browser of your choice.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 5:'''
 
|| '''Slide 5:'''
  
 
'''Pre-requisites'''
 
'''Pre-requisites'''
 +
  
  
Line 49: Line 47:
 
If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org
 
If not, then please go through the corresponding tutorials on this website. http://spoken-tutorial.org
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Open a Terminal window
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Open a Terminal window
  
  
  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Let us open the '''Terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys simultaneously on the keyboard.
|- style="background-color:#ffffff;border:0.5pt solid #000001;padding:0.106cm;"
+
|- style="background-color:#ffffff;border:0.5pt solid #000000;padding:0.106cm;"
 
|| [Terminal]
 
|| [Terminal]
  
 
Type cd project_flask & Press Enter
 
Type cd project_flask & Press Enter
 
|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
 
|| Now go to the folder '''project underscore flask''' which we created earlier using '''cd''' '''command.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 67: Line 65:
  
 
[Enter]
 
[Enter]
|| Let us activate our '''vitualenv'''.
+
|| Let us activate our '''virtualenv'''.
  
  
Line 80: Line 78:
  
 
'''(dot)''' refers to the present working '''directory'''.
 
'''(dot)''' refers to the present working '''directory'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
 
Highlight (flask_venv)
 
Highlight (flask_venv)
 
|| Notice that we are now inside the''' virtual environment flask_venv.'''
 
|| Notice that we are now inside the''' virtual environment flask_venv.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
||  
+
|| Only narration
 
|| Open the file '''hello_flask.py '''in a '''text editor'''.
 
|| 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.'''
 
I will be using the '''atom text editor '''but you can use your prefered '''text editor.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 107: Line 105:
  
 
Now let us understand what the code does, line by line.
 
Now let us understand what the code does, line by line.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 117: Line 115:
  
 
It simply says '''import''' '''Flask''' '''module''' from '''flask''' folder.  
 
It simply says '''import''' '''Flask''' '''module''' from '''flask''' folder.  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 126: Line 124:
  
 
And hover over flask foder.
 
And hover over flask foder.
|| Look at the '''directory structure''' at the left pane of the '''Atom text editor''' window.
+
|| Look at the '''directory structure''' <span style="color:#000000;">If we use atom editor, we can see the folder structure in the left pane. Else we have to show in the file browser. As we will be using atom editor throughout this series, we don't need to switch to the file browser.</span><span style="color:#000000;">+pravin1389@gmail.com </span>
 +
 
 +
<span style="color:#000000;">Can you pls confirm what Siddharth is saying?</span><span style="color:#000000;">We are using Atom throughout the course. If they use other editors they will see the same phenomenon in the respective directory where flask gets installed.</span>
 +
 
 +
<span style="color:#000000;">We expect that they will use Atom.</span><span style="color:#000000;">This is a problem if learners are using other text editors like gedit, nano, etc.</span>at the left pane of the '''Atom text editor''' window.
  
  
Line 136: Line 138:
  
 
'''Python''' is set to look for '''modules''' in the '''site-packages'''.
 
'''Python''' is set to look for '''modules''' in the '''site-packages'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
  
Line 163: Line 165:
  
 
'''Flask''' uses this '''argument''' to determine the '''root path''' of the '''application'''.
 
'''Flask''' uses this '''argument''' to determine the '''root path''' of the '''application'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 180: Line 182:
  
 
It refers to '''home''' or top '''domain'''.
 
It refers to '''home''' or top '''domain'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 197: Line 199:
  
 
To know more about '''decorators''' you may refer to the '''Python Spoken Tutorial series'''.
 
To know more about '''decorators''' you may refer to the '''Python Spoken Tutorial series'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 5: Routes (img 1)'''
 
|| '''Slide 5: Routes (img 1)'''
 
|| Let us understand the concept of '''routes''' in detail now.
 
|| Let us understand the concept of '''routes''' in detail now.
Line 206: Line 208:
  
 
This shows a simplified '''client''' and '''server''' diagram.
 
This shows a simplified '''client''' and '''server''' diagram.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 6: Routes (img 2)'''
 
|| '''Slide 6: Routes (img 2)'''
  
Line 215: Line 217:
  
 
In our case, the '''web browser''' is the '''client'''.
 
In our case, the '''web browser''' is the '''client'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 7: Routes (img 3)'''
 
|| '''Slide 7: Routes (img 3)'''
 
|| Then the '''web server''' has to process the '''request''' and generate a '''response'''.
 
|| Then the '''web server''' has to process the '''request''' and generate a '''response'''.
Line 224: Line 226:
  
 
The '''web server''' sends the '''request''' to the '''Flask application''' instance.
 
The '''web server''' sends the '''request''' to the '''Flask application''' instance.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 8: Routes (img 4)'''
 
|| '''Slide 8: Routes (img 4)'''
 
|| On receiving the '''request''' the '''app''' matches it with the available '''route patterns'''.
 
|| On receiving the '''request''' the '''app''' matches it with the available '''route patterns'''.
Line 230: Line 232:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 9: Routes '''
 
|| '''Slide 9: Routes '''
||  
+
||
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Thus the '''application''' instance knows which '''function''' to execute for which '''URL'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Thus the '''application''' instance knows which '''function''' to execute for which '''URL'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">This happens because it keeps a mapping of the '''URLs''' to '''functions'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">This happens because it keeps a mapping of the '''URLs''' to '''functions'''.</div>
Line 238: Line 240:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 9: Routes '''
 
|| '''Slide 9: Routes '''
 
||  
 
||  
Line 245: Line 247:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Slide 9: Routes '''
 
|| '''Slide 9: Routes '''
 
||  
 
||  
Line 256: Line 258:
  
 
We will discuss '''dynamic routes''' in a moment.
 
We will discuss '''dynamic routes''' in a moment.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 282: Line 284:
  
 
This '''function''' associated with a '''route '''is called ‘'''view function'''’.
 
This '''function''' associated with a '''route '''is called ‘'''view function'''’.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 293: Line 295:
  
 
So this '''view function''' simply returns a '''string “Hello World”. '''
 
So this '''view function''' simply returns a '''string “Hello World”. '''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 300: Line 302:
  
  
if __name__ == '__main__':
+
if __name__ == '__main__':(Tab) app.run()
 
+
(Tab) app.run()
+
 
|| Now let us add a few more lines of code at the end.
 
|| Now let us add a few more lines of code at the end.
  
  
Line 9 and 10.
+
Line 8 and 9.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 314: Line 314:
  
  
if __name__ == '__main__':
+
if __name__ == '__main__':(Tab) app.run()
 
+
(Tab) app.run()
+
 
|| This is a customary common practice.
 
|| This is a customary common practice.
  
Line 333: Line 331:
  
 
Hence we follow this practice.
 
Hence we follow this practice.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| '''Ctrl+S'''
 
|| '''Ctrl+S'''
 
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys.
 
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys.
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
+
Then close the editor window.
+
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
|| [Terminal]
 
|| [Terminal]
  
Line 353: Line 348:
  
 
Press '''Enter'''.
 
Press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 376: Line 371:
  
 
'''Flask app''' is running in the '''local host''' on '''port 5000.'''
 
'''Flask app''' is running in the '''local host''' on '''port 5000.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 389: Line 384:
  
 
In the '''address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.
 
In the '''address bar''', type [http://127.0.0.1:5000/ http://127.0.0.1:5000/] and press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
 
Highlight ‘Hello, World!’
 
Highlight ‘Hello, World!’
 
|| We can see the message ‘'''Hello, World!'''’ written in the browser window.  
 
|| We can see the message ‘'''Hello, World!'''’ written in the browser window.  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| Switch back to the '''terminal'''.
 
|| Switch back to the '''terminal'''.
Line 400: Line 395:
  
 
Stop the '''server''' by pressing '''Ctrl''' and '''C '''keys together.
 
Stop the '''server''' by pressing '''Ctrl''' and '''C '''keys together.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 408: Line 403:
  
  
Open the '''hello_flask.py''' in any '''text editor.'''
+
Switch to '''the editor window.'''
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Type
 
|| Type
  
Line 421: Line 416:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
 
 +
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
  
  
 
@app.route('/user/<username>')
 
@app.route('/user/<username>')
 +
  
  
Line 432: Line 429:
  
 
where '''home''' is the '''root''' '''domain''' '''URL''' of the '''server'''.
 
where '''home''' is the '''root''' '''domain''' '''URL''' of the '''server'''.
 
 
In our case the '''root''' '''URL''' is [http://127.0.0.1:5000/ http://127.0.0.1:5000]
 
  
  
Line 441: Line 435:
  
 
We will use this '''variable '''in the '''view''' '''function''' to change the content in the browser.
 
We will use this '''variable '''in the '''view''' '''function''' to change the content in the browser.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Highlight
 
|| Highlight
  
Line 447: Line 441:
 
def hello_user(username):
 
def hello_user(username):
  
<nowiki>
+
<nowiki>(Tab) return '<h1>Hello, %s!</h1>' % username </nowiki>
(Tab) return '<h1>Hello, %s!</h1>' % username </nowiki>
+
 
|| This '''function '''will simply return a string '''‘Hello’''' '''username'''.
 
|| This '''function '''will simply return a string '''‘Hello’''' '''username'''.
  
Line 456: Line 449:
  
 
'''h1''' is the level one '''heading tag '''of '''HTML'''.
 
'''h1''' is the level one '''heading tag '''of '''HTML'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys
 
|| Let us save the file by pressing '''Ctrl''' and '''S''' keys
  
  
Close the editor window.
+
Switch back to the terminal.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 470: Line 463:
  
  
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 476: Line 469:
 
Type  
 
Type  
  
http://127.0.0.1:5000/user/Sid  
+
[http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Sid  
  
 
[Enter]
 
[Enter]
Line 486: Line 479:
  
 
and press '''Enter'''.
 
and press '''Enter'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 492: Line 485:
 
Type  
 
Type  
  
http://127.0.0.1:5000/user/Tom
+
[http://127.0.0.1:5000/ http://127.0.0.1:5000/]user/Tom
  
 
[Enter]
 
[Enter]
Line 498: Line 491:
  
  
Now let’s try '''tom''' instead of '''sid'''
+
Now let’s try '''Tom''' instead of '''Sid'''
  
In the '''address bar''', replace '''sid''' with '''tom.'''
+
In the '''address bar''', replace '''Sid''' with '''Tom.'''
  
  
Line 510: Line 503:
  
 
We have a dynamic '''URL''' in play here.
 
We have a dynamic '''URL''' in play here.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Slide 10: Example URL  
 
|| Slide 10: Example URL  
 
|| This is what you may have observed in '''facebook''' as well.
 
|| This is what you may have observed in '''facebook''' as well.
Line 523: Line 516:
  
  
Depending on the unique '''ID, facebook server''' fetches the individual '''profile pages'''.
+
Depending on the unique '''ID, facebook server''' fetches the individual '''profile pages'''.Switch to the '''browser window'''.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Firefox]
 
|| [Firefox]
  
Line 530: Line 523:
 
Type  
 
Type  
  
http://127.0.0.1:5000/posts
+
[http://127.0.0.1:5000/ http://127.0.0.1:5000/]posts
  
 
[Enter]
 
[Enter]
Line 543: Line 536:
  
 
Observe that we got '''Not found''' message.
 
Observe that we got '''Not found''' message.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| [Terminal]
 
|| [Terminal]
  
Line 565: Line 558:
 
We will discuss in detail these '''HTTP responses''' in the upcoming tutorials.
 
We will discuss in detail these '''HTTP responses''' in the upcoming tutorials.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+c simultaneously  
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Press Ctrl+c simultaneously  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | [Terminal]
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | [Terminal]
  
  
 
Type deactivate and press Enter
 
Type deactivate and press Enter
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | We will deactivate the '''Virtual Environment.'''
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | We will deactivate the '''Virtual Environment.'''
  
  
 
Type '''deactivate''' and press '''Enter'''.
 
Type '''deactivate''' and press '''Enter'''.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |  
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" |  
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | This brings us to the end of this tutorial.
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | This brings us to the end of this tutorial.
  
  
 
Let us summarise
 
Let us summarise
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Slide 10: Summary
 
|| Slide 10: Summary
 
|| In this tutorial, we learnt about
 
|| In this tutorial, we learnt about
 +
  
 
* <div style="margin-left:1.27cm;margin-right:0cm;">The working of our first '''Flask application.'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">The working of our first '''Flask application.'''</div>
Line 593: Line 587:
  
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">Slide: About Spoken Tutorial project</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | Slide: About Spoken Tutorial project
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The video at the following link summarises the Spoken Tutorial project.</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | The video at the following link summarises the Spoken Tutorial project.
  
  
 
Please download and watch it.
 
Please download and watch it.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide:
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide:
  
 
Spoken Tutorial workshops
 
Spoken Tutorial workshops
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;</span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;">&nbsp;team </span>conducts workshops and gives certificates.
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">The&nbsp;</span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;">&nbsp;team </span>conducts workshops and gives certificates.
  
  
 
For more details, please write to us.
 
For more details, please write to us.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
|| Slide 13:
 
|| Slide 13:
  
Line 612: Line 606:
 
|| Please post your timed queries in this forum.
 
|| Please post your timed queries in this forum.
 
|-
 
|-
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide: Acknowledgement
+
| style="background-color:#ffffff;border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Slide: Acknowledgement
| style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <span style="background-color:#ffffff;">Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.</span>
+
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
  
  
 
More information on this mission is available at this link.
 
More information on this mission is available at this link.
|- style="background-color:#ffffff;border:1pt solid #000001;padding:0.176cm;"
+
|- style="border:1pt solid #000000;padding:0.176cm;"
 
||  
 
||  
 
|| This is Siddhartha Sarkar signing off.  
 
|| This is Siddhartha Sarkar signing off.  

Revision as of 17:07, 21 January 2019

Title of script: First Flask web application

Author: Siddhartha Sarkar

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


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 If we use atom editor, we can see the folder structure in the left pane. Else we have to show in the file browser. As we will be using atom editor throughout this series, we don't need to switch to the file browser.+pravin1389@gmail.com

Can you pls confirm what Siddharth is saying?We are using Atom throughout the course. If they use other editors they will see the same phenomenon in the respective directory where flask gets installed.

We expect that they will use Atom.This is a problem if learners are using other text editors like gedit, nano, etc.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-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_user.


Switch to the editor window.

Type


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

def hello_user(username):

(Tab) return '<h1>Hello, %s!</h1>' % username

Before the if condition, type the code as shown here.


Highlight


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


This route has a URL, home/user/<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):

(Tab) return '<h1>Hello, %s!</h1>' % username

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]

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


Switch to the browser window.


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.

Contributors and Content Editors

Nancyvarkey, Pravin1389, SiddharthaSarkar