Difference between revisions of "Python-Flask/C2/First-Flask-Web-App/English"
(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...") |
(No difference)
|
Revision as of 04:02, 26 December 2018
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
|
Slides 3: System Requirements | To record this tutorial, I’m using
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
|
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]
|
Let us activate our vitualenv.
|
[Terminal]
Highlight (flask_venv) |
Notice that we are now inside the virtual environment flask_venv. |
Open the file hello_flask.py in a text editor.
| |
[Terminal]
|
I will type the command.
atom<space> hello underscore flask dot py
|
[Text Editor]
Highlight “from flask import Flask” |
The first line is from flask import Flask.
|
[Text Editor]
Point to the left pane of Atom.
And hover over flask foder. |
Look at the directory structure at the left pane of the Atom text editor window.
|
Highlight
|
In the second line, we have created an object for the flask class.
|
[Text Editor]
@app.route('/') |
In the next line, the route function of the Flask class is a decorator.
|
[Text Editor]
@app.route('/') |
Decorators are a standard feature of the Python language.
|
Slide 5: Routes (img 1) | Let us understand the concept of routes in detail now.
|
Slide 6: Routes (img 2)
|
The client sends a request to the web server.
|
Slide 7: Routes (img 3) | Then the web server has to process the request and generate a response.
|
Slide 8: Routes (img 4) | On receiving the request the app matches it with the available route patterns.
|
Slide 9: Routes |
|
Slide 9: Routes |
|
Slide 9: Routes |
We will discuss dynamic routes in a moment. |
[Text Editor]
def hello_world(): |
Let’s come back to our “hello world” app.
|
[Text Editor]
return 'Hello, World!' |
The next line says return 'Hello, World!'
|
[Text Editor]
(Tab) app.run() |
Now let us add a few more lines of code at the end.
|
[Text Editor]
(Tab) app.run() |
This is a customary common practice.
|
Ctrl+S | Let us save the file by pressing Ctrl and S keys.
|
[Terminal]
Type
|
Now back in the terminal and run the hello world app.
|
[Terminal]
Type
|
Now type
|
[Firefox]
And press Enter. |
Now, open any web browser.
|
[Firefox]
Highlight ‘Hello, World!’ |
We can see the message ‘Hello, World!’ written in the browser window. |
Switch back to the terminal.
| |
[Terminal]
|
Now we will write code for a dynamic route and also define a view function called hello_user.
|
Type
def hello_user(username): (Tab) return '<h1>Hello, %s!</h1>' % username |
Before the if condition, type the code as shown here.
|
Highlight
|
This route has a URL, home/user/<username>
|
Highlight
(Tab) return '<h1>Hello, %s!</h1>' % username |
This function will simply return a string ‘Hello’ username.
|
Let us save the file by pressing Ctrl and S keys
| |
[Terminal]
$ python3 -m flask run [Enter] |
Run the app by executing the following command.
|
[Firefox]
http://127.0.0.1:5000/user/Sid [Enter] |
Switch to the web browser.
|
[Firefox]
http://127.0.0.1:5000/user/Tom [Enter] |
We got the output as “Hello Sid!”.
In the address bar, replace sid with tom.
|
Slide 10: Example URL | This is what you may have observed in facebook as well.
|
[Firefox]
[Enter] |
Let’s try a URL for which we did not define a route.
|
[Terminal]
|
Switch to the terminal.
|
Press Ctrl+c simultaneously | To stop the server, press Ctrl and C keys simultaneously. |
[Terminal]
|
We will deactivate the Virtual Environment.
|
This brings us to the end of this tutorial.
| |
Slide 10: Summary | In this tutorial, we learnt about
|
Slide: About Spoken Tutorial project | The video at the following link summarises the Spoken Tutorial project.
|
Slide:
Spoken Tutorial workshops |
The Spoken Tutorial Project team conducts workshops and gives certificates.
|
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.
|
This is Siddhartha Sarkar signing off.
|