適合練習照片牆 App 的 flickr API

Flickr 有成千上萬精美的照片，很適合我們練習實做 collection view 的照片牆頁面。接下來我們將介紹它的 public feeds 和 photo search API，透過它們回傳的 JSON 資料。我們很快就能做出有著幾百張照片的美麗照片牆。

public feeds API

Flickr Services

1 抓取公開的照片

https://www.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1

每次呼叫都會得到不同的照片，它回傳的 JSON 範例如下。

我們可將 JSON 轉換成遵從 protocol Decodable 的自訂型別 ，將圖片網址存在 Media 的 property m。

struct Media: Decodable {
   let m: URL
}
struct Item: Decodable {
   let title: String
   let media: Media
}
struct FeedData: Decodable {
   let items: [Item]
}
if let url = URL(string: "https://www.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1") {
   let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
      if let data = data, let photoData = try? JSONDecoder().decode(FeedData.self, from: data) {
      }
   }
   task.resume()
}

圖片網址結尾的英文控制著圖片的大小，剛剛的 API 回傳的圖片網址結尾是 m，因此最長邊為 240。

Flickr Services

如果想抓取大一點的圖片，比方最長邊 1024，則須改成 b 結尾，比方以下例子

https://farm8.staticflickr.com/7839/31757220927_e19fa98f9e_b.jpg

因此假設常數 item 的型別是 Item，我們可用以下兩行程式取得大圖的 url。

let lastPathComponent = item.media.m.lastPathComponent.replacingOccurrences(of: "m", with: "b")
let bigImageUrl = item.media.m.deletingLastPathComponent().appendingPathComponent(lastPathComponent)

2 抓取公開的照片，搭配 tags search 包含 tag 的圖片。

https://www.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1&tags=iphone,swift

圖片 search API

利用 https://api.flickr.com/services/rest/?method=flickr.photos.search，我們可設定更多的條件尋找喜歡的照片，比方指定照片的經緯度。不過它也比較麻煩，需要包含 API key 才能使用。接下來就讓我們一步步描述如何產生它的網址吧。

1 取得 API key。

API key 可從以下網頁免費申請。

The App Garden on Flickr

比方以下即為申請後得到的 API key。

如果不想花時間申請(其實只需要幾秒鐘)，也可以使用以下網頁自動產生的 API key，不過它是會過期的，所以只適合用來開發實驗的 App。它產生的方法如下:

(1) 連到以下網頁。

Flickr Api Explorer - flickr.photos.search

(2) 將 Output 改成 JSON 後點選 Call Method。

(3) 此時網頁的下方將產生一串網址。

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=370ea9786aaf3fd315f259f0506298e7&format=json&nojsoncallback=1&api_sig=220d85314736e725b5c59a294c8a1210

(4) 從網址找出 api key。

以剛剛的網址為例，api key 是 370ea9786aaf3fd315f259f0506298e7。

2 產生圖片 search 的 API 網址。

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=370ea9786aaf3fd315f259f0506298e7&text=apple&per_page=20&format=json&nojsoncallback=1

網址裡我們主要需調整的參數是 text & api_key，text 是 search 的文字，api_key 是 API key，其它則可照抄。關於此 API 更多的參數說明，可參考以下連結。

Flickr Services: Flickr API: flickr.photos.search

透過此 API 我們可得到以下的 JSON 資料。

值得注意的，JSON 裡並沒有圖片網址的 http 連結，我們得自力自強，研究以下連結的說明自己產生網址。

Flickr Services

由上圖描述的規則我們了解圖片的網址由 farm，server，id & secret 組成，因此我們可將 JSON 轉換成遵從 protocol Decodable 的自訂型別，將剛剛提到的 4 個欄位存起來，方便未來抓圖時產生網址。

struct Photo: Decodable {
   let farm: Int
   let secret: String
   let id: String
   let server: String
   let title: String
   var imageUrl: URL {
      return URL(string: "https://farm\(farm).staticflickr.com/\(server)/\(id)_\(secret)_m.jpg")!
   }
}
struct PhotoData: Decodable {
   let photo: [Photo]
}
struct SearchData: Decodable {
   let photos: PhotoData
}

我們將圖片的網址定義為 Photo 的 computed property imageUrl，利用 farm，server，id & secret 組合出網址。在這裡我們將網址的結尾設為 m，表示它是小圖，若想抓取大圖，只要將 m 換成其它大小的字母即可，比方代表 1024 的 b。

var imageUrl: URL {
   return URL(string: "https://farm\(farm).staticflickr.com/\(server)/\(id)_\(secret)_m.jpg")!
}

完整範例程式連結( ps: API key 記得更新)

AppPeterPan/FlickrPhotoDemo

進階功能

#83 製作 IG 滑動後 profile tab 卡在上方的效果

其它範例連結

UICollectionView Tutorial: Getting Started

Flickr API 提供的功能其實不只下載圖片，一般 App 常見的上傳圖片，留言和收藏功能，它都大方地提供，因此透過 Flickr API，我們已經可以實現一個非常完整的 App。不過這些比較進階的功能必須利用 Oauth 登入後才能使用，有興趣的朋友可進一步參考 Flickr API 的網頁說明。

Flickr Services