『約翰紅茶公司訂飲料app』1.0

串接自訂api，上傳下載儲存網路資料

總算能在最後一堂課前做出訂飲料app雖然還有很多不足的地方！

邊理解上課內容及做app真的時間不夠用呀ＸＤ

約翰紅茶公司是我覺得全台北最好喝的鮮奶茶～

此次以它作主題！

架構

飲料menu

• 下載：利用自訂api串接顯示（解碼）

飲料編輯頁面

• 下載：利用自訂api串接顯示飲料選項（解碼）
• 儲存：利用自訂型別儲存
• 上傳：儲存後上傳至自訂的網路雲端（編碼）

飲料訂購顯示頁面

• 下載：取出上傳的資料下載顯示在頁面上（解碼）

Menu

一開始先設定menu的部分，品項先打在表單

再將表單網址產生api再串接api到cell上

約翰紅茶公司的品項剛好分成三類

所以我利用segment control製作三個分頁

為了讓他有三頁所以把表單api分成三份不知道有沒有更好的方法

以第一頁為例子

利用多個 container view 切換頁面

可以將原本連接的viewcontroller改成tableViewController

一樣要替tableViewController製作新頁面跟新cell還有設定cell的identifier

設定好要的label並在cell中拉好outlet

飲料menu程式碼

先struct產生自訂型別

struct Menu1 : Codable {
let brand : String
let name : String
let price : String
let city : String
let detail : String
let recommendIce : String
let recommendSugar : String
}

抓取設定的api網址

import UIKit
class page1TableViewController: UITableViewController {
var drinks = [Menu1]()
override func viewDidLoad() {
super.viewDidLoad()
if let urlStr = “https://sheetdb.io/api/v1/q5lajoxncprg8".addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
let url = URL(string: urlStr){
URLSession.shared.dataTask(with: url) { (data, response, error) in
let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .iso8601
print(String(data: data!, encoding: .utf8))
if let data = data,let DrinkData = try? decoder.decode([Menu1].self, from: data){
self.drinks = DrinkData
DispatchQueue.main.async {
self.tableView.reloadData()
}
}
}.resume()
}
}

設定cell顯示的資料

這部分看起來很簡單但要注意的地方很多

不小心漏打或打錯資料就顯示不出來了～

override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1 }
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: “page1Cell”, for: indexPath) as! page1TableViewCell
let Drink = drinks[indexPath.row]
cell.page1Name.text = Drink.name
cell.page1Price.text = Drink.price
cell.page1City.text = Drink.city
cell.page1Ice.text = Drink.recommendIce
cell.page1Sugar.text = Drink.recommendSugar
cell.page1Detail.text = Drink.detail
// Configure the cell…
return cell
}

再來是訂購飲料的部分

飲料的選項一樣是串接網路api

所以我又再設了一個全部菜單的api 😅

飲料編輯頁面程式碼

struct Order: Codable {
var orderDrink: String
var orderPrice : Int
}

設定菜單、甜度冰塊等一下會串接到button上

import UIKit
class editTableViewController: UITableViewController {
@IBOutlet weak var iceButton: UIButton!
@IBOutlet weak var sugarButton: UIButton!
@IBOutlet weak var drinkButton: UIButton!
@IBOutlet weak var nameTextField: UITextField!
var orders:[Order]=[]
let sugarStyle = [“正常糖”,”少糖”,”半糖”,”微糖”,”無糖”]
let iceStyle = [“正常冰”,”少冰”,”微冰”,”去冰”,”熱飲”]
override func viewDidLoad() {
super.viewDidLoad()
if let url = URL(string:”https://sheetdb.io/api/v1/n4oty7ptgbfj7") {
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
let decoder = JSONDecoder()
if let data = data {
do{
let drinkData = try decoder.decode([Drink].self, from: data)
print(drinkData.count)
for i in 0…drinkData.count — 1 {
let priceInt:Int = Int(drinkData[i].mPrice!)!
let brand = drinkData[i].brand
let drink = drinkData[i].name
if brand == “約翰紅茶公司” {
let drinkName = “\(drink)”+”大杯”
let oneOrder = Order(orderDrink: “\(drinkName)$\(priceInt)”, orderPrice: priceInt)
self.orders.append(oneOrder)
//print(drinkName)
}
}
}
catch{
print(error)
}
}
//print(self.orders.count)
}
task.resume()
}
}

利用迴圈設定飲料選項

還有設定送出按鈕的內容

@IBAction func drinkButton(_ sender: UIButton) { let controller = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
for drink in orders {
let action = UIAlertAction(title: drink.orderDrink, style: .default) { (_) in
sender.setTitleColor(UIColor.black, for: .normal)
sender.setTitle(drink.orderDrink, for: .normal)
}
controller.addAction(action)
}
let cancelAction = UIAlertAction(title: “取消”, style: .cancel, handler: nil)
controller.addAction(cancelAction)
present(controller, animated: true, completion: nil)
}
@IBAction func sugarButton(_ sender: UIButton) {
let controller = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
for sugar in sugarStyle {
let action = UIAlertAction(title: sugar, style: .default) { (_) in
sender.setTitle(sugar, for: .normal)
sender.setTitleColor(UIColor.black, for: .normal)
}
controller.addAction(action)
}
let cancelAction = UIAlertAction(title: “取消”, style: .cancel, handler: nil)
controller.addAction(cancelAction)
present(controller, animated: true, completion: nil)
}
@IBAction func iceButton(_ sender: UIButton) {
let controller = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
for ice in iceStyle {
let action = UIAlertAction(title: ice, style: .default) { (_) in
sender.setTitle(ice, for: .normal)
sender.setTitleColor(UIColor.black, for: .normal)
}
controller.addAction(action)
}
let cancelAction = UIAlertAction(title: “取消”, style: .cancel, handler: nil)
controller.addAction(cancelAction)
present(controller, animated: true, completion: nil)
}
@IBAction func sentButton(_ sender: UIButton) {
if nameTextField.text?.isEmpty == true {
let controller = UIAlertController(title: “請填入名字稱呼”, message: nil, preferredStyle: .alert)
controller.addAction(UIAlertAction(title: “ok”, style: .default, handler: nil))
present(controller, animated: true, completion: nil)
return
}else{
if iceButton.titleColor(for: .normal) == UIColor.black,
sugarButton.titleColor(for: .normal) == UIColor.black,
drinkButton.titleColor(for: .normal) == UIColor.black{
keepData()
tabBarController?.selectedIndex = 2
//若資料完整則送出上傳資料，並跳轉至統計頁面
}else{
let controller = UIAlertController(title: “請選擇飲料及甜度冰塊”, message: nil, preferredStyle: .alert)
controller.addAction(UIAlertAction(title: “ok”, style: .default, handler: nil))
present(controller, animated: true, completion: nil)
return
}
}
}

儲存、上傳資料的程式碼

自訂新的表單產生api，並設定新的自訂型別

func post編碼上傳至表單上

struct UploadData:Codable {
var date : String
var name : String
var drink : String
var price : Int
}
struct Data : Encodable {
var data : UploadData
}
func post(orderData:UploadData) {
let url = URL(string:”https://sheetdb.io/api/v1/qtg6iphc08cdo")
var urlRequest = URLRequest(url: url!)
urlRequest.httpMethod = “POST”
urlRequest.setValue(“application/json”, forHTTPHeaderField: “Content-Type”)
let order = Data(data: orderData)
let jsonEncoder = JSONEncoder()
if let encoderData = try? jsonEncoder.encode(order){
let task = URLSession.shared.uploadTask(with: urlRequest, from: encoderData) { (retData, res, error) in
let decoder = JSONDecoder()
if let retData = retData, let dic = try? decoder.decode([String:Int].self, from: retData), dic[“created”] == 1 {
print(“ok”)
}else{
print(“error”)
}
}
task.resume()
}
}

儲存資料的function寫在編輯頁面中

func keepData(){
let time = Date()
let formatter = DateFormatter()
//設定時間格式
formatter.dateFormat = “yyyy-MM-dd HH:mm:ss”
let dateData = formatter.string(from: time)
print(dateData)
let nameData = nameTextField.text!
let order = drinkButton.title(for: .normal)!.components(separatedBy: “$”)
let priceData:Int = Int(order[1])!
let orderData = “\(order[0]).\(sugarButton.title(for: .normal)!).\(iceButton.title(for: .normal)!)”
print(priceData)
let newData = UploadData(date: dateData, name: nameData, drink: orderData, price: priceData)
post(orderData: newData)
}
}

Apple Developer Documentation

array = content.components(separatedBy: “＄”) ，將資料用指定的符號來分隔，並將分隔後的每一行資料放入array陣列中 。

飲料訂購顯示頁面

取資料的自訂型別

struct List:Codable {
var date:String
var name:String
var drink:String
var sugar:String
var ice:String
var price:Int
}
struct DownLoad: Codable {
var date:String
var name:String
var drink:String
var price:String
}
func fecth (urlStr:String, complation:@escaping ([DownLoad]?) -> Void) {
if let url = URL(string: urlStr){
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
let decoder = JSONDecoder()
if let data = data, let drinkData = try? decoder.decode([DownLoad].self, from: data){
complation(drinkData)
}else {
complation(nil)
}
}
task.resume()
}else{
complation(nil)
}
}
import UIKit
class showTableViewController: UITableViewController {
@IBOutlet weak var loadingActivityIndicator: UIActivityIndicatorView!
//設定UIActivityIndicatorView
var orders:[List]=[]
func download(url:String){
orders = []
let urlStr = url
fecth(urlStr: urlStr) { (drinkData) in
if let drinkData = drinkData, drinkData.count >= 1 {
for i in 0…drinkData.count — 1 {
let date = drinkData[i].date
let name = drinkData[i].name
let drinks = drinkData[i].drink.components(separatedBy: “.”)
let price = drinkData[i].price
let oneOrder = List(date: date, name: name, drink: drinks[0], sugar: drinks[1], ice: drinks[2], price: Int(price)!)
print(drinks)
self.orders.append(oneOrder)
DispatchQueue.main.async {
self.tableView.reloadData()
}
self.orders.reverse()
//reverse是讓array反序
}
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
download(url: “https://sheetdb.io/api/v1/qtg6iphc08cdo")
self.tableView.reloadData()
}
//開始載入動畫
func startLoadingList(){
loadingActivityIndicator.startAnimating()
}
//停止載入動畫
func stopLoadingList(){
loadingActivityIndicator.stopAnimating()
loadingActivityIndicator.hidesWhenStopped = true // 當停止動畫後隱藏
}

設定cell顯示訂購資料

override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
print(orders.count)
return orders.count+1
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
startLoadingList()
if orders.count — indexPath.row != 0 {
let orderDrink = orders[indexPath.row]
let cell = tableView.dequeueReusableCell(withIdentifier: “showCell”, for: indexPath) as! showTableViewCell
DispatchQueue.main.async {
self.stopLoadingList()
cell.orderName.text = orderDrink.name
cell.orderDrink.text = orderDrink.drink
cell.orderPrice.text = String(orderDrink.price)
cell.orderSugar.text = orderDrink.sugar
cell.orderIce.text = orderDrink.ice
cell.orderTime.text = orderDrink.date
}
return cell
}
else {
let cell = tableView.dequeueReusableCell(withIdentifier: “totalCell”, for: indexPath) as! SumTableViewCell
if orders.count != 0 {
var total = 0
for orders in orders {
total += orders.price
//設定金額加總
}
cell.sumLabel.isHidden = false
cell.sumLabel.text = “總金額$\(total)元”
cell.cupX.text = “總杯數\(orders.count)杯”
}else{
cell.sumLabel.isHidden = true
cell.cupX.text = “目前沒有訂單”
}
return cell
}
}

做完這個app把一些觀念釐清也發現還有很多不足的地方

也還有很多可以再做修改的地方

☑️ 再增加中杯大杯及一些限制條件（有些不能做熱飲）

☑️ 資料會延遲，製作下拉式更新

☑️ 同步修改資料（在app及網路）

☑️ autolayout尚未拉完成

☑️ 店面資訊等等

參考資料

[iOS study]模仿飲料APP，上傳資料到後台，以可不可熟成紅茶為例

辦公室最愛的活動『訂飲料』之二