- Motivación
- Descripción
- Desarrollo
- Diccionario técnico
- Agradecimientos y Fuentes de Información
0) Motivación
al hilo digital forma parte de mi concepto de observatorio, un producto nacido de mis inquietudes y desarrollado a partir de las limitaciones de la pandemia, siempre con un enfoque educativo y con contenido para distintos rangos de edad.
En este artículo quiero explicar, con un lenguaje sencillo, que para obtener un buen rendimiento de las herramientas que nos proporciona la IA, es imprescindible ser precisos y organizados.
Diseñar aplicaciones con vibe coding no es una tarea sencilla.
No basta con lanzar prompts al aire y esperar que el sistema “adivine” lo que queremos.
Sin una arquitectura clara, sin principios básicos y sin un contexto sólido para el Agent, el resultado es un proyecto que avanza a golpes de improvisación: ahora esto, ahora aquello, sin ton ni son.
Mi Observatorio es el ejemplo elegido para aplicar esta filosofía, no improvisar, de construir un sistema modular, gobernado y sostenible.
Y estos dos documentos — replit.md y procedimiento.md — son la prueba de ese método:
no son código, son criterio, la base que permite que un proyecto crezca sin romperse.
1) Descripción
Mi Observatorio es un observatorio urbano desarrollado al 100% con el Agent de Replit, bajo mi dirección, basado en 20 widgets o tarjetas configurables en un dashboard, que muestran información de interés en diferentes ámbitos y circunscrito a nivel nacional (me encanta aquello donde dice: Mi Observatorio — Hecho con ♡ en España).
Es un producto SaaS modular, es decir, una aplicación en la nube construida como un conjunto de módulos independientes, coherentes y actualizables, que funcionan juntos sin romperse.
Puedes encontrarlo en la siguiente dirección web y probarlo sin problemas, eso si a pesar de su buena apariencia, no hay un solo mes que no tenga que corregir algun bug, alguna caida de servicio, una tarjeta que no responde o no responde con lo esperado, requiere un mantenimiento y dedicación:
https://mi-observatorio.replit.app/
Cada tarjeta es un microservicio visual que:
- Consume una fuente de datos externa (API, scraping ligero, dataset propio).
- Procesa la información.
- La muestra en un formato compacto y visual.
- Se actualiza de forma independiente.
Esto sigue el patrón de diseño de un Urban Data Observatory, pero llevado a un formato personal, ligero y configurable.
En resumen, es un ecosistema de 20 micro‑observatorios, cada uno con su propia lógica.
1.a) En Mi Observatorio hay tres enfoques fundamentales
1.a.1) Modularidad real
Cada tarjeta es independiente.
Esto permite añadir, quitar o mejorar widgets sin afectar al resto.
1.a.2) Fuentes de datos heterogéneas
Se combinan:
APIs oficiales, APIs abiertas, Scraping ligero, Datasets propios, Fuentes nacionales e internacionales.
1.a.3) Diseño compacto y claro
Las tarjetas son:
Minimalistas, Rápidas de leer, Consistentes, Adaptadas a dispositivos móviles.
1.b) Dos herramientas fundamentales en Mi Observatorio
Diseñadas para que el Agent IA trabaje dentro de un sistema, con reglas, y no improvisando.
1.b.1) replit.md — La Arquitectura
- Visión general del proyecto
- Estructura del proyecto
- Servicios Backend
- Servicios Frontend
- Base de datos
- Ciclo de vida de un módulo nuevo
- Versionado
- Reglas de calidad
- Problemas conocidos y soluciones
1.b.2) procedimiento.md — El Método
- Principios del proyecto
- Reglas para integrar datos
- Contrato backend
- Contrato frontend
- Ciclo de vida de un módulo nuevo
- Sincronización dev → prod
- Reglas de calidad
- Errores comunes y cómo evitarlos
- Checklist antes de merge
- Checklist para integrar un módulo nuevo
2) Desarrollo
Ha sido toda una experiencia.
Ya conocía la herramienta: este IDE en la nube que me ha acompañado en muchos momentos.
Le debo cosas importantes, como haber servido de plataforma de enseñanza para una de mis hijas —HTML, CSS y JavaScript—, algún artículo y también para otros tantos experimentos con distintos lenguajes de programación.
Todo eso ocurrió antes de la IA, antes de que la empresa adoptara los modelos LLM como motor principal, como tantas otras, donde los lenguajes generativos han hecho su agosto.
Y no es malo, al menos en algunos aspectos.
Pero no debemos olvidarlo:
Las calles se pueden limpiar con máquinas,
pero para eso, las calles deben estar bien diseñadas.Ahí es donde empieza la verdadera idea de una planificación correcta, la auténtica labor del ingeniero.
Porque la IA puede acelerar, puede ayudar, puede automatizar…, pero no puede sustituir el diseño, ni la arquitectura, ni el criterio.
Ese sigue siendo nuestro trabajo, me refiero a la parte humana.
En el formato empleado, es fácil seguir las reglas: en cierto modo, la base se repite.
Con un método de desarrollo claro, la dificultad y los verdaderos problemas se reducen a elegir buenas fuentes de datos: coherentes, honestas y actualizables.
El caparazón es común para casi todas las aplicaciones.
Y he de ser honesto: para esta aún me faltan muchas mejoras, pero incluso así, me parece un resultado muy respetable.
2.a) El caparazón
- Reglas para usuarios: cuentas, control de sesiones.
- Reglas para administradores: herramientas de mantenimiento.
- Panel de configuración: opciones, selección de widgets…
- Actualización de datos: fundamental cuando el sistema se pone tozudo.
- Temas: cómo quieres verlo, la UI.
- Créditos: explicación, contacto, o sea, yo.
- Privacidad: imprescindible si se piden permisos o se gestionan datos personales.
- Ayuda y versionado: aquí me he explayado; cuento cómo ha crecido la idea.
- Sistema de avisos: necesario para comunicar nuevas versiones, paradas, incidencias…
A futuro, ¿qué me quedaría?, entre otros:
- Sistema de alarmas: necesario para que no se te pase nada de nada.
- Más widgets: muchos más widgets.
- Relación de mecenazgo: lo más probable es que esta experiencia termine con mis ahorros.
- Y otros: ideas que irán apareciendo con el tiempo.
2.b) El alma: los widgets o tarjetas
Esto se repite en cada nuevo widget, es como un mantra.
Empiezas cada widget recordando replit.md y procedimiento.md, porque el Agent necesita contexto para comportarse como un ingeniero, no como un generador de código suelto.
Recordarle los documentos al Agent es tu forma de decir:
“Este proyecto tiene reglas. No improvises. Construye dentro del sistema.”¿Y cómo terminas?, pués Depurando bugs.
En cada nuevo widget la IA suele dejar un rastro de incorrecciones e incumplimientos de las reglas. Hay que estar atento y validar la información: en ocasiones hardcodea datos, los embebe en el código o usa fallbacks de primera sin criterio.
Regla de oro: nunca dés por bueno lo hecho por la IA.
Revísalo, ponlo a prueba, somételo a método.
Y entre medias, el desarrollo de cada widget: su núcleo gordiano, el punto donde se resuelve la complejidad y se define su comportamiento real.
Vamos a enumerar ciertos aspectos repetitivos respecto de este asunto:
2.b.0) Investigar, observar, coger ideas
Antes de escribir una línea de código, toca mirar alrededor: qué existe, qué funciona, qué inspira.
2.b.1) Elegir la fuente de datos
Fiable, pública y actualizable, a ser posible.
El ciclo de vida de los datos es tan importante como el widget en sí.
2.b.2) Método para obtener la información
API, scraping ligero o dataset propio.
Cada fuente exige un tratamiento distinto y unas reglas distintas.
2.b.3) Estructura de datos a utilizar
Normalmente un modelo JSON, claro y coherente.
Si la estructura falla, el widget falla.
2.b.4) Un layout aproximado
La IA suele tener patrones de diseño de UI muy avanzados, pero conviene marcar un esquema previo para evitar improvisaciones visuales.
2.b.5) Probar y probar
Hasta quedarse conforme.
La prueba es el filtro que separa un módulo funcional de un módulo que solo “parece” funcionar.
2.c) Una reflexión necesaria: el papel del criterio humano
Trabajar con IA en el diseño de aplicaciones en la nube te obliga a recordar algo esencial:
la IA no entiende el proyecto, entiende instrucciones, el proyecto lo entiendes tú.
Por eso, aunque el Agent pueda generar código, sugerir estructuras o acelerar tareas, hay un punto donde siempre aparece la diferencia entre un sistema improvisado y un sistema bien diseñado: el criterio.
- La IA no sabe si una fuente de datos es honesta.
- No sabe si un widget rompe la coherencia visual.
- No sabe si un fallback es aceptable o si está ocultando un error grave.
- No sabe si un dato embebido en código es un parche o un problema futuro.
Ese juicio es humano.
Y aquí aparece la aportación clave:
la IA no sustituye la ingeniería, la amplifica.
Cuando tienes un método, cuando defines reglas, cuando documentas, cuando revisas…, la IA se convierte en una herramienta potentísima.
Pero sin ese método, sin ese criterio, sin ese caparazón, la IA solo genera ruido.
Por eso este tipo de proyectos —como Mi Observatorio— son tan valiosos:
demuestran que la IA funciona mejor cuando trabaja dentro de un sistema, no cuando improvisa fuera de él.
En el fondo, diseñar aplicaciones en la nube basadas en IA es un ejercicio de equilibrio:
entre automatización y criterio, entre velocidad y estructura, entre potencia y responsabilidad.
Ese equilibrio es, precisamente, lo que convierte un experimento en un producto.
3) Diccionario técnico del artículo
Este diccionario recoge los términos técnicos usados en el artículo, con su equivalente universal cuando existe, y una explicación sencilla para lectores no versados.
- Agente / Agent
Universal: AI Agent
Sistema de IA que ejecuta tareas siguiendo instrucciones y contexto.
En el artículo, es el motor que construye los widgets y necesita reglas claras para no improvisar.
- IDE en la nube
Universal: Cloud IDE
Entorno de programación accesible desde el navegador, sin instalación.
Replit es el IDE que usas para enseñar, experimentar y desarrollar Mi Observatorio.
- LLM
Castellanizado: Modelo de lenguaje
Universal: Large Language Model
Modelo de IA capaz de generar texto, código y razonamiento.
En el artículo, describes cómo Replit adoptó LLMs como núcleo de su plataforma.
- SaaS
Castellanizado: Software como servicio
Universal: Software as a Service
Aplicación que funciona en la nube, sin instalación, siempre actualizada.
Mi Observatorio es un SaaS modular.
- Widget / Tarjeta
Universal: Widget / Card Component
Pequeño módulo visual que muestra información concreta.
En tu proyecto, cada widget es un micro‑observatorio con su propia lógica.
- Microservicio
Universal: Microservice
Pequeña pieza de software independiente que realiza una función concreta.
Cada widget de Mi Observatorio actúa como un microservicio visual.
- Backend
Universal: Backend
La parte del sistema que procesa datos, llama APIs y prepara la información.
En tu proyecto, cada widget tiene su propio servicio backend.
- Frontend
Universal: Frontend
La parte visual del sistema: lo que el usuario ve y toca.
Tus widgets tienen una UI minimalista y compacta.
- API
Castellanizado: Interfaz de programación de aplicaciones
Universal: API
Puerta de acceso a datos externos.
Tus widgets consumen APIs oficiales, abiertas y heterogéneas
- Scraping / Scraping ligero
Castellanizado: Raspado web
Universal: Web Scraping
Técnica para extraer datos de páginas web cuando no existe API.
En tu proyecto lo usas de forma ligera y controlada.
- Dataset
Castellanizado: Conjunto de datos
Universal: Dataset
Archivo estructurado con datos organizados.
Algunos widgets usan datasets propios.
- Fallback
Castellanizado: Valor de reserva
Universal: Fallback
Dato alternativo que se usa cuando la fuente principal falla.
La IA tiende a usar fallbacks sin avisar, por eso deben controlarse.
- Hardcodear
Universal: Hardcoding
Incluir datos fijos dentro del código en lugar de obtenerlos dinámicamente.
La IA suele hacerlo y es una de las cosas que siempre hay que revisar.
- UI
Castellanizado: Interfaz de usuario
Universal: User Interface (UI)
Aspecto visual de la aplicación: colores, temas, disposición.
Tus widgets tienen una UI minimalista y coherente.
- Versionado
Universal: Versioning
Proceso de registrar cambios y evoluciones del proyecto.
En tu artículo explicas cómo documentas la historia del Observatorio.
- Mecenazgo
Universal: Patronage / Sponsorship
Apoyo económico voluntario para sostener un proyecto.
Lo mencionas como posible vía futura para mantener el Observatorio.
- Núcleo gordiano
Universal: no tiene equivalente directo
Metáfora que describe el punto crítico donde se concentra la complejidad de un widget: lógica, datos, reglas y validación.
Es el lugar donde realmente “se decide” si el módulo funciona.
- Layout
Castellanizado: diseño de disposición
Universal: Layout
Estructura visual de un widget: cómo se organizan los elementos, bloques, tarjetas y datos.
La IA suele proponer layouts avanzados, pero conviene definir uno previo para evitar improvisaciones visuales.
- Modelo JSON
Universal: JSON data model
Formato estándar para representar datos estructurados.
Es la base de casi todos los widgets del Observatorio.
- Ciclo de vida de los datos
Universal: Data lifecycle
Proceso completo que siguen los datos: creación, actualización, caducidad y reemplazo.
Elegir fuentes con buen ciclo de vida es clave para que un widget no quede obsoleto.
- Depurar bugs
Universal: Debugging
Proceso de encontrar y corregir errores en el código o en la lógica del widget.
Es el paso final de cada módulo y donde más se nota la intervención humana.
- Mantra de desarrollo
Universal: no tiene equivalente directo
Conjunto de pasos repetitivos que se siguen en cada widget: reglas, contexto, datos, layout, pruebas.
Es la forma de evitar improvisación y mantener coherencia en todo el sistema.
4) Agradecimientos y Fuentes de Información
Mi Observatorio no existiría sin el trabajo, la constancia y la transparencia de decenas de instituciones, organismos, medios y servicios públicos, que ofrecen datos abiertos, actualizables y de calidad y otros en el ámbito privado, igualmente necesarios. A todas ellas, gracias.
A continuación se enumeran las fuentes de información utilizadas, organizadas por temática para facilitar su consulta:
📰 Medios de comunicación (nacionales, regionales e internacionales)
20 Minutos (todas sus ediciones: Andalucía, Aragón, Asturias, Baleares, Barcelona, Canarias, Cantabria, Castilla y León, Castilla-La Mancha, Extremadura, Galicia, Internacional, La Rioja, Madrid, Murcia, Nacional, Navarra, País Vasco, Valencia, Viajes y Aviación)
ABC España, ABC Internacional
Diario Sur
Diario de Sevilla
El Mundo España
El País España, El País Internacional
Europa Press Andalucía, Europa Press Extremadura
Genbeta
Hipertextual
La Vanguardia Barcelona
Xataka
🌦️ Meteorología, clima y medio ambiente
AEMET Avisos
AEMET OpenData
Meteoalarm
Open-Meteo Air Quality (CAMS)
Open-Meteo Forecast API
Open-Meteo Marine API
OpenWeatherMap
Infomedusas (IEO)
MedusApp
MITECO Boletín
MITECO — Red de Parques Nacionales
SAIH
SICA — Mapa Estratégico de Ruido
ADEAC — Banderas Azules España
Punt d'Informació Aerobiològica (PIA)
🚦 Movilidad, transporte y tráfico
DGT Incidencias
Renfe AVE/LD GTFS-RT
Renfe Cercanías GTFS-RT
AENA Noticias Aviación
📊 Economía, finanzas y energía
BCE — Euríbor 12 meses
Banco de España — BExplora (Tipo hipotecario)
Frankfurter API — Tipos de Cambio (BCE)
Yahoo Finance — Gas Natural TTF (TTF=F)
Yahoo Finance — Petróleo Brent (BZ=F)
Yahoo Finance — Índices Bursátiles
REE ESIOS — Mix de Generación
REE ESIOS — Precios Electricidad
Portal Estadístico del Notariado
España Stats — Estadísticas Inmobiliarias
INE — IPC General (variación anual)
🏀⚽ Deportes
API-SPORTS Women Basketball
ESPN Women Football
TheSportsDB
📚 Cultura, libros y divulgación
Google Books
Open Library
Blog Casa del Libro
OMDb API (Open Movie Database)
🌌 Ciencia y astronomía
NASA — Astronomy Picture of the Day (APOD)
CAHA — RSS Noticias
IAC — RSS Noticias
OAN — Observatorios Astronómicos (BD)
OAN — RSS Noticias
💧 Recursos hídricos
Embalses.net
iAgua DATA
Cada una de estas fuentes aporta una pieza del puzzle que hace posible Mi Observatorio:
datos fiables, públicos, actualizables y con un ciclo de vida adecuado para construir widgets sólidos y útiles.
Sin ellas, este proyecto no tendría sentido, ni habría sido posible
🧩 Las IAs usadas en este proyecto, como no mencionarlas, Replit (mi par en este desarrollo) y Copilot (ayuda a la redacción y generación de imágenes).
📜 Esto es solo un proyecto formativo
Sin ánimo de lucro, por lo que si lo considerais útil en parte o en su totalidad, solo os pido a cambio una mención sobre el origen de la información, me haría gran ilusión saber que ha servido para que otros 'Devs', se animen a desarrollar su talento en el mundo de la IA (Inteligencia Artificial).
