串接 Airtable API 查詢及新增資料
訂飲料APP 實做應用
Demo
實做功能
- 設定APP Icon
- 呼叫API前顯示loading動畫,API回傳資料完成更新畫面後,關閉loading動畫
- 各元件設定 autolayout
- 呼叫API查詢menu資料做多欄位sort排序: 先以中杯價由小排至大, 再以飲料名稱由小排至大
- 客制TableView Cell , 顯示呼叫API查詢menu的資料
- 將圖片暫存在 temporary directory, 呼叫API 下載圖片前,先檢查是否已存在,如果已存在就直接讀檔,不需再啟動 URLSessionDataTask
- 點選TableView Cell, 傳送資料至下一頁做新增訂單
- 自訂pickerView選取資料顯示在TextField上
- 鍵盤按next可跳到下一個TextField上, 點選背景可收鍵盤
- 訂購送出資料前欄位檢核
- 訂購送出資料完成新增order,自動回至menu頁
- 客制TableView Cell , 顯示呼叫API查詢orderlist的資料
- 同步更新orderlist資料,顯示總數及總金額
程式架構
串接 Airtable API 注意事項
- AUTHENTICATION方式
2–1. 查詢menu資料的Json結構
postman驗證查詢menu資料API
2–2. 查詢orderlist資料的Json結構
postman驗證查詢orderlist資料的API
3. 新增orderlist資料的Json結構
postman驗證新增orderlist資料的API
配合Json結構自訂資料型別
- menu Model
2. order Model
新建File 統一建立呼叫各API func
新建ViewController自訂loading動畫
在顯示每一個 cell時,先將將圖片暫存在 temporary directory,下載前先檢查圖檔,如果已存在就直接讀檔,不需再啟動 URLSessionDataTask
在資料來源Controller 建 IBSegueAction ,傳送資料至下一頁
下一頁接收資料的Controller, 要宣告儲存資料的 property
接收資料的Controller宣告 init 初始資料, 先儲存傳過來的資料, 後續程式判斷較方便引用
自訂pickerView選取資料顯示在TextField上, 要設定點擊後要彈出Picker View 的 TextField 指定 delegate為self ViewController
服從UITextFieldDelegate, 在 TextFieldDidBeginEditing方法呼叫initPickerView方法,所點擊的 TextField當參數傳進去
根據傳進來的 TextField給不同的 tag值
Picker View加入toolbar的按鈕, 再設定toolBar的按鈕事件
點選畫面將觸發 UITapGestureRecognizer 連結的 function tableTap(_:)，在裡面呼叫 endEditing 收鍵盤
每一個TextField在按下Next 鍵時,可以跳到相連的下一個 TextField
navigationController透過popViewController返回前一頁
每次新增完訂單自動回至menu頁後, 要於 viewWillAppear 呼叫API取orderlist, 才會每次同步更新新增的訂單
