Developing an app using SwiftUI – Free SwiftUI Tutorial
Advance your SwiftUI skills by developing an app using Core Data, CloudKit, In App Purchases, Sign In With Apple, and Firebase Authentication
Advance your SwiftUI skills by developing an app using Core Data, CloudKit, In App Purchases, Sign In With Apple and Firebase Authentication
SwiftUI is a powerful declarative framework that makes it easy to design and code apps for Apple’s devices with very few lines of code. With every release of SwiftUI, we get closer to a future where declarative syntax is powering many of the animations and user experience of the apps we see on the App Store. With every project you create in SwiftUI, you’ll see how easy it is to create advanced applications with impressive designs in just a few lines of code and a few iterations that may have taken hundreds of lines of code in barebones UIKit. Furthermore, the upcoming Design+Code iOS app has been built using SwiftUI 2.0.
About this Course
This course is meant to progress your knowledge of SwiftUI. If you are a beginner to SwiftUI, it is highly recommended you take some of Meng’s previous SwiftUI courses to gain a familiarity for the declarative syntax and the MVVM app architecture. This course will gloss over some of the basic materials and will place a heavier focus on how we can use SwiftUI in our applications to develop incredible functionality and delightful animations.
In this course, we’ll build a sample application that relies on some of the designs of the new Design+Code app. We’ll take a look at how we can create small and interactive animations with SwiftUI. We’ll check out how Firebase Authentication in conjunction with SwiftUI to create and manage user accounts while also introducing you to using Sign in with Apple, a secure way for users to login backed by Apple. Furthermore, we’ll see how we can use RevenueCat, a very friendly and easy to use tool to manage in app purchases inside of our application. Lastly, we’ll take a look at using Core Data and Cloud Kit to manage user data and synchronize this data across all devices that are signed into your Apple ID.
This course expects you to have some prior knowledge of SwiftUI and its declarative syntax. Therefore, please make sure you have taken some of the previous SwiftUI courses before continuing. In this course, I am running macOS Big Sur, Xcode 12.5, and SwiftUI 2.0.
Complete Source Code
Building the Signup Card
In this section, we’ll quickly review the basic UI components of SwiftUI. Much like widgets in Flutter, we’ll see how we can combine views to start building the signup screen of our SwiftUI application.
Creating Advanced Styled Buttons
In this section, we’ll explore some new SwiftUI view modifiers that can be applied to our views. You’ll learn how to build your own view modifier which we will use on some Button views. Finally, we’ll complete adding elements to our signup card.
Enhancing our UI with Animations
In this section, we’ll create a new SwiftUI view called TextfieldIcon that will be used in our textfields. We’ll also see how to style this view and perform short, interactive animations based on user input.
Delight Your Users with Interactive Animations
In this section, we’ll continue to develop more animations for our signup card. There are two big animations you’ll learn how to develop in SwiftUI by the end of this section. The first animation is to bounce our textfield icons when the textfield becomes active. The second animation is to rotate the colors in our glowing buttons. Finally, you’ll also get to see how to make an app give haptic feedback with just 2 lines of code.
Getting Started with Firebase Authentication
In this section, we’ll start to build our own authentication system with some help from Firebase Authentication. We’ll see how to create a new Firebase project, download the Firebase SDK using Swift Package Manger, and initialize Firebase once the app starts.
Signing up with Firebase Auth
In this section, we’ll enable the different sign in providers inside our Firebase project and then see how we can create accounts for users using the Firebase Auth API in SwiftUI. Finally, we’ll create a barebones Profile View that we will segue to if a user is logged into our app.
Performing 3D Animations
In this section, we’ll see how we can use a boolean toggle to transform our signup page into a signin page. Furthermore, we’ll also see how we can use the rotation3DEffect view modifier to create impressive transitions and animations.
Using Sign in with Apple with SwiftUI
In this section, we’ll add the final button to our sign in page by adding a Sign in with Apple button. We’ll see how to use SwiftUI’s UIViewRepresentable protocol to bring UIKit views into SwiftUI. We’ll also see how to combine both the Apple Sign In provider with Firebase Auth to give our users a secure way to sign into our app.
Animating Images and Displaying Alerts
In this section, we’ll finish building the rest of the Sign In screen by taking care of some quick housekeeping items. We’ll wrap up on working in the SignupView.swift file for the time being until we get to the Core Data sections of this course.
Creating our Profile Screen
In this section, we will rapidly construct the profile screen inside ProfileView.swift so that when we segue to this screen, we can see a screen that closely resembles our design. By now, I’m confident you should be able to look at a view and mentally deconstruct it into different view hierarchies and know which SwiftUI view should be used to build our design. So before we go any further, I pose a challenge to you to go ahead and see if you can construct the basic UI of the screen below. If not, that’s no worries. While there isn’t anything new being taught in this section, it is a great practice to revise your skills and see how quickly you can transform design to code.
Introduction to RevenueCat
In this section, we’ll embark upon learning how to integrate in app purchases into our application by creating the IAP in App Store Connect. This will also be your first look at RevenueCat, a popular and helpful framework that makes it easy to add in app purchases to your application across any platform in just a few lines of code.
Completing In App Purchases
In this section, we’ll explore the RevenueCat framework and use some of the API’s included in this framework to handle purchases and restoring of purchases. We’ll also see how to create a sandbox user so that when we develop our apps and test our in app purchases on a physical device, we can purchase a product and link it to a sandbox Apple ID and not our real Apple ID in the unfortunate case we may be charged.
Manually Controlling Segues and Views
In this section, we’ll finish adding the remaining functionality to our Profile View. We’ll build a custom view so that we can display profile pictures instead of the placeholder SF Symbol we have right now. We’ll also allow users to sign out of the application and learn to dismiss the current view using the presentation mode Environment value. We’ll conclude by adding alerts to our view.
Working with @Binding Custom Textfields
In this section, we’ll begin building our Settings View by adding all the variables we need and creating our last custom view that is a derivation of a view we have already created. We’ll see how to create custom TextField views to serve different purposes.
Accessing the iOS Photo Library
In this section, we’ll finish building the rest of our Settings screen by using the custom views we have created so far, along with some basic SwiftUI views. We’ll also take a look at the last file we have in our Helpers folder called ImagePicker.swift that makes it easy to access an image from a user’s photo library in SwiftUI.
Introduction to Core Data and Cloud Kit
In this section, we’ll learn about Core Data and Cloud Kit and begin to configure our project to utilize these technologies provided to us from Apple.
Adding Data to Core Data
In this section, we’ll get started with using the Core Data framework to add new data over to our app’s database. When a user first signs in our signs up for the application, we’ll take this data and save this data to our view context, which is a snapshot of the Core Data stores. When we save the view context, it will write this data to the internal app’s database using Core Data, and then Core Data with communicate with the user’s iCloud account to save this data using CloudKit.
Reading Data from Core Data and CloudKit
In this section, we’ll learn how to read data from Core Data and CloudKit such that we can populate our Profile View card with the data we get from our iCloud container instead of using fixed values. We’ll also see how we can display the price of our in app purchase using another RevenueCat API from their Purchases framework.
Updating Data inside CloudKit
In this section, we’ll complete our application by making sure users can edit their profile. We’ll then take these edited changes and save them to Core Data. We’ll also see how upon saving data to Core Data, we can reload our Profile View to reflect these changes. Finally, we’ll make some small UI adjustments so our app looks more professional.