Firebase & SwiftUI Workshop

1. Peter Friese | Developer Advocate, Firebase Marina Coelho | Developer Relations Engineer, Firebase  + Swi!UI & Firebase Workshop @coelho_dev @pete!riese

4. What we’re going to build

5. Make It So ✨ Simple to-do list app ✨ Store to-dos in Cloud Firestore ✨ Real-time updates across devices ✨ Use without user account (“try before you buy”) ✨ Sign in with Email/Password ✨ Sign in with Apple ✨ Feature flags using Remote Config ✨ There is an Android version as well! (bit.ly/makeitso-android-4)

6. Demo

8. Run with confidence Engage users Develop apps faster

9. Run with confidence Crashlytics Performance Monitoring Test Lab App Distribution Engage users Analytics Predictions Cloud Messaging Remote Config A/B Testing Dynamic Links In-app Messaging Develop apps faster Auth Cloud Functions Cloud Firestore Hosting ML Kit Realtime Database Cloud Storage bit.ly/what-is-firebase Extensions Machine Learning

10. Adding Firebase to a Swi!UI app Exercise

11. Adding Firebase to a Swi!UI app Exercise 1. Create a new Firebase project 2. Add your app to the new Firebase project 3. Download GoogleServices-Info.plist to your app

12. Application Lifecycle SwiftUI 2 Photo by Thor Alvis on Unsplash

13. SwiftUI 2: No more AppDelegate! import SwiftUI @main struct MakeItSoApp: App { var body: some Scene { WindowGroup { TodosListView() } } }

14. SwiftUI 2: No more AppDelegate! import SwiftUI @main struct MakeItSoApp: App { var body: some Scene { WindowGroup { TodosListView() } } }

15. Solution 1: use initialiser import SwiftUI @main struct MakeItSoApp: App { var body: some Scene { WindowGroup { TodosListView() } } }

16. Solution 1: use initialiser import SwiftUI @main struct MakeItSoApp: App { var body: some Scene { WindowGroup { TodosListView() } } } init() { FirebaseApp.configure() }

17. Solution 2: use UIApplicationDelegateAdaptor import SwiftUI import Firebase class AppDelegate: NSObject, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) !" Bool { FirebaseApp.configure() return true } } @main struct MakeItSoApp: App { @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate

21. Watch the scene phase Handle deep links Continue user activities Do more with the new life cycle

22. Watch the scene phase Handle deep links Continue user activities Learn more pete!riese.dev/ultimate-guide-to-swi"ui2-application-lifecycle/

23. Firestore

26. One-Time Fetches Offline Mode Effortless Syncing

27. bird_type: airspeed: coconut_capacity: isNative: icon: vector: distances_traveled: "swallow" 42.733 0.62 false <binary data> { x: 36.4255, y: 25.1442, z: 18.8816 } [42, 39, 12, 42] Document

28. Collection Sub-Collection

29. Top level collections “todos” collection a single todo document

30. struct Todo { @DocumentID var docId: String? var id: String? = UUID().uuidString var title: String var completed: Bool = false var userId: String? } Data Model

31. TodosListView TodoDetailsView TodoListRowView Source of Truth todos: [Todo] @StateObject @Binding Todo Todo Review: Architecture

32. TodosListView TodoDetailsView TodoListRowView Source of Truth todos: [Todo] @StateObject @Binding Todo Todo Review: Architecture Snapshot Listener

33. class TodosRepository: ObservableObject { @Injected var db: Firestore private var listenerRegistration: ListenerRegistration? @Published var todos = [Todo]() func subscribe() { if listenerRegistration !# nil { unsubscribe() } listenerRegistration = db.collection("todos") .addSnapshotListener { [weak self] (querySnapshot, error) in guard let documents = querySnapshot!$documents else { return } self!$todos = documents.compactMap { queryDocumentSnapshot in let docId = queryDocumentSnapshot.documentID Real-time Sync w/ Snapshot Listeners

37. func subscribe() { if listenerRegistration !# nil { unsubscribe() } listenerRegistration = db.collection("todos") .addSnapshotListener { [weak self] (querySnapshot, error) in guard let documents = querySnapshot!$documents else { return } self!$todos = documents.compactMap { queryDocumentSnapshot in let docId = queryDocumentSnapshot.documentID let data = queryDocumentSnapshot.data() let id = queryDocumentSnapshot["id"] as? String !% "" let title = data["title"] as? String !% "" let completed = data["completed"] as? Bool !% false let userId = data["userId"] as? String !% "" return Todo(docId: docId, id: id, title: title, completed: completed, userId: userId) } } Real-time Sync w/ Snapshot Listeners

39. func subscribe() { if listenerRegistration !# nil { unsubscribe() } listenerRegistration = db.collection("todos") .addSnapshotListener { [weak self] (querySnapshot, error) in guard let documents = querySnapshot!$documents else { return } self!$todos = documents.compactMap { queryDocumentSnapshot in let docId = queryDocumentSnapshot.documentID let data = queryDocumentSnapshot.data() let id = queryDocumentSnapshot["id"] as? String !% "" let title = data["title"] as? String !% "" let completed = data["completed"] as? Bool !% false let userId = data["userId"] as? String !% "" return Todo(docId: docId, id: id, title: title, completed: completed, userId: userId) } } Real-time Sync w/ Snapshot Listeners Can we do better?

40. (Yes, we can)

42. func subscribe() { if listenerRegistration !# nil { unsubscribe() } listenerRegistration = db.collection("todos") .addSnapshotListener { [weak self] (querySnapshot, error) in guard let documents = querySnapshot!$documents else { return } self!$todos = documents.compactMap { queryDocumentSnapshot in let result = Result { try queryDocumentSnapshot.data(as: Todo.self) } switch result { case .success(let todo): return todo case .failure(let error): !& handle error return nil } } } Real-time Sync w/ Snapshot Listeners

43. Learn more h#ps://pete!riese.dev/$restore-codable-the-comprehensive-guide/

44. Sync Data with Firestore Exercise

45. Sync Data with Firestore 1. Add Snapshot listeners and display data in the UI 2. Add new todo items via the app 3. Update todo items via the app 4.Delete todo items via the app Exercise

46. struct BookShelfView: View { @FirestoreQuery( collectionPath: "todos", predicates: [ .where("userId", isEqualTo: userId), ] ) var todos: Result<[Todo], Error> @State var userId = "F18EBA5E" var body: some View { List(todos) { todo in Text(todo.title) } } } Firestore Property Wrapper Firebase 8.9.0 @FloWritesCode @mo%enditlevsen Thanks to

47. Authentication Photo by Conve"Kit on Unsplash

48. Authentication Photo by Eduardo Soares on Unsplash

49. Authentication Photo by Victor Freitas on Unsplash

50. 

51. Sign the user in Update the data model Secure users’ data How to implement Firebase Authentication?

52. Anonymous Authentication “Guest” accounts, rather

53. func signIn() { registerStateListener() if Auth.auth().currentUser !' nil { Auth.auth().signInAnonymously() } } Anonymous Authentication

55. SignInWithAppleButton( onRequest: { !!( }, onCompletion: { result in !!( let appleIDToken = appleIDCredential.identityToken let idTokenString = String(data: appleIDToken, encoding: .utf8) let credential = OAuthProvider.credential(withProviderID: “apple.com", idToken: idTokenString, rawNonce: nonce) do { try await Auth.auth().signIn(with: credential) } catch { !& handle error } } ).frame(width: 280, height: 45, alignment: .center) Sign in with Apple

60. SignInWithAppleButton( onRequest: { !!( }, onCompletion: { result in !!( let appleIDToken = appleIDCredential.identityToken let idTokenString = String(data: appleIDToken, encoding: .utf8) let credential = OAuthProvider.credential(withProviderID: “apple.com", idToken: idTokenString, rawNonce: nonce) do { try await Auth.auth().signIn(with: credential) } catch { !& handle error } } ).frame(width: 280, height: 45, alignment: .center) Sign in with Apple Firebase SDK

61. All todos are stored in one single collection Which user do they belong to?

62. let query = db.collection(“todos") .whereField("userId", isEqualTo: self.userId) query .addSnapshotListener { [weak self] (querySnapsho guard let documents = querySnapshot!$documents els Signed in user

63. Implementing User Authentication Exercise

64. Implementing User Authentication 1. Add Anonymous Authentication to the app 2. Add Email and Password Authentication to the app 3. Add Sign in with Apple Exercise

65. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.time < timestamp.date(2022, 8, 26); } } } Security Rules Time-based security == no security! Don’t do this at home!

66. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow create: if request.auth !# null; allow read, update, delete: if request.auth !# null !* resource.data.userId !' request.auth.uid; } } } Security Rules Only signed-in users can create new documents Only owners may read and modify a document

67. Securing Your Users’ Data with Security Rules Exercise

68. Securing Your Users’ Data with Security Rules 1. Update the Security Rule so only authenticated users can create todo items 2. Update the Security Rule so only authenticated users can create todo items Exercise

69. Remote Con"g Photo by Ash Edmonds on Unsplash

70. Deploy Feature Flags with Progressive Rollouts

71. Make changes to your app without publishing an App Update

72. Target speci#c user segments

73. Popular use cases • Activate banner for New Year’s resolution promo at midnight • Drive iOS adoption by oﬀering a 20% discount to iOS users (and 10% to Android users) • Use staged rollout (10% > 25% > 75% > 100%) for the new search feature • Show diﬀerent home screen content to users in USA vs the UK • Show customised feed based on user’s preferences for particular topic / category • Engage users who are predicted to churn • Show less ads to users who are predicted to spend in your app • Slowly roll out migration to a new API (API URL defined as a RC key) • Define entire game levels as JSON/XML config values. Great for fixing gameplay! • Host static assets on Firebase Hosting and reference them dynamically in your game using Remote Config keys • Disable features at runtime that might be causing high number of crashes

74. Set up Remote Config import FirebaseRemoteConfig private var remoteConfig: RemoteConfig func setupRemoteConfig() { let remoteConfig = RemoteConfig.remoteConfig() let settings = RemoteConfigSettings() settings.minimumFetchInterval = 0 remoteConfig.configSettings = settings remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults") }

75. Set up Remote Config import FirebaseRemoteConfig private var remoteConfig: RemoteConfig func setupRemoteConfig() { let remoteConfig = RemoteConfig.remoteConfig() let settings = RemoteConfigSettings() settings.minimumFetchInterval = 0 remoteConfig.configSettings = settings remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults") } Amount of time before you can fetch again after a successful fetch Don’t do this at home!

76. Set up Remote Config import FirebaseRemoteConfig private var remoteConfig: RemoteConfig func setupRemoteConfig() { let remoteConfig = RemoteConfig.remoteConfig() #if DEBUG let settings = RemoteConfigSettings() settings.minimumFetchInterval = 0 remoteConfig.configSettings = settings #endif remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults") } Amount of time before you can fetch again after a successful fetch Do THIS at home!

77. Set up Remote Config import FirebaseRemoteConfig private var remoteConfig: RemoteConfig func setupRemoteConfig() { let remoteConfig = RemoteConfig.remoteConfig() #if DEBUG let settings = RemoteConfigSettings() settings.minimumFetchInterval = 0 remoteConfig.configSettings = settings #endif remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults") }

78. Fetch and apply a value func fetchConfigutation() { remoteConfig.fetch { (status, error) !" Void in if status !' .success { print("Configuration fetched!") self.remoteConfig.activate { changed, error in let value = remoteConfig.configValue(forKey: "key") !& apply configuration } } else { print("Configuration not fetched") print("Error: (error!$localizedDescription !% "No error available.")") } } }

81. Fetch and apply a value w/ async/await func fetchConfigutation() async { do { let status = try await remoteConfig.fetch() if status !' .success { print("Configuration fetched!") try await remoteConfig.activate() let value = remoteConfig.configValue(forKey: "") } } catch { !& handle error } }

84. Implementing Remote Con"g Exercise

85. Implementing Remote Con"g 1. Create a con#guration to hide/show the details bu$on for each todo item 2. Fetch the con#guration when your app sta", and apply to the UI 3. Launch this con#guration to 10% of your users only Exercise

86. The End Photo by Paul Hudson (@twostraws) on Twi$er

87. The End

88. The End ) (for real

89. The End (for real now - why don’t you go and grab a drink )

Firebase & SwiftUI Workshop

More Related Content

What's hot (10)

Similar to Firebase & SwiftUI Workshop (20)

More from Peter Friese (20)

Recently uploaded (20)

Firebase & SwiftUI Workshop