1
00:00:00,600 --> 00:00:04,670
All right. Let's get started developing websites using Flask.

2
00:00:05,330 --> 00:00:09,350
Now Flask is one of the most popular web development frameworks,

3
00:00:09,860 --> 00:00:13,490
but what does it mean to be a framework? Well,

4
00:00:13,880 --> 00:00:18,710
we've seen libraries before like Beautiful Soup. Tools that we can use and tap

5
00:00:18,710 --> 00:00:22,760
into whenever we need a particular piece of functionality. Now,

6
00:00:22,820 --> 00:00:26,990
a framework is a little bit like a library in the sense that it's a package of

7
00:00:26,990 --> 00:00:30,770
code that you didn't write, but it also got some differences.

8
00:00:31,100 --> 00:00:35,960
So here I've got a graphic from the differencebetween.net and one of the

9
00:00:35,960 --> 00:00:40,960
biggest differences is the fact that a library is something which you call upon

10
00:00:43,580 --> 00:00:45,140
to do something specific.

11
00:00:45,620 --> 00:00:50,120
Whereas a framework is something which you have to abide by their rules,

12
00:00:50,390 --> 00:00:52,610
you have to use their architecture.

13
00:00:53,000 --> 00:00:56,990
And when it comes to triggering some sort of functionality,

14
00:00:57,260 --> 00:01:00,530
it's the framework that calls upon your code.

15
00:01:01,190 --> 00:01:02,960
So what does that mean? Well,

16
00:01:02,990 --> 00:01:07,990
remember when we used the requests library and we would say something like requests

17
00:01:08,210 --> 00:01:12,980
.get and then we would tell it which webpage to go and fetch.

18
00:01:13,400 --> 00:01:13,820
Well,

19
00:01:13,820 --> 00:01:18,650
this is us tapping into that library and then giving it a command to do

20
00:01:18,650 --> 00:01:22,100
something. Now, when we're working with a framework,

21
00:01:22,130 --> 00:01:25,400
it doesn't really work like that. We don't really say, hey framework,

22
00:01:25,430 --> 00:01:27,530
do this thing for us. Instead,

23
00:01:27,560 --> 00:01:32,560
we make sure that our code is defined in a way that the framework wants it to

24
00:01:32,690 --> 00:01:34,910
be. And then when the time is right,

25
00:01:35,090 --> 00:01:38,390
the framework is actually going to call our methods

26
00:01:38,780 --> 00:01:41,090
instead of us calling the framework.

27
00:01:41,600 --> 00:01:45,950
All we have to do is to plan ahead for certain situations.

28
00:01:46,280 --> 00:01:51,020
If it was this situation, what do we want to happen? If it was that situation,

29
00:01:51,200 --> 00:01:52,640
what code it should be run?

30
00:01:53,060 --> 00:01:57,530
So it might be that all you have to do is just write some functions like hello

31
00:01:57,530 --> 00:02:00,110
world and when the user goes to the website,

32
00:02:00,440 --> 00:02:03,440
then it's going to display this text Hello world.

33
00:02:04,700 --> 00:02:07,700
Let's try this in practice. Now by

34
00:02:07,700 --> 00:02:10,070
now you would of known that as developers,

35
00:02:10,400 --> 00:02:14,420
especially now that we're in the advanced stages of becoming a Python developer,

36
00:02:14,790 --> 00:02:19,790
the most important thing when we approach a new tool or a new technology is to

37
00:02:19,790 --> 00:02:21,140
read the documentation.

38
00:02:21,770 --> 00:02:26,770
So Flask actually has a really good piece of documentation in order to tell us

39
00:02:27,110 --> 00:02:32,090
how to get started quickly using Flask. As you can see,

40
00:02:32,090 --> 00:02:36,200
they've described what a minimal Flask application looks like.

41
00:02:36,530 --> 00:02:40,730
And this is a very simple server set up with flask.

42
00:02:41,300 --> 00:02:46,040
So let's go ahead and copy this code. And I'm going to create a new project

43
00:02:46,100 --> 00:02:50,360
which I've decided to call hello_flask. And then in this project folder,

44
00:02:50,420 --> 00:02:54,710
I'm going to create a new file which I'll call hello.py.

45
00:02:55,640 --> 00:03:00,640
Now it's important that the name of your file does not conflict with the name of

46
00:03:01,180 --> 00:03:04,720
the framework or library in fact. So for example,

47
00:03:04,720 --> 00:03:08,170
if I was to create a file called requests.py

48
00:03:08,620 --> 00:03:10,540
and I had, um,

49
00:03:10,750 --> 00:03:13,750
imported the requests library.

50
00:03:14,350 --> 00:03:17,650
And then I tried to do something like requests.get.

51
00:03:19,210 --> 00:03:20,650
Now when I run this,

52
00:03:20,680 --> 00:03:25,680
because the name of my file conflicts with the name of the module, what will happen is

53
00:03:26,530 --> 00:03:30,610
I will get this error. And it might be a little bit confusing

54
00:03:30,610 --> 00:03:34,660
cause it says, well, request has no attribute get. Well

55
00:03:34,660 --> 00:03:37,330
we know it does because it's in the documentation.

56
00:03:37,750 --> 00:03:42,750
And the reason why we're getting this error is because we've named this file

57
00:03:43,690 --> 00:03:45,730
the same name as the module.

58
00:03:46,120 --> 00:03:48,850
So this is something that happens to a lot of people

59
00:03:49,120 --> 00:03:54,120
so make sure that you don't commit this mistake and you could name it anything

60
00:03:54,460 --> 00:03:59,350
like main or server or hello in our case. Notice that now

61
00:03:59,350 --> 00:04:03,730
if I change the name, it actually automatically changed the import

62
00:04:04,000 --> 00:04:08,380
which is not what we want. We want the import to be requests

63
00:04:08,620 --> 00:04:12,760
and we want to make sure that we install our package  requests.

64
00:04:14,140 --> 00:04:15,640
And once that's done,

65
00:04:15,700 --> 00:04:19,720
you can see our module and our file have completely different names.

66
00:04:20,110 --> 00:04:22,060
So now, if I run this file,

67
00:04:22,120 --> 00:04:25,450
it works perfectly and it ends with exit code zero,

68
00:04:25,510 --> 00:04:27,490
which means everything was successful.

69
00:04:28,240 --> 00:04:31,510
So now I'm going to go ahead and delete this file

70
00:04:33,670 --> 00:04:38,410
and go back to our hello.py. Now inside our hello.py

71
00:04:38,470 --> 00:04:43,470
I'm going to paste in the minimal Flask application from the Flask 

72
00:04:44,020 --> 00:04:47,080
documentation. So paste that right here.

73
00:04:47,740 --> 00:04:49,510
And as you might remember,

74
00:04:49,570 --> 00:04:54,310
there's several ways that we can install new modules. So in this case,

75
00:04:54,310 --> 00:04:59,310
the module is Flask and we can either click on the red light bulb to install

76
00:05:00,160 --> 00:05:05,050
this package. Alternatively, we can go to PyCharm, preferences,

77
00:05:05,380 --> 00:05:10,380
and then go to our project and into the interpreter to add the Flask package like

78
00:05:12,790 --> 00:05:13,380
this.

79
00:05:13,380 --> 00:05:14,213
Right.

80
00:05:16,470 --> 00:05:19,260
Now, if you have the PyCharm professional edition,

81
00:05:19,770 --> 00:05:24,360
there's additional tools to make it easier to install Flask into a project and

82
00:05:24,360 --> 00:05:28,620
to work with Flask projects. But because we're using the free community edition,

83
00:05:28,680 --> 00:05:30,960
I'm just going to go ahead and dismiss that popup.

84
00:05:31,620 --> 00:05:34,290
So I've shown you two ways of installing a package.

85
00:05:34,440 --> 00:05:36,090
Now I want to show you the third way,

86
00:05:36,660 --> 00:05:40,650
which you might come across if you're looking at the installation.

87
00:05:41,850 --> 00:05:44,730
So notice here, in order to install Flask,

88
00:05:44,760 --> 00:05:47,550
they're using pip install Flask.

89
00:05:48,930 --> 00:05:53,930
So pip is something that allows us to install Python packages from pypi.

90
00:05:55,620 --> 00:06:00,590
So any package that you on pypi.org, you can install using pip.

91
00:06:01,280 --> 00:06:05,930
And what we have to do is to type in the name that you see right here.

92
00:06:07,010 --> 00:06:08,930
For example, if we want to install Flask,

93
00:06:08,990 --> 00:06:13,400
then it's pip install and it's the capital F for Flask.

94
00:06:13,790 --> 00:06:15,980
So we can copy that into our clipboard.

95
00:06:16,460 --> 00:06:18,680
And if we go to the terminal tab at the bottom,

96
00:06:18,950 --> 00:06:22,700
we can paste that instruction in here and hit enter.

97
00:06:23,630 --> 00:06:28,520
Now it should have successfully installed Flask . And once I dismiss that,

98
00:06:28,520 --> 00:06:32,660
you can see my errors go away. So all three methods work.

99
00:06:32,720 --> 00:06:36,140
I personally prefer the red light bulb, just because it's much quicker.

100
00:06:36,410 --> 00:06:41,360
It's just two clicks rather than typing a lot of code. Now,

101
00:06:41,360 --> 00:06:42,860
once we've installed Flask,

102
00:06:43,160 --> 00:06:47,870
we can go ahead and add some space to get rid of all the warnings from Py

103
00:06:47,870 --> 00:06:52,460
Charm. Um, we can go ahead and run our project.

104
00:06:54,020 --> 00:06:57,050
Now, as soon as I run the project, you can see

105
00:06:57,050 --> 00:07:00,080
it tells me the process was finished with exit code zero,

106
00:07:00,110 --> 00:07:02,240
which means everything was successful,

107
00:07:02,630 --> 00:07:05,540
but where's my server and where's my website.

108
00:07:06,770 --> 00:07:11,180
So let's go back to the Quickstart to see what we actually have to do in order

109
00:07:11,180 --> 00:07:15,350
to set up our server. So to run our Flask application,

110
00:07:15,380 --> 00:07:20,090
we're going to firstly, need to export a environment variable.

111
00:07:20,450 --> 00:07:23,420
So in previous lessons, we've talked about environment variables,

112
00:07:23,720 --> 00:07:26,810
but basically this is going to tell the Flask framework

113
00:07:27,050 --> 00:07:30,710
what is the name of the file that contains our server.

114
00:07:31,010 --> 00:07:33,830
So in our case, as well as in the Quickstart,

115
00:07:34,010 --> 00:07:36,710
the name of that file is hello.py.

116
00:07:37,220 --> 00:07:41,810
So we basically have to point to that file to get Flask 

117
00:07:41,840 --> 00:07:46,700
to be able to recognize it and to use it as the server. So on Mac

118
00:07:46,760 --> 00:07:50,030
we're going to type export space

119
00:07:50,270 --> 00:07:53,540
and then we're going to put in the name of the environment variable

120
00:07:53,810 --> 00:07:58,670
which is FLASK_APP and its all caps.

121
00:07:58,850 --> 00:08:02,000
And then with no spaces, we've got a equal sign

122
00:08:02,420 --> 00:08:05,990
and then the name of our file, which is hello.py.

123
00:08:06,650 --> 00:08:08,420
So now when I hit enter,

124
00:08:08,540 --> 00:08:12,980
that's going to add that environment variable under the name that Flask is

125
00:08:12,980 --> 00:08:16,730
expecting, which is flask.app. Now,

126
00:08:16,790 --> 00:08:19,640
as it mentions in the Quickstart, if you're on Windows

127
00:08:19,670 --> 00:08:23,480
the keyword is not export, but instead it's set.

128
00:08:24,710 --> 00:08:28,730
So again, inside your terminal down here, you're going to type set.

129
00:08:29,090 --> 00:08:32,510
And then you're going to put in the name of that environment variable

130
00:08:32,720 --> 00:08:37,720
which was FLASK_APP and then with no space equals and it's our hello

131
00:08:39,590 --> 00:08:44,059
.py. And once you hit enter,

132
00:08:44,420 --> 00:08:48,320
it should give you the prompt again indicating that everything went smoothly.

133
00:08:49,130 --> 00:08:50,990
Now, once we've done that,

134
00:08:51,290 --> 00:08:55,380
the next step is to simply use the Flask command called run.

135
00:08:59,180 --> 00:09:03,590
And when I hit enter, you'll see that it's created my server.

136
00:09:03,620 --> 00:09:08,620
So it's serving up the Flask app that I've created in hello.py

137
00:09:09,830 --> 00:09:14,810
and we're get a warning telling us that this is a development server and telling

138
00:09:14,810 --> 00:09:18,110
us that if you want to actually launch it as a product,

139
00:09:18,470 --> 00:09:22,430
don't use this development server. There's a few steps 

140
00:09:22,430 --> 00:09:26,780
you have to carry out if you actually wanted to make this production ready and

141
00:09:26,780 --> 00:09:30,350
ready for the internet and customers. But in our case,

142
00:09:30,500 --> 00:09:33,500
we are developing. So this is perfect.

143
00:09:33,950 --> 00:09:38,950
And it tells us where to go and find our website.

144
00:09:39,650 --> 00:09:42,740
So if you imagine that Google is at https://

145
00:09:42,770 --> 00:09:45,200
www.google.com. Well,

146
00:09:45,200 --> 00:09:50,200
this is the address of our website and it's being served by our computer.

147
00:09:53,000 --> 00:09:56,150
So when you're trying to get hold of a website on the internet,

148
00:09:56,540 --> 00:10:00,320
then you have to point towards the IP address

149
00:10:00,470 --> 00:10:02,150
of that particular webpage.

150
00:10:02,630 --> 00:10:07,490
But because we've created our server locally and it's being served on our own

151
00:10:07,490 --> 00:10:12,050
computer, then this is basically the local address

152
00:10:12,230 --> 00:10:13,063
of that website.

153
00:10:13,820 --> 00:10:18,230
Now a neat thing about PyCharm is if I simply just click on this link,

154
00:10:18,440 --> 00:10:23,440
then it's going to launch my website in my browser and you can see right up

155
00:10:24,350 --> 00:10:27,320
here, we've got hello world showing up

156
00:10:27,680 --> 00:10:32,060
which is the same as what we've got here in this method.

157
00:10:33,410 --> 00:10:38,410
So that proves that we've successfully managed to create our very first web

158
00:10:39,140 --> 00:10:40,970
server using Flask.

159
00:10:41,210 --> 00:10:45,680
And it's able to serve up our very first Flask website. Now,

160
00:10:45,710 --> 00:10:50,120
if you go ahead and open up the Chrome developer tools and you go to elements,

161
00:10:50,540 --> 00:10:54,920
you can see that what we wrote here which is just a string

162
00:10:55,190 --> 00:10:59,330
was actually converted by Flask into full HTML.

163
00:10:59,360 --> 00:11:01,790
It's got the HTML tag, it's got the head tag,

164
00:11:01,790 --> 00:11:04,820
it's got the body tag and we didn't have to do any of this.

165
00:11:04,850 --> 00:11:09,560
We just told Flask what we wanted to be returned onto the page

166
00:11:09,860 --> 00:11:12,650
when the user goes to the homepage,

167
00:11:12,860 --> 00:11:16,190
which has just the web address plus a forward slash.

168
00:11:16,700 --> 00:11:20,570
Now the very last thing to remember is once we're done with our server,

169
00:11:20,600 --> 00:11:22,760
because it's still ongoing

170
00:11:22,760 --> 00:11:27,350
it's still waiting for a client to hit up this website,

171
00:11:27,800 --> 00:11:32,800
we have to get it to stop waiting. So we can quit by holding down control and

172
00:11:33,470 --> 00:11:38,390
then pressing C. And you can see this takes us back to our prompt

173
00:11:38,450 --> 00:11:42,620
where we've got our name and our project. Now,

174
00:11:42,650 --> 00:11:47,650
if you don't stop it and you try to run two Flask applications to the same

175
00:11:47,780 --> 00:11:50,630
address then the second one is simply not going to run.

176
00:11:51,320 --> 00:11:55,960
So just be aware that once you're done with your server, hit control+c to quit.

177
00:11:57,130 --> 00:11:58,570
Now in the next lesson,

178
00:11:58,630 --> 00:12:02,620
I want to talk a little bit more about the commands that you can use in the

179
00:12:02,620 --> 00:12:06,580
terminal because this is called the command line.

180
00:12:06,880 --> 00:12:11,880
And just as here we use the command line to run our Flask application, to export

181
00:12:13,510 --> 00:12:18,340
our environment variables, we can also do other things like create folders,

182
00:12:18,340 --> 00:12:22,060
create files, move files around. It's actually a very,

183
00:12:22,090 --> 00:12:25,330
very powerful way of interacting with our computer.

184
00:12:26,080 --> 00:12:30,370
That's what we're going to do in the next lesson. So for all of that and more,

185
00:12:30,640 --> 00:12:31,120
I'll see you there.