Navegación en SwiftUI: Implementación de Detail View y ViewModel

Swift UI ofrece potentes herramientas para navegar entre vistas de manera dinámica y eficaz. Para mostrar los detalles de un programa de televisión al hacer clic, se utiliza NavigationLink. Esto requiere la creación de una nueva vista de destino que mostrará el detalle del programa en cuestión.

Configuración inicial de la vista

1. Crear una nueva vista:

• • Utilizar un template de Swift UI y nombrarla, por ejemplo, DetailView.
  • Esta vista será el destino de NavigationLink.

1. Modificar la vista actual:

• • Cambiar el destino de NavigationLink a la nueva DetailView.
  • Pasar los parámetros necesarios que permitan desplegar información precisa.

Implementación de la vista de detalle

1. Crear un ViewModel para los detalles:

• • Siguiendo el modelo de Swift, se desarrolla un ViewModel llamado TVShowDetailsViewModel.
  • Es crucial que este modelo sea de tipo observable para que las vistas reaccionen a los cambios de datos.

1. Definir propiedades en el ViewModel:

• • Crear una variable publicada para manejar los detalles.
  • Inicializar un identificador para cada programa de televisión.
  • Implementar dependencias necesarias para obtener detalles con el patrón de caso de uso.

class TVShowDetailsViewModel: ObservableObject {
     @Published var details: TVShowDetails?
     private var showID: Int = 0
     private let getTVShowDetailsUseCase: GetTVShowDetailsUseCaseProtocol

     init(showID: Int, getTVShowDetailsUseCase: GetTVShowDetailsUseCaseProtocol) {
         self.showID = showID
         self.getTVShowDetailsUseCase = getTVShowDetailsUseCase
     }

     func loadDetails() async {
         do {
             let details = try await getTVShowDetailsUseCase.execute(showID: showID)
             DispatchQueue.main.async {
                 self.details = details
             }
         } catch {
             print(error)
         }
     }
 }

Diseño y visualización en la vista de detalle

1. Mostrar elementos dinámicamente:

• Utilizar VStack para organizar los elementos en una disposición vertical.
• Mostrar el nombre del programa, un resumen y sus géneros, manejando situaciones en las que los detalles o géneros pueden ser nulos.

1. Asegurarse de la reactividad:

• Usar @StateObject para que la vista escuche los cambios en el ViewModel.
• Implementar onAppear para cargar datos asíncronos al mostrar la vista.

struct DetailView: View {
    @StateObject var viewModel: TVShowDetailsViewModel

    var body: some View {
        VStack {
            if let details = viewModel.details {
                Text(details.name)
                    .font(.headline)
                    .padding(.bottom, 20)
                Text(details.overview)
                if !details.genres.isEmpty {
                    Text("Géneros")
                        .font(.subheadline)
                    ForEach(details.genres) { genre in
                        Text(genre.name)
                    }
                }
            } else {
                Text("Cargando...")
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle())
            }
        }
        .onAppear {
            Task {
                await viewModel.loadDetails()
            }
        }
    }
}

¿Cuál es la estructura bajo la arquitectura limpia?

La arquitectura limpia es un enfoque de diseño que busca separar las responsabilidades de la aplicación en tres capas principales: datos, dominio y presentación. Este modelo asegura que cada capa tenga responsabilidades bien definidas y comunicación controlada entre ellas.

Capas principales de la Arquitectura Limpia

• Capa de Datos:

  • Incluye la definición de modelos y la interacción con los servicios de red.

  • Implementa repositorios que proporcionan datos de manera agnóstica frente a su origen.

• Capa de Dominio:

  • Define los casos de uso que realizan acciones específicas, coordinando la obtención de datos de la capa de datos.

  • En este contexto, casos de uso como GetPopularShowsUseCase orquestan cómo se solicitan los datos.

• Capa de Presentación:

  • Define la interacción del usuario y presenta los datos usando vistas.

  • Implementa los ViewModels, que preparan datos para ser mostrados y manejan la lógica de presentación.

Beneficios de usar Clean Architecture

1. Separación clara de responsabilidades:

• • Facilita cambios futuros y el mantenimiento del código.
  • Permite escalabilidad y pruebas más eficaces.

1. Flexibilidad para cambios tecnológicos:

• • Cambios en la capa de datos, como un nuevo API, no necesariamente afectan a las otras capas.

1. Mejor legibilidad y organización del proyecto:

• • Facilita que más desarrolladores trabajen simultáneamente sobre diferentes enfoques del proyecto.

Inventar un sistema bien estructurado con Clean Architecture no solo mejora la legibilidad, sino que produce aplicaciones robustas, escalables y fácilmente mantenibles. Mantente motivado y sigue aprendiendo, la creación efectiva de aplicaciones es una habilidad invaluable.