So in this lesson, we are going to be connecting to the YouTube API, making a Thach request and returning
the data back as a JavaScript object.
So it's going to be ready to be used within our Web application.
So we've got a button, we click the button.
It constructs the endpoint, your URL here with all the parameters that were specified and then returns
back an array of all the matching results.
And then what we're going to do as well as we're going to loop through the results.
So we've got a lot of JSON data coming back from YouTube that we can make use of within our Web application.
This lesson we are going to be connecting to the YouTube API, so we do need to have some setup for
this.
I've created the indexed HTML file linking it to pro five.
G.S. created the profile case file files.
We are ready to go.
We want to make JSON connection and get YouTube JSON data and output it to the page in this lesson.
So let's go ahead and open up the browser.
And I do have the editor on the left hand side.
So this is the Visual Studio Code and as well the JavaScript file.
And then on the right hand side, I've got my browser window and this is running within Chrome.
So we've got the index file showing here in the display area.
And I'm going to go over to a website for developers, dot Google, dot com forward slash YouTube,
V3, QuickStart, G.S..
So it gives you a QuickStart overview of what you're going to need in order to connect to the YouTube
API.
So that's what we want to do in this lesson, is make a connection.
And there is some setup here because this one is going to require an API key in order to make the connection.
And then also it's got some examples of how to make that connection within the channel.
So you can do quite a bit with the API and on the guides part within the guides.
And we're selecting JavaScript because that's the coding language that we are going to be using.
You are going to need to have a Google account in order to connect to the Google Cloud Service and create
your APIC so we can go over to set up the project and the credentials.
So first of all, we need to set up a project.
So going into the developers dot Google dot com, so open that link up and that's going to open up the
cloud API console.
And from here you can select and.
See existing API libraries and then the one that we're connecting to is going to be this YouTube one.
And you've got some options here on Kallick to manage the API, so this will allow you to manage the
API and then you can also check your quotas.
There are quotas on connecting to the APIs.
You can get your metrics and as well you can set up credentials for the API.
So for the credentials and for the AP.
You need to create this within a project, so to create a new project.
I've already got a few projects that I have created.
So to create a new project, you just select at the top here within the Google APIs and do new project.
And this will give you the walkthrough and the project name that I'm going to be creating is going to
be the.
YouTube API connection.
So when you do create an API, it this can't be changed later and it's going to give you an indication
of what the API it is going to be just underneath the project name.
You can also set it up within a location.
So once you've created your project.
Click the create the project, and then you can switch to the projects here in the top left hand side
so you can also select the project, just stuff.
You've created it.
So is selecting the project will allow you to enable APIs and services, and we do want to enable the
APIs and services for this.
So selecting the API that we want to enable and just make sure that you do have the project again up
here at the top with the project dropdown and then click that enable.
And that's going to enable the API.
And then you can also manage the settings for the API as well.
So once you've set that up, then there's also some documentation.
So there's tutorials and documentation on how to connect to it.
So we're just making a basic connection where we're going to do a search within their API.
And it gives you the overall basic traffic errors, any of the issues that you might have had, let's
create some credentials for those who are going to need to have an API key to connect.
So up at the top, once again, under the credentials tab and the APIs and services select create the
API key.
And this is going to generate the key, so copy the API key and open up your editor and within here.
We can just call it APIC and I'll paste in the APIC as we're going to need it within the project.
So once we've set up our API key and we're going to need to use the ability to make the request to the
API for the YouTube channel.
If you do need authorization to your YouTube channel, then you are also going to need to create an
oath client ID so that can be done in the same place here where you can do an oath to client.
So once you've got your epik, you can use the API Explorer widget in the side menu to retrieve information
about the Google Developers API.
So that's going back to the API and select the YouTube API once again, and then here's where you can
try the API in the Windows Explorer.
So every request that you make with a specific API key.
And it gives you once again, information to connect to the developers console to get the API key.
It's got the Web URL to make the connection to you, and you can do I get requests as well as a post
request to that end point.
So go ahead and copy the Web URL for the YouTube and point.
And I'm going to update The View here.
So toggle the Wardrop.
And so that you are all that we're connecting to is going to be the Google APIs dot com forward, slash
YouTube forgiver three and four, the V three.
There's a few different paths that you can select so you can go delete, download, insert list, update,
insert.
And we want to we're not looking through the channel sections.
We want to do a search.
So these are all pertaining to particular channel.
You can update comments and so on now, typically with JavaScript, because this is front end code,
you're not going to be manipulating your.
YouTube channel.
Because this epic and the cold is going to be sitting on the client side.
So basically, that's going to mean that it's easy to retrieve within the source code of the application,
so you've got to be mindful of that, that once you're sharing this information, it is going to be
available within the source code.
So in order to do a search.
Select the search for the reference and the overview on the left hand side.
And this is going to give you an example of what you're going to expect for the JSON structure, for
the search returned results, and there's quite a bit of information that comes back within these results.
So you can search for different types of properties.
And you can also learn more about the search.
Where you can try the.
AP on the right hand side here, so you can search by keyword related events and this is going to be
the TTP request parameter.
So this is using the get method.
So it's the same web you URL, but we're specifying for routing it to search.
So that's where we need to specify that this is a search that we're going to be searching for.
So I can save that and just update the web, you are all that we're going to be making the connection
to, and here is where all of the different parameters that you can enter into.
So there's quite a bit that you can customize the search fields and in this case, want to just search
for the word test.
So it's going to be searching within the query.
You can specify different parameters here, or you could check to see the different parts that we want
to return.
We want to return back a snippet and there's also the maximum results.
So this is an integer value.
So let's say you only wanted 10 results back.
You can add that.
So if we don't use the oath.
We can show the code in order to make that request, so within JavaScript, it gives you an example
of the code and it provides you examples on all of the different code that you can make the request.
So we're going to be making the HTP request so it provides the path for the HTTP request within the
HTP example here.
So that's the request that we've made.
So go ahead and open that.
And if you don't enter in a correct API key, you're going to get this message.
So it is expecting the API key within their request parameter and this is going to be within the get
request.
So once you put your API key, you're going to see that you're getting that JSON data being returned
back.
So that's how you can construct your query string.
And then, of course, you can customize any of these parameters and you don't need the OS for the search,
but for some of the parameters, you might need a lot.
So, again, it's up to you to whether you need it or not.
And you can try out the testing of the API and see what data you get returned back.
And once you're able to access the video data, that means that we can go a few steps further and we
can pull this into our JavaScript application and make use of it.
And then you can provide various customizations.
So if you want to have the view count the relevance, which is the default search pattern, you can
add that in as well if you want to search for under a particular location and radius.
And right now, it's returning back to part as a string.
And you do have a few options here where you can return it back as a snippet.
And let's execute this one so we don't need to off.
So this snippet will return back more detailed results within the API.
So let's do a comparison if we add in the snippet into the Web URL.
So capturing that, let's capture that full path.
And then again, it does require our API key.
So let's copy and paste that in and then we'll try it with the JavaScript code.
And usually I do try to put it within the browser, if it's just a regular get request in order to see
what type of content that I'm expecting to be able to return that the content back, once you're happy
with the results that you're returning back, you can see it within the Web, URL, the JSON data.
You can copy that Web URL and placed it into your project.
So just over here where we've got the Web URL and then we're going to use the JavaScript code in order
to reconstruct this and make a fetch request to the YouTube API.
So let's go back into the project and making the button clickable.
So we need to update and add some of the JavaScript actions.
So selecting the button, using that document and query selector in order to select so select the element
with a class of BTE.
And so it's going to be our button and then also an output area, selecting the elements with a class
of output.
And we'll take both of those objects and make the button clickable.
So for the button, add an event, listener and event that we're adding is going to be a click event.
And so whenever the button gets clicked, what do we want to happen?
And that's going to go in this block of code.
So we actually want to make her fach request.
So using the fetch method and we need to construct that.
So we've got a base you URL here and we need to update and create an actual URL that we can connect
to in order to make the connection.
And we're going to do that dynamically with JavaScript code.
So this will ultimately connect to whatever the you are else.
And let's take the base, your URL and concatenate some of the other parameters here so we can also
search.
So we've got the search and then the questionmark.
So snippet, we've got a particular channel that we're searching here.
So let's select all of those parameters.
And then we're also going to need to add in the idee.
And these are all going to be just separated with that ampersand sign.
So for our parameters so we can take the basic URL, they're going to add the parameters to it.
And before we do that, all logout whatever our newly constructed URL is within the console so we can
make sure that we've constructed it properly.
So this is my channel.
I'm just connecting to that channel ID.
So I'm going to be searching the videos within my channel and we can also update the max results.
So for right now, I think we can keep the max results there.
Static at 10, the order relevance.
We can keep static as well.
We want to update what we're querying for.
So I just have that as a value of Q And right now to just search for test for the word test in there
and we can add that into our parameters or we can have a specific search query.
So let's add in the search term to the parameters, and it really depends on what you want to be static
and what you want to be able to change, how you would construct the euro that you're going to be making
the request to.
So in this case, I want to have the search term to be dynamic.
So that's going to be coming from whatever the query is.
So just Cartney together with the plus.
And then lastly, we're going to need to have our API and connection.
I'll just call it connection key for Conky.
So that's going to require that and sign.
So wherever we're updating and adding to the string and the equals sign and then plus whatever the API
key is, and this is the one that we copied from the Google cloud console.
So add all of this together.
So get the Conky there.
And of course, you can customize this as needed.
So depending on what you want to return back as the results.
So once we've selected it, we're going to build the Eurail and within the console, let's click the
euro.
And it looks like we were able to successfully make the connection and return back some data.
So that looks pretty good.
So that means that we can now try the euro with Thach.
And once we make the request, whatever we got, the return results are and will return that as JSON
and then get that information as our data.
So it's going to be our YouTube data that's being returned back and then whatever we want to do with
that data.
So for right now, we're just going to log it out into the console and put the data there.
So we're ready to try the application and load the YouTube data.
So there's our YouTube data.
And if we want to get all of the returned results, that's going to be within the items array.
And then we could loop through the items array and output the results.
So let's do that before we conclude.
So within the items, are we using for each?
We're going to loop through that array object and return back each one of the items.
So this can be whatever the entry is and I'll just refer to them as item and we'll consult, logout
each one of those objects.
So that will allow us to better prepare for the content that we can going to need to output to the page.
So each one of the entries is broken down.
So it's got its tag, ID kind snippet and then within snippet.
That's an object contains quite a bit of information there.
There's also the ID, so the video ID, the kind and so on.
And all of that is as well documented on the Google website.
So if you want to find out more about what all of these objects and all of the object details are,
you can always find that out within the API data.
So we're making the request here and let's minimize that.
And it's got all of this information here as to what it's being returned back, the different parameters
and what type of value it's expecting.
So most of them are expecting string values.
This one is expecting a date and time object and again, string values, this one's an integer for the
max results.
So if you're doing unassigned, it's going to give you a default of five results that get returned back.
And then some of them be mindful that they are booleans as well.
So there's all kinds of different data types that it's expecting.
And here's an example as well of the response.
So this is a typical response.
So we've got the kind, the e-TAG, the next page token, the previous page token, so you can move
through to the different pages.
And as well, we've got the items here and that's the array that we're going to be looking at in the
next lesson.
So once we return back the list of results that match our search criteria, we're ready to output it
onto the page.
In this lesson we've covered quite a bit.
And one is that you're going to need to have a Google account in order to get your API key.
And then once you do have your Google account, log into it and go to the Google cloud and the projects
create a brand new project that you can use for testing and then get your API key, enable the YouTube
API, generate key and enable the API, use the API tester in order to construct your request, your
URL.
So you have a model to use and make the connection, try it out within the Web browser and just make
sure that you are getting all of the data back, there's going to be quite a bit of JSON data once you
make a successful connection.
So copy that key, copy the Web, URL, the request, your URL into the Web application so that you
have it ready and you're able to just link to different values that you need to use in order to make
the connection, create simple JavaScript.
So allowing for the button to be clickable and then once the button gets clicked, then create the fetch
request to the euro and return the content back into the console using JavaScript to return the response
object that JSON response object back as a JavaScript object and input into the console.
And you could be ready to move on to the next lesson.
We're going to add some more functionality and update this application.