Your First iOS & SwiftUI App: An App from Scratch

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

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. So 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 object of the game is to put the bullseye, which is on a slider that goes from one to 100, as close to a randomly chosen target value, as you can. In the example here, the aim is to put the bullseye at 89. You can't see the current value of the slider, so if I were playing I'd have to just eyeball it as close to 89 as I could. So I would slide this somewhere over here, 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 zero. 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 bullseye, from app idea to 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 pop-up when the user taps the button." While you're doing this, please split your list into two parts; must-haves and nice-to-haves. The must-haves list should include the bare minimum functionality to have a shippable app. This is often called a minimum viable product or MVP. In 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-haves list should contain everything else, including things like making the app look amazing and adding the leaderboard screen. When developing an app, it's often a good idea to segment your features into milestones like this, often starting out with an 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 the 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. 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, and 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. Okay, pause the video and good luck. (upbeat music) Welcome back. 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 one 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 a score. If we finish the above items we should have enough from minimum 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, and 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 thing. I 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's just so much to do, and where to begin? By cutting up the workload into small steps and making 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.