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
SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power…
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:
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 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
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
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 the
StockListViewModel and fetch all the data, which will later be passed to the appropriate views.
Here is the implementation for the
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.
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:
Thanks for reading! And here is the GitHub repository for this project.
- The Complete Guide to State Management in SwiftUI
- SwiftUI — Declarative Interfaces for any Apple Device
I hope you liked this piece. Happy coding!