MVVM pattern in iOS Swift - Mini App: Build & Ship

Build: Simple Counter

A screen that shows a number and two buttons to increase or decrease it using MVVM pattern.

Target UI

-------------------
|   Simple Counter  |
-------------------
|                   |
|        0          |
|                   |
|  [-]       [+]    |
-------------------

Display a number starting at 0

Two buttons: '+' to increase, '-' to decrease the number

Use MVVM pattern: separate ViewModel to handle logic

View updates automatically when number changes

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    // TODO: Create ViewModel instance here

    var body: some View {
        VStack(spacing: 40) {
            Text("0") // TODO: Bind this to ViewModel's number
                .font(.largeTitle)
            HStack(spacing: 60) {
                Button("-") {
                    // TODO: Call ViewModel to decrease number
                }
                .font(.title)
                Button("+") {
                    // TODO: Call ViewModel to increase number
                }
                .font(.title)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

class CounterViewModel: ObservableObject {
    @Published var number: Int = 0

    func increase() {
        number += 1
    }

    func decrease() {
        number -= 1
    }
}

struct ContentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack(spacing: 40) {
            Text("\(viewModel.number)")
                .font(.largeTitle)
            HStack(spacing: 60) {
                Button("-") {
                    viewModel.decrease()
                }
                .font(.title)
                Button("+") {
                    viewModel.increase()
                }
                .font(.title)
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This app uses the MVVM pattern by separating the logic from the view. The CounterViewModel class holds the number and methods to change it. It uses @Published so SwiftUI updates the UI automatically when the number changes.

The ContentView creates a @StateObject instance of the ViewModel. The text showing the number binds to viewModel.number. The buttons call the ViewModel's increase and decrease methods. This keeps the UI simple and the logic in the ViewModel, following MVVM principles.

Final Result

Completed Screen

-------------------
|   Simple Counter  |
-------------------
|                   |
|        0          |
|                   |
|  [-]       [+]    |
-------------------

Tapping '+' increases the number by 1 and updates the display

Tapping '-' decreases the number by 1 and updates the display

Stretch Goal

Add a reset button that sets the number back to 0

💡 Hint

Add a new method in ViewModel to reset number and a button in the view that calls it

Practice

1. What is the main role of the ViewModel in the MVVM pattern?

easy

A. To display the user interface elements

B. To hold data and business logic separate from the UI

C. To store raw data from the database only

D. To handle user input directly without any data processing

Solution

1. Step 1: Understand MVVM roles

   The ViewModel acts as a middleman between the Model and the View, holding data and logic.

2. Step 2: Identify ViewModel responsibility

   It keeps data and business logic separate from UI, so the View only handles display.

3. Final Answer:

   To hold data and business logic separate from the UI -> Option B

4. Quick Check:

   ViewModel = data + logic [OK]

Hint: ViewModel holds data and logic, not UI [OK]

Common Mistakes:

• Confusing ViewModel with View
• Thinking ViewModel handles UI rendering
• Assuming ViewModel stores raw database data only

2. Which of the following is the correct way to declare a ViewModel property in Swift for binding to a SwiftUI View?

easy

A. @State var viewModel = MyViewModel()

B. @EnvironmentObject var viewModel = MyViewModel()

C. var viewModel = MyViewModel()

D. @ObservedObject var viewModel = MyViewModel()

Solution

1. Step 1: Identify property wrapper for ViewModel

   In SwiftUI, @ObservedObject is used to observe ViewModel changes.

2. Step 2: Check other options

   @State is for local state, @EnvironmentObject requires external injection, plain var lacks observation.

3. Final Answer:

   @ObservedObject var viewModel = MyViewModel() -> Option D

4. Quick Check:

   ViewModel binding uses @ObservedObject [OK]

Hint: Use @ObservedObject for ViewModel in SwiftUI [OK]

Common Mistakes:

• Using @State for ViewModel instead of @ObservedObject
• Forgetting to mark ViewModel as ObservableObject
• Trying to instantiate ViewModel inside @EnvironmentObject

3. Given the following SwiftUI code snippet, what will be displayed when the button is tapped once?

class CounterViewModel: ObservableObject {
  @Published var count = 0
  func increment() { count += 1 }
}

struct ContentView: View {
  @ObservedObject var viewModel = CounterViewModel()
  var body: some View {
    VStack {
      Text("Count: \(viewModel.count)")
      Button("Tap me") {
        viewModel.increment()
      }
    }
  }
}

medium

A. Count: 0

B. Count: Tap me

C. Count: 1

D. Count: nil

Solution

1. Step 1: Understand initial state

   The count starts at 0 as declared in ViewModel.

2. Step 2: Analyze button tap effect

   When tapped, increment() adds 1 to count, updating the published property.

3. Final Answer:

   Count: 1 -> Option C

4. Quick Check:

   Button tap increments count to 1 [OK]

Hint: Button tap calls increment, count updates [OK]

Common Mistakes:

• Assuming count stays 0 after tap
• Confusing button label with count value
• Expecting nil instead of initial 0

4. Identify the error in this ViewModel code snippet and how to fix it:

class UserViewModel {
  @Published var username: String = ""
  func updateName(newName: String) {
    username = newName
  }
}

medium

A. Missing ObservableObject conformance; add ': ObservableObject' to class

B. Cannot use @Published on String; change to Int

C. updateName should return String; add return type

D. username should be private; add 'private' keyword

Solution

1. Step 1: Check @Published usage

   @Published requires the class to conform to ObservableObject to work properly.

2. Step 2: Fix class declaration

   Add ': ObservableObject' after class name to enable property observation.

3. Final Answer:

   Missing ObservableObject conformance; add ': ObservableObject' to class -> Option A

4. Quick Check:

   @Published needs ObservableObject [OK]

Hint: Add ObservableObject to use @Published [OK]

Common Mistakes:

• Forgetting ObservableObject conformance
• Thinking @Published works without ObservableObject
• Changing data type unnecessarily

5. You want to create a SwiftUI app using MVVM where the ViewModel fetches a list of users asynchronously and updates the View. Which approach correctly handles this scenario?

hard

A. Make ViewModel conform to ObservableObject, use @Published for users array, fetch data asynchronously and update @Published property

B. Fetch data directly in the View and update a local @State variable

C. Store users array in the Model only and let View read it directly

D. Use a global variable for users and update it from anywhere

Solution

1. Step 1: Understand MVVM async data flow

   ViewModel should handle data fetching and update @Published properties to notify View.

2. Step 2: Evaluate options

   Make ViewModel conform to ObservableObject, use @Published for users array, fetch data asynchronously and update @Published property correctly uses ObservableObject and @Published with async fetch; others break MVVM or cause bad design.

3. Final Answer:

   Make ViewModel conform to ObservableObject, use @Published for users array, fetch data asynchronously and update @Published property -> Option A

4. Quick Check:

   Async fetch in ViewModel updates @Published [OK]

Hint: Async fetch in ViewModel updates @Published property [OK]

Common Mistakes:

• Fetching data in View instead of ViewModel
• Using global variables for state
• Letting View read Model data directly