In the last section we installed as a dependency to our project we're not going to use X CEOs in some
documentation in the unselfish API to make a request over to Splash and then eventually just cancel
log out a list of images that will then eventually show to our users.
So this section is going to be all about trying to read some of the splash documentation and understanding
how to make a request.
All right.
So I'm going to flip back over to my documentation.
I see all the documentation here on how we search for photos.
So it says that in order to make a search for a list of photos matching a query we're going to make
a get type network request to an end point of search slash photos in order to make a request with ASIO's
back here inside of on search submit we will call ASIO's dot get this get function is going to take
two separate arguments.
The first argument is going to be the address that we want to make a request to.
And then the second argument is going to be an object that will have a bunch of options that will customize
this request.
Let's first make sure that we understand how to get some path in here or some end point that will make
our requests too.
Now as you just saw in the documentation it says that we want to make a request to the endpoint search
slash photos but it's not just search slushed photos that we're making requests to.
We actually have to get the route your L for the Sunsplash API first and then we can enter search slasher
photos.
So to get the route you are Alpher on Splash we're going to go back up to the top left hand side the
left hand nav over here and click on under schema location and so the location the API or the route
you are for the API is API.
Sunsplash dot com.
So I'm going to copy that right there.
I'll pull it back into my editor and put it in as the first part of the path that we are going to make
a request to.
Now this is just the route you are l of the API to actually access the end point that's going to allow
us to search for photos.
We now need to access search slash photos.
So go back over and add in soup add in to the very end of that search slash photos.
And of course make sure you have a forward slash between the dot com and search.
All right so this right here is going to specify where we want to make a get request to get an order
to actually get access to the splash API.
We have to do a little bit more work beyond this.
We have to actually identify ourselves and who is trying to access the Sunsplash API.
So in order to get some documentation or instructions on how to do that I'm going to again scroll up
on the left hand side and find the section marked as authorization inside this public actions right
here.
It tells us how to identify ourselves or identify requests that are being made to an splash.
So they're telling us that we can do two things.
We can either include a header in the request called authorization that contains our personal access
key or we can add on the access key to a query string when we make the request.
Either way is going to work just fine.
Now we're going to go ahead and take the route of adding in a letter of authorization because eventually
we're going to come back to this code this ex-CEO code right here and do a little bit of a factor to
really simplify some stuff.
And when we do that refactor it's going to be a lot easier if we use this Hetter approach.
All right so back over here inside of Acciona Doggett remember I had said that there was the second
argument that allows us to configure a request.
One of the options that we can put inside there is a header's object.
This is going to add on some number of headers that we are making are headers on the requests that we're
making to that Sunsplash API.
So we want to add on a letter of authorization and we want that to have a value of client id and then
our actual access key right after that is some things to triple check your mixture.
We put on authorization right here.
You have a capital A.
The reason it needs to be Kappel is because the splash API is expecting a header with a capital A authorization
the other thing to double check is make sure that in client id you have a capital D not a lowercase
one.
All right so now we have to put in our access key.
We saw that access key just a moment ago when we were when we created our application.
So to get back there you can go to your apps at the top and then open up the project we just created
and then scroll on down to our keys right here.
So I will copy my key and then go back over and paste it in after the client id and make sure you got
a space between the client id and the access key.
All right so now one last thing we have to do.
I'm going to go back over to the search photos API documentation.
So here is search photos.
And you'll notice that when we make a request to this end point we have to include a query parameter
a parameter literally called query and that's going to contain the search term that we want to use.
So in order to add a query string or this query parameter or request with X-posts I'm going to find
that second argument the options object and right above the headers.
Key value pair are put in.
Perhaps Parama specifies the different query string parameters we want to add into this request.
So in our case we want to add in a parameter of query and we want to set its value equal to the term
that was passed into the on search submit function.
So I will put term in there like so.
So the net result of that line right there.
Essentially it's going to add onto the end of this request or else something like queery equals my term.
Or you know in our case if for searching for cars that's going to be the end result.
Now one thing not to forget here Mr. Colma at the end that line make sure you get that Khama as well.
Okay so that's pretty much it.
So this right here is going to make a request over to the splash API make a search for some number of
photos on Splash is going to send back a big blob of juice on to us describing all the different photos
that it found.
So lesing I want to do is save this file and we're going to test it out in the browser really quickly.
Now what we want to mention right now is that we're not doing anything with the data that gets returned.
So in order to actually make sure that the request gets issued I'm going to pull open my Network tab
over here in some of my Chrome browser.
I'm going to clear the request log.
And then I should be able to type in some search terms here like say cars enter and then see two requests
appear.
Now the reason that you see two requests is because technically the requests we are making is what is
referred to as a course or cross Orjan research sharing request that goes into way more detailed than
we need to know.
But essentially all you really need to understand is that the request we care about is the second one
on here the one marked with a method of get.
We don't really care about the options one too much.
It's all look at the get request I can select it and then go to the preview tab right here.
And I should see some results for the data that was fetched.
So open up results and it's going to show me the first 10 images that was felt that were fetched from
the splash API matching the search term of cars.
And so I can expand these and it will show me a ton of different data about the images that were search
just to make sure that this worked successfully.
On this first result right here I'm going to find the you are Elle's property.
Expand that.
And then I will copy the URL of it like this regular one right here.
That's a really long link.
So make sure you get the entire thing so I'm going to copy that.
Open up a new browser tab.
Put in that link that I just copied and sure enough it gives me an image of a car.
Perfect.
All right so we've got our data or at least we've got our request to get the data.
We'll take a brief pause right here when we come back in the next section.
We'll start to think about how we're going to get the data out of the requests that it's made right
here and eventually render a list of images on the screen using it.
So quick pause and I'll see you in just a minute.