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 going 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 notes for this episode 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 89. You can’t see the current value of the slider here, so if I were playing, I’d have to just eyeball it as close to 89 as I can.

So I would slide this somewhere over here, and then tap the “Hit Me!” button and a popup would appear and tell me my score.

The closer to the target value you are, the more points you should score. This 200 points is a perfect score.

To dismiss the alert, you’d press this button, then you’d be back at the main screen, your points added to the ongoing score, and a new round would start with a new random target.

The game repeats until the player presses the “Start Over” button, 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.

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 contain 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.

OK, pause the video, and good luck.

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.