Real-world News App using SwiftUI

Real-world News App using SwiftUI with API handling

Pramod Kumar
Jun 21 · 4 min read

In recent WWDC 2019, as Apple has introduces the SwiftUI, every one is so excited 😯 about this.
So, in this tutorial we are going top discuss all about the SwiftUI. We’re going to make a real-world application for getting the News.
In this app, we’ll cover the following:
- Starting with the project in SwiftUI.
- Creating the UI with SwiftUI.
- Handle the REST API using URLSession and integrating with SwiftUI.
- Navigation from one screen to another.
- Managing the code structure with MVVM.

What is SwiftUI?

SwiftUI is a declarative Component-Oriented framework, a simple way to build user interfaces across all Apple platforms with the power of Swift.

📣 Note: You need to upgrade you Xcode to 11.0 beta 📣

Demo Output

Create New Project

Let’s start by creating the new project, name it as “NewsApp”.
Don’t forget to check the “Use SwiftUI” option.
Follow the following steps for creating the application in the MVVM structure.

Note: Place an image with name “ic_news_placeholder” in “Assets.xcassets”

Create a model (M):

Create a new swift file, name it as “Article”. It’a a model that will hold the details of news.

Our “Article” model have all the fields as per the “https://newsapi.org/v2/"
If we want to use our Article struct as the model which should be used by SwiftUI to build a View it has to conform either Hashable or Identifiable protocol. The only requirement of these protocol is id property, which has to be a Hashable value.
That used with ForEach loop in MainHomeV

Create view for row in List (V):

Now, we’ll start creating a view which represents Article row in list.
Click on File > New > File.
Select “SwiftUI View” > Click “Next”
Give the name as “NewsRowV”
Write the following code:

NewsRowV.swift

Here is the code for the NewsRowV:

Create Main Home with listing (V):

Create a new SwiftUI file, name it as “MainHomeV”.

MainHomeV.swift

We’re creating a List that will be holding the “NewsRowV” objects.
searchQuery that is marked as @State, means that this view is derived from this state. As soon as this state will change, SwiftUI rebuilds this view to reflect the changes.
$searchQuery, It means to get a reference for property wrapper, not value itself. We use it to connect TextField and query variable in two way binding.

Other interesting fact is @EnvironmentObject. It is a part of feature called Environment. We can populate our Environment with all needed service classes and then access them from any view inside that Environment. The Environment is the right way of Dependency Injection with SwiftUI.

Create a ViewModel for main home view (VM):

Now, we need to create a view model for the main home view, hold all the data that will be shown on the home view.
We’ll be make the REST API request in this view model with the help of the URLSession.

MainHomeVM.swift

MainHomeVM class should conform BindableObject protocol, which requires a didChange property. It makes possible to use it inside Environment and rebuild view as soon as it changes. The didChange property should be a Publisher, which is a part of a new Apple’s Reactive framework called Combine. The main goal of Publisher is to notify all subscribers when something changes. That’s why in didSet of our repos array we tell to our subscribers that data changed. As soon as new values appear, SwiftUI will rebuild MainHomeV.

APICaller is a wrapper that is written over the PKNetworking.

Create detail screen for news:

Let’s create another SwiftUI file to show the NewsDetails, name it as “NewsDetailV”.

NewsDetailV.swift

Here is the code for the detail view:

OH YEAH, We Nailed It.

Conclusion

And this is how we can develop our new application with the SwiftUI.
After playing with the SwiftUI more than a week, I really enjoying creating new UI using this new framework. Using, SwiftUI makes UI development very easy, fast and allow us to write very less code.
I’m still exploring the new things in SwiftUI, so please let me know if you found anything new or any error in this tutorial.

Visit this link to download the complete project.

👩‍💻 !!! HAPPY CODING !!! 👨‍💻

Thank you for reading, please hit the recommend icon if like this collection 😊 . Questions? Leave them in the comment.

Pramod Kumar

Written by

http://pramodkumar.tk/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade