MS 테크데이즈 사이트 오픈
세미나 소식&내용 / 2010. 3. 30. 13:24
정말 유용한 정보들이 많아요^^
[Silverlight 3][월간 Web. 2010.02] 실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
프로그래밍/05.Silverlight / 2010. 3. 29. 12:31
이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
ㅁ 플리커(Flickr) 인증된 사진 읽어 오기
위에서 로그인 인증이 끝났다고 가정하고 내 사진을 읽어 오는 내용을 확인 해보도록 하자.
|
public class FlickrAPIHelper { // Flickr API 기본 URL private readonly string BASEURL = "http://api.flickr.com/services";
// Flickr API Key private readonly string APIKEY = "942f52t78731e43193733e57a9f3c281";
// Flickr API Password private readonly string SECRET = "7deb809rd20t748c";
// 내 포토 반환 URI를 반환합니다. public string GetMyPhoto(string token, string nsID, int currentPage, int count) { string temp = string.Format("{0}api_key{1}auth_token{2}extrasowner_name,date_upload,tagsmethodflickr.photos.searchpage{3}per_page{4}user_id{5}", this.SECRET, this.APIKEY, token, currentPage.ToString(), count.ToString(), nsID); string apiSig = GetMd5String(temp); string uri = string.Format("{0}/rest/?method=flickr.photos.search&api_key={1}&page={2}&per_page={3}&extras=owner_name,date_upload,tags&auth_token={4}&user_id={5}&api_sig={6}", this.BASEURL, this.APIKEY, currentPage.ToString(), count.ToString(), token, nsID, apiSig); return uri; } private string GetMd5String(string value) { return MD5.GetMd5String(value); } } |
[코드 5] FlickrAPIHelper 클래스
필자는 FlickrAPIHelper 클래스를 만들어서 사용하였다. GetMyPhoto 메소드는 플리커 API를 호출하기 위한 URL를 만들어 주는 부분이다. GetMyPhoto 메소드의 파라미터는 token(로그인 인증 토큰), nsID(로그인 인증), currentPage(읽어 올 페이지), count(읽어 올 데이터 수)로 구성이 되어 있다. [코드 5] 메소드를 통해서 반환 받은 URL를 호출해 보면 아래와 같은 XML 데이터를 받아 오게 되는데 이를 LINQ to XML로 파싱해서 데이터 클래스에 채워서 뷰에 바인딩 걸어 주면 된다.
|
<?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok"> <photos page="1" pages="1" perpage="20" total="12"> <photo id="3923974847" owner="36183292@N03" secret="29d7979bc9" server="3424" farm="4" title="안기승선생님" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061170" tags="" /> <photo id="3924760930" owner="36183292@N03" secret="ff6932aae5" server="2576" farm="3" title="펄마스터 커스텀" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061167" tags="" /> <photo id="3924760854" owner="36183292@N03" secret="bbef6bfa81" server="2560" farm="3" title="연주" ispublic="1" isfriend="0" isfamily="0" ownername="kdw8751" dateupload="1253061165" tags="wooks" /> </photos> </rsp> |
[코드 6] 플리커 API flickr.photos.search 반환 XML 데이터
|
private IList<FlickrPhotoModel> GetFlickrPhotoModels(string p) { XDocument xDoc = XDocument.Parse(p);
var val = from item in xDoc.Descendants("photo") select new { PhotoId = item.Attribute("id"), OwnerId = item.Attribute("owner"), Secret = item.Attribute("secret"), Server = item.Attribute("server"), Farm = item.Attribute("farm"), Title = item.Attribute("title"), Ownername = item.Attribute("ownername"), Dateupload = item.Attribute("dateupload"), Tags = item.Attribute("tags") };
List<FlickrPhotoModel> result = new List<FlickrPhotoModel>();
foreach (var item in val) { FlickrPhotoModel photoModel = new FlickrPhotoModel() { PhotoID = item.PhotoId.Value, Dateupload = item.Dateupload.Value, Farm = item.Farm.Value, OwnerID = item.OwnerId.Value, Ownername = item.Ownername.Value, Secret = item.Secret.Value, Server = item.Server.Value, Tags = item.Tags.Value, Title = item.Title.Value }; result.Add(photoModel); }
return result; } |
[코드 7] LINQ to XML로 XML 데이터 파싱
위 코드 내용은 [코드 6]의 XML 데이터를 받아서 [코드 7]에서 FlickrPhotoModel 클래스(데이터 클래스)에 값을 채워주는 내용이다. LINQ to XML은 DB 쿼리를 만져 보신 분들이라면 쉽게 이해하고 사용 할 수 있을 것이라 생각이 든다. [코드 7]은 반환 값이 IList<FlickrPhotoModel>로 뷰모델에서 호출해서, 반환 데이터를 받아 ListBox 컨트롤에 바인딩이 되도록 짜놓았다.
(아래 MainViewModel 클래스 참고)
|
namespace Flickr.MyPhotoGallery { public class MainViewModel : ViewModelBase { …중간 생략…
private IList<FlickrPhotoModel> _photoSource; public IList<FlickrPhotoModel> PhotoSource { get { return _photoSource; } set { _photoSource = value; OnPropertyChanged("PhotoSource"); } } public InstantCommand<object> SelectionChangedCommand { get; private set; }
public MainViewModel() { } …중간 생략… } } |
[코드 8] MainViewModel 클래스(Class)
PhotoSource 는 뷰에 ListBox 컨트롤(Control)이랑 바인딩이 걸려 있는 상태여서 뷰모델의 데이터(모델)가 변경이 되면 ListBox의 데이터도 변경이 된다.
[그림 5] 포토 리스트 화면
위 그림처럼까지 나오게 했다면 이제 상세정보 보여주는 거는 정말 쉬울 것이다.
[코드 8]에서 보면 SelectionChangedCommand를 만들어 준 것을 보았을 것이다. 이는 위에서 LoginCommand와 같은 방법으로 ListBox 컨트롤에 붙어 넣어두고 EventName을 SelectionChanged로 설정해주자. 그렇게 되면 리스트박스에서 Selection이 일어 날 때 마다 해당 커맨드(SelectionChangedCommand)가 발생해서 뷰모델에서 선택된 데이터가 들어 올것인데, 이를 받아서 포토(사진)을 크게 보여주면 되기 때문에 상세 뷰도 쉽게 만들수 있을 것이다. 커맨드 파라미터 설정은 위에서 따로 설명하지 않았었데, 간단하다. Command 설정 밑에 CommandParameter를 설정할수 있도록 되어 있다.
[그림 6] CommandParameter 설정
Element Property를 선택 해당 리스트박스(ListBox)컨트롤을 선택후 파라미터를 SelectedItem으로 선택해주면 해당 커맨드가 일어났을 때 파라미터로 SelectedItem을 받을수 있게 되는 것이다.이렇게 받은 데이터를 상세 뷰에 바인딩 시켜주면 간단하게 상세 뷰페이지도 끝나는 것이다.
지금까지 내용이 처음 실버라이트를 접하신 분들에게는 약간은 힘들고, 무슨소리 하는 것 인지 어렵게 느껴졌을 수도 있을 것 같다. 하지만, 하나하나 직접 손으로 만들어 봐야지 실버라이트을 배우는데 수월할 것이다. 물론, 사람마다 배움의 방법은 다르겠지만 일반적으로 직접 만들어보고 익힌 것이 나중에 잊어버리지 않고 내 것이 된다는 것은 공감 할 것이다. 또한, MVVM , Command 패턴은 현재 실무에서도 많이 사용하고 있기 때문에 어떤 회사에 들어가건, 어떤 프로젝트를 맡건 간에 정말 유용하게 사용될 것이라고 필자는 확신한다.
Flickr.MyPhotoGallery.zip[Silverlight 3][월간 Web. 2010.02] 실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
프로그래밍/05.Silverlight / 2010. 3. 29. 12:28
이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
ㅁ Flickr API 키 발급 받자.
플리커(Flickr) API를 받는 방법은 간단하다. 기본적으로 우선 플리커에 가입을 해야 하며, 로그인후 API관련 페이지로 이동해서 키 발급을 신청하면 된다. (http://api.flickr.com/services/api)
[그림1] 플리커(Flickr) API 관련 페이지
위 그림은 플리커 API관련 페이지이다. App제작 링크를 클릭해서 넘어가면 API키를 발급 받을 수 있는 링크가 나올 것인데, 그 링크를 클릭해서 키 발급 절차에 따라 내용을 작성하면 정상적으로 플리커 API키를 발급 받을 수 있을 것이다. (App 제작 >> API 키 요청 >> 항목 작성)
ㅁ 프로젝트 구성 및 UI구성
- 프로젝트 구성
키 발급이 끝났다면 이제 VS2008(VisualStudio2008)를 이용해서 실버라이트 프로젝트를 하나 만들자. 프로젝트 이름은 마음대로 짖도록 한다. (필자는 Flickr.MyPhotoGallery로 프로젝트를 만들었다) 그런 다음 위에서 설명했던 휴즈플로우(HugeFlow) CommandPattern 어셈블리(.dll)파일을 추가 해주어야 한다. 그리고 플리커 로그인은 로그인(인증)관련 파라미터(Parameter)를 넘겨줄 때 MD5로 암호화해서 보내줘야 하기 때문에 이를 위한 어셈블리파일을 추가해 주어야 한다. 어셈블리 파일은 아래 주소를 통해서 다운로드 받을 수 있을 것이다.
(http://cid-22bbf65162c68537.skydrive.live.com/self.aspx/.Public/Assemblies.zip 또는 위 블로그 주소 참고)
[그림 2] 프로젝트 구조
위 [그림 2]는 프로젝트 파일구조를 보여주는 모습이다. 위에서 참조파일을 다운받았다면 위 그림에 References폴더와 같이 참조파일을 추가해 주자. 그리고 나머지 파일들은 이름만 봐도 대충 어떤 내용인지 짐작 할 수 있을 것이라 생각이 든다. 일단, 이렇게 구성이 되어 있구나 하고 봐주길 바란다.
- UI구성
간단하게 UI디자인 해보자. 물론, 만들고 싶은 데로 디자인해도 상관없다. 필자는 개발자라 디자인 감각이 조금 떨어진다. 이상하더라도 이해해 주길 바란다!!
위 [그림 2]에서 View폴더가 있을 것이다. 그 안에 MainView.xaml 파일이 보일 것인데, 그 파일에 디자인 내용을 넣도록 하자. (디자인은 블렌드(blend)를 이용하면 편할 것이다.)
[그림 3] 디자인모습
위 [그림 3]는 간단하게 디자인해 본 모습이다. 정말 간단하게 디자인 되어 있기 때문에 [그림 3]과 같이 디자인하기는 어렵지 않을 것이라고 생각이 든다.
ㅁ 커맨드(Command)연결
위에서 우측을 보면 로그인 버튼이 있을 것이다. 이제 이를 클릭하면 해당 커맨드가 발생 하도록 해보자. 먼저 MainView를 만들었으므로 ViewModel도 만들도록 하자. 위 [그림 2]를 보면 View폴더에 MainViewModel.cs 클래스(Class)파일과 ViewModelBase.cs 클래스파일이 있는 것을 봤을 것이다. ViewModelBase 클래스는 ViewModel에서 있어야 하는 기본적인 코드는 넣어두고, 자식클래스에서 상속받아서 사용 할 수 있도록 하기 위해 만든 클래스이다.
|
namespace Flickr.MyPhotoGallery { public class ViewModelBase : INotifyPropertyChanged { public ViewModelBase() { }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } |
[코드 1] ViewModelBase 클래스(Class)
ViewModelBase 클래스에서 간단하게 INotifyPropertyChanged 인터페이스(Interface)를 상속받아서 OnPropertyChanged 메소드(Method)를 만들어 주었다. 이는 프로퍼티(Property)가 변경이 되면 바인딩요소가 변경이 될 수 있도록 알려주기 위해 이벤트를 발생시키는 메소드인 것 이다.
|
namespace Flickr.MyPhotoGallery { public class MainViewModel : ViewModelBase { /// <summary> /// 로그인 Command를 반환 합니다 /// </summary> public InstantCommand<object> LoginCommand { get; private set; } /// <summary> /// 생성자 /// </summary>
public MainViewModel() { } } } |
[코드 2] MainViewModel 클래스(Class)
[코드 2]는 MainViewModel 클래스를 정의한 것이다. ViewModelBase클래스를 상속 받아서 OnPropertyChanged를 호출할 수 가 있다.
[코드 2]에서 보면 LoginCommand가 정의되어 있을 것이다. 이는 휴즈플로우 커맨드 패턴을 참조했기때문에 사용할수 있는 것인데, 휴즈플로우 커맨드에서 주로 StaticCommand와 InstantCommand를 사용할 수가 있다. StaticCommand는 이름 그대로 전역에서 이벤트를 받아야 할 때 사용하면 될 것이고, InstantCommand는 인스턴스가 생성이 되었을때만 사용할 것이면 InstantCommand를 사용하면 될 것이다. MainViewModel 클래스는 생성 될 때, 그리고 MainView에서만 커맨드를 받을 것 이기 때문에 InstantCommand를 사용했다.
이렇게 코드가 짜여졌다면 뷰와 뷰모델을 바인딩을 엮여주자.
|
<UserControl 중간 코드 생략... > <UserControl.Resources> <local:MainViewModel x:Key="MainViewModelDataSource" d:IsDataSource="True"/> </UserControl.Resources> <UserControl.DataContext> <Binding Mode="OneWay" Source="{StaticResource MainViewModelDataSource}"/> </UserControl.DataContext> 중간 코드 생략… </UserControl> |
[코드 4] MainView.xaml
[코드 4]는 MainView XAML 코드이다. DataContext를 보면 MainViewModel이 바인딩 되어 있는 것을 알 수 있을 것이다. 이렇게 함으로서 뷰와 뷰모델이 바인딩 처리가 되었다. 이제 뷰모델에서 선언했던 LoginCommand를 이벤트 연결을 하도록 해보자.(블렌드를 이용하면 편리하다.)
[그림 4-1] Command 등록
커맨드 연결하는 것은 비헤이비어 연결하듯 드래그해서 해당 객체에 붙어 주기만하면 된다.
[그림 4-2] 커맨스(Command) 속성 설정
커맨드 속성 설정도 비헤이비어와 비슷하다. 먼저, SourceName과 EventName은 로그인 버튼을 선택하고, 어떤 이벤트가 일어났을 때 커맨드를 발생 시킬 것 인지를 지정하는 것이다. 그리고 Command를 현재 DataContext로 바인딩되어 이는 뷰모델에서 LoginCommand를 선택해주면 된다. 이렇게 하면 버튼 클릭했을 경우 해당 뷰모델로 이벤트가 들어 올 것인데, 그럼 그 이벤트를 받아서 로그인 관련 코드를 짜주면 되는 것이다.
|
※ 로그인 관련 코드 내용을 따로 설명하지 않겠다. 몇 가지 설정이 필요하긴 한데, 이를 다 설명하기에는 너무 내용이 길어 질 것 같아 생략하도록 하겠다. www.flickr.com/services/api/ 페이지에서 사용자 인증 |