Now that you've seen that we can write code in our server,
work out some sort of value or get some piece of data,
and then we can send it over to our template to be rendered,
I've got a challenge for you to test some of the things that you've learned from
previous days as well as what we've been doing with Flask
over the last few days.
I found a pretty interesting API called the agify
and there's also genderize. This is a really simple API.
It doesn't require you to sign up and it doesn't require any authentication.
What you can do with it is you can hit up the URL of the API and then you can
pass over a value for name.
And it's going to predict the age of a name.
You can go ahead and hit try me to see what you get.
You can see its a very simple JSON that you get back.
And this describes the name that you entered, the estimated age of that person
with that name,
and also how many times they've sampled this name when they were calculating
this data.
Now another one is genderize where you can pass in a name and it'll give you the
predicted gender.
So I have to say from testing that I think genderize is a lot more accurate than
agify,
but maybe I'm just a little bit upset because it says that people with my name
on average are 63 years old. But hey, you know,
I'm doing pretty well for a 63-year-old. So, I can't complain.
Now,
what I want you to do is to turn this into a dynamic Flask application.
We're going to set up a new route in our application and it's under the
/guess route. Now after /guess
we're going to put in a name. So for example,
/guess/Angela and what it should give us is
Hey, and then the name that was entered into the URL.
And then it should say, I think you are
and then the predicted gender from genderize.io.
And then it should tell me how old it predicts that name to be.
Now this works for any name so I could change it to James or Katie.
And it doesn't really matter what I enter here.
This piece of data come from these two APIs.
Now you might have to think back a little bit when we learned about
how do you use the requests module to get hold of the data that we want from an
API. And then you're going to incorporate it into a website that you can design
however you want,
but be aware that the first line needs to have the name that was entered into
the URL and the name should ideally be capitalized into title case like this,
and then it should have the predicted gender and the predicted age.
So this is your challenge and it might take you a little while to work out all
the components, but I think you can do it.
Pause the video and spend at least 15 or 20 minutes working out this challenge
and see if you can complete it.
Remember that you've always got the help of the documentation.
So there is the Flask documentation, there's the Jinja documentation, well
also there's the documentation from the agify and genderize.io.
And if there's anything else, you can always search through the course for the
part where we dealt with APIs and getting hold of data from APIs,
as well as using Google and Stack Overflow to help you achieve this.
Don't just give up. If you get stuck,
try to work like a real world developer and work out the solution to your
problems. All right.
So the first thing we have to do is set up this /guess/
name route. Back inside our server
after where we've defined our home route,
let's go ahead and create app.route
and here we're going to target /guess and then /name.
Now because we need to pass the URL to get hold of the name that the user
entered, if we take a look at the Flask documentation,
you might remember that yesterday we covered this idea of variable rules and
passing a URL.
The way we do it is by adding some angle brackets around the part of the URL
which is going to be taken in as a variable. And here's their example.
So in our case,
we're going to put this name part of the URL inside some angle brackets to turn
it into a variable. And then we can create our function
which I'll just call guess. Um, it doesn't really matter what you call it.
And then inside this guess method, I'm going to put in this name.
So essentially when my guess function goes through this decorator method,
it's going to give it a value for this name variable,
and then I'm going to catch onto that name and I'm going to send it over when I
render my template.
So let's go ahead and create a new template to render.
So it's going to be an HTML file which I'll just call guess.html.
And I'll leave the title as guess. Now inside the body
I want to be able to type the name.
So it was Hey, and then the name.
And then it was, I think you are and then the gender,
and then finally it was, and maybe and your age.
So something like this. Now we just need to replace the name,
the gender and the age.
So I'm going to keep those names and I'm just going to wrap them like this.
Now remembering the names of these variables,
I'm going to go back to my server and I'm going to try and render my guess.
html. So it was render_template,
the name of the template is called guess.html,
and then I'm going to add a bunch of keyword arguments.
So the first one was the name,
so this is the name of the keyword argument.
And then the value is also going to be name because it's going to come from
this URL. If you find that confusing,
you can always change this. For example,
you could change this to person_name
and we could use that right here.
Now you might be able to see that this name comes from the URL
which gets passed through the input, and this person_name is the one that we use
when we put it into the template. Let's go ahead and test this out.
Let's comment out these two lines of code by hitting command forward slash or
control forward slash and then hit save and run the code
and let's try going to this URL. So you can see it says
Hey, and then it says whatever it is that we typed after guess.
So if you type a whole bunch of gobbledy goop,
then that's also what we're going to see right here. Now,
one of the things about the name is it will be nice to have it in title case.
So we can change things to title case by using the Python title method
where we simply just say txt.title.
We can do that inside our guess.html
because we know that we can evaluate Python expressions in between the double
curly quotes. We can say person_name.title
and then it's the parentheses.
So now, if we save that, coming back over here and we go back to our Katie and hit
enter, you can see it's now capitalized
that K and the first character is always now going to be capitalized.
We've solved the first part.
Now we need to figure out the gender and the age. And to do that,
we're going to need the help of these two APIs; genderize and agify.
So the API is probably the simplest API you've worked with.
You've worked with a lot more complex APIs in the past.
So there shouldn't be too hard.
Now what we want to do is we want to replace this part that says Peter
with whatever it is that the user typed into the URL right here.
We're going to need to take this entire string and we're going to paste it in
and this is going to be the URL.
Now we're going to replace this part by an f-string.
So we have an F in front of the string, and then inside the curly braces,
we can put in the name which got passed from the URL.
So that's the gender URL.
And in order to get the data from that URL,
we're going to need the requests library.
So let's go ahead and import requests
and install it if it's red and squiggly.
1: Right.
0: Now, once it's installed, we can now use requests.get
and we can get hold of the data at this gender_url.
And this is going to be our gender_response.
1: Right.
0: Now, from this gender_response,
we can get hold of the gender_data and we want it in JSON format.
So we can say gender_response.json.
I'm not going to explain this too much because we've gone into excruciating
detail before on how to work with JSONs,
how to work with APIs, and how to work with the requests library.
I'm hoping that this stage
it's just a bit of revision and you just have to look up some of the methods,
but you've already seen this before and it should be quite familiar.
So now finally, from the gender_data,
we want to extract the part of that dictionary that is interesting,
which is actually just the one under the key gender.
So let's go ahead and add our square brackets and then put gender in here.
And this is going to be equal to our gender.
And that is what we're going to pass over.
So we're going to say gender = gender.
And that means that once we get into the guess.html,
it'll be able to put the value into this placeholder. Now,
all that's left is to work out the age.
So let's get our agify URL.
1: Right.
0: And this is going to be pretty straightforward because it's going to be pretty
much the same as what we did for the gender.
1: Yeah.
0: And if you take a look at the JSON you get back from calling this API,
the important piece of data is inside that key age. Now,
all we need to do is pass over a new variable called age
and the value is going to come from right here.
1: Cool.
0: So now if we hit save and we go back to our website and we hit enter,
it should say, Hey, Katie, I think you're female. And maybe 32 years old.
Why is Katie younger than me? Anyways. I hope you managed to get that to work.
If not,
take a look at the final code in the course resources and see where you went
wrong and maybe revise the section in the course on APIs.