# Getting Started with SwiftUI

### Creating the Project

1. Enter the name of our app. In this example, we will be calling our app `Sample`.
2. Choose **SwiftUI** for the **Interface**.

<figure><img src="/files/0a7qjlhfLKdOZCSDLkTz" alt="" width="563"><figcaption><p>Creating a new SwiftUI project</p></figcaption></figure>

### Project Navigator

On the left side of Xcode, we shoul see a list of files in the directory. This is known as the **project navigator**.

* `SampleApp.swift` contains code that is executed when we launch our app. If we want to create something when we launch our app and keep it throughout the app’s lifetime, we will write it here.
* `ContentView.swift` contains code that defines the UI for our app. Most of our code will be written in a file similar to this.
* `Assets.xcassets` is a catalog that contains the app’s images, icons, colors, and more.
* There is a group labeled `Preview Content` that contains a single file called `Preview Assets.xcassets`. This is a catalog similar to `Assets.xcassets` above, but for previewing the UI which will be explained next.

<figure><img src="/files/V0iuNzeHS62XpquBJVAv" alt="" width="265"><figcaption><p>Project Navigator</p></figcaption></figure>

### Canvas and Live Previews

On the right side of Xcode, we should see a canvas containing a preview of the app. If not, go to the **Editor** menu and select **Canvas** (alternatively ⌥ ⌘ ↵). The device that is shown on the preview depends on the device we select at the top center of Xcode. Because the preview is updated live, errors within our code can cause the preview to pause. To resume, we can click **Resume** in the canvas or even better, use the shortcut: ⌥ ⌘ P

<figure><img src="/files/SlyspWZK6Up5NMDvdsa1" alt="" width="347"><figcaption><p>Live Preview Canvas</p></figcaption></figure>

### Exploring `ContentView.swift`

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

// iOS 16 and below
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

To use all of the functionality provided by the SwiftUI framework, we must import it using `import SwiftUI`. This is similar to how we import other frameworks such as UIKit, MapKit, etc.

Next, we create a struct called `ContentView` that conforms to the `View` protocol. The `View` protocol is a type that represents our app’s UI and provides modifiers to configure our views. If we want to draw **anything** on the screen using SwiftUI, then it must conform to the `View` protocol.

Inside of the `ContentView` struct, there is a required property called `body` that has the type of `some View`. What this type really means is that this property will return *something* that conforms to the `View` protocol. Later on, we will learn that the actual return type of this property is very complicated (could be 1000+ characters) so providing a general return type of `some View` means we can ignore that. The `body` property is the only requirement needed to conform to the `View` protocol.

### iOS 17 Onwards

Starting in iOS 17, the syntax for the preview is different:

```swift
#Preview {
    ContentView()
}
```

The functionality is the exact same as it was in previous iOS versions.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ios-course.cornellappdev.com/resources/textbook/swiftui/getting-started-with-swiftui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.