Peter’s 100 task #6–1 Order Drinks APP

新增訂單列表頁面、修改與刪除功能

前篇連結

本篇實作功能:

  1. 利用Airtable API PUT & DELETE 實現訂單修改、刪除
  2. 訂購飲料時加入防呆機制

訂單列表頁面

Order Data List

訂單修改

使用者點擊訂單即可進入修改訂單頁面(同加入訂單頁面)

Update Order

修改完畢後點選修改訂單,透過API PUT將資料庫的資料更新,來看看Airtable的說明吧~

後來有對資料庫做一些更新,刪除price欄位新增drinkImage欄位,因此本篇的欄位與前篇有些不同。

上圖可看見Update有兩種request,分別是PATCHPUT,兩種的差別只在於PUT會將未指定更新的欄位清除,這次更新用的data資料JSON格式沿用上次上傳用的JSON格式,因此使用PATCH與PUT都可以。

由於PUT需要使用到id(如上圖url最後的/recjjQ6C6m1o23wEM),因此在呈現訂單列表時,必須解析id property,並在使用者點擊該訂單後將id傳遞過去修改訂單頁面。

struct DrinkOrder: Codable {
var id: String
var fields: OrderData
var createdTime: String
}

利用updateOrderData屬性檢查判斷是否為修改模式,設定request & url

訂單刪除

使用者左滑顯示刪除按鈕

按下Delete透過API DELETE將資料庫資料刪除

上圖說明非常簡單,只需要將request設為DELETE,並在url後加上id

由於Airtable資料刪除後,原本訂單列表的orderDrinkData Array仍是尚未刪除前的資料,因此在完成Airtable資料刪除後,呼叫.remove()將該row的資料刪除。

APP Demo

後記

Airtable API的說明文件非常簡單明瞭,容易理解,但是APP相較於過去複雜了許多,程式碼也複雜許多,許多檔案顯得雜亂,剛好昨天peter講完專案分類檔案的概念(MVC),正好運用在此APP上,將檔案分成Model、View、Controller三個資料夾,讓整個專案檔案較有邏輯且一目瞭然。

這次的可不可訂飲料APP就到這邊完成了,過程中遇到許多問題,雖然都解決了,但感覺自己在寫code時腦中思考邏輯、架構不夠清晰,導致常常卡關卡很久,不過相信每次的挫敗都是成長的動力!

--

--