Image for post
Image for post
Real-world News App using SwiftUI

Real-world News App using SwiftUI with API handling

Pramod Kumar
Jun 21, 2019 · 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 📣

Image for post
Image for post
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 “"
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:

Image for post
Image for post

Here is the code for the NewsRowV:

Image for post
Image for post

Create Main Home with listing (V):

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


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 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”.

Image for post
Image for post

Here is the code for the detail view:

Image for post
Image for post
OH YEAH, We Nailed It.


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.


Learn Together, Grow Together

Pramod Kumar

Written by


Apple developer can share about Xcode, Swift, Objective-C and SwiftUI or any suggestion/knowledge that might be occurred while development of application.

Pramod Kumar

Written by


Apple developer can share about Xcode, Swift, Objective-C and SwiftUI or any suggestion/knowledge that might be occurred while development of application.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store