SwiftUI Combine and Data

Learn about Combine, the MVVM architecture, data, notifications and performance hands-on by creating a beautiful SwiftUI application
Since its release, SwiftUI has grown tremendously. By transitioning from Swift to SwiftUI, Apple wanted to democratize coding, and create an easy-to-read and easy-to-code language. In 2019, Combine was introduced, a framework that handles asynchronous events and monitor state changes among other purposes, which highlights one of the greatest additions to SwiftUI. In this course, we'll cover different aspects of the Combine API. We'll also learn about data fetching and displaying, push notifications, App Storage, testing and performance.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.



What you'll build

In this course, we'll learn how to build a part of the account view of our DesignCode iOS Application. This view might seem simple at first, but it holds a lot of data, logic and backend. We'll be covering how to store local data, data from a JSON file, in UserDefaults and in an external database, Firestore. Besides data, we'll take a look at the MVVM (Model-View-ViewModel) design pattern, push notifications with the help of Firebase Cloud Messaging, performance testing, and different aspects of the Combine API that allows us to update the UI asynchronously.
Screen_Shot_2021-05-19_at_5.18.01_PM

What is Combine?

Combine is a framework that lets you handle asynchronous events and maintain states in your app's lifecycle, an aspect that is absolutely necessary in any app. It allows you to sync data across your app and have your UI respond instantly to its changes. It helps in processing values step by step in a continuous flow, for example when using it in a network response or sharing a state variable with another class. Later on, we will be using Combine to notify changes to our views so that they can be updated accordingly.

Data model and data fetching

We'll learn how to create our own data models. We'll apply them to hard-coded data, to a local JSON array of objects, as well as to a document in Firestore. We'll also learn how to fetch and decode that data so that we can use it in our SwiftUI application.
Screen_Shot_2021-05-20_at_11.35.24_AM

Push notifications

One of the biggest advantages of using an iOS or Android application is receiving push notifications in real time. In this course, we'll learn how to send notifications to iOS devices using the Apple Push Notification service (APNs) and Firebase Cloud Messaging.
Screen_Shot_2021-05-20_at_11.46.07_AM

Performance and Testing

We'll also take a look at performance, and how some UI elements can affect performance in a full-fledged and complex app. To solve some performance issues, we'll create a LiteMode toggle that will turn off some UI elements that uses a lot of CPU, especially on older devices.

As for testing, we'll test our application in offline mode using Network Link Conditioner. We'll also take a look at Xcode's Debug Navigator and take testing a step further by profiling our application using Xcode's Instruments.
Screen_Shot_2021-05-26_at_9.42.06_AM

Requirements

For this course, you'll need a MacBook, since we'll be using Xcode. Xcode only runs on Apple's operating system. Also, make sure to download the latest version of Xcode. This course has been built on MacOS Big Sur, with Xcode version 12.5, SwiftUI 2.0 and running on iOS 14.5.

This course also assumes that you have basic knowledge of SwiftUI. If you're new to SwiftUI, I suggest you to follow the complete course Build an app with SwiftUI (Part 1Part 2 and Part 3) to understand all the basics before moving on to this course.

Create your project

Once you meet all the requirements, let's create our Xcode project! Open Xcode, and in the modal that pops up, select Create a new Xcode project. We'll be creating an iOS App, so under the iOS tab, select the App option.
Screen_Shot_2021-05-20_at_9.53.14_AM
Give your project a name, then click on Next. Choose a location where you want to save your project. Make sure the Interface is SwiftUI and Life Cycle is SwiftUI App.

Screen_Shot_2021-05-20_at_9.53.51_AM
Perfect, now we created our Xcode project! Now, download the source files to follow this course.


Import Assets and Graphics

Once you downloaded the source files for this course, add them to your project:

  • Drag and drop the ColorsImages and Logos folders from the Assets in the Assets.xcassets folder of your Xcode project.
  • Drag and drop the Graphics folder in the ProjectName folder of your Xcode project. The Graphics folder contains two files: the AccountBackground.swift and the VisualEffectBlur.swift.
Screen_Shot_2021-05-26_at_2.44.55_PM

NavigationView


In ContentView.swift, add a NavigationView, wrapping the Text.

// ContentView.swift var body: some View {
NavigationView {
Text("Hello, world!")
}
}

Add the .navigationViewStyle modifier to the NavigationView, and provide the value StackNavigationViewStyle(). This allows us to use NavigationView on iPad, without having our content in a sidebar.

// ContentView.swift
.navigationViewStyle(StackNavigationViewStyle())

Background

Inside of the NavigationView, embed the Text with a ZStack, aligned to the top. The frame's height should be .infinity and alignment .top. Then, we'll add the AccountBackground() that we imported from the downloads. We'll also hide the navigation bar, because this adds some unwanted padding at the top of our view.
// ContentView.swift var body: some View {
NavigationView {
ZStack(alignment: .top) {
Text("Hello, world!")
.padding()
}
.frame(maxHeight: .infinity, alignment: .top)
.background(AccountBackground())
.navigationBarHidden(true)
}
.navigationViewStyle(StackNavigationViewStyle())
}

This is how your ContentView should look like by now:
Screen_Shot_2021-05-21_at_1.02.35_PM

Conclusion

Congratulations! We just created our Xcode project and added a beautiful background to our main view. In the next section, we'll learn how to make the status bar's background change on scroll.