Construir una aplicación completa que consuma datos de una API, los renderice en pantalla y además integre un chatbot con inteligencia artificial sin bloquear la interfaz es un reto que pone a prueba todo lo aprendido sobre Async/Await. Este proyecto llamado Colombia Data Explorer hace exactamente eso, y su código fuente está disponible para clonar, estudiar y mejorar.
El proyecto muestra información detallada sobre Colombia: capital, población, superficie, departamentos con sus municipios, filtros dinámicos y un chatbot conectado a Gemini para responder preguntas en tiempo real. Todo orquestado con JavaScript asíncrono y un manejo de errores sólido.
¿Cómo se estructura un proyecto profesional con JavaScript asíncrono?
El repositorio se encuentra en Platzi Async JavaScript Project y se puede clonar con git clone o descargar como .ZIP [0:42]. Una vez dentro del proyecto, basta con ejecutar npm run dev y abrir localhost:5500 para ver la aplicación funcionando.
La arquitectura del proyecto aplica un principio fundamental: la separación de responsabilidades [3:22]. Cada archivo tiene un trabajo claro y definido:
Api.js: se comunica exclusivamente con la API externa.
Data.js: transforma y filtra los datos crudos.
UI.js: se encarga de dibujar elementos en el DOM.
LLM.js: gestiona la conexión con el chatbot de inteligencia artificial.
Main.js: actúa como punto de entrada y conecta todos los módulos.
Esta separación tiene dos ventajas prácticas: cuando algo falla, sabes exactamente dónde buscar. Y cuando necesitas cambiar algo, como reemplazar la API por otra, solo tocas un archivo [3:46].
¿Qué papel cumple Main.js como orquestador?
El archivo Main.js contiene una función asíncrona llamada init que arranca toda la aplicación con solo dos líneas [4:08]. La primera conecta los eventos de la interfaz y la segunda, loadData, carga los datos de la API.
La función loadData sigue un patrón claro: muestra un mensaje de carga, espera los datos con await y, si algo falla, lo muestra en pantalla. El uso de await aquí es esencial porque sin él la función continuaría al siguiente paso con datos vacíos [4:41]. El bloque try/catch captura cualquier error que ocurra durante la petición.
¿Cómo funciona el flujo de datos desde la API hasta la pantalla?
Dentro de loadData se llama a la función hydrateData, que usa await para traer los departamentos y la información del país desde la API Colombia [5:08]. Esta API es un proyecto open source y local que devuelve objetos con ID, nombre, descripción, regiones y atracciones turísticas [2:26].
Los datos llegan crudos, así que se transforman en un formato que la UI pueda consumir. El state almacena el estado de cada petición. Después se renderiza la información del país y se ejecuta applyFiltersAndRender para mostrar la tabla de departamentos.
¿Cómo se integra un chatbot con IA usando Async/Await?
La función bindEvents vigila constantemente la interfaz buscando cambios, inputs o clics [5:42]. Cuando el usuario envía una pregunta, se dispara handleChatbotQuestions, una función asíncrona que gestiona la comunicación con el chatbot conectado a Gemini.
Esta función utiliza tres bloques fundamentales [6:06]:
try: genera la respuesta del chatbot.
catch: maneja cualquier error en la comunicación.
finally: deshabilita el botón del chatbot para evitar envíos duplicados.
El patrón try/catch/finally garantiza que la interfaz nunca quede bloqueada, sin importar si la respuesta llega correctamente o si ocurre un fallo.
¿Qué hace Data.js con los datos crudos de la API?
Los datos que llegan de una API rara vez tienen la forma exacta que la interfaz necesita. El archivo Data.js resuelve esto con funciones de transformación [6:43].
La función calculateStats recibe la lista de departamentos y calcula cuatro métricas para las tarjetas de estadísticas: total de departamentos, población acumulada, total de municipios y los tres departamentos con más población.
La función filterAndSortDepartments permite ordenar por nombre alfabéticamente, por población de mayor a menor y por municipios [7:12]. Por ejemplo, Bogotá aparece como la ciudad con mayor población, seguida de Antioquia y Valle del Cauca.
El proyecto completo está disponible para que lo descargues, lo estudies y propongas mejoras. ¿Qué parte del código modificarías primero?
Aportación:
Seria bueno llamar dto.js en lugar de data.js ya que se encarga de transformar objetos.
