Intro

Hi, I am William Jiamin, the creator of youtube channel CodeWithWilliamJiamin and the creator of this website(learn-it-free.com). I am a self-taught iOS developer and I have been developing iOS apps for 10 years. I have been using SwiftUI since it was released in 2019. I have created many SwiftUI tutorials on my youtube channel . I am very excited to share my knowledge with you and I hope you will enjoy this article.

Our First SwiftUI App

1.Create a new project

OK, let's create our new project.

I am using Xcode version 15.0.1 here. You can use any version of Xcode that supports SwiftUI. Don't worry if you are using an older version of Xcode or a newer version of Xcode. The code should work for you as well.
Xcode seldom changes the syntax of SwiftUI. So, you should be fine. And rest assured, I will update the code if there is any change in the syntax of SwiftUI.

If you can't find the starter screen, you can go to File -> New -> Project.

I will add some screen shots here to help you create the project without the starter screen.

Remember you need at least one simulator to run your app. If you don't have any simulator, you can download one from the list. I didn't have any simulator here, so I downloaded one. For demo purpose, I will use ios simulator (because i think it is the most popular one, everyone has an iphone nowadays right?).

Then let's choose create app. You can choose other options if you want. But for this tutorial, we will choose create app.

When asked to choose options, you can enter whatever name for your product name.
I use OurFirstSwiftUIApp here. You can use any name you want. You can see I am using camel casing here. It is a common practice to use camel casing for product name. You can use any casing you want. But I recommend you to use camel casing.
Which means you should capitalize the first letter of each word except the first word. For example, you can use OurFirstSwiftUIApp, OurfirstSwiftUIApp, ourFirstSwiftUIApp, ourfirstSwiftUIApp, ourfirstswiftuiapp, etc. But I recommend you to use OurFirstSwiftUIApp.It is a common practice in the industry. And most importantly, it is easier to read.

At Team section, you can choose your team. If you don't have a team, you can choose None. It is fine. You can always add a team later. My recommendation is to choose None for now. You can always add a team later.Because you don't need a team to run your app in simulator. You only need a team if you want to run your app on a real device. And you might need to enroll in Apple Developer Program to create a team. It costs $99 per year. So, I recommend you to choose None for now. You can always add a team later.

And don't forget to choose SwiftUI for User Interface. It is very important. If you don't choose SwiftUI, you will not be able to use SwiftUI in your project. You can always add SwiftUI later. But it is easier to choose SwiftUI now.

At language section, you can choose Swift or Objective-C. I recommend you to choose Swift. Because Swift is the future. Objective-C is the past. Of course, in some part of our code , I will use Objective-C. But I think that just one or two lines of code. So, I recommend you to choose Swift.

The storage section is something new in Xcode 15 because apple introduce SwiftData which is a alternative to CoreData. I will talk about it in another article. For now, you can choose none because we don't need any storage for our first app.

2. Run the app

When you finish creating the project, you should see something like this.

The left side is the project navigator.
You can see our project have two files. One is OurFirstSwiftUIAppApp.swift. The other one is ContentView.swift.
The first one is the app file.Which should be something like this:

//
//  OurFirstSwiftUIAppApp.swift
//  OurFirstSwiftUIApp
//
//  Created by WilliamJiamin on 2023/10/30.
//

import SwiftUI

@main
struct OurFirstSwiftUIAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

The second one is the content view file. Which should be something like this:

//
//  ContentView.swift
//  OurFirstSwiftUIApp
//
//  Created by WilliamJiamin on 2023/10/30.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Let's focus on the second ContentView for now. You can see there is a struct ContentView. It is a struct. If you don't know what is a struct , you can check my youtube series learn swift the hard way
If you don't want to watch the whole series, you can just think struct as kind of structure.(It is a data structure). It is a way to organize your data and we often use is to write the layout and different components of our app.

And what is inside is the most exciting part. You can see there is a VStack.

VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()

It is a vertical stack. It is a way to organize your layout. You can think it as a vertical container. And inside the container, there is a image and a text.

Do you still remember the declarative programming we talked about earlier? You just declare there is a vertical stack and boom ----There is a vertical layout for you.

And let's look inside of the VStack:

Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
Text("Hello, world!")

This is even more instesting. You can see there is a image and a text. But you are not just simply say 'image()' and 'text()'. You can pass more parameter to your declaration: You are saying 'Image(systemName: "globe")' and 'Text("Hello, world!")'. You are saying there is a system image with the name of globe and there is a text with the content of "Hello, world!".

OK, job done.So if you look at right side ,you will find inside your simulator:

You can see there is a globe image and a text of "Hello, world!".

That is ! Its is so simple. You don't need to worry about padding, layout, etc. You just declare what you want and SwiftUI will do the rest for you.

This is a huge life-saver for iOS developers. Because we don't need to worry about the layout anymore. I still remember the days when I was using storyboard and UIKit. I spent a lot of time on layout. And I will spend days solving all the bug and conflict of restrain. Believe me ,It is a nightmare. But now, we don't need to worry about it anymore. We just need to focus on the business logic. And we can save a lot of time and energy.

OK, moment of truth. Let's run the app. You can click the play button on the top left corner. Or you can press command + R. You should see something like this:

A build only device cannot be used to run this target.

So , what's wrong? Don't worry. It is very common to see this error. It is because you don't have any simulator or you are not choose the right destination to run your app. You can see the destination on the top left corner. You can click it and choose a simulator. Or you can go to Product -> Destination -> Choose a simulator.

I chose iPhone15 pro max here. You can choose any simulator you want. But remember if you choose ipad or other devices, you might need to change the layout of your app. Because the layout of ipad is different from iphone. But don't worry. We will talk about it in another article.

After you choose a simulator, you can run the app again. You should see something like this:

Isn't it beautiful? You can simulate an iphone on your mac, and inside this simulated iphone, you got your app running.

OK, let's stop here. In the next article, we will dive deeper into the layout customization and add our own flavor to the app. Don't forget to subscribe to my youtube channel CodeWithWilliamJiamin and my website(learn-it-free.com). Many thanks.