Now that we have the basic workings for how the user will interact with our application, it's time to focus on how we will get the video data.
As mentioned in the ASSIGNMENT.MD file, the user enters a Youtube Channel and we need to list out the videos in the given Youtube Channel. This task is where the Youtube API will come in handy
Given a channel, we need the Youtube API to give us the list of the associated videos. For each video, we should get the following information:
- Title of Video
- Publish Date
- Description of video
- Number of views
- Number of likes
- Number of dislikes
- Number of comments
When we want to use an API, we would call what's called an endpoint. An endpoint is a fancy word for a dedicated URL that we talk to in order to get data we want.
Scenario: If you want to order coffee from Starbucks, you would be telling the barista "I would like a latte". In computers, we would translate this sentence to something like PUT https://starbucks.com/order?item=latte
. In this URL, we want to order coffee from Starbucks, so we hit the starbucks.com
site, but we want to place an order, so we route to the order
page. The item=latte
part is a way of telling starbucks.com that the item we want is a latte. I'm simplifying a bit, but this should give you the main idea of what we can do with the Youtube API.
Before we can even start using an API, we need to generate what's called an API Key
. This is an identifier that should not be shared/exposed to the world which allows us to connect to the API/service. So, in the case of the Starbucks scenario, we could present some sort of account info (ie: rewards number, phone number, etc), greet the barista, etc before we can order that latte. Think of the API Key as your "badge". You don't want to expose your "badge" to any random person because unpleasant stuff could happen.
Youtube API Instructions (based off of this article)
-
Go to the Google Developers console
-
Go to the top left corner of the website. You will see a drop down right next to the "Google Cloud Platform" text. Click that dropdown and select "Create Project". You don't need to enter an organization for the project. Give your project a handy dandy name
-
After you click "Create", you will see a dashboard. Click "Enable APIs and Services"
-
Select "Youtube Data API v3" (or whichever it says "Youtube Data API") from the "API Library" view
-
Click "Enable" to enable the Youtube Data API
-
You will be taken to an overview page and in the top right, you will see a button called "Create Credentials". Click that
-
Select "Youtube Data API V3" (or "Youtube Data API"). Select "Web server" for the question regarding "Where will you be calling the API from?". Select "Public Data" for "Which data will you be accessing?"
-
Click the blue button at the bottom and you will see an icon saying "Here is your API Key". Please copy and paste this API key to the
.env
file undersrc/
(fill in theYOUTUBE_API_KEY
variable). The.env
file will safely store your API key and not expose it to other users.
Now that you have the API key generated for the Youtube API, we can start to interact with the Youtube API to get Youtube videos associated with a given Youtube Channel.
For simplicity, your Youtube API code will be written in YoutubeAPI.js
file under src/
directory. There are a couple functions you can fill out here as a starting point to help you get the data you need to build that table!
Read the Youtube API documentation to make sure you understand how you are supposed to create the request to get the data you want from the Youtube API Filling out the functions in the
YoutubeAPI.js
might help break your problem down into manageable chunks Think about the format in which you want to send your data from theYoutubeAPI.js
file to your frontend. JSON tends to be the standard format for such practice