Integrate steem-api in swift project Part #4 Add user wallet details in app

What Will I Learn?

You will learn how to integrate Steem-api's in swift programming language.
You will learn more on how to store data in arrays and dictionaries.
You will learn how to pass data between two view controllers.
You will learn how to design on storyboard.

Requirements

Xcode
Basic Understanding of Xcode.
Understanding of swift language in iOS development.
Understanding of arrays and dictionaries in swift.
Understanding of segues in swift.

Difficulty

Basic

Tutorial Contents

Welcome back guys to fourth part of our awesome iOS app tutorial. In last part we learn how to pass data from one view controller to another view controller, we make a user profile screen to show details of user steemit account. Today in Part 4 of our tutorial we gonna create and design a new screen which is user wallet details screen. Ok let's start our tutorial by dragging a new view controller on main.storyboard like this :-

Now create a new cocoa touch file and name it userWalletVc and after creating the file, go to your storyboard and set that file as your new viewController class.
Ok now we have view controller and its class to write code, now we gonna first design our viewController by adding some background colour and labels to it like this :-

Screen Shot 2018-03-08 at 8.51.35 AM.png

So what we did here is we drag 6 label on view, 3 labels to left side and 3 labels to right side. The labels which are left side are static and the right one are the label who gonna changed programmatically. So to access them withing our code we need to make their outlets in our userWalletVc.swift file like this :-


import UIKit
class userWalletVC: UIViewController {
    @IBOutlet var sbdBalanceLabel: UILabel!
    @IBOutlet var savingsBalanceLabel: UILabel!
    @IBOutlet var steemBalanceLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Now we need data from steemit to show it in our labels. For this we need to pass the data between view controllers. What we do is we pass data from viewController.swift to userDetailVc.swift and then userDetailVc.swift to userWalletVC.swift. So go to viewController.swift and write code to fetch user wallet details like this in your 'goButtonTapped' function :-


import UIKit
import SwiftyJSON
class ViewController: UIViewController {
    @IBOutlet var nameTextfield: UITextField!
    var userName: String?
    var userBalance: String?
    var finalUserData: [String:AnyObject]?
    var json: [String:AnyObject]?
    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.
    }
    @IBAction func goButtonClicked(_ sender: Any) {
        let url = URL(string: "https://steemit.com/@" + nameTextfield.text! + ".json")!
        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]
                    if let userDetailData = json["user"]!["json_metadata"] as? [String: AnyObject] {
                         DispatchQueue.main.async {
                        self.finalUserData = userDetailData["profile"] as? [String: AnyObject]
                        self.json = json["user"] as? [String : AnyObject]
                        }
                    }
                    DispatchQueue.main.async {
                        self.userName = json["user"]!["name"] as? String
                        self.userBalance = json["user"]!["balance"] as? String
                        self.sendToDetailVC()
                    }
                }catch let error as NSError{
                    print(error)
                }
            }
        }).resume()
    }
    func sendToDetailVC() {
        performSegue(withIdentifier: "userdetailSegue", sender: self)
    }
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "userdetailSegue"{
            let vc = segue.destination as! UserDetailVC
            vc.userName = self.userName
            vc.userBalance = self.userBalance
            vc.finalUserData = self.finalUserData
        }
    }
}

Now we data in json dictionary and we have to pass json dictionary to userDetailVc.swift. For this first we need to create a empty dictionary in our userDetailVc.swift like this :-


import UIKit
import SDWebImage
class UserDetailVC: UIViewController {
    @IBOutlet var userNameLabel: UILabel!
    @IBOutlet var nameLabel: UILabel!
    @IBOutlet var locationLabel: UILabel!
    @IBOutlet var websiteLabel: UILabel!
    @IBOutlet var aboutMeLabel: UILabel!
    @IBOutlet var userBalanceLabel: UILabel!
    @IBOutlet var userImage: UIImageView!
    var userName: String?
    var userBalance: String?
    var finalUserData: [String:AnyObject]?
    var json: [String: AnyObject]?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.userNameLabel.text = self.userName
        self.userBalanceLabel.text = self.userBalance
        self.nameLabel.text = self.finalUserData!["name"] as? String
        self.locationLabel.text = self.finalUserData!["location"] as? String
        self.websiteLabel.text = self.finalUserData!["website"] as? String
        self.aboutMeLabel.text = self.finalUserData!["about"] as? String
        let userImageUrl = self.finalUserData!["profile_image"] as? String
        self.userImage.sd_setImage(with: URL(string: userImageUrl!), completed: nil)
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

Now write the following code in viewController.swift prepare segue method to pass the data in userDetailsVC.swift dictionary which we created above :-


 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "userdetailSegue"{
            let vc = segue.destination as! UserDetailVC
            vc.userName = self.userName
            vc.userBalance = self.userBalance
            vc.finalUserData = self.finalUserData
            vc.json = self.json
        }
    }

Now first add a button on storyboard and make it's segue to user wallet view controller like this :-
Now create action outlet of button in file and call the segue on button click like this :-


import UIKit
import SDWebImage
class UserDetailVC: UIViewController {
    @IBOutlet var userNameLabel: UILabel!
    @IBOutlet var nameLabel: UILabel!
    @IBOutlet var locationLabel: UILabel!
    @IBOutlet var websiteLabel: UILabel!
    @IBOutlet var aboutMeLabel: UILabel!
    @IBOutlet var userBalanceLabel: UILabel!
    @IBOutlet var userImage: UIImageView!
    var userName: String?
    var userBalance: String?
    var finalUserData: [String:AnyObject]?
    var json: [String: AnyObject]?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.userNameLabel.text = self.userName
        self.userBalanceLabel.text = self.userBalance
        self.nameLabel.text = self.finalUserData!["name"] as? String
        self.locationLabel.text = self.finalUserData!["location"] as? String
        self.websiteLabel.text = self.finalUserData!["website"] as? String
        self.aboutMeLabel.text = self.finalUserData!["about"] as? String
        let userImageUrl = self.finalUserData!["profile_image"] as? String
        self.userImage.sd_setImage(with: URL(string: userImageUrl!), completed: nil)
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }    
    @IBAction func userWalletButtonTapped(_ sender: Any) {
        performSegue(withIdentifier: "userWalletSegue", sender: self)
    }
 }

Now repeat the passing data process like we do above to pass the data from there to userWalletVC. First create a dictionary in userWalletVC and then write the following code in userDetailVC prepare segue method :-


override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "userWalletSegue"{
            let vc = segue.destination as! userWalletVC
            vc.json = self.json!
        }
    }

Now we have all data on our userWalletVc, all we need to do is extract the data from json and apply it to our labels. To do this write code like this in userWalletVc.swift :-


import UIKit
class userWalletVC: UIViewController {
    @IBOutlet var sbdBalanceLabel: UILabel!
    @IBOutlet var savingsBalanceLabel: UILabel!
    @IBOutlet var steemBalanceLabel: UILabel!
    var json: [String:AnyObject]?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.sbdBalanceLabel.text = self.json!["sbd_balance"] as? String
        self.savingsBalanceLabel.text = self.json!["savings_balance"] as? String
        self.steemBalanceLabel.text = self.json!["balance"] as? String
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Now run the app and check what you see in your wallet screen. Now we have a page which shows details of user wallet. In next part of tutorial we add validation and all other necessary check on user textfield. If you new to this tutorial, check course curriculum section for previous tutorials of this series. Till then enjoy coding in swift.

Curriculum

Place here a list of related tutorials you have already shared on Utopian that make up a Course Curriculum, if applicable.

Posted on Utopian.io - Rewarding Open Source Contributors