Your First iOS App: Getting Started with SwiftUI

Update Note: When you finish creating a new project in Xcode, it’s OK if the default code generated for you looks a little different.

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 com.yourname or com.yourcompanyname 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 going to 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 “ContentView”. 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 want to be able to use the SwiftUI framework in this file.” 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 ContentViews 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 wanted to say “Hello, SwiftUI”. You can change the text directly in code. And that should automatically update the canvas to match.

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