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

I said we're going to build this app from scratch, and the first step to building is to create a project. So, let's do that together, and just take a little look at how to start working with SwiftUI. Don't feel like you need to have a deep understanding of any of the code you see in this episode. All that's important at this stage of the course is that you get the general idea of what's going on. Go ahead and start up Xcode, and make sure you're running Xcode 14 or later. I'm using version 14.2. You may be running a more recent version than that, and that's okay as long as it's Xcode 14 or later, you should be fine. Click the button here that says Create a new Xcode project. And make sure you choose the template iOS application, and click Next. For product name, put in Bullseye, all one word. For Team, leave that to whatever the default is for you. For Organization Identifier, put in something unique, such as come. your name or come. your company name, and leave everything else to default. This is called reverse domain naming. The Interface should be SwiftUI, Language should be Swift, and all of these should be unchecked. Click Next, and choose a location to save it to. I'm just gonna save that on the desktop. What this has done is it's created some starter code for you. Over on the left is the navigator panel. Right now, it lists all of the files in the project, so this tab is aptly named the Project Navigator. There are other navigators up here, but this is the one you'll use most. The file we'll be using the most for the beginning part of this course is called ContentView.Swift. So, go ahead and click on that to open it up, and then you can close the navigator with a button in the upper left. This is the file that's responsible for what the main screen of our app looks like. The way SwiftUI works is it uses a two-part editor. Over here on the left is the code that generates content view, and we can get a preview as we develop the code over on the right in the Canvas. Now, when you first start things up, automatic previewing may be paused, but you can just click the resume button in the upper right to get it going again, and see what we've got out of the box. The template that we used starts us out with something extremely basic. It's just a little image of a globe, and a text view that says "Hello, world!" I want to look at these two things a little more closely, so I'll click on this zoom in button in the lower right of the Canvas. To see how that's being created, we can take a look at the code. We'll talk about all of these things later. Again, I'll just briefly tell you what's going on here. At the very top, we're just importing SwiftUI that's saying, hey! I wanna be able to use the SwiftUI framework in this file. The next lines of code are saying, I want to define a view called ContentView, and it's going to have a body. And you can see inside of the body of the view right now is this VStack, and inside of the VStack are those two things that we can see in the Canvas, the globe image, and the text that says "Hello, world!" And then everything has some padding around it. These five lines of code at the bottom are what's creating the actual preview in the Canvas. In this case, it's saying make one of those content views that I defined, and display it in the Canvas. So if we were to delete all of that, the preview would disappear. I'm going to command Z to undo and bring everything back. Now, let's say we want to change this text view to show something else. Instead of "Hello, world!" We want it to say "Hello, SwiftUI!" There's a few ways to do this, and I'll show you too just to help you get familiar with the interface. There isn't a best or recommended way to do this, it's really up to your preference, and how you want to work. You can change the text directly in code, and that should automatically update the Canvas to match. You can also change it via the Canvas. By default, the Canvas is in a live mode, so if there were interactive elements like buttons or sliders, you could try them out right in the Canvas. At the bottom of the Canvas next to the live button is a selectable button. Clicking that, we'll switch you into a selection mode that will allow you to click on things in the Canvas to inspect them. So, you can click on the text view, and now you can see some properties of the text view over on the right in the Attributes Inspector. One of those properties is the actual text. So, you can edit that to say "Hello, Xcode!" right here. And if you press Return, the Canvas should update to match. And the code should update as well. If that didn't work for you, try clicking off the text view, and then on it again before changing the text. You can also put your cursor on the text over in the code. And it should also select it over in the Canvas. If at any point the preview pauses or stops working for you, you can reload it with the keyboard shortcut option command P, or by clicking on that little resume button that should appear in the upper right. If the Canvas ever goes missing, you can show it again by clicking on the Adjust Editor options button in the upper right of the editor, and selecting Canvas. You can also press Option Command Return to hide or show it again. Now that you've got a project started, you've gotten a little peak at this code and the SwiftUI Canvas. Before we go any further, let's take a few minutes to learn more about what a view is in SwiftUI.