WPF2008/08/13 19:58

Google Open API를 사용한 Weather Board구현

이번 시간에는 Google Open API중 날씨 API를 사용하여 한주간의 날씨를 확일 할 수 있는 Weather Board를 구현해보도록 하겠습니다. 이번 프로젝트 역시 DataBinding 기술을 사용하여 구현되지만 XmlDataProvider를 사용하여 XML Document에서 DataBinding을 적용하는 방법에서 조금 다를 수 있습니다. 구현 결과물은 아래와 같으며 Application이 시작 될 때 Google에서 제공하는 날씨정보를 기반으로 내용이 채워 지게 됩니다.

사용자 삽입 이미지


Google Open API에서 제공하는 날씨 정보를 제공하는 URL은 아래와 같으며 접속해보시면 아시겠지만, 데이터가 XML형태로 제공되는 것을 확인 하실 수 있습니다.

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

실제 우리가 구현할 내용에 현재 온도나 바람 방향 등의 정보는 없지만, 실제로는 최저기온, 최고기온, 바람방향 등의 정보를 제공하며 주소 뒤에 seoul이라고 표시된 부분을 아래와 같이 원하는 지역의 이름으로 입력하시면 해당 지역의 현재 날씨를 가져 올 수 있습니다.

이제 본격적으로 구현에 들어가보도록 하겠습니다. 아래는 소스코드입니다.

XAML

<Window x:Class="Weatherboard.Window1"
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:w="clr-namespace:Weatherboard"
Title="WPF Weather Board" Height="400" Width="500">
<Window.Resources>
<ImageBrush ImageSource="Background.jpg" x:Key="Background"/>
<XmlDataProvider Source="http://www.google.co.kr/ig/api?weather=seoul"
XPath="xml_api_reply/weather" x:Key="Weather"/>
<w:GoogleImageConverter x:Key="GoogleImageConverter"/>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="11"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="20"/>
</Style>
<Style TargetType="Image">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
</Style>
</Window.Resources>
<Grid Background="{StaticResource Background}" Width="420" Height="300">

<Image Source="{Binding Source={StaticResource Weather}, XPath=current_conditions/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="68,0,0,94" />
<Image Source="{Binding Source={StaticResource Weather}, XPath=forecast_conditions[1]/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="129,0,0,94" />
<Image Source="{Binding Source={StaticResource Weather}, XPath=forecast_conditions[2]/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="190,0,190,94"/>
<Image Source="{Binding Source={StaticResource Weather}, XPath=forecast_conditions[3]/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="251,0,0,94" />
<Image Source="{Binding Source={StaticResource Weather}, XPath=forecast_conditions[4]/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="312,0,0,94" />


<TextBlock Text="{Binding Source={StaticResource Weather},
XPath=current_conditions/condition/@data}" Margin="68,0,0,72" />
<TextBlock Text="{Binding Source={StaticResource Weather},
XPath=forecast_conditions[1]/condition/@data}" Margin="129,0,0,72" />
<TextBlock Text="{Binding Source={StaticResource Weather},
XPath=forecast_conditions[2]/condition/@data}" Margin="190,0,190,72" />
<TextBlock Text="{Binding Source={StaticResource Weather},
XPath=forecast_conditions[3]/condition/@data}" Margin="251,0,0,72" />
<TextBlock Text="{Binding Source={StaticResource Weather},
XPath=forecast_conditions[4]/condition/@data}" Margin="312,0,0,72" />

</Grid>

</Window>

C#

[ValueConversion(typeof(String), typeof(String))]
public class GoogleImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{

return "http://www.google.co.kr/ig" + (String)value;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}

먼저 XAML코드부터 보겠습니다. 중요한 부분은 노란색으로 색을 칠해놨으니 그 부분을 중점적으로 설명하도록 하겠습니다.

<XmlDataProvider Source="http://www.google.co.kr/ig/api?weather=seoul" XPath="xml_api_reply/weather" x:Key="Weather"/>

XMLDataProvider는 간단하게 설명해서 XAML에서 DataBinding을 가능하게 하기 위한 도구로서 (MSDN에는 데이터 바인딩을 위해 XML에 대한 선언적 액세스를 활성화하는 것 이라 설명되있습니다.) Source Property에 XML Document의 URL을 입력합니다. 여기에 앞에서 설명했던 WeatherAPI URL을 입력했습니다. 그리고 XPath에 접근할 XML경로를 입력합니다. 우리가 사용할 WeatherAPI는 아래와 같은 구조로 되어있으며,

사용자 삽입 이미지


실제 데이터가 Weather안에 저장되어 있으므로 xml_api_reply/weather라고 XPath를 지정했습니다. XPath는 단순히 경로뿐 아니라 간단한 쿼리 까지 적용이 가능하여 매우 효과적으로 사용 할 수 있습니다. (XPath에 대한 자세한 내용은 MSDN을 참고하시기 바랍니다.)

그리고 이제 날씨정보를 표시하기 위한 Image 객체를 생성하고 Image객체의 Source를 Weather API에서 제공받는 Icon Image로 Binding 시켜줍니다. (icon의 data Attribute에 저장되어있습니다.)

<Image Source="{Binding Source={StaticResource Weather}, XPath=current_conditions/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="68,0,0,94" />

Binding Source는 위에서 선언한 XMLDataProvider가 됩니다. 그리고 여기서도 XPath를 지정할 수 있는데, XmlDataProvider에서 지정한 Path이후만 작성하면 됩니다. 만약 루트부터 Path를 입력하고자 한다면 아래와 같이 표현 할 수 있습니다.

//xml_api_reply_weather/current_conditions/icon/@data

여기서 한가지 고려 해야 할 사항이 WeatherAPI에서 제공해주는 Icon Image가 아래와 같이 절대 경로가 아닌 상대경로로 입력되어 있다는 점인데,

사용자 삽입 이미지

이 때문에 직접 ValueConverter를 구현하여 앞부분 서버 경로를 입력해주셔야 합니다. ValueConvert를 구현한 부분이 C#으로 된 부분이며 Convert를 Resource로 등록하여 사용하고 있습니다. 이후 내용은 반복적이기 때문에 각각의 아이템에 대한 설명은 생략하도록 하겠습니다.
사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 곡스
TAG , , , ,
Trackback 0 Comment 0