Creating a Simple Multi-Screen App in Swift Playgrounds

Part of my teaching mission this year is discovering and creating content that allows novice programmers to make interesting, engaging apps on Swift Playgrounds without the use of advanced libraries or confusing data structures. I teach a dual-enrolled App Development course inside of a high school, with 1:1 iPads and no MacBooks.

In this activity, students program a Two Truths and a Lie App. In the app, the user is provided 3 different buttons, two of which have true statements about the app creator, one of which is a lie. You could make this very simply on a single page, with a string at the bottom that changes depending upon what is clicked, but when we did this in class, a student loudly exclaimed, "That's Dope!!" I think this speaks for itself.

Some content I would cover beforehand would definitely include:

Making sure students understand the relationship between Swift and Swift UI, by programming an app that provides updates based on different inputs.

Furthermore, there are some great activities to learn how to build user interfaces using Swift UI here:

https://developer.apple.com/tutorials/develop-in-swift/

Last, if you want to make sure students have familiarity with things like conditionals, loops, and other tools of CS and computational thinking, use the Apple Book entitled: Develop in Swift: Explorations.

You could definitely include and build this activity off of a planning session on Keynote.

For the programming, the big addition in this example is the Navigation Stack. My understanding of Navigation Stacks is that they allow you to make different screens which "Stack" on each other like ZStacks. They have a lot of options, which we're only going to use a few of here. Frankly, advanced programmers would use different techniques than what is shown here, but this is an educational app building exercise.

Here is a video showing how to build the app from beginning to end:

https://www.youtube.com/watch?v=2jvCzkXiq6I

And here is the code we wrote together in class.

//main file

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                HomeScreen()
            }
        }
    }
}

And the Home Screen file

import SwiftUI

struct HomeScreen: View {
    var body: some View {
        VStack {
            Text ("My name is Andy")
                .font (.largeTitle)
                .padding()
            Text ("Two things below are true, but one is a lie.  Try picking the lie to learn about me.")
            
            NavigationLink (destination: ScreenOne()){
                Text ("My sister's name is Liz.")
                    .padding ()
                    .foregroundColor (.blue)
                    .background (.orange)
                    .cornerRadius (8)
            }
            NavigationLink (destination: ScreenTwo()){
                Text ("I like to cook for my family.")
                    .padding ()
                    .foregroundColor (.blue)
                    .background (.orange)
                    .cornerRadius (8)
            }
            NavigationLink (destination: ScreenThree()){
                Text ("I have traveled to South America.")
                    .padding ()
                    .foregroundColor (.blue)
                    .background (.orange)
                    .cornerRadius (8)
            }
        }
    }
}

And an example screen file:

import SwiftUI

struct ScreenOne: View {
    var body: some View {
        VStack (spacing: 20){
         Text ("True")
                .font (.title)
            NavigationLink ("Go Home"){
                HomeScreen()
            }
            
        }
    }
}

            

The end result is five Swift files, with navigation links that allow the user to go from the HomeScreen to each of the other screens by clicking, and going back using the Go Home button. There is also a back button on the top left, because these are made using a navigation stack, but googling methods for eliminating these (such as using the setting for the navigation back button to false), but it isn't essential for the lesson objective.