1
00:00:00,929 --> 00:00:02,228
- [Instructor] Hi, and welcome back.

2
00:00:02,228 --> 00:00:03,216
In this video, we're going to create

3
00:00:03,216 --> 00:00:06,147
our first flask application.

4
00:00:06,147 --> 00:00:10,314
Flask applications are built
around requests and responses.

5
00:00:11,863 --> 00:00:15,045
Now, we're going to look very in detail

6
00:00:15,045 --> 00:00:16,711
at what requests and responses are

7
00:00:16,711 --> 00:00:19,274
and how the web works in
the next couple of videos.

8
00:00:19,274 --> 00:00:21,993
But I want to give you a quick
introduction (pause) now.

9
00:00:21,993 --> 00:00:23,863
Apologies for that.

10
00:00:23,863 --> 00:00:26,722
A request is what your browser does.

11
00:00:26,722 --> 00:00:28,105
So, for example, safari,

12
00:00:28,105 --> 00:00:30,531
or google chrome, or internet explorer.

13
00:00:30,531 --> 00:00:35,071
Whenever you go to a website,
you're making a request.

14
00:00:35,071 --> 00:00:37,898
And there is a computer
somewhere on the internet

15
00:00:37,898 --> 00:00:40,360
that is receiving that request.

16
00:00:40,360 --> 00:00:42,079
And that computer has something

17
00:00:42,079 --> 00:00:44,662
like a flask application in it.

18
00:00:44,662 --> 00:00:46,809
So that flask application
receives that request

19
00:00:46,809 --> 00:00:50,604
from your browser, and then
decides what to do with it,

20
00:00:50,604 --> 00:00:53,354
and then returns back a response.

21
00:00:54,407 --> 00:00:56,502
For example, one request may be

22
00:00:56,502 --> 00:00:59,997
to ask for a certain page's home page.

23
00:00:59,997 --> 00:01:01,498
Another request may be to ask

24
00:01:01,498 --> 00:01:05,581
for something called
hello.html for an html file.

25
00:01:07,375 --> 00:01:08,825
Another request may be to ask

26
00:01:08,825 --> 00:01:12,139
for user number three, for example.

27
00:01:12,139 --> 00:01:14,751
So requests can be really anything.

28
00:01:14,751 --> 00:01:18,120
But the server, the flask application,

29
00:01:18,120 --> 00:01:21,848
has to be created to be able
to understand those requests.

30
00:01:21,848 --> 00:01:24,231
So that's the key here.

31
00:01:24,231 --> 00:01:26,363
In order to start with
our flask application,

32
00:01:26,363 --> 00:01:27,557
the first thing we have to do

33
00:01:27,557 --> 00:01:30,472
is to tell python that
we want to use flask.

34
00:01:30,472 --> 00:01:31,806
That kind of makes sense.

35
00:01:31,806 --> 00:01:36,320
So the first thing to do is to
say from flask, lowercase f,

36
00:01:36,320 --> 00:01:39,153
import Flask, with an uppercase F.

37
00:01:41,226 --> 00:01:45,492
Also let's use this opportunity
to save this as app.py.

38
00:01:45,492 --> 00:01:47,700
Once again, you can call
this whatever you want,

39
00:01:47,700 --> 00:01:51,407
but normally flask
applications are called app.py.

40
00:01:51,407 --> 00:01:55,574
And we will look at why in
a few video's time, really.

41
00:01:56,595 --> 00:01:59,382
Now that we've imported flask,

42
00:01:59,382 --> 00:02:02,976
we've imported something
called Flask with a capital F

43
00:02:02,976 --> 00:02:06,893
from a package called
flask with a lowercase f.

44
00:02:07,871 --> 00:02:11,124
You may not have noticed,
but classes in python,

45
00:02:11,124 --> 00:02:13,653
such as our student and
our working student classes

46
00:02:13,653 --> 00:02:18,209
from last section, classes
always start with a capital F.

47
00:02:18,209 --> 00:02:20,746
And packages always
start with a lowercase f,

48
00:02:20,746 --> 00:02:23,560
although we've not really
seen this in practise.

49
00:02:23,560 --> 00:02:25,666
We can therefore safely assume that Flask

50
00:02:25,666 --> 00:02:27,832
with a capital F is a class.

51
00:02:27,832 --> 00:02:28,910
And indeed it is.

52
00:02:28,910 --> 00:02:30,070
So the first thing we want to do

53
00:02:30,070 --> 00:02:32,914
is create an app from that Flask class.

54
00:02:32,914 --> 00:02:35,707
So we're going to say app equals flask.

55
00:02:35,707 --> 00:02:37,861
And here comes something a bit newer,

56
00:02:37,861 --> 00:02:40,974
which is underscore underscore
name, underscore underscore.

57
00:02:40,974 --> 00:02:44,270
So that's two underscores
in front and two behind.

58
00:02:44,270 --> 00:02:46,571
And the underscore underscore
name, underscore underscore

59
00:02:46,571 --> 00:02:49,204
is a special python variable.

60
00:02:49,204 --> 00:02:52,363
It essentially gives
each file a unique name.

61
00:02:52,363 --> 00:02:54,800
And that's really all that
we have to worry about.

62
00:02:54,800 --> 00:02:56,381
So when we start the Flask application,

63
00:02:56,381 --> 00:02:58,606
in order for Flask to
know that this application

64
00:02:58,606 --> 00:03:02,180
is running in a specific unique place,

65
00:03:02,180 --> 00:03:04,258
we tell it this underscore underscore name

66
00:03:04,258 --> 00:03:06,012
underscore underscore.

67
00:03:06,012 --> 00:03:08,179
Don't worry much about it.

68
00:03:09,695 --> 00:03:11,310
Then, the first thing we have to say

69
00:03:11,310 --> 00:03:15,477
is to tell our app what requests
it's going to understand.

70
00:03:17,593 --> 00:03:19,391
Remember, earlier I said that sometimes

71
00:03:19,391 --> 00:03:21,810
you may request the
homepage of an application.

72
00:03:21,810 --> 00:03:25,776
Other times you may request
something like a hello.html.

73
00:03:25,776 --> 00:03:28,264
Other times you may
request the third user,

74
00:03:28,264 --> 00:03:29,694
or things like that.

75
00:03:29,694 --> 00:03:32,324
So we have to tell our app exactly

76
00:03:32,324 --> 00:03:34,972
what request it will understand.

77
00:03:34,972 --> 00:03:36,998
And it can understand
many requests, of course,

78
00:03:36,998 --> 00:03:39,908
but we're going to start with just one.

79
00:03:39,908 --> 00:03:42,530
In order to do that, we're
going to use a decorator.

80
00:03:42,530 --> 00:03:44,531
So now we know what those are.

81
00:03:44,531 --> 00:03:49,301
It's going to say @app.route
and here is going to go

82
00:03:49,301 --> 00:03:53,000
the route or the endpoint or the request

83
00:03:53,000 --> 00:03:55,263
that it is going to understand.

84
00:03:55,263 --> 00:03:58,355
In our case, it is going
to be a forward slash

85
00:03:58,355 --> 00:04:00,502
within a string.

86
00:04:00,502 --> 00:04:02,044
And what this means is,

87
00:04:02,044 --> 00:04:06,211
for example, http://www.google.com/.

88
00:04:11,658 --> 00:04:15,272
So when you access a
webpage such as google.com,

89
00:04:15,272 --> 00:04:19,344
really what you're
accessing is google.com/.

90
00:04:19,344 --> 00:04:21,393
And the forward slash there just means

91
00:04:21,393 --> 00:04:24,143
this is the homepage of the site.

92
00:04:25,216 --> 00:04:29,998
You can also do things like
google.com/maps, I think.

93
00:04:29,998 --> 00:04:32,496
And this would be a separate route.

94
00:04:32,496 --> 00:04:35,780
You can do google.com/plus, I think.

95
00:04:35,780 --> 00:04:38,478
I'm not really familiar
with google's end points.

96
00:04:38,478 --> 00:04:41,957
But this would be a separate
end point, slash plus.

97
00:04:41,957 --> 00:04:44,408
Because they are supposed
to do different things

98
00:04:44,408 --> 00:04:45,408
in a server.

99
00:04:47,175 --> 00:04:49,767
So if you leave it just
as a forward slash,

100
00:04:49,767 --> 00:04:52,779
that is the home page of the application.

101
00:04:52,779 --> 00:04:56,280
And as we know, a decorator
always has to act on a method,

102
00:04:56,280 --> 00:04:59,947
so what's going to come after
is going to be a method.

103
00:04:59,947 --> 00:05:03,013
In this case I'm calling the method home.

104
00:05:03,013 --> 00:05:06,082
But the name of the method
in Flask does not matter,

105
00:05:06,082 --> 00:05:07,552
so you can call it whatever you want.

106
00:05:07,552 --> 00:05:10,135
All that matters is this route.

107
00:05:11,043 --> 00:05:12,752
So now we've got our home method,

108
00:05:12,752 --> 00:05:14,693
we can make it do things.

109
00:05:14,693 --> 00:05:16,338
And whatever it does,

110
00:05:16,338 --> 00:05:20,647
it has to return a response
back to our browser

111
00:05:20,647 --> 00:05:23,696
so that our browser
receives something back

112
00:05:23,696 --> 00:05:27,002
and it can show something on the website.

113
00:05:27,002 --> 00:05:31,169
So for example, we're going
to return "Hello, world!".

114
00:05:33,503 --> 00:05:34,439
So what's going to happen now

115
00:05:34,439 --> 00:05:38,756
is that when we access our
end point with our browser,

116
00:05:38,756 --> 00:05:42,923
what we should see is
"Hello, world!" coming back.

117
00:05:43,877 --> 00:05:46,669
And then we also, of
course, have to tell the app

118
00:05:46,669 --> 00:05:47,843
to start running.

119
00:05:47,843 --> 00:05:50,661
So let's do that, app.run.

120
00:05:50,661 --> 00:05:54,432
And here we can tell it a specific port.

121
00:05:54,432 --> 00:05:58,772
A port is just a sort
of area of the computer

122
00:05:58,772 --> 00:06:01,261
where your app is going to
be receiving your requests

123
00:06:01,261 --> 00:06:03,343
and returning your responses through.

124
00:06:03,343 --> 00:06:06,250
Computers have many of these areas,

125
00:06:06,250 --> 00:06:10,113
and in my case I'm going to use port 5000.

126
00:06:10,113 --> 00:06:12,390
If you do receive an error
when you run the app,

127
00:06:12,390 --> 00:06:14,838
saying address already in use,

128
00:06:14,838 --> 00:06:16,966
that's because some other
application in your computer

129
00:06:16,966 --> 00:06:18,501
is already using this port.

130
00:06:18,501 --> 00:06:20,364
So all you have to do is just change it

131
00:06:20,364 --> 00:06:23,947
for something else,
like 4999, for example.

132
00:06:25,134 --> 00:06:27,647
Okay, once that's done,
let's go into the terminal.

133
00:06:27,647 --> 00:06:29,269
I'm going to clear this.

134
00:06:29,269 --> 00:06:33,565
And making sure that you
are in the correct folder,

135
00:06:33,565 --> 00:06:35,339
which in my case, I don't think I am,

136
00:06:35,339 --> 00:06:37,422
so I'm going to go in it,

137
00:06:39,801 --> 00:06:42,697
code, section three, video code.

138
00:06:42,697 --> 00:06:44,749
Making sure you're in the correct folder,

139
00:06:44,749 --> 00:06:46,832
then do python3.5 app.py.

140
00:06:49,382 --> 00:06:52,122
And what you should see
is something like this.

141
00:06:52,122 --> 00:06:55,801
Running on and here is
the interesting part,

142
00:06:55,801 --> 00:06:59,968
http://127.0.0.1:5000/,

143
00:07:03,690 --> 00:07:05,223
and the forward slash is important

144
00:07:05,223 --> 00:07:07,565
because that's the home page of our app.

145
00:07:07,565 --> 00:07:09,098
The 5000, as you can imagine,

146
00:07:09,098 --> 00:07:11,562
is the port that we've selected,

147
00:07:11,562 --> 00:07:14,377
and 127.0.0.1, for those of you who are

148
00:07:14,377 --> 00:07:16,463
experienced programmers,
you'll know what that is,

149
00:07:16,463 --> 00:07:18,002
but for those of you that don't,

150
00:07:18,002 --> 00:07:19,991
that is your computer.

151
00:07:19,991 --> 00:07:22,991
So 127.0.0.1 is a special IP address

152
00:07:24,531 --> 00:07:27,304
that is reserved for your
computer, specifically.

153
00:07:27,304 --> 00:07:30,930
So whenever you access this
address in your browser,

154
00:07:30,930 --> 00:07:34,531
what you're accessing
is your own computer.

155
00:07:34,531 --> 00:07:37,579
Because we're accessing using http,

156
00:07:37,579 --> 00:07:41,300
that means that our browser
is able to access this page.

157
00:07:41,300 --> 00:07:45,467
So just copy that and go
into chrome, for example.

158
00:07:48,185 --> 00:07:50,435
And then let's paste it in.

159
00:07:51,837 --> 00:07:55,201
And what we see is "Hello
world!" coming back

160
00:07:55,201 --> 00:07:58,285
because that's what our end point returns.

161
00:07:58,285 --> 00:07:59,760
Notice how google chrome strips

162
00:07:59,760 --> 00:08:02,671
the trailing slash from the end.

163
00:08:02,671 --> 00:08:04,251
But that's always present there,

164
00:08:04,251 --> 00:08:06,950
and some other browsers
will not remove it.

165
00:08:06,950 --> 00:08:08,562
So just because google chrome removes it,

166
00:08:08,562 --> 00:08:11,793
doesn't mean we're not
accessing the home page.

167
00:08:11,793 --> 00:08:13,284
And that's our hello, world.

168
00:08:13,284 --> 00:08:16,728
And this was your first flask application.

169
00:08:16,728 --> 00:08:18,341
And you've managed to create an end point

170
00:08:18,341 --> 00:08:20,389
that returns some data.

171
00:08:20,389 --> 00:08:23,438
So going back to atom, all that we've done

172
00:08:23,438 --> 00:08:27,484
is imported Flask,
created an object of Flask

173
00:08:27,484 --> 00:08:31,055
using a unique name, and
then created a route,

174
00:08:31,055 --> 00:08:33,017
which was for the home
page of our application,

175
00:08:33,017 --> 00:08:34,988
just the forward slash,

176
00:08:34,988 --> 00:08:37,836
assigned a method to it,
which has to return something,

177
00:08:37,836 --> 00:08:40,854
and whatever it returns
will go to the browser.

178
00:08:40,854 --> 00:08:43,365
And finally we've ran the app.

179
00:08:43,365 --> 00:08:44,890
Of course, these methods don't have

180
00:08:44,890 --> 00:08:46,354
to return strings only.

181
00:08:46,354 --> 00:08:48,203
That would be quite boring.

182
00:08:48,203 --> 00:08:50,675
But normally in rest API's
they do return strings,

183
00:08:50,675 --> 00:08:52,689
and it is a Javascript application

184
00:08:52,689 --> 00:08:56,091
that deals with displaying things nicely.

185
00:08:56,091 --> 00:08:59,394
Flask can also display
things nicely if we want,

186
00:08:59,394 --> 00:09:01,397
but that's not the purpose of this course.

187
00:09:01,397 --> 00:09:03,024
There is many, not many,

188
00:09:03,024 --> 00:09:05,355
but there are a couple other
courses, one of them mine,

189
00:09:05,355 --> 00:09:09,663
that deals with creating web
sites and web apps with Flask.

190
00:09:09,663 --> 00:09:12,140
This course is concerned with rest APIs.

191
00:09:12,140 --> 00:09:17,060
And rest APIs usually return
text in a specific format.

192
00:09:17,060 --> 00:09:19,530
So we're going to be
looking at more of that

193
00:09:19,530 --> 00:09:20,935
in the next coming sections.

194
00:09:20,935 --> 00:09:23,160
But in this section we are
going to give you a bit

195
00:09:23,160 --> 00:09:27,447
of insight into how you
might use a rest API

196
00:09:27,447 --> 00:09:29,535
from within a Javascript application.

197
00:09:29,535 --> 00:09:31,058
For those of you that are interested

198
00:09:31,058 --> 00:09:33,583
in using your API from within Javascript,

199
00:09:33,583 --> 00:09:35,855
that will be very useful.

200
00:09:35,855 --> 00:09:37,676
So the next couple of
videos are going to be

201
00:09:37,676 --> 00:09:39,531
more about how the web works,

202
00:09:39,531 --> 00:09:43,214
how rest works, and things like that.

203
00:09:43,214 --> 00:09:45,392
And then we'll move on to creating

204
00:09:45,392 --> 00:09:49,126
the Javascript programme
that will use this API

205
00:09:49,126 --> 00:09:50,879
just for your convenience.

206
00:09:50,879 --> 00:09:52,958
So hopefully all that's okay,

207
00:09:52,958 --> 00:09:54,819
and I'll see you in the very next video.