YouTube API Project With Authentication

[Music] hey guys this video is sponsored by coding phase coding phase offers courses to help you learn to build real life projects and advance your career with courses and technologies like Reax nodejs laravel Python you'll be on your way to becoming a professional developer you have the options to buy courses outright or to pay a very low monthly fee and get access to every single course so check out coding phase com or click the link in the description below to receive 50% off hey what's going on guys in this video we're gonna be building a project using the YouTube data API as well as to log in alright so just to give you a quick demo if we click the log in button here and we're using materialise for the UI by the way but we're going to choose a Google account and it's gonna log us in and then we're going to get data for a YouTube channel and you can set the default channel to whatever you want it's mine is set to mine and then we have the subscriber count the views the videos the description you can visit the channel and a new tab and then we have the latest videos ok so we're going to make another request to the API to get the videos and then to change the channel name we can go over to this form and let's say we want Google developers we can just go ahead and click that and then it's going to show us all the information for Google developers alright and if we put in something that doesn't exist we're just going to get a little alert that says no channel by that name and then we can log out so that's what we'll be building now the reason I chose to do this is because the documentation for not just the YouTube API but for any Google API is just so overwhelming there's so much in it and there's a million different code examples that aren't that great so many different options and it's it's just it's very confusing so I figure my job is to go through it all and then create a practical application so you guys can better understand it now we will be referring to the JavaScript QuickStart and quite a bit especially for the authentication part it's this is actually not that bad so we'll be using that kind of as a starting point and then going from there all right so this is again this is just pure JavaScript no frameworks or J query or anything like that and notice that it's on code demos comm so the reason for that is because when I registered the OAuth key it wouldn't let me use a localhost for some reason it wouldn't let me actually log in or do anything so I had to use a real domain that's live on the Internet so what I'm gonna do is just FTP my files up to code demos when we do our testing in the browser all right so that's it hopefully you guys and you guys like this little project and let's get started all right guys so I've cleared out the root of code demos comm and this is where I'll be deploying the application as we test I just have an FTP client open so I'll just upload the files it's just an index.html and a JavaScript file all right now with as with most api's we need to register a key since we're using OAuth as well to log in we need an OAuth client ID so what you're gonna have to do if you're following along and I would suggest you follow along is go to your Google Cloud console so if you just search Google console I'll click here and it's actually the domain is console Cloud Google com and if you've never used this before you probably won't have a project so you can just create a new project I have one called dev one on this account so I'm just going to use that and then once you've done that you just go to API services API and services and click on enable api's and services and then what we're going to do is search for YouTube and we want the YouTube data API version 3 at least at this time so we're going to click on that and then you may already have it enabled if you've used it before but I'm gonna go ahead and click enable and it just takes a few seconds to set that up and enable it and then we need to create our credentials and we're basically going to create two things we're going to create an 8 API key for YouTube for this API and then we're also going to create an OAuth client ID so let's click on create credentials and we're going to keep this selected and then for this option we're using a web browser with JavaScript and I believe we can just click public data here we're not we shouldn't be accessing anything at his private I don't believe and then for here we'll just click this button what credentials do I need and it gives us our API key excuse me and we'll click done now from here we also need to create an OAuth key so let's go down 200 auth client ID and then you're going to choose web application you might get a little message that says you have to set up your your screen your auth screen or whatever just go through that just put in your your app name or whatever I'm here web client one that's fine I'll just leave it and then we need to put in some authorized domains now this is where I had an issue with a localhost it wouldn't let me it lets me enter it here but it wouldn't actually get the data with it so that's why I'm using this code demos and you can trip so you can try it with localhost if you want I just couldn't figure it out okay they'll add it there and here and create ok create and there we go so now we have a client ID alright and the client ID is okay to share it's your client secret you don't ya web client client ID and then this is our API key alright so that stuff's all set up that's the boring stuff so now what I'm gonna do is go to vs code and I have an empty folder called YouTube API app ok that's what I called it and I'm going to create two files here one is index.html and then another is main dot J s alright so let's go to the index.html and let's just add this stuff real quick I don't want to copy and paste it because I like to do start from finish and in case anyone's following along so let's change the title to YouTube I will just say YouTube channel data and then we're going to add our materialized link here so that we can use materialized CSS so we'll go to materialized CSS com get started and we want to grab the CSS link here and paste it in and then let's grab the JavaScript link which is this one here and paste that and down here right above the ending body tag okay so now let's quickly build the UI so we have a simple navigation so right under the body tag we'll put a nav with the class of black which will give it a black background and let's do nav - wrapper and a container class and in here we're going to have an a tag with the class of brand - logo and it's just gonna go nowhere and as far as the text you can put what you want but I'm just going to put YouTube channel API let's do yeah we'll say channel are not channel API channel data and that's the navbar so if I save that like I said when we get to do when we start working with the API we have to use that remote domain code demos comm but for now I'm just going to use live server to view it and it should look like that so under the nav we'll go right under the nav tag here and I'm just going to put a line break to push everything down and then we're going to put a section in html5 section tag and we want to put a container inside here to push everything to the middle we'll have a paragraph that will say log in with Google and then underneath that we're going to have a button I'm gonna give it a couple materialised classes just just do button and red like that and inside here we'll say log in and then very important this needs to have an ID which I'm going to call authorize - button okay and then let's create another button I'll just copy this one down and let's see we're gonna change the ID to sign out - button and it's change this to log out okay so that's our buttons underneath that let's put another line break and then we want an ID of content and inside here is where we want to have we're going to use the grid so we want to use a class of row and we're gonna have two six column divs so we want to do a class of call with the class of s6 and I'm going to put two of those in now this first one will have the form the second one will have the channel data so the the collection the list of like the subscriber is the view count and stuff that'll go here but we're not gonna put anything in here manually it's going to come in through the JavaScript so I'm just going to give this an ID of channel - data so we can grab on to it and then here we're gonna just put in we're just gonna put in our form so let's say form with the idea of channel - form we don't need an action and inside the form let's put a div with the class of input - field and let's put in actual input and let's see this will have an ID of channel - input okay and we'll give it a place holder and we'll just say enter channel name okay and then underneath that we just want a submit button so I'm going to say input with the type of submit and for the value we'll just say get channel data and let's give this a couple classes as well so we'll say class equals BTN and let's do let's do a gray but we're gonna lighten it a little bit so we'll say lighten - - which is just a materialized class I do have a you dummy course on materialized if you're interested but it is a little outdated I have to update it for version one so let's see we want to go under the row which ends right here and we this is where our videos are going to show up so we want to do a class of row because it's going to be a grid then an ID of video - container okay we don't put anything in here it's all going to be added through the JavaScript okay so that should be it for the HTML now if we save this and we take a look it should look like this okay so we have this on the input on this side and then this will be like all the data once we search for it now we initially want to hide the actually no I want this input to be a little shorter a little smaller so I'm just gonna add let's see to this input field right here I'm just gonna add call and then S six like that and that should make it a little shorter okay so we want to initially hide everything really we want to hide the buttons because we only want the login to show when we're logged in I mean when we're not logged in I want the logout to show when we are logged in and we only want this this whole area the content to show when we're actually logged in so what we need to do is hide all this stuff we need to hide both buttons and we want to hide this whole div of content so I'm not going to create a whole stylesheet just to do that so I'm gonna use inline styling which I don't like to do but again I'm not gonna create a style sheet just to do this so we want content we want authorized authorized - button and what was the other one sign out - button and we just want all of those to display none okay so if I go back now it should just show log in with Google okay so now we're ready to start dealing with the API now we have to include a couple things down here we need our script files so let's say script source and then mange a s and then right above it actually below it yeah we want to put it we'll put it below it we need the script to to the API so let's go to the documentation this QuickStart so it's developers.google.com/plus YouTube / v3 slash quickstart / J s and we want to go down to the bottom here and we want to grab this script tag right here okay so basically it's an onload it's going to call this function called handle client load so we're gonna create that along with a bunch of other stuff but let's let's paste that and okay and it's using this async defer and then we should be all set yeah we should be all set with the HTML now so let's see let's go to mange a s and a lot of the stuff that that we're going to be doing in here is the stuff that's in this documentation page we need to get our variables some stuff from Google we need to assign our elements in this case they only have the buttons but we have a lot more to assign the handle client load which gets called automatically down here when we included our script we call handle client load from there I'm just going to just kind of go through this real quick with you from there it's gonna load the auth to library and it's going to call an init client function and that's going to be right here where it's actually going to initialize the client okay this G API object this is what we use and there's methods attached to it we load it here and then we initialize the client here by passing in the variables okay the variables above it returns a promise then we listen for a sign and state changes so when we login when we click the login button or the logout button this fires off and we want to call update sign-in status okay so that update sign-in status is down here and basically if we're signed in if we're logged in we want to hide the login button we're gonna set the display property to none and we want to show the sign out button we also want to get the channel data with this get channel function else if we're if we log out we want the authorize button to show the login button and we want the Sign Out button not show because we're logged out okay and when we actually click those buttons which happens right here authorize button on click it'll call handle auth click when we click sign out it'll call handle sign out click and those are these two functions and these are very simple we're just calling the API or calling the OP the I object calling auth to get auth instance and either sign in or sign out okay based on whatever button we click and then down here we have the get channel so once you log in it calls get channel and you can grab the whatever channel you want goes in here inside these these options and then you specify what you want from the channel we want snippet content details and statistics okay and then that gives us a promise with the response and we can do whatever we want with the response so that's the gist of what's going on here so we're gonna do pretty much that same thing just more in-depth and then we're also going to fetch videos notice that that that documentation has nothing to do with actually getting videos it's just client I'm sorry channel data so let's go ahead and put in options here so we want our client ID okay so we want to set that what I do client client ID Const client ID and let's go to credentials and we want this here not this API key you want to make sure you get the OAuth client ID and let's paste that in right here okay and then for the other variables I'm just gonna grab from where is it from the page I was just on so we have Discovery docks and scopes okay there I'm also the authorize and sign out button there just grabbing it from the Dom so let's grab these and I'm just going to change these VARs to Const and then get rid of these comments here all right so discovery Docs is an array of URLs we only need this one URL which is to the rest YouTube version 3 rest and then scopes we're using this YouTube dot read only and that's because we're not doing anything in our application that is going to it's gonna like change anything on a channel or anything like that it's just putz just data we're just reading public read-only data and then here we're just grabbing the authorize button and sign out button from the Dom now we have a bunch of other stuff to grab from the Dom as well so we have the the main content so let's do const content equals document dot will just use get element by ID you could use query selector if you want and then this is the ID of content all right and i'm just going to copy this down let's see a couple more times and then we want to get the channel form so channel - form and we'll call this channel form and then we also want the channel input so the the actual input value we want to get that let's see that's going to be that as an idea of channel input channel - input and then we want the video container all right so those are that's what we want to grab for now now let's add in some of the stuff that's in the documentation we want to load the auth to library so we need that function called handle client load that's going to be the first function that fires off because that's part of the script tag so handle client load and all we need to do here is take this G API object which is available to us because of that script tag and then we want to just call the load method and we want to pass in here sorry about the sirens we want to pass in that the client we are loading is auth - okay that's the library we're using and then it's going to call a function called init client okay so we have to create that in Nick client which initializes the API client library it also sets up set up sign-in listeners okay so we create a function called Nick client okay just like we specified above and then we call this G API object and then a method called client dot and knit or a property called client and then a method called init and inside here we want to pass in some options which are going to be Discovery docks okay so Discovery docks like that and then we're going to set it to the variable above discovery docks we also want to put in the client ID like that which will be the client ID variable and then we also want to put in the scope so scope is going to be equal to the Scopes variable all right now once we call this client dot and knit it's going to return a promise so we want to do a dot then and then inside this dot then let's put an arrow function and we want to do some stuff here so we want to listen for sign in state changes so listen for sign in state changes so every time we sign in a route it should it should listen for that so we want to use that G API object we want to use auth too and we want to call get off instance okay and then we'll do dot is signed in dot listen and then we want to call a function called update sign in status so sign in status okay so basically this is the callback it's gonna listen and then we're gonna call update sign in status now we also want to handle the initial state initial sign in state will say handle initial sign in state I might misspelled some stuff guys but I don't really care if it's in the comment so I'll say update sign in status and we want to pass in here the G API object and we want to call off to dot get off instance and we want to pass in already want to do dot is sign in and then dot get oops okay so that'll get the initial state and then we need to handle the clicks of the login and logout button so remember we have authorized button and we're going to say dot on click then we want to call a function called handle off click OK and then for the sign out button so sign out button dot on click we're gonna set that to handle sign out click OK we're gonna create those functions so now we need to do is create this update sign-in status we need to create that function so let's go down here and create it and that's gonna take in a property called is sign in let's put a comment here saying what this does this will update UI sign and state changes okay so what we want to do is check to see if we're signed in so we want to say if is sign in and we're also gonna have an else and then we need to control our UI based on if we're signed in or not so we know that if we are signed in we want the login button to not show because we're already logged in we want the sign-in button to show if we're so if we're signed in we want the content area to show we also want the video container stuff to show and then we want to call get channel we want a function that will actually fetch the data because we haven't done that yet all we've done so far is deal with authentication so what we want to do is set our thoughts style dot display equal to none okay because remember we're signed in at this point and then let's copy this down a couple more times and then this one here this will be for the sign out so let's say sign out button style display want to set that to block because we wanted to display we also want content style display to display block and remember these are coming from up here so contents I know button all this stuff we want video container to also display so this will be video container we want that to display as block okay else then we want to hide a bunch of stuff right so I'm just gonna copy these and put this in here and the authorize button should now show we want the login button to show if world not logged in the rest this stuff should be hidden so none for the logout none for the content and none for the video container alright so that just handles the UI based on if we're logged in or not so now we actually need the handle off click and handle sign out click so it's a handle login so function handle auth click and then all we're going to do is take that G API object we're going to use auth two and we're going to call get off instance and we simply need to just call sign in okay that'll sign us in to log out same thing so I'm just gonna grab that and we'll say handle logout except this is gonna be handle sign out click that's it right handle sign out click yeah okay and then we just want to call sign out instead of sign in okay so now one thing I didn't add up here is one if we're signed in we don't just want to show things we want to call get channel that's where we're actually going to integrate interact with the API so we want to call get channel and I'm going to pass in a default channel okay and that default channel I'm actually going to put here so I'm gonna say Const default Channel and I'm gonna set it to tech guy web which is actually the official channel name of my channel so because it used to be tech guy Computer Services but let's go down here back to ya we need to create this now get channel so you know just say get channel from API and let's create the function which takes in a channel and for now let's just console dot log Channel now we're not doing anything to fetch any data yet but we I do want to just test the authentication now if I go to my browser if I go to the the local server and reload I'm not even gonna see the button because if I open up my chrome tools you'll see this message here okay not a valid origin for clients so basically the domain I'm on is not going to work with the client ID that I have so that's why I have to use code demos comm or you have to use something else and like I said I used to be able to put in localhost and it would work but I don't know why it's not now maybe it has something to do with live server or maybe they just stopped allowing it I'm not sure but and if you guys know then then let me know in the comments but what I'm gonna do now is I'm not going to use my local server anymore so I'm gonna just go ahead and stop vyas codes local server and I'm just gonna close this tab up and I'm gonna go to code demos comm and I just want to bring over my files I'm gonna upload them real quick using FTP so let me upload what I have and let's go ahead and reload and now you'll see the button shows and if I open up Chrome tools I don't have that error okay that's because code demos comm is a valid URL for this for the key that I'm using so what I'm gonna do is click login we should get a pop up I'm going to choose count off to allow and now there we go we can see the form here okay and it's logging tech guy web because that's the default channel name and I said to log that so let's try the log oh and it works that goes away okay we'll log back in good so we know that it's so far so good we have the authentication working and you guys could implement this login on your on your site if you have a back-end you could put the credentials in a database or you know whatever but we're just using it just to be able to show the UI here so let's go back to vs code let's see and now we have to deal with actually getting the channel data because right now we haven't done anything like that yet so to do this we're going to use the G API the gappy object let's get rid of this and let's say gap e dot client dot YouTube dot okay now this has a method called list so that's what we want to call is list and then that takes in an object with part and in here is its basically what do we want to get we want to get snippet and if you go to the documentation it'll show you exactly what's included in these different parts but I'm going to show you that as well in the console we also want content details now content details is where you get the playlist ID so that you can fetch videos and then we also want statistics okay and these are just public statistics it's not like your analytics like how much you make and stuff like that how much a channel makes and all that crap and then we want for username and then this is where the channel name goes now we're passing that in here so that's what we're going to put is the channel variable now this will give us a promise back so we want to do dot then and then let's actually you know what we're going to do dot then I'm also going to do a dot catch and this is where if if there's no channel by that name so we'll get an error and then what I'm gonna do is I'm just going to alert the user and I'm gonna say no channel by that name okay now all of our work is going to go in this in this dot then so this will actually give us a response so we want to put in a response in an arrow or you could do function parameter response if you want so in here let's console.log the response and see what we get okay so this is what's gonna make the request and then we get the response so let's go let's make sure I upload this and then we'll go back to Chrome and let's reload and then this is the response we get so let's take a look at it if we look in it's given us a 200 so it's a good response we have headers which aren't really important but in result we have this items and then we have this we have one item which is going to be the channel details so we have the ID of the channel and then we have the three things we asked for content details snippet in statistics now snippet has like the title of the channel it has some thumbnails it has the description of the channel the custom URL the country and all that stuff statistics is where like the video count the view count subscriber count all that stuff is and then content details has this related playlist object and it has this uploads value okay so we can use this to actually fetch videos and we're going to do that later and that's the thing with the YouTube API is you have to kind of do two steps to get videos you have to deal we have to get the channel info and then use this content details to get the video so we're going to deal with the video stuff last we just want to get that that channel data over here first which we can pull out of all this so let's do that let's go back to vs code and let's see we're gonna want to construct some output here so what I'll do I'm gonna leave the console log response and let's create we want to get the items you saw how we got in the response we had result inside that we had items inside that we had an array of objects which is just one object so we want to basically get that first one so to do this we're going to say Const channel equals response dot result dot items and then we want the first one so 0 okay so that's our channel and then we need to start to construct our output so I'm going to use let here and just initialize a variable called output actually no we're not doing that yet that's for the videos when we actually have to loop through them so I'll use cons because we're not manipulating this in any way let's say output equals and we want to set this to backticks so that we can use a temple literal we can use variables and stuff without concatenation and let's put a ul with the class of collection which is a materialized class and inside here we're going to have a bunch of list items so let's do lists with class equals collection - item again just for materialized for a design and then this will be lets say ID colon and then we'll put in this syntax so we can use a variable we'll take that channel object and we'll get the ID from it remember the ID is directly available right in items and I can show you that right here so it's let's see so we have result items it's close these up and ideas is right here okay so we can just do dot ID for the other stuff we'll have to do like snippet dot title because it's inside snippet but ID is right in there so see I'm gonna just copy this down and what's the next thing we want to get let's get the XG I'm sorry I wanted the title to be first so ID should be second title should be first so this will be snippet dot title cuz you saw it was in the snippet object and then we'll change this to title I can spell it all right and then let's say we want to get the subscriber count' I'll say subscribers and that's gonna be in the statistics thought subscriber count' okay now notice that we're getting like statistics snippet that's because that's what we asked for up here there's other stuff that we can ask for and if you look at the documentation it should show you the different things I don't know is it on this page and my oh it's not on this page there's somewhere though that shows you all the different things you can ask for might be this one parts yet right here so like snippets statistics you can get like the content owner details content details brand settings there's all different stuff in all this so this I mean it's a it's a huge API but yeah so subscriber count' let's also get the view count so we'll say views so this is total views and this is in statistics dot view count and what else we want video count as well so let's do video count also in statistics i'll save videos and then i think that's good so under the UL I'm gonna put a paragraph and this is where I want to put the description so I'm gonna say channel dot and this is available and snippet so snippet dot description alright and let's see I also want to link to the channel so I'm going to put an HR here right underneath and here I'm gonna put an a tag let's give it a class of BTN gray and let's do darken - too okay and then we're also gonna put we wanted to open on a different page so let's do target underscore blank and then the href will go to http youtube.com and then we can get the custom URL on the snippet so we can say channel dot snippet dot custom URL like that and then in here we'll just say visit channel okay I'll save that prettier is gonna kind of just format it a little bit and then what we want to do is display that on the page because right now we're just constructing it so what I'm gonna do is create a separate function for that actually yeah well so we'll create a separate function for that so after this semicolon right here where we have all this whole template string we're gonna call show channel info show show show channel data and let's pass in here the output that we constructed which is all of this okay so we're going to call that function I'm just gonna put that function right above get channel so we'll just say display channel data so we'll say function show channel data which is going to take in the data and we're going to assign let's see did I do it up here because no we didn't all right so we want to get the channel data ID and assign it here so I'm gonna say channel data equals document dot get element get element by ID channel - data and then we just want to call let say channel actually just call it channel data list because that's what it is it's a no it will just do channel data that's fine and then channel data dot innerhtml is going to be equal to data so it saved that now this channel data ID if we look at our HTML is right here okay so it's actually going to get put into this six column div the whole UL the description the button that should all get put into this div because that's what we targeted here okay hopefully that makes sense so we'll save this and let me just upload it real quick and we'll go back and reload and there we go okay so it's showing us all the the title the ID subscribers views video's description visit channel button good so that's working alright so now let's make the form work okay before we add the videos down here let's do the form because it's actually pretty easy we're gonna take the input from the form and just pass it into the get channel function that we've already created okay so let's go back and let's go up to the top here and I'm gonna go here and let's say form submit and change channel so we have our channel form element and we want to call we want to put an event listener on to it and listen for submit okay when that submit is fired off we want to put an arrow function here it's a form so we want to prevent default so that it doesn't actually submit and then let's create a variable called channel and we're gonna get that from the channel input okay so channel input is the actual input field but we want to get the value so let's say dot value and then all we have to do is call get channel and pass in the channel okay and that should update the whole UI because again it's gonna do exactly what happens when the when the page loads it's gonna call it's gonna call this and then fetch it and fetch the new channel it's gonna construct all of this stuff and it's gonna call show channel data pass in the output and then it's going to render on to the screen hopefully that's what should happen so let's upload this and let's try it out so I'm just gonna reload this and let's put in a different let's put in Google developers get channel data cool let's say the new Boston get channel data cool if I put something that doesn't work we get no channel by that name so now we have to do is the videos down here so let's go and do that oh actually guys one more thing I wanted to do is when we look at our application when we look at the channel data like the the subscribers the views and stuff I want to put commas where they're supposed to go and whenever I want to do something like that that has to do with like regular expressions I'll just do a quick search so if we say JavaScript numbers with commas will click on the first Stack Overflow post here and this is usually the question but underneath it you'll see any views anything that has all these up votes you usually work so I'm going to grab this right here and just put that right in here now I'm not I'm gonna I didn't use arrow functions like this for other any other functions so I'm just gonna do I'm just going to change this to function like that just to match the rest and it's just gonna it's gonna look at the number use a regular expression to put a comma where it goes so what I'll do is wrap anything I want to have commas like the view count I'm just going to wrap that and what does it called number with commas so we'll say number with commas and just wrap that okay so we'll do the same for view count and also for subscriber count all right so let's test it out we'll save I have to upload just a pain in the ass but it's fine let's go back and reload and there we go so now you can see that there's commas in there where there needs to be cool so now we can move on to the videos now like I said it's basically a two-step process you you you get the channel information and then you get the playlist ID and then get the videos so what I'll do is in my get channel function I'm gonna go down under where I did the show channel data and then I'm gonna create a variable called playlist ID so we'll do playlist ID which we can get from channel dot content details and we saw this in the console from the response and it has a related playlist that right related playlists dot uploads okay so that's going to give us that ID and then we're gonna call another function called request video playlist so request video playlist and we're gonna pass in that playlist ID okay so now let's create the request video playlist function let me just put a comment here okay so let's do function request video playlist and that's gonna take in a playlist ID okay playlist ID comes from the first response and then we need to make another request so let's create a an object here called request options and we want to put the playlist ID which comes from the playlist ID that's passed in and then we also want the part which is going to be snippet and then we also want the results I'm going to say Max results I want ten videos okay so now we have this object and we can create a variable called request and we're going to set this to we're gonna use our gap e-g API object call client YouTube and then we want to call dot playlist items so play list items like that and then we want to call dot list and then pass in our options okay so the request looks pretty pretty much the same as the request for the channel where we did client dot YouTube channels list now we're doing client YouTube dot placed items dot list okay and then we're gonna just execute it so we're gonna say request dot execute and that takes in a callback which will give us a response and you can use a function if you want you don't have to use arrow functions and let's just do a console dot log response and see what we get okay so let's see if this works okay I'm just gonna upload now what should happen is I should see two or two responses when I reload so let's try it and there we go we get our second response which if we look in items is the ten videos okay so if we look and snippet you have the let's see we have it shows you like the channel title stuff like that the description of the video let's see was that the title of the video and thumbnails resource ID which is where the actual video ID is so good we know that we're actually getting that that those those videos back so now we're going to do is go back to vs code and inside here I guess we will leave the response let's create a variable called playlist items and we're gonna set that to the response that we get and then we want to go into result and then items okay that's the actual array of videos that I showed you and then we want to check to make sure they're there so let's say if playlist items why do I have to what's the other playlist items oh it's that all right never mind oh yeah it's fine all right so if playlist items and let's do an else as well because if there's no videos then we want to do something we want to take our video container and we want to do dot inner HTML equals no uploaded videos and then if there are videos if there are playlist items then we want to construct our output so I'm going to use let here and I'm going to set this to I want an h4 with a class of a line Center which is a materialized class to align it to the center and in here we're just gonna say latest videos okay now what we need to do is we need to loop through the videos and then we need to a pair I just said let so let output equals that and then each loop through the video we need to append to this output variable okay so I'm going to use a for each loop so it's a loop through videos and append output so we'll say playlist items dot for each which takes in a callback I'm gonna use an arrow and I'm gonna call each one item and let's get the I to the video ID we're gonna need that for the embed so let's say Kant's video ID and that's gonna be from item dot and it's in snippet dot resource ID dot video ID okay and just in case that confuses you guys if we look inside of items right we have inside the first we'll look at the first video inside snippet we have Sayyidi inside there we have video ID that's how we can grab that and we need that for the embed because we're embedding the videos into our application alright so we're going to get the video ID and then we're going to construct we're going to take our output we're going to append to it very important you do plus equals otherwise you're just going to overwrite what we have here we don't want to do that we want to append on to it and I'm going to append choose some backticks here and for each video I'm going to wrap it in a div with the class of call and s3 now remember where this gets output the video container is there's a row here and we're inserting this this call s3 inside of the row okay inside here so and we're going to wrap it and then we want to put our embed code and here so to get an example of that I'm just going to go to YouTube real quick and let's see I'll just go to this video here and we'll go to share and click embed and just grab this iframe alright so we'll grab that and let's go back and paste that in now instead of just having a hard-coded ID right here we want to replace it with whatever the idea of the current video in the current loop so let's say video ID okay which we got from right here so once we do that actually we want to change the the width because otherwise it's going to be 560 I want to do a hundred percent which will just fill its container its column and then we'll set the height to auto all right and then finally we just want to output it so actually we want to go outside of the loop which ends right here and just say output videos so we'll take the video container and say innerhtml equals the output and save that let's go ahead and upload that actually align Center this should be Center aligned all right okay let's test it out and reload and there's our videos awesome so if we were to change this to let's say Google developers okay so all the all the data over here changes and we also get their latest videos all right now one small thing that's bothering me is the space here I just want to push this latest videos down a little bit also this button I want to make a little darker on the white text so real quick I'm just going to go to the index.html and let's see let's change actually what button is that that's the form button right so lighten - let's just change it - we'll just do gray so I'll save that and then in the main dot j/s where we have the h4 I'm just gonna put a br right here just simple don't really care we could add styling but whatever it's fine I just don't like the way it looks so let's put that up and reload and there we go so now let's move down a little bit and that this buttons a little darker alright so that's gonna do it guys we can log out and everything goes away so hopefully you enjoyed this video and hopefully it gave you a good idea of how to use the YouTube API in your own projects I know it's a little confusing especially I know there's a ton of documentation hopefully there's get this cleared things up a little bit and you enjoyed watching the video and hopefully did the project as well all right so thanks and I will see you in the next one hey guys this video is sponsored by coding phase coding phase offers courses to help you learn to build real life projects and advance your career with courses and technologies like Reax nodejs laravel Python you'll be on your way to becoming a professional developer you have the options to buy courses outright or to pay a very low monthly fee and get access to every single course so check out coding phase comm or click the link in the description below to receive 50% off

Channel: Traversy Media

Views: 120,837

Rating: 4.936482 out of 5

Keywords: youtube api, youtube api v3, oauth, oauth2, youtube api javascript, oauth javascript, materializecss, youtube app

Id: r-yxNNO1EI8

Length: 58min 23sec (3503 seconds)

Published: Thu Jul 12 2018