Instructor: So we're now ready
to start working on the Forkify project
and the first step will be to start using
the underlying recipe API and so we will use
a real world API here,
probably used by thousands of services out there,
based on what we learned in the last section of course.
Also, you will learn about the content
of API keys and why we need them.
So the API that we're gonna be using
is called Food Two Fork dot com.
So head over to this website here
and then from here we can use this recipe API.
Okay, and that brings us to
the documentation page of this API.
So this API allows us to do two types of requests.
First off we can search for recipes
and second we can then get data
about one specific recipe.
So in this first the search request
it's going to return a list of 30 recipes
and from there we can then select
one of the IDs and then make a request
for that specific recipe during the second end point.
So we have the search
and to get end points of this API, okay.
Then down here we see the parameters
that we have to include in the API request
but more on that a bit later.
But I also wanted to show you is that
we have different plans here.
So the first one is the free plan
and that's the one that we're gonna be using
so we can do 500 API calls per day
and then you can also pay if you want
and we always have to have an attribution
whenever using the free plan
saying powered by Food Two Fork
and that's why we have it down here actually in our app.
Okay, so now please go ahead
and create your own account here
because that's how you're gonna get the API key
that you need in order to make this API work.
So I already created this account
and so I just need to log in here
and then I can see my API key right here.
So please go ahead and create your own account
because you should use your own API key
instead of using mine.
Now you might be wondering what
an API key actually is and so let me explain it to you.
So an API key it's like a password
that's given to each user.
It's like a unique ID that each user
can use in order to make requests
and so that the API can track
how many requests you make per day.
So remember that here in the free plan
you can only do 500 requests per day
and so they use this API key here
in order to track that, okay.
So I'm gonna copy it and then paste it
here actually in this file here
just so we have it here in the index dot js file
where we're gonna make our requests in a second.
Okay, now let's go back here to the API itself,
the documentation, in order to learn
how we can actually do the search requests.
So this is the URL that we have to use
to make the request to and then down here
we have to pass in the key,
so the API key that we just got,
and then also the search query.
Then we can also pass in the store parameter
and the page parameter.
But we're going to talk about these later
but for now we just need the key
and then of course also a search query.
Okay, so the URL is this one
so let me also copy it over here to our code editor.
Okay and now that we have all this
let's actually try to experiment with this API.
So I'm not really building the app just yet
but just writing a simple function here
to experiment and try out the API, okay.
So let me write an async function.
So get results for get search results
and the parameter is let's pass in a query, okay.
So here we have to space and then down here
we can then call this async function, okay.
Now about the HTTP request that we're going to make
for the ajax call in the last section
we used the fetch function like this, right,
now there are some problems with the fetch function
and I actually mentioned before
which is that it doesn't really work
in all browsers just yet.
So in the modern browser, of course,
it's going to work just fine
but if you get on a very old browser,
then it might not recognize fetch
and that's actually a problem.
And so instead what we're going to do
is use a very popular HTTP request
library called axios, okay,
so in order to use axios we need
to install it and get it from NPM, okay.
So let's use our terminal again here.
Let's clear this here and do NPM install axios.
Okay, and then save and again
it's not saved as because
this is not a development tool
it is really code that we want to use in our app.
Okay, so let's wait for it and there you go.
Let's just confirm in our package dot json file
and it did, here we go.
So we installed the package and now let's import it
and importing packages actually
works almost the exact same way
as importing our own modules
and so again we use the import keyword,
so import axios from and now comes the name of our package.
So in the last lecture I showed you
that we have to specify the path
to the module that we want to include, right.
Now with this NPM modules that we installed
from an external source we don't have to do that.
We actually, all we have to do
is to specify the name of the package.
So all we have to do is to say axios
as it appears here in the dependencies.
So it's axios here and so
we call it axios here in this import, okay,
and then as I hover over it,
you actually see the entire path
which the code editor actually figures out on its own, okay,
and so that's where the package lives
and webpack when bundling our modules together
will then automatically also figure out where it is.
Then here we could give it actually
any name that we wanted, we could do just A,
okay, but it's like a convention,
like a standard to give it
the same name as the package name.
Okay, so let's now use axios to do our ajax call
and it actually works the exact same way as fetch.
Okay, so the package just gives us access
to this axios function which will
then do our HTTP requests, okay,
and this one here actually works on all browsers
unlike the fetch API that I showed you before,
there are also other things
that this one here does better than fetch,
for example, it automatically returns json
and with fetch, remember we had to do it
like in two steps, first we had to wait
for the data to come back and then we had to wait
for it to convert to json.
So we had this two step process
and with axios it happens all in one step
and that's much better and also
axios is a bit better at error handling than fetch
and I'm gonna show you that in a second as well.
So axios and then in here we have to pass the API URL.
Okay, so let's copy this one
to a template string here
so that we can now include the query, okay.
So let's see how that works here in the documentation.
So for the key we have the key parameter,
as you see here, and for the query
we have the Q parameter, okay,
and so how it works is like this.
We have search and then in order
to add these parameters to the URL
we have a question sign and then
the name of the parameters.
So key is okay and let's actually save the key
here to a constant, so const key
and I'm going to cut it from here and paste it up here
and of course it needs to be a string.
So putting the key here and then
for the next one is Q, remember,
so for the query we use Q.
Right, so again this Q here is coming
from the API documentation, so this Q here, right.
Okay, so this here will do the ajax call
and just like fetch it's going to return a promise
and since we're using async await here,
let's then await this result
and save it to a constant.
So constant result and then await
the results of this promise.
Okay, so remember that's how we handle
promises with async await, right.
So the results value of the promise
that we start here will then be saved
into this res variable.
Okay, and now just take a look at what we get
back from this ajax call,
let's simply log it to the console
and that's it for now.
So let's actually try it out
and if we take a look at our terminal,
you'll see that is has probably already
built our bundle and yeah it did,
so this is actually the time of recording this video here
and so right now it just bundled this module here together.
Okay, so let's take a look at our console
and here we have this error again that we had before.
So this again the error where some domains
don't allow requests coming from other domains, okay.
So that means that the authors
of this API they have not really implemented
the cors into their API
and so we need to get around that again
using the cross origin me proxy.
Okay, so it's this one here.
Let me show it to you again.
So all we have to do is to really
prefix our URL with this URL here, okay.
So the cross origin dot me.
So let's do that here and again
I'm going to create a constant for that
so this proxy URL and now I'm just
going to plug it in here so proxy
and so let's see what happens now.
And we're still getting an error here.
You see it's a 403 error,
which means that we're not allowed to access the resource
and so maybe we need to try another proxy here
so let's just search for cors proxy here
and the one that I'm gonna use,
which I've used before also, is this cors Anywhere.
Okay, so let's just copy this one
and it works just in the exact same way
we just need to replace this proxy name
that we had and put this one.
Okay, and so now our request is going through
this server here so let's try that out again
and we also forgot to add our search query.
So let's add pizza here, again,
and try it out again.
And, alright, so we now finally got our response
so let's try to open up this object,
take a look at it, you can see
there's a lot of stuff here,
theses are the headers of the HTTP request
then here we have the request itself
but what really matters is the data really here.
So we have the data here
then we have the con property
and then the recipes array
and this is what we're really looking for, right.
So you see that we already got our 30 recipes here
all in this recipes array, okay.
So let's actually go back and say
that we only want to display these recipes.
So let's create a variable here,
const recipes gets result dot data dot recipes
and so that's logged just the recipes, okay.
And so let's wait for it.
So this time that we're waiting here
is the time that it takes for the ajax call
to come back with the results.
So here we have all of our recipes.
So you see that we have a publisher,
let's open it up here.
So we have the URL on Food Two Fork,
we have an image, we have a publisher,
and this is the ID that we're gonna need
to use the second end point of the API,
which will be to search for recipes
and then we can get even more details
about the recipe like ingredients,
and all that good stuff that we need
to display our recipes then here
in the middle of the app, right.
So this already works, let's now talk a bit
about the error handling.
So let's say that we put an invalid key here.
So let's just add something weird here
to the beginning of the key, let's try it again,
and we'll then probably get back with an error.
So again we see the forbidden status code here, right?
And so let's now handle these errors
and remember we have to do it
using the try catch statement.
So we want the code to try if this piece here works.
So try,
and this one actually as well,
and then catch any error that may occur
and let's alert it in this example, okay.
So here we need to call it error for example
and then log it to the console
or actually alert it into its own window.
So let's try that out now and see what happens.
And here we go, so the request failed
with a status code of 403
and if we had done the same ajax request
with fetch instead of axios,
it'll probably not have catched the error
because again error handling works a bit different
in fetch than it does in axios
and axios is way more intuitive
and better in my opinion, okay,
and so that's why I'm always using axios
instead of the native fetch method, okay,
but anyway of course we want to go back
to what we had before, get rid of this,
we can also get rid of this piece of code,
it's not really necessary,
and so one last time let's try it out if it works
and it did, we get back our recipes
and you also see that they're all about pizza here, right,
so it always says pizza.
Let's try something like tomato pasta,
come back here, now it takes some time
to get the data from the server
and now they will be all about pasta.
So pasta and tomato, so you see that both
are now here in the title, so pasta salad tomatoes
and so, yeah, this API's actually working now
and so right now we are ready to start
building this beautiful app here
using this underlying Food Two Fork
API that we just explored.