샘플 애플리케이션 빌드

이 페이지에서는 여러 API를 사용하여 사용자의 YouTube 동영상 조회 통계를 차트로 표시하는 애플리케이션을 빌드하는 단계를 안내합니다. 이 애플리케이션은 다음 작업을 수행합니다.

  • YouTube Data API를 사용하여 현재 인증된 사용자가 업로드한 동영상을 검색하고 동영상 제목의 목록을 표시합니다.
  • 사용자가 특정 동영상을 클릭하면 애플리케이션이 YouTube Analytics API를 호출하여 해당 동영상의 분석 데이터를 검색합니다.
  • 애플리케이션은 Google Visualization API를 사용하여 분석 데이터를 차트로 표시합니다.

다음 단계에서는 애플리케이션을 빌드하는 프로세스를 설명합니다. 1단계에서는 애플리케이션의 HTML 및 CSS 파일을 만듭니다. 2~5단계에서는 애플리케이션에서 사용하는 JavaScript의 여러 부분을 설명합니다. 문서의 끝에 전체 샘플 코드도 포함되어 있습니다.

  1. 1단계: HTML 페이지 및 CSS 파일 빌드하기
  2. 2단계: OAuth 2.0 인증 사용 설정하기
  3. 3단계: 현재 로그인한 사용자의 데이터 검색
  4. 4단계: 동영상의 분석 데이터 요청하기
  5. 5단계: 차트에 애널리틱스 데이터 표시하기

중요: 애플리케이션의 OAuth 2.0 클라이언트 ID를 가져오려면 Google에 애플리케이션을 등록해야 합니다.

1단계: HTML 페이지와 CSS 파일 빌드

이 단계에서는 애플리케이션에서 사용할 JavaScript 라이브러리를 로드하는 HTML 페이지를 만듭니다. 다음은 HTML 페이지용 코드입니다.

<!doctype html>
<html>
<head>
  <title>Google I/O YouTube Codelab</title>
  <link type="text/css" rel="stylesheet" href="index.css">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="//www.google.com/jsapi"></script>
  <script type="text/javascript" src="index.js"></script>
  <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script>
</head>
<body>
  <div id="login-container" class="pre-auth">This application