串接第三方 API 解析 JSON 查詢城市咖啡館之 City Cafe App

整個城市都是我的咖啡館…既然如此,就讓 City Cafe App 為我們查詢城市各 角落無所不在的特色咖啡館吧~

感謝 Cafe Nomad 提供 免費、免登錄、無使用期限 的城市咖啡廳資料 API,與台灣各地的咖啡廳遊牧民族,一起分享咖啡廳情報。

作品展示

串接第三方 Cafe Nomad API,解析回傳的 JSON 資料,於首頁顯示有別於列表式清單的格子狀 (grid) 咖啡館清單牆。

點選牆面的某個咖啡館項目,可進到下一頁顯示店家詳細資訊,並以地圖方式呈現店家所在位置,點選網址資訊亦可連結至店家專屬網站。

實作重點

串接第三方 Cafe Nomad API,利用 URLSession 抓取後台的 JSON 資料。

利用 JSONDecoder 解析 JSON 資料,搭配 Codable 將 JSON 資料轉換成自訂的 CafeStore 型別。

值得注意是回傳資料的型別,例如咖啡好喝程度 tasty 是 Double 而非 Int,店家位置經緯度 latitude,longitude 是 String 而非 Double,使用上可能需轉為正確型別才不會出錯。

使用 DispatchQueue.main.async 確保更新 UI 相關的程式碼是在 main thread 下執行的,若不乖乖聽話,紫三角也會循循善誘的跳出來為你指點迷律。

運用 UICollectionView 搭配自訂的 UICollectionViewCell 顯示格子狀 (grid) 的咖啡館清單牆。

點選 cell 後利用 IBSegueAction 結合 guard let 寫法進入下一頁以顯示咖啡館詳細內容。

透過 present 顯示 SFSafariViewController 實現店家網址的連結功能。

使用 CLLocationCoordinate2D 實作店家所在位置的地圖嵌入功能。

模擬器的地圖顯示預設為英文,須調整 Settings → General 的 Language & Region 讓街道們重新回到親切又熟悉的中文懷抱。

作品 GitHub

--

--