Openweathermap를 이용한 날씨

<a href="javascript:checkVirus('grpid%3DygGb%26fldid%3DHrhB%26dataid%3D59%26fileid%3D3%26regdt%3D20150728132543&url=http%3A%2F%2Fcfile248.uf.daum.net%2Fattach%2F243F1D4E55B7101B2A0FF5')"><img src="https://t1.daumcdn.net/daumtop_deco/icon/icon.hanmail.net/editor/p_zip_s.gif" border="0" alt="첨부파일" class="vam"/> weahter.zip</a> 날씨 API를 제공하는 것중 대표적인 것으로 <a href="http://openweathermap.org/" target="_blank" class="tx-link">http://openweathermap.org/</a> 가 있습니다. <img src="https://t1.daumcdn.net/cfile/cafe/2178BC3E55B6F66B2D" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="1004" width="1004" exif="{}" data-filename="wea1.jpg" style="clear:none;float:none;" id="A_2178BC3E55B6F66B2DA333"/> 서울은 id가 1835848이고 위도(lat)는 37.56826, 경도(lon)은 126.977829 입니다.데이터는 JSON 형태로 들어오는데 데이터를 받는 주소 값은 id를 이용하거나 위도와 경도를 이용할수 있습니다. 오늘 서울의 5일간 날씨 예보● <a href="http://api.openweathermap.org/data/2.5/forecast?id=1835848" target="_blank" class="tx-link">http://api.openweathermap.org/data/2.5/forecast?id=1835848</a>● <a href="http://api.openweathermap.org/data/2.5/forecast?lat=37.56826&lon=126.977829" target="_blank" class="tx-link">http://api.openweathermap.org/data/2.5/forecast?lat=37.56826&lon=126.977829</a> 저 주소를 클릭하면  <img src="https://t1.daumcdn.net/cfile/cafe/23457C3D55B6FADD26" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="1024" width="1024" exif="{}" data-filename="wea2.jpg" style="clear:none;float:none;" id="A_23457C3D55B6FADD26BED5"/>이러한 식의 JSON 형태로 데이터가 뿌려지는 것을 볼수 있습니다. dt_txt는 날짜와 시간이 나오고 description에는 날씨 정보가 나옵니다.temp_max에는 최고 온도가 나오는데 절대 온도로 되어있어서 temp_max - 273을 해야 섭씨(˚C)를 구할수 있습니다. 날씨의 종류로는 sky is clear, few clouds, scattered clouds, broken clouds, overcast clouds, shower rain, light rain, moderate rain, Rain, Thunderstorm, snow, mist 등이 있습니다. 이제 스프링으로 돌아가서 weather.js 라는 자바스크립트 파일을 만들어 줍니다.그리고 받아온 데이터가 어떠한 식으로 나오는지 보기위해 <img src="https://t1.daumcdn.net/cfile/cafe/2118404055B6F8F803" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="907" width="907" exif="{}" data-filename="wea3.jpg" style="clear:none;float:none;" id="A_2118404055B6F8F803FA02"/>----------------------------------------------------------------------------------------$(document).ready(function(){ $.ajax({ url:"http://api.openweathermap.org/data/2.5/forecast?lat=37.56826&lon=126.977829", dataType:"json", success:function(city){ console.log(city); ---------------------------------------------------------------------------------------- 를 입력해서 확인을 합니다. <img src="https://t1.daumcdn.net/cfile/cafe/24398B3D55B6FA1424" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="285" width="285" exif="{}" data-filename="wea4.jpg" style="clear:none;float:none;" id="A_24398B3D55B6FA1424D8CF"/> 어떠한 식으로 받아오는지를 확인했으니 이제 each문을 돌려서 하나하나의 데이터를 받아오고오늘 날짜와 비교를 하여 날씨를 뿌려줍니다. <img src="https://t1.daumcdn.net/cfile/cafe/237DB53955B6FFA332" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="1024" width="1024" exif="{}" data-filename="wea5.jpg" style="clear:none;float:none;" id="A_237DB53955B6FFA3327CD3"/> ----------------------------------------------------------------------$(document).ready(function(){ $.ajax({ url:"http://api.openweathermap.org/data/2.5/forecast?lat=37.56826&lon=126.977829", dataType:"json", success:function(city){ console.log(city); $.each(city.list, function(key) { // 오늘 날짜 구하는 코딩 var now = new Date();    var year= now.getFullYear();    var mon = (now.getMonth()+1)>9 ? ''+(now.getMonth()+1) : '0'+(now.getMonth()+1);    var day = now.getDate()>9 ? ''+now.getDate() : '0'+now.getDate();    var today = year + '-' + mon + '-' + day;    var week = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'); // 요일        // api에서 받는 날짜    var date = city.list[key].dt_txt.substring(0,10)    var time = city.list[key].dt_txt.substring(11,13)    var yoil = new Date(date).getDay(); // 받아 오는 날짜의 요일 일-0 월-1 화-2....    var todayLabel = week[yoil];        // 최고온도 절대 온도로 받아 옴으로    var max=(Math.round(city.list[key].main.temp_max) - 273)+"˚C";    // 날씨    var weath = city.list[key].weather[0].description;        if(date === today) {     if(time==='12'){     if (weath === 'sky is clear') {     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'few clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'scattered clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'broken clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'overcast clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'shower rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'light rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'moderate rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'Rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'Thunderstorm'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'snow'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'mist'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     }     }    } else {     if(time==='12'){     if (weath === 'sky is clear') {     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'few clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'scattered clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'broken clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'overcast clouds'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'shower rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'light rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'moderate rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'Rain'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'Thunderstorm'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'snow'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     } else if(weath === 'mist'){     $("#weather").append(date + "의 날씨는 " + weath + " 최고 온도는 " + max+" ");     }     }    } }); } });})---------------------------------------------------------------------------------------------- 시간이 00, 03, 06, 09, 12, 15, 18, 21 으로 세분화 되기 때문에 if문으로 time을 잡아서 쓰시면 됩니다. <img src="https://t1.daumcdn.net/cfile/cafe/2465443655B702532E" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="1024" width="1024" exif="{}" data-filename="wea6.jpg" style="clear:none;float:none;" id="A_2465443655B702532EA06E"/>이러한 식의 화면이 나오게 되는데 멋이 없으므로 인터넷에서 css파일을 받아와서 적용을 해줍니다. <a href="http://cssdeck.com/search/?q=weather" target="_blank" class="tx-link">http://cssdeck.com/search/?q=weather</a> <img src="https://t1.daumcdn.net/cfile/cafe/25094C4B55B70ECA1D" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="1024" exif="{}" data-filename="wea8.jpg" style="clear:none;float:none;" id="A_25094C4B55B70ECA1DD91B"/> <img src="https://t1.daumcdn.net/cfile/cafe/221D5E4A55B70F581B" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="1024" exif="{}" data-filename="wea9.jpg" style="clear:none;float:none;" id="A_221D5E4A55B70F581BFE9E"/>이곳을 보면 css 소스가 있는데 거기 있는 것을 가져와서 css파일을 저장한다음 적용시켜주면 됩니다. -----------------------------------------------------------------------------------    if(date === today) {     if(time === '12') {     if (weath === 'sky is clear') {     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon sun'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'few clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'scattered clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'broken clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'overcast clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'shower rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'light rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'moderate rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'Rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'Thunderstorm'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'snow'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon snow2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'mist'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     }     }    } else {     if(time === '12') {     if (weath === 'sky is clear') {     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon sun'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'few clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'scattered clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'broken clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'overcast clouds'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'shower rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'light rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'moderate rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'Rain'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'Thunderstorm'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon rain2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'snow'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon snow2'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     } else if(weath === 'mist'){     $("#weather").append("<div style='float:left;' class='weather-card'><div class='weather-icon cloud'></div><h1>"+max+"</h1>"+todayLabel+"</div>");     }     }    }------------------------------------------------------------------------------------------ <img src="https://t1.daumcdn.net/cfile/cafe/2760513F55B703E208" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="1024" width="1024" exif="{}" data-filename="wea7.jpg" style="clear:none;float:none;" id="A_2760513F55B703E208B5BF"/> 이런식으로 나오게 됩니다.