#11 訂飲料 App,上傳資料到後台

Binyu
Binyu
Jun 30 · 3 min read

作業目的: 學習串接後台 API,新增讀取後台資料 。

這次搭配的雲端平台是 Airtable,實做定飲料APP。

我在Airtable件了兩個Table,一個是Menu,另一個是訂單。

APP功能

  1. Menu

Menu頁面用CollectionViewController來實作,將Airtable上的資料透過Json轉成Data型別後,再變自訂型別下載到專案裡,之後將資料顯示在CollectionViewController上,點選圖片後會切換到新增的頁面。

2. 統計顯示訂購的咖啡訂單

這頁面用tableViewController,因為資料量不固定而選dynamic tableView,從airtable抓取已訂購的資料並顯示,且將統計出總數量跟總金額顯示在上方,如想要修改資料可以點Cell,會切換到編輯頁面,並將資料傳送到編輯畫面。

3. 新增編輯

新增and編輯的頁面使用TableViewConrtoller,並使用staticTableView,在裡面設定圖片的顯示、咖啡的介紹、訂購人的姓名、咖啡的Size、咖啡的數量,並顯示目前訂購的杯數跟金額,等內容確定後,按下加入訂單Button將資料傳送到Airtable。當從統計顯示訂購的飲料清單點選Cell也會切換到此頁面並將點選的訂單資料傳送到此頁面,就可以更改訂單,更改後上傳並更新這筆資料,如果訂購人跟咖啡大小其中一項沒有點選是無法加入訂單的,會用AlertController來提示要填選資料。

4. 刪除單筆資料

想要刪除單筆資料可以在統計的頁面,將Cell左滑會顯示刪除Button,點選之後會更新此頁面並從Airtable的統計訂單移除這筆資料。