API Practice — 回傳 JSON 格式資料的有趣第三方 API

串接CafeNomad

用到“網路功能研究精簡”中所介紹如何下載網路資料(URLSession.shared.dataTask)、串接API、API回傳格式為JSON該如何解讀(JSONSerialization.jsonObject(with: data, options” []))。

這次有同學用CafeNomad的API做台北的咖啡店資料, 謝謝同學提供的API, 就想來練習一下用CafeNomad做高雄的咖啡店資料, 從CafeNomad API回傳的資料格式為[{}, {}, {}, …..], 看似比itune回傳的格式單純。

先建立一個struct Cafe, 裡面有2個屬性cafename與cafeaddress; 再來自訂CafeTableViewController, 建立一個內含Cafe型別物件的cafesArray

var cafesArray = [Cafe]()

於ViewDidLoad裡, CafeNomad API回傳的JSON格式資料轉型成[{}, {}, {}, …]

if let data = data, let resultArray = (try? JSONSerialization.jsonObject(with: data, options: [])) as? [[String: Any]]

將dictionary{}的資料, append給cafesArray

for coffeeshop in resultArray{
  if let cafe = Cafe(json: coffeeshop){
    self.cafesArray.append(cafe)
  }
}

再讓每一個cell的title顯示咖啡店名, detailtitle顯示地址, 如此咖啡店列表就完成了。接下來希望可以顯示咖啡廳的detail訊息, 其中為了顯示咖啡店在地圖上位置, 需要拉一個MKMapView, 再拉一個mapview的IBOutlet, 讓地圖可以顯示在咖啡廳位置的周圍

@IBOutlet weak var cafeMapView: MKMapView!
let annotation = MKPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: Double(cafedetail.cafeLatitude)!, longitude: Double(cafedetail.cafeLongitude)!)
let region = MKCoordinateRegionMakeWithDistance(annotation.coordinate , 10000, 10000)
cafeMapView.region = region
cafeMapView.addAnnotation(annotation)

最後要把simulator的位置設在高雄, 並讓mapview勾選Userlocation, 當然也要設定取得使用者位置的權限requestWhenInUseAuthorization

Cafe列表與detail資訊

操作

登愣～打完收工, 附上GitHub

ChangNeinei/CoffeeShopKH