React Native 앱 제작기 #3 | YouTube Data API 사용법 , 적용하기

안녕하세요! 바울랩 ‘오현규’ 연구원 입니다.

이번에는 'YouTube Data API'를 사용하는 방법에 대해서 다뤄보도록 하겠습니다!

 

우선 공식문서를 보겠습니다!

어떤 서비스를 사용하려면 공식 문서를 잘 정독해야 잘 활용할 수 있겠죠?

Channel , Playlist 등 유튜브의 다양한 정보들을 참조할 수 있네요 🤷‍♂️

 

자자!! 지금 우리는 생각해야됩니다! 필요한 정보가 무엇인지!

제.코.베(제주 코딩 베이스 캠프)앱은,

유튜브 채널에 있는 플레이 리스트들, 각 리스트 별 영상, 그리고 하나의 영상 정보가 필요합니다!

Channel Id , PlayList Id , Video Id , Video Info ... 대강 이런 정보들이 필요하겠네요

 

이제 메뉴 중 뭔가 끌리는 Playlistitems를 살펴보죠.

요청 방법까지 친절하게 알려줍니다!

다양한 쿼리도 지원하고 있네요!!

HTTP 요청 주소에 매개 변수를 추가해 필터링을 하면 되겠죠!?

( 여러분의 API 호출량은 소중하니까.. 필요한만큼 불러와야겠죠? )

 

이제 하나씩 필요한 정보들을 찾아볼게요!

Channel Id , PlayList Id , Video Id , Video Info...

 

 

유튜브 채널 ID를 추출 후,

( YouTube 로그인 후 우측상단 프로필 클릭 - 설정 - 고급설정보기 )

 

Playlist API로 플레이 리스트 ID 추출하기

페이지 하단에서 직접 API 테스트가 가능해요!

유튜브에서 본인 플레이리스트 들어가셔도 URL에서 리스트 아이디를 볼 수 있습니다. 

 

                  API 테스트 진행 화면

PlaylistItems API 사용해서  Video Id, Info 추출

 

다음으로 실제 API를 적용해보겠습니다!

먼저, 2가지 단계를 완료해주세요.

**구글 클라우드 플랫폼 접속,**

1. 사용자 인증 정보 등록 (API KEY 생성)
2. API 라이브러리 추가( YouTube Data API 검색 후 사용 설정 )

바로 프로젝트에 적용해볼게요.

저번 회차에서 보여드린 드로워 메뉴를 구성하는 네비게이션에서 메뉴 선택 시

Parameter를 보냅니다. (아래 예시에서는 HTML에 대한 것을 보내는 것을 볼 수 있음 )

메뉴에서 받아온 파라미터를 받아 'plId'(플레이리스트 ID)에 해당하는 영상 리스트들을 불러옵니다.

LectureList.js ( 스크롤 압박 주의 ❗ )

 

아래 코드는 YouTube API를 사용해 데이터를 받아오는 구간입니다.

( 필터링을 잘해서 필요한 데이터만 받아오시길..)

 

YouTubeAPI.js

 

이 부분은 받아온 API 데이터를 가공하는 부분입니다. (여기는 생략하셔도 무방합니다.)

DataProcessor.js

 

이제 마무리 입니다!! ╰(°▽°)╯

위에 LectureList.js에 있는 아래 코드에서 리스트에 뿌려진 각 각의 영상들의 videoId를

LectureVideo 컴포넌트로 보냅니다! (그러면 각 각의 영상에 대해서 재생이 가능하겠죠?)

영상 재생은 react-native-youtube 라이브러리를 사용했습니다!

LectureVideo.js

여기까지 잘 따라오셨다면 쉽게 구현이 됐으리라 믿습니다!!

 

다음 게시글은 앱에 광고를 넣는 방법에 대한 포스팅을 하겠습니다.

많이 봐주세요!