Build an iOS Application

Implementation

• Create an iOS project

  Start Xcode and create a new project by going to File > New > Project... or by pressing Shift + Cmd + N.
  

  

  Close

  

  Under iOS > Application, select App and choose Next.
  

  

  Close

  

  Type a name for your project, for example, Getting Started. Make sure Interface is SwiftUI and Language is Swift, then choose Next.
  

  

  Close

  

  Finally, select a directory and choose Create to create the project.
  

• Create the main view

  Create a new Swift File by clicking the plus (+) at the bottom of the navigation pane, or by pressing Cmd + N.

  Name the file Note.swift, and add the following content:

  import Foundation
  
  struct Note {
      let id: String
      let name: String
      let description: String?
      let image: String?
      
      init(
          id: String = UUID().uuidString,
          name: String,
          description: String? = nil,
          image: String? = nil
      ) {
          self.id = id
          self.name = name
          self.description = description
          self.image = image
      }
  }

  Code snippet copied

  Copy

  This struct holds information about notes, such as a name, description and image. Note: Only the name is a mandatory parameter in its initializer.

  Next, create another file named NoteView.swift with the following content:

  import SwiftUI
  
  struct NoteView: View {
      @State var note: Note
  
      var body: some View {
          HStack(alignment: .center, spacing: 5.0) {
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                      .bold()
                  if let description = note.description {
                      Text(description)
                  }
              }
  
              if let image = note.image {
                  Spacer()
  
                  Divider()
  
                  Image(systemName: image)
                      .resizable()
                      .aspectRatio(contentMode: .fill)
                      .frame(width: 30, height: 30)
  
              }
          }
      }
  }

  Code snippet copied

  Copy

  This defines a view that displays the information of a Note object, including creating an Image from its image property.

  Create a new SwiftUI View file named NotesView.swift with the following content:

  import SwiftUI
  
  struct NotesView: View {
      @State var notes: [Note] = []
  
      var body: some View {
          NavigationStack{
              List {
                  if notes.isEmpty {
                      Text("No notes")
                  }
                  ForEach(notes, id: \.id) { note in
                      NoteView(note: note)
                  }
              }
              .navigationTitle("Notes")
          }
      }
  }
  
  #Preview {
      NotesView()
  }

  Code snippet copied

  Copy

  This view will use the NoteView view to display all the notes in the notes array. If the array is empty, it will show a "No notes" message, as you can see in the Canvas.

  Note: If you do not see the canvas, you can enable it by going to Editor > Canvas. If you see a Preview paused message, you can resume it by pressing the ↻ button next to it.

  Close

  

  

  You can set the notes argument in the #Preview block to test how the view looks when the array is populated. For example:

  #Preview {
      NotesView(notes: [
          Note(
              name: "First note",
              description: "This is an example of a long note description that has \nexplicit line breaks.",
              image: "mic"
          ),
          Note(
              name: "Second note",
              description: "This is a short description.",
              image: "phone"
          ),
          Note(
              name: "Third note"
          )
      ])
  }

  Code snippet copied

  Copy

  Close

  

  

  Open the file that defines your App instance (for example, GettingStartedApp.swift) and replace the ContentView() initialization with NotesView().

  Delete the ContentView.swift file, we will not be using it for this tutorial.
  

  import SwiftUI
  
  @main
  struct GettingStartedApp: App {
      var body: some Scene {
          WindowGroup {
              NotesView()
          }
      }
  }

  Code snippet copied

  Copy

• Build and test

  Build and launch the app in the simulator by pressing the ► button in the toolbar. Alternatively, you can also do it by going to Product > Run, or by pressing Cmd + R.

  The iOS simulator will open and the app will run. As we are not setting a notes array, the default empty array is used and the "No notes" message is displayed.

  Close