보편적이지 않은 코딩

페북 API를 이용해 추첨 기능 만들기

개발 동기

운영하고 있는 페이스북 그룹에서 이벤트를 진행했습니다. 그룹의 정책문서를 읽은 분들을 추첨해서 제가 좋아하는 책들을 선물해드리는 이벤트였습니다. 

이벤트 바로가기

예상 외로 많은 분들이 정책 문서 함께 읽기에 호응해주셔서 이 글을 쓰는 현 시점에서 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>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 호동
    getData 함수에서 response.data라는 값을 못 가져오는 것 같아 response를 콘솔로 출력해 보니 created_time, id, message, story 값만 출력되는데고 data라는 항목은 없는 것 같은데 이렇게 되면 댓글을 못 가져오는 건가요?
  2. 코딩학습생
    잘 봤습니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기