Advanced Development in SwiftUI

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.

2 Building the Signup Card


COVER THE BASIC VIEWS IN SWIFTUI BY 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.
Getting Started Open up Xcode and create a new project. Change the Product Name to SwiftUI Advanced or any name you wish. What’s important here is making sure that the interface is set to SwiftUI, the Life Cycle is set to SwiftUI App, and the checkboxes Use Core Data and Hose in CloudKit are selected.

 

3 Creating Advanced Styled Buttons


BUILD YOUR OWN VIEW MODIFIER AND LEARN ABOUT THE MANY MODIFIERS THAT CAN CREATE UNIQUE STYLES FOR YOUR SWIFTUI VIEWS


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. Getting Started We’ll get started by building the second half of our card UI. Taking a look at our Figma file, this means four elements remain: the sign up button, the disclaimer label, the divider, and the sign in button. While we won’t get to styling everything in this video, we’ll have most of the card completed.

 

4 Enhancing our UI with Animations


CONTINUE STYLING SWIFTUI VIEWS AND LEARN HOW TO CREATE SHORT AND SUBTILE 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.

Getting Started Before we start creating a new SwiftUI view, let’s refactor some of the code we have.


• First, in the Navigator sidebar, create a new Group and call in Views. This folder will contain all the custom SwiftUI views we create.


• Next, we’ll create a new Swift file called GradientText.swift inside this folder. Make sure to copy the entire GradientText struct and the gradientForeground view modifier into this file.


• Finally, create another Swift file called GradientButton.swift inside this folder and paste the entire GradientButton struct.


• Don’t forget in each file to import the SwiftUI framework

 

5 Delight Your Users with Interactive Animations


LEARN TO DEVELOP MORE ADVANCED INTERACTIVE ANIMATIONS AND USE HAPTICS IN OUR APP


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.

 

6 Getting Started with Firebase Authentication


BUILD YOUR OWN AUTHENTICATION SYSTEM USING 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.


Getting Started

We’ll be using Firebase to manage our users. Firebase, offered by Google, gives developers an easy way to create a backend for their application. With just a few lines of code, Firebase gives you an amazing and easy to use API that lets you perform a wide range of backend solutions: from managing users to hosting a website to sending push notifications to storing data in a database and more. If you’re interested, visit firebase.google.com to learn more about all the solutions they have to offer.

 

7 Signing up with Firebase Auth


CREATE NEW ACCOUNTS FOR YOUR APP WITH FIREBASE AND SWIFTUI


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.


Getting Started


Head over to console.firebase.google.com. In order to make sure that we can use the Firebase Auth API’s, we need to first let Firebase know what sort of sign up providers it should be looking for. So we’ll need to enable the Email/Password provider and the Apple provider since in a later section, we’ll be looking at signing in with Apple

 

8 Performing 3D Animations


CREATE THE SIGN IN PAGE AND LEARN TO USE THE 3D ROTATION VIEW MODIFIER


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.


Getting Started


To transform our sign up page to a sign in page, we’ll need to rely on a boolean toggle. As you are probably coming to see, these boolean variables can serve as powerful toggles to quick change the UI of your application in just 2 lines of code.

 

9 Using Sign in with Apple with SwiftUI


ADD THE APPLE SIGN IN PROVIDER AND LEARN ABOUT UIVIEWREPRESENTABLE


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.


Getting Started


Taking a look at our Figma design file, we can see that we have two more views to add to our sign in card. First, we’d like to add a Rectangle view to serve as a divider, and then the Sign In With Apple button. We’ll add both of these views inside the if !signupToggle condition.

Buy Me a Coffee

0
Would love your thoughts, please comment.x
()
x