Protocol-oriented architecture in iOS Swift - Mini App: Build & Ship

Build: User Profile

This screen shows a user profile using protocol-oriented architecture to separate data and UI logic.

Target UI

-------------------------
|       User Profile     |
|-----------------------|
| Name: John Appleseed  |
| Age: 28               |
| Email: [e-mail] |
|-----------------------|
| [Edit Profile]        |
-------------------------

Create a User protocol with properties for name, age, and email.

Create a struct that conforms to User protocol.

Create a protocol for displaying user info with a method to show user details.

Implement a view controller that uses these protocols to display user info.

Add an Edit Profile button that prints 'Edit tapped' when pressed.

Starter Code

iOS Swift

import UIKit

// TODO: Define User protocol here

// TODO: Create a struct conforming to User

// TODO: Define a protocol for displaying user info

class UserProfileViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // TODO: Setup UI and display user info
    }

    @objc func editProfileTapped() {
        // TODO: Handle edit button tap
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

iOS Swift

import UIKit

protocol User {
    var name: String { get }
    var age: Int { get }
    var email: String { get }
}

struct UserModel: User {
    let name: String
    let age: Int
    let email: String
}

protocol UserDisplayable {
    func display(user: User)
}

class UserProfileViewController: UIViewController, UserDisplayable {
    private let nameLabel = UILabel()
    private let ageLabel = UILabel()
    private let emailLabel = UILabel()
    private let editButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        setupUI()

        let user = UserModel(name: "John Appleseed", age: 28, email: "[e-mail]")
        display(user: user)
    }

    func setupUI() {
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        ageLabel.translatesAutoresizingMaskIntoConstraints = false
        emailLabel.translatesAutoresizingMaskIntoConstraints = false
        editButton.translatesAutoresizingMaskIntoConstraints = false

        nameLabel.font = UIFont.systemFont(ofSize: 18, weight: .bold)
        ageLabel.font = UIFont.systemFont(ofSize: 16)
        emailLabel.font = UIFont.systemFont(ofSize: 16)

        editButton.setTitle("Edit Profile", for: .normal)
        editButton.addTarget(self, action: #selector(editProfileTapped), for: .touchUpInside)

        view.addSubview(nameLabel)
        view.addSubview(ageLabel)
        view.addSubview(emailLabel)
        view.addSubview(editButton)

        NSLayoutConstraint.activate([
            nameLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),

            ageLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 20),
            ageLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),

            emailLabel.topAnchor.constraint(equalTo: ageLabel.bottomAnchor, constant: 20),
            emailLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),

            editButton.topAnchor.constraint(equalTo: emailLabel.bottomAnchor, constant: 40),
            editButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }

    func display(user: User) {
        nameLabel.text = "Name: \(user.name)"
        ageLabel.text = "Age: \(user.age)"
        emailLabel.text = "Email: \(user.email)"
    }

    @objc func editProfileTapped() {
        print("Edit tapped")
    }
}

We defined a User protocol with the required properties. Then, UserModel struct conforms to it, holding actual user data.

The UserDisplayable protocol declares a method to display user info. The UserProfileViewController conforms to this protocol and implements the method to update UI labels.

The UI is built programmatically with labels and a button. The button triggers a method that prints a message when tapped, simulating an edit action.

Final Result

Completed Screen

-------------------------
|       User Profile     |
|-----------------------|
| Name: John Appleseed  |
| Age: 28               |
| Email: [e-mail] |
|-----------------------|
| [Edit Profile]        |
-------------------------

Tapping 'Edit Profile' prints 'Edit tapped' in the console.

Stretch Goal

Add a protocol for editable users with a method to update email, and implement it in UserModel.

💡 Hint

Create a protocol EditableUser with a method updateEmail(newEmail: String). Make UserModel conform and add a mutating method to change email.