UIX

node.js 맛보기6 - jQueryMobile 프로토타이핑 만들기1

이전 포스팅에 활용했던 파싱하는 소스를 활용해서 프로토타이핑 서비스를 만들어 보자. ‘뉴스박스 히스토리’ 페이지를 파싱해서 모바일웹 페이지를 구성해보려 한다.

뉴스박스 히스토리 파싱하여 api 만들기

http://media.daum.net/netizen/newsbox 이 페이지에서 파란색부분의 링크를 긁어서 리스트 페이지를 구성한다.

class명이 section_statsbox 라는 div엘리먼트 안에 모든 정보는 들어 있는것 같다. 바로 jsdom으로 파싱해보자

//news-history.js
var jsdom = require("jsdom"),
    http = require('http');

jsdom.env("http://media.daum.net/netizen/newsbox", [
    'http://code.jquery.com/jquery-1.5.min.js'
],
function(errors, window) {
    var $ = window.$,
        json = '',
        result = [];
    //jsdom으로 불러와서 우리가 원하는 부분 스크랩핑
    $('.section_statsbox a').each(function(){ 

        result.push({
            href : $(this).attr('href') ,
            text : encodeURIComponent($(this).text())
        }); 

    }); 

    //jsonp 형태로 return
    json = "jsonpCallback(" + JSON.stringify(result) + ")";

    //http 서버 띄움 (8889포트)
    http.createServer(function (req, res) {

        res.writeHead(200, {'Content-Type': 'text/javascript'});
        res.end(json); 

    }).listen(8889, "127.0.0.1"); 

    console.log('News History API Server!!');
});

소스는 주석만으로 설명 가능하다. 간단하게 api서버가 준비 되었다. 실행 시키고 브라우저로 http://127.0.0.1:8889/ 접속해 보면 js소스가 주르륵 펼쳐질 것이다.

api 사용하는 페이지(클라이언트) 만들기

이제 api와 그걸 출력해주는 서버가 준비 되었다. 이젠 그 api를 이용하여 우리가 원하는 페이지를 만들어볼텐데 jQueryMobile를 사용해서 간단하게 뿌려줄 예정이다. Quick Start guide에 우리가 원하는 소스가 있다.

//news-history1.html
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>뉴스 히스토리</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>뉴스 히스토리</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" id="list">
        </ul>
    </div><!-- /content -->

</div><!-- /page -->

<script>
//api에서 호출할 전역함수
function  jsonpCallback(data){
    var str = '';

    for(var i=0; i < data.length; i++){

        str += '<li><a href="'+data[i].href+'">'+decodeURIComponent(data[i].text)+'</a></li>';
    }

    $('#list').html(str);
    $('#list').listview('refresh'); //jQueryMobile형태의 list로 렌더링 

}

//domready
$(function(){
    //jquery jsonp 형태의 api 호출
    $.ajax({

        url: 'http://localhost:8889', 

        dataType: 'jsonp',
        success: function(){
        }
    });

});

</script>
</body>
</html>

html파일로 저장하고 브라우저에서 열어보면 아래와 같은 깔끔한 화면을 볼수 있다. 링크를 클릭할경우 기사보기화면과 몇몇 수정사항은 다음시간에 살펴보기로 한다

실행화면

blog comments powered by Disqus

Published

11 February 2012

Tags