Hello (SwiftUI) World - Beginner Tutorial For SwiftUI

By Eddy Chung

Hello SwiftUI World!

In late 2019, Apple released SwiftUI, a new way of building user interfaces for iOS apps.

Many developers, including myself, are super excited about it.

I’ve already written an article about whether you should learn SwiftUI or Storyboards.

In this post, I’ll cover some of the basics of iOS development - with SwiftUI.

Starting A SwiftUI Project

Open up Xcode and click Create a New Xcode Project.

Don’t have Xcode installed? Check out my installing Xcode video.

Create A New Xcode Project

Select Single View App.

Single View App

Hit next and fill in Product Name, Organization Name, and Identifier.

Be sure to select Swift as your language and SwiftUI as your user interface.

hello swiftui world 2020 01 10 12 21 32

If SwiftUI is not an option, double-check you are running the latest Xcode version. You’ll need Xcode 11 or higher for SwiftUI.

Hit next and choose where to save your project. Anywhere you’ll remember is fine.

hello swiftui world 2020 01 10 12 26 41

Hit create and you’ll be greeted with this project in Xcode:

hello swiftui world 2020 01 10 12 28 34

Let’s go over some of the different sections of Xcode.

hello swiftui world 2020 01 10 12 42 12

Toolbar

hello swiftui world 2020 01 11 17 07 00

The toolbar is the top bar in Xcode.

In the top left of the toolbar, you’ll see a play button and a stop button.

These buttons you’ll use often to run or stop your app.

Next to it, you’ll see the scheme that’s active and the device you’re going to be running on.

Schemes are just build settings for your iOS app.

If you select the device dropdown, you’ll be greeted with a bunch of simulators you can test your app on.

On the right, you’ll see a plus sign which opens the object library. Here’s a bunch of UI elements and code snippets you can add to your project.

Next to that, you’ll see a code review button, this is mostly if you’re working in teams and have to review your teammate’s code.

On the far right, you’ll see three buttons that hide and display different panes.

hello swiftui world 2020 01 11 17 09 26

If you can’t find a certain pane, be sure to check here to ensure it’s visible!

The Navigator pane is on the far left of Xcode.

Here’s where you’ll see various tabs. Each of these tabs allows you to browse different files, errors or other information.

For now, let’s just take a look at the Project Navigator tab.

Project Navigator

hello swiftui world 2020 01 11 17 12 53

The Project Navigator is the tab you’ll be using most often in your Navigator Pane.

Here you’ll see all the files in your project.

At the very top of this navigator you’ll see your Project Settings.

hello swiftui world 2020 01 11 17 13 28

Here you’ll be able to modify high-level settings for your iOS app.

This includes information such as the name, minimum deployment version (for example iOS 13+), the App Icon and more.

Generally, you won’t modify these settings too often, only at the beginning and end of your project.

Underneath your project name, you’ll have a folder that has the same name as your project.

Here’s where most of your source code lives and where you’ll be spending the most time.

The first two files are the AppDelegate.swift and SceneDelegate.swift.

This is where you’ll write code that you want to execute when your app launches or your scene launches.

A single app may have multiple scenes. For example, check out this split-screen note app. Two scenes in one app.

Next, you have your content view, this is the first screen that loads in your iOS app. Right now is it just says “Hello World”.

Assets.xcassets is where you’ll store images, icons, and other graphic assets.

LaunchScreen.storyboard is how you design your launch screen.

Info.plist describes permissions (for example: location, contacts, phone call) and other settings for your app.

Preview content is where you’ll add assets that are required for your previews to run in Xcode.

The next two folders are where you’ll write tests HelloWorldTests and HelloWorldUITests.

Lastly, the Products folder is where your finished products live, you won’t be using this too often.

Code Editor

Open up ContentView.swift and you’ll see the code editor.

Here’s where most of your work will be done.

It’s where you’ll write SwiftUI code and regular Swift code.

Above it, you’ll see the jump bar.

The jump bar allows you to navigate through different parts of your project, even if your project navigator is closed.

Preview Pane

To the right of the code editor, you’ll see a preview pane.

Note that you’ll only see this when a SwiftUI file is open in the code editor.

Here’s where you’ll see a live preview of your application.

This pane makes development so much faster - trust me, I’m so glad Apple added this.

At the top, you may see a Resume button if your preview has been paused.

Clicking resume will tell Xcode to build the preview.

You should see a hello world app like this:

You can do more than just preview your app in this pane, if you hold command + click on an element, you’ll see a menu.

Here you can add different things and it will modify your code to match!

Lastly, there’s a play button here in the bottom right of the preview app.

If you hit the play button, the app will be in “Live Preview” mode, essentially running your app but still enabling you to update it via code.

Inspector Pane

The far right-hand pane is the inspector pane.

If you noticed, you can modify your view from this pane as well!

Click on the Text in your view and then select a new font size - like Large Title.

Now you’ll notice the text will increase in size and your code will be updated.

You can change the color as well, green for example, and you’ll notice the same thing.

Modify The Text

Let’s modify our text in the code.

Change the “Hello World” text to anything you’d like, I’ll use “Hi, I’m eddy”.

Notice that your preview window will update.

Run Your Application

The last step is to run your application.

If you have an iPhone you can plug it into your computer now.

Be sure to unlock it and select “Trust” when prompted on your phone.

If you don’t have an iPhone, don’t worry, you can run your fresh new application on a simulator.

hello swiftui world 2020 01 11 17 14 50

Select the device you want to run on from the drop-down menu.

And then hit the play button!

Now you’ll have a SwiftUI app running on your phone or simulator.

hello swiftui world 2020 01 11 17 40 24

If you liked this post, you'll love my free guide: Secrets To iOS Development. Speed up your learning curve - hundreds of students have already downloaded. Thanks for reading!
Profile Picture of Eddy Chung

Eddy Chung

I am a professional iOS developer in Silicon Valley. I teach iOS development on ZeroToAppStore.com. If you'd like to learn more about me click here or you can contact me at: eddy@zerotoappstore.com

Similar Posts