【iOS】#17 可不可飲料訂購APP Part2: SheetDB 存取訂購清單資料

SheetDB api GET POST 存取 Google Sheet 資料

--

本篇提到的功能有:
SheetDB api GET 獲取 Google Sheet 資料
SheetDB api POST 新增 Google Sheet 資料

APP 新增功能

新增的功能為存取 SheetDB 資料

使用者點完飲料後,會在 Google Sheet 上新增一筆資料;查看飲料訂購清單時,會把相對應群組的資料取出,呈現在 APP 畫面上

實作部分

針對如何使用 SheetDB API 的部分做紀錄

建立 Google Sheet

先把建立一個 Google Sheet ,把資料的欄位規劃出來

獲取 SheetDB API 網址

進到 SheetDB,連結到 Google 帳號後新建新的 API

把 Google Sheet 網址貼到上面並生成
下方網址即為 API 網址

GET Google Sheet 資料

利用 URLRequest,設定 Method 為 “GET”,value 為 “application/json”、headerField 為 “Content-Type”

let url = URL(string: "https://sheetdb.io/api/v1/id")var urlRequest = URLRequest(url: url!)urlRequest.httpMethod = "GET"urlRequest.setValue("application/json", forHTTPHeaderField: "Content-Type")

從 Postman 上抓取 GET 後的資料結構如下

故 json decode 部分利用字典結構來解析:

let result = try decoder.decode([[String: String]].self, from: data)

根據資料中的 group key 過濾出所屬訂購群組的資料:

self.targetList = result.filter({    $0["group"] == userInfo.userGroup})

POST 新增資料

需要先設定上傳的資料格式。從 SheetDB 的文件中可以發現,上傳的資料結構會是一個物件,裡面裝 data key,最後裡面才是你要設定的屬性(對應表格的欄位名稱)

如果不確定 encode 出來結果的話,可以像以下 Peter 提供的方法~ 先印出結果來看結構是否正確

確定結構正確後,接下來就可以對 request 做相關的設定

let url = URL(string: "https://sheetdb.io/api/v1/id")var urlRequest = URLRequest(url: url!)urlRequest.httpMethod = "POST"urlRequest.setValue("appliction/json", forHTTPHeaderField: "Content-Type")

記得上傳資料的話,跟獲取資料不同,httpMethod 要設定成 “POST”

最後對進行編碼(encode),把編碼後的 json data 帶到 httpBody 中

urlRequest.httpBody = data

要確認 POST 是否成功的話,可從 API 回傳的 response 判斷

let status = try? JSONDecoder().decode([String:Int].self, from: data), status["created"] == 1 {    print("ok")}

當回傳長成下方這樣,代表成功新增了一筆資料

APP DEMO

後記

訂購 APP 基本的功能都實作完囉~ 下一篇會實作不含驗證的使用者登入XD,以及刪除資料

最後再把所有的飲料資料夾進來還有 Loading 動畫等體驗完善,就可以完成囉~

--

--