#20 訂飲料APP|迷客夏|Part1 : 功能介紹

找了以前很愛喝的迷客夏當作訂飲料APP的主題,由於內容有點多,這篇主要介紹APP的功能,詳細說明會寫在其他篇。

練習內容
-AirTable上傳資料/下載資料/更新資料
-SearchController搜尋功能
-包含Section的CollectionView
-ScrollView設計滑動選單

飲品 / 訂購 / 訂單 / 店鋪 (Tab Bar Controller)

設計了四個頁面(飲品、訂購、訂單及店鋪)在Tab Bar Controller中,以下將分別介紹四個頁面的功能。

① 飲品頁面

-點選飲品分類自動切換顯示不同類別的飲品
-左右滑動頁面可以連動上方按鈕切換飲品類別
-點選飲品cell顯示飲品詳細介紹頁面

飲品頁面Demo
飲品頁面 / 飲品詳細頁面

飲品資料庫存在AirTable中,儲存資料包括飲品名稱、價錢(M/L)、有無咖啡因、是否為無糖限定、是否為冷飲限定、飲品介紹及分類。
其中有些飲品只有M或L尺寸,沒有販售的尺寸則沒有價錢資料。

AirTable飲品資料庫

② 訂購頁面

訂購頁面是這個APP最複雜的一頁,包含選取飲料的訂購主頁面、新增飲品頁面、購物車及結帳頁面,其中結帳頁面另外包含了搜尋店鋪用的Serach Controller頁面。

訂購主頁面

-飲品依照不同分類顯示於CollectionView的不同Section中
-右下方購物車按鈕顯示目前訂購總金額及總杯數
-往下滑動頁面時右下角購物車按鈕會縮小,往上滑動時會恢復原本大小

訂購頁面Demo
訂購頁面 (右下角購物車按鈕會隨著上下滑動變更樣式)

新增飲品頁面

-點選訂購頁面的cell會移到新增飲品頁面
-可以輸入姓名、選擇尺寸、甜度、溫度及是否加料
-左下方Stepper可以選擇杯數
-最下方總金額會隨著杯數及選擇的尺寸、加料即時改變
-點選加入購物車後會儲存飲品資料並回到訂購頁面
-點選購物車按鈕後可以看到所新增的飲品內容

新增飲品頁面Demo
新增飲品頁面

購物車頁面

-點選購物車Button可以看到已加入購物車的飲品
-在購物車頁面可以更改杯數及刪除飲品
-最上方總金額及總杯數會隨著修改購物車資料即時變更
-按繼續加購Button會儲存變更並回到訂購頁面

購物車頁面Demo
購物車頁面 / 左滑會出現刪除選項

結帳頁面

-從購物車頁面點選”前往結帳”後會跳出結帳頁面
-TextField會隨著按return鍵切換到下一個欄位
-在備註欄位按return後會收起小鍵盤
-取貨門市使用SearchController讓使用者選取門市,無法直接輸入
-按下送出訂單後會上傳訂單到AirTable,並清空購物車

結帳頁面
結帳頁面 / 欄位未輸入會跳出提示視窗(UIAlert)

送出訂單後會以下列格式上傳到AirTable,這邊分成兩個不同的頁面儲存資料,一頁記錄所訂購的飲品詳細內容(OrderDrink),一頁記錄訂單資料(Order),飲品表單的飲品會記錄相對應的訂單編號,這邊使用AirTable自動生成的資料編號作為訂單編號。

AirTable訂單飲品資料 (OrderDrink)
AirTable訂單資料 (Order)

這邊設計成多個使用者都可以連結到同一個資料庫,以訂單編號來辨識不同訂單,並且會自動儲存訂單編號在使用者手機的UserDefault中。

搜尋店鋪頁面

-點選搜尋icon後會跳到搜尋店鋪頁面
-使用SearchController實現搜尋功能
-自動過濾店鋪名稱或地址包含關鍵字的資料

搜尋店鋪頁面Demo
搜尋店鋪頁面

③ 訂單頁面

-TableView顯示所有訂單(只看得到自己的訂單)
-訂單編號儲存於UserDefault,打開頁面時自動抓取訂單資料
-點選cell顯示詳細訂單畫面,包括聯絡方式及飲品資料

訂單頁面Demo
訂單主頁面 / 訂單詳細頁面

④ 店鋪頁面

-最上方設計地區選項,點選後可以打開城市選單
-選取城市後會顯示該城市的所有店鋪資訊
-點選店鋪cell會連結到該店鋪的Google Map

店鋪頁面Demo
店鋪頁面 / 地區及城市選單

讀取畫面 (Loading View)

這個APP有許多需要下載資料的地方,在讀取時不希望使用者操作畫面,因此使用ViewController設計了全螢幕的讀取畫面,在下載資料時present ,資料下載完畢時dismiss ViewController。

讀取畫面Demo

--

--