How I coded an iOS App in 20 minutes

Want to create your own iOS App that fetches news from your favorite news websites? In a few simple steps, I’ll show you how.

Here’s what we would be making today!

I was tired of searching for the latest pieces published on various news websites. It was a tedious and time-consuming process. So, I decided to make my own news app, Latest News. It fetches me the latest piece published from my favorite news website.

Basic steps involve making a get request to a news API (in this case, the Times Wire API), decoding the JSON data, and then integrating a WebView within the app. Sounds intimidating? Don’t worry fire up Xcode and let’s get started!

Create a new Xcode Project

Create a new Xcode project and name it News App. Make sure you select SwiftUI as your interface.

Set up the interface

If you’re new to SwiftUI, you’ve probably noticed that your project lacks a storyboard by now. Instead, there’s a live preview pane that allows you to see how your app appears in real-time without running it on a simulator.

Resume the live preview

In the struct, ContentView_Previews use the environment function of the struct ContentView to add dark mode to the app. You can achieve this by adding the following lines of code.

In the ContentView struct, add a list view and incorporate it inside a NavigationView. Set the navigation bar title to Latest News.

Create Models for the app

Create a new swift file- NetworkManager.swift. Make NetworkManager class conform to the ObservableObject protocol. This protocol enables the NetworkManager class to show one/many of its properties to other classes that need them(in this case the ContentView class).

Fetch data from the API and parse JSON

1. In a function create a URL with string as the initializer. This string will contain API’s URL. We are using the Times Wire API from The New York Times. This API allows us to query the latest news posted on nytimes.com.
2. Create a URLSession with the configuration set as default.
3. Now we create a task that retrieves the contents of the specified URL, then calls a handler upon completion.
4. It’s time to parse the JSON data we fetched from the get request we made, but before that, we need to make a NewsModel struct like so.

The structs NewsModel and News both conform to the Codable protocol. This protocol allows us to store the decoded data. Here we are deserializing the JOSN response received and matching the with the respective keys in the struct. The News struct also conforms to the Identifiable protocol which is required so that the list can recognise the order of our Post objects based on their IDs.

Back to NetworkManager, decode the data fetched from the API using the JSONDecoder() class. Check for errors and on the main thread initialize a variable with decoded data’s result property.

To make those properties available to the classes, we add the property wrapper @published to the variable (i.e. the variable initialized with the decoded data). It allows classes to be alerted to any changes that occur.

Now that we have fetched and decoded data received from the API, we need to resume the task.

Please tell me I am not the only one

NetworkManager

Create two new views, DetailView and WebView. These will enable us to incorporate WebView within the app itself.

Display the list of articles available

1. Create a NetworkManager class object in the ContentView. To listen to the changes made in the NetworkManager in the ContentView we mark this object with the wrapper code @ObservedObject.
2. Use the news property of the NetworkManager to populate the list with article headings.
3. Navigate to DetailView using NavigationLink and pass the URL of the article also.
4. Use the onAppear function to get the data from NetworkManager when the view appears.

ContentView

DetailView

Call the WebView struct and pass on the URL received from ContentView to WebView.

Don’t forget to add dark mode to the DetailView too.

DetailView

Incorporating WebView within the app

Import WebKit which will enable us to create a WebView for our app as no WebView currently exists for SwiftUI :(. The WebView struct should conform to UIViewRepresentable protocol, this allows us to create a SwiftUIView that represents a UIKitView.

Add the delegate methods.

The makeUIView() method returns a WKWebView().

In the updateUIView() method create a URLRequest to display the content of the URL passed provided it’s not null then load the request using: uiView.load(URLRequest(url: URL))

WebView

And that's it, the app’s done. Pat yourself on your back. You deserve it.

Happy coding. Cheers🍻

If you get stuck, be sure to check out the GitHub repo!

What Next?

1. You can try to filter news based on different topics like- business, sports, technology, etc.
2. You should try out different news APIs like- Hacker News API, News API, and Newscatcher API.
3. Try and make the app using Swift.