Course page
Log in

You are watching a free preview. Enroll to open all 26 lessons, track progress and ask the course tutor.

Enroll for $54.99

Section 1: First steps with Swift and SwiftUI

Xcode, projects and previews

Article 12 min Lesson 2 of 26 Preview

Install Xcode from the Mac App Store. It is a large download, so start it early. When it finishes, open it once to let it install additional components.

Create the project

Choose File, New, Project, then the iOS App template. Fill in:

  • Product name: Trails
  • Interface: SwiftUI
  • Language: Swift
  • Storage: None for now (we add SwiftData ourselves later so you understand each step)

Xcode creates two Swift files. TrailsApp.swift is the entry point marked with @main. It declares a WindowGroup containing ContentView. ContentView.swift holds the first screen.

The Xcode window

  • Navigator on the left shows files.
  • Editor in the centre shows code.
  • Canvas on the right shows live previews. If you do not see it, open it from the Editor menu.
  • Inspector on the far right shows properties of the selected item.

At the bottom of ContentView.swift you will find:

#Preview {
    ContentView()
}

The #Preview macro tells Xcode what to render in the canvas. You can add several previews, for example one in dark mode and one with a larger text size, to check your layout in different conditions without running the app.

Running the app

Pick a simulator such as an iPhone model from the device menu at the top of the window and press Command+R. The simulator launches and your app opens. To run on your own iPhone, connect it with a cable, select it in the device menu and enable Developer Mode on the phone when prompted. A free Apple account is enough to run apps on your own device; publishing requires a paid developer membership.

Useful shortcuts

  • Command+R: build and run
  • Command+B: build only
  • Command+Shift+O: open any file quickly
  • Control+I: reindent selected code

Change the text in ContentView to "Trails", add an SF Symbol with Image(systemName:) and check the result in the canvas and simulator.

← → switch lessons