Widget Example‎ > ‎

Weather Widget


GPS의 좌표를 사용한 간단하 일기예보 어플리를 작성하겠습니다.

World Weather Online의 Developer Key 발행

무료로 사용 가능한 일기예보 API로서 World Weather Online의 API가 있습니다. 아래 URL로부터 Key를 발행합니다.


다음은 JSON용의 Feed를 생성하기 위해 URL를 발행합니다.





http://www.worldweatheronline.com/feed/weather.ashx?q=0.00,0.00&format=json&num_of_days=2&key=취득キー


신규 프로젝트 작성

Eclipse의 메뉴로부터 [New]-[Project]를 선택하고, [New Project]다이얼로그박스에서 "Droidget Wizards"-"project"을 선택합니다.

GPS를 사용한 Widget를 개발하는데는 Feature에서 GPS의 설정을 수행해서, Access에서 Web API에 접속할 때에 사용하는 URI를 지정합니다.

World Weather Online의 Web API를 사용하는데는,

http://worldweatheronline.com/

에 악세스 허가를 받을 필요가 있습니다.

우선, GPS의 사용이 가능하도록 하기위해 Feature의 오른쪽 [Add]버튼을 선택합니다.



다음은 Access 설정을 수행합니다. Access의 오른쪽에 있는 [Add]버튼을 선택합니다.






config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="WeatherSample_1279509637280" version="1.0" width="400" height="200">
    <content src="index.html" type="text/html"/>
    <name>WeatherSample</name>
    <description>The sample of Weather</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <feature name="http://bondi.omtp.org/api/geolocation" />
    <access uri="http://worldweatheronline.com" subdomains="true" />
</widget>


JavaScript파일 작성

프로젝트의 src폴더에 JavaScript용의 폴더인 js폴더를 작성해서 js폴더 밑에 script.js라는 이름의 파일을 작성합니다.

src/js/script.js
// call init
function init()
  bondi.geolocation.getCurrentPosition(onPositionSuccessonPositionError{timeout:40000});
}

// this function will handle each position updates
function onPositionSuccess(position{
  lat position.coords.latitude;
  lon position.coords.longitude;
  var url "http://www.worldweatheronline.com/feed/weather.ashx?q="+lat+","+lon+"&format=json&num_of_days=5&key=취득キー";

  json(resultJsonurl);
}

// this function will handle each error in position updates
function onPositionError(error{
  document.getElementById("divMsg").innerHTML "Error";
}

 
// callback of JSON
function resultJson(json){
  
  var resultHtml "<table>";
  var resultDayHtml "";
  var resultIconHtml "";
  var resultHighHtml "";
  var resultMinHtml "";
  
   for(var 0json.data.weather.lengthi++){
     alert("day="+json.data.weather[i].date);
     resultDayHtml   += "<td><font color=white>" json.data.weather[i].date "</td>";
     resultIconHtml   += "<td><img src=" json.data.weather[i].weatherIconUrl[0].value " height=70></td>";
     resultHighHtml   += "<td><font color=red><center>" json.data.weather[i].tempMaxC "</center></font></td>";
     resultMinHtml   += "<td><font color=blue><center>" json.data.weather[i].tempMinC "</center></font></td>";
   }
   resultHtml += "<tr>" resultDayHtml "</tr>";
   resultHtml += "<tr>" resultIconHtml "</tr>";
   resultHtml += "<tr>" resultHighHtml "</tr>";
   resultHtml += "<tr>" resultMinHtml "</tr></table>";
   
   document.getElementById("divMsg").innerHTML resultHtml;
}
 
// JSON
function json(callbackurl){
     
  var http_connect new XMLHttpRequest();
  http_connect.open("GET"urltrue);

  http_connect.onreadystatechange function({
    
    if (http_connect.readyState == 4{
      if(http_connect.status == 200){    
        callback(eval("("+http_connect.responseText+")"));
      }else{
        alert("Can't connect");
      }
    }
  }
  http_connect.send();
}


index.html파일 편집


index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <title></title>
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="init()">
  <div id="divMsg"></div>
</body>
</html>


패키징

다음은 패키징 작업을 수행합니다. Package Explorer의 WeatherSample프로젝트를 클릭한 상태에서 Eclipse의 [Droidget]-[Packaging]을 클릭하여 패키징 작업을 실행합니다.

패키징 작업이 성공하면 WeatherSample.wgt파일이 자동으로 생성됩니다.


USB경유한 전송

USB로 개발단말기를 접속해 놓고 Eclipse의 [Droidget]-[Packaging Install]을 클릭하여 전송 및 인스톨 작업을 실행합니다.

Web경유한 전송

완성한 WeatherSample.wgt를 Web경유하여 실기에 전송하기 위해서는 download용의 html파일을 작성합니다.

Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/WeatherSample.wgt">WeatherSample</a><br>
</body>
</html>


실행결과



※ 본 튜토리얼에서 사용하고 있는 화면은 KDDI/auのIS01의 대기화면을 사용하고 있습니다.
Comments