[Silverlight 3][월간 Web. 2010.02] 실전활용!! - 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