B3 Développement Natif iOS - Anthony Da Cruz

#Ajouter un Onboarding

  1. Créer la view avec les 3 pages (utiliser TabView avec PageViewStyle())
  2. Créez une vue de wrapping qui permettra de gérer l’affichage de l’onboarding ou de l’application.
  3. Utiliser un @AppStorage pour stocker un booléen qui permettra de savoir si l’onboarding a déjà été affiché ou non.

Dans votre fichier LooterApp vous devriez avoir quelque chose comme ça in fine :


@main
struct LooterApp: App {
    
    // Ici utiliser un @AppStorage pour stocker ce booléen entre les lancements de l'application
    var isOnboardingDone: Bool = false 

    var body: some Scene {
        WindowGroup {
            if isOnboardingDone {
                // Mon app
            } else {
                // Onboarding
            }
        }
    }
}

#Onboarding (UI)

  • L’onboarding doit s’afficher au lancement de l’application
  • 3 pages contenant :
    • Un titre
    • Une description
    • Une image
    • Un bouton pour passer à la page suivante ou “Commencer” si c’est la dernière page
  • Swipeable (glissable)
  • Bouton “Suivant” pour passer à la page suivante
  • Sur la dernière page, un bouton “Commencer” qui permet de passer à l’application

Vous utiliserez les composants suivants :

  • TabView
  • PageViewStyle()
  • Button
  • @AppStorage
  • @State
  • @Binding

Et vous devrez créez les vues SwiftUI suivantes (ne faites pas tout dans la même vue) :

  • OnboardingView (Qui contiendra les pages)
  • OnboardingPageView
    • Un titre
    • Une description
    • Une image
    • Un bouton pour passer à la page suivante ou “Commencer” si c’est la dernière page

L’OnboardingPageView aura un @Binding sur un @State qui permettra de synchroniser la page courante (ex: TabView(selection: $step)) de l’OnboardingView avec l’OnboardingPageView.

#Point Preview

Pensez à utiliser la puissance de la #Preview SwiftUI pour tester votre onboarding.

  • Exemple ci-dessous, vous pouvez afficher 2 previews en même temps, une pour le mode clair et une pour le mode sombre, sur 2 pages différentes de votre onboarding.

    #Preview {
    OnboardingPage(feature: Feature.features[2], currentStep: .constant(3))
        .preferredColorScheme(.light)
        .previewDisplayName("Light Mode")
}

#Preview {
    OnboardingPage(feature: Feature.features[1], currentStep: .constant(2))
        .preferredColorScheme(.dark)
        .previewDisplayName("Dark Mode")
}

    Ce qui donne ça sur XCode

    Light ModeDark Mode

Si vous voulez customiser votre onboarding, voici un peu d’inspirations d’onboarding : https://dribbble.com/search/onboarding-app

#@AppStorage

Dans les applications iOS, on peut sauvegarder des données persistantes après un redémarrage de plusieurs façons :

  • UserDefaults : Permet de stocker des données simples (Booléen, String, Int, Double, Date, Data)
  • CoreData : Permet de stocker des données complexes (Objets, Relations, etc…)

Il existe aussi des bases de données externes comme Realm ou Firebase qui permettent de stocker des données.

UserDefault est très simple à utiliser, mais il est limité à des données simples. CoreData est plus complexe à utiliser, mais permet de stocker des données complexes.

Avec SwiftUI Apple à introduit un nouveau moyen de stocker des données persistantes : AppStorage (qui est en réalité un UserDefaults).

Vous sauvegarderez dans un @AppStorage un booléen qui permettra de savoir si l’onboarding a déjà été affiché ou non.

C’est un property wrapper au même titre que @State ou @Binding qui permet de stocker des données persistantes.

✨ Pour vous aider à tester, rajoutez un bouton dans votre ContentView qui remettra votre variable @AppStorage à false (ou à la valeur par défaut) pour pouvoir tester votre onboarding à nouveau.

Exemple :

  .toolbar(content: {
        ToolbarItem(placement: .automatic) {
            Button(action: {
                addItemSheetPresented.toggle()
            }, label: {
                HStack {
                    Image(systemName: "plus.app.fill")
                    Text("Ajouter")
                }
            })
        }
    ToolbarItem {
            Button(action: {
                isOnboardingDone = false
            }, label: {
                Image(systemName: "xmark.square.fill")
            })
        }
    })

En redémarrant l’application il ne devra pas s’afficher à nouveau, si l’utilisateur à déjà cliqué sur “Commencer”.

#Ressources pour vous aider

0-Readme2-TabView