UIKit + UITableView + JSON

UITableView With Custom Cells + Details Screen — Part 1

In this tutorial, we will learn how to create a UITableView and a details screen that display data from the BreweryDB APIs

From the author

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 12 & UIKit

Introduction

Recently, I was doing an interview for an iOS developer position and I had the opportunity to do the take-home project. It was a classic test: it consists of decoding a JSON from the BreweryDB APIs, create a list that display the data returned by the JSON and also present a details screen. Let’s create that programmatically using UIKit!

Project Setup

Create a new Xcode project

Open Xcode > New Project > Storyboard Interface and UIKit App Delegate > call it Biirr

Get your API key

Go to the BreweryDB website and sign up to get your API key, you will need it later to make the call and receive the JSON response. Now, create a new Swift file, call it Constants and copy/paste the following code:

Remove Storyboard

1. Go to your main target > Deployment Info > Main Interface > Remove “Main” from the field and hit enter.
2. Go to Info.Plist > Application Scene Manifest > Scene Configuration > Item 0 > Storyboard Name — remove this one from the list with the minus button.
3. Select the Main.storyboard and delete it > move to trash.
4. Replace the current SceneDelegate.swift code with the one under ( we will create the ListViewController soon):

Add SDWebImage with Swift Package

We will use this dependency to download and cache the image from an URL. Copy the following URL https://github.com/SDWebImage/SDWebImage and follow the step below to add the dependency:

Swift Package Manager

Alright, we are good to go with the project setup, now we can code!

JSON Call

Let’s create our Model

We will create the model to conform to the JSON response returned by the endpoint https://sandbox-api.brewerydb.com/v2/beers?key=. You can check out the structure retruned at JSON Formatter & validator website (don’t forget to add your API key).

Screenshot from JSON Formatter & Validator

We will create a serie of 5 files to conform to the structure returned by the BreweryDB JSON response:

Let’s go! First, Create a new folder and call it Models, then add a swift file called BeerResult and paste the following code:

Then, create a swift file called Beer with the following code:

Create another swift file called Label:

And, another one called Style:

Finally, create a last one called Category:

Alright, we just created our Model with 5 files. Now, we can make our JSON call.

Let’s decode that JSON

First, we will write a few error strings to present to the user in case the response from the BreweryDB failed. Create a new Swift file called ErrorMessage, then paste the following code:

Now, let’s make our JSON decoding to decode the URL, create a new file called breweryService and paste the following code in it:

We just created our Model, write some errors messages and decode a JSON response from an API, now we are good to go to create the user interface!

Creation of the UITableView

Let’s create the TableView

Create a new file > CocoaTouch Class > subclass of UIViewController > Call it ListViewController (it’s going to be our rootViewController).

Now, declare the following inside the class and over the viewDidLoad method:

We will use the UITableView to create our list and the connection to the BeerResults model to present the data to our user.

Now, let’s check the response from the APIs before building the UI, copy/paste the following code and add this function inside viewDidLoad method:

Now, read the console, you should see the JSON response with the list of datas — we can go ahead and create the User Interface.

Create the custom UITableViewCell

Create a new file > CocoaTouch Class > Subclass of UITableViewCell and call it BeerCell, then copy/paste the code in it:

let’s add a UITableView, we will create one full screen with the following code:

Xcode invite us add the delegate UITableViewDataSource and UITableViewDelegate to our Class:

Then, to conform to the protocol stubs, hit also fix here!

Now, replace the just created protocols with the following one:

We just said to our program that our UITableView will return a number of rows equal to the number of data returned by the BreweryDB and the cell will have the style of the custom cell that we created earlier with the name, icon and category name returned by the JSON response. Also, don’t forget to add the framework SDWebImage at the top of your ListViewController to download the image:

Add an image and name it placeholderto your Assets.xcassets folder — it’s going to display if the JSON response isn’t returning an icon.

Run the App

Run your project and you will see a nice list of beers:

We are done! In less than 10 minutes, we have creates a model, decode the JSON returned by the breweryDB APIs and create a UITableView with custom cells. Next step: we will add the protocol to make the cell clickable and present another screen with a description, head to the part 2 of this tutorial:

UITableView With Custom Cells + Details Screen — Part 2

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.

GitHub Repository:

Sullivan677/Biirr