굉장히 엄청나!

OPEN WEATHER를 이용해 날씨 API 불러오기에 이어서 이번엔 유튜브 API 불러오기 도전!

저번에 진행한 프로젝트에서 전기차 관련 영상을 볼 수 있는 페이지를 만들기 위하여 유튜브 API를 사용해 보았다.

내가 구현한 기능은 API를 사용하여 영상을 불러오고 지정된 키워드를 선택하면 해당 키워드와 관련된 영상이 나오는 것이였다.

솔직히 API를 받아와서 영상받아오는건 쉬웠는데 영상 보는 페이지 꾸미는게 더 어려웠다...?

어쨌든 API 불러오는 방법 포스팅 시작!

유튜브 API 받아오기

1. Google Cloud 접속하기

https://console.cloud.google.com/welcome?project=youtube2-402602

2. API 및 서비스 > 프로젝트 선택 > 새 프로젝트 생성

3. 프로젝트 생성 후 검색 창에 YouTube Data API v3 검색 > API 사용 선택

4. API 키 생성하기

사용자 인증 정보 만들기 > API 키를 선택하면 키가 발급된다.

나중에 영상을 불러올 주소를 받으면 해당 주소에 발급받은 키를 넣으면 된다.

5. YouTube API 통해 동영상 리스트 가져오기

사용 설정된  API 및 서비스 > YouTube Data API v3 > API 탐색기에서 사용해 보기

6. 카테고리에서 동영상 > list 선택 후 우측에 사용해 보기 

7. API 통신 테스트

요청 파라미터에 값을 입력 후 EXECUTE 선택

• part : snippet으로 설정하는 경우 영상의 제목, 설명 등을 식별하는 다른 속성을 포함하여 불러온다.
• chart : mostPopular로 설정할 경우 가장 인기있는 동영상을 불러온다.
• maxResults : 불러올 영상의 최대 갯수를 설정한다.
• regionCode : 지정된 지역에서 동영상을 선택한다.

아래와 같이 데이터가 잘 불러와 지는 걸 볼 수 있다.

나중에 자신이 원하는 곳에 영상을 불러오고 싶다면 아래의 주소에서 [YOUR_API_KEY]에 자신이 발급받은 API키를 넣어 입력하면 된다. 위에서 본 데이터와 동일한 정보의 데이터가 JSON 형태로 나온다.

※ 아래의 주소는 이전에 변수를 입력한 창에서 HTTP를 선택하면 GET 방식의 동일한 주소가 나온다.

https://youtube.googleapis.com/youtube/v3/videos?part=snippet%20&chart=mostPopular&maxResults=10&regionCode=kr&key=[YOUR_API_KEY]

Iframe 사용하여 영상 불러오기

1. IFrame Player API 접속 > 플레이어 매개변수 표시

https://developers.google.com/youtube/youtube_player_demo?hl=ko

2. IFrame 삽입 코드 html에 입력

[영상 ID]로 된 곳에 JSON으로 받아본 데이터에서 볼 수 있었던 영상의 ID를 입력하면 해당 영상이 화면에 뜨게 된다.

<iframe id="ytplayer" type="text/html" width="720" height="540" src="https://www.youtube.com/embed/[영상 ID]"
frameborder="0" allowfullscreen>

※ 아래 영상은 위와 같은 방법을 사용해 해당 글 HTML에 적용하여 영상을 불러오고 있는 것이다.

Youtube API 할당량 초과 에러

 영상을 계속 새로 불러오다보면 갑자기 영상이 안불러와 지는 상황이 생길 수 있는데 이는 유튜브 API 일일 할당량 한도를 초과한 것이다. 검색해보니 이럴 때에는 할당량 한도 연장 신청을 해야 하는데 시간이 좀 걸린다고 한다. 나같은 경우는 프로젝트를 진행하면서 바로 영상이 불러와 지는지 계속 확인해야했기 때문에 프로젝트를 아예 새로 생성해서 새로운 API를 받아오는 방법을 선택했다.

애드센스도 지금 몇주 째 승인안해주는데 연장 승인은 또 언제 해주겠어...?

📍Open Weather에서 날씨 API 받아오는 방법

https://mzero.tistory.com/18

 미니 프로젝트로 만드는 웹 페이지에 이것저것 추가하다가 날씨 정보를 불러오고 싶었다. 다양한 방법을 찾아보다 날씨 정보를 무료 API로 받아 올 수 있는 Open Weather 사이트를 이용해 보았다.

https://openweathermap.org/

날씨 API를 받아오는 방법

1.Key 발급

해당 사이트 로그인 후 나의 계정 My API Keys에 들어가면 발급 된 Key가 보일 것이다. (Key는 따로 메모해둔다)

2. Current Weather Data

상단 카테고리 중 API 로 들어간다. 아래로 내려가면 Current Weather Data가 보일 것이다. 아래 API doc을 클릭한다.

3. Json 호출

API doc에 들어가서 아래로 내려가다 보면 아래와 같은 링크가 있다.

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

{city name}에 날씨를 알고 싶은 도시(ex. seoul, london 등) 를 넣고 {API key]에는 자신의 key(1번 내용)를 넣어서 주소를 입력하면 Json형식으로 현재의 날씨정보을 알려준다.

날씨 API 활용

 받아온 날씨 API를 이용해 날씨를 검색해 볼 수 있는 웹을 구현해 보았다. 도시명을 입력하면 기본값인 Gwangju 옆으로 검색한 도시의 날씨가 보여진다.