Difference between revisions of "Python-Flask/C2/Installation-of-Python-Flask/English"
(Tutorial 2) |
(Script synced with video.) |
||
Line 38: | Line 38: | ||
Pre-requisites | Pre-requisites | ||
− | |||
|| To follow this tutorial, you should have working knowledge on | || To follow this tutorial, you should have working knowledge on | ||
Line 75: | Line 74: | ||
|| | || | ||
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip '''is a '''package manager '''program.</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip '''is a '''package manager '''program.</div> | ||
− | * <div style="margin-left:1.27cm;margin-right:0cm;"> | + | * <div style="margin-left:1.27cm;margin-right:0cm;">Used to install, upgrade, and remove '''Python packages. '''</div> |
* <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip3 '''is the '''Python3 '''version of '''pip'''</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">'''Pip3 '''is the '''Python3 '''version of '''pip'''</div> | ||
Line 85: | Line 84: | ||
− | '''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> | + | '''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> | ||
* <div style="margin-left:1.27cm;margin-right:0cm;">Else, install '''pip3''' using the following command in the '''terminal''':</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">Else, install '''pip3''' using the following command in the '''terminal''':</div> | ||
Line 107: | Line 107: | ||
− | In my case it is '''pip | + | In my case it is '''pip 18.0''' for '''python 3.5'''. |
|- style="border:1pt solid #000000;padding:0.176cm;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
| style="color:#0000ff;" | (pronounce as virtual-e-n-v). | | style="color:#0000ff;" | (pronounce as virtual-e-n-v). | ||
Line 118: | Line 118: | ||
− | 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 | | 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 | ||
Line 136: | Line 136: | ||
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;" | | + | | 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;" | Type '''cd <space>''' '''project underscore flask''' and press '''Enter.''' |
|- style="border:1pt solid #000000;padding:0.176cm;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
|| Only narration | || Only narration | ||
Line 168: | Line 168: | ||
$ 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 254: | Line 254: | ||
− | 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'''. |
Line 313: | Line 313: | ||
− | That means our '''Flask''' installation | + | That means our '''Flask''' installation was successful. |
|- style="border:1pt solid #000000;padding:0.176cm;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
|| [Terminal] | || [Terminal] | ||
Line 325: | Line 325: | ||
|- style="border:1pt solid #000000;padding:0.176cm;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
|| Only narration | || Only narration | ||
− | || I will be using | + | || I will be using '''atom text editor.''' |
Line 335: | Line 335: | ||
$ 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;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
|| | || | ||
− | || | + | || 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;" | |- style="border:1pt solid #000000;padding:0.176cm;" | ||
|| [Text Editor] | || [Text Editor] | ||
Line 510: | Line 497: | ||
| 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.''' | | 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.''' | ||
|- | |- | ||
− | | 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="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. | | 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. | ||
Line 517: | Line 504: | ||
|- style="border:1pt solid #000000;padding:0.176cm;" | |- 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;">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;">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;">Install '''Flask '''and</div> | ||
Line 540: | Line 526: | ||
|- | |- | ||
| 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: | | 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: | ||
− | | 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;" | | + | | 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> |
− | * <div style="margin-left:1.27cm;margin-right:0cm;">Do you have questions in this Spoken Tutorial?</div> | + | |
* <div style="margin-left:1.27cm;margin-right:0cm;">Please visit this site</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">Please visit this site</div> | ||
* <div style="margin-left:1.27cm;margin-right:0cm;">Choose the minute and second where you have the question.</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">Choose the minute and second where you have the question.</div> | ||
Line 550: | Line 535: | ||
|- | |- | ||
| 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: | | 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: | ||
− | | 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;" | | + | | 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> |
− | * <div style="margin-left:1.27cm;margin-right:0cm;">The Spoken Tutorial forum is for specific questions on this tutorial.</div> | + | |
* <div style="margin-left:1.27cm;margin-right:0cm;">Please do not post unrelated and general questions on them.</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">Please do not post unrelated and general questions on them.</div> | ||
* <div style="margin-left:1.27cm;margin-right:0cm;">This will help reduce the clutter.</div> | * <div style="margin-left:1.27cm;margin-right:0cm;">This will help reduce the clutter.</div> |
Revision as of 16:52, 21 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
|
Slides 3: System Requirements | To record this tutorial, I’m using
|
Slide 5:
Pre-requisites |
To follow this tutorial, you should have working knowledge on
|
Slide 6: Virtual Environment |
|
Slide 6: Virtual Environment
(pronounce as v-e-n-v)
|
|
Slide 7: Virtual Environment |
|
Slide 8: Pip |
|
Slide: Pip3 installation |
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.
|
Point to pip version |
You should be able to see some valid pip3 version number.
|
(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
|
Only narration | Next, I will create a folder named project_flask.
|
[Terminal]
|
To do so, type mkdir <space> project underscore flask and press Enter. |
[Terminal]
|
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
|
[Enter] | Now press Enter. |
[Terminal]
Typing
|
For help, type the following command in the terminal.
virtualenv -h and press Enter.
|
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.
|
[Terminal]
Type
|
Now, let us see the contents of flask_venv directory.
|
[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.
| |
[Terminal]
Typing $ . flask_venv/bin/activate
|
To do that, we have to run the activate executable from the bin directory.
|
The shell now uses an instance of Python from our virtual environment. | |
[Terminal]
Highlight (flask_env) |
Once activated, notice the change in the terminal.
|
[Terminal]
Type $ python3 -V |
We should now make sure that we are using Python 3 inside this Virtual Environment.
|
[Terminal]
Typing $ pip3 install flask |
Next let us install flask inside venv.
|
[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]
|
To confirm, whether Flask has been installed or not, type
pip <space> list
|
[Terminal]
|
Observe that we have flask, jinja2, werkzeug etc.
|
[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.
|
Only narration | I will be using atom text editor.
|
[Terminal]
|
Type the command
|
This will open the file in the text editor window. | |
[Text Editor]
app = Flask(__name__)
def hello_world(): (Tab)return 'Hello, World!' |
Type the code as shown here.
|
[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
|
Come back to the terminal, and type
export <space> FLASK_APP <equal to> hello underscore flask dot py
|
Only narration. | This command sets an environment variable named FLASK_APP with the python file-name.
|
[Terminal]
$ echo $FLASK_APP |
It is possible to verify that we have indeed set FLASK_APP variable by the filename.
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
|
Now type
python3 <space> hyphen m <space> flask <space> run
|
Point to the message | If all goes well, you should see a message
“Running on http://127.0.0.1:5000/”
|
[Firefox]
Type And press Enter. |
Now, open a web browser.
|
Highlight ‘Hello, World!’ | We can see the message ‘Hello, World!’ written in the browser window.
|
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.
|
[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.
|
Slide 9: Summary | In this tutorial we learnt to* Create a Virtual Environment.
|
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: Forum for specific questions: | * Do you have questions in this Spoken Tutorial?
|
Slide: Forum for specific questions: | * The Spoken Tutorial forum is for specific questions on this tutorial.
|
Slide: Acknowledgement | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
|
This is Siddhartha Sarkar signing off. Thanks for watching. |