API串接練習咖啡店＆＆Mapkit應用 導航 (1) 串接API

成果展示

使用者可以輸入台灣的縣市 搜尋咖啡店了解位置與導航至該店

練習使用API

STEP1 取得API

這次串接的是Cafe Nomad

Cafe Nomad - API v1.2

首先打開API 了解其資料結構

很單純的結構資料只是透過陣列儲存

step2 建立JSON型別

Codable：同時包含Encodable 和 Decodable 協議的類型別

所以我們的資料可編碼（ encodable ）和可解碼 （ decodable )方便很多

這邊要注意建立的型別與名稱要完全的跟ＡＰＩ的名稱一模一樣

(我在做的時候經緯度的部份沒注意API資料是String 用成Double..)

step3 串接API 解析JSON回傳資料

注意到官方有說獲取地區資訊只要在原本api後加上地區名

將各縣市存成陣列在並與原來url合併產生

let cities=["taipei","yilan","taoyuan","hsinchu","miaoli","taichung","changhua","Nantou","Yunlin","Chiayi","Tainan","Kaohsiung","Pingtung"]
let apiUrlString="https://cafenomad.tw/api/v1.2/cafes"
let urlString="\(apiUrlString)/\(searchText)"//查詢時使用這個url

這邊在decode[ CafeInfo] 因為資料為Array

確認資料有抓取

step4 將資料show出來

Viewcontroller 遵從TableViewcontroller 實作兩個func

extension ViewController:UITableViewDelegate,UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return cafes.count //回傳列數
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell=tableView.dequeueReusableCell(withIdentifier:"CafeTableViewCell", for: indexPath) as! CafeTableViewCell
let cafeInfo=cafes[indexPath.row] 
cell.cafeName.text=cafeInfo.name //回傳名稱
cell.cafeAddress.text=cafeInfo.address //回傳地址
return cell
}

PickerView使用實作方法

var pickerView=UIPickerView() //實例建立Pickerview

TextField輸入方式改為PickerView

//設定textField彈出為pickerView
textField.inputView=pickerView
textField.textAlignment = .center
textField.placeholder="Select a City"

MAPKit導航實現

API串接練習咖啡店＆＆Mapkit應用 導航 (2) Mapkit應用 地圖與導航

之後單獨寫一篇紀錄(更新)

這篇主要是API串接

參考

#19 串接第三方 API，解析 JSON 資料，轉換成自訂型別顯示

第三方 API 整理

程式碼

g7huway0310/CafeAPI

希望這篇文章能夠幫助到你(妳)

如有錯誤指正

I hope you found this guide helpful. If not, then please let me know either in the comments below, I’m AlberLee

Swift#18