【iOS】#23 記帳APP Part5: 串接 AirTable 資料
抓取存於 AirTable 中的怪物資料
本篇提及功能：
建立 AirTable base
抓取 AirTable 資料
從 URL 載入 Lottie 動畫
APP 概念
上次說到這款記帳 APP 其實是結合「記帳」與「養寵物」，用遊戲化的概念，讓使用者增加記帳的動機，並且節省花費。具體執行行為如下圖所示
使用者在一開始會先設定每日花費的預算。當天記帳完後，可以進行「結算」行為，如果花費低於預算時，就會把多出來的差額「餵」給怪物。怪物可說是一種另類的撲滿，只不過不是要記錄真實存下來的錢，而是用預算的概念，盡可能讓使用者減省花費
因為怪物有升級的設定，所以需要檔案記錄這些資料。我選擇的方式是把這些怪物資料存在 AirTable，如此一來方便在線更新
實作部分
建立 base
首先先到 AirTable 註冊帳號，註冊完成後，在首頁的部分選擇「Add a base」-> 「Start from scratch」
並輸入 base 的名稱。如果看不慣顏色以及圖示也可以做修改 XD
建立資料欄位
點選剛創立的 base 後，會進入到表格呈現的地方。左上角的 Tab 可以更改這個 Table 的名稱
新增欄位直接按「＋」就會出現，可以根據資料的型態做設定
如果要上傳圖片、json 檔案之類的附件，可以選擇「Attachment」，之後把要上傳的檔案拖拉到該格中就可以上傳
最終我怪物資料設定的欄位有以下：
- name_zh：怪物的中文名稱
- monsterType：怪物的類型(用英文名稱存)
- description_zh：怪物的描述
- eggLvMaxVal, babyLvMaxVal, prematureLvMaxVal：設定怪物每種型態的最大值，只要超過就會型態進化。本來想用陣列存，但 AirTable 似乎沒有陣列的設定
- animJson：存四種型態(egg, baby, premature, mature)的怪物動畫 json 檔
在程式中取得 AirTable 資料
接下來就是要在程式中，抓到這些怪物的資料。首先可以查看它的 API 文件，點選 base 頁面右上角的「HELP」，有個 API documentation
API documentation 很好心的列出有關於你這個 base 的所有可用 API
一樣需要帶 Token，才可以使用。這個 API KEY 位於帳號設定之中，下方紫色框的部分就是 API KEY
var request = URLRequest(url: apiUrl)request.setValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
URLRequest 中帶入 API 的網址，然後再把 API KEY 帶進去 request 裡面
URLSession.shared.dataTask(with: request) { (data, response, error) in let decoder = JSONDecoder()
guard let data = data else {
completion(nil)
return
} do {
let result = try decoder.decode(MonstersBody.self, from: data)
completion(result)
} catch {
print(error)
}}.resume()
利用 URLSession 去抓資料，再利用 JSONDecoder 轉成自訂型態的資料，最後把 result 交給 completion 去處理要做的事情
使用 Lottie 載入線上 json 檔
以上是 AirTable 的部分，在把動畫 json 都存到 AirTable 後，就不用在本地存任何有關動畫的資料了
而在獲得來自 base 中的 animation json 檔的 URL 後，可以直接用 Lottie 提供的 loadedFrom function 讀取
Animation.loadedFrom(url: targetJsonURL!, closure: { (animation) in // 把動畫交付 Animation View
self.monsterAnimView.animation = animation // 設定要播放的區段
let markers = self.getPlayMarker(status: "stay")
self.monsterAnimView.play(fromMarker: markers[0], toMarker: markers[1], loopMode: .loop, completion: nil)}, animationCache: LRUAnimationCache.sharedCache)
最後，可把載入的動畫存在 global 的 LRUAnimationCache 中，要用的時候就可以直接從快取找，增進效能
APP Demo
後記
目前只有畫一隻獨角獸怪物，因為真的太花時間了 XD，光四種成長形態(egg, baby, premature, mature) x 三種動畫(stay, feed, question)，就要製作 12 種動畫，有夠累…
參考資料
AirTable 串接
Lottie 官方文件
