Navegación y detalle con Clean Architecture en SwiftUI

Contenido del curso

No sé dónde empezar

Introducción al Patrón MVVM

Estructura de un Proyecto con MVVM

Operaciones CRUD en un proyecto con MVVM

Clean Architecture

MVVM y Clean Architecture

28
Resumen de Clean Architecture y MVVM
06:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0021:54

Navegación y detalle con Clean Architecture en SwiftUI

Curso de Patrones MVVM en iOS

Clase 27 de 28

Clase 27 / 28

Recursos

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:

try await getTVShowDetailsUseCase.execute(id) para obtener los datos del dominio.
await MainActor.run { self.details = detalles } para actualizar la propiedad publicada en el hilo principal.
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.

Resumen

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

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

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

¿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:

try await getTVShowDetailsUseCase.execute(id) para obtener los datos del dominio.
await MainActor.run { self.details = detalles } para actualizar la propiedad publicada en el hilo principal.
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?

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

¿Por qué Clean Architecture ordena mejor el proyecto?

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.

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

Introducción al Patrón MVVM

Implementación de MVVM en Swift: Organiza y Optimiza tus Apps

Patrones de Arquitectura y Diseño en Desarrollo de Software iOS

MVC vs MVP en iOS: diferencias clave

Qué son los principios SOLID

MVVM y SOLID en SwiftUI

Estructura de un Proyecto con MVVM

Proyecto MVVM en Swift: Buenas Prácticas y Configuración Inicial

Cómo crear el modelo Item con MVVM en Swift

Modelo de datos con Core Data en Swift

Vistas en MVVM con SwiftUI

Cómo conectar CoreData y Combine en MVVM

Operaciones CRUD en un proyecto con MVVM

Función addTodo con Core Data en SwiftUI

Funcionalidades básicas para gestionar tareas en SwiftUI

Listado y detalle de notas en SwiftUI

Editar todos con SwiftUI y Core Data

Archivar tareas en SwiftUI con Core Data

Cómo desarchivar tareas con unarchiveTodo

Eliminar un to do definitivamente con Core Data

Marcar tareas completadas en SwiftUI

Creación de Vistas Amigables en SwiftUI para Aplicaciones de Tareas

Clean Architecture

Qué es Clean Architecture y por qué supera a MVVM

Estructura y Ventajas de la Clean Architecture

Estructura de proyecto iOS con Clean Architecture

Mapeo de JSON a structs Swift con Codable

Capa de datos con Clean Architecture en Swift

Casos de uso en la capa de dominio Swift

Capa de presentación con MVVM en SwiftUI

Navegación y detalle con Clean Architecture en SwiftUI

MVVM y Clean Architecture

Resumen de Clean Architecture y MVVM

Navegación y detalle con Clean Architecture en SwiftUI