DEV Community

Anis Ali Khan
Anis Ali Khan

Posted on

Tutorial 6: Model-View-Controller (MVC) in iOS - Building the Dad Joke Machine App

Step 1: Set Up the Swift Project

  1. Open VS Code.
  2. Install the Swift extension if you haven’t already.
  3. Open a terminal and run: 
   mkdir DadJokeMachine && cd DadJokeMachine
   swift package init --type executable
Enter fullscreen mode Exit fullscreen mode
  1. Open the DadJokeMachine folder in VS Code.

Step 2: Edit Package.swift

Modify Package.swift to include SwiftUI (needed for macOS apps):

// swift-tools-version:5.7
import PackageDescription

let package = Package(
    name: "DadJokeMachine",
    platforms: [.macOS(.v13)],
    dependencies: [],
    targets: [
        .executableTarget(
            name: "DadJokeMachine",
            dependencies: [])
    ]
)
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the Model (JokeModel.swift)

Inside Sources/DadJokeMachine/, create a new file JokeModel.swift and add:

import Foundation

struct JokeModel {
    let jokes = [
        "What does a baby computer call its father? Data!",
        "Why don’t eggs tell jokes? They might crack up!",
        "Why do cows have hooves instead of feet? Because they lactose.",
        "I used to play piano by ear, but now I use my hands."
    ]

    func getRandomJoke() -> String {
        return jokes.randomElement() ?? "No dad joke today, just disappointment!"
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Create the SwiftUI View (ContentView.swift)

Replace main.swift with a new ContentView.swift inside Sources/DadJokeMachine/:

import SwiftUI

struct ContentView: View {
    let jokeModel = JokeModel()
    @State private var joke: String = "Tap the button for a dad joke!"

    var body: some View {
        VStack {
            Text(joke)
                .padding()
                .font(.title)
                .multilineTextAlignment(.center)

            Button(action: {
                joke = jokeModel.getRandomJoke()
            }) {
                Text("Tell me a joke!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .frame(width: 400, height: 300)
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Update main.swift to Launch the App

Modify main.swift to start the SwiftUI app:

import SwiftUI

@main
struct DadJokeMachineApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Build & Run the App

  1. In the terminal, run: 
   swift run
Enter fullscreen mode Exit fullscreen mode
  1. The SwiftUI app will launch, and you can click "Tell me a joke!" to display random dad jokes.

Bonus: Make It Even More Fun!

  • Add an animation when the joke appears.
  • Use Text-to-Speech (AVFoundation) to make Siri read the jokes!
  • Fetch dad jokes from an API instead of hardcoding them.

Now you have a groan-inducing yet delightful Dad Joke Machine 🎩👔

Top comments (0)