Hey there and welcome in this lesson, we're going to do a quick overview of our each Timal setup.
Our starting point.
And then we're going to prepare to add in the Java script and as well set up our YouTube API key, which
we're gonna need in order to connect to the YouTube search API.
So I've got some basic styling.
I've got an index page, I've got a style.
I've got only one class.
So this is box and it's got a with the display.
So these are some basic styling properties.
And of course, you probably want to adjust these as this is simply creating us an element or a class
that we can use in order to add two elements as we're creating them and adding them to our page.
We've got an input for input, content for the search, as well as a button that says search.
And then we can also have another element here.
So this is a div and I'm just going to get a class of output so we can select it and identify it using
JavaScript and then linking to apps J.
S.
So currently right now, Ops G.S. was just clear out this content that's here and apps G.S..
This could be a blank starting point when we're gonna be using all of the JavaScript in order to make
connections.
And I am using a Brackett's.
So Brackett's is a free open source editor.
And the one thing I like about Brackett's is that I can get an HTP protocol connection within the browser.
So that means that I'm not going to file, but I'm going to HGP and I get an IP address, which gives
me more flexibility, especially when I'm trying to connect to API.
Is sometimes you gonna come across errors or different cause errors or issues.
So that is one thing to watch out for when you are trying out and connecting to API is is to make sure
that you're always running on the HTP protocol.
So it's the same thing as Web sites use when they go to see Web pages.
It's using that same protocol.
So there's nothing in front of it.
And this is different than the file protocol, which if you open up the file within the viewer.
So if I was to just open up the index file and open in the viewer, you're going to see that this is
a different protocol that's being used, that we see the word file there.
And this means that it's using the file protocol and it's not using the Web protocol that we use to
get Web pages.
So make sure that you do have an editor or that you're able to run a local machine on your computer
before proceeding to the next lessons.
And one of the easiest ways is just go ahead and download brackets available at brackets I.
So this is, again, that error that I'm using within the upcoming lessons.
So brackets, I, I'll.
It's available at Brackett's I or.
And this is the editor that I'm using in the upcoming lessons.
So the other thing that you're also going to need is you're going to get a YouTube account or a Google
account and log into it.
And this is going to give you access to get an API key.
And the API.
Here's what we're gonna use in order to authorize our application to make the connection to the YouTube
API.
And there's some instructions in here that we're gonna run through in the upcoming lesson.
And again, here, they do tell you that you do need to have or you should have an HD protocol, local
host or the way that we're doing with the IP address.
It's the same thing.
And this is gonna give us the ability to authorize the JavaScript origins.
And it's going to make our application a little bit more flexible as well.
So it's always a good idea.
So once you're set up, I'll walk you through how to get your YouTube API key.
Coming up, being Brackett's, which is the editor that I'm using, and within brackets, there is an
option called Life Preview, which lets you preview out the content in an HTP protocol.
So this is important.
A lot of times when you are making API connections, it might not work directly with the file protocol.
So the difference really is that when you use the file protocol and if you go to the Web page.
So for instance, this is the same HTP each team, El-Hage that we're just looking at.
And if I click that, you can see that it opens up.
But right in the beginning there within the browser you are well, it's going to tell us that this is
using file protocol.
And sometimes within the API is when you are making connections, you're going to get blocked with cause
or you can experience other different errors when you are using this type of protocol.
So within brackets, it does have life preview and that's enabled.
So you can open in a number of different ways.
You can use a shortcut or for instance, you can use a little lightning bolt.
And that's going to open up a page giving said IP address.
And this is a local address.
So same thing as local host.
And then we've got the port and then the file.
So presenting it within this format is going to make it a lot more flexible when it comes to connecting
the API.
Also, I am using Chrome as the browser of choice.
Chrome comes with developer tools a lot at browsers now come with developer tools.
And that gives us access to the JavaScript information within the console that we can get information.
As we make the API connections, we can ensure that we've got the object properly.
We can loop through the check out the object within the console before hard it and adding it into our
Web page.
So that's a definite advantage and it's going to become really useful and helpful when we are developing
these APIs.
The other thing that we are going to set up, and this is coming up in the next lesson, we're gonna
do a quick start with setting up the YouTube data API, and that means that you are going to need to
have a YouTube or a Google account in order to connect and get your authorization key in order to connect.
So we do need to authorize the app before we can pull data from the YouTube API.
So you have to create an API key and then authenticate it and then pull in the information to our application.
We could also set the different authorized JavaScript origins.
And there's that localhost again.
So it is important to set this up and be ready in order to move on to the next lesson.
So once you've got it all set up and you can set up some basic H.T. email as well.
Make sure they have an input area as well as a search button and an output area.
So those are the three pieces that you are going to need moving into the next section so that we can
connect those with JavaScript and put them on the page in the next lesson.
We're going to show you walk you through how to get your YouTube API key.
And then we're going to be ready to start Java scripting.
So that's coming up.