/* syntax highlight */ /* end of syntax highlight */

2010年12月28日 星期二

iphone app 開發 (三十三) flickr API 研究之一

Bookmark and Share

由於筆者想要從 flicker 上面拿一些照片資料來做應用,所以研究一下  flickr 的 API,省去自己抓資料的時間

筆者從網路上有看到高人分享的 Flickr App ,所以準備一步一步學習把 App build up 起來

原始範例在 這裡 ,但筆者覺得它寫得有點亂,乾脆自己整理一下

你應該要先連過去看看它的結果,對於整個過程會更了解

文章共有三部份,完成後可以達成以下這張圖的效果

我們輸入一個關鍵字,下面回顯示回傳的圖片們,然後點一下會在上面顯示

image

此篇文章是第一部份,目標是取得 flickr 的 image list (xml格式)

 

 

步驟一:申請 API key

每個 Flickr API 應用程式都需要獲得一個 API「key」。你可以在這裡申請 key

再來要選擇商用或非商用

image

接下來就會看到官方給你的 Flickr API key,請把它記下來

 

 

步驟二:下載 JSON Library

請連到 這裡 下載,並把以下載後的檔案存到一個 JSON 資料夾裡

image

再來請到專案中把整個 JSON 拉進來

 

步驟三:宣告資料物件

由於我們在這篇只會用到圖片的 title , 縮圖 , 原圖

所以我們在 .h 檔宣告三個可變的 Array 來接參數

 

  1. #import <UIKit/UIKit.h>
  2.  
  3. @interface flickrViewController : UIViewController {
  4.     NSMutableArray  *photoTitles;         // Titles of images
  5.     NSMutableArray  *photoSmallImageData; // Image data (thumbnail)
  6.     NSMutableArray  *photoURLsLargeImage; // URL to larger image
  7. }
  8.  
  9. @end

 

 

步驟四:與 flickr API 連結 

一開始先在 .m 檔宣告一些隱藏的 interface

 

  1. #import "flickrViewController.h"
  2. #import "JSON.h"
  3.  
  4. #define debug(format, ...) CFShow([NSString stringWithFormat:format, ##
  5.     __VA_ARGS__]);
  6.  
  7. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  8. * Private interface
  9. *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  10. @interface flickrViewController(private)
  11. - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)
  12.        data;
  13. - (void)searchFlickrPhotos:(NSString *)text;
  14. @end

 

接下來請設定你的 flickr key

 

  1. // xxx 處請填入你的 APIKey
  2. NSString *const FlickrAPIKey = @"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

 

接下來是實做與 flickr 的連結,這部份程式碼比較多

 

  1. @implementation flickrViewController
  2.  
  3. - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
  4. {
  5.     // 將得到的資料變成字串的格式
  6.     NSString *jsonString = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
  7.    
  8.     // 從 JSON String 轉換為 NSDictionary 的格式
  9.     NSDictionary *results = [jsonString JSONValue];
  10.    
  11.     // 建立一個 Array 來方便依據存取內容
  12.     NSArray *photos = [[results objectForKey:@"photos"]
  13.        objectForKey:@"photo"];
  14.    
  15.     // 遞迴每一筆資料...
  16.     for (NSDictionary *photo in photos)
  17.     {
  18.         // 取得圖片標題
  19.         NSString *title = [photo objectForKey:@"title"];
  20.        
  21.         // 將標題存進 photoTitles 陣列當中
  22.         [photoTitles addObject:(title.length > 0 ? title : @"Untitled")];
  23.        
  24.         // 抓取圖片的 URL 位置 (see the Flickr API)
  25.         // 格式為 http://farmX.static.flickr.com/server/id/secret
  26.         // 注意到 "_s" 表示為縮圖 image 75 x 75 pixels
  27.         NSString *photoURLString = [NSString stringWithFormat:@"http://farm%
  28.             @.static.flickr.com/%@/%@_%@_s.jpg", [photo
  29.             objectForKey:@"farm"], [photo objectForKey:@"server"], [photo 
  30.             objectForKey:@"id"], [photo objectForKey:@"secret"]];
  31.        
  32.         // 用標準的格式來偵錯
  33.         debug(@"photoURLString: %@", photoURLString);
  34.        
  35.         // 用表格 scrolling 的方式的效能會遠大於用 image data
  36.         // and then add this data as
  37.         // the cell.image value (see cellForRowAtIndexPath:)
  38.         [photoSmallImageData addObject:[NSData dataWithContentsOfURL:[NSURL
  39.             URLWithString:photoURLString]]];
  40.        
  41.         // 以較大的檔案格式來將圖片存起來
  42.         // in on the image if requested
  43.         photoURLString = [NSString stringWithFormat:@"http://farm%
  44.             @.static.flickr.com/%@/%@_%@_m.jpg", [photo
  45.             objectForKey:@"farm"], [photo objectForKey:@"server"], [photo
  46.             objectForKey:@"id"], [photo objectForKey:@"secret"]];
  47.        
  48.         [photoURLsLargeImage addObject:[NSURL
  49.             URLWithString:photoURLString]];       
  50.        
  51.         debug(@"photoURLsLareImage: %@\n\n", photoURLString);
  52.     }
  53.    
  54. }

 

 步驟五:實做進入點

然後我們用以下方式來實做進入點,注意我們有傳入一個 text,是我們要搜尋的字串,此部份稍後會提到,*urlString 是我們要丟給 flickr 的字串,有固定的格式,依 REST 的方式傳遞,變數共有四個,依序介紹如下:

The parameters to the query are:

  1. api_key: your specific developer key
  2. tags: the search text
  3. per_page: the number of images to return
  4. format=json&nojsoncallback: request the results to be returned as JSON

 

再來建立一個 request 與 connection 來接字串,結束後釋放掉

 

  1. -(void)searchFlickrPhotos:(NSString *)text
  2. {
  3.     // 建立一些字串傳給 flickr API
  4.     NSString *urlString = [NSString
  5.        stringWithFormat:@"http://api.flickr.com/services/rest/?
  6.        @&per_page=15&format=json&nojsoncallback=1", FlickrAPIKey, text];
  7.    
  8.     // 用 NSURL 的格式來接這些字串
  9.     NSURL *url = [NSURL URLWithString:urlString];
  10.    
  11.     // 開始下載圖片與資料
  12.     NSURLRequest *request = [[NSURLRequest alloc] initWithURL: url];
  13.     NSURLConnection *connection = [[NSURLConnection alloc]
  14.         initWithRequest:request delegate:self];
  15.     [connection release];
  16.     [request release];
  17. }

 

init 負責一開始產生記憶體空間,先讓父類別 init 進行初始化,然後在內部將其他物件也初始化,其中 searchFlickrPhotos 丟了一個字串 @”iPhone”

 

  1. - (id)init
  2. {
  3.     if (self = [super init])
  4.     {
  5.         self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen]
  6.             applicationFrame]] autorelease];
  7.        
  8.         // 初始化我們會用到的 arrays
  9.         photoTitles = [[NSMutableArray alloc] init];
  10.         photoSmallImageData = [[NSMutableArray alloc] init];
  11.         photoURLsLargeImage = [[NSMutableArray alloc] init];
  12.        
  13.         // 我們自己先手動加入搜尋的 keyword (@"iPhone")   
  14.         [self searchFlickrPhotos:@"iPhone"];
  15.        
  16.     }
  17.     return self;
  18.    
  19. }

 

當然記得最後要釋放記憶體

 

  1. - (void)dealloc {
  2.     [photoTitles release];
  3.     [photoSmallImageData release];
  4.     [photoURLsLargeImage release];
  5.     [super dealloc];
  6. }
  7.  

 

最後一步驟是在 Delegate 那邊增加 ViewController 的 alloc

請加入以下這行

 

  1.     viewController = [[flickrViewController alloc] init];

 

如果順利建置的話,編譯後你可以在 console 看到以下訊息

表示你已經成功的從 flickr 抓到資料了 ! 恭喜,接下來請看後面的文章來把 search 與 UI 實做出來吧。

image

 

當然,如果不順利的話,原作者有準備了它開放的 project 檔案供大家下載

有興趣的可以下載原始 project  參考,不過記得換一個 APIKey

Download iPhone, JSON and Flickr – Part 1 Xcode projec

 

下一篇是介紹如何將上面得到的這些圖片訊息串成顯示的圖片,在表格當中,請參考以下連結

iphone app 開發 (三十四) flickr API 研究之二 

 

參考資料

Building authorized Flickr apps for the iPhone

iPhone平台上的json-framework

App Garden API 說明文件

App Garden

Flickr Authentication API 網站應用程式操作指南

iPhone JSON Flickr Tutorial – Part 1

iPhone JSON Flickr Tutorial – Part 2

iPhone JSON Flickr Tutorial – Part 3

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...