來寫一個訂飲料app

寫這個APP的時後發現最難的不是寫程式碼，而是調整auto layout及搜集飲料菜單把它寫成JSON，真的好瘋啊，第一次用auto layout的時候整整花了三天才稍稍可以切出一個像樣的版本。

今天就先來專案大致上的功能吧，並大概說一下每個頁面用到的技術。後續程式碼之後再詳細介紹 Let’s go!

所有畫面

學習目標

• Auto Layout
• API串接
• UserDefaults
• airtable創建訂單資料
• github創建JSON的飲料菜單API
• FavQs模擬使用者登入拿token
• collection view
• UIAlertController

成果 - 菜單頁面

菜單頁面的操作

• banner使用scroll view + Timer.scheduledTimer做輪播
• 選單Bar下拉選單使用collection view切版
• 飲料List使用table view，將飲料分成多個section
• 使用github自己建立的Json Api 資料
• 使用@IBSegueAction將飲料選項資料傳遞到詳細頁

成果 -菜單頁面

飲料詳細頁

• 使用scroll view + Frame Layout做固定在底下的浮動元件
• 使用computed計算金額
• UserDefaults取得登入者的名字，判斷是否需要導進登入頁面
• 利用airtable儲存訂單資訊
• UIAlertController顯示提示訊息

成果 - 登入頁面

登入及註冊畫面

• JSONEncoder及JSONDecoder解碼及編碼api資料
• URLSession.shared.dataTask打api
• FavQs模擬使用者登入拿token後，UserDefaults儲存登入者的名字
• instantiateViewController及present跳轉回菜單頁面

成果 — 訂單頁面

訂單頁面

• tableview的editingStyle做出刪除的方法
• UIActivityIndicatorView做出api撈取資料的狀態
• randomElement亂數隨機跑出頭像的emoji以及背景

附上github

GitHub - hihiyuru/WOOTEA