作業#61 訂飲料App-串接API下載、上傳資料、刪除資料

--

目的:練習串接Airtable API下載資料以及建立資料,並做出可以訂飲料的App

用茶湯會當作主題做這次的訂飲料App,以下內容是參考一位學長的作品做出來的,如果對有興趣的話文章最後有附上連結喔~

功能介紹

  1. CollectionView無限播放Banner
  2. 串接Airtable API下載建立好的飲料菜單並顯示在CollectionViewController上
  3. 在TextField的keyboard加入PickerView讓使用者選擇甜度冰塊等等內容
  4. 串接Airtable API上傳訂單內容
  5. 用Notification在上傳完訂單後產生TabBarItem上的badge Value提醒使用者更新數量
  6. 下載訂單顯示在TableViewController上,並且可以移除訂單

無限播放Banner

礙於篇幅有限這邊稍微分享一下主要原理,有興趣的可以參考我之前寫過的文章

主體為ViewController,在上面加入CollectionView呈現Banner,下面加入ContainerView用另一個ViewController去控制菜單呈現

設定collectionView的FlowLayout,每個圖片間距為0然後每張圖片跟collectionView一樣大,然後橫向滑動

在資料的最後加上一個跟第一個圖片一樣的圖片作為銜接用的資料

用Timer去每幾秒執行一次

文章連結:

串接Airtable API下載菜單

API

在Airtable先建立好需要的菜單內容,品名、圖片、價格、能不能做熱的、有沒有去冰、分類

API網址:

用一下網址去獲得所有資料,可以用Postman或網上一些幫我們把JSON資料排版好的網頁去排好資料

https://api.airtable.com/v0/appEvFweIJ3Hd40r8/menu

加入sort的網址:

可以加入sort來排序我們的資料,在後面加上要排序的欄位,我使用的是按照分類排列

https://api.airtable.com/v0/appEvFweIJ3Hd40r8/menu?sort[][field]=category&sort[][direction]=asc

自定義資料型別

關於以上串接Airtable可以參考下方Peter文章連結:

定義function型別的completion參數&使用ResultType

模仿Apple的範例將下載有關的內容寫在同一個檔案內,並且在funcriton型別的completion參數使用ResultType去定義成功失敗

定義static常數shared在ViewController,可以直接使用MenuItemController.shared去使用controller裡的function

參考連結:

TextField的inputView加入客製化的PickerView

點擊TextField後跳出的鍵盤是出現PickerView,並且使用ToolBar關閉或是鎖定我們要選擇的項目

  1. 讓所有的TextField將delegate設為OrderTableViewController,這樣能夠使用關於TextField的一些function
  2. 在textFieldDidBeginEditing(_ textField: UITextField)使用我們需要自己寫出來設定PickerView的方法,然後在textFieldShouldReturn(_ textField: UITextField) -> Bool設定若是一般鍵盤在輸入完後按下右下角的Return鍵可以收鍵盤
  3. setPickerView帶入一個參數TextField去辨別現在按下的是哪個TextField,需要去跳出哪個PickerView
  4. 先辨別TextField的tag得知目前按下的textField幫PickerView也加入相對應的tag,並幫PickerView的Delegate跟DataSource都設為self
  5. 加入ToolBar並幫ToolBar上的按鍵都加上功能
  6. 把PickerView跟ToolBar都加上去TextField

串接Airtable的API上傳資料

建立Order的table

將需要上傳的field都設定好

使用Airtable的API網址查看資料的格式並自定義上傳需要的資料型別

跟Menu一樣將上傳下載的功能都寫在同一個檔案內,但我將菜單跟訂單的功能分開來,跟下載下來比較不一樣的是,需要在httpMethod使用POST表示要上傳,根據Airtable的文件要加上application/json跟APIKey,在httpBody加入我們要上傳的資料,最後使用URLSession進行上傳

Notification

比較特別的是在這裡面加入Notification,在上傳之後會通知其他頁面,那至於觸發條件就是order有加入新資料

static let orderUpdateNotification = Notification.Name("OrderController.OrderUpdate")
var order = Orders(){
didSet{
NotificationCenter.default.post(name: Self.orderUpdateNotification, object: nil)
}
}

上傳後TabBar的BadgeValue產生提醒數字

接在上面Notification之後,自訂一個資料型別接受上傳的資料,去儲存目前上傳了幾筆新資料

在使用者按下確認訂購後跟著加入到Array中

在sceneDelegate中新增接收通知,並在取得通知後去檢查儲存上傳資料的Array有多少資料,並顯示在TabBar上的badgeValue

刪除資料

下載訂單的方式與下載菜單的方式大同小異所以這邊分享一下刪除的方法

OrderController

  1. 在負責訂單下載上傳的controller中新增一個刪除的功能,用API的網址後面加上訂單的ID,每筆資料都會有一個ID使用ID找到那筆資料即可
  2. httpMethod是DELETE(刪除)

TableViewDelegate

  1. tableView(_ , canEditRowAt):回傳true我們就能對Cell進行編輯
  2. tableView(_ , commit , forRowAt):先判定編輯方式是不是刪除,如果是的話就用那筆資料的ID進行移除Airtable裡的資料,移除完成就將顯示在tableView上的資料進行移除

操作畫面

以上內容一些功能是參考下方學長的文章有興趣的可以看看,由於這篇花了的時間有點久修改訂單的功能之後來研究一下再補上

學長文章連結:

GitHub連結:

--

--