And the last section we put together a plan for the different components that we're going to use inside 2
of our application and created one file for each of them. 3
Remember deciding how to break up your application into several components is a little bit arbitrary 4
figuring out the best way to do it is something that really just comes with practice. 5
In this section we're going to talk about exactly what videos we're going to play here. 6
Well as I mentioned before they're going to be actual youtube videos. 7
We're going to use the YouTube API to fetch data and show real YouTube videos to our users using the 8
YouTube API is really a two step process. 9
First we need to sign up for a youtube API Ickey getting access to API is 100 percent free. 10
But you do need a key for it. 11
YouTube is happy to let you search and play their videos but they really want to know who is searching 12
through their videos as such we just need an API key to identify ourselves. 13
Whenever we try to access their API after we sign up for the key install a small package that will make 14
searching the searching process very simple. 15
So lets go ahead and get to it in my browser. 16
I'm going to navigate to Townsell dot developers dot Google dot com 17
if you don't have a Google account you're going to need to sign up for one to get access to the dashboard 18
. 19
Google accounts are free. 20
So just sign up for one really quick and come back to this dashboard. 21
Now as great as Google is you know so many free services it's fantastic. 22
Some of their interfaces are really tough to get around. 23
So bear with me here. 24
Once you're at the dashboard click on the icon on the top left the hamburger menu appear in the lines 25
and then click on API manager. 26
So this'll take us to another menu 27
which is the API manager for our for your account. 28
So as you can see there's many different API that you can find here. 29
We're going to search for a very specific one where you can put in YouTube. 30
Now you'll find YouTube data API v3. 31
Make sure that you're using specifically this API right here. 32
So just go ahead and click it and this page right here just tells you. 33
Well you know once you sign off the API hears all the different things you can do blah blah blah whatever 34
. 35
At the top you'll find a button right here that says enable API. 36
I've already enabled mine so right now right now this is disable but for you it'll probably say enable 37
API go ahead and just click it it'll do some work and then it'll say you know disable API and I'll tell 38
you that you successfully enable the API. 39
So now that we have the API enabled we need to get an actual API key. 40
So on the left hand side you'll find the credentials button. 41
I'm going to go ahead and click it 42
and then I'll click new credentials API key and then out of the four choices here we specifically want 43
to get access to a browser key. 44
So I'm going to click browser key you know Lassman name it. 45
And I'm just going to say you know browser key two is fine. 46
We don't need to put in a referrer right here. 47
So totally optional. 48
So Lasi me to do is just click Create. 49
So now we get this pop up right here that has API key that we need to go ahead and select it and copy 50
it. 51
Now we're going to flip back over to our code editor and save the key right away. 52
So at the very top I'm going to make a new line and we're going to declare a variable to hold this API 53
key. 54
Now remember when we're using E6 we don't use the VAR keyword to declare variables anymore. 55
We can use Konst or we can also use lead and we'll talk about it in a little bit. 56
We use Const whenever we make a variable that doesn't change. 57
So as you might imagine this API key isn't ever going to change so we'll declare it as a concept and 58
since it is a constant a true constant we'll write API underscore key so that anyone look at our code 59
in the future knows that this is a constant. 60
And then we'll put in a string. 61
So you know quote double quote whichever one you prefer and then we'll just paste the key in. 62
Cool. 63
So we now have our API key which is going to allow us to make requests to YouTube. 64
So the next step is to download and install a package that is going to help us make these search requests 65
to do so. 66
We're going to install an NPM package called YouTube API search this place. 67
This package has basically one purpose giving an API key in a search term. 68
It will go to make an API request for us in return some data you know a list of videos that match the 69
search term like other packages that are already installed in this project. 70
You know all the ones we see here in the modules folder we're going to install this using NPM or the 71
node package manager. 72
So over in my terminal I can make sure that I'm inside of my project directory and I'm going to install 73
this as a new package. 74
So all right NPM install dash dash save then YouTube dash API dash search. 75
Let's make sure we get that all in one line. 76
There we go. 77
OK. 78
So this is going to reach out to the NPM registry and install this package for us when we use the dash 79
dash. 80
Save right here. 81
That means please save this to our package. 82
Some file and of the project. 83
The package just on file is a list of all the dependencies that our project has. 84
So I just opened the package. 85
It's on file right here and you'll see that we've already got a number of dependencies in here. 86
You know these are the packages that were installed with this boilerplate application that allows it 87
to you know make use of stuff like web pack in Babel. 88
You can also see react and react on them in here. 89
And you can also see the one that we just installed. 90
YouTube API search. 91
OK. 92
So looks good. 93
We got a package installed. 94
Let's continue in the next section