WEBVTT
0
00:00.600 --> 00:04.670
All right. Let's get started developing websites using Flask.
1
00:05.330 --> 00:09.350
Now Flask is one of the most popular web development frameworks,
2
00:09.860 --> 00:13.490
but what does it mean to be a framework? Well,
3
00:13.880 --> 00:18.710
we've seen libraries before like Beautiful Soup. Tools that we can use and tap
4
00:18.710 --> 00:22.760
into whenever we need a particular piece of functionality. Now,
5
00:22.820 --> 00:26.990
a framework is a little bit like a library in the sense that it's a package of
6
00:26.990 --> 00:30.770
code that you didn't write, but it also got some differences.
7
00:31.100 --> 00:35.960
So here I've got a graphic from the differencebetween.net and one of the
8
00:35.960 --> 00:40.960
biggest differences is the fact that a library is something which you call upon
9
00:43.580 --> 00:45.140
to do something specific.
10
00:45.620 --> 00:50.120
Whereas a framework is something which you have to abide by their rules,
11
00:50.390 --> 00:52.610
you have to use their architecture.
12
00:53.000 --> 00:56.990
And when it comes to triggering some sort of functionality,
13
00:57.260 --> 01:00.530
it's the framework that calls upon your code.
14
01:01.190 --> 01:02.960
So what does that mean? Well,
15
01:02.990 --> 01:07.990
remember when we used the requests library and we would say something like requests
16
01:08.210 --> 01:12.980
.get and then we would tell it which webpage to go and fetch.
17
01:13.400 --> 01:13.820
Well,
18
01:13.820 --> 01:18.650
this is us tapping into that library and then giving it a command to do
19
01:18.650 --> 01:22.100
something. Now, when we're working with a framework,
20
01:22.130 --> 01:25.400
it doesn't really work like that. We don't really say, hey framework,
21
01:25.430 --> 01:27.530
do this thing for us. Instead,
22
01:27.560 --> 01:32.560
we make sure that our code is defined in a way that the framework wants it to
23
01:32.690 --> 01:34.910
be. And then when the time is right,
24
01:35.090 --> 01:38.390
the framework is actually going to call our methods
25
01:38.780 --> 01:41.090
instead of us calling the framework.
26
01:41.600 --> 01:45.950
All we have to do is to plan ahead for certain situations.
27
01:46.280 --> 01:51.020
If it was this situation, what do we want to happen? If it was that situation,
28
01:51.200 --> 01:52.640
what code it should be run?
29
01:53.060 --> 01:57.530
So it might be that all you have to do is just write some functions like hello
30
01:57.530 --> 02:00.110
world and when the user goes to the website,
31
02:00.440 --> 02:03.440
then it's going to display this text Hello world.
32
02:04.700 --> 02:07.700
Let's try this in practice. Now by
33
02:07.700 --> 02:10.070
now you would of known that as developers,
34
02:10.400 --> 02:14.420
especially now that we're in the advanced stages of becoming a Python developer,
35
02:14.790 --> 02:19.790
the most important thing when we approach a new tool or a new technology is to
36
02:19.790 --> 02:21.140
read the documentation.
37
02:21.770 --> 02:26.770
So Flask actually has a really good piece of documentation in order to tell us
38
02:27.110 --> 02:32.090
how to get started quickly using Flask. As you can see,
39
02:32.090 --> 02:36.200
they've described what a minimal Flask application looks like.
40
02:36.530 --> 02:40.730
And this is a very simple server set up with flask.
41
02:41.300 --> 02:46.040
So let's go ahead and copy this code. And I'm going to create a new project
42
02:46.100 --> 02:50.360
which I've decided to call hello_flask. And then in this project folder,
43
02:50.420 --> 02:54.710
I'm going to create a new file which I'll call hello.py.
44
02:55.640 --> 03:00.640
Now it's important that the name of your file does not conflict with the name of
45
03:01.180 --> 03:04.720
the framework or library in fact. So for example,
46
03:04.720 --> 03:08.170
if I was to create a file called requests.py
47
03:08.620 --> 03:10.540
and I had, um,
48
03:10.750 --> 03:13.750
imported the requests library.
49
03:14.350 --> 03:17.650
And then I tried to do something like requests.get.
50
03:19.210 --> 03:20.650
Now when I run this,
51
03:20.680 --> 03:25.680
because the name of my file conflicts with the name of the module, what will happen is
52
03:26.530 --> 03:30.610
I will get this error. And it might be a little bit confusing
53
03:30.610 --> 03:34.660
cause it says, well, request has no attribute get. Well
54
03:34.660 --> 03:37.330
we know it does because it's in the documentation.
55
03:37.750 --> 03:42.750
And the reason why we're getting this error is because we've named this file
56
03:43.690 --> 03:45.730
the same name as the module.
57
03:46.120 --> 03:48.850
So this is something that happens to a lot of people
58
03:49.120 --> 03:54.120
so make sure that you don't commit this mistake and you could name it anything
59
03:54.460 --> 03:59.350
like main or server or hello in our case. Notice that now
60
03:59.350 --> 04:03.730
if I change the name, it actually automatically changed the import
61
04:04.000 --> 04:08.380
which is not what we want. We want the import to be requests
62
04:08.620 --> 04:12.760
and we want to make sure that we install our package requests.
63
04:14.140 --> 04:15.640
And once that's done,
64
04:15.700 --> 04:19.720
you can see our module and our file have completely different names.
65
04:20.110 --> 04:22.060
So now, if I run this file,
66
04:22.120 --> 04:25.450
it works perfectly and it ends with exit code zero,
67
04:25.510 --> 04:27.490
which means everything was successful.
68
04:28.240 --> 04:31.510
So now I'm going to go ahead and delete this file
69
04:33.670 --> 04:38.410
and go back to our hello.py. Now inside our hello.py
70
04:38.470 --> 04:43.470
I'm going to paste in the minimal Flask application from the Flask
71
04:44.020 --> 04:47.080
documentation. So paste that right here.
72
04:47.740 --> 04:49.510
And as you might remember,
73
04:49.570 --> 04:54.310
there's several ways that we can install new modules. So in this case,
74
04:54.310 --> 04:59.310
the module is Flask and we can either click on the red light bulb to install
75
05:00.160 --> 05:05.050
this package. Alternatively, we can go to PyCharm, preferences,
76
05:05.380 --> 05:10.380
and then go to our project and into the interpreter to add the Flask package like
77
05:12.790 --> 05:13.380
this.
78
05:13.380 --> 05:14.213
Right.
79
05:16.470 --> 05:19.260
Now, if you have the PyCharm professional edition,
80
05:19.770 --> 05:24.360
there's additional tools to make it easier to install Flask into a project and
81
05:24.360 --> 05:28.620
to work with Flask projects. But because we're using the free community edition,
82
05:28.680 --> 05:30.960
I'm just going to go ahead and dismiss that popup.
83
05:31.620 --> 05:34.290
So I've shown you two ways of installing a package.
84
05:34.440 --> 05:36.090
Now I want to show you the third way,
85
05:36.660 --> 05:40.650
which you might come across if you're looking at the installation.
86
05:41.850 --> 05:44.730
So notice here, in order to install Flask,
87
05:44.760 --> 05:47.550
they're using pip install Flask.
88
05:48.930 --> 05:53.930
So pip is something that allows us to install Python packages from pypi.
89
05:55.620 --> 06:00.590
So any package that you on pypi.org, you can install using pip.
90
06:01.280 --> 06:05.930
And what we have to do is to type in the name that you see right here.
91
06:07.010 --> 06:08.930
For example, if we want to install Flask,
92
06:08.990 --> 06:13.400
then it's pip install and it's the capital F for Flask.
93
06:13.790 --> 06:15.980
So we can copy that into our clipboard.
94
06:16.460 --> 06:18.680
And if we go to the terminal tab at the bottom,
95
06:18.950 --> 06:22.700
we can paste that instruction in here and hit enter.
96
06:23.630 --> 06:28.520
Now it should have successfully installed Flask . And once I dismiss that,
97
06:28.520 --> 06:32.660
you can see my errors go away. So all three methods work.
98
06:32.720 --> 06:36.140
I personally prefer the red light bulb, just because it's much quicker.
99
06:36.410 --> 06:41.360
It's just two clicks rather than typing a lot of code. Now,
100
06:41.360 --> 06:42.860
once we've installed Flask,
101
06:43.160 --> 06:47.870
we can go ahead and add some space to get rid of all the warnings from Py
102
06:47.870 --> 06:52.460
Charm. Um, we can go ahead and run our project.
103
06:54.020 --> 06:57.050
Now, as soon as I run the project, you can see
104
06:57.050 --> 07:00.080
it tells me the process was finished with exit code zero,
105
07:00.110 --> 07:02.240
which means everything was successful,
106
07:02.630 --> 07:05.540
but where's my server and where's my website.
107
07:06.770 --> 07:11.180
So let's go back to the Quickstart to see what we actually have to do in order
108
07:11.180 --> 07:15.350
to set up our server. So to run our Flask application,
109
07:15.380 --> 07:20.090
we're going to firstly, need to export a environment variable.
110
07:20.450 --> 07:23.420
So in previous lessons, we've talked about environment variables,
111
07:23.720 --> 07:26.810
but basically this is going to tell the Flask framework
112
07:27.050 --> 07:30.710
what is the name of the file that contains our server.
113
07:31.010 --> 07:33.830
So in our case, as well as in the Quickstart,
114
07:34.010 --> 07:36.710
the name of that file is hello.py.
115
07:37.220 --> 07:41.810
So we basically have to point to that file to get Flask
116
07:41.840 --> 07:46.700
to be able to recognize it and to use it as the server. So on Mac
117
07:46.760 --> 07:50.030
we're going to type export space
118
07:50.270 --> 07:53.540
and then we're going to put in the name of the environment variable
119
07:53.810 --> 07:58.670
which is FLASK_APP and its all caps.
120
07:58.850 --> 08:02.000
And then with no spaces, we've got a equal sign
121
08:02.420 --> 08:05.990
and then the name of our file, which is hello.py.
122
08:06.650 --> 08:08.420
So now when I hit enter,
123
08:08.540 --> 08:12.980
that's going to add that environment variable under the name that Flask is
124
08:12.980 --> 08:16.730
expecting, which is flask.app. Now,
125
08:16.790 --> 08:19.640
as it mentions in the Quickstart, if you're on Windows
126
08:19.670 --> 08:23.480
the keyword is not export, but instead it's set.
127
08:24.710 --> 08:28.730
So again, inside your terminal down here, you're going to type set.
128
08:29.090 --> 08:32.510
And then you're going to put in the name of that environment variable
129
08:32.720 --> 08:37.720
which was FLASK_APP and then with no space equals and it's our hello
130
08:39.590 --> 08:44.060
.py. And once you hit enter,
131
08:44.420 --> 08:48.320
it should give you the prompt again indicating that everything went smoothly.
132
08:49.130 --> 08:50.990
Now, once we've done that,
133
08:51.290 --> 08:55.380
the next step is to simply use the Flask command called run.
134
08:59.180 --> 09:03.590
And when I hit enter, you'll see that it's created my server.
135
09:03.620 --> 09:08.620
So it's serving up the Flask app that I've created in hello.py
136
09:09.830 --> 09:14.810
and we're get a warning telling us that this is a development server and telling
137
09:14.810 --> 09:18.110
us that if you want to actually launch it as a product,
138
09:18.470 --> 09:22.430
don't use this development server. There's a few steps
139
09:22.430 --> 09:26.780
you have to carry out if you actually wanted to make this production ready and
140
09:26.780 --> 09:30.350
ready for the internet and customers. But in our case,
141
09:30.500 --> 09:33.500
we are developing. So this is perfect.
142
09:33.950 --> 09:38.950
And it tells us where to go and find our website.
143
09:39.650 --> 09:42.740
So if you imagine that Google is at https://
144
09:42.770 --> 09:45.200
www.google.com. Well,
145
09:45.200 --> 09:50.200
this is the address of our website and it's being served by our computer.
146
09:53.000 --> 09:56.150
So when you're trying to get hold of a website on the internet,
147
09:56.540 --> 10:00.320
then you have to point towards the IP address
148
10:00.470 --> 10:02.150
of that particular webpage.
149
10:02.630 --> 10:07.490
But because we've created our server locally and it's being served on our own
150
10:07.490 --> 10:12.050
computer, then this is basically the local address
151
10:12.230 --> 10:13.063
of that website.
152
10:13.820 --> 10:18.230
Now a neat thing about PyCharm is if I simply just click on this link,
153
10:18.440 --> 10:23.440
then it's going to launch my website in my browser and you can see right up
154
10:24.350 --> 10:27.320
here, we've got hello world showing up
155
10:27.680 --> 10:32.060
which is the same as what we've got here in this method.
156
10:33.410 --> 10:38.410
So that proves that we've successfully managed to create our very first web
157
10:39.140 --> 10:40.970
server using Flask.
158
10:41.210 --> 10:45.680
And it's able to serve up our very first Flask website. Now,
159
10:45.710 --> 10:50.120
if you go ahead and open up the Chrome developer tools and you go to elements,
160
10:50.540 --> 10:54.920
you can see that what we wrote here which is just a string
161
10:55.190 --> 10:59.330
was actually converted by Flask into full HTML.
162
10:59.360 --> 11:01.790
It's got the HTML tag, it's got the head tag,
163
11:01.790 --> 11:04.820
it's got the body tag and we didn't have to do any of this.
164
11:04.850 --> 11:09.560
We just told Flask what we wanted to be returned onto the page
165
11:09.860 --> 11:12.650
when the user goes to the homepage,
166
11:12.860 --> 11:16.190
which has just the web address plus a forward slash.
167
11:16.700 --> 11:20.570
Now the very last thing to remember is once we're done with our server,
168
11:20.600 --> 11:22.760
because it's still ongoing
169
11:22.760 --> 11:27.350
it's still waiting for a client to hit up this website,
170
11:27.800 --> 11:32.800
we have to get it to stop waiting. So we can quit by holding down control and
171
11:33.470 --> 11:38.390
then pressing C. And you can see this takes us back to our prompt
172
11:38.450 --> 11:42.620
where we've got our name and our project. Now,
173
11:42.650 --> 11:47.650
if you don't stop it and you try to run two Flask applications to the same
174
11:47.780 --> 11:50.630
address then the second one is simply not going to run.
175
11:51.320 --> 11:55.960
So just be aware that once you're done with your server, hit control+c to quit.
176
11:57.130 --> 11:58.570
Now in the next lesson,
177
11:58.630 --> 12:02.620
I want to talk a little bit more about the commands that you can use in the
178
12:02.620 --> 12:06.580
terminal because this is called the command line.
179
12:06.880 --> 12:11.880
And just as here we use the command line to run our Flask application, to export
180
12:13.510 --> 12:18.340
our environment variables, we can also do other things like create folders,
181
12:18.340 --> 12:22.060
create files, move files around. It's actually a very,
182
12:22.090 --> 12:25.330
very powerful way of interacting with our computer.
183
12:26.080 --> 12:30.370
That's what we're going to do in the next lesson. So for all of that and more,
184
12:30.640 --> 12:31.120
I'll see you there.