期末作業-Step2

介接Airtable商品價目表

接續上次完成的Prototype設計, 將整個APP改為透過API跟Airtable索取飲料價目表, 並上傳訂單資訊, 這部分將分成兩個階段來做, 本次將以抓取價目表為主。

期末作業

Airtable價目表範例

Airtable表格製作範例請參考peter文章

利用 Airtable 製作 iOS App 連結的後台資料

設定並取得API

詳細操作步驟一樣參考下方連結

串接 Airtable的 API 開發 iOS App

接下來的部分就比較繁複, 先透過postman驗證api抓資料沒問題, 再用Json分析工具解析格式, 建立好物件Codable型別, 再用playground先跑一輪, 確定都正常後才上APP進行抓取

Postman測試API

JSON Editor Online分析JSON格式

playground設計Codable型別與測試下載資料

完成後就可以上版套用

物件型別設定

struct DrinkResource: Codable {
    let records: [Record]
}

struct Record: Codable {
    let fields: Field
}

struct Field: Codable {
    let name: String?
    let dollar: Int?
    let description: String?
    let image: [Image]?
}

struct Image: Codable {
    let url : URL
}

設定下載函式

    var drinks = [Record]()
    let api = "patWEGAksQXFHL4"

    func fetchDrink() {
        if let url = URL(string: "https://api.airtable.com/v0/appFhXTZoOT4a7WPJ/Drink") {
            
            var request = URLRequest(url: url)
            request.setValue("Bearer \(api)", forHTTPHeaderField: "Authorization")
            
            URLSession.shared.dataTask(with: request) { data, response, error in
                if let data,
                   let response = response as? HTTPURLResponse,
                   response.statusCode == 200,
                   error == nil {
                    // 驗證資料抓取
                    // let content = String(data: data, encoding: .utf8)
                    //                    print(content)
                    
                    let decoder = JSONDecoder()
                    do {
                        let drinkResource = try decoder.decode(DrinkResource.self, from: data)
                        self.drinks = drinkResource.records
                        print(self.drinks.count)
                        DispatchQueue.main.async {
                            self.tableView.reloadData()
                        }
                        
                    } catch {
                        print(error)
                    }
                    
                } else {
                    print(error ?? "download error")
                }
            }.resume()
        }
    }

在ViewDidLoad()中套用

    override func viewDidLoad() {
        super.viewDidLoad()
        
        fetchDrink()
            
    }

設定DataSource

  
    // 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].fields
        cell.nameLabel.text = drink.name
        cell.descriptionLabel.text = drink.description
        cell.dollarLabel.text = "$\(drink.dollar?.description ?? "30")"
        
        if let url = drink.image?[0].url {
            cell.photoImageView.kf.setImage(with: url)
        }

        return cell
    }

注意圖片是透過第三方套件抓取，所以要匯入套件，請參考peter下方文件

使用 SPM 安裝第三方套件 — 以抓圖套件 Kingfisher 為例

成功後的狀態

接下來我們要處理上傳訂單資訊，連結如下

期末作業-Step3