Salva Logo
 馃Ω馃徏

Dragon Ball App

馃Ω馃徏 

Phone Demo

Descripci贸n

Aplicaci贸n Android desarrollada en Kotlin siguiendo el patr贸n de dise帽o MVVM que permite a los usuarios explorar informaci贸n sobre los superh茅roes de Dragon Ball.

Desde la pantalla de inicio de sesi贸n hasta el detallado perfil de cada personaje, se ha priorizado la integraci贸n de tecnolog铆as avanzadas como Retrofit para la comunicaci贸n segura con el backend, Room para el almacenamiento local y Google Maps API para visualizar las ubicaciones de los personajes. Siguiendo los principios de arquitectura CLEAN y SOLID, junto con la inyecci贸n de dependencias a trav茅s de Hilt, se garantiza la escalabilidad y mantenibilidad del c贸digo.

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

Caracter铆sticas y funcionalidades

  • Arquitectura CLEAN.
  • Model-View-ViewModel (MVVM).
  • Dise帽o de interfaces con XML (ViewBinding).
  • Consumo de API Rest con Retrofit y la biblioteca OkHttp.
  • Corrutinas.
  • Room.
  • Inyecci贸n de dependencias con Dagger Hilt.
  • Google Maps API.
  • SharedPreferences.
  • Navigation Component.
  • Unit Testing.
Descripci贸n de la imagen

Pantalla de Login en la que se deben introducir las credenciales, las cuales, antes de ser enviadas a la API para ser corroboradas, se comprueba que tanto el correo electr贸nico como la contrase帽a cumplan con el formato adecuado. En el caso de cumplir con el formato y ser err贸neas, aparece un Dialog para notificar al usuario que la autentificaci贸n ha sido fallida, es decir, que no se encuentran los datos registrados en nuestro backend.

Los EditText poseen cierta dinamicidad cuando se pulsa en ellos en pos de atender a la experiencia de usuario.

El correcto formato tanto del correo electr贸nico como de la constrase帽a se comprueba en tiempo real cada vez que el usuario escribe en el EditText. De esta forma, en caso de no ser adecuado, cosa que controlamos observando un StateFlow que alberga una Sealed Class que recoge diversos estados, se muestra un mensaje al usuario de que todav铆a el formato de aquello que est谩 escribiendo no es correcto.

Una vez que los formatos son correctos, aparecer谩 el bot贸n para hacer Login, ya que su visibilidad est谩 limitada al correcto formato del correo y de la contrase帽a.

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

Al pulsar el bot贸n de Login, el estado de la vista pasa a Loading y se muestra una ProgressBar en modo horizontal atendiendo, as铆, a la experencia de usuario y, una vez que se ha comprobado que las credenciales introducidas est谩n registradas en nuestro backend, se navega a la pantalla principal de la aplicaci贸n.

Pantalla principal de la aplicaci贸n en la que, a trav茅s de un RecyclerView-Adapter-ViewHolder, se muestra el listado de personajes que hemos obtenido llamando a la API Rest.

Las celdas (items, com煤nmente denominadas en Android) son personalizadas e incluyen un ImageView y un TextView. Dicho listado est谩 inspirado en el concepto creativo y prototipo del usuario de la web Dribble Luis Herrero

Adem谩s, se ha empleado Navigation Component para gestionar la navegaci贸n de la Bottom Navigation Bar y, de esta forma, poder navegar entre el listado de personajes y el listado de superh茅roes que hayamos marcado como favoritos, los cuales son fragments.

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

Al pulsar en el listado de superh茅roes, navegamos a la activity que alberga el detalle del personaje, donde se ha colocado una Toolbar que contiene un icono para volver atr谩s, un texto con el nombre del personaje seleccionado previamente y un icono para marcar si es favorito o no, el cual muestra su estado de forma din谩mica al usuario.

Cabe destacar que, una vez que se pulsa en el icono de favorito, mediante corrutinas as铆ncronas para aprovechar el procesamiento paralelo de las solicitudes, se cambia el estado de favorito del superh茅roe tanto en la base de datos local como en nuestro backend.

Por otro lado, se ha integrado un mapa empleando Google Maps API donde se exponen las diferentes localizaciones del superh茅roe una vez que llamamos a nuestro backend al navegar a esta pantalla. Tambi茅n, se ha agregado un BottomSheetDialog que muestra m谩s informaci贸n acerca del personaje.

Aqu铆 podemos apreciar el BottomSheetDialog totalmente desplegado por el usuario, cuya dinamicidad en su interacci贸n es posible gracias al uso del CoordinatorLayout en nuestra vista dise帽ada con XML.

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

Por 煤ltimo, se帽alar que los personajes a帽adidos a favoritos se muestran en el otro fragment que alberga la Bottom Navigation Bar.