Unless section we got our search part component into a pretty good state.
Now any time the user submits the form we're going to eventually try to call a Colback passed down from
the app component.
And so in order to actually have a callback that we pass down to the search bar we need to make sure
that we actually have the ability to make a request over to the YouTube API.
But that only makes sense to implement the callback until we put that together.
So in this video we're going to put the search bar on Temperley pause and it kind of pause development
for right now and then we're going to make sure that we understand how the YouTube API is used and wired
up to our project.
Now in practice the YouTube API is going to be almost identical to the n splash stuff that we had worked
with previously.
So let's just dive right in and get a better idea of what's going on.
All right so here we go.
Just as before we have our re-act application or react up is going to make use of that X-ers library.
It's going to make a network request over to the YouTube API essentially saying hey we're looking for
a list of videos here related to some search term YouTube API is then going to respond to us with a
list of videos to show on the screen.
That list of videos is going to be an array of objects where every object represents a different video.
So like I said very similar in nature to the splash stuff that we had done previously.
Now in order to make use the YouTube API we first have to get an API key to get the API key.
We're going to navigate to console developers Google google.com inside of our browser and then we will
very quickly go through a little bit of a sign up or set up process.
So I'm going to take this link right here and open up a new tab in sudden my browser.
Now the first time that you log onto this page the Google developers con. You might see a tiny little
pop up appear that says something like a project is needed to view enabled API and services.
So right now at the very first time that you ever visit this little dashboard right here you need to
create a project which you can do by selecting this little button appear on the top left hand side.
Once we create it once we create a project we can then generate an API key that will allow us to access
the YouTube API.
So I'm going to click on that link and then on the top right hand side I'm going to click on new projects
we then get prompted to enter in a project name I'll give this a name like say videos or Video Video
browser that works and then click on Create.
Now something very important to notice up here on the upper right hand side I get this little spinner
that says creating projects you get returned to the dashboard over here.
But the project hasn't been created just yet.
So the UI is just a little bit misleading here.
It might make you think that the project has been created.
No it hasn't.
We have to wait until that spinner goes away and the project has been created before we can start to
enable any API or anything like that.
All right so once that little spinner goes away I'll see that it says create project video browser has
now been finished just right now.
So now I'll go back up to that little Selecta project draw down on the top left hand side.
And then I'll select my video browser project that I just created.
Ok now I'm ready to go now I'm ready to start to create a API key to use to access the YouTube API.
It's now the next you are going to do is find the big blue button right here that says enable API and
services.
Now the Google suite of API is absolutely gigantic and you can actually see over here on the left hand
side at present there is 214 different products inside the Google world that we can get access to.
We need to enable access specifically to the YouTube API.
So we're going to search right here for YouTube and even in the YouTube world there are four separate
API.
It's you and I are making use of the YouTube data API.
That's the one you see right here.
We are not using analytics.
We are not using reporting.
We are using the data API so I'm going to select that and then click on and enable and that's going
to give us access to that particular API.
Now before we can make use of this API lesing do is actually generate API key and you'll even see a
little notification right here that says to use this API you need credentials so click Create credentials
to get started.
So you can either click Create credentials over there on the right hand side or you can click on the
credentials link over here on the left hand side either one click on the left hand one just for fun.
Now if you go this route you'll then click Create credential at the top the level and eventually end
up at a little form like this right here.
So the first thing we'll make sure is that we are saying yes we want to make use the YouTube data API.
Then for the next question it's asking us where we are going to be calling the API from.
So we're going to click on choose you and I are going to be calling the API from code that is running
inside the browser.
So we're going to select web browser javascript next up what data are we accessing.
We are only making use of public data.
We would only select user data right here if we want to attempt to log in as a on a user's behalf and
say edit their list of videos or recreate videos or otherwise manage videos on behalf of the user.
You and I are just searching for data publicly available data.
So we want public data selected.
We can then click on what credentials do I need.
And it basically just kicks us over here and gives us an API key.
So we're going to copy this key and then we'll flip back over to our editor and we're going to paste
this summer over there so we can make use of it in just a moment.
All right.
So I'm going to go back over to my editor now as before we are going to create a separate folder inside
of our sarcy directory called API is and inside of this API is directory.
I'll make a new file called YouTube.
Yes.
And then inside this YouTube dodgiest file or create a new variable that will call a key and I'll paste
in my Access Key like so.
I notice that I created this as a capitalized variable key as opposed to like lowercase.
The reason I marked it as uppercase is because this specifically says this is a constant value and it
should not be changed unless you really know what you're doing.
All right.
So make sure I save this file and then I want to flip back over to the YouTube dashboard.
Just one more time just to show you some other interesting stuff.
Now a very common question that comes up around all this API access and whatnot is people who are concerned
about some users getting access to this API key and making use of it for their own applications.
So to be clear this key right here is going to be used inside of the browser.
That means that when a user accesses your application you are going to be sending them this API key.
It's going to be inside their browser and the user without a lot of trouble without a lot of effort.
They could potentially very easily get their hands on your API key.
Now a lot of people think that's a awful thing.
And let me be clear.
Yeah.
Certainly in several cases where you are accessing a secure API.
Yeah that's a big bad thing.
We don't want users getting access to our API keys.
But in this case this is an API that is specifically meant to be made publicly available.
It is meant to be allowed to be shipped down to a user's browser and accessed from the user's browser.
If you want to we can add in some additional restrictions in how this key can be used.
So even though it is going to be shipped down to the user's browser the Keeble only be able to be used
in some very certain scenarios.
So if you want to we can click on restrict key right there and then we can scroll down a little bit
and you'll notice there is a application restriction.
If you click on HGT it refers right there we can set inside your different web pages that can make use
of this key.
So right now for you and I we are making use of this key from localhost 3000.
So we could enter in local host 3000 like so now if anyone tried to take our API key and use it from
some different Web site like let's say if someone's at my a malicious Web site dot com and they try
to use our API key Google is going to see that the key is being used from my malicious Web site dotcom
and say hey sorry but only people at localhost three thousand are allowed to use this key.
And so a request with our key from my malicious Web site dot com will be completely blocked and we wouldn't
pay for it or anything like that.
OK.
So just a quick aside in case you're a bit curious about these kind of security around API keys so click
on safe right there.
And that's pretty much it.
All right.
So if I now click on credentials on the left hand side I should see that I've got my one generated API
key Alara selected.
Let's take a quick pause right here.
When we come back the next section will start to write a little bit more code inside this YouTube dodgiest
file to make use of this key and actually send a API request over to you to.