Implementazione

• Creazione di un'applicazione iOS

  Avvia Xcode e seleziona Create a new Xcode project (Crea un nuovo progetto Xcode) dalla splash screen:

  

  In iOS, Application (Applicazione) , seleziona Single View App (App visualizzazione singola), quindi fai clic su Next (Avanti):

  

  Digita un nome per il progetto, ad esempio iOS Getting Started. Assicurati che il linguaggio sia impostato su Swift e che l'interfaccia utente sia SwiftUI, quindi fai clic su Next (Avanti):

  

  Infine, seleziona una directory e fai clic su Create (Crea) per creare il progetto.

• Aggiornamento della visualizzazione principale

  Dall'elenco di file a sinistra di Xcode, apri ContentView.swift e sostituisci il codice con questo contenuto:

  import SwiftUI
  
  // singleton object to store user data
  class UserData : ObservableObject {
      private init() {}
      static let shared = UserData()
  
      @Published var notes : [Note] = []
      @Published var isSignedIn : Bool = false
  }
  
  // the data class to represents Notes
  class Note : Identifiable, ObservableObject {
      var id : String
      var name : String
      var description : String?
      var imageName : String?
      @Published var image : Image?
  
      init(id: String, name: String, description: String? = nil, image: String? = nil ) {
          self.id = id
          self.name = name
          self.description = description
          self.imageName = image
      }
  }
  
  // a view to represent a single list item
  struct ListRow: View {
      @ObservedObject var note : Note
      var body: some View {
  
          return HStack(alignment: .center, spacing: 5.0) {
  
              // if there is an image, display it on the left
              if (note.image != nil) {
                  note.image!
                  .resizable()
                  .frame(width: 50, height: 50)
              }
  
              // the right part is a vertical stack with the title and description
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                  .bold()
  
                  if ((note.description) != nil) {
                      Text(note.description!)
                  }
              }
          }
      }
  }
  
  // this is the main view of our app, 
  // it is made of a Table with one line per Note
  struct ContentView: View {
      @ObservedObject private var userData: UserData = .shared
  
      var body: some View {
          List {
              ForEach(userData.notes) { note in
                  ListRow(note: note)
              }
          }
      }
  }
  
  // this is use to preview the UI in Xcode
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
  
          let _ = prepareTestData()
  
          return ContentView()
      }
  }
  
  // this is a test data set to preview the UI in Xcode
  func prepareTestData() -> UserData {
      let userData = UserData.shared
      userData.isSignedIn = true
      let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
  
      let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
      let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
  
      n1.image = Image(systemName: n1.imageName!)
      n2.image = Image(systemName: n2.imageName!)
  
      userData.notes = [ n1, n2 ]
  
      return userData
  }

  Che cosa abbiamo aggiunto?

  • Abbiamo creato una classe Note per archiviare i dati delle note. Abbiamo utilizzato due proprietà diverse per ImageName e Image. Ci occuperemo dell'immagine in seguito nella sezione Aggiunta di storage.
  • Abbiamo creato una classe UserData per contenere i dati specifici dell'utente, in questa fase solo un elenco di oggetti Note.
  • La visualizzazione principale ContentView contiene un elenco di ListRow
  • Ogni riga è renderizzata da una ListRow: una stack orizzontale con un'immagine e testo. Il testo è una stack verticale con il nome della nota, in grassetto, e la relativa descrizione.
  • Infine, abbiamo adattato le ContentView_Previews e abbiamo aggiunto prepareTestData() per consentire una renderizzazione dell'anteprima nel canvas.
• Creazione e test

  Controlla il canvas per verificare che il layout corrisponda alle aspettative. Se non vedi il canvas, puoi abilitarlo utilizzando il menu Editor, quindi facendo clic su Canvas. Potrebbe inoltre essere necessario fare clic sul pulsante resume (Riprendi) per generare l'anteprima del layout.

  

  Tieni presente che i dati dell'anteprima vengono generati nel codice (a partire dalla riga 70) e non compaiono in runtime. Se l'aspetto è quello previsto, crea e avvia l'applicazione nel simulatore. Fai clic sul menu Product (Prodotto) e seleziona Run (Esegui) o digita . In alternativa, puoi fare clic sul pulsante Play (Riproduci) ▶️ nella barra degli strumenti.

  

  Dopo qualche istante, l'applicazione parte nel simulatore iOS con una schermata inizialmente vuota. I dati dell'anteprima non vengono renderizzati in runtime, sono previsti solo per l'anteprima in Xcode.