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

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:

1. 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.

1. 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!