Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:07

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 8 de 23

Clase 8 / 23

Recursos

Utilizar buenas prácticas para estructurar proyectos resulta vital para el éxito a largo plazo de tus aplicaciones. Aquí, exploraremos cómo crear una nueva vista, agregar propiedades y variables correctamente, reorganizar archivos, y aplicar prácticas útiles para el desarrollo de tu proyecto final.

Para empezar, si has estado siguiendo este curso, seguramente has aprendido a incluir tarjetas medianas en una lista. En esta clase te guiamos para que continues adelante con esas habilidades.

¿Cómo implementar un switch para manejar diferentes casos de tarjetas?

Para poder mostrar tarjetas de diferentes tamaños en una lista, utiliza un switch en Swift que te permitirá organizar y cambiar entre distintas condiciones. Aquí como se hace:

switch card.type {
case .small:
    // Muestra la vista de tarjeta pequeña
case .medium:
    // Muestra la vista de tarjeta mediana
}

Este enfoque permite determinar qué tipo de vista debe renderizarse según el tamaño de la tarjeta.

¿Cómo organizar el código separando archivos?

Tener modelos, vistas y funciones en un solo archivo no es una práctica recomendada. Aquí te mostramos cómo distribuir el código para un manejo más eficiente y legible:

Crear una carpeta para los modelos:

Crea una nueva carpeta nombrada models.
Añade un archivo vacío dentro de esta carpeta llamado nCard.swift.
En este archivo, importa Foundation y mueve el modelo aquí desde tu ContentView.

Separación de vistas:

Crea una carpeta llamada views.
Dentro de esta carpeta, añade archivos desde una plantilla, lo que permitirá seleccionar SwiftUI view.
Por ejemplo, para las vistas de tarjeta, crea un archivo nCardView.swift y transfiere las funciones relacionadas a las vistas pequeñas y medianas desde el ContentView.

// Ejemplo de declaración de una nueva vista en SwiftUI struct NCardView: View { var card: NCard
```
var body: some View {
    Text(card.title)
}
```
}

¿Qué mejoras puedes lograr en la visualización con previews?

Aprovecha los previews para probar diversas configuraciones de tu vista sin desordenar tu archivo principal. Al separar tus vistas, cada una tendrá un espacio dedicado para pruebas, permitiendo visualizar múltiples tarjetas con características variadas:

Incorpora VStack en tu preview para formar diferentes composiciones.
Puedes generar datos de prueba usando asistentes como ChatGPT.

struct NCardView_Previews: PreviewProvider { static var previews: some View { VStack { NCardView(card: NCard(title: "Example Title", type: .small)) // Añade más configuraciones para probar } } }

¿Cómo estructurar aún mejor con listas separadas?

Para seguir con buenas prácticas, al separar listas en archivos independientes no solo mejoras la legibilidad del código sino también la escalabilidad. Estos son los pasos que puedes seguir:

Crea un archivo para la lista dentro de la carpeta views.
Transfiere toda la lógica y presentación de la lista al nuevo archivo.
Reemplaza cualquier instancia anterior de la lista en el archivo ContentView inicial por una instancia a tu nuevo ListView.

Aquí asegúrate de que en los previews todos los views estén debidamente estructurados para evitar errores de compilación.

Con estas mejoras, el primer paso de estructuración de tu proyecto está completo. Próximamente, exploraremos la interacción entre vista y usuario, introduciendo la creación de formularios y botones para enriquecer la experiencia de tus aplicaciones. ¡Mantén la motivación, estás construyendo bases sólidas para tus proyectos futuros!

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos