Empezar a crear una aplicación desde cero siempre es excitante y a la vez abrumador. Demasiadas cosas que hacer en muy poco tiempo. Así que es importante pararse un momento y reflexionar como queremos hacerlo.
Un buen punto de inicio es pensar en una funcionalidad que nos permita definir a pequeña escala como queremos que sea la arquitectura de nuestra app, y a partir de ahí empezar a contruir.
En nuestro caso, una app que lea un listado y después vea un detalle nos ayudará a comprender y modelar nuestra app a pequeña escala.
Voy a utilizar MVVM como arquitectura, ya que nos ayudará a separar la parte vista del resto de la app. En esta arquitectura tenemos 3 partes, la parte View que es la que muestra la interface de usuario, la parte Model que es la que maneja los datos, y por último, la parte ViewModel, que por un lado se encarga de tratar los datos y por otro lado, pasa estos datos a la vista a través de databinding.
Vamos a empezar, voy a crear una vista muy sencilla, con su viewmodel y datos mock que nos permitirá tener un primer punto de arranque con estas 3 capas. Empecemos!!!
Model
Empezaré creando el modelo de datos, en este caso al tratarse de un listado de películas, haré un entidad llamada Movie, la cual será un struct plano y cuyo único cometido será almacenar los datos a mostrar.
Además, debe implementar el protocolo Identifiable, el cual nos ayudará después a la hora de iterar sobre un listado de Movie.
struct Movie: Identifiable {
var id: String
var imdbId: String?
var title: String
var overView: String
var posterPath: String?
}Además, dado que no vamos a conectarnos ni con un API ni con base de datos local de momento, crearemos un array de tipo Movie con datos mock. Este nos quedará después para ayudarnos a crear las previews de nuestras vistas.
let moviesTest: [Movie] = [
Movie(id: "1", imdbId: "imdb01", title: "Regreso al Futuro", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "2", imdbId: "imdb02", title: "Regreso al Futuro II", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "3", imdbId: "imdb03", title: "Regreso al Futuro III", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "4", imdbId: "imdb04", title: "Matrix", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "5", imdbId: "imdb05", title: "Canta", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "6", imdbId: "imdb06", title: "Scream", overView: "Lorem ipsum", posterPath: nil),
Movie(id: "7", imdbId: "imdb07", title: "Spiderman No way home", overView: "Lorem ipsum", posterPath: nil),
]ViewModel
El siguiente paso será crear nuestro ViewModel, es decir, la parte que se encargará de leer datos y enlazarlos a la vista.
Crearemos un archivo llamado HomeViewModel con lo siguiente:
import SwiftUI
class HomeViewModel: ObservableObject {
@Published var movies: [Movie] = []
func loadMovies() {
self.movies = moviesTest
}
}Tenemos 3 puntos a destacar. Por un lado, nuestra clase ViewModel implementa ObservableObject, lo cual permitirá que se observe desde la vista.
Por otro lado, tenemos una propiedad marcada con @Published, el cual es un wrapper que nos permitirá enviar datos y que será observado desde la vista. La vista reaccionará a los cambios que se vayan produciendo desde aquí.
Por último, tenemos un método loadMovies que se encarga de lanzar la lectura de datos. En este caso concreto, simplemente estamos enlazando con nuestros datos mock, pero en futuras publicaciones se complicará esta parte, mientras que la vista permanecerá igual.
Ahora que tenemos 2 de 3 partes, vamos a por la última.
View
Esta es sin duda la más sencilla. De momento tendremos un listado que se nutrirá de los datos que vienen del viewModel.
struct HomeView: View {
@ObservedObject var viewModel: HomeViewModel = HomeViewModel()
var body: some View {
VStack {
ForEach(viewModel.movies) { movie in
Text(movie.title)
}
}.onAppear {
viewModel.loadMovies()
}
}
}Para empezar definimos nuestro viewModel y lo marcamos con @ObservedObject, esto es un wrapper que le dirá a la vista que se va a observar este objeto.
Después, tenemos un VStack, en el cual añadimos un ForEach del viewModel.movies, junto con un Text, donde de momento solo mostraremos el título de nuestra película.
Hasta aquí, de por si, no pasará nada, pero gracias al modificador onAppear llamaremos al método que lee las películas en el momento en el que aparece la vista.
Y con esto ya hemos montado una arquitectura MVVM muy básica. Aunque muy básica ya hemos marcado los cimientos y separado los conceptos para construir nuestra aplicación.
Como siempre, os dejo enlace al repositorio de Github donde tengo el código completo. No olvidéis revisar el vídeo de Youtube asociado, suscribiros y dejar un gran like.