Your First iOS & SwiftUI App: An App from Scratch

Believe it or not, we’re going to start the course right off with a challenge.

First, let’s take a closer look at the game you’ll be making in this course: Bullseye. I’ll show you how it’s supposed to work, and then challenge you to pause the video and make a programming to-do list for what we need to do to make this app.

This is important, because it builds the good programming habit of figuring out WHAT you want to do, before figuring out HOW you’re goning to do it. Let’s dive in.

When you’re making an app in the real world, you’ll usually work with an app designer who puts together some visual designs of what the app you’re building should look like.

Here we’re looking at a visual design for Bullseye, created by our designer Luke. I’ll put a link to this design in the author’s notes so you can check this out on your own as well.

Basically, the objective of the game is to put the bull’s eye, which is on a slider that goes from 1 to 100, as close to a randomly chosen target value as you can.

In the example here, the aim is to put the bull’s eye at 37. I can’t see the current value of the slider here, so I just to eyeball it as close to 84 as I can.

This looks about right to me. I’ll then tap the “Hit Me!” button and a popup, also known as an alert, appears and tells me my score.

The closer to the target value you are, the more points you score. Now after you dismiss the alert popup by pressing the OK button, a new round begins with a new random target. The game repeats until the player presses the “Start Over” button (the curly arrow in the bottom-left corner), which resets the score to 0.

This game probably won’t make you an instant millionaire on the App Store, but hey - even future millionaires have to start somewhere!

By the way, if you’re curious to learn how Luke created the app design that I just showed you, check out our sister course: Your First iOS App: Designing the App.

That’s a short and optional course where we walk you through the entire design process for Bull’s Eye: from an app idea, to a paper sketch, to the full visual design that you see here.

It’s your choice: if you’re really curious about app design, you can go ahead and watch it right now, before continuing with the rest of this course. Or, if you’re mostly interested in the programming side of things, keep watching this course, and you can check out the design course later.

It’s an optional course, but it’s really fun and it’s nice to know at least a little about app design even if you’re a developer. So I just wanted to let you know the course is there when you need it.

Allright if you’re still with us, back to this challenge. Now that you’ve seen what the game will look like and what the gameplay rules are, it’s time for your challenge.

Your challenge is to pause the video, and make a list of all the things that you think you’ll need to do in order to build this game.

For example, you might write down “Add the “Hit Me” button”, or “Show a popup when the user taps it.”

While you’re doing this, please split your list into two parts: must haves, and nice-to-have.

The “must haves” list should include the bare minimum functionality to have a shippable app. This is often called a minimal viable product, or MVP. For the case of Bullseye, it should contian everything you need to do to get the core gameplay working; in other words the ability to play the game. The game may not look great yet, and it might not have all the fancy features and bells and whistles, but it works.

The “nice to have” list should contain everything else, including things features like making the app look amazing, or adding the leaderboard screen in.

When developing an app, it’s often a good idea to segment your features into milestones like this, often starting out with a MVP like we’re doing here. That way you can get a first version out quickly and start getting feedback, as you continue to iterate and add features.

So again - your challenge is to think about all the “must haves” and “nice to haves” that you need to do to develop this app, and write those down. It doesn’t matter if you don’t actually know how to accomplish these tasks yet. When you’re making an app, the first step is to figure out what you need to do; and then later on you’ll figure out how to do those things.

You’d be surprised at how many people start writing code without a clear idea of what they’re actually trying to achieve. No wonder they get stuck!

So give this your best shot, and you might find it helpful to look at the design of Bullseye in Figma as you do this. And don’t worry - it’s no big deal if you draw a blank. You’re new to all of this! As you proceed through this course and gain more experience making apps, it will get easier and easier.

Allright that’s it - now pause the video, and good luck.

This is what I came up with.

For the “must haves” list, I simply took the gameplay and cut it into very small chunks:

• Add an instructions label

• Add a target label

• Add a slider and make it go between the values 1 and 100

• Add a “Hit Me” button

• Style the text like Luke’s design

• Show a popup when the user taps the Hit Me button

• Read the value of the slider after the user taps the Hit Me button.

• Generate a random number for the target value.

• Calculate and display the store.

If we finish the above times, we should enough for a minimal viable product.

Next, here’s what I put for the “nice to have” list to really polish the app:

• Implement multiple rounds
• Implement restarting the game
• Add the leaderboard screen
• Make the app look pretty :]

I might have missed a thing or two, but this looks like a decent list to start with.

The reason I gave you this challenge is because whenever I begin working on a new app, I do this exact same thing. I first make a list of all the different pieces of functionality I think the app will need. This becomes my programming to-do list.

You may have a cool idea for an app but when you sit down to write it, the whole thing can seem overwhelming. There is just so much to do… and where to begin? By cutting up the workload into small steps you make the project less daunting – you can always find a step that is simple and small enough to make a good starting point and take it from there.