gnome-devel-docs 3.28.0-1 / usr / share / help / ko / gnome-devel-demos / weatherGeonames.js.page

<?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 + '&amp;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 + '&amp;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>