iOS Developer: From Noob to Ninja in 30 days — Day 7, Cloning Binance App, Api and Models

In this post I will be talking about the Api and Model used in the Home view and Market view of the Binance App.

Before I start cloning that App maybe you need to know what is an API.

What is an API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Binance you’re using an API.

It is common to find APIs provided by some Apps, fortunately for us Binance provides his own API documentation.

API Documentation

Binance API Documentation

What is Binance?

Binance is one of the largest and most popular exchanges around the world. I would like to suggest you invest in bitcoin, but that is another topic.

Home Screen and the PairModel

We will use the endpoint /api/v3/ticker/24hr

I show you which are the keys used from the json response.

Definition of PairModel for Home View

1. The pair symbol used on this item.
2. The price change percent for the pair symbol.
3. The last price for the price symbol.

The PairModel would be defined by

struct PairModel: Codable {
  let symbol: String // 1
  let priceChangePercent: String // 2
  let lastPrice: String // 3
}

The Pair model is conforming the Codable protocol, where Codable is a typealias of Encodable and Decodable.

public typealias Codable = Decodable & Encodable

If you need to learn more about Codable and how to used you can follow the link below.

Codables: A better way parse data in Swift

Definition of PairModel for Market View

As you can see we created the PairModel but this model is not using all the properties, we are applying the YAGNI principle, we only set the used properties and not more.

If you want to learn more about YAKNI take a look at the link below.

YAGNI: You Ain’t Gonna Need It

There is something special about this model, all properties are of type String because that is the type provided by that JSON response, but using String it would be difficult to set currency or percentage formatter for each property.

Fortunately for us Swift provides CodingKeys and the init(from decoder: Decoder) throws, in that place we can convert from String to Double.

struct PairModel: Codable {
  let symbol: String
  let lastPrice: Double
  let priceChangePercent: Double
  private enum CodingKeys: String, CodingKey {
    case symbol
    case lastPrice
    case priceChangePercent
  }
  init(from decoder: Decoder) throws {
    let container = try decoder.container(keyedBy: CodingKeys.self)
   
    symbol = try container.decode(String.self, forKey: .symbol)
   
    let lastPriceString = try container.decode(String.self, forKey: .lastPrice)
    lastPrice = Double(lastPriceString) ?? 0
    let priceChangePercentString = try container.decode(String.self, forKey: .priceChangePercent)
    priceChangePercent = Double(priceChangePercentString) ?? 0
  }
}

If you want to know more about CodingKeys you can take a look on the link below.

Codable cheat sheet

Talking a bit about Table Cell views

When you are working with cells there are three ways to do it.

1. Using storyboards, the problem with this type would be that it is difficult to reuse the cell in another table view. (We can’t use this type).

If you want to know more about Configure a Cell with Custom Views in Storyboards you can follow the link below.

Apple Developer Documentation

1. Using xibs, this custom view allows to reuse this view in different places. (We can use this type).

If you want to know how to create an custom view using xibs you can follow the link below.

Custom UITableViewCell from xib file in swift 3

2. Programmatically cell view, this view will be created using code and also allows to reuse this view in different places. (We can use this type)

Swift — Create Custom TableView Cell with programmatically in iOS

With that being said we can use Xibs and Programmatically views for now I will choose Xibs.

PairModelViewCell

Let’s create the PairModelTableViewCell, that cell will be used in Home view and Market view.

final class PairModelTableViewCell: UITableViewCell {
  @IBOutlet weak var symbolLabel: UILabel?
  @IBOutlet weak var priceLabel: UILabel?
  @IBOutlet weak var changeLabel: UILabel?
  @IBOutlet weak var changePercentBackgroundView: UIView?
}

I explain you how to combine each property with a view in the image below.

PairModel and PairModelViewCell

Well we finish this post for now, I’ll keep working on this clone, let me know what de you think?, keep learning, see you soon.

Steve jobs: “We’re here to put a dent in the universe. Otherwise why else even be here?”.