#20 初韻訂飲料 App — (1)製作畫面

最近喝到人生當中最最感動的楊枝甘露，
是出自這家從基隆發跡，來到台北開立門市的新興飲料店 — 「初韻」，
因為實在太喜歡了，
我決定來做他們的 App，希望有朝一日初韻老闆可以看到我，
然後使用我的 App 來給他們的客戶訂飲料哈哈，
這份作業可是我傾盡心力做的啊～

首先將畫面分成三個 Tab Bar : 首頁、分店、訂單，
預設是首頁有一些漂亮的畫面當作廣告，
然後可以連結到訂單畫面。
這裡使用到 stack view + scroll view 的功能，做出左右捲動的畫面
（可以點選連結參考：彼得潘教學，懶得寫程式版本）
效果如下：

接下來製作訂單及分店畫面：
1. 先將所有飲料分類、飲料名稱、圖片、價錢都存放在一個 file 檔：

將飲料分類設成 struct Menu

2. 設定 CategoryTableViewController，使用 Dynamic Prototypes，將 Table View Cell 連結到CategoryTableView，寫程式呈現飲料分類畫面：

//調整列高
tableView.rowHeight = view.frame.height/CGFloat(menu.count+1)
tableView.estimatedRowHeight = 0
//輸入TableView內容
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "categoryTable", for: indexPath)
        cell.textLabel?.text = menu[indexPath.row].category
        return cell
    }

3. 選擇的飲料分類，傳送到下一頁取名為 categoryNumber

@IBSegueAction func showDrink(_ coder: NSCoder) -> orderTableViewController? {
        let controller = orderTableViewController(coder: coder)
        controller?.categoryNumber = tableView.indexPathForSelectedRow!.row
        return controller
    }

4. 飲料頁面 orderTableViewController，有圖片、飲料名稱及價錢。這邊的列高是採用「固定圖片高度＋設定圖片及 stack view 的 Autolayout」來設定

let menu = Menu.data
var categoryNumber : Int = 0
//顯示上頁傳送過來的 categoryNumber 的飲料列數
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return menu[categoryNumber].drink.count
}
//顯示上頁傳送過來的 categoryNumber 的飲料種類
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "orderTable", for: indexPath) as! orderTableViewCell
let drink = menu[categoryNumber].drink[indexPath.row]
cell.drinkNameLabel.text = drink.drinkName
cell.drinkPriceLabel.text = String("$\(drink.drinkPrice)")
cell.drinkPicImageView.image = UIImage(named: drink.drinkPic)
return cell
}

5. 傳送飲料名稱及價錢到下一頁的 detailTableViewController：

@IBSegueAction func showDetail(_ coder: NSCoder) -> detailTableViewController? {
let controller = detailTableViewController(coder: coder)
controller?.orderDrinkName =  menu[categoryNumber].drink[tableView.indexPathForSelectedRow!.row].drinkName
controller?.orderDrinkPrice = menu[categoryNumber].drink[tableView.indexPathForSelectedRow!.row].drinkPrice
return controller
}

6. 訂購內容 detailTableViewController，設定飲料的冰塊、甜度、加料等資訊，在下方試算目前金額：

//設定加料的UIPickerView
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return orderTopping.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
orderToppingName = orderTopping[row].toppingName
orderToppingPrice = orderTopping[row].toppingPrice
return "\(orderToppingName!) + $\(orderToppingPrice!)"
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        toppingRow = row
        updateTotalPrice()
}
func updateTotalPrice(){
        if toppingRow == 0 {
        orderTotalPrice = orderDrinkPrice!
        } else {
        orderTotalPrice = orderDrinkPrice! + orderTopping[toppingRow].toppingPrice
        }
        orderTotalPriceLabel.text = "$\(orderTotalPrice!)"
    }

7. 設定分店資料，先製作一個 file 檔放入所有分店資料，因為用到MKMapView，需要先在利用 Mac 的 Maps App 查詢經緯度，一併輸入資料當中。

8. 製作一個 branchTableViewController，使用 Dynamic Prototypes，將 Table View Cell 連結到 storeTableView，不同的是下方要置入MKMapView，之後才能用程式放入分店地圖：

9. 將所有分店的資料放入，並參考這篇教學顯示地圖 & 地圖標記。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "storeCell", for: indexPath) as? storeTableViewCell
        else {return storeTableViewCell()}
        
        let branch = branches[indexPath.row]
        
        cell.storeNameLabel?.text = branch.storeName
        cell.storePhoneLabel?.text = "TEL | \(branch.storePhone)"
        cell.storeTimeLabel?.text = "OPEN | \(branch.storeTime)"
        cell.storeAddresslabel?.text = "ADD | \(branch.storeAddress)"
        cell.storeMapView?.region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: branch.latitude, longitude: branch.longitude), latitudinalMeters: 300, longitudinalMeters: 300)
        
        let store = MKPointAnnotation()
            store.title = "\(branch.storeAddress)"
            store.coordinate = CLLocationCoordinate2D(latitude: branch.latitude, longitude: branch.longitude)
        cell.storeMapView?.addAnnotation(store)
        return cell
    }

10. 完成分店資料！

下一篇要解說如何連結網路資料，上傳/下載訂飲料資料。

#135 初韻訂飲料 App — (2)利用 Airtable處理資料的上傳及下載