100道iOSApp謎題 #20 訂飲料 App(1),上傳資料到後台

作業題目:

App Demo
  1. 使用Dynamic Table View顯示飲料清單
飲料Menu文字檔
  • 把飲料Menu的文字檔拉進Assets裏面
Assets.xcassets
  • 在viewDidLoad裡把Menu的內容讀出來存在Array裏面
DrinksTableViewController.swift
  • 把飲料內容顯示在TableView上
DrinksTableViewController.swift

2. 使用Static Table View製作飲料訂購單

  • 在Menu點選飲料後,會自動把飲料名稱設定到訂購單中

做法:在DrinksTableViewController裡透過prepare把選到的飲料名稱傳到DrinkDetailTableViewController裏面

DrinksTableViewController.swift
  • 在DrinkDetailTableViewController的viewDidLoad把飲料名稱顯示出來
DrinkDetailTableViewController.swift

3. 送出飲料訂購單(doneButton)

  • 先檢查名字有沒有填寫,若沒有就跳出提醒視窗
DrinkDetailTableViewController.swift
  • 提醒視窗的實作:
DrinkDetailTableViewController.swift
  • 將SegmentedController的index轉成字串:

這裡自定義一個function將index轉成字串,由於字串不同,所以使用closure來做變化:

DrinkDetailTableViewController.swift
飲料尺寸
飲料冰度
飲料甜度
  • 是否加購珍珠則由Switch表示
加購白玉珍珠
  • 最後就建立一個Order物件存放所有飲料細項
新的訂單物件
  • 送出訂單後顯示進行中

上傳訂單的實作內容寫在OrderController的class裏面,這邊只需要將剛產生的新訂單當作參數傳進去(第93行)。呼叫postOrder之後,會在背景執行上傳的動作,此時會進入第99行~第103行,建立一個ActivityIndicator顯示在畫面上,表示目前訂單正在上傳中。當postOrder執行完畢之後,會執行第94行~第97行,跳出提醒視窗表示訂購完成。按下OK之後就呼叫popViewController回到飲料Menu的頁面。

DrinkDetailTableViewController.swift
  • 上傳訂單(使用SheetDB)

連結SheetDB的步驟:

用Google帳號註冊登入SheetDB

新增一個Google Sheet並在第一列設定資料名稱

資料名稱和自定義的型別的property是一樣的

Order.swift

將Google Sheet設爲公開

將Google Sheet連結貼到SheetDB中

複製API連結放進程式碼中

參考API Documentation

  • 使用POST新增資料
SheetDB:POST
Order.swift
  • @escaping的運用

postOrder的參數有兩個,一個是要上傳訂單order,另一個是上傳結束後要執行的動作,這邊使用到closure: @escaping (String, String) -> Void ,在 uploadTask 執行結束時,呼叫 completion 並傳入 (String, String)兩個參數,這兩個參數就會對應到呼叫postOrder時所定義的 (title, msg) ,接着就執行 in後面的程式,也就是呼叫showAlert

同樣地 showAlert也有自定義一個closure會在 okAction 結束時被呼叫:

4. 下載上傳的訂單

訂購明細畫面
  • 使用GET取得資料
SheetDB:GET

在OrderListTableViewController的 viewDidLoad() 裏面呼叫 fetchOrders 下載訂單資料,下載還在進行時會顯示 activityIndicator ,下載結束後會得到訂單列表 orders ,呼叫 reloadData() 將訂單更新到TableView上。(和UI有關的動作要放在 DispatchQueue.main.async 裡執行)

5. 顯示訂單資料

OrderListTableViewController.swift

--

--