Implementación

• Crear una aplicación iOS

  Inicie Xcode y seleccione Create a new Xcode project (Crear un nuevo proyecto de Xcode) en la pantalla de bienvenida:

  

  En iOS, Application (iOS, Aplicación), seleccione Single View App (Aplicación de vista única) y haga clic en Next (Siguiente):

  

  Escriba un nombre para el proyecto, por ejemplo, Introducción a iOS. Asegúrese de que el lenguaje esté configurado en Swift y la interfaz de usuario sea SwiftUI, luego haga clic en Next (Siguiente):

  

  Por último, seleccione un directorio y haga clic en Create (Crear) para crear el proyecto.

• Actualizar la vista principal

  Desde la lista de archivos a la izquierda de Xcode, abra ContentView.swift y reemplace el código con este contenido:

  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
  }

  ¿Qué acabamos de agregar?

  • Creamos una clase Note para almacenar los datos de las notas. Utilizamos dos propiedades distintas para ImageName e Image. Nos ocuparemos de Image más adelante en la sección Agregar almacenamiento.
  • Creamos una clase UserData para contener datos específicos del usuario, en esta etapa, solo una lista de objetos de Note.
  • La vista principal ContentView contiene una lista de ListRow's
  • Cada línea es representada por una ListRow: una pila horizontal con una imagen y texto. El texto es una pila vertical con el nombre (en negrita) y la descripción de la nota.
  • Por último, ajustamos ContentView_Previews y agregamos prepareTestData() para permitir una representación de vista previa en el lienzo.
• Crear y probar

  Verifique el lienzo para verificar que el diseño sea el deseado. Si no ve el lienzo, puede habilitarlo en el menú Editor, luego haga clic en Canvas (Lienzo). Es posible que también deba hacer clic en el botón resume (reanudar) en el lienzo para generar la vista previa del diseño.

  

  Tenga en cuenta que los datos para la vista previa se generan en el código (a partir de la línea 70), los datos no aparecen en el tiempo de ejecución. Si todo está bien, cree e inicie la aplicación en el simulador. Haga clic en el menú Product (Producto) y seleccione Run (Ejecutar) o presione  . Como alternativa, puede hacer clic en el botón Play (Reproducir) ▶️ en la barra de herramientas.

  

  Luego de un momento, la aplicación se inicia en el simulador de iOS, con una pantalla inicial vacía. Los datos de vista previa no se procesan en el tiempo de ejecución, solo están destinados a vistas previas dentro de Xcode.