개발 동기
운영하고 있는 페이스북 그룹에서 이벤트를 진행했습니다. 그룹의 정책문서를 읽은 분들을 추첨해서 제가 좋아하는 책들을 선물해드리는 이벤트였습니다.
예상 외로 많은 분들이 정책 문서 함께 읽기에 호응해주셔서 이 글을 쓰는 현 시점에서 1600명이 댓글로 참여를 해주셨습니다. 다른 수업에서 HTML을 파싱해서 추첨을 하는 툴을 이용했는데, 규모가 커짐에 따라서 이것을 사용하는 것이 까다롭게 되었습니다. 그래서 좀 더 근본적인 해결책을 찾아야 했습니다. 페이스북 API를 이용하기로 했습니다.
다루는 기술
이 수업에서는 특별한 서버 쪽 기술을 사용하지 않고, javascript만으로도 페이스북의 데이터를 가지고와서 당첨자를 선발하는 프로그램을 만들어볼 것입니다.
또 그렇게 만든 것을 다른 사람들도 사용할 수 있도록 서비스화 시킬 것입니다. 이 수업이 끝나면 페이스북 앱 만들기를 할 수 있는 기본적인 능력을 갖게 될 것입니다.
수업
소스코드
<!doctype html>
<html>
<head>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1913158312286929',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
if(response.status === 'connected'){
console.log('logined');
FB.api('/me', {fields: 'last_name,first_name'}, function(response) {
document.querySelector('#name').innerHTML = ', '+response.last_name+' '+response.first_name;
console.log(response);
});
} else {
console.log('not logined');
}
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function start(){
var src = document.querySelector('#src').value;
list = []
function shuffle(a) {
var j, x, i;
for (i = a.length; i; i--) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}
}
function getData(next){
FB.api(next, {limit:10}, function(response) {
for(var i=0; i<response.data.length; i++){
list.push(response.data[i]);
}
console.log(response);
if(response.paging.next !== undefined){
getData(response.paging.next);
} else {
shuffle(list);
console.log('끗', list);
var code = '';
for(var i=0; i<list.length; i++){
code += '<tr><td>'+list[i].from.name+'</td><td>'+list[i].message+'</td></tr>';
}
document.querySelector('#result').innerHTML = '<table>'+code+'</table>';
}
});
}
getData(src);
}
</script>
</head>
<body>
hi<span id="name"></span>
<fb:login-button
scope="public_profile,email">
</fb:login-button>
<p>
<input type="text" id="src">
</p>
<p>
<input type="button" id="start" value="start" onclick="start();">
</p>
<div id="result"></div>
</body>
</html>
