Descripción
Esta aplicación surge como parte de la práctica final del módulo de Patrones de Diseño del Bootcamp de Desarrollo de Apps Móviles. El objetivo principal era implementar el patrón de diseño MVVM y crear una vista Splash, una pantalla de inicio (Home) que mostrara una lista de personajes con imágenes y texto, y permitiera la navegación a los detalles de cada personaje al hacer clic en ellos.
En mi caso, decidí realizar una aplicación que consumiera la API Rest de Pokémon (PokéApi), con un diseño inspirado en el concepto creativo del usuario llamado UIuxcreative de la web Dribbble. Todo ello construido de forma 100% programática.
⚠️ Información mucho más detallada en el README del proyecto en GitHub. ⚠️
Características y funcionalidades
- Model-View-ViewModel (MVVM).
- UIKit.
- Interfaz realizada programáticamente al 100%.
- Consumo de API Rest.
- Uso de mappers para adaptar el modelo de datos de negocio al modelo de cada vista.
- Algoritmo de similitud de Jaccard para realizar búsquedas.
- Dark / Light mode.
Splash que viene precedido por una LaunchScreen. Durante la carga en esta pantalla Splash, se realiza la llamada a la API Rest y se cargan los datos en el modelo para que sean manejados por el ViewModel de cada View.
Una vez que los datos son obtenidos de la API, se navega a la pantalla principal de la aplicación.
Por otra parte, se debe destacar que se emplea una clase llamada Mapper que se encarga de adaptar el modelo de datos general al modelo de cada vista y que se aplica persistencia de datos de forma manual con una clase "almacén", ya que en este momento no había aprendido CoreData.
UITableView con celdas personalizadas al estilo Card que alberga un listado de Pokémon. Además, se incluye un UISearchController para realizar búsquedas de Pokémon concretos que emplea el algoritmo de similitud de Jaccard (detallo más acerca de él, aquí).
Detalle del Pokémon en el que se incluye su foto, nombre, tipo, peso, altura, ataque, defensa y una pequeña descripción. Todo ello alimentado por datos de la API Rest y respondiendo al diseño creativo de inspiración escogido.
Debemos señalar que la navegación entre el personaje y su detalle se realiza de forma modal, por lo que no se emplea el típico push del NavigationController, y con una transición personalizada que ya aporta el sistema.
Como ya se ha mencionado, se emplea un UISearchController para realizar búsquedas. El algoritmo comienza a trabajar cuando se introducen como mínimo 3 letras y muestra por pantalla aquellos elementos que poseen similitud con el texto introducido.
Aquí podemos ver la adaptación del diseño de la pantalla principal al light mode, empleando color sets personalizados en los assets de nuestro paquete.
Y aquí la adaptación del detalle del Pokémon.
Los colores escogidos para el light mode han sido personales ya que en el concepto creativo del que partía e inspiraba, no aportaba muestras de cómo sería el diseño en dicho modo.
GitHub