개발 동기
운영하고 있는 페이스북 그룹에서 이벤트를 진행했습니다. 그룹의 정책문서를 읽은 분들을 추첨해서 제가 좋아하는 책들을 선물해드리는 이벤트였습니다.
예상 외로 많은 분들이 정책 문서 함께 읽기에 호응해주셔서 이 글을 쓰는 현 시점에서 1600명이 댓글로 참여를 해주셨습니다. 다른 수업에서 HTML을 파싱해서 추첨을 하는 툴을 이용했는데, 규모가 커짐에 따라서 이것을 사용하는 것이 까다롭게 되었습니다. 그래서 좀 더 근본적인 해결책을 찾아야 했습니다. 페이스북 API를 이용하기로 했습니다.
다루는 기술
이 수업에서는 특별한 서버 쪽 기술을 사용하지 않고, javascript만으로도 페이스북의 데이터를 가지고와서 당첨자를 선발하는 프로그램을 만들어볼 것입니다.
또 그렇게 만든 것을 다른 사람들도 사용할 수 있도록 서비스화 시킬 것입니다. 이 수업이 끝나면 페이스북 앱 만들기를 할 수 있는 기본적인 능력을 갖게 될 것입니다.
수업
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!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> |
