--
Una breve historia con RxSwift, programando una aplicación iOS desde 0.
Con la llegada de Combine y SwiftUI, la programación reactiva viene para quedarse. Tanto si eres un programador que viene con ganas de aprender RxSwift, como si ya llevas unos años usándolo, me planteo iniciar este camino, que no es más, que tirar hacia adelante con lo que yo he estado aprendiendo estos últimos años.
Como requisito, pido conocer un poco RxSwift, y claro está, conocer Swift y algún que otro patrón de diseño más o menos conocido (o reconocido).
Si vienes no sabiendo absolutamente nada, hace un tiempo hice algún meetup introduciendo.
Y también, otro un poco más avanzado.
En cualquier caso, lo aquí expuesto, es una construcción paso a paso, y explicando los pasos realizados.
Así que en marcha, el proyecto a realizar será un buscador de música. Accederemos a la información de un servicio, mostraremos los resultados en un listado y luego podremos acceder al detalle de cada una de las respuestas de dicho servicio. ¿Parece fácil? Pues venga.
Todo el código se encuentra en el siguiente repositorio.
En este artículo, el trabajo realizado se encuentra en la siguiente rama.
Empezamos ya.
Crearemos un proyecto nuevo llamado SearchMusic y le añadiremos los siguientes Pods. También podríamos usar Carthage o Swift Package Manager.
Lo siguiente que haremos será poner todos los archivos dentro de una carpeta nueva, que la llamaremos Resources. No borres nada. Crea una carpeta nueva Application y deja en la raíz el AppDelegate y el SceneDelegate. Luego veremos qué hacemos con ellos.
Recuerda actualizar en el Build Settings, la nueva dirección del Info.plist. Si no lo haces el compilador te dará recuerdos.
El AppDelegate no lo vamos a necesitar, por ahora, así que lo dejaremos así.
Crearemos dentro de la carpeta de Application, la primera pantalla ListViewController. Necesitaremos definir la tabla. Tendrá una celda estándar. Por ahora eso así está bien.
Estamos usando SnapKit, por simplicidad. Puedes usar Storyboards, NSLayoutConstraints o Visual Language Format. No habría problema alguno.
En este caso, dentro del viewDidLoad, añadiremos la tabla y luego le diremos que la tabla tenga las mismas dimensiones que la vista.
Una vez tengamos la pantalla lista, empezamos con las cosas de RxSwift.
Vamos a crear el primer observable, que será de tipo just, en el que almacenará un listado de nombres de discos famosos. Just es un observable que emite y completa. Así, tal cual. Apréndelo de memoria, “just emite y completa”.
El otro objeto interesante, por ahora, es la bolsa o DisposeBag. La bolsa es un contenedor que ayuda a mantener toda la memoria de RxSwift junta y te previene de posibles memory leaks. Si eres nuevo en esto, te recomiendo que la bolsa la pongas en los ViewControllers y, si alguna vez, tienes la tentación de ponerla en otro sitio, es que algo va mal.
Nota: obvio que la bolsa se puede poner en otros sitios, pero, en general, su sitio natural suelen ser los ViewControllers, y en el AppDelegate o en alguna instancia en la que necesitamos suscribirnos a algún observable a nivel de aplicación y no de pantalla.
En el siguiente artículo, introduciremos el patrón MVVM y conseguiremos separar el código propio de un ViewController, por lo general suelen ser las suscripciones con la lógica o modelo de la pantalla, un ViewModel.
Una vez tenemos ya los álbumes y la bolsa. Ya nos quedaría suscribir el observable con la tabla. En este caso para suscribirnos usamos un bind. Recuerda que para poder bindear una tabla hay que importar RxDataSources.
Para bindear a un elemento, se suele usar la notación rx.
Si te fijas, el código es muy parecido al cellForRow de la UITableViewDelegate. Esta clausura tiene como parámetros, el indexPath, el modelo y la celda. En nuestro caso no usaremos el indexPath, porque ya tenemos el valor model que será cada uno de los títulos de los álbumes.
Por último, el valor albums no se restringe únicamente a ser usado en un solo sitio. Podemos tener múltiples suscripciones a un mismo observable. Así que lo que haremos a continuación es suscribirnos al título de la pantalla. Para ello, haremos una transformación con un map para obtener el número de álbumes. Luego bindearemos este resultado al título de la pantalla.
Pues ya lo tendríamos. Ahora para ver el resultado nos quedan un par de cosas más. Lo primero es crear una navegación. Crearemos un nuevo fichero en Application llamado MainNavigationController y escribiremos éste código.
Como no tenemos lógica, por ahora, en la navegación, lo dejaremos vacío.
Por último, abriremos el Scene Delegate y instanciaremos la primera pantalla de esta forma.
El resultado obtenido si arrancamos la aplicación será de esta forma.
En resumen, en este primer artículo hemos visto:
- Organiza el código de una forma sencilla. Elimina todo lo que no uses, clases, métodos, comentarios.
- Un observable just es “algo” que emite y completa.
- El DisposeBag es un contenedor que dispone toda la información de las suscripciones.
- Bind es una forma de suscribir un observable con un objeto, generalmente de UI. En nuestro caso, hemos bindeado una tabla y un label.
El código de este artículo se encuentra aquí.
En el siguiente artículo, hablaremos del patrón MVVM y usaremos una celda custom.
Aquí el enlace.
