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

上次寫了如何製作飲料訂單的畫面(連結在此)，這次要說明如何將完成的訂單上傳、下載和刪除，將app 與 Airtable 網路表單做連結，製作出以下畫面：

註冊及使用 Airtable

首先在 Airtable 註冊一個帳號 https://airtable.com/
依據這個網站的步驟，一步一步建制我們要上傳的項目，並製作一些虛擬的訂單如下：

取得表單的連結位址：
1. 在 Airtable 已經登入的狀態下，開啟頁面 https://airtable.com/api
2. 左邊切換到 AUTHENTICATION 的分類，找到右邊連結的網址

接下來要取得 API key，等等 Xcode 程式要連結 Airtable 的時候必須使用到：1. 先連接到 https://airtable.com/account
2. 點選 Generate API key

在 Postman 上測試你的 Airtable 表單

1. 閱讀 Postman 的安裝 & 使用說明
2. 將剛剛在 Airtable 取得的 API key 輸入到 Authorization(授權)的頁面，Type 選 “Bearer” ，將剛剛複製下來的 API key 貼到 Token的欄位裡面。
3. 將網址也貼到上方的欄位，選擇 “GET”取得資料。

4. 如果順利的話，你輸入的資料就會以 Json 的格式呈現在下方！

Airtable 的 Json 格式

下載 Airtable 的資料

1. 依據 Airtable 的 Json 格式，在 Xcode 先新增 file：

id 因為上傳才有、下載時不需要，所以設為 optional

2. 新增表單畫面，這邊因為想要分成 訂單的 TableView 和 固定在下方不動的總結 View，選擇新增一個 ViewController 而非TableViewController ，並將其設定為 UITableViewDataSource & UITableViewDelegate。

class ListViewController: UIViewController, UITableViewDataSource , UITableViewDelegate {
  override func viewDidLoad() {
        super.viewDidLoad()
        
        listTableView.delegate = self
        listTableView.dataSource = self
  }
}

3. 建立 TableViewCell.swift 並拉出相對應的 outlet

4. 連結 Airtable 並下載資料

var orderArray = [OnlineOrder.Record]()
    
//抓訂單
func fetchOrder(){
 let url = URL(string: "https://api.airtable.com/v0/這邊輸入你的網址")!
 var request = URLRequest(url: url)
    request.setValue("Bearer keyXXXXXXXXXXXXXX", forHTTPHeaderField: "Authorization")
    request.httpMethod = "GET"
    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
    URLSession.shared.dataTask(with: request) { data, response, error in
    let decoder = JSONDecoder()
    if let data = data{
      do{
       let onlineOrder = try decoder.decode(OnlineOrder.self, from: data)
       DispatchQueue.main.async {
       self.orderArray = onlineOrder.records
       self.listTableView.reloadData()
        }
      }catch{
       print(error)
      }
     }
    }.resume()
}

上傳資料到 Airtable

var orderList = OrderList()
struct OrderList: Codable{
    var name: String
    var drink: String
    var image: String
    var sugar: Sugar
    var ice : Ice
    var topping: String
    var price: Int
}
func uploadOrder(){
    
 let url = URL(string: "https://api.airtable.com/v0/這邊輸入你的網址")!
 var request = URLRequest(url: url)
    
    // 上傳資料所以設定為POST
    request.setValue("Bearer keyXXXXXXXXXXXXXX", forHTTPHeaderField: "Authorization")
    request.httpMethod = "POST"
    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        
    //將上傳的變數分別設定為controller內已有的變數
    let encoder = JSONEncoder()
    let confirmOrder = OnlineOrder.Record(fields: Field(name: orderList.name, drink: orderList.drink, sugar: orderList.sugar.rawValue, ice: orderList.ice.rawValue, topping: orderList.topping, price: "\(orderList.price)", image: orderList.image), id: nil)    //上傳的時候沒有id，故設為nil
    
    request.httpBody = try? encoder.encode(confirmOrder)
    URLSession.shared.dataTask(with: request) { (data, response, error) in
    if let data = data{
       do {
          let decoder = JSONDecoder()
          let onlineOrder = try decoder.decode(OnlineOrder.self, from: data)
          print(onlineOrder)
       }catch{
          print(error)
       }
      }
    }.resume()
 
  }

刪除資料並更新 Airtable

1. 參考 Airtable API 的頁面：https://airtable.com/api ，對於 Delete records的說明如下： “選擇 DELETE” ，網址後面加上 “/要刪除的ID”

2. 實事求是的我，在 Postman 實測是否成功刪除，下方顯示 “deleted”: true，代表已經刪除成功，回到 Airtable 的表格，真的有一列不見了！

3. 於是將要刪除的該列找出 id，然後將 id 接在原本的網址上面重新上傳，果然將訂單左滑，真的就刪除了～～（超開心）

左滑刪除後，看到 Airtable 的該筆資料消失

var deleteID: String?
//刪除不要的資料，加上 iPhone 向左滑刪除的動畫
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    deleteID = orderArray[indexPath.row].id
    orderArray.remove(at: indexPath.row)
    tableView.deleteRows(at: [indexPath], with: .automatic)
    tableView.reloadData()
    updateOrder()
    }
//刪除資料重新上傳
    func updateOrder(){
    
    let url = URL(string: "https://api.airtable.com/v0/你的網址/\(deleteID!)")!
    var request = URLRequest(url: url)
    
    // 刪除該筆資料，httpMethod為DELETE
    request.setValue("Bearer keyn2wXCcFLNHFMWe", forHTTPHeaderField: "Authorization")
    request.httpMethod = "DELETE"
    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        
    // POST所提供的API，Value為物件的陣列（Array），所以利用Dictionary實作
    let encoder = JSONEncoder()
    let confirmOrder = orderArray
    request.httpBody = try? encoder.encode(confirmOrder)
    URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let httpResponse = response as? HTTPURLResponse {
                print(httpResponse.statusCode)
            }
    }.resume()
 
   }

4. 刪除之後要新增訂單，於是我加了一個 bar item button，可以連到飲料種類的畫面，重新新增訂單。整個 App 就完成了！

訂飲料送出訂單的畫面

感謝名單：

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

可不可熟成訂茶飲App

IOS11 APP『Swift4』實例說明 — 訂飲料App

呼～花了一個月終於完成啦！
真是非常複雜的過程，能夠克服重重困難，自己也很得意呢～～