DEV Community

loading...

Upload & takes control over the Youtube Data API

mesadhan profile image Sadhan Sarker ・Updated on ・3 min read

Using Youtube Data API we can access YouTube features to our application, including the ability to upload videos, create and manage playlists, and more.

As a Developer, we need to handle third party API or custom own API. There is no developer who is not integrated any single API in her development journey. So let me introduce API with you. What is actually API is. API is basically Application Programming Interfaces.

πŸ”° Bit of information about API

If I make it simple then it's a common guideline, which way two software can talk to each other. Let’s break,

-πŸ“— Application:- is a service app or could be a third-party open data portal. (Eg. Youtube, Google Map, etc)
-πŸ“— Interface:- It's like a medium, which has some common definitions or formats. (Eg. JSON, XML or Other light-weight file format). JSON is a common and widely used format.
-πŸ“— And finally, Program:- is a set of codes that the developer writes to develop the application. (Eg. Youtube Data API Codes)

I hope you guys get an idea about API if you want to know more about it. Then look below references.

πŸ”° Setting up your API-Key or Pre-configuration.

As I mentioned two systems talk to each other. So one issue raises, that is Security! so that we can take over the control of application resources. API's could be open or close via API-key. We need to configure API-key for close application resources. Okay, let's setup api-key for Youtube Data API.

πŸ”° Setup Youtube Data API Congifuraiton

-[1] Visit, and Enable Youtube Data API
-[2] If not exist then Create New Project
-[3] Search For API Youtube Data API, Enable It.
-[4] Then Left Menu Click Credentials.
-[5] Create API Keys, Select none then Restrict key radio and choose Youtube Data API from Dropdown.
-[6] And Finally, From Credentials create OAuth 2.0 Client IDs with Authorized JavaScript origins Urls [http://localhost] and [http://localhost:5000] or [https://custom-appserver-domain.com]
-[7] Replace js/YoutubeDataApi.js file CLIENT_KEY and API_KEY.
-[8] Now run the app using live server or deploy its production server. [I used VScode life server Extension]

Note: Origins must me match as defined as OAuth2.0 client console.
Details guide will be found. Guide. Else Occurre authentication-related error.

πŸ”° I have attached a demo sample source code below,

πŸ”° Finally, Run & Test Application

-πŸ“— Clone Project from GitHub and then move on
-πŸ“— After run application using live server
-πŸ“— Login with Gmail account and accept require permission
-πŸ“— Finally, Navigate Button and test.

I'm sorry I can't get enough time to optimize its example code. If anyone interested to work with this project then feels free to knock me. I came to share this example because I didn't found any complete tutorial on it. So I think it might be helpful for others.

πŸ‘Œ Congratulations. & Thanks for your time & passion. Feel free to comments, If you have any issues & queries. Follow me on Twitter

πŸ”° References:

Discussion (2)

pic
Editor guide
Collapse
hyderly profile image
Haider

Thank you boy

Collapse
mesadhan profile image
Sadhan Sarker Author

Most welcome. I feel very happy! If It is helpful.