Build the Apple Stocks App Using SwiftUI (Part 1)

Learn SwiftUI by copying a familiar Apple app

SwiftUI is the new declarative framework from Apple, which allows us to create a user interface for iOS, macOS and watchOS platforms. Although SwiftUI is a brand new framework, compared to the UIKits framework you can create amazing interfaces with ease.

In this two-part series, we will be recreating the Apple Stocks app, which allows users to view stocks and news related to the stock market. The stock data and the news will be fetched from a custom NodeJS server hosted on Glitch.

Let’s get started!

SwiftUI - Declarative Interfaces for any Apple Device

Tour of the Server

Our server is written in NodeJS using ExpressJS framework. The server sends hard-coded data back to the client. It consists of two endpoints as shown below:

• /stocks — Get all the stocks
• /top-news — Get all the top news

The implementation is shown below:

Nothing complicated, we’re just returning some dummy data. Next, we need to create a SwiftIUI app that will integrate with our custom server and display a list of stocks.

Getting Started with SwiftUI

Create a brand new SwiftUI application in Xcode 11.x. It’s recommended you use macOS Catalina when working with SwiftUI so you can take advantage of Xcode Previews. There are a number of different layers we need to work on to create our stock listing screen.

• Webservice: This will be responsible for performing the network request with our custom JSON API.
• Models: These represent each stock item.
• ViewModels: Responsible for providing the data to the view
• StockListView: Responsible for displaying a list of stocks

Implementing Webservice and Models

The first step is to create a Webservice that will allow us to consume our custom JSON API. The implementation of the web service is shown below:

The web service returns a list of stock objects in a closure on success and nil on failure. The stock model is implemented below:

The Stock model is decorated with Decodable protocol so it can be easily populated with the JSON response.

The Stock model property names do not necessarily have to match the property names of JSON response. You can always use the CodingKey protocol to dictate your own property names in the model.

Our Webservice and Model is now complete. Let’s now turn our focus to View Models.

Implementing View Models

View Models are responsible for providing data to the view. The data we need to provide the view is the list of stocks. First, we will create a view model to represent each stock that will be displayed on the screen. We will represent this with StockViewModel as shown below:

The StockViewModel exposes several properties that represent a stock. These properties include symbol, description, price, and change. You can also see that price and symbol have custom formatting because they have to be displayed on the interface in a particular way. The view models give us the flexibility to customize data before its displayed on the view.

The second view model we will create is the StockListViewModel. This is a parent view model that represents the complete screen, displaying stocks, news, and the search bar.

The implementation for StockListViewModel is shown below:

There are a couple of important things to note about StockListViewModel. First, it conforms to the ObservableObject protocol. This means it can publish events that can notify the user interface to refresh itself.

It also consists of two properties searchTerm and stocks.The searchTerm property represents the user input for the search field and the stocks represent the list of StockViewModel fetched from the web service. The fetchStocks function uses the web service to get all the stocks from our custom web API. Once the stock model objects are fetched they are mapped to the StockViewModel and assigned to the property of the stock of the StockListViewModel class.

Since the stocks property is decorated with the @Published property wrapper, as soon as it is assigned it will publish an event. This event can be captured by the view and the view can render itself.

The next step is to implement our view using the SwiftUI framework.

Implementing the View Using the SwiftUI Framework

The ContentView will be our parent view, containing all the other views. Instead of putting all the code in ContentView we will create separate views for displaying stocks and news (displaying news will be covered in Part 2). ContentView will use theStockListViewModel and fetch all the data, which will later be passed to the appropriate views.

Here is the implementation for the ContentView:

As you can see, inside the initializer of ContentView we call the load function of the StockListViewModel, which fetches all the stocks. Since the instance StockListViewModel is marked with @ObservedObject, it will get notification from the view model when they’re published. As soon as it receives events from the view model, the view is rendered again.

The StockListView is responsible for displaying all the stocks to the user. The stocks are passed to the StockListView from the ContentView following the data flow guidelines in SwiftUI apps where the data flows from parent to child. The implementation of StockListView is shown below:

The result is shown below:

Stocks App Using SwiftUI Framework

Thanks for reading! And here is the GitHub repository for this project.

SwiftUI - Declarative Interfaces for any Apple Device

References

1. The Complete Guide to State Management in SwiftUI
2. SwiftUI — Declarative Interfaces for any Apple Device

I hope you liked this piece. Happy coding!