Modularization in iOS Swift - Mini App: Build & Ship

Build: Profile Screen

Build a profile screen that uses modular components for header and details sections.

Target UI

-------------------------
|       Profile         |
|-----------------------|
| [Avatar]  John Doe    |
|                       |
| Email: [e-mail]|
| Phone: [phone]    |
|-----------------------|
|       Edit Button      |
-------------------------

Create a reusable HeaderView component showing avatar and name

Create a reusable DetailsView component showing email and phone

Use these components in ProfileScreen

Add an Edit button at the bottom

Starter Code

iOS Swift

import SwiftUI

struct ProfileScreen: View {
    var body: some View {
        VStack {
            // TODO: Add HeaderView here
            // TODO: Add DetailsView here
            Spacer()
            Button("Edit") {
                // Edit action
            }
            .padding()
        }
        .padding()
    }
}

struct ProfileScreen_Previews: PreviewProvider {
    static var previews: some View {
        ProfileScreen()
    }
}

// TODO: Create HeaderView component
// TODO: Create DetailsView component

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct HeaderView: View {
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "person.crop.circle.fill")
                .resizable()
                .frame(width: 64, height: 64)
                .foregroundColor(.blue)
            Text("John Doe")
                .font(.title)
                .fontWeight(.bold)
            Spacer()
        }
        .padding(.bottom, 20)
    }
}

struct DetailsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Email: [e-mail]")
            Text("Phone: [phone]")
        }
        .font(.body)
        .foregroundColor(.secondary)
    }
}

struct ProfileScreen: View {
    var body: some View {
        VStack {
            HeaderView()
            DetailsView()
            Spacer()
            Button("Edit") {
                // Edit action
            }
            .padding()
            .frame(maxWidth: .infinity)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

struct ProfileScreen_Previews: PreviewProvider {
    static var previews: some View {
        ProfileScreen()
    }
}

We created two reusable components: HeaderView and DetailsView. HeaderView shows an avatar icon and the user name side by side. DetailsView lists the email and phone in a vertical stack. The main ProfileScreen uses these components inside a vertical stack, with a spacer to push the Edit button to the bottom. The Edit button is styled with a blue background and white text for clarity. This modular approach keeps code organized and reusable.

Final Result

Completed Screen

-------------------------
|       Profile         |
|-----------------------|
| (icon)   John Doe     |
|                       |
| Email: [e-mail]|
| Phone: [phone]    |
|                       |
| [     Edit Button     ]|
-------------------------

Tapping Edit button triggers edit action (currently empty)

Stretch Goal

Add a toggle to switch between light and dark mode for the ProfileScreen

💡 Hint

Use @Environment(\.colorScheme) and a toggle button to switch modes dynamically

Practice

1. What is the main purpose of modularization in Swift app development?

easy

A. To split the app into smaller, manageable parts called modules

B. To write all code in a single file for simplicity

C. To avoid using any external libraries or frameworks

D. To make the app run faster by skipping code checks

Solution

1. Step 1: Understand modularization concept

   Modularization means dividing an app into smaller parts called modules to organize code better.

2. Step 2: Identify the correct purpose

   The main goal is to keep code clean, reusable, and easier to manage by splitting it.

3. Final Answer:

   To split the app into smaller, manageable parts called modules -> Option A

4. Quick Check:

   Modularization = splitting app into modules [OK]

Hint: Modularization means breaking app into smaller parts [OK]

Common Mistakes:

• Thinking modularization means writing all code in one file
• Confusing modularization with performance optimization
• Believing modularization avoids external libraries

2. Which of the following is the correct way to import a module named Networking in Swift?

easy

A. #import Networking

B. include Networking

C. using Networking

D. import Networking

Solution

1. Step 1: Recall Swift import syntax

   Swift uses the keyword import to bring modules or frameworks into a file.

2. Step 2: Match correct syntax

   The correct syntax is import Networking. Other options are from different languages or incorrect.

3. Final Answer:

   import Networking -> Option D

4. Quick Check:

   Swift imports use "import" keyword [OK]

Hint: Use 'import' keyword to add modules in Swift [OK]

Common Mistakes:

• Using 'include' or 'using' which are not Swift keywords
• Confusing with Objective-C '#import' syntax
• Forgetting to capitalize 'import'

3. Given the code below, what will be the output?

import Utilities

print(Utilities.greet())

Assuming the Utilities module has a function greet() that returns "Hello from Utilities!".

medium

A. Error: Module not found

B. Hello from main app!

C. Hello from Utilities!

D. No output

Solution

1. Step 1: Understand module import and function call

   The code imports the Utilities module and calls its greet() function.

2. Step 2: Recall function behavior

   The greet() function returns the string "Hello from Utilities!" which is printed.

3. Final Answer:

   Hello from Utilities! -> Option C

4. Quick Check:

   Calling module function prints its return value [OK]

Hint: Imported module functions print their return values [OK]

Common Mistakes:

• Assuming import fails without setup
• Confusing output with main app strings
• Expecting no output without print

4. You try to use a function from a module but get the error: Use of unresolved identifier. What is the most likely cause?

medium

A. You forgot to import the module containing the function

B. The function name is misspelled in the module

C. The module is imported but the function is private

D. The app has no internet connection

Solution

1. Step 1: Analyze the error message

   The error "Use of unresolved identifier" means the compiler cannot find the function name in current scope.

2. Step 2: Identify common cause

   This usually happens when the module containing the function is not imported, so the function is unknown.

3. Final Answer:

   You forgot to import the module containing the function -> Option A

4. Quick Check:

   Missing import causes unresolved identifier error [OK]

Hint: Check if module is imported when identifier is unresolved [OK]

Common Mistakes:

• Assuming internet connection affects compilation
• Ignoring import statements
• Confusing private function errors with unresolved identifier

5. You have two modules: Auth and Profile. The Profile module needs to use a function from Auth. How should you organize imports to allow this?

hard

A. Combine both modules into one to avoid imports

B. Import Auth inside Profile module and use its functions

C. Use global variables to share data without imports

D. Import Profile inside Auth module

Solution

1. Step 1: Understand module dependencies

   If Profile needs functions from Auth, it must import Auth to access them.

2. Step 2: Identify correct import direction

   Importing Auth inside Profile allows Profile to use Auth functions without circular dependencies.

3. Final Answer:

   Import Auth inside Profile module and use its functions -> Option B

4. Quick Check:

   Module needing code imports that module [OK]

Hint: Import the module you need inside your module [OK]

Common Mistakes:

• Importing the wrong module direction causing circular imports
• Using global variables instead of proper imports
• Merging modules unnecessarily