유투브 키워드 검색 프로그램에는 다양하게 있겠지만 유명한 프로그램으로 노아AI 라고 있습니다.
현재 노아AI는 논란으로 사라졌지만 뷰트랩으로 부활해서 운영중이죠
논란은 뭐.... 음...
뷰트랩에는 채널, 영상, 성과, 수익 등등 유투브 데이터 및 자체 데이터 수집 및 분석을 통해 사용자들에게 서비스를 제공하고 있습니다.
저는.... 유투브 영상이나 채널에 대한 분석은 할줄 모르니 유투브 데이터 api 를 활용해서 영상을 검색하는 프로그램을 만들어 보겠습니다.
오늘은 아주 단순하게 문자열을 입력하고 검색하면 제목에 맞는 영상들을 조회해서 뿌려줍니다.
제 블로그에 들어오신 분들이라면 ai에 대한 관심도 있을거라고 생각합니다.
이번 프로그램은 chatGpt를 활용해서 만들었고, 코드를 타이핑한건 거의 없다고 봐도 됩니다.
나중에 시간이 되면 chatGpt를 활용해서 코딩하는 방법도 쓸 기회가 있었으면 하네요
우선 youtube data api key 발급을 받아야 합니다.
아래 링크를 따라 들어간 후 구글 로그인을 하여 YouTube Data API v3 key 를 발급 받습니다.
youtue api key 발급하는 방법은 따로 글을 작성해두겠습니다.
발급받은 key는 const apiKey 변수에 넣어주면 됩니다.
이번엔 html과 javascript로 만들었습니다.
아래 소스를 그대로 만들어서 브라우저로 열면 바로 사용할 수 있습니다.
아래 소스 전체 복사해서 텍스트 파일에 붙여넣기 해서 확장자를 html로 저장하시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube API</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<form id="search-form">
<div class="input-group mb-3">
<input type="text" class="form-control" id="search-input" placeholder="검색어 입력" aria-label="검색어 입력" aria-describedby="button-addon2">
<button class="btn btn-primary" type="submit" id="button-addon2">검색</button>
</div>
</form>
<div id="result-container"></div>
<div id="button-container"></div>
</div>
<script>
// 유튜브 API 키
const apiKey = '여기에 발급받은 유투브 data api 키 넣으셔야 됩니다.';
// 검색어와 페이지 토큰을 기반으로 유튜브 API 호출
function searchVideos(searchQuery, pageToken = '') {
// API 호출 URL
const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=${searchQuery}&key=${apiKey}&pageToken=${pageToken}`;
// API 호출
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// 영상 목록을 테이블로 표시
displayVideos(data.items);
// 페이징을 위한 버튼 생성
displayPageButtons(data.prevPageToken, data.nextPageToken);
})
.catch(error => {
console.error('Error:', error);
});
}
// 영상 정보를 가져오기 위한 API 호출
function getVideoDetails(videoId) {
// API 호출 URL
const apiUrl = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=${videoId}&key=${apiKey}`;
// API 호출
return fetch(apiUrl)
.then(response => response.json())
.then(data => data.items[0])
.catch(error => {
console.error('Error:', error);
});
}
// 영상 목록을 테이블로 표시
async function displayVideos(videos) {
// 테이블 요소
const table = document.createElement('table');
table.classList.add('table', 'table-bordered');
// 테이블 헤더
const thead = table.createTHead();
const headerRow = thead.insertRow();
const headers = ['썸네일', '제목', '조회 수', '채널명', '구독자 수', '좋아요', '영상 개시일'];
headers.forEach(headerText => {
const th = document.createElement('th');
th.innerText = headerText;
headerRow.appendChild(th);
});
// 테이블 바디
const tbody = table.createTBody();
// 각 영상에 대해 행을 생성하여 테이블에 추가
for (const video of videos) {
const row = tbody.insertRow();
// 영상 정보 가져오기
const videoDetails = await getVideoDetails(video.id.videoId);
// 영상 썸네일
const thumbnailCell = row.insertCell();
const thumbnailLink = document.createElement('a');
thumbnailLink.href = `https://www.youtube.com/watch?v=${video.id.videoId}`;
thumbnailLink.target = '_blank';
const thumbnailImg = document.createElement('img');
thumbnailImg.src = video.snippet.thumbnails.default.url;
thumbnailImg.alt = video.snippet.title;
thumbnailLink.appendChild(thumbnailImg);
thumbnailCell.appendChild(thumbnailLink);
// 영상 제목
const titleCell = row.insertCell();
const titleLink = document.createElement('a');
titleLink.href = `https://www.youtube.com/watch?v=${video.id.videoId}`;
titleLink.target = '_blank';
titleLink.innerText = video.snippet.title;
titleCell.appendChild(titleLink);
// 영상 조회 수
const viewCountCell = row.insertCell();
viewCountCell.innerText = videoDetails ? videoDetails.statistics.viewCount : '불러오는 중';
// 채널명
const channelCell = row.insertCell();
channelCell.innerText = video.snippet.channelTitle;
// 채널의 구독자 수
const subscriberCountCell = row.insertCell();
const channelSubscriberCount = await getChannelSubscriberCount(video.snippet.channelId);
subscriberCountCell.innerText = channelSubscriberCount;
// 영상 좋아요 수
const likeCountCell = row.insertCell();
likeCountCell.innerText = videoDetails ? videoDetails.statistics.likeCount : '불러오는 중';
// 영상 개시일
const publishedDateCell = row.insertCell();
publishedDateCell.innerText = video.snippet.publishedAt.substring(0, 10);
}
// 결과를 보여줄 요소에 테이블 추가
const resultContainer = document.getElementById('result-container');
resultContainer.innerHTML = '';
resultContainer.appendChild(table);
}
// 페이징 버튼 생성
function displayPageButtons(prevPageToken, nextPageToken) {
const buttonContainer = document.getElementById('button-container');
buttonContainer.innerHTML = '';
if (prevPageToken) {
const prevButton = createPageButton('이전', prevPageToken);
buttonContainer.appendChild(prevButton);
}
if (nextPageToken) {
const nextButton = createPageButton('다음', nextPageToken);
buttonContainer.appendChild(nextButton);
}
}
// 페이징 버튼 생성
function createPageButton(text, pageToken) {
const button = document.createElement('button');
button.classList.add('btn', 'btn-primary', 'mr-2');
button.innerText = text;
button.addEventListener('click', () => {
const searchQuery = document.getElementById('search-input').value;
searchVideos(searchQuery, pageToken);
});
return button;
}
// 채널의 구독자 수 가져오기
function getChannelSubscriberCount(channelId) {
// API 호출 URL
const apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${apiKey}`;
// API 호출
return fetch(apiUrl)
.then(response => response.json())
.then(data => data.items[0]?.statistics?.subscriberCount || '')
.catch(error => {
console.error('Error:', error);
});
}
// 검색어 입력 폼
const searchForm = document.getElementById('search-form');
searchForm.addEventListener('submit', event => {
event.preventDefault();
const searchQuery = document.getElementById('search-input').value;
searchVideos(searchQuery);
});
</script>
</body>
</html>
소스가 단순해서 분석할것도 없을거 같습니다.
api를 활용해서 채널에 대한 다른 정보들도 받을 수 있으니 활용해보시는것도 괜찮을거 같네요 .