💡저를 위한 기록이기때문에 참고만 해주시길 바랍니당🙏
위 링크를 타고 들어가시면 일단
위 이미지처럼 화면이 나오는데, 박스친 링크 클릭하시고 Google Cloud Platform에서
눌러서 새 프로젝트를 만들어주세요 ~ 제목은 아무렇게나 상관이 없구요 ~!
다 만들어지고 나서는 왼쪽에 사용자 인증 정보 클릭해주시고 사용자 인증 정보 만들기
클릭하시고, API Key만드시고 킾해두시면 되겠습니다.
그리고 다시 좌측에 라이브러리 클릭하시고 서치바에 YouTube Data API 검색해주시고, 저기 원래 관리버튼이 아마 사용버튼으로 되어있을거예요. 체크해주세요.
이제 위 링크 누르시고 Search: list를 한번 보도록하죠.
HTTP 요청할때 사용하는 기본 주소죠 - ?
GET https://www.googleapis.com/youtube/v3/search
나중에 여기 뒤에다가 매개변수에 값을 붙여서 뒤에 붙여서 그 조건에 맞는 비디오들 가져오는 겁니다. 필수 매개변수인 part만 넣어서 검색할 수도 있지만 그러면
이상한 비디오만 가지고옵니다. 보통 snippet을 넣는데, 저도 하다보니까
알게된거지만, 필요한 값들은 거의 snippet 안에 들어있더라구요. 그리고
그 다음은 q 매개변수인데, 이게 검색어 입니다. 저희가 검색할 제목이나 유튜버 이름
적어 넣으면 되겠죠 ? 이렇게 두개반 적으면 해당 유튜버에 대한 영상은 다
나오고 다른 매개변수도 채워넣으면 더 원하는게 나오겠죠? 너무 많으니까
일단 각자 알아서 보는걸로..
더 쭉밑에보면 직접 사용해볼 수 있도록 간편하게 기능 구현을 해놓았더라구요..
매개변수에 하나씩 넣으시고 맨 밑에 OAuth 2.0 만 체크 풀어주시고 실행하면
JSON들이 뙇.. 너무 반갑고..
자 이제 테스트해봐야죠. 아까 검색해서 들어간 메인페이지에서ㅍ 참조 -> 서치 -> 리스트 가서 스크롤해주시고 파트에 아무거나 그냥 넣고 밑으로 내려와서 google Oauth를 disable시켜주고나서 실행해보세요.
자 이제 한번 간단하게 제 웹사이트에 한번 영상들을 불러와 보겠습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container{
background-color:beige;
}
</style>
</head>
<body>
<button class="btn">숏박스</button>
<div class="container"></div>
</body>
<script src="/static/testYDA.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</html>Javascript
const btn = document.querySelector(".btn");
// 해당 버튼에 일단 유뷰버 이름을 적어놓았고, 해당 버튼의 innerHTML가져와서 그걸로
// 함수를 실행시켜주고 옆에 APIKey를 같이 써놨는데, 그건 먼저 const로 지정을 하셔도 되고..
// 저도 일단 테스트니까 막 적어놨습니다.
btn.addEventListener('click', (e)=>{
console.log(e.currentTarget.innerHTML);
let channelName = e.currentTarget.innerHTML;
getChannelId(channelName,"당신의 API Key")
})
// 제가 사용할 url을 가져와서 붙여주면 되는데, https://developers.google.com/youtube/v3/docs
// 여기 들어가서 한번 보시고.. 저는 일단 제가 가져오고자하는 채널의 channelId 값을 얻고싶어서
// 해당 url을 통해서 가져올건데 아마 다른 url도 가능하실겁니다.
function getChannelId(name, APIKey)
{
$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/search?",
data: { part: "snippet", key: APIKey, type: "video", q: name },
success: function (response) {
console.log(response);
},
});
}
이렇게하고 실행하시게되면 콘솔창에 JSON 데이터가 들어올거예요.
그리고 데이터를 뒤져보시면 이렇게 제가 원하던 숏박스 채널의 id가 있군요. 이러면 이제 channelId로 검색해서 더 정확하게 서치 할 수 있겠죠 (?) 아닌가..🤷♂️ 저것만 출력한번 해보죠
console.log(response.items[0].snippet.channelId); 
이제 숏박스 채널의 아이디는 제껍니다. 근데 사실 이건 안가져와도 유튜브에서 채널 클릭하면
바로 보이긴합니다. https://www.youtube.com/channel/UC1B6SalAoiJD7eHfMUA9QrA
근데 여기서 저는 재생목록을 가져올겁니다. 유튜버들마다 재생목록들을 가지고 있잖아요 ? 물론 없는 분들도 있지만.. 보통은 정리를 해놓는 것 같습니다.
이런식으로다가 그리고 제가 지금 프로젝트하고 있는데, 이렇게 가져오는 컨셉이여서.. 하여간
이렇게 할겁니다. ㅎㅎㅎ... 자 근데 위에 JSON 보시면 알겠지만 재생목록관련 data가 없습니다.
네 그렇습니다. 다른 url에 GET요청을 이어서 해야할 것 같습니다.
https://developers.google.com/youtube/v3/docs/playlists/list
여기 가셔서 스크롤 내리신다음에 한번 테스트 같이해보시죠.
- part : snippet
- channelId : UC1B6SalAoiJD7eHfMUA9QrA
- maxResults : 100 << 재생목록이 몇개일지 몰라서.. 100개는 왠만하면 다 커버치지않을까..
이렇게 하신다음에 Google Oauth 2.0 풀어주시고, EXCUTE 해주시면 .. !
playLists에 대한 JSON Data 들이 쫙... 이제 이걸 코드로 넣어볼게요.
JavaScript
function getChannelId(name, APIKey)
{
$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/search?",
data: { part: "snippet", key: APIKey, type: "video", q: name },
success: function (response) {
channelId = response.items[0].snippet.channelId;
getChannelLists(channelId, APIKey);
},
});
}
function getChannelLists(channelId, APIKey) {
$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/playlists?",
data: {
part: "snippet",
channelId: channelId,
key: APIKey,
type: "playlist",
maxResults: 100,
},
success: function (response) {
console.log(response);
},
});
}
재생목록 이름 나오네요. ㅎ ㅎ .. 이렇게 밑에 두개 더 있고, 총 3개 맞쥬? 저거 뽑아와서 넣어주고 근데 재생목록 타이틀 뽑은건 좋은데, 그 재생목록안에 있는 비디오는.. 어딨지 ?
https://www.googleapis.com/youtube/v3/playlistItems 그렇습니다. 다른 url 입니다.
저는 위에서 타이틀이랑 그리고 위에 페이지 들어가서 playListitems 매개변수 보면 아시겠지만
playList도 각각 Id가 있네요. 그거 가지고 내려갈게요. 일단 먼저 코드 바꾸고
Javacript
function getChannelLists(channelId, APIKey) {
$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/playlists?",
data: {
part: "snippet",
channelId: channelId,
key: APIKey,
type: "playlist",
maxResults: 100,
},
success: function (response) {
let playListLength = response.pageInfo.totalResults;
for (let i = 0; i < playListLength; i++) {
listTitle.push(response.items[i].snippet.title);
listId.push(response.items[i].id);
}
},
});
console.log(listTitle);
console.log(listId);
}결과
이걸 이용해서 재생목록안에 있는 비디오들 각자의 Id 값을 구해야겠습니다. 왜냐하면 나중에
<iframe width="560" height="315" src="https://www.youtube.com/embed/wST9cYLYO7o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
이걸로 HTML 로 보내줄때 src에 url 보면 맨뒤에가 저게 videoId 거든요.. 그래서 저는 그렇게 코드를 바꿔서
JavaScript
function getVideos(APIKey) {
for (let i = 0; i < listId.length; i++)
{
$.ajax({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/playlistItems?",
data: {
part: "snippet",
playlistId: listId[i],
key: APIKey,
maxResults: 100,
},
success: function (response) {
let temp_listTitle = listTitle[i];
console.log(temp_listTitle);
for (let j = 0; j < response.pageInfo.totalResults; j++) {
videoId.push(response.items[j].snippet.resourceId.videoId);
}
console.log(videoId);
console.log('')
console.log('')
console.log('')
videoId=[];
}
});
};
};아 참고로 계속 위에 함수 마지막에 callback 해서 이 함수를 쓰는겁니다.
이리하여 타이틀이랑 videoId를 뽑는 코드 결과는
Result
뭐 이걸 DB에 넣든.. HTML로 createElement를 하든... 저도 아직 모르겠습니다.
그리고 하다보면 reading 0 뭐시기 에러가 뜰때가 있는데, 그건 API Key limits 가
넘어서 오늘 하루 할당량 다 사용해서 그렇습니다 하하..
그럼 수고하세요.
