<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" style="task" id="weatherGeonames.js" xml:lang="ko">
<info>
<link type="guide" xref="weatherApp.js#main"/>
<revision version="0.1" date="2012-03-09" status="stub"/>
<credit type="author copyright">
<name>Susanna Huhtanen</name>
<email its:translate="no">ihmis.suski@gmail.com</email>
<years>2012</years>
</credit>
<desc/>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>조성호</mal:name>
<mal:email>shcho@gnome.org</mal:email>
<mal:years>2017</mal:years>
</mal:credit>
</info>
<title>로컬 라이브러리 geoName</title>
<synopsis>
<p>안내서의 이 부분에서는 비동기 호출을 활용하여 로컬 라이브러리 geoNames를 만듭니다. 이 예제의 날씨 정보는 geonames.org에서 가져오며, 프로그램에서 날씨 정보를 요청할 때 <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes</link>를 활용합니다. 모든 코드 예제를 여러분 스스로 작성하고 실행하라면 코드를 작성해넣을 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야 합니다. 이 안내서에서는 다음 내용을 진행합니다:</p>
<list>
<item><p><link xref="#geonamesimports">날씨 정보를 가져올 자체 라이브러리</link></p></item>
<item><p><link xref="#geonamesfunction">geoNames용 함수 만들기</link></p></item>
<item><p><link xref="#geonamesmethods">geoNames용 메서드</link></p></item>
<item><p><link xref="#geonames.js">geonames.js </link></p></item>
</list>
</synopsis>
<section id="geonamesimports">
<title>날씨 정보를 가져오는 자체 라이브러리</title>
<p>이 동작을 처리할 때 로컬 라이브러리로 쓸 새 파일이 필요합니다.</p>
<code mime="application/javascript" style="numbered">
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
</code>
<p>첫번째 줄에는 로컬 라이브러리에서 필요한 라이브러리를 가져오고 초기화 합니다. Soup는 모든 http 요청을 처리합니다.</p>
</section>
<section id="geonamesfunction">
<title>GeoNames 함수 만들기</title>
<code mime="application/javascript" style="numbered">
function GeoNames(station) {
this.station = station;
}
GeoNames.prototype = {
}
</code>
<p>날씨를 가져올 때 처리할 GeoNames 함수를 만들었습니다. JavaScript에서는 일단 안에 넣고 나중에 확장할 함수를 만들 수 있습니다. GeoNames.prototyle 중괄호 안에 넣으면 됩니다.</p>
</section>
<section id="geonamesmethods">
<title>GeoNames용 메서드</title>
<code mime="application/javascript" style="numbered">
getWeather: function(callback) {
var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
_httpSession.queue_message(request, function(_httpSession, message) {
if (message.status_code !== 200) {
callback(message.status_code, null);
return;
}
var weatherJSON = request.response_body.data;
var weather = JSON.parse(weatherJSON);
callback(null, weather);
});
},
getIcon: function(weather){
switch (weather.weatherObservation.weatherCondition){
case "drizzle":
case "light showers rain":
case "light rain":
return "weather-showers-scattered.svg";
case "rain":
return "weather-showers.svg";
case "light snow":
case "snow grains":
return "weather-snow.svg";
}
switch (weather.weatherObservation.clouds){
case "few clouds":
case "scattered clouds":
return "weather-few-clouds.svg";
case "clear sky":
return "weather-clear.svg"
case "broken clouds":
case "overcast":
return "weather-overcast.svg";
}
return "weather-fog.svg";
}
</code>
<p>GeoNames의 첫 메서드는 getWeather와 getIcon입니다. getWeather에서 Soup로 http 요청, 오류를 처리하며, 요청의 응답으로 온 정보를 우리가 사용할 수 있는 모양새로 해석합니다. getIcon에서는 getWeather에서 가져온 결과를 비교하여 현재 날씨와 일치하는 아이콘 결과를 가져옵니다. 이제 준비한 로컬 라이브러리가 있으니 쓸 수 있게 만들 시간입니다.</p>
</section>
<section id="geonames.js">
<title>geonames.js</title>
<p>로컬 라이브러리 전체 코드입니다. 주 프로그램 파일에서는 비동기 방식으로 호출합니다.</p>
<code mime="application/javascript" style="numbered">
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
function GeoNames(station) {
this.station = station;
}
GeoNames.prototype = {
getWeather: function(callback) {
var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
_httpSession.queue_message(request, function(_httpSession, message) {
if (message.status_code !== 200) {
callback(message.status_code, null);
return;
}
var weatherJSON = request.response_body.data;
var weather = JSON.parse(weatherJSON);
callback(null, weather);
});
},
getIcon: function(weather){
switch (weather.weatherObservation.weatherCondition){
case "drizzle":
case "light showers rain":
case "light rain":
return "weather-showers-scattered.svg";
case "rain":
return "weather-showers.svg";
case "light snow":
case "snow grains":
return "weather-snow.svg";
}
switch (weather.weatherObservation.clouds){
case "few clouds":
case "scattered clouds":
return "weather-few-clouds.svg";
case "clear sky":
return "weather-clear.svg"
case "broken clouds":
case "overcast":
return "weather-overcast.svg";
}
return "weather-fog.svg";
}
}
} </code>
</section>
</page>