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 ( 스크롤 압박 주의 ❗ )

	import {getPlayList} from '../../service/DataProcessor';
	const LectureList = ({navigation, plId, lecture}) => {
	const [playList, setPlayList] = useState(null);
	const _getPlayList = async () => {
	setPlayList(await getPlayList(plId)); //여기서 API 데이터를 받아옴
	};
	useEffect(() => {
	_getPlayList();
	}, []);
	const renderVideo = ({item: {title, img, desc, date, videoId}}) => (
	<TouchableHighlight
	onPress={() =>
	navigation.navigate('LectureVideo', {
	videoId: videoId,
	title: title,
	desc: desc,
	})
	}
	underlayColor="white">
	<View style={style.container}>
	<View style={style.itemBox}>
	<Image
	source={{uri: `${img}`}}
	style={{width: 'auto', height: 200}}
	/>
	</View>
	<View style={style.itemTitleBox}>
	<Text style={style.title}>{title}</Text>
	<Text numberOfLines={1} style={style.date}>
	{date}
	</Text>
	</View>
	</View>
	</TouchableHighlight>
	);
	const renderHeader = () => (
	<View style={style.header}>
	<Text
	style={{fontSize: normalize(16), fontWeight: 'bold', color: '#6e6e6e'}}>
	{lecture} 강좌
	</Text>
	</View>
	);
	return !playList ? (
	<View
	style={{
	alignItems: 'center',
	justifyContent: 'center',
	paddingTop: 20,
	flex: 1,
	}}>
	<ActivityIndicator size="large" />
	</View>
	) : (
	<View style={{flex: 1, backgroundColor: '#FFFFFF'}}>
	<SafeAreaView style={{flex: 10}}>
	<FlatList
	data={playList.videoInfo}
	renderItem={renderVideo}
	keyExtractor={item => item.videoId}
	ListHeaderComponent={renderHeader}
	style={{flex: 8}}
	/>
	</SafeAreaView>
	</View>
	);
	};
	//... 중략
	export default LectureList;

view raw LectureList.js hosted with ❤ by GitHub

 

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

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

 

YouTubeAPI.js

	async function _getPlayList(plId) {
	const YOUTUBE_API_KEY = env.YOUTUBE_API_KEY;
	const url = `https://www.googleapis.com/youtube/v3/playlistItems?maxResults=5&part=id,snippet,contentDetails&fields=nextPageToken,prevPageToken,items(id,snippet(title,description,thumbnails(high(url)),publishedAt),contentDetails(videoId))&playlistId=${plId}&key=${YOUTUBE_API_KEY}`
	const options = {
	method: 'GET',
	headers: {
	'Accept': 'application/json',
	'Content-Type' : 'application/json;charset=UTF-8'
	},
	}
	let res = await fetch(url , options);
	let resOk = res && res.ok;
	if(resOk) {
	return await res.json();
	}
	}
	export default _getPlayList;

view raw YouTubeAPI.js hosted with ❤ by GitHub

 

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

DataProcessor.js

	import _getPlayList from '../lib/YouTubeAPI';
	async function getPlayList(plId) {
	let res;
	try {
	res = await _getPlayList(plId);
	} catch (error) {
	res = await _getPlayList(plId);
	}finally{
	if(!res) {}
	return {
	// ... 중략
	videoInfo: res['items'].map(row => ({
	title: row['snippet']['title'],
	desc: row['snippet']['description'],
	img: row['snippet']['thumbnails']['high']['url'],
	date: row['snippet']['publishedAt'].split("T", 1),
	videoId: row['contentDetails']['videoId']
	}))
	};
	}
	}
	export { getPlayList }

view raw DataProcessor.js hosted with ❤ by GitHub

 

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

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

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

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

LectureVideo.js

	import React from 'react';
	import {ScrollView, Text, StyleSheet} from 'react-native';
	import YouTube from 'react-native-youtube';
	import {normalize} from 'react-native-elements';
	const LectureVideo = ({navigation}) => {
	return (
	<ScrollView style={style.container}>
	<YouTube
	apiKey={env.YOUTUBE_API_KEY} //여러분의 API_KEY 보안 잘해주세요^^!
	videoId={navigation.getParam('videoId')} // 리스트에서 보낸 videoId를 받아옴
	style={{alignSelf: 'stretch', height: 270}}
	/>
	<Text style={style.title}>{navigation.getParam('title')}</Text>
	{/* <TouchableOpacity onPress= {()=> webComponent()}> */}
	<Text style={style.admin}>제작: 바울랩 </Text>
	{/* </TouchableOpacity> */}
	<Text style={style.body}>{navigation.getParam('desc')}</Text>
	</ScrollView>
	);
	};

view raw LectureVideo.js hosted with ❤ by GitHub

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

 

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

많이 봐주세요!