期末作業-Step1

製作訂飲料ＡＰＰ單機測試版

完成整個課程複習後，總算開始來製作訂飲料的ＡＰＰ，由於需要用到的技術頗多，加上課程學習上練習的基礎不足，所以預計會拆分成好幾個階段來完成，第一階段的設計展示如下

訂飲料展示畫面

整個佈局說明如下

訂單系統第一階段佈局

先設定飲料與訂單類別，用來存取飲料與訂單資訊

飲料

import Foundation

struct Drink: Codable {
    let name: String
    let dollar: Int
    let description: String
}

訂單

import Foundation

struct Order: Codable {
    
    let userName: String
    let drinkName: String
    let dollar: Int
    let size: String
    let sugar: String
    let ice: String
}

圖片配置(正式會改為API)

MenuTableViewController佈局

設定動態Cell_ID

限制高度

Dynamic Cell佈局

Dynamic Cell程式碼

import UIKit

class MenuTableViewCell: UITableViewCell {
    
    @IBOutlet weak var drinkImageView: UIImageView!
    @IBOutlet weak var NameLabel: UILabel!
    @IBOutlet weak var englishLabel: UILabel!
    @IBOutlet weak var dollarLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

MenuTableViewController程式碼

import UIKit

class MenuTableViewController: UITableViewController {
    
    var drinks = [
        
        Drink(name: "冷露檸果", dollar: 35, description: "冬瓜加檸檬"),
        Drink(name: "雪花冷露", dollar: 50, description: "手工冬瓜")
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
    
    @IBSegueAction func orderDrink(_ coder: NSCoder) -> DetailTableViewController? {
        let controller = DetailTableViewController(coder: coder)
        
        if let row = tableView.indexPathForSelectedRow?.row {
            controller?.drink = drinks[row]
        }
        
        return controller
    }

    // MARK: - Table view data source

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return drinks.count
    }

    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "\(MenuTableViewCell.self)", for: indexPath) as! MenuTableViewCell

        // Configure the cell...
        let drink = drinks[indexPath.row]
        cell.NameLabel.text = drink.name
        cell.englishLabel.text = drink.description
        cell.drinkImageView.image = UIImage(named: drink.name)
        cell.dollarLabel.text = drink.dollar.description
        return cell
    }
}

DetailTableViewController佈局

元件配置

動作元件配置

SegmentedControl設定範例

程式碼

import UIKit

class DetailTableViewController: UITableViewController {
    
    
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var iceSegmentedControl: UISegmentedControl!
    @IBOutlet weak var sugarSegmentedControl: UISegmentedControl!
    @IBOutlet weak var sizeSegmentedControl: UISegmentedControl!
    @IBOutlet weak var menoTextView: UITextView!
    
    var drink: Drink!
    var orders = [Order]()
    let userName = "Jason Chen"
    
    let sizeChoice = ["中杯", "大杯"]
    let iceChoice = ["正常", "少冰", "去冰"]
    let sugarChoice = ["正常", "半糖", "少糖", "無糖"]
    
    var sizeIndex = 0
    var iceIndex = 0
    var sugarIndex = 0
    
    var ice = ""
    var sugar = ""
    var size = ""
    var dollar = 35

    override func viewDidLoad() {
        super.viewDidLoad()
        
        updateUI()

        
    }
    
    func updateUI() {
        
        nameLabel.text = drink.name
        descriptionLabel.text = drink.description
    }
    // 將資料存檔
    func saveOrder(ice: String, sugar: String, size: String, dollar: Int) {
        
        var order = Order(userName: userName, drinkName: drink.name, dollar: dollar, size: size, sugar: sugar, ice: ice)
        orders.append(order)
    }
    
    @IBAction func check(_ sender: Any) {
        
        // 設定好各選項變數
        ice = iceChoice[iceIndex]
        sugar = sugarChoice[sugarIndex]
        size = sizeChoice[sizeIndex]
        if size == "大杯" {
            dollar += 20
        }
        let meno = menoTextView.text!
        
        // 訂購資訊
        let message = "下方為訂購資訊，確定下單請按ＯＫ\n 訂購人：\(userName)\n 飲品：\(drink.name)\n 溫度：\(ice)\n 甜度：\(sugar)\n 容量：\(size)\n 金額：\(dollar)\n 備註\n\(meno)"
        
        // 設定確認對話框
        let alertController = UIAlertController(title: "訂單確認", message: message, preferredStyle: .alert)
        let okAction = UIAlertAction(title: "OK", style: .default) { [self] _ in
            
            // 將資料傳遞到saveOrder()處理
            saveOrder(ice: ice, sugar: sugar, size: size, dollar: dollar)

        }
        let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
        
        alertController.addAction(okAction)
        alertController.addAction(cancelAction)
        
        // 顯示對話框
        present(alertController, animated: true)
        
        
    }
    @IBAction func choiceIce(_ sender: Any) {
        
        iceIndex = iceSegmentedControl.selectedSegmentIndex

    }
    @IBAction func choiceSize(_ sender: Any) {
        
        sizeIndex = sizeSegmentedControl.selectedSegmentIndex
        
    }
    @IBAction func choiceSugar(_ sender: Any) {
        
        sugarIndex = sugarSegmentedControl.selectedSegmentIndex

    }
}

單機作業測試成功後,接下來就是改成用API來讀取價目表跟上傳訂單資訊

期末作業-Step2