Salva Logo
 馃

Marvel App - SwiftUI

馃 

iOS Demo

WatchOS Demo

Descripci贸n

Aplicaci贸n iOS como proyecto final del m贸dulo iOS Superpoderes del Bootcamp en Desarrollo de Apps M贸viles de KeepCoding, donde se nos ha propuesto seguir el patr贸n de dise帽o MVVM con SwiftUI y consumir datos de The Marvel Comics API.

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 y prototipo que desarroll茅 en Figma.

Destaca la implementaci贸n de una arquitectura CLEAN en pos de una escalabilidad y mantenibilidad de la aplicaci贸n de cara a futuro, cobertura por encima del 50% en pruebas unitarias, llamadas a red de forma as铆ncrona, control de hilos de ejecuci贸n, persistencia de datos, uso de routing para la navegaci贸n principal y compatibilidad con WatchOS.

鈿狅笍 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).
  • SwiftUI.
  • Multiplataforma (iOS y WatchOS).
  • Consumo de API Rest con llamadas as铆ncronas (async/await).
  • CoreData.
  • Unit Testing con una cobertura por encima del 50%.
  • Animaciones Lottie tanto para iOS como WatchOS.
  • Atenci贸n por el dise帽o y la experiencia de usuario.
Descripci贸n de la imagen

Pantalla de carga que desaparece al realizar el volcado de datos persistidos en CoreData a la interfaz de usuario o, si no tenemos datos persistidos, realizar la llamada de red a la API Rest para cargar los datos en la UI y, seguidamente, persistirlos.

Dicha pantalla aparece despu茅s de un Splash que, aunque no es el caso debido a la sencillez de la aplicaci贸n respecto a su navegaci贸n, es presentado por un routeViewModel que se encarga de la gesti贸n principal de la navegaci贸n entre pantallas (Routing) as铆 como de las funciones que se asocian a ellas como ser铆a, por ejemplo, el manejo del Login, del Logout, etc.

A pesar de que no hay Login o una navegaci贸n general m谩s compleja, la arquitectura implementada nos permitir铆a agregar dichas funcionalidades con m谩s facilidad ya que se atiende con ella a la escalabilidad, separaci贸n de responsabilidades y a la independencia de componentes.

Pantalla de carga adaptada al sistema operativo WatchOS.

Cabr铆a destacar el uso de animaciones Lottie para el reloj inteligente de Apple, las cuales se implementan de forma diversa a como se realiza en iOS, pero que aportan dinamicidad y un plus a nuestras interfaces para WatchOS. Aqu铆 dejo un art铆culo de inter茅s que explica c贸mo agregarlas a nuestro proyecto.

Descripci贸n de la imagen
Descripci贸n de la imagen

Pantalla principal de la aplicaci贸n en la que se listan los personajes que tenemos almacenados con un dise帽o estilo Card que contiene la imagen, un gradiente para aumentar la legibilidad de los elementos, un texto y una imagen extra铆da de SF Symbols (coraz贸n), la cual act煤a como bot贸n y puede ser pulsada para agregar a favoritos el personaje correspondiente, siendo, a su vez, din谩mica.

Pantalla principal de la aplicaci贸n adaptada a WatchOS, donde se han modificado diversos aspectos como la fuente, el tama帽o de los elementos, etc. para que est茅 en armon铆a con la pantalla del dispositivo. Todo ello gracias a directivas de compilaci贸n que agregamos en nuestro c贸digo.

Descripci贸n de la imagen
Descripci贸n de la imagen

Debemos se帽alar la gesti贸n de los personajes favoritos que realiza la aplicaci贸n. Al pulsar el coraz贸n contenido en nuestra tarjeta de personaje, est茅 cambia y actualiza los datos en el modelo para cambiar el estado a si es o no favorito. Por otro lado, y de forma reactiva, se actualiza la lista de favoritos que tenemos en el viewModel asociado a la vista, lo cual hace que cambie en la primera section de la List de personajes, la cual contiene un LazyHStack que reusa cada elemento en pos de la optimizaci贸n y que posee scroll horizontal.

Este dise帽o est谩 inspirado en un prototipo que realic茅 en Figma.

Para su adaptaci贸n a WatchOS, se ha optado por agregar un Toggle que indique al usuario si quiere ver su lista de favoritos o no, en vez de estar en la misma pantalla como en iOS. Todo ello motivado por tener una organizaci贸n y una interfaz m谩s intuitiva, atendiendo, as铆, a la experiencia de usuario.

Descripci贸n de la imagen
Descripci贸n de la imagen

Pantalla que lista las series en las que aparece el personaje seleccionado previamente. Posee pantalla de carga, ya que realiza una llamada de red para volcar los datos, ya que la implementaci贸n de la persistencia de los mismos no est谩 desarrollada.

Las series se exponen en Cards que contienen la imagen, un gradiente para asegurar la legibilidad de los textos, el t铆tulo de la serie y su descripci贸n, la cual ser铆a adecuado que fuera en una pantalla aparte de detalle de la serie.

Pantalla que lista las series adaptada a WatchOS.

Por exigencias de legibilidad y sentido com煤n en el dise帽o en relaci贸n al espacio disponible dado por la pantalla del dispositivo, se ha tomado la decisi贸n de prescindir de la descripci贸n de la serie.

Descripci贸n de la imagen
Descripci贸n de la imagen

Muestra de c贸mo se ver铆a en light mode, ya que est谩 adaptado para los dos modos. De esta forma, se han creado sets de colores personalizados que se actualizan dependiendo del modo escogido por el usuario. Aunque no es el caso en esta aplicaci贸n, tambi茅n se pueden modificar las im谩genes dependiendo de esta configuraci贸n.