Make Steem Ticker App in Swift (iOS)

What Will I Learn?

• You will learn making app in Swift.
• You will learn how to use Steem-api's in swift.
• You will learn how to install Cocoapods in swift.
• You will learn how to make api call in swift.

Requirements

• Xcode
• Basic Understanding of Xcode.
• Understanding of swift language in iOS development.
• Basic knowledge of Cocoapods.

Difficulty

• Basic

Tutorial Contents

In today's tutorial we make Steem Ticker iOS App, we make this app in swift programming language. In this app we gonna show the following details :-

• Latest price of 1 Steem in SBD
• Lowest Ask
• Highest Bid on Steem
• Percentage Change
• Steem Volume
• SBD Volume
  Let's start!
• So as i said above that we gonna make a app which show real time price of Steem in SBD and to get those details we need to make api call to Steemit. So, first of all open your xcode and make new project. Name it whatever you want, i used Steem Ticker.
• Now we need to install SwiftyJSON because this pod really helps in parsing json. So open your podfile and write the following code :-

pod 'SwiftyJSON'

Save the podfile and got to your terminal and write

pod install

to install pod in your project.

• After installation just use import SwiftyJSON in your view controller.
• Now go to your storyboard and design your viewcontroller like this :-
  
• So what we do here is we drag 12 label on view, 6 labels to left side and 6 labels to right side. The labels which are right side are static, so change their text from attribute inspector like this :-

• Now we had 6 label in our right side, this labels are gonna hold value for their left side labels. We update right side labels programmatically, so first make outlets of all labels in your viewcontroller.swift file like this :-

import UIKit
class ViewController: UIViewController {
    @IBOutlet var priceLabel: UILabel!
    @IBOutlet var lowestAskLabel: UILabel!
    @IBOutlet var highestBidLabel: UILabel!
    @IBOutlet var percentageChangeLabel: UILabel!
    @IBOutlet var steemVolumeLabel: UILabel!
    @IBOutlet var sbdVolumeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

• Now we have to make an api call to steemit to get latest market stats. So first of all we import swiftyJSON in our view controller so that we can easily handle json data in our app. So import swifty Json pod files under import UIKit in your viewcontroller.swift file like this :-

import UIKit
import SwiftyJSON
class ViewController: UIViewController {
    @IBOutlet var priceLabel: UILabel!
    @IBOutlet var lowestAskLabel: UILabel!
    @IBOutlet var highestBidLabel: UILabel!
    @IBOutlet var percentageChangeLabel: UILabel!
    @IBOutlet var steemVolumeLabel: UILabel!
    @IBOutlet var sbdVolumeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

• Now we make api call to steemit to get our ticker values. To do this make a function of api call in your view controller.swift file and call it in your viewDidLoad() function like this :-

import UIKit
import SwiftyJSON
class ViewController: UIViewController {
    @IBOutlet var priceLabel: UILabel!
    @IBOutlet var lowestAskLabel: UILabel!
    @IBOutlet var highestBidLabel: UILabel!
    @IBOutlet var percentageChangeLabel: UILabel!
    @IBOutlet var steemVolumeLabel: UILabel!
    @IBOutlet var sbdVolumeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.getTickerValues()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    func getTickerValues() {
        let url = URL(string: "https://api.steemjs.com/get_ticker?=value")!
        URLSession.shared.dataTask(with: url, completionHandler: {
            (data, response, error) in
            if(error != nil){
                print("error")
            }else{
                do{
                    var json = try JSONSerialization.jsonObject(with: data!, options: []) as! [String: AnyObject]
                }catch let error as NSError{
                    print(error)
                }
            }
        }).resume()
    }  
}

• Now our almost work is done, the last thing remaining is we need to fill the values we get from api call in labels. To update labels we need the set their value in our getTickerValues function like this :-

import UIKit
import SwiftyJSON
class ViewController: UIViewController {
    @IBOutlet var priceLabel: UILabel!
    @IBOutlet var lowestAskLabel: UILabel!
    @IBOutlet var highestBidLabel: UILabel!
    @IBOutlet var percentageChangeLabel: UILabel!
    @IBOutlet var steemVolumeLabel: UILabel!
    @IBOutlet var sbdVolumeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.getTickerValues()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    func getTickerValues() {
        let url = URL(string: "https://api.steemjs.com/get_ticker?=value")!
        URLSession.shared.dataTask(with: url, completionHandler: {
            (data, response, error) in
            if(error != nil){
                print("error")
            }else{
                do{
                    var json = try JSONSerialization.jsonObject(with: data!, options: []) as! [String: AnyObject]
                     DispatchQueue.main.async {
                    self.priceLabel.text = json["latest"] as! String
                    self.lowestAskLabel.text = json["lowest_ask"] as! String
                    self.highestBidLabel.text = json["highest_bid"] as! String
                    self.percentageChangeLabel.text = json["percent_change"] as! String
                    self.steemVolumeLabel.text = json["steem_volume"] as! String
                    self.sbdVolumeLabel.text = json["sbd_volume"] as! String
                }
                }catch let error as NSError{
                    print(error)
                }
            }
        }).resume()
    }  
}

• Now run the app once and you see all right side labels filled up with the data from steem market. But what about if we need to refresh the data, for now the data only refresh when you run app again. To fix this we need to add a refresh button on our screen. So add a button on your view controller from storyboard like this :-
  

• Now we need to run our api call again on click of "Refresh" button. So first create a action outlet of this button to your viewcontroller.swift and call our getTickerValues function in the button action outlet like this :-

import UIKit
import SwiftyJSON
class ViewController: UIViewController {
    @IBOutlet var priceLabel: UILabel!
    @IBOutlet var lowestAskLabel: UILabel!
    @IBOutlet var highestBidLabel: UILabel!
    @IBOutlet var percentageChangeLabel: UILabel!
    @IBOutlet var steemVolumeLabel: UILabel!
    @IBOutlet var sbdVolumeLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.getTickerValues()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    func getTickerValues() {
        let url = URL(string: "https://api.steemjs.com/get_ticker?=value")!
        URLSession.shared.dataTask(with: url, completionHandler: {
            (data, response, error) in
            if(error != nil){
                print("error")
            }else{
                do{
                    var json = try JSONSerialization.jsonObject(with: data!, options: []) as! [String: AnyObject]
                      DispatchQueue.main.async {
                    self.priceLabel.text = json["latest"] as! String
                    self.lowestAskLabel.text = json["lowest_ask"] as! String
                    self.highestBidLabel.text = json["highest_bid"] as! String
                    self.percentageChangeLabel.text = json["percent_change"] as! String
                    self.steemVolumeLabel.text = json["steem_volume"] as! String
                    self.sbdVolumeLabel.text = json["sbd_volume"] as! String
                    }
                }catch let error as NSError{
                    print(error)
                }
            }
        }).resume()
    }  
    @IBAction func refreshButtonClicked(_ sender: Any) {
        self.getTickerValues()
    }  
}

• Ok that's it, now run the app and check your refresh button. As steem price is not fluctuate too fast so it's hard to get change in our ticker values. But if you refresh after 10 to 15 minutes, then you will get change in your values. So, that's it for now i wish you enjoy this and learn from this. In next part we will try add more functionality to out Steem Ticker App.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---