[AIR][Aptana] prototype(Ajax)을 이용한 daum openapi예제

에어(AIR) 2008. 6. 27. 14:18

Aptana로 javascript로 삽질중에-_-; 좀 쉴겸해서-_-;

AIR는 기존에 우리가 알던 html, ajax, javascript등을 이용해서 데스크탑 애플리케이션을 개발할 수 있습니다. 전에 다음openapi를 이용하고, prototype기반인 다음블로그검색을 만들었었습니다.

http://mudchobo.tomeii.com/tt/269

이 코드를 거의 그냥 이용해서 AIR애플리케이션으로 바꿀 수 있습니다.
우선 Aptana를 설치해야합니다.

http://mudchobo.tomeii.com/tt/241
여기에 Aptana설치 후기가 있습니다-_-;
기본으로 AIR프로젝트 만드는 건 안깔려있으니 따로 설치해야합니다. 글을 잘 읽어보시면 설치하기 쉽습니다^^

이제 프로젝트를 만들어봅시다.
File -> New - Project선택하면 Aptana Projects폴더에 -> Adobe AIR Project선택.
Project이름은 DaumBlogSearchAir라고 합시다-_-;
다음을 하면 뭔 옵션이 이래 많아-_-; XML파일을 사전에 설정할 수 있게 해놨는데 걍 디폴트로 해서 해봅시다.
마지막 다음으로 가면 javascript framework를 선택할 수 있습니다.
Prototype을 가볍게 체크해고 Finish를 누릅시다.

처음부터 뭔 쌤플로 자동으로 작성한게 많은지-_-;
DaumBlogSearchAir.html파일을 열어보면 코드가 많습니다. 가볍게 다 지워버리고-_-;
DaumBlogSearchAir.html
[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Daum Blog Search</title>
<link href="sample.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="lib/prototype/prototype.js"></script>
<script type="text/javascript" src="js/DaumSearch.js"></script>
</head>
<body>
<h1>Daum Blog Search!</h1>
<form onsubmit="searchDaum(this.query.value); return false;">
<fieldset>
<label>Search for</label>
<input type="text" name="query" /><input type="submit" value="검색" />
</fieldset>
</form>
<div id="results"></div>
</body>
</html>
[/code]
요렇게 작성합니다.
그럼 이제 우리가 작성할 것은 js폴더에 있는 DaumSearch.js파일 입니다.
작성해봅시다.
DaumSearch.js
[code]
function searchDaum(query){
var searchPacket = {
method: 'get',
parameters: {
q: query,
result: '10',
start: '1',
output: 'json',
apikey: '발급받은 apikey',
},
onSuccess: parseResponse
}
new Ajax.Request('http://apis.daum.net/search/blog', searchPacket);
}

function parseResponse(data){
var children;
var results = $("results");

while (results.hasChildNodes()) {
results.removeChild(results.lastChild);
}

var json = data.responseText.evalJSON();

// 개수를 air에서 제공하는 trace로 찍어보자-_-;
air.trace(json.channel.result);

for (var i = 0; i < json.channel.result; i++) {
var title = json.channel.item[i].title;
var summary = json.channel.item[i].description;
var url = json.channel.item[i].link;

var link = new Element("a", {
"href": url,
"target": "_blank"
}).update(title);
var header = new Element("h2").insert(link);
var para = new Element("p").update(summary);

results.insert(header);
results.insert(para);
}
}
[/code]
간단합니다. 그냥 다음에 url요청해서 데이터를 받아서 parseResponse메소드가 파싱하죠.
그리고, airaliases.js파일을 선언하면 air객체를 사용할 수 있는데, 기존 Flex에서 제공하는 몇몇 기능을 사용할 수 있습니다. Socket도 있고, File관련된 것도 있군요. 이건 나중에 공부해야겠군요.
air.trace하면 로그를 남길 수 있습니다.
아직 Aptana에서 디버깅이 안되기 때문에-_-;(완전 최악-_-) trace를 열심히 찍어줘야할 겁니다-_-;

실행을 해봅시다.
Ctrl + F11누르면 실행됩니다.