Difference between revisions of "Python-Flask/C2/Installation-of-Python-Flask/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Tutorial 2)
 
 
(One intermediate revision by one other user not shown)
Line 7: Line 7:
  
  
{| class="wikitable" style="border-spacing:0;width:16.51cm;"
+
{| border=1
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
| align=center| '''Visual Cue'''
+
|| '''Visual Cue'''
| align=center| '''Narration'''
+
|| '''Narration'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide 1: Installation of Python Flask
 
|| Slide 1: Installation of Python Flask
 
|| Welcome to the spoken tutorial on''' Installation of Python Flask.'''
 
|| Welcome to the spoken tutorial on''' Installation of Python Flask.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide 2: Learning Objectives
 
|| Slide 2: Learning Objectives
 
|| In this tutorial we will learn to
 
|| In this tutorial we will learn to
* <div style="margin-left:1.27cm;margin-right:0cm;">Create a '''Virtual Environment.'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Activate and deactivate the '''Virtual Environment'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Install packages inside the '''Virtual Environment'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">And launch a '''Flask application'''.</div>
 
  
 
+
* Create a '''Virtual Environment.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
* Activate and deactivate the '''Virtual Environment'''.
 +
* Install packages inside the '''Virtual Environment'''.
 +
* And launch a '''Flask application'''.
 +
|-  
 
|| Slides 3: System Requirements
 
|| Slides 3: System Requirements
 
|| To record this tutorial, I’m using
 
|| To record this tutorial, I’m using
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux 16.04''' '''OS'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Python''' '''3.5.2'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Atom text editor 1.22.1 '''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Firefox web browser''' and</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">A working '''Internet''' connection.</div>
 
  
 +
* '''Ubuntu Linux 16.04''' '''OS'''
 +
* '''Python''' '''3.5.2'''
 +
* '''Atom text editor 1.22.1 '''
 +
* '''Firefox web browser''' and
 +
* A working '''Internet''' connection.
  
 
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="border:1pt solid #000000;padding:0.176cm;"
+
|-  
|| Slide 5:
+
|| Slide 5: Pre-requisites
 
+
Pre-requisites
+
 
+
 
+
 
|| To follow this tutorial, you should have working knowledge on
 
|| To follow this tutorial, you should have working knowledge on
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Linux commands''' and</div>
 
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Basic '''Python programming'''</div>
 
  
 +
* '''Linux commands''' and
 +
* Basic '''Python programming'''
  
 
If not, then please go through the corresponding tutorials on this website.  
 
If not, then please go through the corresponding tutorials on this website.  
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide 6: Virtual Environment
 
|| Slide 6: Virtual Environment
 
||  
 
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">A '''virtual environment''' is a self-contained '''directory tree. '''</div>
+
* A '''virtual environment''' is a self-contained '''directory tree. '''
* <div style="margin-left:1.27cm;margin-right:0cm;">It contains a '''Python installation''' for a particular version of '''Python'''. </div>
+
* It contains a '''Python installation''' for a particular version of '''Python'''.  
* <div style="margin-left:1.27cm;margin-right:0cm;">Additional '''packages''' can be installed inside the '''virtual environment'''.</div>
+
* Additional '''packages''' can be installed inside the '''virtual environment'''.
 
+
|-  
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide 6: Virtual Environment
 
|| Slide 6: Virtual Environment
 
+
(pronounce as v-e-n-v)
<div style="color:#0000ff;">(pronounce as v-e-n-v)</div>
+
 
||  
 
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Venv '''is the short form for '''virtual environment.'''</div>
+
* '''Venv '''is the short form for '''virtual environment.'''
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Venv '''is used to avoid conflict between different '''Python installations'''. </div>
+
* '''Venv '''is used to avoid conflict between different '''Python installations'''.  
 
+
  
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide 7: Virtual Environment
 
|| Slide 7: Virtual Environment
 
||  
 
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">For every '''project,''' we can have a separate '''Venv'''.</div>
+
* For every '''project,''' we can have a separate '''Venv'''.
* <div style="margin-left:1.27cm;margin-right:0cm;">We will install '''Venv '''via a '''package''' called '''pip'''.</div>
+
* We will install '''Venv '''via a '''package''' called '''pip'''.
 
+
|-  
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide 8: Pip
 
|| Slide 8: Pip
 
||  
 
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip '''is a '''package manager '''program.</div>
+
* '''Pip '''is a '''package manager '''program.
* <div style="margin-left:1.27cm;margin-right:0cm;">It is used to install, upgrade, and remove '''Python packages. '''</div>
+
* Used to install, upgrade, and remove '''Python packages. '''
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip3 '''is the '''Python3 '''version of '''pip'''</div>
+
* '''Pip3 '''is the '''Python3 '''version of '''pip'''
 
+
|-  
 
+
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| Slide: Pip3 installation
 
|| Slide: Pip3 installation
 
||  
 
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">To check if '''pip3''' is already installed, type the following command in the '''terminal:'''</div>
+
* To check if '''pip3''' is already installed, type the following command in the '''terminal:'''
 
+
'''pip3 <space> hyphen hyphen version '''and press''' Enter.'''
 
+
* If it gives a '''version''' number, then you don’t need to install it again.
'''pip3 <space> hyphen hyphen version '''and press''' Enter.'''* <div style="margin-left:1.27cm;margin-right:0cm;">If it gives a '''version''' number, then you don’t need to install it again.</div>
+
* Else, install '''pip3''' using the following command in the '''terminal''':
* <div style="margin-left:1.27cm;margin-right:0cm;">Else, install '''pip3''' using the following command in the '''terminal''':</div>
+
 
+
 
+
 
+
 
'''sudo <space> apt <space> install <space> python3-pip'''
 
'''sudo <space> apt <space> install <space> python3-pip'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Open the terminal
 
|| Open the terminal
 
|| Open the '''terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys together.
 
|| Open the '''terminal''' by pressing '''Ctrl''', '''Alt''' and '''T''' keys together.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Type pip3 --version [Enter]
 
|| Type pip3 --version [Enter]
 
|| Let us check the version of '''pip.'''
 
|| Let us check the version of '''pip.'''
Line 100: Line 82:
  
 
Type '''pip3 <space> hyphen hyphen version '''and press''' Enter.'''
 
Type '''pip3 <space> hyphen hyphen version '''and press''' Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
  
Line 107: Line 89:
  
  
In my case it is '''pip 8.1.1''' for '''python 3.5'''.
+
In my case it is '''pip 18.0''' for '''python 3.5'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
| style="color:#0000ff;" | (pronounce as virtual-e-n-v).
+
|| (pronounce as virtual-e-n-v).
 
|| Next let us install '''Virtualenv.'''
 
|| Next let us install '''Virtualenv.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Type
 
|| Type
  
Line 118: Line 100:
  
  
And press''' Enter.'''
+
And press''' Enter.'''Provide the '''admin password '''and press''' Enter.'''
 
|-
 
|-
| 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;" | Only narration
+
| | Only narration
| 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;" | Next, I will create a folder named '''project_flask.'''
+
|| Next, I will create a folder named '''project_flask.'''
  
  
 
This folder will help me to organize my files in a single place.
 
This folder will help me to organize my files in a single place.
 
|-
 
|-
| 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]
+
| | [Terminal]
  
  
 
Type mkdir project_flask [Enter]
 
Type mkdir project_flask [Enter]
| 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;" | To do so, type '''mkdir <space> project underscore flask '''and press '''Enter.'''
+
|| To do so, type '''mkdir <space> project underscore flask '''and press '''Enter.'''
 
|-
 
|-
| 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]
+
| | [Terminal]
  
  
 
Type cd project_flask [Enter]
 
Type cd project_flask [Enter]
| 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;" | Then, type '''cd <space>''' '''project underscore flask''' and press '''Enter.'''
+
|| Type '''cd <space>''' '''project underscore flask''' and press '''Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration
 
|| Only narration
 
|| Now let us create a new '''virtual environment''' inside our newly created '''directory'''.
 
|| Now let us create a new '''virtual environment''' inside our newly created '''directory'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 158: Line 140:
  
 
The '''hyphen p''' flag is used to specify which''' python interpreter''' is to be used.
 
The '''hyphen p''' flag is used to specify which''' python interpreter''' is to be used.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Enter]
 
|| [Enter]
 
|| Now press '''Enter.'''
 
|| Now press '''Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 168: Line 150:
  
 
$ virtualenv -h [Enter]
 
$ virtualenv -h [Enter]
|| For '''help''', type the following command in the '''terminal'''
+
|| For '''help''', type the following command in the '''terminal.'''
  
 
'''virtualenv -h '''and press '''Enter.'''
 
'''virtualenv -h '''and press '''Enter.'''
Line 174: Line 156:
  
 
Here, we can see the list of available commands and options.
 
Here, we can see the list of available commands and options.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Highlight -p and its description.
 
|| Highlight -p and its description.
 
|| Observe that '''-p''' is used to specify the version of the '''python interpreter''' to be used.
 
|| Observe that '''-p''' is used to specify the version of the '''python interpreter''' to be used.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 185: Line 167:
  
 
Note that we have a folder named '''flask_venv''' in our current '''directory'''.
 
Note that we have a folder named '''flask_venv''' in our current '''directory'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 199: Line 181:
  
 
Press''' Enter'''.
 
Press''' Enter'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
 
Point to the list of directories in the terminal
 
Point to the list of directories in the terminal
 
|| Observe that there are a number of files and directories inside '''flask_venv'''.
 
|| Observe that there are a number of files and directories inside '''flask_venv'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Point to bin
 
|| [Terminal] Point to bin
 
|| '''bin​''' contains the executable files.
 
|| '''bin​''' contains the executable files.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Point to lib
 
|| [Terminal] Point to lib
 
|| '''lib​''' contains supporting library files.
 
|| '''lib​''' contains supporting library files.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Point to site-packages
 
|| [Terminal] Point to site-packages
 
|| Packages ​installed in this '''environment''' will appear in
 
|| Packages ​installed in this '''environment''' will appear in
  
 
'''site-packages'''.
 
'''site-packages'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal] Point to  
 
|| [Terminal] Point to  
  
 
lib/ python3.5 directory
 
lib/ python3.5 directory
 
|| '''site-packages''' can be found ​inside '''lib slash python3.5 directory.'''
 
|| '''site-packages''' can be found ​inside '''lib slash python3.5 directory.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| Next, we have to '''activate''' this '''virtual environment'''.  
 
|| Next, we have to '''activate''' this '''virtual environment'''.  
Line 226: Line 208:
  
 
'''Activate''' means, from now on all the''' python commands''' will run inside this '''venv'''.
 
'''Activate''' means, from now on all the''' python commands''' will run inside this '''venv'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 242: Line 224:
  
 
Press '''Enter.'''
 
Press '''Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| The '''shell''' now uses an instance of '''Python '''from our '''virtual environment.'''
 
|| The '''shell''' now uses an instance of '''Python '''from our '''virtual environment.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 254: Line 236:
  
  
We can see the name of the environment '''flask_venv''' inside parentheses, in the '''terminal'''.
+
We can see the name of the virtual environment '''flask_venv''' inside parentheses, in the '''terminal'''.
  
  
 
This indicates that we are inside an activated '''virtual''' '''environment''' called '''flask_venv'''.
 
This indicates that we are inside an activated '''virtual''' '''environment''' called '''flask_venv'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 271: Line 253:
  
 
In my case it shows '''Python 3.5.2'''.
 
In my case it shows '''Python 3.5.2'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 284: Line 266:
  
 
This will install the '''Flask''' package only for this '''venv''' and not system wide.  
 
This will install the '''Flask''' package only for this '''venv''' and not system wide.  
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 291: Line 273:
 
“...installed Flask-1.0.2 Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1...”
 
“...installed Flask-1.0.2 Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1...”
 
|| Some associated packages like '''Jinja2''', '''MarkupSafe''' and '''Werkzeug''' will also get installed.
 
|| Some associated packages like '''Jinja2''', '''MarkupSafe''' and '''Werkzeug''' will also get installed.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 305: Line 287:
  
 
And press '''Enter.'''
 
And press '''Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 313: Line 295:
  
  
That means our '''Flask''' installation is successful.
+
That means our '''Flask''' installation was successful.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
 
|| Let us see the working of '''Flask''' by writing a simple '''‘hello world’ app'''.
 
|| Let us see the working of '''Flask''' by writing a simple '''‘hello world’ app'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration
 
|| Only narration
 
|| Let’s create a '''python''' file at the same level as '''flask_venv'''.
 
|| Let’s create a '''python''' file at the same level as '''flask_venv'''.
Line 323: Line 305:
  
 
This is so that the '''flask_venv '''is logically separated from the '''hello world app'''.
 
This is so that the '''flask_venv '''is logically separated from the '''hello world app'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration
 
|| Only narration
|| I will be using the '''atom text editor.'''
+
|| I will be using '''atom text editor.'''
  
  
 
However, you can use any''' text editor''' of your choice.
 
However, you can use any''' text editor''' of your choice.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 335: Line 317:
 
$ atom hello_flask.py
 
$ atom hello_flask.py
 
|| Type the command
 
|| Type the command
 +
  
 
'''atom <space> hello underscore flask dot py'''
 
'''atom <space> hello underscore flask dot py'''
 +
  
 
and press '''Enter.'''
 
and press '''Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
|| A text editor called '''Atom''' will open.
+
|| This will open the file in the '''text editor '''window.
 
+
|-  
 
+
This will open the file in the '''text editor '''window.
+
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|| [Text Editor]
+
 
+
 
+
Close the default tabs.
+
|| If you open the '''Atom''' editor, for the first time you may see two default tabs.
+
 
+
 
+
“'''Welcome'''” and “'''Telemetry Consent'''”.
+
 
+
 
+
Click on the '''close''' buttons next to these tabs to close them.
+
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
|| [Text Editor]
 
|| [Text Editor]
  
Line 378: Line 347:
  
  
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Text Editor]
 
|| [Text Editor]
 
|| We will discuss this '''program''' and its '''elements''' in detail in later tutorials.
 
|| We will discuss this '''program''' and its '''elements''' in detail in later tutorials.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Save the file by pressing Ctrl+S.
 
|| Save the file by pressing Ctrl+S.
 
|| For now, let’s save the file by pressing '''Ctrl and S''' keys together.
 
|| For now, let’s save the file by pressing '''Ctrl and S''' keys together.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Click close button.
 
|| Click close button.
 
|| Then close the editor by clicking on the '''close''' button at the top left corner of the window.
 
|| Then close the editor by clicking on the '''close''' button at the top left corner of the window.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 400: Line 369:
  
 
And press '''Enter'''.
 
And press '''Enter'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Only narration.
 
|| Only narration.
 
|| This command sets an '''environment variable '''named '''FLASK_APP''' with the '''python '''file-name.
 
|| This command sets an '''environment variable '''named '''FLASK_APP''' with the '''python '''file-name.
Line 409: Line 378:
  
 
This tells the '''terminal''' which '''flask app '''to work with.
 
This tells the '''terminal''' which '''flask app '''to work with.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 424: Line 393:
  
 
And press''' Enter.'''
 
And press''' Enter.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to the output
 
|| Point to the output
 
|| Observe that we got the filename '''hello underscore flask dot py''' back.
 
|| Observe that we got the filename '''hello underscore flask dot py''' back.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Terminal]
 
|| [Terminal]
  
Line 464: Line 433:
  
 
Press '''Enter'''.
 
Press '''Enter'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to the message
 
|| Point to the message
 
|| If all goes well, you should see a message  
 
|| If all goes well, you should see a message  
  
'''“Running on [http://127.0.0.1:5000/ http://127.0.0.1:5000/]”'''
+
'''“Running on http://127.0.0.1:5000/”'''
  
  
 
This implies that the '''server''' is running locally.
 
This implies that the '''server''' is running locally.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| [Firefox]
 
|| [Firefox]
  
Type  
+
Type http://127.0.0.1:5000/
 
+
[http://127.0.0.1:5000/ http://127.0.0.1:5000/]
+
  
 
And press Enter.
 
And press Enter.
Line 483: Line 450:
  
  
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/ and press '''Enter'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| 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.  
Line 491: Line 458:
 
Which means that '''Flask '''is working fine in the '''Virtual Environment'''.
 
Which means that '''Flask '''is working fine in the '''Virtual Environment'''.
 
|-
 
|-
| 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;" | Switch to Terminal
+
|| Switch to Terminal
| 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 go back to the '''terminal.'''
+
|| Let us go back to the '''terminal.'''
 
|-
 
|-
| 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  
+
|| 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: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.
+
|| To stop the '''server''', press '''Ctrl''' and '''C''' keys simultaneously.
 
|-
 
|-
| 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]
+
| | [Terminal]
  
 
Type deactivate and press Enter
 
Type deactivate and press Enter
| 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;" | When the '''Virtual Environment''' is not in use, we can deactivate it.
+
|| When the '''Virtual Environment''' is not in use, we can deactivate it.
  
  
 
To do so, type '''deactivate''' and press '''Enter'''.
 
To do so, type '''deactivate''' and press '''Enter'''.
 
|-
 
|-
| 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]
+
| | [Terminal]
  
 
Point the shell prompt
 
Point the shell prompt
| 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 can see that the '''flask_venv '''name disappears from the '''command prompt.'''
+
|| We can see that the '''flask_venv '''name disappears from the '''command prompt.'''
 
|-
 
|-
| 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;" |  
+
| | Narration only
| 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;" | With this, we come to the end of this tutorial.
+
|| With this, we come to the end of this tutorial.
 
+
  
 
Let us summarize.
 
Let us summarize.
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Slide 9: Summary
 
|| Slide 9: Summary
 
|| In this tutorial we learnt to
 
|| In this tutorial we learnt to
* <div style="margin-left:1.27cm;margin-right:0cm;">Create a '''Virtual Environment.'''</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Activate and deactivate the '''Virtual Environment'''.</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Install '''Flask '''and</div>
 
* <div style="margin-left:1.27cm;margin-right:0cm;">Launch '''“Hello world”''' in '''Flask'''.</div>
 
  
 +
* Create a '''Virtual Environment.'''
 +
* Activate and deactivate the '''Virtual Environment'''.
 +
* Install '''Flask '''and
 +
* Launch '''“Hello world”''' in '''Flask'''.
  
 
|-
 
|-
| 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
+
| | Slide: About Spoken Tutorial project
| 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.
+
|| 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 #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:
+
|| Slide:
  
 
Spoken Tutorial workshops
 
Spoken Tutorial workshops
| 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.
+
|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
 
+
  
 
For more details, please write to us.
 
For more details, please write to us.
 
|-
 
|-
| 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: Forum for specific questions:
+
| | Slide: Forum for specific questions:
| 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;" |  
+
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">Do you have questions in this Spoken Tutorial?</div>
+
* Do you have questions in this Spoken Tutorial?
* <div style="margin-left:1.27cm;margin-right:0cm;">Please visit this site</div>
+
* Please visit this site
* <div style="margin-left:1.27cm;margin-right:0cm;">Choose the minute and second where you have the question.</div>
+
* Choose the minute and second where you have the question.
* <div style="margin-left:1.27cm;margin-right:0cm;">Explain your question briefly.</div>
+
* Explain your question briefly.
* <div style="margin-left:1.27cm;margin-right:0cm;">Someone from our team will answer them.</div>
+
* Someone from our team will answer them.
 
+
 
+
 
|-
 
|-
| 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: Forum for specific questions:
+
| | Slide: Forum for specific questions:
| 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;" |  
+
||  
* <div style="margin-left:1.27cm;margin-right:0cm;">The Spoken Tutorial forum is for specific questions on this tutorial.</div>
+
* The Spoken Tutorial forum is for specific questions on this tutorial.
* <div style="margin-left:1.27cm;margin-right:0cm;">Please do not post unrelated and general questions on them.</div>
+
* Please do not post unrelated and general questions on them.
* <div style="margin-left:1.27cm;margin-right:0cm;">This will help reduce the clutter.</div>
+
* This will help reduce the clutter.
* <div style="margin-left:1.27cm;margin-right:0cm;">With less clutter, we can use these discussion as instructional material.</div>
+
* With less clutter, we can use these discussion as instructional material.
 
+
 
+
 
|-
 
|-
| 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
+
|| Slide: Acknowledgement
| 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.
+
|| 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="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| This is Siddhartha Sarkar signing off. Thanks for watching.
 
|| This is Siddhartha Sarkar signing off. Thanks for watching.
 
|-
 
|-
 
|}
 
|}

Latest revision as of 11:59, 28 January 2019

Title of script: Installation of Python Flask

Author: Siddhartha Sarkar

Keywords: ​Video tutorial, Python Flask, Installation, Virtual Environment.


Visual Cue Narration
Slide 1: Installation of Python Flask Welcome to the spoken tutorial on Installation of Python Flask.
Slide 2: Learning Objectives In this tutorial we will learn to
  • Create a Virtual Environment.
  • Activate and deactivate the Virtual Environment.
  • Install packages inside the Virtual Environment.
  • And launch a Flask application.
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
  • Firefox web browser and
  • A working Internet connection.

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.

Slide 6: Virtual Environment
  • A virtual environment is a self-contained directory tree.
  • It contains a Python installation for a particular version of Python.
  • Additional packages can be installed inside the virtual environment.
Slide 6: Virtual Environment

(pronounce as v-e-n-v)

  • Venv is the short form for virtual environment.
  • Venv is used to avoid conflict between different Python installations.
Slide 7: Virtual Environment
  • For every project, we can have a separate Venv.
  • We will install Venv via a package called pip.
Slide 8: Pip
  • Pip is a package manager program.
  • Used to install, upgrade, and remove Python packages.
  • Pip3 is the Python3 version of pip
Slide: Pip3 installation
  • To check if pip3 is already installed, type the following command in the terminal:

pip3 <space> hyphen hyphen version and press Enter.

  • If it gives a version number, then you don’t need to install it again.
  • Else, install pip3 using the following command in the terminal:

sudo <space> apt <space> install <space> python3-pip

Open the terminal Open the terminal by pressing Ctrl, Alt and T keys together.
Type pip3 --version [Enter] Let us check the version of pip.


Type pip3 <space> hyphen hyphen version and press Enter.

Point to pip version

You should be able to see some valid pip3 version number.


In my case it is pip 18.0 for python 3.5.

(pronounce as virtual-e-n-v). Next let us install Virtualenv.
Type

$ sudo pip3 install virtualenv [Enter]

Type sudo <space> pip3 <space> install <space> virtualenv


And press Enter.Provide the admin password and press Enter.

Only narration Next, I will create a folder named project_flask.


This folder will help me to organize my files in a single place.

[Terminal]


Type mkdir project_flask [Enter]

To do so, type mkdir <space> project underscore flask and press Enter.
[Terminal]


Type cd project_flask [Enter]

Type cd <space> project underscore flask and press Enter.
Only narration Now let us create a new virtual environment inside our newly created directory.
[Terminal]

Typing

$ virtualenv -p python3 flask_venv

So type

virtualenv <space> <hyphen> p <space> python3 <space> flask_venv


This will create a virtual environment named flask_venv.


You may choose any other name for the virtual environment.


The hyphen p flag is used to specify which python interpreter is to be used.

[Enter] Now press Enter.
[Terminal]

Typing


$ virtualenv -h [Enter]

For help, type the following command in the terminal.

virtualenv -h and press Enter.


Here, we can see the list of available commands and options.

Highlight -p and its description. Observe that -p is used to specify the version of the python interpreter to be used.
[Terminal]

Type $ ls [Enter]

Type ls and press Enter.


Note that we have a folder named flask_venv in our current directory.

[Terminal]

Type


$ ls flask_venv [Enter]

Now, let us see the contents of flask_venv directory.


Type ls <space> flask underscore venv


Press Enter.

[Terminal]

Point to the list of directories in the terminal

Observe that there are a number of files and directories inside flask_venv.
[Terminal] Point to bin bin​ contains the executable files.
[Terminal] Point to lib lib​ contains supporting library files.
[Terminal] Point to site-packages Packages ​installed in this environment will appear in

site-packages.

[Terminal] Point to

lib/ python3.5 directory

site-packages can be found ​inside lib slash python3.5 directory.
Next, we have to activate this virtual environment.


Activate means, from now on all the python commands will run inside this venv.

[Terminal]

Typing

$ . flask_venv/bin/activate


To do that, we have to run the activate executable from the bin directory.


Type dot <space> flask <underscore> venv slash bin slash activate


Press Enter.

The shell now uses an instance of Python from our virtual environment.
[Terminal]

Highlight

(flask_env)

Once activated, notice the change in the terminal.


We can see the name of the virtual environment flask_venv inside parentheses, in the terminal.


This indicates that we are inside an activated virtual environment called flask_venv.

[Terminal]

Type

$ python3 -V

We should now make sure that we are using Python 3 inside this Virtual Environment.


For that, type python3 <space> hyphen capital V and press Enter.


In my case it shows Python 3.5.2.

[Terminal]

Typing

$ pip3 install flask

Next let us install flask inside venv.


Type pip3<space> install <space> flask and press Enter.


This will install the Flask package only for this venv and not system wide.

[Terminal]

Highlight

“...installed Flask-1.0.2 Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1...”

Some associated packages like Jinja2, MarkupSafe and Werkzeug will also get installed.
[Terminal]


Type


$pip list

To confirm, whether Flask has been installed or not, type

pip <space> list


And press Enter.

[Terminal]


Highlight flask, jinja2, werkzeug.

Observe that we have flask, jinja2, werkzeug etc.


That means our Flask installation was successful.

[Terminal] Let us see the working of Flask by writing a simple ‘hello world’ app.
Only narration Let’s create a python file at the same level as flask_venv.


This is so that the flask_venv is logically separated from the hello world app.

Only narration I will be using atom text editor.


However, you can use any text editor of your choice.

[Terminal]


$ atom hello_flask.py

Type the command


atom <space> hello underscore flask dot py


and press Enter.

This will open the file in the text editor window.
[Text Editor]


from flask import Flask

app = Flask(__name__)


@app.route('/')

def hello_world():

(Tab)return 'Hello, World!'

Type the code as shown here.


Which will launch a very simple built-in server.


[Text Editor] We will discuss this program and its elements in detail in later tutorials.
Save the file by pressing Ctrl+S. For now, let’s save the file by pressing Ctrl and S keys together.
Click close button. Then close the editor by clicking on the close button at the top left corner of the window.
[Terminal]

Type


$ export FLASK_APP=hello_flask.py

Come back to the terminal, and type

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


And press Enter.

Only narration. This command sets an environment variable named FLASK_APP with the python file-name.


The FLASK_APP variable specifies the module to import while running our app.


This tells the terminal which flask app to work with.

[Terminal]


Type

$ echo $FLASK_APP

It is possible to verify that we have indeed set FLASK_APP variable by the filename.


To do that type

echo <space> <dollar> FLASK underscore APP

And press Enter.

Point to the output Observe that we got the filename hello underscore flask dot py back.
[Terminal]

Type


$ python3 -m flask run








[Enter]

Now type

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


This command runs the flask application named hello underscore flask.


The file to execute is the one given by the FLASK_APP environment variable.


We have already set that in the previous step.


Press Enter.

Point to the message If all goes well, you should see a message

“Running on http://127.0.0.1:5000/”


This implies that the server is running locally.

[Firefox]

Type http://127.0.0.1:5000/

And press Enter.

Now, open a web browser.


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

Highlight ‘Hello, World!’ We can see the message ‘Hello, World!’ written in the browser window.


Which means that Flask is working fine in the Virtual Environment.

Switch to Terminal Let us go back to the terminal.
Press Ctrl+c simultaneously To stop the server, press Ctrl and C keys simultaneously.
[Terminal]

Type deactivate and press Enter

When the Virtual Environment is not in use, we can deactivate it.


To do so, type deactivate and press Enter.

[Terminal]

Point the shell prompt

We can see that the flask_venv name disappears from the command prompt.
Narration only With this, we come to the end of this tutorial.

Let us summarize.

Slide 9: Summary In this tutorial we learnt to
  • Create a Virtual Environment.
  • Activate and deactivate the Virtual Environment.
  • Install Flask and
  • Launch “Hello world” in Flask.
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: Forum for specific questions:
  • Do you have questions in this Spoken Tutorial?
  • Please visit this site
  • Choose the minute and second where you have the question.
  • Explain your question briefly.
  • Someone from our team will answer them.
Slide: Forum for specific questions:
  • The Spoken Tutorial forum is for specific questions on this tutorial.
  • Please do not post unrelated and general questions on them.
  • This will help reduce the clutter.
  • With less clutter, we can use these discussion as instructional material.
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

Pravin1389, SiddharthaSarkar