Construir una pantalla de detalle en SwiftUI requiere combinar navegación, ViewModel y casos de uso bajo Clean Architecture para mantener separadas las responsabilidades entre datos, dominio y presentación. Aquí ves cómo conectar el listado de programas de televisión con su vista de detalle, paso a paso, usando NavigationLink, StateObject y funciones asíncronas.

¿Cómo se navega entre vistas en SwiftUI?

La navegación en SwiftUI se construye con dos piezas que trabajan juntas: un contenedor que habilita el flujo y un enlace que define el destino.

Dentro del archivo PopularShowView reemplazas el simple texto de cada item por un NavigationLink. Este componente necesita un destination (la vista a la que vas) y un label (lo que se muestra en pantalla). El destino será una nueva vista llamada DetailView, que creas desde un template de SwiftUI [04:10].

¿Qué hace NavigationLink en SwiftUI? Es el componente que conecta una vista con otra. Recibe un destino y muestra un elemento clickeable que dispara la navegación cuando el usuario lo toca.

Para que la navegación funcione, toda la lista debe estar envuelta en un NavigationView. Si lo olvidas, el clic no dispara ninguna transición. Cortas el contenido de List junto con su onAppear, creas un NavigationView como vista principal y pegas todo dentro [18:30].

¿Cómo se estructura el ViewModel del detalle?

El ViewModel actúa como puente entre la vista y los casos de uso del dominio. Aquí cargas los datos asíncronos y los expones a la UI.

Creas la clase TVShowDetailsViewModel marcada como final y conforme a ObservableObject. Dentro defines:

• Una propiedad @Published var details: TVShowDetails? que puede ser nula cuando aún no llegan los datos.
• Una propiedad @Published var showID inicializada en cero para guardar el identificador del programa.
• Una propiedad privada getTVShowDetailsUseCase con el tipo del protocol, no de la implementación concreta.

El init recibe el identificador entero y la dependencia del caso de uso. Esa inyección de dependencias por protocolo es lo que permite cambiar la implementación sin tocar el ViewModel, algo clave para testing [08:45].

¿Cómo se carga la información de forma asíncrona?

La función loadDetails(id: Int) se marca como async y usa un bloque do/catch para capturar errores. Dentro ejecutas:

1. try await getTVShowDetailsUseCase.execute(id) para obtener los datos del dominio.
2. await MainActor.run { self.details = detalles } para actualizar la propiedad publicada en el hilo principal.
3. Un print(error) en el catch para registrar fallos.

¿Por qué usar MainActor.run al actualizar @Published? Porque las propiedades observadas por la UI deben modificarse en el hilo principal. MainActor garantiza que SwiftUI reciba el cambio sin condiciones de carrera.

¿Cómo se conecta el ViewModel con DetailView?

En DetailView declaras el ViewModel con @StateObject private var viewModel: TVShowDetailsViewModel. Como el detalle no cambia durante la vida de la vista, el init recibe el ViewModel ya construido y lo asigna usando el guion bajo (_viewModel = StateObject(wrappedValue: viewModel)).

Esto significa que cuando PopularShowView crea el NavigationLink, debe pasar el ViewModel inicializado con el identificador del show:

swift NavigationLink(destination: DetailView(viewModel: TVShowDetailsViewModel(id: show.id))) { Text(show.name) }

Si olvidas pasar el ViewModel, el compilador marca un error porque el init lo exige [16:20].

¿Cómo se diseña el cuerpo de la vista de detalle?

Dentro de un VStack usas un if let details = viewModel.details para distinguir entre estado de carga y datos disponibles:

• Si details existe, muestras un Text(details.name) con fuente headline y padding inferior de 20 unidades, el overview como resumen, y los géneros si la colección no está vacía.
• Si aún no llega, muestras Text("Cargando...") junto con un ProgressView() con .progressViewStyle(.circular).

Para iterar los géneros con ForEach, la estructura Genre debe conformar el protocolo Identifiable. Sin un identificador, SwiftUI no sabe distinguir cada elemento de la colección y arroja un error de compilación [14:50].

El VStack se conecta con .onAppear, que dispara un Task { await viewModel.loadDetails(id: viewModel.showID) }. Envolver la llamada en un Task es necesario porque onAppear es síncrono y loadDetails es async.

¿Por qué Clean Architecture ordena mejor el proyecto?

La aplicación final navega desde la lista de programas populares hacia el detalle de cada serie, mostrando nombre, resumen y géneros como Comedia, Drama o Familia. Pero lo valioso no es la pantalla, sino cómo se separan las responsabilidades.

El proyecto se divide en tres capas que reflejan el diagrama de Clean Architecture, de adentro hacia afuera:

• Datos: modelos, endpoints, decodificación con JSONDecoder y la implementación del repositorio que se comunica con la red.
• Dominio: casos de uso como GetTVShowDetailsUseCase, que representan acciones específicas de la aplicación y conectan con la capa de datos a través de protocolos.
• Presentación: vistas SwiftUI y ViewModels que consumen los casos de uso y exponen estado observable.

Este orden facilita agregar funciones nuevas, modificar comportamientos existentes y, sobre todo, escribir tests unitarios sin acoplar la UI a la red. MVVM por sí solo separa vista y lógica, pero combinarlo con Clean Architecture te da un nivel adicional de organización que escala mejor cuando el proyecto crece.

¿Ya probaste estructurar tu próxima app iOS con esta separación de capas? Cuéntame en los comentarios qué parte te resultó más útil al implementarla.