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

• To write and analyze our first Flask application.
• The concept of Routes and View functions.
• About Dynamic content served by dynamic URLs.

• 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.

Pre-requisites

• Linux commands and

• Basic Python programming

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

Type cd project_flask & Press Enter

$ . flask_venv/bin/activate

[Enter]

Type the command

Dot space flask_venv slash bin slash activate

And press Enter.

(dot) refers to the present working directory.

Highlight (flask_venv)

I will be using the atom text editor but you can use your prefered text editor.

$ atom hello_flask.py

atom<space> hello underscore flask dot py

and press Enter.

Now let us understand what the code does, line by line.

Highlight

“from flask import Flask”

It simply says import Flask module from flask folder.

Point to the left pane of Atom.

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

And hover over flask foder.

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.

app = Flask(__name__)

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.

Highlight

@app.route('/')

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.

Highlight

@app.route('/')

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.

Look at this diagram.

This shows a simplified client and server diagram.

In our case, the web browser is the client.

And the Flask application instance does this job.

The web server sends the request to the Flask application instance.

• 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.

• 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.

• Routes can be either static or dynamic.
• In the present case, we have a static route.

We will discuss dynamic routes in a moment.

Highlight

def hello_world():

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’.

Highlight

return 'Hello, World!'

So this view function simply returns a string “Hello World”.

Type

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

Line 8 and 9.

Highlight

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

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.

Type

$ export FLASK_APP=hello_flask.py

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

Press Enter.

Type

$ python3 -m flask run

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.

Type

http://127.0.0.1:5000/

And press Enter.

In the address bar, type http://127.0.0.1:5000/ and press Enter.

Highlight ‘Hello, World!’

Stop the server by pressing Ctrl and C keys together.

atom hello_flask.py

Switch to the editor window.

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

def hello_user(username):

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

@app.route('/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.

def hello_user(username):

(Tab) return '<h1>Hello, %s!</h1>' % 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.

Switch back to the terminal.

$ python3 -m flask run [Enter]

Type

http://127.0.0.1:5000/user/Sid

[Enter]

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

and press Enter.

Type

http://127.0.0.1:5000/user/Tom

[Enter]

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.

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.

Type

http://127.0.0.1:5000/posts

[Enter]

Switch to the browser window.

Replace /user/tom with posts and press Enter.

Observe that we got Not found message.

Highlight 404.

Highlight 200’s.

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.

Type deactivate and press Enter

Type deactivate and press Enter.

Let us summarise

• 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.

Please download and watch it.

Spoken Tutorial workshops

For more details, please write to us.

Forum for specific questions:

More information on this mission is available at this link.

Thanks for watching.