Intro to SwiftUI Combine and Data

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.

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.

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.

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.

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 1, Part 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.

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.

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 Colors, Images 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.

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:

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.