Display GitHub Jobs in UITableView + Search — No storyboard

Let’s make a network call to GitHub APIs and display the data inside a UITableView and search for jobs thanks to UISearchController.

What we are going to build

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 12, UIKit, no storyboard & MVC

Introduction

We are going to build a native UITableView that display jobs from the GitHub Jobs APIs alongside a UISearchController to narrow the search results according to user input. Then, when a user click on a cell, we will present the job post url using SFSafariViewController. Here is the program:

1. Set up the project to work without storyboard
2. Create the model
3. Decode the JSON
4. Check JSON response
5. Build the UITableView and display results
6. Build the Search Bar and handle user’s input
7. Present the Safari Controller when user tap on a cell

Start a new Xcode project

Open Xcode > Create a new Xcode project > App template > Call it GitHubJobs and select UIKit interface and lifecycle.

Xcode — New Project

Set up your project to work programmatically

Follow my tutorial first if you don’t know how to remove the storyboard and configure the SceneDelegate:

iOS — Start a project without storyboard |Xcode 12

Also, replace the rootViewController line of code to this one, so we can have a navigation bar at the top of our ViewController that come up with the project.

Create the model

Create a new Swift file called Jobs and copy/paste the following code into it:

We are going to his this model to retrieve the data from the JSON that the GitHub job APIs return.

Let’s decode the JSON

Go ahead and and create a new swift file called Service and copy/paste the following code:

Create the error message

Let’s create another Swift file called ErrorMessage in order to return a message to our users when there are errors decoding the JSON file.

Let’s create the user interface

First, let’s import the following variable, paste the following code over the viewDidLoad method of the ViewController.Swift file:

Best practice: Check the JSON call Before building the UI

Let’s check if the JSON is correctly returning data before building the UITableView. Add the following code to the ViewController.Swift.

Now that you pasted the code in the ViewController.Swift file, call the function loadData() inside the viewDidLoad method.

Run your app and you will see the response from GitHub in the debugger console (bottom interface of Xcode). Now, that we know it works, we can go ahead and build the UITableView.

Screenshot from the Xcode debugger

Add the following delegate method with the ViewController class:

Now, let’s create the UITableView, copy/paste the following code and add the setupTableView() function inside the viewDidLoad:

So, we just created a UITableView programmatically that take all the screen size with cells with a subtitle style that render the title, company, location and the date of creation. And we conformed to the UITableView protocol by adding numberOfRowsInSection and cellForRowAt method.

Run your app and you will see the list of jobs from GitHub!

Screenshot from Xcode simulator

Implement the SearchController

Add the UISearchBarDelegate to the ViewController class:

Before implemtenting the search bar, we have to implement the navigation bar. Copy/paste the following function:

And then, call the following inside the viewDidLoad method:

That way, we have a large title “Dev Jobs” set up and also a search bar integrated in this navigation bar.

Let’s implement the function to handle the result upon user’s input:

Now run your app and try to type “iOS developer” in the search bar and you will have the list rendering the opening positions with that name inside their title or description.👌🏼

Last step: present SFSafariViewController

Now, we only need to present to the user the SFSafariViewController when he click on a row with the url of the job post. Let’s do that:

First, import the SafariServices at the top of the ViewController.Swift file:

Also, add the delegate method to the ViewController class:

Add the following function to the ViewController.Swift:

This is the native way to handle response when the user tap on tableview cell, here we simply asking to open a SFSafariViewController with the url of the job post with 3 lines of code 🤙🏻

Run your app — Now, when you click on a cell, it opens the link!

Screenshot from Xcode

Summary

Swift make it super easy to decode a JSON and by using native Apple user interface elements (UITableView, SearchBar and Navigation bar), we implemented a nice application able to display jobs from GitHub and filter it with a search bar in less than 10 minutes.

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/TableView-GitHubJob