NXBlog :: #49. 구글 날씨 API 사용하기

Post Subject :: #49. 구글 날씨 API 사용하기 [ASP.NET]

작성일 : 2007-08-02 오전 9:59:36 | 조회 : 17628

최지훈

이번 포스트에서는 구글에서 제공하는 날씨에 관련된 API를 사용하여 화면에 출력하는 방법을 설명하도록 하겠습니다.

이 포스트는 Animaonline's Nerdy Corner의 포스트를 참고로 만들었습니다.

구글에서 제공하는 날씨 API를 호출하는 방법은 다음과 같이 간단합니다.

http://www.google.co.kr/ig/api?weather=seoul

한 눈에 보이다시피, weather라는 쿼리스트링 변수에 조회하려고 하는 도시를 입력해주시면 됩니다. 다만, 사람들이 많이 살고 있는 큰 도시만 가능하며, 다른 국가의 도시를 조회할 경우에는 www.google.co.kr 이 아닌 www.google.com 으로 해주시면, 자동적으로 그 나라의 도메인으로 변경되어 조회하려고 하는 도시의 정보를 가져올 수 있습니다.

위에서 설명드린 URL을 바탕으로 쿼리를 하면 다음과 같은 XML 형식이 화면에 출력됩니다.

그림 1. 날씨 정보가 포함된 XML

여기에서 날씨 정보에 관련된 항목은 <current_conditions>입니다. 나머지 항목은 필요할 경우 사용하면 되겠습니다.

이제, 서울과 부산의 날씨 정보를 출력하도록 하겠습니다. 웹 폼에 다음과 같이 코드를 작성합니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Weather.aspx.cs" Inherits="Weather" Debug="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

Weather Info

</td>

</tr>

서울의 날씨

</td>

<asp:Image ID="imgSeoul" runat="server" ImageAlign="absMiddle" /><br />

현재 상태 : <asp:Label ID="lblSeoulCondition" runat="server"></asp:Label><br />

섭씨 온도 : <asp:Label ID="lblSeoulTempf" runat="server"></asp:Label><br />

화씨 온도 : <asp:Label ID="lblSeoulTempc" runat="server"></asp:Label><br />

<asp:Label ID="lblSeoulHumidity" runat="server"></asp:Label><br />

<asp:Label ID="lblSeoulWind" runat="server"></asp:Label>

</td>

</tr>

</td>

</tr>

부산의 날씨

</td>

<asp:Image ID="imgPusan" runat="server" ImageAlign="absMiddle" /><br />

현재 상태 : <asp:Label ID="lblPusanCondition" runat="server"></asp:Label><br />

섭씨 온도 : <asp:Label ID="lblPusanTempf" runat="server"></asp:Label><br />

화씨 온도 : <asp:Label ID="lblPusanTempc" runat="server"></asp:Label><br />

<asp:Label ID="lblPusanHumidity" runat="server"></asp:Label><br />

<asp:Label ID="lblPusanWind" runat="server"></asp:Label>

</td>

</tr>

</td>

</tr>

</table>

</form>

</body>

</html>

웹 폼에서 서울과 부산의 날씨에 대한 정보를 Image 컨트롤과 Label 컨트롤을 사용하여 화면에 보여지도록 코드를 작성하였습니다. 다음으로는 코드 비하인드의 코드입니다.

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Xml;

using System.Net;

/*---------------------------------------------------------------------------------------------------

* Creator : Neostyx

* CreateDate : 2007-07-27

* HomePage : http://www.neostyx.net

* Goal : Gaining the Weather of Local's City

---------------------------------------------------------------------------------------------------*/

public partial class Weather : System.Web.UI.Page

{

private const string _googleUrl = "http://www.google.co.kr";

protected void Page_Load(object sender, EventArgs e)

{

GetWeatherData(_googleUrl + "/ig/api?weather=seoul", imgSeoul, lblSeoulCondition, lblSeoulTempf, lblSeoulTempc, lblSeoulHumidity, lblSeoulWind);

GetWeatherData(_googleUrl + "/ig/api?weather=pusan", imgPusan, lblPusanCondition, lblPusanTempf, lblPusanTempc, lblPusanHumidity, lblPusanWind);

}

private void GetWeatherData(string strCityUrl, Image imgWeather, Label lblCityCondition, Label lblCityTempf, Label lblCityTempc, Label lblCityHumidity, Label lblCityWind)

{

HttpWebRequest httpReq = (HttpWebRequest)WebRequest.Create(String.Format(strCityUrl));

httpReq.UserAgent = Request.ServerVariables["HTTP_USER_AGENT"].ToString();

HttpWebResponse httpRes = (HttpWebResponse)httpReq.GetResponse();

XmlDocument xmlDoc = new XmlDocument();

xmlDoc.Load(httpRes.GetResponseStream());

httpRes.Close();

XmlNode xWeatherNode = xmlDoc.SelectSingleNode("xml_api_reply/weather/current_conditions");

if (xWeatherNode != null)

{

imgWeather.ImageUrl = _googleUrl + xWeatherNode.SelectSingleNode("icon").Attributes["data"].Value;

lblCityCondition.Text = xWeatherNode.SelectSingleNode("condition").Attributes["data"].Value;

lblCityTempf.Text = xWeatherNode.SelectSingleNode("temp_f").Attributes["data"].Value;

lblCityTempc.Text = xWeatherNode.SelectSingleNode("temp_c").Attributes["data"].Value;

lblCityHumidity.Text = xWeatherNode.SelectSingleNode("humidity").Attributes["data"].Value;

lblCityWind.Text = ReplaceFromHanToEng(xWeatherNode.SelectSingleNode("wind_condition").Attributes["data"].Value);

}

xmlDoc = null;

}

private string ReplaceFromHanToEng(string strEng)

{

strEng = strEng.Replace("N", "북");

strEng = strEng.Replace("E", "동");

strEng = strEng.Replace("W", "서");

strEng = strEng.Replace("S", "동");

return strEng;

}

코드에 대한 설명을 간단히 드리도록 하겠습니다.

HttpWebRequest, HttpWebResponse 클래스를 사용하기 위해 System.Net 네임스페이스와 XmlDocument 클래스를 사용하기 위해 System.Xml 클래스를 using 문에 추가하였습니다.

using System.Xml;

using System.Net;

그리고 상수 _googleUrl에는 구글의 기본 주소를 할당한 후 Load 이벤트에서 GetWeatherData() 메소드를 호출하여 각각 서울과 부산의 날씨 정보를 구하도록 하였습니다.

private const string _googleUrl = "http://www.google.co.kr";

protected void Page_Load(object sender, EventArgs e)

{

GetWeatherData(_googleUrl + "/ig/api?weather=seoul", imgSeoul, lblSeoulCondition, lblSeoulTempf, lblSeoulTempc, lblSeoulHumidity, lblSeoulWind);

GetWeatherData(_googleUrl + "/ig/api?weather=pusan", imgPusan, lblPusanCondition, lblPusanTempf, lblPusanTempc, lblPusanHumidity, lblPusanWind);

}

GetWeatherData() 메소드에서는 HttpWebRequest 클래스와 HttpWebResponse 클래스를 이용하여 날씨에 대한 정보를 받은 후에, XmlDocument에 응답받은 스트림을 넣습니다.

HttpWebRequest httpReq = (HttpWebRequest)WebRequest.Create(String.Format(strCityUrl));

httpReq.UserAgent = Request.ServerVariables["HTTP_USER_AGENT"].ToString();

HttpWebResponse httpRes = (HttpWebResponse)httpReq.GetResponse();

XmlDocument xmlDoc = new XmlDocument();

xmlDoc.Load(httpRes.GetResponseStream());

httpRes.Close();

그러면, XmlDocument에는 응답받은 스트림인 Xml 정보가 담기게 됩니다. 그 XmlDocument 중 필요한 부분인 "current_conditions"를 구하기 위해 XmlDocument.SelectSingleNode를 통하여 원하는 XmlNode만을 추려냅니다.

XmlNode xWeatherNode = xmlDoc.SelectSingleNode("xml_api_reply/weather/current_conditions");

그리고, 추려낸 XmlNode가 Null이 아닐 경우에 Xml의 정보는 다음과 같습니다.

<current_conditions>

<temp_f data="84" />

<temp_c data="29" />

<wind_condition data="바람: SW풍, 19 km/h" />

</current_conditions>

이 때, XmlNode에서 필요한 Node를 SelectSingleNode 메소드를 이용하여 값을 구한 후 각각의 Image 컨트롤과 Label 컨트롤에 할당시킵니다.

if (xWeatherNode != null)

{

imgWeather.ImageUrl = _googleUrl + xWeatherNode.SelectSingleNode("icon").Attributes["data"].Value;

lblCityCondition.Text = xWeatherNode.SelectSingleNode("condition").Attributes["data"].Value;

lblCityTempf.Text = xWeatherNode.SelectSingleNode("temp_f").Attributes["data"].Value;

lblCityTempc.Text = xWeatherNode.SelectSingleNode("temp_c").Attributes["data"].Value;

lblCityHumidity.Text = xWeatherNode.SelectSingleNode("humidity").Attributes["data"].Value;

lblCityWind.Text = ReplaceFromHanToEng(xWeatherNode.SelectSingleNode("wind_condition").Attributes["data"].Value);

}

ReplaceFromHanToEng() 메소드는 구글에서 넘겨주는 데이터가 SW풍, NW풍 과 같이 영문으로 방향을 넘겨주기 때문에 한글로 변환하여 보여지게 하기 위한 메소드입니다.

이제, 웹 브라우저를 실행시키면 서울과 부산의 날씨 정보가 나타나게 됩니다.

그림 2. 서울과 부산의 날씨 정보

어떻습니까? 간단한 코드만으로도 우리는 원하는 국가의 날씨 정보를 화면에 출력할 수 있습니다.

이상으로 구글에서 제공하는 날씨 API를 가지고 화면에 출력하는 방법에 대해서 설명드렸습니다.

만약, 다음과 같이 화면을 출력하려면 어떻게 해야 할까요???

그림 3. 오늘/내일/모레의 날씨

위에서 설명드린 소스를 바탕으로 한번 코드를 작성해 보시기 바랍니다.
감사합니다. ^^;;

포스팅을 마치며... ----------------------------------------------------------------------------
정말 간단하게 도시의 날씨 정보를 화면에 출력할 수가 있네요. 조만간 홈페이지에 붙여야겠습니다. 구글에서 유용한 API들을 많이 제공하는데, 구글에서 제공하는 API들에 대해서 좀 더 깊숙하게 알아보아야 하겠습니다.

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

이전 포스트 :: #48. Page.ClientScript 메소드
다음 포스트 :: #50. 간단한 RSS 피드 구축하기

# Commented By :: nkokon At 8/2/2007 10:51:08 AM [M] [D]

요즘 웹API쪽에 관심을 가지고 있었는데 도움이 되었습니다 ^0^

# Commented By :: 엔틱스 At 8/2/2007 11:28:32 AM [M] [D]

앗, 도움이 되었다니 저도 정말 기쁩니다. ^^;;
저도 웹 API에 슬슬 관심이 가네요...^^

# Commented By :: decoder At 8/2/2007 12:53:02 PM [M] [D]

오우! 새로운걸 알았네요. ^^;
감사합니다. :)

# Commented By :: 엔틱스 At 8/2/2007 1:45:02 PM [M] [D]

아, 오랜만입니다. ^^;;
저도 가끔씩 방문하고 있습니다.
Tistory 알리미는 정말 훌륭한 것 같네요 ^^;;

# Commented By :: hagis At 8/6/2007 2:12:28 AM [D]

오늘/내일/모레 소스도 좀 공개해주세요~~~
forecast_conditions 이게 여러개던데....어떻게 구분하는지요?

# Commented By :: hagis At 8/6/2007 2:13:19 AM [D]

sql2005에 문제가 있는거 같아서 며칠내로 엎을 생각입니다. 흑~~

# Commented By :: 엔틱스 At 8/6/2007 9:51:46 AM [M] [D]

아, 그러시군요... ^^;; SQL Server 2005의 설치가 이번엔 잘 되시길 바랍니다.

오늘/내일/모레와 같이 forecast_conditions 요소가 여러개가 있을 경우에는 SelectSingleNode가 아닌 SelectNodes를 이용하시면 XmlNodeList로 받을 수가 있습니다.

예를 들면, XmlNodeList xNodeList = xmlDoc.SelectNodes("xml_api_reply/weather/forecast_conditions");

그 후에, 이 배열을 foreach문이나 for 문을 사용하여 하나하나의 XmlNode로 추출한 후 그 값을 사용하시면 됩니다.

foreach (XmlNode xNode in xNodeList)
{
string strDate = xNode.SelectSingNode("day_of_week").Attributes["data"].Value;
}

이런 식으로 원하시는 값들을 XmlDocument에서 찾으시면 됩니다. ^^;;

# Commented By :: vks At 8/14/2007 10:41:54 AM [D]

페이지로드시 오늘,내일,내일모레 를 메소드호출하게끔 3개를 만들어 놨는데 각각메소드에서 foreach를하면 3개다 맨마지막것만 찍히네요! if문으로 day_of_week.Attributes["data"].Value == "오늘" 이런식으로 if줘도 안되네요 힌트좀주세요

# Commented By :: 엔틱스 At 8/16/2007 3:58:06 PM [M] [D]

아, 네 ^^. 답변이 늦었습니다.
위에 제가 답변한 것과 같이
XmlNodeList xNodeList = xmlDoc.SelectNodes("xml_api_reply/weather/forecast_conditions");
와 같은 식으로 한다면, 오늘/내일/모레/내일 모레의 날씨가 차례로 XmlNodeList에 담기게 됩니다.
즉, 오늘의 날씨를 구한다고 한다면, xNodeList의 첫번째에 오늘의 날씨 정보가 담겨 있으므로,
XmlNode xToday = xNodeList.Items(0);
이런 식으로 찾으시면 됩니다.
마찬가지로, 내일의 날씨를 화면에 출력하고자 한다면
XmlNode xNextDay = xNodeList.Items(1);
과 같은 식으로 하시면 됩니다. ^^;;

# Commented By :: 베오울프 At 11/25/2007 5:11:45 PM [M] [D]

도움 많이 됐습니다.
감사합니다. ^^

# Commented By :: 최지훈 At 11/25/2007 8:35:05 PM [M] [D]

넵, 도움이 되었다니 다행이네요^^;;
열심히 즐프하세요~

# Commented By :: 아메 At 12/16/2007 12:59:43 AM [M] [D]

좋은 정보 감사합니다 ^^ 날씨를 보여주는 툴?? 같은걸 제작하려면 저 국가/도시의 목록을 받아와야 하는데.. 구글api가 제공하는 국가와 날씨의 정보를 어떻게 알아와야 할지.. ㅜ_ㅜ 혹시 알고계신다면 도와주세요 ㅎㅎ 잘보고 갑니다 ㅎ

# Commented By :: 최지훈 At 12/16/2007 4:59:48 AM [M] [D]

네, 아메님 안녕하세요 ^^;;
저 역시도, 위에서 설명한 URL에 들어가는 도시 목록은 잘 모르겠네요. ^^;;
다만, 구글에서 유사한 가젯을 제공하고 있으니, 참고하셔도 될 것 같습니다.

http://www.google.co.kr/ig/directory?url=builtin_weather.xml

좀 더 많은 나라와 도시의 목록을 제공하고 있네요. 다만, 제가 위에서 설명한 형식과 다른 형태이므로, 분석을 좀 하셔야 할 것 같습니다. ^^;;

# Commented By :: 여두원 At 5/14/2008 7:41:20 PM [M] [D]

잘보고가요.^^

# Commented By :: 최지훈 At 5/15/2008 1:51:39 PM [M] [D]

넵. ^^;; 종종 놀러오세요~

# Commented By :: kwon At 7/28/2008 6:48:19 PM [M] [D]

# Commented By :: 박용욱 At 8/26/2008 9:01:06 PM [M] [D]

안녕하세요~!
님의 구글 날씨 API 를 이용하는 강좌 잘 봤습니다. ^_^
많은 도움도 되었구요.
근데 님의 강좌 마지막 부분에서 오늘/내일/모레 부분의 구현부분에서..
이해가 잘않되는 부분이 많아서요.
이번에 처음으로 구글 API를 만지는거라 이것저것 헷갈리는 부분도 많구요.
죄송하지만 오늘/내일/모레 부분의 소스를 좀 받아 볼 수 있는 지 궁굼해서 이렇게 남김니다.
닷넷을 배운지가 얼마 되지않아 소스비하인드 부분도 아직 익숙치 않아서...
아무튼 부탁드립니다. 수고하세요~!

# Commented By :: 최지훈 At 9/1/2008 9:39:00 AM [M] [D]

네. 값을 읽어오는 부분은 동일하고요..
"forecast_conditions" 요소를 사용하면 원하시는 부분을 구현할 수 있습니다.

XmlNodeList xNodeList = xmlDoc.SelectNodes("xml_api_reply/weather/forecast_conditions");

그 후에는 foreach문을 사용하여 값을 사용하시면 됩니다.

foreach (XmlNode xNode in xNodeList)
{
Response.Write(xNode.SelectSingleNode("day_of_week").Attributes["data"].Value + "<br/ >");
Response.Write("최저 온도 : " + xNode.SelectSingleNode("low").Attributes["data"].Value + "<br/ >");
Response.Write("최고 온도 : " + xNode.SelectSingleNode("high").Attributes["data"].Value + "<br/ >");
Response.Write(xNode.SelectSingleNode("icon").Attributes["data"].Value + "<br/ >");
Response.Write(xNode.SelectSingleNode("condition").Attributes["data"].Value + "<br/ ><hr/ >");
}

오늘 하루도 즐거운 하루 되세욥... ^^;;

# Commented By :: 블랙커피 At 9/4/2008 2:11:38 PM [D]

잘보고 갑니다 ^^

# Commented By :: 최지훈 At 9/5/2008 11:31:24 AM [M] [D]

넵. 도움이 되었다니 다행입니다.
행복한 하루 되세요. ^^;;

# Commented By :: 송선우 At 10/20/2008 1:59:02 PM [D]

주옥같은 내용입니다
잘 쓰겠습니다 ^^

# Commented By :: 이희철 At 10/23/2008 7:56:30 AM [M] [D]

내용 정말 잘봤습니다. 하지만 궁금한게 있는데요, 네이버 MAP API는 키가 필요하다는데, 날씨 API는 키 없이 사용 가능한지 궁금합니다. 그냥 단순히 URL만 가지고 해보니까, "정보를 사용할 수 없다"고 하는군요..

# Commented By :: 최지훈 At 10/23/2008 9:48:08 PM [M] [D]

송선우 :: 네. 감사합니다. ^^;; 잘 사용하실 것이라니 저도 기쁘네요. ^^;;

이희철 :: 위에 정의된 URL만 호출하시면 XML로 날씨 데이터를 받아올 수 있습니다. 제가 확인해본 결과로도 아직까지는 날씨 데이터를 제공하고 있는데욥. ^^;;

# Commented By :: 봉달이 At 11/25/2008 2:52:38 PM [M] [D]

# Commented By :: 봉달이 At 11/25/2008 2:55:30 PM [M] [D]