WEBVTT

0
00:00.360 --> 00:03.690
Now that you've seen that we can write code in our server,

1
00:04.080 --> 00:07.950
work out some sort of value or get some piece of data,

2
00:08.340 --> 00:12.000
and then we can send it over to our template to be rendered,

3
00:12.660 --> 00:16.650
I've got a challenge for you to test some of the things that you've learned from

4
00:16.650 --> 00:20.340
previous days as well as what we've been doing with Flask

5
00:20.400 --> 00:21.570
over the last few days.

6
00:22.440 --> 00:25.800
I found a pretty interesting API called the agify

7
00:26.280 --> 00:30.600
and there's also genderize. This is a really simple API.

8
00:30.630 --> 00:34.620
It doesn't require you to sign up and it doesn't require any authentication.

9
00:35.370 --> 00:40.370
What you can do with it is you can hit up the URL of the API and then you can

10
00:41.610 --> 00:44.640
pass over a value for name.

11
00:45.090 --> 00:47.880
And it's going to predict the age of a name.

12
00:48.810 --> 00:51.690
You can go ahead and hit try me to see what you get.

13
00:52.230 --> 00:55.200
You can see its a very simple JSON that you get back.

14
00:55.410 --> 01:00.410
And this describes the name that you entered, the estimated age of that person

15
01:01.560 --> 01:02.393
with that name,

16
01:02.730 --> 01:07.440
and also how many times they've sampled this name when they were calculating

17
01:07.470 --> 01:08.303
this data.

18
01:09.270 --> 01:14.040
Now another one is genderize where you can pass in a name and it'll give you the

19
01:14.040 --> 01:15.480
predicted gender.

20
01:16.170 --> 01:21.000
So I have to say from testing that I think genderize is a lot more accurate than

21
01:21.030 --> 01:21.863
agify,

22
01:22.080 --> 01:26.640
but maybe I'm just a little bit upset because it says that people with my name

23
01:26.640 --> 01:30.920
on average are 63 years old. But hey, you know,

24
01:30.950 --> 01:35.420
I'm doing pretty well for a 63-year-old. So, I can't complain.

25
01:36.350 --> 01:36.620
Now,

26
01:36.620 --> 01:41.620
what I want you to do is to turn this into a dynamic Flask application.

27
01:43.580 --> 01:48.580
We're going to set up a new route in our application and it's under the 

28
01:50.630 --> 01:54.410
/guess route. Now after /guess

29
01:54.500 --> 01:57.080
we're going to put in a name. So for example,

30
01:57.080 --> 02:01.820
/guess/Angela and what it should give us is

31
02:02.030 --> 02:05.600
Hey, and then the name that was entered into the URL.

32
02:06.170 --> 02:08.360
And then it should say, I think you are

33
02:08.570 --> 02:11.840
and then the predicted gender from genderize.io.

34
02:12.530 --> 02:16.640
And then it should tell me how old it predicts that name to be.

35
02:17.180 --> 02:22.180
Now this works for any name so I could change it to James or Katie.

36
02:26.660 --> 02:29.030
And it doesn't really matter what I enter here.

37
02:29.180 --> 02:33.320
This piece of data come from these two APIs.

38
02:34.010 --> 02:37.370
Now you might have to think back a little bit when we learned about 

39
02:37.370 --> 02:41.870
how do you use the requests module to get hold of the data that we want from an

40
02:41.870 --> 02:46.640
API. And then you're going to incorporate it into a website that you can design

41
02:46.850 --> 02:47.960
however you want,

42
02:48.290 --> 02:52.970
but be aware that the first line needs to have the name that was entered into

43
02:52.970 --> 02:57.970
the URL and the name should ideally be capitalized into title case like this,

44
02:59.230 --> 03:02.830
and then it should have the predicted gender and the predicted age.

45
03:03.370 --> 03:07.930
So this is your challenge and it might take you a little while to work out all

46
03:07.930 --> 03:10.360
the components, but I think you can do it.

47
03:10.750 --> 03:15.750
Pause the video and spend at least 15 or 20 minutes working out this challenge

48
03:16.090 --> 03:17.470
and see if you can complete it.

49
03:17.860 --> 03:21.610
Remember that you've always got the help of the documentation.

50
03:21.610 --> 03:26.200
So there is the Flask documentation, there's the Jinja documentation, well

51
03:26.200 --> 03:31.060
also there's the documentation from the agify and genderize.io.

52
03:31.540 --> 03:35.380
And if there's anything else, you can always search through the course for the

53
03:35.380 --> 03:39.940
part where we dealt with APIs and getting hold of data from APIs,

54
03:40.420 --> 03:44.710
as well as using Google and Stack Overflow to help you achieve this.

55
03:45.520 --> 03:47.500
Don't just give up. If you get stuck,

56
03:47.710 --> 03:51.730
try to work like a real world developer and work out the solution to your

57
03:51.730 --> 03:55.570
problems. All right.

58
03:55.600 --> 04:00.100
So the first thing we have to do is set up this /guess/

59
04:00.160 --> 04:03.760
name route. Back inside our server

60
04:04.000 --> 04:06.100
after where we've defined our home route,

61
04:06.340 --> 04:08.410
let's go ahead and create app.route

62
04:08.800 --> 04:13.800
and here we're going to target /guess and then /name.

63
04:14.440 --> 04:19.440
Now because we need to pass the URL to get hold of the name that the user

64
04:19.750 --> 04:23.710
entered, if we take a look at the Flask documentation,

65
04:24.010 --> 04:29.010
you might remember that yesterday we covered this idea of variable rules and

66
04:29.230 --> 04:31.150
passing a URL.

67
04:31.930 --> 04:36.910
The way we do it is by adding some angle brackets around the part of the URL

68
04:37.180 --> 04:41.860
which is going to be taken in as a variable. And here's their example.

69
04:42.520 --> 04:43.480
So in our case,

70
04:43.510 --> 04:48.510
we're going to put this name part of the URL inside some angle brackets to turn

71
04:49.480 --> 04:54.250
it into a variable. And then we can create our function

72
04:54.790 --> 04:58.870
which I'll just call guess. Um, it doesn't really matter what you call it.

73
04:59.350 --> 05:04.180
And then inside this guess method, I'm going to put in this name.

74
05:04.870 --> 05:09.870
So essentially when my guess function goes through this decorator method,

75
05:10.840 --> 05:15.160
it's going to give it a value for this name variable,

76
05:15.790 --> 05:20.350
and then I'm going to catch onto that name and I'm going to send it over when I

77
05:20.350 --> 05:21.580
render my template.

78
05:23.380 --> 05:26.650
So let's go ahead and create a new template to render.

79
05:27.010 --> 05:31.360
So it's going to be an HTML file which I'll just call guess.html.

80
05:33.010 --> 05:36.670
And I'll leave the title as guess. Now inside the body

81
05:36.700 --> 05:39.310
I want to be able to type the name.

82
05:39.370 --> 05:42.760
So it was Hey, and then the name.

83
05:44.500 --> 05:47.560
And then it was, I think you are and then the gender,

84
05:49.570 --> 05:53.650
and then finally it was, and maybe and your age.

85
05:54.580 --> 05:58.190
So something like this. Now we just need to replace the name,

86
05:58.490 --> 06:00.110
the gender and the age.

87
06:00.500 --> 06:05.500
So I'm going to keep those names and I'm just going to wrap them like this.

88
06:10.130 --> 06:12.830
Now remembering the names of these variables,

89
06:12.860 --> 06:17.860
I'm going to go back to my server and I'm going to try and render my guess.

90
06:18.680 --> 06:21.440
html. So it was render_template,

91
06:21.560 --> 06:25.040
the name of the template is called guess.html,

92
06:25.370 --> 06:28.700
and then I'm going to add a bunch of keyword arguments.

93
06:29.210 --> 06:30.800
So the first one was the name,

94
06:30.830 --> 06:34.340
so this is the name of the keyword argument.

95
06:34.700 --> 06:38.720
And then the value is also going to be name because it's going to come from

96
06:38.720 --> 06:41.150
this URL. If you find that confusing,

97
06:41.180 --> 06:43.790
you can always change this. For example,

98
06:43.820 --> 06:46.670
you could change this to person_name

99
06:48.680 --> 06:50.990
and we could use that right here.

100
06:51.770 --> 06:55.700
Now you might be able to see that this name comes from the URL

101
06:55.700 --> 07:00.680
which gets passed through the input, and this person_name is the one that we use

102
07:00.740 --> 07:05.270
when we put it into the template. Let's go ahead and test this out.

103
07:05.840 --> 07:10.840
Let's comment out these two lines of code by hitting command forward slash or

104
07:11.030 --> 07:15.140
control forward slash and then hit save and run the code

105
07:15.200 --> 07:20.180
and let's try going to this URL. So you can see it says

106
07:20.180 --> 07:23.900
Hey, and then it says whatever it is that we typed after guess.

107
07:24.200 --> 07:26.390
So if you type a whole bunch of gobbledy goop,

108
07:26.600 --> 07:29.960
then that's also what we're going to see right here. Now,

109
07:29.990 --> 07:34.190
one of the things about the name is it will be nice to have it in title case.

110
07:34.610 --> 07:39.610
So we can change things to title case by using the Python title method

111
07:41.090 --> 07:43.760
where we simply just say txt.title.

112
07:44.840 --> 07:48.200
We can do that inside our guess.html

113
07:48.230 --> 07:52.790
because we know that we can evaluate Python expressions in between the double

114
07:52.790 --> 07:56.450
curly quotes. We can say person_name.title

115
07:56.840 --> 07:58.550
and then it's the parentheses.

116
07:59.120 --> 08:04.120
So now, if we save that, coming back over here and we go back to our Katie and hit

117
08:05.660 --> 08:08.210
enter, you can see it's now capitalized

118
08:08.210 --> 08:13.130
that K and the first character is always now going to be capitalized.

119
08:14.720 --> 08:16.220
We've solved the first part.

120
08:16.520 --> 08:20.450
Now we need to figure out the gender and the age. And to do that,

121
08:20.560 --> 08:24.650
we're going to need the help of these two APIs; genderize and agify.

122
08:25.250 --> 08:28.640
So the API is probably the simplest API you've worked with.

123
08:28.970 --> 08:31.880
You've worked with a lot more complex APIs in the past.

124
08:32.150 --> 08:33.680
So there shouldn't be too hard.

125
08:34.130 --> 08:38.000
Now what we want to do is we want to replace this part that says Peter

126
08:38.030 --> 08:42.380
with whatever it is that the user typed into the URL right here.

127
08:43.070 --> 08:47.630
We're going to need to take this entire string and we're going to paste it in

128
08:47.960 --> 08:50.240
and this is going to be the URL.

129
08:52.730 --> 08:56.400
Now we're going to replace this part by an f-string.

130
08:56.970 --> 09:01.470
So we have an F in front of the string, and then inside the curly braces,

131
09:01.740 --> 09:05.430
we can put in the name which got passed from the URL.

132
09:06.150 --> 09:07.890
So that's the gender URL.

133
09:08.460 --> 09:11.550
And in order to get the data from that URL,

134
09:11.730 --> 09:13.950
we're going to need the requests library.

135
09:14.070 --> 09:16.800
So let's go ahead and import requests

136
09:18.690 --> 09:21.660
and install it if it's red and squiggly.

137
09:25.730 --> 09:26.090
<v 1>Right.</v>

138
09:26.090 --> 09:30.500
<v 0>Now, once it's installed, we can now use requests.get</v>

139
09:30.800 --> 09:35.330
and we can get hold of the data at this gender_url.

140
09:35.930 --> 09:39.830
And this is going to be our gender_response.

141
09:40.160 --> 09:40.993
<v 1>Right.</v>

142
09:43.400 --> 09:45.050
<v 0>Now, from this gender_response,</v>

143
09:45.080 --> 09:50.080
we can get hold of the gender_data and we want it in JSON format.

144
09:50.270 --> 09:53.870
So we can say gender_response.json.

145
09:54.380 --> 09:57.650
I'm not going to explain this too much because we've gone into excruciating

146
09:57.650 --> 10:00.260
detail before on how to work with JSONs,

147
10:00.260 --> 10:03.140
how to work with APIs, and how to work with the requests library.

148
10:03.440 --> 10:04.940
I'm hoping that this stage

149
10:04.940 --> 10:08.300
it's just a bit of revision and you just have to look up some of the methods,

150
10:08.600 --> 10:11.240
but you've already seen this before and it should be quite familiar.

151
10:12.560 --> 10:15.140
So now finally, from the gender_data,

152
10:15.170 --> 10:20.090
we want to extract the part of that dictionary that is interesting,

153
10:20.330 --> 10:23.390
which is actually just the one under the key gender.

154
10:23.930 --> 10:27.980
So let's go ahead and add our square brackets and then put gender in here.

155
10:28.310 --> 10:31.910
And this is going to be equal to our gender.

156
10:32.630 --> 10:34.880
And that is what we're going to pass over.

157
10:36.320 --> 10:38.960
So we're going to say gender = gender.

158
10:39.740 --> 10:43.850
And that means that once we get into the guess.html,

159
10:44.150 --> 10:48.770
it'll be able to put the value into this placeholder. Now,

160
10:48.770 --> 10:50.960
all that's left is to work out the age.

161
10:52.010 --> 10:54.560
So let's get our agify URL.

162
10:57.110 --> 10:57.943
<v 1>Right.</v>

163
10:58.010 --> 11:01.250
<v 0>And this is going to be pretty straightforward because it's going to be pretty</v>

164
11:01.250 --> 11:03.530
much the same as what we did for the gender.

165
11:08.420 --> 11:09.110
<v 1>Yeah.</v>

166
11:09.110 --> 11:12.800
<v 0>And if you take a look at the JSON you get back from calling this API,</v>

167
11:13.190 --> 11:18.110
the important piece of data is inside that key age. Now,

168
11:18.110 --> 11:22.430
all we need to do is pass over a new variable called age

169
11:22.760 --> 11:25.130
and the value is going to come from right here.

170
11:27.980 --> 11:28.370
<v 1>Cool.</v>

171
11:28.370 --> 11:33.370
<v 0>So now if we hit save and we go back to our website and we hit enter,</v>

172
11:34.700 --> 11:38.930
it should say, Hey, Katie, I think you're female. And maybe 32 years old.

173
11:39.500 --> 11:44.360
Why is Katie younger than me? Anyways. I hope you managed to get that to work.

174
11:44.570 --> 11:45.230
If not,

175
11:45.230 --> 11:49.550
take a look at the final code in the course resources and see where you went

176
11:49.550 --> 11:53.360
wrong and maybe revise the section in the course on APIs.