Salva Logo
 馃

Marvel App - UIKit + Combine

馃 

iOS Demo

Descripci贸n

Peque帽a aplicaci贸n iOS para poner en pr谩ctica programaci贸n reactiva con el framework Combine; llamadas as铆ncronas a The Marvel Comics API con async/await; el uso del patr贸n de dise帽o MVVM empleando casos de uso conectados con un repositorio en pos de crear un sistema de software escalable, mantenible y testable (arquitectura CLEAN); y el acoplamiento de todo lo anterior con el pertinente desarrollo en UIKit.

El c贸digo sigue el Clean Architecture de Robert C. Martin, dividi茅ndose en tres capas: Presentaci贸n, Datos y Dominio. La parte visual se inspira en el concepto creativo del dise帽ador Luis Herrero encontrado en la web Dribbble.

鈿狅笍 Informaci贸n mucho m谩s detallada en el README del proyecto en GitHub. 鈿狅笍

Caracter铆sticas y funcionalidades

  • Arquitectura CLEAN.
  • Patr贸n de dise帽o Model-View-ViewModel (MVVM).
  • UIKit.
    • Interfaz realizada program谩ticamente al 100%.
  • Consumo de API Rest con llamadas as铆ncronas (async/await).
  • Programaci贸n reactiva con Combine.
Splash Screen de la aplicaci贸n

Splash Screen que, a pesar de no tener una funcionalidad espec铆fica ya que solo espera ciertos segundos para dar paso a la siguiente vista, posee la estructura necesaria para poder a帽adir y mantener distintas funciones de forma reactiva gracias a su control de estados y conexi贸n entre capas.

Para comunicar al usuario el estado de carga y espera, se ha a帽adido una animaci贸n Lottie relacionada con la tem谩tica de la aplicaci贸n.

Estado de carga de la pantalla principal de la aplicaci贸n.

Con otra animaci贸n Lottie, se帽alamos al usuario que se est谩 produciendo una carga de datos y que debe esperar. Mientras tanto, se est谩 realizando una llamada a la API Rest y se est谩 cargando en el ViewModel el listado de personajes con sus respectivos datos asociados a un modelo creado. Una vez que nuestra variable con dicho listado ha cambiado, quiere decir que ya tenemos los datos y que, de forma reactiva con Combine, podemos actualizar el estado de nuestra vista y que deje de mostrar la animaci贸n.

Estado de carga de la vista principal de la aplicaci贸n
Vista principal de la aplicaci贸n

Pantalla principal de la aplicaci贸n que refleja el listado de superh茅roes con un TableView en el que cada celda personalizada posee una imagen y un texto con el nombre del personaje correspondiente. Adem谩s, se ha a帽adido un degradado en la parte inferior de la imagen para que el texto sea legible para el usuario.

Si pulsamos sobre cualquier personaje del listado, navegaremos al detalle de cada cual, donde se nos mostrar谩 su nombre, su foto, una peque帽a descripci贸n y, adem谩s, un listado albergado en un CollectionView de todas aquellas series en las que ha aparecido el superh茅roe.

Detalle de un personaje