API

我們在編寫專案時常常會使用到需要串接 API 來獲取資訊的情況
今天我們做個簡單的 API 實作教學讓大家學習

實作畫面

我們首先先設計一個主畫面可以選擇城市

接著要設計一個頁面用來顯示該城市的天

前置動作

相信到現在大家簡易的畫面排版跟製作都會了
接下來我會將教學重點放在如何串接 API 以及 資料庫的設計邏輯
不過在那之前我們要教大家去氣象局取得 API 資料
首先去氣象局註冊會員
接著登入 OpendataAPI 選取要的資料後我們會得到一個 Json 檔
我們今天做的範例用的是 F-C0032-001 的資料喔

Opendata API

得到後可以將 Json 檔案的內容貼入這個網頁中展開方便我們做結構設計

Json Parser

成功後我們會看到一長排的程式碼，但是別緊張，我們先將內容縮到最小後會看到下面的樣子

{
"success":"true",
"result":{...},
"records":{...}
}

我們會發現 success 後面帶的值為 string
而 result 和 records 有著更細項的內容
所以我們在設計時會用自定義變數去設定, 例如：resultValue
是什麼的值就用什麼後面加 Value 去標示他
我們接下來會在 resultValue 和 recordsValue 中看到更多細項
如下

{
"success":"true",
"result":{
    "resource_id":"F-C0032-001",
    "fields":[...]
},
"records":{
    "datasetDescription":"三十六小時天氣預報",
    "location":[...]
}
}

我們發現 fields 和 location 會用陣列的方式儲存
所以這邊在設定時要將值設為陣列喔
接下來就是依樣畫葫蘆的一層一層解下來我們就能得到結構啦！
回到 Xcode 我稍微舉例剛剛教的結構設計長相

import Foundation
import CoreText

// 主要天氣資料結構
struct weatherData: Codable {
    var success: String
    var result: resultValue
    var records: recordsValue
}

// API 結果資訊
struct resultValue: Codable {
    var resource_id: String
    var fields: [fieldsValue]
}

// 欄位資訊
struct fieldsValue: Codable {
    var id: String
    var type: String
}

// 天氣記錄集合
struct recordsValue: Codable {
    var datasetDescription: String
    var location: [locationValue]
}

// 地區資料
struct locationValue: Codable {
    var locationName: String  // 地區名稱
    var weatherElement: [weatherElementValue] 
}

按照 Json 的值一步一步設定 struct 就能完成啦！
剩下來的設計就交給大家做練習啦，不過要注意名稱都要跟 Json 內一致喔！