title
YouTube API Project With Authentication

description
In this JavaScript project we will use the YouTube API v3 to fetch channel data and videos. We will create a search form to change channels and use OAuth2 to login and logout. Sponsor: Coding Phase [GET 50% OFF!!] https://codingphase.teachable.com/p/all-courses-subscription/?coupon_code=TRAVERSY50&affcode=117955_0bufn2zv Code: https://github.com/bradtraversy/youtube_api_auth_app Docs: https://developers.google.com/youtube/v3/quickstart/js https://developers.google.com/youtube/v3/docs/playlistItems/list 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'YouTube API Project With Authentication', 'heatmap': [{'end': 317.167, 'start': 209.223, 'weight': 0.773}, {'end': 1788.797, 'start': 1751.033, 'weight': 0.786}], 'summary': "Tutorial series on 'youtube api project with authentication' covers building a project using the youtube data api and oauth for logging in, integrating the youtube javascript api for a web app, handling google auth2 library initialization, retrieving channel data, and displaying video playlists, with a focus on practical application and ui customization.", 'chapters': [{'end': 667.422, 'segs': [{'end': 56.458, 'src': 'embed', 'start': 28.176, 'weight': 0, 'content': [{'end': 32.158, 'text': 'so check out codingphase.com or click the link in the description below to receive 50 off.', 'start': 28.176, 'duration': 3.982}, {'end': 34.44, 'text': "hey, what's going on, guys?", 'start': 33.539, 'duration': 0.901}, {'end': 41.566, 'text': "in this video, we're going to be building a project using the youtube data api as well as oauth to log in all right.", 'start': 34.44, 'duration': 7.126}, {'end': 48.131, 'text': "so just to give you a quick demo if we click the login button here and we're using materialize for the ui, by the way,", 'start': 41.566, 'duration': 6.565}, {'end': 56.458, 'text': "we're going to choose a google account and it's going to 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.", 'start': 48.131, 'duration': 8.327}], 'summary': 'Building a project using youtube data api and oauth, offering 50% off on codingphase.com.', 'duration': 28.282, 'max_score': 28.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI828176.jpg'}, {'end': 122.465, 'src': 'embed', 'start': 100.446, 'weight': 3, 'content': [{'end': 108.893, 'text': "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 just very confusing.", 'start': 100.446, 'duration': 8.447}, {'end': 115.479, 'text': 'So I figure my job is to go through it all and then create a practical application so you guys can better understand it.', 'start': 108.993, 'duration': 6.486}, {'end': 121.024, 'text': 'Now, we will be referring to the JavaScript quick start quite a bit, especially for the authentication part.', 'start': 115.919, 'duration': 5.105}, {'end': 122.465, 'text': 'This is actually not that bad.', 'start': 121.064, 'duration': 1.401}], 'summary': 'Analyzing code examples to create practical application for better understanding, focusing on javascript quick start and authentication.', 'duration': 22.019, 'max_score': 100.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8100446.jpg'}, {'end': 319.413, 'src': 'heatmap', 'start': 206.621, 'weight': 1, 'content': [{'end': 209.223, 'text': 'i have one called dev1 on this account.', 'start': 206.621, 'duration': 2.602}, {'end': 218.451, 'text': "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 APIs and Services.", 'start': 209.223, 'duration': 9.228}, {'end': 225.496, 'text': "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.", 'start': 218.691, 'duration': 6.805}, {'end': 231.921, 'text': "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 going to go ahead and click Enable.", 'start': 226.017, 'duration': 5.904}, {'end': 237.866, 'text': 'And it just takes a few seconds to set that up and enable it.', 'start': 233.923, 'duration': 3.943}, {'end': 240.608, 'text': 'And then we need to create our credentials.', 'start': 238.686, 'duration': 1.922}, {'end': 248.128, 'text': "we're basically going to create two things we're going to create an api key for youtube for this api,", 'start': 242.406, 'duration': 5.722}, {'end': 251.709, 'text': "and then we're also going to create an oauth client id.", 'start': 248.128, 'duration': 3.581}, {'end': 257.031, 'text': "so let's click on create credentials and we're going to keep this selected.", 'start': 251.709, 'duration': 5.322}, {'end': 263.533, 'text': "and then for this option, we're using a web browser with javascript, and i believe we can just click public data.", 'start': 257.031, 'duration': 6.502}, {'end': 264.353, 'text': "here we're not.", 'start': 263.533, 'duration': 0.82}, {'end': 267.794, 'text': "we shouldn't be accessing anything that is private, i don't believe.", 'start': 264.353, 'duration': 3.441}, {'end': 270.583, 'text': "And then for here, we'll just click this button.", 'start': 268.502, 'duration': 2.081}, {'end': 271.803, 'text': 'What Credentials Do I Need?', 'start': 270.583, 'duration': 1.22}, {'end': 274.164, 'text': 'And it gives us our API key.', 'start': 271.823, 'duration': 2.341}, {'end': 276.045, 'text': "And we'll click Done.", 'start': 275.264, 'duration': 0.781}, {'end': 279.266, 'text': 'Now from here, we also need to create an OAuth key.', 'start': 276.885, 'duration': 2.381}, {'end': 282.647, 'text': "So let's go down to OAuth Client ID.", 'start': 279.326, 'duration': 3.321}, {'end': 286.174, 'text': "And then you're going to choose web application.", 'start': 284.153, 'duration': 2.021}, {'end': 290.977, 'text': 'You might get a little message that says you have to set up your your screen, your off screen or whatever.', 'start': 286.194, 'duration': 4.783}, {'end': 291.897, 'text': 'Just go through that.', 'start': 291.077, 'duration': 0.82}, {'end': 296.22, 'text': 'Just put in your your app name or whatever here.', 'start': 292.317, 'duration': 3.903}, {'end': 297.54, 'text': 'Web client one.', 'start': 296.72, 'duration': 0.82}, {'end': 298.041, 'text': "That's fine.", 'start': 297.56, 'duration': 0.481}, {'end': 298.701, 'text': "I'll just leave it.", 'start': 298.081, 'duration': 0.62}, {'end': 301.602, 'text': 'And then we need to put in some authorized domains.', 'start': 299.061, 'duration': 2.541}, {'end': 304.084, 'text': 'Now, this is where I had an issue with a local host.', 'start': 301.963, 'duration': 2.121}, {'end': 304.804, 'text': "It wouldn't let me.", 'start': 304.144, 'duration': 0.66}, {'end': 309.507, 'text': "It lets me enter it here, but it wouldn't actually get the data with it.", 'start': 304.824, 'duration': 4.683}, {'end': 311.668, 'text': "So that's why I'm using this code demos.", 'start': 309.587, 'duration': 2.081}, {'end': 317.167, 'text': 'And you can try it with localhost if you want.', 'start': 314.681, 'duration': 2.486}, {'end': 319.413, 'text': "I just couldn't figure it out.", 'start': 317.187, 'duration': 2.226}], 'summary': 'Setting up youtube data api v3: create api key and oauth client id for web application.', 'duration': 112.792, 'max_score': 206.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8206621.jpg'}, {'end': 401.774, 'src': 'embed', 'start': 372.045, 'weight': 4, 'content': [{'end': 377.57, 'text': "I don't want to copy and paste it because I like to do start from finish and in case anyone's following along.", 'start': 372.045, 'duration': 5.525}, {'end': 380.573, 'text': "So let's change the title to YouTube.", 'start': 378.071, 'duration': 2.502}, {'end': 383.256, 'text': "We'll just say YouTube channel data.", 'start': 380.593, 'duration': 2.663}, {'end': 392.012, 'text': "And then we're going to add our Materialize link here so that we can use Materialize CSS.", 'start': 385.99, 'duration': 6.022}, {'end': 401.774, 'text': "So we'll go to materializecss.com, get started, and we want to grab the CSS link here and paste it in.", 'start': 392.412, 'duration': 9.362}], 'summary': 'Updating the title to youtube, adding materialize link for materialize css.', 'duration': 29.729, 'max_score': 372.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8372045.jpg'}, {'end': 535.133, 'src': 'embed', 'start': 502.518, 'weight': 5, 'content': [{'end': 510.624, 'text': "And then very important, this needs to have an ID, which I'm going to call authorize-button.", 'start': 502.518, 'duration': 8.106}, {'end': 513.905, 'text': "Okay, and then let's create another button.", 'start': 510.644, 'duration': 3.261}, {'end': 515.527, 'text': "I'll just copy this one down.", 'start': 514.046, 'duration': 1.481}, {'end': 523.412, 'text': "And let's see, we're going to change the ID to sign out-button.", 'start': 516.347, 'duration': 7.065}, {'end': 527.975, 'text': "And let's change this to log out.", 'start': 526.05, 'duration': 1.925}, {'end': 531.363, 'text': "OK, so that's our buttons underneath that.", 'start': 529.559, 'duration': 1.804}, {'end': 535.133, 'text': "Let's put another line break and then we want an ID of content.", 'start': 531.383, 'duration': 3.75}], 'summary': 'Creating an authorize button with id authorize-button and a sign out button with id sign-out-button.', 'duration': 32.615, 'max_score': 502.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8502518.jpg'}, {'end': 617.832, 'src': 'embed', 'start': 580.194, 'weight': 6, 'content': [{'end': 584.956, 'text': "with the id of channel dash form we don't need an action.", 'start': 580.194, 'duration': 4.762}, {'end': 593.365, 'text': "And inside the form let's put a div with the class of input dash field.", 'start': 587.442, 'duration': 5.923}, {'end': 597.107, 'text': "And let's put an actual input.", 'start': 595.066, 'duration': 2.041}, {'end': 603.571, 'text': "And let's see, this will have an ID of channel dash input.", 'start': 597.768, 'duration': 5.803}, {'end': 606.232, 'text': "OK, and we'll give it a placeholder.", 'start': 604.671, 'duration': 1.561}, {'end': 613.756, 'text': "And we'll just say enter channel name.", 'start': 608.973, 'duration': 4.783}, {'end': 617.832, 'text': 'And then underneath that, we just want a submit button.', 'start': 615.59, 'duration': 2.242}], 'summary': 'Create a form with input field and submit button for channel name.', 'duration': 37.638, 'max_score': 580.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8580194.jpg'}], 'start': 7.062, 'title': 'Building youtube api project', 'summary': 'Covers building a project using the youtube data api and oauth for logging in, with a focus on creating a practical application, referencing the javascript quick start for authentication, and setting up api key and oauth client id through google cloud console. it also involves setting up the interface for a youtube api app by creating html and javascript files, adding materialize css, and building ui elements such as navigation bar, log-in buttons, form, and video container.', 'chapters': [{'end': 349.316, 'start': 7.062, 'title': 'Building youtube data api project', 'summary': 'Covers building a project using the youtube data api and oauth for logging in, with a focus on creating a practical application to better understand overwhelming documentation, referencing the javascript quick start for authentication, and setting up api key and oauth client id through google cloud console.', 'duration': 342.254, 'highlights': ['The chapter covers building a project using the YouTube Data API and OAuth for logging in. The project involves using the YouTube Data API and OAuth for logging in, providing practical application to better understand the overwhelming documentation.', 'Referencing the JavaScript quick start for authentication. The JavaScript quick start is referenced for authentication during the project.', 'Setting up API key and OAuth client ID through Google Cloud Console. The process involves setting up API key and OAuth client ID through Google Cloud Console, which includes creating credentials and enabling the YouTube Data API version 3.']}, {'end': 667.422, 'start': 349.936, 'title': 'Setting up youtube api app interface', 'summary': 'Involves setting up the interface for a youtube api app by creating html and javascript files, adding materialize css, building the ui elements such as navigation bar, log-in buttons, form, and video container.', 'duration': 317.486, 'highlights': ['Setting up the UI elements The chapter involves setting up the interface for a YouTube API app by creating HTML and JavaScript files, adding Materialize CSS, building the UI elements such as navigation bar, log-in buttons, form, and video container.', 'Adding Materialize CSS The speaker adds Materialize CSS to the project by obtaining and including the CSS and JavaScript links from materializecss.com to the HTML file.', 'Creating log-in and log-out buttons The speaker creates log-in and log-out buttons with respective IDs authorize-button and sign-out-button, and assigns Materialize classes to the log-in button.', 'Setting up the channel data section The speaker sets up the channel data section by creating a form and a div for channel data, with IDs channel-form and channel-data respectively, and a placeholder for the input field.']}], 'duration': 660.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI87062.jpg', 'highlights': ['Covers building a project using the YouTube Data API and OAuth for logging in, providing practical application.', 'Setting up API key and OAuth client ID through Google Cloud Console, including creating credentials and enabling the YouTube Data API version 3.', 'Setting up the interface for a YouTube API app by creating HTML and JavaScript files, adding Materialize CSS, and building UI elements such as navigation bar, log-in buttons, form, and video container.', 'Referencing the JavaScript quick start for authentication during the project.', 'Adding Materialize CSS to the project by obtaining and including the CSS and JavaScript links from materializecss.com to the HTML file.', 'Creating log-in and log-out buttons with respective IDs authorize-button and sign-out-button, and assigning Materialize classes to the log-in button.', 'Setting up the channel data section by creating a form and a div for channel data, with IDs channel-form and channel-data respectively, and a placeholder for the input field.']}, {'end': 1159.134, 'segs': [{'end': 929.683, 'src': 'embed', 'start': 902.461, 'weight': 2, 'content': [{'end': 905.784, 'text': 'OK, so that update sign in status is down here.', 'start': 902.461, 'duration': 3.323}, {'end': 911.008, 'text': "And basically, if we're signed in, if we're logged in, we want to hide the login button.", 'start': 906.264, 'duration': 4.744}, {'end': 916.112, 'text': "We're going to set the display property to none and we want to show the sign out button.", 'start': 911.248, 'duration': 4.864}, {'end': 919.735, 'text': 'We also want to get the channel data with this get channel function.', 'start': 916.493, 'duration': 3.242}, {'end': 929.683, 'text': "Else, if we log out, we want the authorized button to show the login button and we want the sign out button to not show because we're logged out.", 'start': 920.336, 'duration': 9.347}], 'summary': 'Update sign-in status to hide login button and show sign-out button', 'duration': 27.222, 'max_score': 902.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8902461.jpg'}, {'end': 988.326, 'src': 'embed', 'start': 944.333, 'weight': 0, 'content': [{'end': 952.779, 'text': "We're just calling the API or calling the API object, calling auth to get auth instance and either sign in or sign out.", 'start': 944.333, 'duration': 8.446}, {'end': 954.68, 'text': 'okay, based on whatever button we click,', 'start': 952.779, 'duration': 1.901}, {'end': 963.593, 'text': 'and then down here we have the get channel so once you log in it calls get channel and you can grab the uh..', 'start': 955.751, 'duration': 7.842}, {'end': 968.915, 'text': 'whatever channel you want goes in here inside these these options uh..', 'start': 963.593, 'duration': 5.322}, {'end': 971.756, 'text': "and then you'd you specify what you want from the channel.", 'start': 968.915, 'duration': 2.841}, {'end': 976.097, 'text': 'we want snippet content, details and statistics, okay,', 'start': 971.756, 'duration': 4.341}, {'end': 980.739, 'text': 'and then that gives us a promise with the response and we can do whatever we want with the response.', 'start': 976.097, 'duration': 4.642}, {'end': 982.8, 'text': "so that's the gist of what's going on here.", 'start': 980.739, 'duration': 2.061}, {'end': 986.483, 'text': "so we're gonna do Pretty much that same thing, just more in depth.", 'start': 982.8, 'duration': 3.683}, {'end': 988.326, 'text': "And then we're also going to fetch videos.", 'start': 986.543, 'duration': 1.783}], 'summary': 'Calling api for authentication, retrieving channel data, and fetching videos.', 'duration': 43.993, 'max_score': 944.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8944333.jpg'}], 'start': 667.462, 'title': 'Youtube api integration for web app', 'summary': 'Covers integrating the youtube javascript api for a web app, including hiding elements, including script files, initializing the client, setting up the youtube api client object, handling sign-in and sign-out functionality, and retrieving channel data using the youtube api, emphasizing the use of promises and specific api methods.', 'chapters': [{'end': 875.828, 'start': 667.462, 'title': 'Javascript api integration for web app', 'summary': 'Covers integrating the youtube javascript api for a web app, including hiding elements, including script files, and initializing the client.', 'duration': 208.366, 'highlights': ['The chapter covers integrating the YouTube JavaScript API for a web app The transcript discusses the process of integrating the YouTube JavaScript API for a web app, focusing on the necessary steps and code implementation.', 'Hiding elements using inline styling It explains the process of hiding elements such as buttons and content using inline styling to enhance the user interface.', 'Including script files and initializing the client The transcript mentions the inclusion of script files, such as main.js and the YouTube API script, as well as the process of initializing the client by calling the handleClientLoad function and loading the auth2 library.']}, {'end': 1159.134, 'start': 876.188, 'title': 'Youtube api client setup and data retrieval', 'summary': 'Covers setting up the youtube api client object, handling sign-in and sign-out functionality, and retrieving channel data using the youtube api, emphasizing the use of promises and specific api methods.', 'duration': 282.946, 'highlights': ['The chapter covers setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, emphasizing the use of promises and specific API methods. The transcript provides a detailed guide on setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, with a focus on promises and specific API methods.', "The update sign in status function determines whether the user is signed in or logged out, adjusting the display of login and sign-out buttons accordingly. The update sign in status function manages the display of login and sign-out buttons based on the user's sign-in status, enhancing user interaction and experience.", "The chapter explains the process of fetching videos, distinct from the documentation's focus on client and channel data. The transcript details the separate process of fetching videos, highlighting a distinction from the documentation's emphasis on client and channel data.", 'Specific methods and variables are explained, such as the Discovery Docs array, Scopes, and DOM element retrieval for various elements like the main content, channel form, channel input, and video container. The transcript provides explanations for specific methods and variables including the Discovery Docs array, Scopes, and DOM element retrieval for elements like the main content, channel form, channel input, and video container, ensuring a comprehensive understanding of the setup process.']}], 'duration': 491.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI8667462.jpg', 'highlights': ['The chapter covers setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, emphasizing the use of promises and specific API methods.', 'The transcript provides a detailed guide on setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, with a focus on promises and specific API methods.', "The update sign in status function manages the display of login and sign-out buttons based on the user's sign-in status, enhancing user interaction and experience.", "The transcript details the separate process of fetching videos, highlighting a distinction from the documentation's emphasis on client and channel data."]}, {'end': 1808.014, 'segs': [{'end': 1186.241, 'src': 'embed', 'start': 1160.234, 'weight': 1, 'content': [{'end': 1164.375, 'text': "Now let's add in some of the stuff that's in the documentation.", 'start': 1160.234, 'duration': 4.141}, {'end': 1168.276, 'text': 'We want to load the auth2 library.', 'start': 1164.415, 'duration': 3.861}, {'end': 1171.577, 'text': 'So we need that function called handleClientLoad.', 'start': 1168.416, 'duration': 3.161}, {'end': 1175.838, 'text': "That's going to be the first function that fires off because that's part of the script tag.", 'start': 1171.657, 'duration': 4.181}, {'end': 1177.738, 'text': 'So handleClientLoad.', 'start': 1176.318, 'duration': 1.42}, {'end': 1186.241, 'text': 'And all we need to do here is take this G API object, which is available to us because of that script tag.', 'start': 1180.377, 'duration': 5.864}], 'summary': 'Loading the auth2 library using the handleclientload function.', 'duration': 26.007, 'max_score': 1160.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81160234.jpg'}, {'end': 1250.625, 'src': 'embed', 'start': 1219.057, 'weight': 0, 'content': [{'end': 1231.927, 'text': 'So we create a function called initClient, just like we specified above, and then we call this gapi object and then a method called client.init,', 'start': 1219.057, 'duration': 12.87}, {'end': 1234.629, 'text': 'or a property called client and then a method called init.', 'start': 1231.927, 'duration': 2.702}, {'end': 1241.482, 'text': 'And inside here, we want to pass in some options, which are going to be discovery docs.', 'start': 1235.7, 'duration': 5.782}, {'end': 1246.484, 'text': 'So discovery docs like that.', 'start': 1242.483, 'duration': 4.001}, {'end': 1250.625, 'text': "And then we're going to set it to the variable above discovery docs.", 'start': 1246.564, 'duration': 4.061}], 'summary': 'Function initclient sets discovery docs to a variable', 'duration': 31.568, 'max_score': 1219.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81219057.jpg'}, {'end': 1324.043, 'src': 'embed', 'start': 1282.104, 'weight': 2, 'content': [{'end': 1284.724, 'text': 'So we want to listen for sign in state changes.', 'start': 1282.104, 'duration': 2.62}, {'end': 1288.745, 'text': 'So listen for sign in.', 'start': 1285.264, 'duration': 3.481}, {'end': 1291.766, 'text': 'State changes.', 'start': 1290.905, 'duration': 0.861}, {'end': 1295.268, 'text': 'So every time we sign in a row, it should it should listen for that.', 'start': 1291.806, 'duration': 3.462}, {'end': 1297.85, 'text': 'So we want to use that GAPI object.', 'start': 1295.348, 'duration': 2.502}, {'end': 1302.172, 'text': 'We want to use off to and we want to call get.', 'start': 1298.41, 'duration': 3.762}, {'end': 1305.154, 'text': 'Off instance.', 'start': 1303.733, 'duration': 1.421}, {'end': 1309.377, 'text': "OK, and then we'll do dot is.", 'start': 1307.416, 'duration': 1.961}, {'end': 1314.34, 'text': 'Signed in dot listen.', 'start': 1311.999, 'duration': 2.341}, {'end': 1318.583, 'text': 'And then we want to call a function called update.', 'start': 1315.801, 'duration': 2.782}, {'end': 1322.062, 'text': 'sign in status.', 'start': 1320.942, 'duration': 1.12}, {'end': 1324.043, 'text': 'So sign in status.', 'start': 1322.122, 'duration': 1.921}], 'summary': 'Listen for sign-in state changes using gapi object to call update function for sign-in status.', 'duration': 41.939, 'max_score': 1282.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81282104.jpg'}, {'end': 1419.184, 'src': 'embed', 'start': 1388.538, 'weight': 4, 'content': [{'end': 1393.962, 'text': 'Then we want to call a function called handle off click.', 'start': 1388.538, 'duration': 5.424}, {'end': 1398.785, 'text': 'OK, and then for the sign out button, so sign out button.', 'start': 1393.982, 'duration': 4.803}, {'end': 1400.631, 'text': 'Dot on click.', 'start': 1399.69, 'duration': 0.941}, {'end': 1405.574, 'text': "We're going to set that to handle sign out click.", 'start': 1400.671, 'duration': 4.903}, {'end': 1411.258, 'text': "OK We're going to create those functions.", 'start': 1408.736, 'duration': 2.522}, {'end': 1416.162, 'text': 'So now we need to do is create this update sign in status.', 'start': 1411.939, 'duration': 4.223}, {'end': 1417.623, 'text': 'We need to create that function.', 'start': 1416.242, 'duration': 1.381}, {'end': 1419.184, 'text': "So let's go down here and create it.", 'start': 1417.683, 'duration': 1.501}], 'summary': 'Creating functions for handling button clicks and sign-in status update.', 'duration': 30.646, 'max_score': 1388.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81388538.jpg'}, {'end': 1808.014, 'src': 'heatmap', 'start': 1751.033, 'weight': 3, 'content': [{'end': 1755.117, 'text': "so let me upload what i have and let's go ahead and reload.", 'start': 1751.033, 'duration': 4.084}, {'end': 1757.699, 'text': "And now you'll see the button shows.", 'start': 1756.278, 'duration': 1.421}, {'end': 1760.84, 'text': "And if I open up Chrome tools, I don't have that error.", 'start': 1757.739, 'duration': 3.101}, {'end': 1766.543, 'text': "OK, that's because codemos.com is a valid URL for this for the key that I'm using.", 'start': 1761.481, 'duration': 5.062}, {'end': 1769.124, 'text': "So what I'm going to do is click log in.", 'start': 1767.323, 'duration': 1.801}, {'end': 1770.945, 'text': 'We should get a pop up.', 'start': 1769.865, 'duration': 1.08}, {'end': 1772.126, 'text': "I'm going to choose an account.", 'start': 1771.005, 'duration': 1.121}, {'end': 1773.806, 'text': "We'll have to allow.", 'start': 1772.926, 'duration': 0.88}, {'end': 1776.028, 'text': 'And now there we go.', 'start': 1775.167, 'duration': 0.861}, {'end': 1777.688, 'text': 'We can see the form here.', 'start': 1776.068, 'duration': 1.62}, {'end': 1781.89, 'text': "OK, and it's logging tech guy web because that's the default channel name.", 'start': 1777.708, 'duration': 4.182}, {'end': 1783.071, 'text': 'And I said to log that.', 'start': 1781.93, 'duration': 1.141}, {'end': 1784.812, 'text': "So let's try the log out.", 'start': 1783.571, 'duration': 1.241}, {'end': 1786.053, 'text': 'And it works.', 'start': 1785.572, 'duration': 0.481}, {'end': 1786.854, 'text': 'That goes away.', 'start': 1786.113, 'duration': 0.741}, {'end': 1788.797, 'text': "Okay, we'll log back in.", 'start': 1786.874, 'duration': 1.923}, {'end': 1793.564, 'text': 'Good So we know that so far so good.', 'start': 1790.86, 'duration': 2.704}, {'end': 1795.266, 'text': 'We have the authentication working.', 'start': 1793.604, 'duration': 1.662}, {'end': 1800.033, 'text': 'And you guys could implement this login on your site.', 'start': 1796.812, 'duration': 3.221}, {'end': 1804.574, 'text': 'If you have a back end, you could put the credentials in a database or whatever.', 'start': 1800.413, 'duration': 4.161}, {'end': 1808.014, 'text': "But we're just using it just to be able to show the UI here.", 'start': 1805.074, 'duration': 2.94}], 'summary': 'Successfully implemented authentication and login functionality for the ui.', 'duration': 26.084, 'max_score': 1751.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81751033.jpg'}], 'start': 1160.234, 'title': 'Google auth2 library initialization and handling sign in state changes', 'summary': 'Demonstrates initializing the google auth2 library and handling sign in state changes. it covers defining and calling functions, setting up discovery docs, client id, and scope, as well as handling sign in state changes using gapi object and off instance. additionally, it includes creating functions to handle initial sign in state, login and log out button clicks, updating sign in status, and fetching data from api.', 'chapters': [{'end': 1281.964, 'start': 1160.234, 'title': 'Google auth2 library initialization', 'summary': 'Demonstrates the process of initializing the google auth2 library by defining and calling functions such as handleclientload and initclient, setting up discovery docs, client id, and scope, as well as handling the returned promise.', 'duration': 121.73, 'highlights': ['The handleClientLoad function is the first one to fire off and is responsible for loading the auth2 library by calling the load method and passing the client to be loaded as auth2. handleClientLoad function, loading the auth2 library, calling the load method, client to be loaded as auth2', 'The initClient function initializes the API client, sets up sign in listeners, and involves setting options such as discovery docs, client ID, and scope, followed by handling the returned promise through a dot then function. initClient function, initializing the API client, setting up sign in listeners, options like discovery docs, client ID, scope, handling the returned promise']}, {'end': 1808.014, 'start': 1282.104, 'title': 'Handling sign in state changes', 'summary': 'Discusses handling sign in state changes using gapi object and off instance, creating functions to handle initial sign in state, login and log out button clicks, updating sign in status, and fetching data from api, with a demonstration of authentication using the web application.', 'duration': 525.91, 'highlights': ['The chapter discusses handling sign in state changes using GAPI object and off instance. The chapter emphasizes the use of GAPI object and off instance to handle sign in state changes.', 'Creating functions to handle initial sign in state, login and log out button clicks, updating sign in status, and fetching data from API. The chapter highlights the creation of functions to handle various aspects such as initial sign in state, login and log out button clicks, updating sign in status, and fetching data from the API.', 'Demonstration of authentication using the web application. The chapter demonstrates the process of authentication using the web application, including logging in and logging out with a web-based authentication system.']}], 'duration': 647.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81160234.jpg', 'highlights': ['The initClient function initializes the API client, sets up sign in listeners, and involves setting options such as discovery docs, client ID, and scope, followed by handling the returned promise through a dot then function.', 'The handleClientLoad function is the first one to fire off and is responsible for loading the auth2 library by calling the load method and passing the client to be loaded as auth2.', 'The chapter emphasizes the use of GAPI object and off instance to handle sign in state changes.', 'The chapter demonstrates the process of authentication using the web application, including logging in and logging out with a web-based authentication system.', 'Creating functions to handle initial sign in state, login and log out button clicks, updating sign in status, and fetching data from API.']}, {'end': 2256.876, 'segs': [{'end': 1841.089, 'src': 'embed', 'start': 1808.575, 'weight': 0, 'content': [{'end': 1811.315, 'text': "So let's go back to VS Code.", 'start': 1808.575, 'duration': 2.74}, {'end': 1812.115, 'text': "Let's see.", 'start': 1811.355, 'duration': 0.76}, {'end': 1819.037, 'text': "And now we have to deal with actually getting the channel data, because right now we haven't done anything like that yet.", 'start': 1813.316, 'duration': 5.721}, {'end': 1824.158, 'text': "So to do this, we're going to use the GAPI, or the GAPI object.", 'start': 1819.777, 'duration': 4.381}, {'end': 1828.966, 'text': "Let's get rid of this and let's say gappy.client.youtube.", 'start': 1825.043, 'duration': 3.923}, {'end': 1835.125, 'text': 'Dot channels.', 'start': 1833.444, 'duration': 1.681}, {'end': 1839.168, 'text': 'OK Now this has a method called list.', 'start': 1835.986, 'duration': 3.182}, {'end': 1841.089, 'text': "So that's what we want to call is list.", 'start': 1839.388, 'duration': 1.701}], 'summary': 'Using gapi to get channel data for youtube client.', 'duration': 32.514, 'max_score': 1808.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81808575.jpg'}, {'end': 1889.06, 'src': 'embed', 'start': 1863.464, 'weight': 1, 'content': [{'end': 1871.146, 'text': 'Details. now, content details is where you get the playlist ID so that you can fetch videos, and then we also want statistics.', 'start': 1863.464, 'duration': 7.682}, {'end': 1874.367, 'text': 'Okay, and these are just public statistics.', 'start': 1871.146, 'duration': 3.221}, {'end': 1881.629, 'text': "It's not like your analytics, like how much you make and stuff like that, how much a channel makes and all that crap.", 'start': 1874.367, 'duration': 7.262}, {'end': 1887.519, 'text': 'and then we want for username And then this is where the channel name goes.', 'start': 1881.629, 'duration': 5.89}, {'end': 1889.06, 'text': "Now we're passing that in here.", 'start': 1887.559, 'duration': 1.501}], 'summary': 'Fetching playlist id and public statistics for username and channel name.', 'duration': 25.596, 'max_score': 1863.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81863464.jpg'}, {'end': 2025.088, 'src': 'embed', 'start': 1948.873, 'weight': 2, 'content': [{'end': 1951.676, 'text': "So let's make sure I upload this.", 'start': 1948.873, 'duration': 2.803}, {'end': 1958.695, 'text': "And then we'll go back to Chrome.", 'start': 1956.994, 'duration': 1.701}, {'end': 1960.776, 'text': "And let's reload.", 'start': 1959.715, 'duration': 1.061}, {'end': 1963.197, 'text': 'And then this is the response we get.', 'start': 1961.556, 'duration': 1.641}, {'end': 1964.277, 'text': "So let's take a look at it.", 'start': 1963.237, 'duration': 1.04}, {'end': 1966.719, 'text': "If we look in, it's given us a 200.", 'start': 1964.658, 'duration': 2.061}, {'end': 1967.919, 'text': "So it's a good response.", 'start': 1966.719, 'duration': 1.2}, {'end': 1970.56, 'text': "We have headers, which aren't really important.", 'start': 1968.619, 'duration': 1.941}, {'end': 1973.622, 'text': 'But in result, we have this items.', 'start': 1970.64, 'duration': 2.982}, {'end': 1980.065, 'text': 'And then we have one item, which is going to be the channel details.', 'start': 1974.442, 'duration': 5.623}, {'end': 1988.85, 'text': 'So we have the idea of the channel and then we have the three things we asked for content details, snippet and statistics.', 'start': 1980.965, 'duration': 7.885}, {'end': 1993.193, 'text': 'Now, snippet has like the title of the channel.', 'start': 1989.53, 'duration': 3.663}, {'end': 1995.374, 'text': 'It has some thumbnails.', 'start': 1993.313, 'duration': 2.061}, {'end': 2002.178, 'text': 'It has the description of the channel, the custom URL, the country and all that stuff.', 'start': 1995.954, 'duration': 6.224}, {'end': 2010.602, 'text': 'Statistics is where, like the video count, the view count, subscriber count all that stuff is, and then content details,', 'start': 2002.558, 'duration': 8.044}, {'end': 2015.704, 'text': 'has this related playlist object and it has this uploads value.', 'start': 2010.602, 'duration': 5.102}, {'end': 2020.887, 'text': "okay, so we can use this to actually fetch videos and we're gonna do that later.", 'start': 2015.704, 'duration': 5.183}, {'end': 2022.507, 'text': "and that's the thing with the YouTube API.", 'start': 2020.887, 'duration': 1.62}, {'end': 2025.088, 'text': 'is you have to kinda do two steps to get videos.', 'start': 2022.507, 'duration': 2.581}], 'summary': 'Using the youtube api to retrieve channel details and statistics, with a successful 200 response and specific data fields for content details, snippet, and statistics.', 'duration': 76.215, 'max_score': 1948.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81948873.jpg'}], 'start': 1808.575, 'title': 'Retrieving channel data with gapi and youtube api', 'summary': 'Covers using the gapi object to retrieve channel data by specifying parts such as snippet, content details, and statistics, and passing the channel username to fetch public statistics and playlist id. additionally, it demonstrates using the youtube api to fetch channel data, including accessing specific information like video count, view count, and subscriber count while constructing output using a template literal.', 'chapters': [{'end': 1889.06, 'start': 1808.575, 'title': 'Using gapi to retrieve channel data', 'summary': 'Focuses on using the gapi object to retrieve channel data by making use of the list method, specifying the desired parts such as snippet, content details, and statistics, and passing the channel username to fetch public statistics and playlist id.', 'duration': 80.485, 'highlights': ['The GAPI object is used to retrieve channel data by calling the list method with specified parts such as snippet, content details, and statistics, and passing the channel username to fetch public statistics and playlist ID.', 'The content details part is essential for obtaining the playlist ID to fetch videos, while the statistics part provides public statistics about the channel.']}, {'end': 2256.876, 'start': 1889.501, 'title': 'Using youtube api to fetch channel data', 'summary': 'Demonstrates using the youtube api to fetch channel data, including the process of making a request, handling responses, and accessing specific information like video count, view count, and subscriber count, while constructing output using a template literal.', 'duration': 367.375, 'highlights': ['The chapter demonstrates the process of making a request and handling responses using the YouTube API, revealing that the response provided a 200 status code and specific information like items containing channel details, content details, snippet, and statistics. Request process and response handling using the YouTube API, 200 status code, specific details in the response.', 'Accessing specific information from the response, such as video count, view count, and subscriber count, by navigating through the statistics object to retrieve the desired data. Accessing video count, view count, and subscriber count from the statistics object in the response.', 'Constructing output using a template literal, including variables like channel ID, title, and subscriber count to form a structured output for the channel data. Using a template literal to structure the output, including channel ID, title, and subscriber count.']}], 'duration': 448.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI81808575.jpg', 'highlights': ['The GAPI object is used to retrieve channel data by calling the list method with specified parts such as snippet, content details, and statistics, and passing the channel username to fetch public statistics and playlist ID.', 'The content details part is essential for obtaining the playlist ID to fetch videos, while the statistics part provides public statistics about the channel.', 'Accessing specific information from the response, such as video count, view count, and subscriber count, by navigating through the statistics object to retrieve the desired data.', 'Constructing output using a template literal, including variables like channel ID, title, and subscriber count to form a structured output for the channel data.', 'The chapter demonstrates the process of making a request and handling responses using the YouTube API, revealing that the response provided a 200 status code and specific information like items containing channel details, content details, snippet, and statistics.']}, {'end': 2787.567, 'segs': [{'end': 2291.061, 'src': 'embed', 'start': 2256.876, 'weight': 0, 'content': [{'end': 2265.803, 'text': 'so like snippets, statistics, you can get like the content, owner details, content details, brand settings is all different stuff in all this.', 'start': 2256.876, 'duration': 8.927}, {'end': 2269.986, 'text': "so this I mean it's a huge API.", 'start': 2265.803, 'duration': 4.183}, {'end': 2271.727, 'text': 'but yeah.', 'start': 2269.986, 'duration': 1.741}, {'end': 2273.749, 'text': 'so subscriber count.', 'start': 2271.727, 'duration': 2.022}, {'end': 2275.27, 'text': "let's also get the view count.", 'start': 2273.749, 'duration': 1.521}, {'end': 2278.452, 'text': "so we'll say views.", 'start': 2275.27, 'duration': 3.182}, {'end': 2291.061, 'text': 'so this is total views and this is in statistics, dot, view count and what else we want, video count as well.', 'start': 2278.452, 'duration': 12.609}], 'summary': 'The api provides various data including subscriber count, view count, and video count.', 'duration': 34.185, 'max_score': 2256.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82256876.jpg'}, {'end': 2435.215, 'src': 'embed', 'start': 2405.852, 'weight': 3, 'content': [{'end': 2419.244, 'text': "So after this semicolon right here where we have all this whole template string, we're going to call show channel info, show channel data.", 'start': 2405.852, 'duration': 13.392}, {'end': 2425.929, 'text': "And let's pass in here the output that we constructed, which is all of this.", 'start': 2420.845, 'duration': 5.084}, {'end': 2428.29, 'text': "So we're going to call that function.", 'start': 2426.929, 'duration': 1.361}, {'end': 2430.992, 'text': "I'm just going to put that function right above get channel.", 'start': 2428.33, 'duration': 2.662}, {'end': 2435.215, 'text': "So we'll just say display channel data.", 'start': 2432.013, 'duration': 3.202}], 'summary': 'Calling display channel data function after constructing the template string.', 'duration': 29.363, 'max_score': 2405.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82405852.jpg'}, {'end': 2642.623, 'src': 'embed', 'start': 2615.384, 'weight': 4, 'content': [{'end': 2620.66, 'text': 'OK, so channel input is the actual input field, but we want to get the value.', 'start': 2615.384, 'duration': 5.276}, {'end': 2622.245, 'text': "So let's say dot value.", 'start': 2620.741, 'duration': 1.504}, {'end': 2628.675, 'text': 'And then all we have to do is call get channel and pass in the channel.', 'start': 2622.952, 'duration': 5.723}, {'end': 2635.039, 'text': "And that should update the whole UI because, again, it's going to do exactly what happens when the page loads.", 'start': 2629.436, 'duration': 5.603}, {'end': 2640.402, 'text': "It's going to call this and then fetch it, fetch the new channel.", 'start': 2635.079, 'duration': 5.323}, {'end': 2642.623, 'text': "It's going to construct all of this stuff.", 'start': 2640.462, 'duration': 2.161}], 'summary': 'Using dot value and get channel updates ui with new channel data.', 'duration': 27.239, 'max_score': 2615.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82615384.jpg'}, {'end': 2787.567, 'src': 'embed', 'start': 2752.806, 'weight': 5, 'content': [{'end': 2760.953, 'text': "So what I'll do is wrap anything I want to have commas, like the view count, I'm just gonna wrap that in, what is it called? Number with commas.", 'start': 2752.806, 'duration': 8.147}, {'end': 2769.1, 'text': "So we'll say number with commas, and just wrap that.", 'start': 2761.694, 'duration': 7.406}, {'end': 2778.602, 'text': "Okay, so we'll do the same for view count and also for subscriber count.", 'start': 2770.697, 'duration': 7.905}, {'end': 2782.224, 'text': "All right, so let's test it out.", 'start': 2781.123, 'duration': 1.101}, {'end': 2783.065, 'text': "We'll save.", 'start': 2782.484, 'duration': 0.581}, {'end': 2787.567, 'text': "I have to upload, which is a pain in the ass, but it's fine.", 'start': 2783.085, 'duration': 4.482}], 'summary': 'Adding commas to view count and subscriber count for better readability.', 'duration': 34.761, 'max_score': 2752.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82752806.jpg'}], 'start': 2256.876, 'title': 'Youtube api data extraction and channel data display', 'summary': 'Discusses using the youtube api to extract subscriber count, view count, video count, description, and custom url, and creating functions to display channel data on the webpage, with focus on content details and ui updates.', 'chapters': [{'end': 2378.681, 'start': 2256.876, 'title': 'Youtube api data extraction', 'summary': 'Discusses using the youtube api to extract data such as subscriber count, view count, video count, description, and custom url from the channel snippet and statistics, with a focus on retrieving specific content details and brand settings.', 'duration': 121.805, 'highlights': ['The API allows extraction of subscriber count, view count, and video count from the statistics.', 'The chapter emphasizes the extraction of description and custom URL from the channel snippet, demonstrating the use of specific API endpoints like snippet.description and snippet.customurl.', 'The importance of retrieving content details and brand settings is highlighted, showcasing the diversity of data available through the YouTube API.']}, {'end': 2787.567, 'start': 2379.656, 'title': 'Channel data display and form submission', 'summary': 'Involves creating a function to display channel data on the webpage, implementing form submission to update the ui, and adding commas to subscriber and view count using regular expressions.', 'duration': 407.911, 'highlights': ['Creating a function to display channel data on the webpage by constructing and rendering the output, resulting in the successful display of channel information including title, ID, subscribers, views, videos, description, and visit channel button. Successful display of channel information including title, ID, subscribers, views, videos, description, and visit channel button.', 'Implementing form submission to update the UI by adding an event listener to the form, preventing default submission, retrieving the channel input value, and updating the UI by calling the get channel function. Successfully updating the UI by calling the get channel function with the channel input value.', 'Adding commas to subscriber and view count using regular expressions to format the numbers with commas, ensuring better readability and user experience. Enhanced readability and user experience by adding commas to subscriber and view count using regular expressions.']}], 'duration': 530.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82256876.jpg', 'highlights': ['The API allows extraction of subscriber count, view count, and video count from the statistics.', 'The chapter emphasizes the extraction of description and custom URL from the channel snippet, demonstrating the use of specific API endpoints like snippet.description and snippet.customurl.', 'The importance of retrieving content details and brand settings is highlighted, showcasing the diversity of data available through the YouTube API.', 'Creating a function to display channel data on the webpage by constructing and rendering the output, resulting in the successful display of channel information including title, ID, subscribers, views, videos, description, and visit channel button.', 'Implementing form submission to update the UI by adding an event listener to the form, preventing default submission, retrieving the channel input value, and updating the UI by calling the get channel function. Successfully updating the UI by calling the get channel function with the channel input value.', 'Adding commas to subscriber and view count using regular expressions to format the numbers with commas, ensuring better readability and user experience. Enhanced readability and user experience by adding commas to subscriber and view count using regular expressions.']}, {'end': 3502.024, 'segs': [{'end': 2848.807, 'src': 'embed', 'start': 2812.737, 'weight': 4, 'content': [{'end': 2821, 'text': "So what I'll do is in my get channel function, I'm going to go down under where I did the show channel data.", 'start': 2812.737, 'duration': 8.263}, {'end': 2827.211, 'text': "and then i'm going to create a variable called playlist id.", 'start': 2822.788, 'duration': 4.423}, {'end': 2836.518, 'text': "so we'll do playlist id which we can get from channel dot content details.", 'start': 2827.211, 'duration': 9.307}, {'end': 2846.185, 'text': 'remember, we saw this in the console from the response and it has related playlist.', 'start': 2836.518, 'duration': 9.667}, {'end': 2846.805, 'text': 'is that right?', 'start': 2846.185, 'duration': 0.62}, {'end': 2848.807, 'text': 'related playlist dot uploads?', 'start': 2846.805, 'duration': 2.002}], 'summary': 'In the get channel function, a playlist id is created from channel content details.', 'duration': 36.07, 'max_score': 2812.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82812737.jpg'}, {'end': 2929.033, 'src': 'embed', 'start': 2890.303, 'weight': 1, 'content': [{'end': 2894.865, 'text': 'OK, playlist ID comes from the first response.', 'start': 2890.303, 'duration': 4.562}, {'end': 2896.986, 'text': 'And then we need to make another request.', 'start': 2895.365, 'duration': 1.621}, {'end': 2903.568, 'text': "So let's create an object here called request options.", 'start': 2897.026, 'duration': 6.542}, {'end': 2913.693, 'text': "and we want to put the playlist ID, which comes from the playlist ID that's passed in,", 'start': 2906.79, 'duration': 6.903}, {'end': 2923.817, 'text': 'and then we also want the part which is going to be snippet and then we also want the results.', 'start': 2913.693, 'duration': 10.124}, {'end': 2927.592, 'text': "I'm going to say max results.", 'start': 2923.817, 'duration': 3.775}, {'end': 2929.033, 'text': 'I want 10 videos.', 'start': 2927.852, 'duration': 1.181}], 'summary': 'Create a request with playlist id, part as snippet, and max results of 10 videos.', 'duration': 38.73, 'max_score': 2890.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82890303.jpg'}, {'end': 3172.609, 'src': 'embed', 'start': 3139.304, 'weight': 2, 'content': [{'end': 3144.267, 'text': 'okay, now what we need to do is we need to loop through the videos and then we need to append.', 'start': 3139.304, 'duration': 4.963}, {'end': 3149.671, 'text': 'i just said let, so let output equals that and then each loop through the video.', 'start': 3144.267, 'duration': 5.404}, {'end': 3152.312, 'text': 'we need to append to this output variable.', 'start': 3149.671, 'duration': 2.641}, {'end': 3156.255, 'text': "okay, so i'm going to use a for each loop.", 'start': 3152.312, 'duration': 3.943}, {'end': 3164.441, 'text': "so let's say loop through videos and append output.", 'start': 3156.255, 'duration': 8.186}, {'end': 3172.609, 'text': "so we'll say playlist items dot for each which takes in a callback.", 'start': 3164.441, 'duration': 8.168}], 'summary': 'Loop through videos and append to output variable using a for each loop.', 'duration': 33.305, 'max_score': 3139.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI83139304.jpg'}, {'end': 3393.119, 'src': 'embed', 'start': 3344.36, 'weight': 3, 'content': [{'end': 3355.807, 'text': "so we'll take the video container and say enter html equals the output and save that.", 'start': 3344.36, 'duration': 11.447}, {'end': 3361.231, 'text': "let's go ahead and upload that actually align center.", 'start': 3355.807, 'duration': 5.424}, {'end': 3364.272, 'text': 'this should be center align, all right.', 'start': 3361.231, 'duration': 3.041}, {'end': 3376.888, 'text': "OK, let's test it out and reload.", 'start': 3374.787, 'duration': 2.101}, {'end': 3379.37, 'text': "And there's our videos.", 'start': 3378.429, 'duration': 0.941}, {'end': 3384.113, 'text': "Awesome So if we were to change this to, let's say, Google Developers.", 'start': 3379.75, 'duration': 4.363}, {'end': 3390.658, 'text': 'OK, so all the data over here changes.', 'start': 3384.133, 'duration': 6.525}, {'end': 3393.119, 'text': 'And we also get their latest videos.', 'start': 3391.318, 'duration': 1.801}], 'summary': 'Video container uploaded with center alignment. data changes with latest videos.', 'duration': 48.759, 'max_score': 3344.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI83344360.jpg'}, {'end': 3479.245, 'src': 'embed', 'start': 3450.126, 'weight': 0, 'content': [{'end': 3453.548, 'text': "right. so that's going to do it, guys, we can log out and everything goes away.", 'start': 3450.126, 'duration': 3.422}, {'end': 3462.572, 'text': '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.', 'start': 3453.548, 'duration': 9.024}, {'end': 3466.534, 'text': "i know it's a little confusing, especially i know there's a ton of documentation.", 'start': 3462.572, 'duration': 3.962}, {'end': 3473.137, 'text': 'hopefully this get this cleared things up a little bit and you enjoyed watching the video and hopefully you did the project as well.', 'start': 3466.534, 'duration': 6.603}, {'end': 3476.339, 'text': 'all right, so thanks and i will see you in the next one.', 'start': 3473.137, 'duration': 3.202}, {'end': 3479.245, 'text': 'hey guys, this video is sponsored by coding phase.', 'start': 3476.923, 'duration': 2.322}], 'summary': 'Video provides guidance on using youtube api for projects.', 'duration': 29.119, 'max_score': 3450.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI83450126.jpg'}], 'start': 2790.169, 'title': 'Youtube api integration', 'summary': 'Covers youtube api usage for retrieving video playlists and displaying latest videos, aiming for 10 videos in the playlist and functional display of latest videos with customization options.', 'chapters': [{'end': 2988.625, 'start': 2790.169, 'title': 'Youtube video playlist retrieval', 'summary': 'Explains the process of retrieving youtube video playlist, including obtaining the playlist id from channel content details and making a request for playlist items, with a target of 10 videos.', 'duration': 198.456, 'highlights': ['Obtaining the playlist ID from channel content details and calling the request video playlist function Creating a variable called playlist id to get the ID from channel content details and then calling the request video playlist function to retrieve the playlist.', 'Creating the request video playlist function to make a request using the playlist ID Defining the function request video playlist to make a request using the obtained playlist ID.', 'Setting the part to snippet and defining max results as 10 for video retrieval Defining the part as snippet and setting the max results to 10 for video retrieval.', 'Calling the GAPI object to retrieve playlist items and executing the request Using GAPI object to retrieve playlist items and executing the request to get the video playlist.', 'Reloading to ensure commas are correctly placed and moving on to the video retrieval process Reloading to ensure correct placement of commas and proceeding with the video retrieval process.']}, {'end': 3502.024, 'start': 2989.726, 'title': 'Using youtube api to display latest videos', 'summary': 'Demonstrates the process of using the youtube api to display the latest videos from a specific channel, including looping through the video items, appending the embed code, and outputting the videos on the web page, resulting in a functional display of the latest videos with customization options.', 'duration': 512.298, 'highlights': ['The chapter demonstrates the process of using the YouTube API to display the latest videos from a specific channel. The speaker explains the process of retrieving and displaying the latest videos from a specific channel using the YouTube API.', 'Looping through the video items and appending the embed code. The speaker explains the process of looping through the retrieved video items and appending the embed code for each video, enabling the display of multiple videos on the web page.', 'Outputting the videos on the web page with customization options. The speaker explains the process of outputting the videos on the web page, including customization options such as aligning the videos, changing the button appearance, and providing a seamless user experience.']}], 'duration': 711.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r-yxNNO1EI8/pics/r-yxNNO1EI82790169.jpg', 'highlights': ['Covers youtube api usage for retrieving video playlists and displaying latest videos, aiming for 10 videos in the playlist and functional display of latest videos with customization options.', 'Defining the part as snippet and setting the max results to 10 for video retrieval.', 'Looping through the retrieved video items and appending the embed code for each video, enabling the display of multiple videos on the web page.', 'The speaker explains the process of outputting the videos on the web page, including customization options such as aligning the videos, changing the button appearance, and providing a seamless user experience.', 'Obtaining the playlist ID from channel content details and calling the request video playlist function to retrieve the playlist.']}], 'highlights': ['Covers building a project using the YouTube Data API and OAuth for logging in, providing practical application.', 'Setting up API key and OAuth client ID through Google Cloud Console, including creating credentials and enabling the YouTube Data API version 3.', 'Setting up the interface for a YouTube API app by creating HTML and JavaScript files, adding Materialize CSS, and building UI elements such as navigation bar, log-in buttons, form, and video container.', 'The chapter covers setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, emphasizing the use of promises and specific API methods.', 'The transcript provides a detailed guide on setting up the YouTube API client object, handling sign-in and sign-out functionality, and retrieving channel data using the YouTube API, with a focus on promises and specific API methods.', 'The initClient function initializes the API client, sets up sign in listeners, and involves setting options such as discovery docs, client ID, and scope, followed by handling the returned promise through a dot then function.', 'The handleClientLoad function is the first one to fire off and is responsible for loading the auth2 library by calling the load method and passing the client to be loaded as auth2.', 'The GAPI object is used to retrieve channel data by calling the list method with specified parts such as snippet, content details, and statistics, and passing the channel username to fetch public statistics and playlist ID.', 'The content details part is essential for obtaining the playlist ID to fetch videos, while the statistics part provides public statistics about the channel.', 'The API allows extraction of subscriber count, view count, and video count from the statistics.', 'The chapter emphasizes the extraction of description and custom URL from the channel snippet, demonstrating the use of specific API endpoints like snippet.description and snippet.customurl.', 'Creating a function to display channel data on the webpage by constructing and rendering the output, resulting in the successful display of channel information including title, ID, subscribers, views, videos, description, and visit channel button.', 'Covers youtube api usage for retrieving video playlists and displaying latest videos, aiming for 10 videos in the playlist and functional display of latest videos with customization options.', 'Defining the part as snippet and setting the max results to 10 for video retrieval.', 'Looping through the retrieved video items and appending the embed code for each video, enabling the display of multiple videos on the web page.']}