Swift — 來接個 API 吧( API & JSON )

試著找個 API 來應用在你的程式吧。

Jeremy Xue
7 min readAug 26, 2018

前言:

前面的文章 「 Swift — 說說 Codable ( Decodable & Encodable)」提到 Swift 中的 Codable 協議要如何運用,今天我們要來試著稍微介紹 Open Data ( 開放資料庫 )的 API,之後我們會用 Codable 的方式來解析 API 的 JSON 格式的資料,應用在我們的 App 中。

這次的教學我們會來串接網路上的 OpenWeatherMap 的 API 資料,記得開始實作之前別忘了先申請帳號,並且獲取你的 API Key

OpenWeatherMap : API

OpenWeatherMap 所提供的 API

這邊進到我們 OpenWeatherMap 的 API 之後,我們選擇來串接我們的 Current weather data,這個 API 可以取到座標位置或是城市當前天氣資料。

這邊免費提供的開放資料似乎只有 Current weather data 以及 5 day / 3 hour forecast 兩個,其他的 API 資料只提供給有付費的用戶,串接時需要注意一下( 之前想說怎麼一直接不到資料,原來是沒有付費的部分啊! )。

這邊我們進到 Current weather data 的 API doc 中,也就是所謂的 API 文件,裡面會介紹到關於這個 API 的資訊,例如:如何 Call 這個 API、可以用什麼方式 Call API、API 中的參數代表什麼…諸如此類的在 API 的文件中都找得到。

# 調用 API

調用 API 的方式

這邊我們可以找到如何調用這個 API 的方式,像是這個 API 可以透過一些位置資訊來調用它,可以透過 City name、City ID、Geographic coordinates 和 ZIP code 等作為參數來調用 API。像是透過城市名稱來調用的話:

API call:api.openweathermap.org/data/2.5/weather?q={city name}
api.openweathermap.org/data/2.5/weather?q={city name},{country code}
Examples of API calls:api.openweathermap.org/data/2.5/weather?q=London
api.openweathermap.org/data/2.5/weather?q=London,uk

如果是使用地理位置( 座標位置 )來調用的話:

API call:api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}Examples of API calls:api.openweathermap.org/data/2.5/weather?lat=35&lon=139

這邊我們會使用城市名稱作為主要範例來實作,其他調用 API 的方式就查看其 API doc 就能夠了解。

Weather parameters in API respond

當你串接成功 API 應該會看見下面的 JSON 文件,如果沒有出現表示可能是 API 調用錯誤或是你的 API Key 打錯。

{"coord":
{"lon":145.77,"lat":-16.92},
"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],
"base":"cmc stations",
"main":{"temp":293.25,"pressure":1019,"humidity":83,"temp_min":289.82,"temp_max":295.37},
"wind":{"speed":5.1,"deg":150},
"clouds":{"all":75},
"rain":{"3h":3},
"dt":1435658272,
"sys":{"type":1,"id":8166,"message":0.0166,"country":"AU","sunrise":1435610796,"sunset":1435650870},
"id":2172797,
"name":"Cairns",
"cod":200}

同樣的,你也可以在文件中看到這些屬性是代表什麼意思。詳情請查看 Current Weather data API 文件下 Weather parameters in API respond 的 JSON

JSON

假如正確調用的話,我們應該可以透過網頁看見我們的 API 的 JSON 檔,如下面這個樣子:

{"coord":
{"lon":145.77,"lat":-16.92},
"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],
"base":"cmc stations",
"main":{"temp":293.25,"pressure":1019,"humidity":83,"temp_min":289.82,"temp_max":295.37},
"wind":{"speed":5.1,"deg":150},
"clouds":{"all":75},
"rain":{"3h":3},
"dt":1435658272,
"sys":{"type":1,"id":8166,"message":0.0166,"country":"AU","sunrise":1435610796,"sunset":1435650870},
"id":2172797,
"name":"Cairns",
"cod":200}

這樣的 JSON 檔這樣直接看可能會看不清楚,但是可以透過一些輔助插件或是網站讓這個 JSON 易讀一些,可以搜尋 JSON Editor 之類的:

接著我們使用任意一個 Editor 來編輯它,這時候我們就能清楚地看出整個 API 的結構是如何:

JSON Editor 整理後的 JSON 結構

接著應該可以比較容易看得出來 JSON 檔案的整體結構,也比較能夠清楚知道哪邊是結構,哪邊是陣列以及每個屬性中的類型。

這個步驟非常重要,因為我們之後要根據這個資料的結構以及每個屬性的屬性值來定義其 Decodable 架構。

後記:

我們這次 API 的基本介紹就介紹到這邊,下一次我們會使用 Decodable 方式來串接 Current Weather data 的 API,並解析 API 中的數據應用在我們的 APP 上。

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

No responses yet