Build SwiftUI App with API request

Fetching data from GitHub API and publish with List in SwiftUI

Nikita Koniukh

Published in

MSApps Development

4 min readMay 14, 2020

Photo by Michał Parzuchowski on Unsplash

Intro

Here I will not explain what is it SwiftUI, because if you already started reading this article, you definitely know what it is 🤪. I not, visit developer.apple.com to read more about SwiftUI. Also, I don't want to explain how to create a new project (please don't forget to check SwiftUI instead of Storyboard😂)

In this article, I will show how I've built a simple app that does call request and fetching result on the List(TableView). We’ll use GitHub open-source API.

So Let’s dive straight into what we love to do — coding 🧑🏻‍💻.

OTR, I love to use emoji 🤫

1. Building API Service 🧠

For this task, I’m using the Alamofire networking library to make my network requests. Also, for downloading and cashing images, was used AlamofireImage. It’s not the main topic of our article so you can check the code by the link in the open project at GitHub.👍

2. ViewModel

Ok, we have got results. But how we can update our view?

Let’s create our ViewModel and it will conform to ObservableObject protocol. Then mark @Published any properties you want to be observed by SwiftUI within this model. In this class, we create a property “repos” that marked with “@Published” property wrapper.

Also, we need to create an actual PassthroughSubject. PassthroughSubject is used to send values to subscribers when they become available.

And finally create and call ain Init() a function “fetchRepo”, where we call ”downloadTrendingRepos”.

Here I also created a property called “isLoading”. Its a boolean state of completion downloading repos. By default the state is true but when we’ve finished downloading, the state changes to false. I’ll use it in the future for showing my custom indicator.

3. Main ContentView

Here, in fact, we begin our work with SwiftUI. For now, we’ve been added Text to our View “🔥HOT REPOS🔥 “. We have to add at least one object 🤷‍♂️ because the compiler will show us an error. Next, create an instance of our view model: @ObservedObject var repoViewModel = RepoViewModel()

@ObservedObject will wrap your object into a dynamic view property. It allows SwiftUI to subscribe to your object. And if our model will changes, we can update our View.

The next step is to make a design for each cell.

4. List “Cell”

Create a new file “RepoCell”. This file is similar to UITableViewCell that created in UIKit. Also here we add to the variable “repoModel: Repo” which will hold our object.

At this stage, we will build the design of our cell. This process reminds me of the function “setupCell” that I’ve created in the UITableViewCell. What I like about the whistle is that I don’t need to create a separate xib and a Swift file. I can write everything in one View. Of course, we can split the code of our View into separate views. But for this project, we will leave everything in one file.

Vertical Devider 🤯. It took me a while to figure out how to draw the vertical lines that in UIKit we made using with Views. In SwiftUI I’ve used “Devider()”. I've put him to HStack and gave a “.frame(width:3) .background(Color.gitHubText)”.

When I needed to pick a color, I could not find the variation of colors that were previously in UIKit. So I decided to create a custom color. Here I’ll show a few steps on how to create it.

Cool thing, right? You can use the preview in Xcode to see the result in “live mode”.

5. Put everything together

We are done with our cell and now we are returning to our main view.

Follow Where we started We created a project in which there was a View and the text inside this view was a text. So first let's wrap all our View with NavigationController😱😱 In SwiftUi its called NavigationView. And this brings us for free all the animation and logic.

In the following order, add our TableView. Exactly, you’re right!😁 No more Table or CollectionView. Instead, we have a List. No more delegates and data source!😮