Part 4 — NavigationBar and Codable

In this tutorial, we will learn about NavigationBar and Codable protocol.

IECSE Crash Course: Development with Swift

This article is going to be the fourth article of the series IECSE Crash Course: Development with Swift. Through the course of 10 articles, we are going to make a small app which will display a set of users that we will fetch from the net. While making the app, we will cover some of the most important topics that every iOS developer must know. You can get the code till the previous article here.

In the previous article, we learned about the Dark Mode, now, we are going to add a TitleBar on top.

This would mean embedding our TableView inside a navigation controller. The navigation controller manages the currently displayed screens using the navigation stack. At the bottom of this stack is the root view controller and at the top is the view controller currently displayed. You use methods to push and pop view controllers on and of the stack.

Firstly change the SceneDelegate.swift, we add a navigationController then we put the rootViewController as our tableview.

You could now see a navigation bar at the top , but it feels empty right now. Let’s add a title , we will do that inside the viewDidLoad() in TableViewController.swift.

self.title = “Users”

Your app should look something like this:

Added a navigation title

We can add items in our NavigationBar, let’s add a navigationItem on the left side.

Inside the setupTableView(), we create an UIBarButtonItem to be added in the navigationBar.

let add = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(goToSecondScreen))

We need target and action to do something when we click on the item. Here, target refers to which object the method called is on, which is self, and action is the method to be called.

Let’s make the goToSecondScreen() function. Firstly, we need to make another UIView which we will present on the click of the item.

Make a new file using Command + N save it as SampleScreen.swift.

Here, we create an instance of SampleScreen and we present that screen over our current context.

@objc func goToSecondScreen(){
    let sampleScreen = SampleScreen()
    self.navigationController?.present(sampleScreen, animated: true)
}

Now, we need to make add this item inside our navigationBar.

self.navigationItem.rightBarButtonItem = add

Codeable

Introduced in Swift 4, this lets us perform parsing to/from JSON or other serialized formats. When it comes to parsing, there are two things we need to look at first- encoding and decoding.

Now, let's define a structure that conforms to the codable protocols. It combines the two protocols which are decodable and encodable into one.

The compiler will attempt to automatically synthesize the code required to encode or decode an instance of this struct.

struct User: Codable { 
     var name: String 
     var username : String 
}

Now, we are can use JSONEncoder() and JsonDecoder() on an instance of this structure.

JSONEncoder

First, we create an instance of User and JsonEncoder(), and then, put a try so, we can catch any JSON error that might have in encoding the structure.

do {
   let user = User(name:"nitigya" , username: "itsnitigya")
   let encoder = JSONEncoder()
   let data = try encoder.encode(user)
} catch let jsonError {
    print("Something Went Wrong")
}

JSONDecoder

Next, we create an instance of JSONDecoder(), then create a new user from the previous JSON that we encoded.

do {
   let decoder = JSONDecoder() 
   let user2 = try decoder.decode(User.self, from: data)
} catch let jsonError {
    print("Something Went Wrong")
}

These protocols really come in handy when we are working with REST Api’s as these use lightweight formats to exchange information like JSON, XML. Over the next articles, we will deal with network calls, so let me define a concrete process of receiving data from such calls.

First, we create a struct of the data that we are receiving.

Let’s look at this API — for example, here we are receiving four things.

Looking at the result of the API in Postman, we will make a structure according to the JSON received.

JSON Structure

We make User struct with the id, name, username, website.

Now, address and company are a key to another JSON, so we make another structure according to that as well.

We also conform the structure to the decodable protocol, so we can decode the incoming JSON to objects.

Next, let’s get the data using some function. For now, let’s assume we are getting data from a network call. We will learn about this in the next article.

let data = someNetworkCall()

Now, we decode this data from JSON.

let users = try JSONDecoder().decode([User].self, from: data!)

Finally, we have an array of objects of type Post and to print each element of the array, we can use a simple for-each loop.

users.forEach({ (user) in
    print(user) 
})

Wrapping Up

In this article, we have implemented a Nagivation Bar, introduced encoding and decoding and also gotten a brief overview of an API and it’s structure. You can continue with the series in the next article where we learn how to fetch data from an API.

Congratulations🎉! You have just completed the fourth tutorial!

All of the above-written code is available on Github. Watch this space for more interesting challenges, up next in this series!

Confused about something? Let us know in the responses below. 😄