Your First iOS & SwiftUI App: An App from Scratch

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.

Create a New Project

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. 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 app 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.your name” or “com.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 these should be unchecked.
• Click next and choose a location to save it. I’m going to save that on the desktop.

ContentView.swift

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 of all 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 the 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 just click the resume button in the upper right to get it going 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 again, later, I’ll just briefly tell you what’s going on here.

At the very top, we’re importing SwiftUI. That’s saying, hey, I want to be able to use the SwiftUI framework in this file.

The next lines of code are saying, I want to define a view called content view, and it’s going to have a body.

And you can see inside the body of the view right now is this VStack

And inside of the VStack are those two things 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 two 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:

"Hello, SwiftUI!

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 the Selectable button! Clicking that will switch you into a selection mode, and that will allow you to click on things in the canvas to inspect them.

So you can click 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.

Hello, Xcode!

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 of the text view, and then on it again before changing the text.

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, and you’ve gotten a little peek at a this code and the SwiftUI canvas, before we go any further, let’s take a few minutes to lean more about what a “View” is in SwiftUI.