1 00:00:00,360 --> 00:00:03,690 Now that you've seen that we can write code in our server, 2 00:00:04,080 --> 00:00:07,950 work out some sort of value or get some piece of data, 3 00:00:08,340 --> 00:00:12,000 and then we can send it over to our template to be rendered, 4 00:00:12,660 --> 00:00:16,650 I've got a challenge for you to test some of the things that you've learned from 5 00:00:16,650 --> 00:00:20,340 previous days as well as what we've been doing with Flask 6 00:00:20,400 --> 00:00:21,570 over the last few days. 7 00:00:22,440 --> 00:00:25,800 I found a pretty interesting API called the agify 8 00:00:26,280 --> 00:00:30,600 and there's also genderize. This is a really simple API. 9 00:00:30,630 --> 00:00:34,620 It doesn't require you to sign up and it doesn't require any authentication. 10 00:00:35,370 --> 00:00:40,370 What you can do with it is you can hit up the URL of the API and then you can 11 00:00:41,610 --> 00:00:44,640 pass over a value for name. 12 00:00:45,090 --> 00:00:47,880 And it's going to predict the age of a name. 13 00:00:48,810 --> 00:00:51,690 You can go ahead and hit try me to see what you get. 14 00:00:52,230 --> 00:00:55,200 You can see its a very simple JSON that you get back. 15 00:00:55,410 --> 00:01:00,410 And this describes the name that you entered, the estimated age of that person 16 00:01:01,560 --> 00:01:02,393 with that name, 17 00:01:02,730 --> 00:01:07,440 and also how many times they've sampled this name when they were calculating 18 00:01:07,470 --> 00:01:08,303 this data. 19 00:01:09,270 --> 00:01:14,040 Now another one is genderize where you can pass in a name and it'll give you the 20 00:01:14,040 --> 00:01:15,480 predicted gender. 21 00:01:16,170 --> 00:01:21,000 So I have to say from testing that I think genderize is a lot more accurate than 22 00:01:21,030 --> 00:01:21,863 agify, 23 00:01:22,080 --> 00:01:26,640 but maybe I'm just a little bit upset because it says that people with my name 24 00:01:26,640 --> 00:01:30,920 on average are 63 years old. But hey, you know, 25 00:01:30,950 --> 00:01:35,420 I'm doing pretty well for a 63-year-old. So, I can't complain. 26 00:01:36,350 --> 00:01:36,620 Now, 27 00:01:36,620 --> 00:01:41,620 what I want you to do is to turn this into a dynamic Flask application. 28 00:01:43,580 --> 00:01:48,580 We're going to set up a new route in our application and it's under the 29 00:01:50,630 --> 00:01:54,410 /guess route. Now after /guess 30 00:01:54,500 --> 00:01:57,080 we're going to put in a name. So for example, 31 00:01:57,080 --> 00:02:01,820 /guess/Angela and what it should give us is 32 00:02:02,030 --> 00:02:05,600 Hey, and then the name that was entered into the URL. 33 00:02:06,170 --> 00:02:08,360 And then it should say, I think you are 34 00:02:08,570 --> 00:02:11,840 and then the predicted gender from genderize.io. 35 00:02:12,530 --> 00:02:16,640 And then it should tell me how old it predicts that name to be. 36 00:02:17,180 --> 00:02:22,180 Now this works for any name so I could change it to James or Katie. 37 00:02:26,660 --> 00:02:29,030 And it doesn't really matter what I enter here. 38 00:02:29,180 --> 00:02:33,320 This piece of data come from these two APIs. 39 00:02:34,010 --> 00:02:37,370 Now you might have to think back a little bit when we learned about 40 00:02:37,370 --> 00:02:41,870 how do you use the requests module to get hold of the data that we want from an 41 00:02:41,870 --> 00:02:46,640 API. And then you're going to incorporate it into a website that you can design 42 00:02:46,850 --> 00:02:47,960 however you want, 43 00:02:48,290 --> 00:02:52,970 but be aware that the first line needs to have the name that was entered into 44 00:02:52,970 --> 00:02:57,970 the URL and the name should ideally be capitalized into title case like this, 45 00:02:59,230 --> 00:03:02,830 and then it should have the predicted gender and the predicted age. 46 00:03:03,370 --> 00:03:07,930 So this is your challenge and it might take you a little while to work out all 47 00:03:07,930 --> 00:03:10,360 the components, but I think you can do it. 48 00:03:10,750 --> 00:03:15,750 Pause the video and spend at least 15 or 20 minutes working out this challenge 49 00:03:16,090 --> 00:03:17,470 and see if you can complete it. 50 00:03:17,860 --> 00:03:21,610 Remember that you've always got the help of the documentation. 51 00:03:21,610 --> 00:03:26,200 So there is the Flask documentation, there's the Jinja documentation, well 52 00:03:26,200 --> 00:03:31,060 also there's the documentation from the agify and genderize.io. 53 00:03:31,540 --> 00:03:35,380 And if there's anything else, you can always search through the course for the 54 00:03:35,380 --> 00:03:39,940 part where we dealt with APIs and getting hold of data from APIs, 55 00:03:40,420 --> 00:03:44,710 as well as using Google and Stack Overflow to help you achieve this. 56 00:03:45,520 --> 00:03:47,500 Don't just give up. If you get stuck, 57 00:03:47,710 --> 00:03:51,730 try to work like a real world developer and work out the solution to your 58 00:03:51,730 --> 00:03:55,570 problems. All right. 59 00:03:55,600 --> 00:04:00,100 So the first thing we have to do is set up this /guess/ 60 00:04:00,160 --> 00:04:03,760 name route. Back inside our server 61 00:04:04,000 --> 00:04:06,100 after where we've defined our home route, 62 00:04:06,340 --> 00:04:08,410 let's go ahead and create app.route 63 00:04:08,800 --> 00:04:13,800 and here we're going to target /guess and then /name. 64 00:04:14,440 --> 00:04:19,440 Now because we need to pass the URL to get hold of the name that the user 65 00:04:19,750 --> 00:04:23,710 entered, if we take a look at the Flask documentation, 66 00:04:24,010 --> 00:04:29,010 you might remember that yesterday we covered this idea of variable rules and 67 00:04:29,230 --> 00:04:31,150 passing a URL. 68 00:04:31,930 --> 00:04:36,910 The way we do it is by adding some angle brackets around the part of the URL 69 00:04:37,180 --> 00:04:41,860 which is going to be taken in as a variable. And here's their example. 70 00:04:42,520 --> 00:04:43,480 So in our case, 71 00:04:43,510 --> 00:04:48,510 we're going to put this name part of the URL inside some angle brackets to turn 72 00:04:49,480 --> 00:04:54,250 it into a variable. And then we can create our function 73 00:04:54,790 --> 00:04:58,870 which I'll just call guess. Um, it doesn't really matter what you call it. 74 00:04:59,350 --> 00:05:04,180 And then inside this guess method, I'm going to put in this name. 75 00:05:04,870 --> 00:05:09,870 So essentially when my guess function goes through this decorator method, 76 00:05:10,840 --> 00:05:15,160 it's going to give it a value for this name variable, 77 00:05:15,790 --> 00:05:20,350 and then I'm going to catch onto that name and I'm going to send it over when I 78 00:05:20,350 --> 00:05:21,580 render my template. 79 00:05:23,380 --> 00:05:26,650 So let's go ahead and create a new template to render. 80 00:05:27,010 --> 00:05:31,360 So it's going to be an HTML file which I'll just call guess.html. 81 00:05:33,010 --> 00:05:36,670 And I'll leave the title as guess. Now inside the body 82 00:05:36,700 --> 00:05:39,310 I want to be able to type the name. 83 00:05:39,370 --> 00:05:42,760 So it was Hey, and then the name. 84 00:05:44,500 --> 00:05:47,560 And then it was, I think you are and then the gender, 85 00:05:49,570 --> 00:05:53,650 and then finally it was, and maybe and your age. 86 00:05:54,580 --> 00:05:58,190 So something like this. Now we just need to replace the name, 87 00:05:58,490 --> 00:06:00,110 the gender and the age. 88 00:06:00,500 --> 00:06:05,500 So I'm going to keep those names and I'm just going to wrap them like this. 89 00:06:10,130 --> 00:06:12,830 Now remembering the names of these variables, 90 00:06:12,860 --> 00:06:17,860 I'm going to go back to my server and I'm going to try and render my guess. 91 00:06:18,680 --> 00:06:21,440 html. So it was render_template, 92 00:06:21,560 --> 00:06:25,040 the name of the template is called guess.html, 93 00:06:25,370 --> 00:06:28,700 and then I'm going to add a bunch of keyword arguments. 94 00:06:29,210 --> 00:06:30,800 So the first one was the name, 95 00:06:30,830 --> 00:06:34,340 so this is the name of the keyword argument. 96 00:06:34,700 --> 00:06:38,720 And then the value is also going to be name because it's going to come from 97 00:06:38,720 --> 00:06:41,150 this URL. If you find that confusing, 98 00:06:41,180 --> 00:06:43,790 you can always change this. For example, 99 00:06:43,820 --> 00:06:46,670 you could change this to person_name 100 00:06:48,680 --> 00:06:50,990 and we could use that right here. 101 00:06:51,770 --> 00:06:55,700 Now you might be able to see that this name comes from the URL 102 00:06:55,700 --> 00:07:00,680 which gets passed through the input, and this person_name is the one that we use 103 00:07:00,740 --> 00:07:05,270 when we put it into the template. Let's go ahead and test this out. 104 00:07:05,840 --> 00:07:10,840 Let's comment out these two lines of code by hitting command forward slash or 105 00:07:11,030 --> 00:07:15,140 control forward slash and then hit save and run the code 106 00:07:15,200 --> 00:07:20,180 and let's try going to this URL. So you can see it says 107 00:07:20,180 --> 00:07:23,900 Hey, and then it says whatever it is that we typed after guess. 108 00:07:24,200 --> 00:07:26,390 So if you type a whole bunch of gobbledy goop, 109 00:07:26,600 --> 00:07:29,960 then that's also what we're going to see right here. Now, 110 00:07:29,990 --> 00:07:34,190 one of the things about the name is it will be nice to have it in title case. 111 00:07:34,610 --> 00:07:39,610 So we can change things to title case by using the Python title method 112 00:07:41,090 --> 00:07:43,760 where we simply just say txt.title. 113 00:07:44,840 --> 00:07:48,200 We can do that inside our guess.html 114 00:07:48,230 --> 00:07:52,790 because we know that we can evaluate Python expressions in between the double 115 00:07:52,790 --> 00:07:56,450 curly quotes. We can say person_name.title 116 00:07:56,840 --> 00:07:58,550 and then it's the parentheses. 117 00:07:59,120 --> 00:08:04,120 So now, if we save that, coming back over here and we go back to our Katie and hit 118 00:08:05,660 --> 00:08:08,210 enter, you can see it's now capitalized 119 00:08:08,210 --> 00:08:13,130 that K and the first character is always now going to be capitalized. 120 00:08:14,720 --> 00:08:16,220 We've solved the first part. 121 00:08:16,520 --> 00:08:20,450 Now we need to figure out the gender and the age. And to do that, 122 00:08:20,560 --> 00:08:24,650 we're going to need the help of these two APIs; genderize and agify. 123 00:08:25,250 --> 00:08:28,640 So the API is probably the simplest API you've worked with. 124 00:08:28,970 --> 00:08:31,880 You've worked with a lot more complex APIs in the past. 125 00:08:32,150 --> 00:08:33,679 So there shouldn't be too hard. 126 00:08:34,130 --> 00:08:38,000 Now what we want to do is we want to replace this part that says Peter 127 00:08:38,030 --> 00:08:42,380 with whatever it is that the user typed into the URL right here. 128 00:08:43,070 --> 00:08:47,630 We're going to need to take this entire string and we're going to paste it in 129 00:08:47,960 --> 00:08:50,240 and this is going to be the URL. 130 00:08:52,730 --> 00:08:56,400 Now we're going to replace this part by an f-string. 131 00:08:56,970 --> 00:09:01,470 So we have an F in front of the string, and then inside the curly braces, 132 00:09:01,740 --> 00:09:05,430 we can put in the name which got passed from the URL. 133 00:09:06,150 --> 00:09:07,890 So that's the gender URL. 134 00:09:08,460 --> 00:09:11,550 And in order to get the data from that URL, 135 00:09:11,730 --> 00:09:13,950 we're going to need the requests library. 136 00:09:14,070 --> 00:09:16,800 So let's go ahead and import requests 137 00:09:18,690 --> 00:09:21,660 and install it if it's red and squiggly. 138 00:09:25,730 --> 00:09:26,090 Right. 139 00:09:26,090 --> 00:09:30,500 Now, once it's installed, we can now use requests.get 140 00:09:30,800 --> 00:09:35,330 and we can get hold of the data at this gender_url. 141 00:09:35,930 --> 00:09:39,830 And this is going to be our gender_response. 142 00:09:40,160 --> 00:09:40,993 Right. 143 00:09:43,400 --> 00:09:45,050 Now, from this gender_response, 144 00:09:45,080 --> 00:09:50,080 we can get hold of the gender_data and we want it in JSON format. 145 00:09:50,270 --> 00:09:53,870 So we can say gender_response.json. 146 00:09:54,380 --> 00:09:57,650 I'm not going to explain this too much because we've gone into excruciating 147 00:09:57,650 --> 00:10:00,260 detail before on how to work with JSONs, 148 00:10:00,260 --> 00:10:03,140 how to work with APIs, and how to work with the requests library. 149 00:10:03,440 --> 00:10:04,940 I'm hoping that this stage 150 00:10:04,940 --> 00:10:08,300 it's just a bit of revision and you just have to look up some of the methods, 151 00:10:08,600 --> 00:10:11,240 but you've already seen this before and it should be quite familiar. 152 00:10:12,560 --> 00:10:15,140 So now finally, from the gender_data, 153 00:10:15,170 --> 00:10:20,090 we want to extract the part of that dictionary that is interesting, 154 00:10:20,330 --> 00:10:23,390 which is actually just the one under the key gender. 155 00:10:23,930 --> 00:10:27,980 So let's go ahead and add our square brackets and then put gender in here. 156 00:10:28,310 --> 00:10:31,910 And this is going to be equal to our gender. 157 00:10:32,630 --> 00:10:34,880 And that is what we're going to pass over. 158 00:10:36,320 --> 00:10:38,960 So we're going to say gender = gender. 159 00:10:39,740 --> 00:10:43,850 And that means that once we get into the guess.html, 160 00:10:44,150 --> 00:10:48,770 it'll be able to put the value into this placeholder. Now, 161 00:10:48,770 --> 00:10:50,960 all that's left is to work out the age. 162 00:10:52,010 --> 00:10:54,560 So let's get our agify URL. 163 00:10:57,110 --> 00:10:57,943 Right. 164 00:10:58,010 --> 00:11:01,250 And this is going to be pretty straightforward because it's going to be pretty 165 00:11:01,250 --> 00:11:03,530 much the same as what we did for the gender. 166 00:11:08,420 --> 00:11:09,110 Yeah. 167 00:11:09,110 --> 00:11:12,800 And if you take a look at the JSON you get back from calling this API, 168 00:11:13,190 --> 00:11:18,110 the important piece of data is inside that key age. Now, 169 00:11:18,110 --> 00:11:22,430 all we need to do is pass over a new variable called age 170 00:11:22,760 --> 00:11:25,130 and the value is going to come from right here. 171 00:11:27,980 --> 00:11:28,370 Cool. 172 00:11:28,370 --> 00:11:33,370 So now if we hit save and we go back to our website and we hit enter, 173 00:11:34,700 --> 00:11:38,930 it should say, Hey, Katie, I think you're female. And maybe 32 years old. 174 00:11:39,500 --> 00:11:44,360 Why is Katie younger than me? Anyways. I hope you managed to get that to work. 175 00:11:44,570 --> 00:11:45,230 If not, 176 00:11:45,230 --> 00:11:49,550 take a look at the final code in the course resources and see where you went 177 00:11:49,550 --> 00:11:53,360 wrong and maybe revise the section in the course on APIs.