Saltar al contenido

DDL

Proyecto Pokédex Android: explorando el mundo Pokémon con Jetpack Compose y Retrofit

El proyecto Pokédex Android nace como un ejercicio práctico para combinar diseño moderno, consumo de APIs y programación reactiva dentro del entorno Android Studio. Su objetivo es ofrecer una aplicación fluida, visual y completamente funcional que permita consultar y filtrar Pokémon en tiempo real usando datos obtenidos desde la PokéAPI.

Este desarrollo se realizó íntegramente en Kotlin, empleando la arquitectura más actual de Android basada en Jetpack Compose, Retrofit y ViewModel, con un enfoque en el rendimiento, la organización del código y la coherencia visual del tema.

Funcionamiento general

La aplicación actúa como una Pokédex digital, mostrando a los usuarios una cuadrícula con todos los Pokémon disponibles en la API.
Cada tarjeta incluye el nombre, el número de Pokédex y una imagen representativa. Desde la parte superior, el usuario puede filtrar por tipo Pokémon (agua, fuego, planta, eléctrico, etc.) o verlos todos a la vez.

El sistema de filtrado se implementó mediante un componente TypeFilterGrid, que permite seleccionar un tipo y actualizar automáticamente la lista visible. La interacción es inmediata, sin recargar la pantalla, gracias a la reactividad del estado de Compose.

El encabezado superior utiliza los colores del tema definidos previamente en el proyecto, mostrando el título “Pokédex” con un diseño limpio y adaptado al estilo Material 3.

Tecnologías utilizadas

  • Android Studio con Kotlin como lenguaje principal.

  • Jetpack Compose para la interfaz de usuario declarativa y reactiva.

  • Retrofit para la comunicación con la PokéAPI, manejando las peticiones HTTP y la deserialización de respuestas JSON.

  • Coroutines para la ejecución asíncrona de las llamadas de red.

  • Material Design 3 para los componentes visuales, garantizando un diseño adaptado, accesible y moderno.

  • ViewModel y State para gestionar el ciclo de vida y el estado de la UI sin fugas de memoria.

Diseño y experiencia de usuario

El diseño está inspirado en la simplicidad de las Pokédex clásicas, pero con un enfoque más moderno, funcional y dinámico.
La cuadrícula de Pokémon se adapta automáticamente al tamaño de pantalla, manteniendo una distribución responsiva y fluida en cualquier dispositivo.

Cada tipo de Pokémon se representa con colores coherentes al universo Pokémon (por ejemplo, azul para agua, rojo para fuego o verde para planta), aportando identidad visual inmediata al listado.
El encabezado superior y los elementos de interfaz respetan los colores del tema global, unificando la estética y facilitando la lectura.

Además, la aplicación incluye una barra de búsqueda que permite localizar Pokémon por nombre o número, ofreciendo resultados instantáneos conforme el usuario escribe. Esta funcionalidad mejora significativamente la navegación, sobre todo para quienes buscan información concreta sin desplazarse por la lista completa.

Al pulsar sobre cualquier Pokémon, se abre una pantalla de detalles individuales, donde el usuario puede consultar su tipo, habilidades, estadísticas base y cadena de evoluciones, todo organizado visualmente con tarjetas y gráficos.
Esta vista detallada no solo amplía la información, sino que también refuerza la sensación de exploración, emulando la experiencia de una Pokédex real.

Lógica interna y estructura

El flujo de datos se organiza siguiendo el patrón MVVM (Model–View–ViewModel):

  1. Model: gestiona las llamadas a la PokéAPI mediante Retrofit, deserializando la información en clases data class de Kotlin.

  2. ViewModel: coordina la carga de datos, maneja el estado de la aplicación y expone los resultados a la interfaz de manera reactiva.

  3. View (Compose): se actualiza automáticamente cada vez que cambia el estado, sin necesidad de recargar manualmente la pantalla.

De esta manera, la app mantiene un rendimiento alto incluso con grandes volúmenes de datos, y su código se mantiene modular y escalable.

Retos y complicaciones del desarrollo

Durante el desarrollo se presentaron varios desafíos interesantes:

  • Errores de contexto composable: fue necesario ajustar la invocación de funciones @Composable dentro de componentes adecuados, ya que Compose exige que solo se llamen desde un contexto válido de composición.

  • Gestión de parámetros y estado: algunos componentes, como los filtros de tipo, necesitaban propagar el estado correctamente para evitar inconsistencias visuales o duplicados (por ejemplo, la opción “Todos” apareciendo dos veces).

  • Manejo del fondo y colores dinámicos: el encabezado inicial requería sincronizarse con el tema global de la app, lo que implicó definir correctamente las variables de color en el Theme.kt.

  • Carga de imágenes: al depender de recursos remotos de la API, fue necesario optimizar la visualización con caché y control de errores en caso de fallos de conexión.

Cada uno de estos retos contribuyó a reforzar la comprensión de Compose, Retrofit y la gestión del estado en entornos reactivos.

Conclusiones y próximos pasos

El proyecto Pokédex Android representa una síntesis entre tecnología, diseño y aprendizaje continuo. Más allá de ser una simple app informativa, se convirtió en un ejercicio completo de integración de API, arquitectura moderna y optimización visual.

Entre las mejoras futuras se incluyen:

  • Implementar animaciones de transición entre pantallas con Compose.

  • Añadir un modo oscuro completamente adaptado a Material Design 3.

  • Optimizar la carga diferida (lazy loading) de imágenes para grandes listados.

  • Mejorar la accesibilidad y rendimiento en dispositivos de gama baja.

En definitiva, la Pokédex Android demuestra cómo el ecosistema moderno de Android permite crear interfaces potentes, dinámicas y elegantes con un código limpio y mantenible, conectando la pasión por el desarrollo con el universo Pokémon.