Onboarding Module

onboarding

Onboarding is the welcome interface that users see when they first open the app, used to introduce the app's core features and characteristics. EasyAppSwiftUI provides a default onboarding implementation.

We will provide more beautiful onboarding implementations in the future, stay tuned.

Architecture Overview

The onboarding module uses MVVM architecture and includes the following main components:

Feature Model: Defines feature data structure
Features Data: Provides static feature data
OnboardingView: Main onboarding view
OnboardingPageView: Individual feature page view

Core Components

1. Feature Model

struct Feature: Identifiable {
    let id = UUID()
    let title: String
    let description: String
    let image: String
}

The Feature model defines the data structure for each onboarding page:

id: Unique identifier for SwiftUI list identification
title: Feature title
description: Detailed feature description
image: SF Symbol icon name

2. Features Data

struct Features {
    static let features: [Feature] = [
        Feature(
            title: "Welcome to EasyApp",
            description: "Onboarding Page 1",
            image: "sparkles"
        ),
        Feature(
            title: "Smart Organization",
            description: "Onboarding Page 2",
            image: "brain.head.profile"
        ),
        Feature(
            title: "Secure & Private",
            description: "Onboarding Page 3",
            image: "lock.shield"
        ),
        Feature(
            title: "Stay Connected",
            description: "Onboarding Page 4",
            image: "icloud.and.arrow.up"
        )
    ]
}

Main Features

The onboarding uses TabView to implement horizontal swipe navigation:

TabView(selection: $currentPage) {
    ForEach(Array(Features.features.enumerated()), id: \.element.id) {
        index, feature in
        OnboardingPageView(feature: feature)
            .tag(index)
    }
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))

2. State Management

@State private var currentPage = 0
@EnvironmentObject private var appState: AppState

currentPage: Current page index
appState: Global app state for saving onboarding completion status

Integration Instructions

1. Basic Usage

OnboardingView { 
    // Callback after onboarding completion
    print("Onboarding completed")
}

2. Integration with App State

The onboarding automatically integrates with AppState, and after completion, it updates onboardingState to track whether the user has completed onboarding.

3. Display Logic

The onboarding display logic is controlled through OnboardingViewModifier:

struct OnboardingViewModifier: ViewModifier {
    @EnvironmentObject private var appState: AppState

    func body(content: Content) -> some View {
        Group {
            if appState.onboardingState == "INIT" {
                OnboardingView {
                    withAnimation(.bouncy) {
                        appState.onboardingState = AppData.appVersion
                    }
                }
                .transition(.opacity)
            } else {
                content
                    .transition(.opacity)
            }
        }
        .animation(.easeInOut(duration: 0.5), value: appState.onboardingState)
    }
}

Display Conditions:

onboardingState == "INIT": Show onboarding
onboardingState != "INIT": Show main app interface

State Flow:

On first app launch, onboardingState defaults to "INIT"
After user completes onboarding, state updates to AppData.appVersion
On subsequent launches, since state is not "INIT", main interface is shown directly

Best Practices

Concise Content: Each feature description should be concise and clear, highlighting core value
Icon Selection: Use representative SF Symbol icons
Page Count: Recommend keeping between 3-5 pages to avoid being too long
Localization: Support multilingual titles and description text
Skippable: Always provide skip option, respecting user choice

Onboarding