Xcode and your first iOS app

You already know Swift's syntax, structs, protocols and closures. Now it is time to use that knowledge to build an iPhone app. iOS apps are made in Xcode, Apple's free development environment for the Mac. It contains a code editor, the Swift compiler, iPhone and iPad simulators, a preview canvas and debugging tools. Xcode only runs on macOS, so you will need a Mac.

Installation and a new project

1. 1
   Get Xcode

   Find Xcode in the Mac App Store and install it; it is a large download, so you need a fast connection. On the first launch Xcode offers to download the iOS platform (the simulator files) — accept it.

2. 2
   Choose the template

   Choose File › New › Project…, open the iOS tab at the top and pick the App template.

3. 3
   Fill in the options

   Product Name: EducoraNotes, Organization Identifier: com.educora. Choose SwiftUI for Interface and Swift for Language. You can leave Team empty for now.

4. 4
   Save

   Press Next, choose a folder and press Create. Xcode opens the project with ContentView.swift already in the editor.

The project structure

• EducoraNotesApp.swift — the app's entry point: a struct marked with @main that conforms to the App protocol.
• ContentView.swift — the first screen; you can change it however you like.
• Assets.xcassets — the app icon (AppIcon), the accent colour (AccentColor) and images.
• The project file (the blue icon at the very top of the Navigator) → the target → the General and Signing & Capabilities tabs: name, version, minimum iOS version and signing.

import SwiftUI

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

import SwiftUI

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

#Preview {
    ContentView()
}

Previews and the canvas

The canvas to the right of the editor shows the view in the #Preview block without running the app and updates as soon as you change the code. The preview is interactive: you can tap buttons and scroll lists. You can write several previews in one file to check the screen in the dark theme or with large text as well:

#Preview("Light") {
    ContentView()
}

#Preview("Dark") {
    ContentView()
        .preferredColorScheme(.dark)
}

#Preview("Large text") {
    ContentView()
        .environment(\.dynamicTypeSize, .xxxLarge)
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

#Preview {
    ContentView()
}

Run it in the simulator and on an iPhone

You choose a device in the run destination menu at the top of the window: any iPhone or iPad simulator, or a connected real device. Cmd+R builds and runs the app, and Cmd+. stops it. In the simulator Cmd+Shift+H goes to the Home Screen, and Cmd+Left and Cmd+Right rotate the device. Running on a real iPhone takes a few steps:

1. 1
   Add your Apple ID

   In Xcode › Settings › Accounts, press + and sign in with your Apple ID. Then, on the target's Signing & Capabilities tab, tick Automatically manage signing and choose yourself (Personal Team) as the Team.

2. 2
   Connect the iPhone

   Connect the phone to the Mac with a cable, answer Trust to “Trust This Computer?” on its screen and enter your passcode.

3. 3
   Turn on Developer Mode

   On the iPhone, turn on Settings › Privacy & Security › Developer Mode (the item appears after the device has been connected to Xcode). The phone restarts; then confirm with Turn On.

4. 4
   Run and trust

   Choose the iPhone as the run destination and press Cmd+R. With a free account, the first time you must trust your own developer profile in Settings › General › VPN & Device Management.

While the app runs, messages written with print(...) appear in the console at the bottom of Xcode (Cmd+Shift+Y opens the debug area). Click a line number to set a blue breakpoint: the app will pause on that line and you will be able to see the values of the variables.