Now as we're complying with restful best practices, we're going to be building our API using the Http
verbs and we're going to start using the get method.
So how can you get hold of jokes using our API?
We're going to be building this step by step with a hands on approach.
The first thing I want you to do is to go into the course resources for this current lesson and download
the Postman collection dot Json file.
Once you've done that, I want you to go ahead and open up Postman, which you should already have installed
as we went into this in detail in our API section.
Then I want you to go into workspaces, my workspace.
And here if you go into the collections section, I want you to go ahead and click on Import.
You're going to drag and drop that file that you just downloaded right into here.
And once you've done that, it'll open up and give you access to this joke API postman collection that
I've created for you.
You can see in here we've got all of our familiar verbs, the get random joke.
Get specific joke.
Get a filter joke by joke type.
We can post a new joke.
Put a joke, patch a joke, delete a joke, and finally delete all jokes.
So these are all of the endpoints that we're going to be building in this module.
And we're going to start off with the simplest one, which is to be able to get hold of a random joke
in order to see what our API should look like.
You can take a look at the docs which gets automatically generated when you create a new postman collection
such as the joke API collection that you just opened up.
You can either scan this QR code using your phone or type in this long URL into your browser, but either
way it will take you to the joke API documentation and this gets completely automatically created.
All I had to do is to add in some text here and there and give it some requests.
Run the request and save those requests in Postman.
For example, if you were to create a new collection and you create a new Http request, a get request,
you enter some sort of URL and then you go ahead and hit send.
You'll be able to save this request to a collection and you'll be able to generate the documentation
automatically in the same way that I have done.
So let's go ahead and delete this and go back to our joke API here.
You can also go to the documentation by clicking these three dots, viewing the documentation, and
in my case, I've actually published it on to the web, which is why you can visit this URL and see
what all of the requests should be and navigate to the one you want.
The first job of ours is to be able to hit up forward, slash random as an endpoint here, and the request
looks like something like this in the terminal, which is using curl or curl.
And in our case, if it was using Axios, then it also gives you some example code as well, which is
kind of neat, but let's leave it on the simplest form, which is what you'll see most APIs documented
in, which is curl.
And if you take a look at the example response, you'll see what kind of data we would expect back.
So it's a Json format with an ID, with a joke text and a joke type.
So this is our entire joke object that comes back as a Json.
The first challenge is to get hold of a random joke, so hit up this URL endpoint localhost 3000 forward,
slash random and get back a random joke from the collection.
When you hit send, take a look in the course resources for this lesson and download the starting files
in the 6.0 API zip file.
Extract the zip file on your system and open it inside vs code.
Once you're here, you'll see that you've got the Index.js file, which is where you're going to be
writing all of your code.
And you can see we've got all eight of the challenges listed out for you and we're starting out with
this one.
Number one, you can also run the solution dot JS file and you can do that by simply seeding to this
repository, making sure that you've installed all of the node modules required by running NPM.
I.
So this is going to look inside the package.json and grab all of those dependencies that we've listed,
EJS and Express, and once you've done that you can use Nodemon to run solution dot JS and once it's
up and running at Port 3000, you should be able to go through each of these requests in the joke API
and you should be able to send a request and you will see that it works now.
I've set up everything, including the path variables for the specific jokes, the query parameters
for the filter jokes, but we're going to go through them one by one, so don't worry too much about
that right now.
The first one we want to make functioning is to be able to get hold of a random joke.
And you can see each time the joke changes and it's looping through the list of jokes that I've included
in the starting file for you.
So if you scroll down to the bottom, you can see there is this variable called jokes.
There's all 100 of them in here I've created for you, and all you have to do is to use what you know
about JavaScript Node Express in order to create your API route here that will return with a response
that is a random joke.
You can either do this as a challenge, which is a little bit difficult because we haven't really gone
through it yet.
Or you can continue and watch the slide deck with me to see how this is done.
This end point will look something like this.
We know it is a get request, so we're going to need to use the App.get, which comes from Express.
This is where this method comes from.
And then the first parameter we add into this method is the route.
So it's the end point basically where we want people to be able to access this and you'll see this in
the documentation also in the Postman collection.
But the route that we want to create is forward slash random, and then the next part comes the callback.
So what should happen when this request comes through?
In our case, what we want to do is we want to tap into the request and the response object.
We want to get hold of a random number by using math.random and multiply that number which will be naught
point something.
So 0.1, two, three, four, five, and then we multiply it by the length of the joke array, which
is 100, and that will give us a random number between 0 and 100.
And then finally we use Math.floor in order to round it down.
And we can now use this random number to grab hold of a random joke from the jokes array and then we
can send it back out as a response by using Res.json Rez is the response and Json is simply a way of
converting our data here, which is in the format of a JavaScript object into a Json object and then
returning that back out as the output.
So this is all that it takes in order to complete this part of our API.
So I want you to take a look at this code.
Think about if you understand what each part of it does.
If not, take a quick Google, use something like W3 schools or Google StackOverflow.
Investigate each part of the code that you don't understand, fully understand it and then go ahead
without looking.
See if you can figure out how to implement it on your own in VS code right here under challenge number
one, get a random joke, pause the video and complete that part of the challenge.
All right.
So now challenge two is still another get request.
And in this get request, what we want to do is to hit up the forward slash jokes, forward slash colon
ID.
You might remember this, but this colon, something, something is a way for us to be able to tap into
a URL or a path parameter so we can specify that in Postman by going to the params tab and then scrolling
down to the path variables and then adding a key and a value.
This is equivalent to hitting up http localhost 3000 for slash jokes forward slash two.
That's basically how Postman is going to reformat this request.
And once that gets received in our API server, then we should look for a joke that has the matching
ID and then send back the joke object that corresponds to that ID.
That is your challenge number two.
Now again, you have two choices depending on what you want to do, you can either use what you've learned
in the last challenge to try this out on your own, or you can follow along with me and continue watching
while we go through how to do this.
Similarly to previous.
We need our app.get in order to address when we get a get request to our server and that get request
matches this endpoint forward slash jokes, forward slash a particular ID.
What we should do when we get hold of that ID when it comes in through the request dot params, dot
id, this is how we access any of the URL or path parameters in express.
So remember there is request dot query and there's request dot params params is in the endpoint url.
So forward slash something or other and query comes after the question mark.
So it could be query id equals to.
But in this case we chose a path parameter so we're not using the query.
What this comes in as is going to be a string.
However, in our jokes object, the ID parameter is in the format of an integer.
That means when we're doing this checking mechanism, if this is not an integer, then this check is
going to come back as false.
There are two options here and depending on which one you prefer, you can pick and choose.
The first option is to use the JavaScript triple equals.
And this operator says the left hand side must strictly equal.
The right hand side, including their types must match.
If the right hand side is a number data type and the left hand side is a string data type, even though
they are both to this check, this triple equals does not pass.
Alternatively, you can use the JavaScript double equals operator and this is a loose comparison.
In this case the type doesn't matter and JavaScript will perform a type conversion if necessary.
You can choose either of these two for clarity's sake and in my mind, just for me to actually know
exactly what I'm working with, I like using the triple equals because it means I'm not assuming anything.
I know exactly what's going on.
But for that to work, we're going to have to convert this string into a number or in this case into
an integer.
And we do that using the native built in method pass int that will convert the string into an integer
and store it inside ID and so we can check ID against joke ID and they are now the same type and hopefully
the same number if we want to get hold of it.
Now the other thing you'll notice here is that in order to find the joke, I'm using the JavaScript
find method.
This takes an array and then you use the dot find method.
And then in the brackets of this method it expects a callback which should return true on a particular
condition.
This callback takes a object joke essentially behind the scenes.
It's going to loop through this array, go through each of the items and you can call each of the items
whatever you want, joke or a or whatever variable name you want to give it, and then it's going to
check against a particular return condition is the ID of that item.
We're currently looping through equal to the ID that we are checking against.
And you've seen this in our JavaScript module, so hopefully this shouldn't be too crazy.
And if you wanted to review some of these methods, such as for each or find or that's a good point.
Actually, there's multiple ways of doing this.
This is just one way that I find pretty efficient and pretty quick to do and also doesn't involve a
lot of lines of code.
But equally, you could use the standard for loop in JavaScript, you could use the for each, you could
use anything that works.
Essentially.
It doesn't matter at the end of the day, as long as you fully understand what's going on.
And once we grab hold of the joke that matches this criteria, that's a joke with the matching ID,
and then we send it back as the response in a Json format.
Now check to make sure that you understood everything in this code and then go ahead and implement it.
The process that we're replicating here is less like a coding exercise.
I'm not really expecting you to be able to come across each of these challenges, say write the API
server code to be able to get hold of a specific joke just by looking at the criteria that.
Listed in Postman Instead.
It's kind of more akin to what happens when you're developing in real life and you look for a solution
to a problem you have.
You come across a solution on StackOverflow.
But now the important part is you've got to figure out, well, what does all of this mean?
Right?
What does it actually mean?
And before you move on, you understand all of the code and then you can replicate the code in your
own solution.
Go ahead and do that under number two to get a specific joke by ID.
So pause the video and then once you've done that, we'll continue on to challenge three.
All right.
So the final get request challenge is to filter the jokes by a particular type.
And in this case, we are specifying the type by using a query parameter in the params tab.
If you go to query parameters, you can add a query with a key and value here and it will automatically
format your query into the URL.
So this is something that Postman does really well.
You can add as many queries as you like and you can test them by hitting send on your solution dot JS
And what it should do is it should pull back an array of jokes that all match a particular joke type.
So if you look inside the joke variable in your code down here, you'll see that they have different
joke types.
Some are science based, some are pun, some are wordplay.
ET cetera.
And what you want to be able to do is to send a request to your joke API and specify a joke, type in
the query parameter, and it pulls back all of the jokes that match that particular joke type that you
requested.
That's the goal.
And again, I'm giving you the option of the extra hard challenge where you figure out how to do this
all by yourself as a big challenge.
Or we run through everything together and then you implement it.
Pause the video.
Now, if you want to do this all by yourself or you can give it a go and then come back and see us work
through it together as well.
The solution in this case is going to hit up the forward slash filter endpoint and the type that the
client is requesting lives in the query parameter.
And we get hold of that by tapping into request dot query and then whatever it is, the parameter they've
typed in.
This is where our documentation comes in handy because if we look at get filter joke by type, you can
see that there should be a parameter called type.
And this we are telling the world because we're building a public API, right?
We're saying this is how you can filter a joke and you have to make sure that the query parameter is
spelled this way in order to get it to work.
That is how we've set up our query parameter.
This is the name of the query and then I'm using the filter method on arrays in JavaScript in order
to pass in a callback in here that looks through all of the jokes inside the jokes array go through
each of them and we try to find a match where the joke joke type is equal to the type that is being
requested right here.
This filter method works pretty similar to the find method, and the end result is an array where every
single one of the objects in the array match this criteria that we've specified, and then we take that
array and give it back in the response as a Json, make sure that you understand everything before you
proceed.
If you haven't seen the filter method in JavaScript for a while, then go to search for it.
Read through the documentation and make sure you understand before you type your code.
There's nothing wrong with copy and pasting code.
There's nothing wrong with getting solutions by googling or stackoverflow.
No good senior developers will ever tell you off for this because this is the process that we've all
gone through to become better developers.
But and there is a but if you just copy and paste code without understanding what the code does, that
is something that you should not do because then it means that you're not actually engaging your brain,
you're not working as a developer.
You are simply copy and pasting code which anyone can do.
We are training ourselves to have the skills to be able to read and understand what the code does and
to be able to implement it.
Those are all three of the get requests and if you haven't already, make sure you use Nodemon to run
your index.js and make sure that those parts in the joke API collection, all of the get requests still
run and respond as you would expect with 200 and also getting back the items that you expected to get
back.
In the next lesson, we're going to look at making a post request in order to add new data to our API.
So for all of that and more, I'll see you there.