Diseño de aplicaciones en la nube, basadas en IA

0. Motivación
1. Descripción
2. Desarrollo
3. Diccionario técnico
4. 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).

"Cuanto más observo, más me asombro - I am Robot”

El siglo XXI traerá transformaciones tecnológicas profundas y con ellas, cambiará nuestra forma de vivir. Los humanos se organizarán también, según el grado de aceptación - o resistencia - a estos cambios. Los sistemas de organización mundial que hoy conocemos quedarán obsoletos con rapidez y nuevos órganos de decisión, inmunes a las limitaciones del medio ambiente, tomarán el relevo.

Mientras tanto, la especie que un día creyó ocupar la cúspide de la pirámide, se enfrentará a su propia duda existencial.

Esto, solo es un guión cinematográfico, las historias - parte reales parte ficción - nos ayudan a entender y desarrollar algo esencial: el pensamiento crítico, el cuestionar o mantener opiniones contrarias, pretender la mejora continua, basada en una robusta metodología, es lo que nos permite evolucionar los sistemas… y también a nosotros mismos.

De eso vá este artículo. Del despertar de esa inquietud, de una ilusión, el sueño de aspirar a replicar el comportamiento propio de seres vivos o de cómo un conjunto de metal, silicio y baquelita, comienza a comportarse como algo más.

Estimados e inquietos lectores, estamos a punto de comenzar un viaje por: "Cuanto más observo, más me asombro - I am Robot”. Bon voyage.

🟧 Algo más que un montón de líneas de código

Cuando empezamos esta experiencia, el objetivo parecía sencillo: hacer que un robot (engendro electromecánico), siguiera una baliza roja.

Pero pronto descubrimos que el robot no era el único que tenía que aprender, también nosotros.

Lo que empezó como un ejercicio de programación con Python terminó convirtiéndose en una lección inesperada sobre "cómo pensar como un ingeniero":

• cómo lidiar con un hardware imperfecto y un entorno cambiante.
• cómo detectar errores usando logs y dashboard,
• cómo diseñar sistemas robustos en entornos ruidosos,
• y cómo transformar el caos en arquitectura estable y sostenible.

Este proyecto no va de servos, ni de cámaras, ni de distancias, va de algo mucho más importante:

La base para convertir un montón de líneas de código en un sistema que es capaz de tomar decisiones acertadas.

🧠 Robótica, ruido y pensamiento crítico

"Cómo un robot, que sigue una baliza, se convirte en una lección de ingeniería".

1. El mundo real no es un laboratorio.

La primera sorpresa llegó pronto: la batería y los sensores del Robot Hat V4 - cámara, ultrasonido, servos - no eran demasiado fiables.

• La capacidad de la batería, condicionaba las comunicaciones o respuestas.
• La cámara vibraba y generaba bounding boxes absurdos.
• El área de la baliza saltaba de 2000 a 40000 en un solo frame. Las luces y sombras contribuian con mas errores, a diferentes horas de prueba en el día, con diferentes resultados, bajo las mismas premisas.
• El ultrasonido daba 5 cm cuando estaba a 40.
• El robot perdía la baliza por un giro mínimo del chasis.

La primera lección fue inmediata:

   El hardware real es ruidoso el ruido no se elimina: se gestiona.

Aquí aparece el primer vínculo con el pensamiento crítico:

   No puedes confiar en un único dato. Necesitas contexto, criterios y validación.

2. El error clásico: programar reacciones, no sistemas

La primera versión del código era ingenua:

si veo la baliza → giro 
si no la veo → busco 
si está cerca → freno
          

Funcionaba en mi cabeza. Funcionaba en papel. Funcionaba incluso en el modo simulación, pero no en el robot en modo real:

• se quedaba mirando a un lado,
• entraba en bucles,
• perdía la baliza,
• se bloqueaba,
• o avanzaba cuando no debía.

El pensamiento crítico nos obligó a hacer la pregunta correcta: ¿Estoy reaccionando a los síntomas o entendiendo el sistema?

3. El caos como maestro

Durante semanas aparecieron fallos que parecían contradictorios:

• TRACK entraba en SEARCH sin motivo.
• RECENTER atrapado en un ángulo imposible
• TRACK arrollando la baliza
• NEAR se activaba demasiado pronto… o nunca
• SCAPE saltaba cuando no debía.
• RESET se encadenaba sin sentido.

Cada fallo era una pista. Cada pista me obligaba a cuestionar nuestras suposiciones.

Aquí aparece la segunda lección de pensamiento crítico:

   Cuando un sistema falla, no te preguntes “qué pasa”, pregunta mas bien “qué estoy asumiendo,  que no es cierto”.

4. La revelación: no necesitábamos más condiciones, mas código, mas desorden, sino mejor arquitectura

El punto de inflexión llegó cuando entendimos que:

• No era un problema de TILT.
• No era un problema de PAN.
• No era un problema de área.
• No era un problema de distancia.
• No era un problema de velocidad.

   Era un problema de arquitectura, del conjunto.

Estábamos intentando controlar un sistema complejo con condiciones sueltas, parcheadas. Eso nunca funciona.

La solución fue filosófica antes que técnica:

   Divide el mundo en zonas lógicas, espacios acotados, probados que funcionen y deja que cada estado gobierne su zona.

5. Nacen los validadores y la fusión de sensores

Aquí aparece la idea más poderosa del proyecto:

✔ No confíes en un único dato, construye conjunto de criterios que deban cumplirse.

Creamos dos validadores:

• valid_for_search → “¿esta detección es fiable para seguirla?”
• valid_for_near → “¿esta detección indica proximidad real?”

Y añadimos la capa de fusión visión + distancia:

• near_by_distance
• too_close_to_measure
• near_fused

Con ellos, el mundo del robot quedó dividido en zonas claras, con decisiones acotadas, mas precisas según el momento.

Esto es pensamiento crítico aplicado a robótica:

   No tomes decisiones por impulsos, fallo/corrijo. Tómalas por criterios.

6. La arquitectura final: simple, elegante, robusta

Con los validadores, los estados se volvieron puros, acotaban responsabilidad y daban su pase, de forma clara y segura:

• SEARCH → busca.
• RECENTER → alinea.
• TRACK → sigue.
• NEAR → gestiona proximidad.
• SCAPE → protege.
• RESET → estabiliza.

Cada estado hace una sola cosa y la hace bien, pasando correctamente al estado siguiente.

En resumen

Esta experiencia me enseñó algo que va mucho más allá de la robótica, de las líneas de código:

• El pensamiento crítico no es dudar de todo, es dudar de lo que importa.
• No es añadir más condiciones, es diseñar mejores estructuras.
• No es reaccionar al ruido, es entenderlo y darle significado.
• No es luchar contra el caos, es darle forma.
• No es corregir errores aislados, es entender y gestionar, dando lugar al correcto comportamiento.

Imágenes del Robot Hat V4

📚 Referencias

    Esto es solo una breve descripción, podreis encontrar mas información al respecto con todo el código en https://github.com/jmcaneda/picarx-pet

📜 Esto es un proyecto educativo

    Sin ánimo de lucro, por lo que si lo considerais útil en parte o en su totalidad, solo 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 robótica con Python.

   ¿A quién puede beneficiar en el plano educativo?

Aficionados a la robótica

• Un proyecto accesible pero profundo
• Un robot que muestra comportamientos emergentes
• Un camino claro para aprender visión + control + lógica

Estudiantes de la ESO y bachillerato

• Introducción práctica a la robótica
• Comprensión real del ruido en sensores
• Pensamiento lógico y estructurado
• Motivación por ver “vida” en un robot

   No descarto en un futuro próximo, la realización de monográficos acerca de los problemas a los que nos enfrentamos a lo largo del desarrollo del proyecto, medidas que se fueron adoptando o sobre conocimientos básicos necesarios.

📜 Que necesitas saber y tener

    Este es un proyecto sencillo, pero aún así requiere de un conocimiento en programación Python, manejo de utilidades de consola, placa base y algo de robótica. Por otro lado es necesario contar con el hardware apropiado:

Conocimiento recomendado

• Lenguaje de comandos en línea: Shell.
• Editores de programación, nano, micro, VS Code.
• Lenguaje de programación Python.
• Conocimiento del Hardware de placa base y extensiones.
• Modos de conexión con dispositivos a distancia, por terminal o por escritorio remoto.
• Sistema para el control de versiones Git.
• Repositorio de código remoto Github.

Hardware recomendado

• Raspberry Pi 3B+ o superior.
• Robot Hat V4 (Picar‑X) de Sunfounder.
• Elementos auxiliares como cables USB-C, bridas, tuercas, tornillos...
• Bateria externa auxiliar, en mi caso INIU Power Bank 10000 mAh.

✨ Especial mención.

Promotores y medios formativos (la formación gratuita de calidad constituye una de las mejores palancas para el cambio y progreso, ayudándonos a enfrentar con éxito, los nuevos retos, día a día), la formación gratuita es dos veces buena, prácticala y ayuda a extenderla.

Entre castigo y bendición, el regalo que me hizo mirar hacia la robótica https://docs.sunfounder.com/projects/picar-x-v20/es/latest/index.html

La ayuda en línea, si quieres llegar lejos, acompañate de los pares https://forum.sunfounder.com/latest

A los profesores y alumnos

Que viven este camino, con admirable interés y entrega.

¿Touch?, ¿Qué Touch?

 

🧊 Este es un proyecto desarrollado en Unity, para la experimentación de controles y gestos en dispositivos móviles, con Android, en un entorno de Realidad Aumentada (AR)

🎯 Si bien esto mismo se puede experimentar desde AR Mobile Project Template, he querido con un desarrollo propio, explicarlo desde la curiosidad de desenmarañar los entresijos que exiten detrás de todo ello y establecer las bases para futuros desarrollos.

🚀 Unity, como motor no solo de videojuegos, ha sabido entender y evolucionar hacia herramientas cada vez mas potentes y coordinadas para el mundo AR y esto ha quedado patente en la versión usada para esta aplicación.

🧱 Entorno de Desarrollo

🧩 Unity

• Versión: Unity 6.2
• Template: AR Mobile
• Nombre del proyecto: UnityARAndroid

📦 Módulos instalados desde Unity Hub

• Android Build Support
• Android SDK & NDK Tools
• OpenJDK
• ARCore XR Plugin (desde Package Manager)

📱 Dispositivo de Pruebas

🔍 Información del dispositivo

• Modelo: Redmi Note 8 Pro
• Versión de Android: 10 (QP1A.190711.020)
• Modo desarrollador: Activado

⚙️ Configuraciones necesarias

•  Activar opciones de desarrollador
•  Activar depuración USB
•  Permitir instalación de apps vía USB
•  Conectar por cable y verificar con adb devices

🔑 Claves técnicas

• Namespaces oficiales (InputSystem, EnhancedTouch, ARFoundation, ARSubsystems, ARCore) son la infraestructura base.

• Scripts propios se insertan como capas de aplicación, conectando esos namespaces con la lógica del proyecto:

• Diagnóstico asegura compatibilidad y estabilidad.

• UI & Mensajería traduce la lógica en feedback claro para el usuario.

• Interacción AR convierte gestos en acciones sobre objetos.

• Manipulación permite que los prefabs respondan a selección y gestos.

 

📁 Jerarquía de la Escena en Unity: ARAndroid

ARAndroid
├── Directional Light
├── AR Session
│   ├── AR Session
│   └── AR Input Manager
├── XR Interaction Manager
│   └── XR Interaction Manager (Script)
├── XR Origin (Mobile AR)
│   ├── XR Origin (Script)
│   ├── AR Plane Manager
│   ├── AR Raycast Manager 
│   ├── AR Anchor Manager 
│   └── Camera Offset
│       └── Main Camera
│           ├── Camera
│           ├── Audio Listener
│           ├── AR Camera Manager
│           ├── AR Camera Background
│           ├── Tracked Pose Driver (Input System)
│           └── Universal Additional Camera Data (Script)
├── ARSystemCheck
│   ├── Input System Check (Script)
│   ├── AR Availability Checker (Script)
│   └── Material Checker (Script)
├── ARReport
│   ├── Info DisPlay (Script)
│   └── Message Controller (Script)
├── UIAR
│   └── Canvas
│       ├── PanelOptions
│       │   ├── ButtonDelAll
│       │   │   └── TextDelAll
│       │   ├── ButtonDelFire
│       │   │   └── TextDelFire
│       │   └── CrosshairButton
│       │       └── CrosshairButtonText
│       ├── PanelInfo
│       │   └── TextInfo
│       └── MiraTelescopica
├── EventSystem
└── ARSelectionManager
    ├── AR Object Placer And Selector (Script)
    └── AR Gesture Detector (Script) 

📁 Jerarquía del Prefad usado: TheTrain (modelo 3D cofeccionado en Blender)

TheTrain (Prefad Asset)
├── Tag (Interactable)
├── Mesh Filter
├── Mesh Renderer
│   └── Materials (Element 0)
├── Box Collider
├── Rigidbody
├── XR Grab Interactable
└── AR Object Manipulator (Script)

📚 Referencias

    Esto es solo una breve descripción, podreis encontrar toda la información al respecto con manuales detallados, Scripts usados,  Prefads y otras inestimable ayuda. En https://github.com/jmcaneda/UnityARAndroid

    

 También podeis instalaros la aplicación en el movil con Android compatible. En https://jmcaneda.itch.io/unityarandroid

🎮 Título del juego: UnityARAndroid 🪐 Género: Educación.

📜 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 AR.

✨ Especial mención.

Los promotores y medios formativos (la formación gratuita de calidad constituye una de las mejores palancas para el cambio y progreso, ayudándonos a enfrentar con éxito, los nuevos retos, día a día)

Formación impartida por 5G Vodafone España SAU

Formación Profesional para el Empleo (FPE) de la JdA

A Gabriel Albarracín, del Departamento de Formación en IntegraConocimiento

El Profesor

Juan Manuel Requena Marín, Senior Sound Designer

Los Alumnos

Que viven este camino, con admirable interés y entrega.

Quiero empezar por el final

 

   Agradeciendo a todos aquellas personas o entidades, que de una forma u otra contribuyen y en muchos casos de manera altruista, a orientar y formar. Estamos en una sociedad circular, en la que lo que pasa allí, se acaba sintiendo aquí. Que quiero decir con esto, pues que gracias a que es así, algunos como es mi caso, crecemos y creemos.

   Esta formación tiene su origen en Extremadura, mas concretamente en Almendralejo, localidad cercana a Badajoz, que a través de IRIA (Incubadora de Realidades Inmersivas de Almendralejo), ofrece un programa de apoyo a las iniciativas de emprendedores, autónomos y Pymes con proyectos de innovación y desarrollo en el ámbito de la industria 4.0, Realidad Virtual, Aumentada, Realidad Mixta y Extendida y es aquí donde se propone un curso de formación, gratuito, Introducción a Unreal Engine 5.

   Se ha impartido, durante 30 intensas horas y no son todas las que se echan, porque hablamos de un motor, no solo de videojuegos, con inmensas posibilidades, de la mano experta de Javier Jurado Gámez (Unreal Gold Instructor partner for Epic Games y Director en Cursos Unreal Engine) y esto no es cualquier cosa. 30 horas puede parecer poco, pero con Javier esto adquiere otra dimensión y si, aunque no se lo crean, es básico.

   El programa ha sido extenso e intenso, muy ambicioso y ha desbordado las 30 horas por todos lados. Realizado entre el 08 de mayo y el 12 de junio del 2025 y a buen seguro, este no será el último. Abarca desde Interfaz de Usuario, Navegación y fundamentos 3D en Unreal, Creación de Niveles y Escenarios, Materiales y Texturas, Iluminación, Programación con Blueprints, Interfaz de Usuario (UI), Sonidos y Partículas y finalmente, Animación y Cinemática.

   Bienvenida sean estas iniciativas, otros lo tomen como ejemplo y que se multipliquen en el futuro.

Respecto del curso, vamos con esas "cosillas" que pueden ser de interés y que aparecen en tu día a día.

1.- Rutas importantes (No os perdáis).

Ruta por defecto de la carpeta VAULTCACHE,  donde se instalan los assets desde FAB.

C:/ProgramData/Epic/EpicGamesLauncher/VaultCache/

Ruta por defecto donde se instala el Launcher.

C:\Program Files (x86)\Epic Games

Ruta por defecto donde se instalan las vesiones del motor.

C:\Program Files\Epic Games

 

 2.- Atajos, algunos de los vistos, son interesantes.

Generalidades

ctrl + B -> Asset Actions -> Migrate (en proyecto, buscar carpeta Content), en mi anterior formación este me lo perdí y me hubiera venido de perlas.

alt + F4 -> Matar la aplicación.

ctrl + L -> Control dirección del sol (si, pero la tecla ctrl de la derecha del teclado).

Materiales

C -> en el grafo, cajita de comentarios.

L + botón izq. ratón -> Muestra la luz incidiendo en la muestra de material.

Blueprints

alt + botón izq. ratón -> Elimina línea.

ctrl + botón izq. ratón -> Mueve punto a otro nodo.

Nº atajo + botón izq. ratón -> Pone el nodo correspondiente (a la derecha podemos desplegar y ver los atajos).

Seleccionamos una línea de nodos, pulsamos Q y se alinean los cables (para los ordenados, se recomienda).

ctrl + C y ctrl + V -> Por medio de un archivo .txt y así lo pasamos entre proyectos, los BluePrint, (y esto porqué no me lo enseñasteis antes?, increíble!!!).

IA

P -> Vemos la zona en la que puede desplazarse el enemigo (esto parece evidente, pero a mi me costó encontrarlo).

Viewport

F8 -> Puedo seleccionar en el editor, en play mode cualquier actor del mundo y poder localizarlo en el Outliner (muy interesante).

3.- De todas las carpetas que crea Unreal, unas son importantes y otras, no tanto.

Carpetas Importantes: Config, Content y *.uproject

Carpetas que se pueden eliminar (estas las vuelve a crear, es importante en algunos cuelgues, realizar esta operación): Intermediate, Saved, DerivedDataCache.

4.- El Gizmo, esas flechas de colores.

      En Unreal Engine, el eje X positivo se representa con el color rojo y es el que se considera la dirección Forward por defecto. Por si te interesa el esquema completo del gizmo:

X (rojo): adelante (Forward)

Y (verde): a la derecha (Right)

Z (azul): hacia arriba (Up)

   Este sistema de coordenadas es típico en motores de juegos como Unreal, a diferencia de otros como Unity, donde Forward suele estar en el eje Z.

        Cambiar el punto de pivote de un mesh, podemos hacerlo desde el Modeling Mode -> XForm -> Edit Pivot -> Elegimos la posición nueva que nos interese.

5.- Cuando queremos incluir un video y que se renderice en el juego, pues...

   los videos deben ponerse en la carpeta .../Content/Movies, sino no compila el video (esto lo cuenta Javier, pero otros se lo callan).

6.- Respecto de los materiales.

   Esto no es solo en Unreal, también en Unity y supongo que en la mayoría de los motores. Los materiales se crean basados en unos shaders, estos se escriben en un lenguaje propio llamado HLSL (High-Level Shader Language). En la Programación de shaders: se usa para escribir vertex shaders, pixel shaders y más.

7.- Colocar un objeto en tu personaje.

Abrimos el Skeletal Mesh del personaje. Tienes que ver el Skeleton Tree.

Buscamos el hueso donde queremos poner nuestro objeto (mochila, arma,...), por ejemplo la mano derecha y si no existe el socket (según versiones), lo creamos con botón derecho ratón, Add Socket, sobre el hueso en cuestión.

Sobre el Socket creado, click botón derecho y Add Preview Asset, buscamos y seleccionamos. Resituamos el objeto con las herramientas de transformación y listo.

Ahora, vamos a tu personaje, seleccionamos el Viewport, añadimos un componente de Static Mesh para el objeto y lo arrastramos bajo nuestro Mesh.

En Details de nuestro objeto, seleccionamos el Static Mesh del objeto y buscamos nuestro Parents Socket, anteriormente creado.

Si es necesario, reinicia los valores del Transform, si tu objeto no queda bien situado.

Ahora nuestro personaje porta el objeto, donde le hemos dicho.

8.- Muchas son las cosas que se pueden hacer desde la línea de comando, como botón de muestra.

   En línea consola de comandos, en Unreal, poner HighResShot 2 y toma una imagen de pantalla. Interesante para documentar tu trabajo.

   En línea consola de comandos, en Unreal, poner DumpUnbuiltLightInteractions sirve para identificar qué objetos tienen interacciones de luz sin construir en tu escena.

   En línea consola de comandos, en Unreal, poner DisableAllScreenMessages sirve para ocultar todos los mensajes de texto en pantalla, como los que aparecen con Print String, advertencias de iluminación, o mensajes de depuración durante el juego.

9.- Cuando empaqueto el proyecto para Windows, y quiero personalizar el icono del ejecutable. Después de varios intentos, en diferentes resoluciones, encuentro la solución, la Community es grande. Os lo pongo mas abajo, junto con la aplicación web que he usado para crear el favicon.ico, pero lo mas importante, no os lo vais a creer y es como debeis proceder, borrar la caché de temporales y reiniciar el PC, o no se actualizaran los cambios.

10.- Mixamo.

Descargar de Mixamo un personaje, formato FBX Binary(.fbx) y Pose T-pose y guardamos el personaje.fbx.

Descargamos una animación, formato FBX Binary(.fbx), Skin, Without Skin, Frames por segundo, 30 fps y KeyFrame Reduction, none. En las animaciones Walk, marcar In Place.

Vamos al Content de tu proyecto, creamos una carpeta llamada Characters y 4 subcarpetas: Mesh, Materials, Textures, Animations.

Damos a Import desde la carpeta Mesh y lo primero que añado es el character. Muevo texturas, Materiales y animaciones.

Después, vamos a importar la animación y en la ventana de dialogo decimos a que skeleton pertenece y listo.

Como podemos hacer el retargeting, es decir reorientar los huesos. 

Click derecho en la animación, Retarget Animations, queremos pasar la animación a Manny, autoretargeting y exportamos la animación adaptada, con prefijo MM_, para que coincida con las del personaje receptor, en este caso Manny.

11.- Links de interés.

Recursos

Mixamo, para descargar personajes y animaciones.

Audacity , para editar sonidos, util para pasar a mono y reducir tamaño del audio.

Sonidos libre , para uso particular.

Convierte una imagen en un favicon.ico (es el formato de archivo usado por Unreal para cambiar el icono del ejecutable).

Materiales

How To Create And Use LODs In Unreal Engine 4/5 To Make Your Games Run Smoother.

How To Create Atlas Master Materials in Unreal Engine 5.

Iluminación

Creating Natural Lighting in Unreal Engine: A Step-by-Step Guide.

Landscape

Creating Non-Repeating Landscape Materials in Unreal Engine | Texture Blending & Macro Variations.

Sonidos

Cómo añadir SONIDOS de PISADAS en Tercera Persona en Unreal Engine 5.

Niagara

Cómo crear NIAGARA en forma de static o skeletal MESH en Unreal Engine 5.

IA en Unreal Engine

Inteligencia Artificial en Unreal Engine 5 🤖/ Enemigo que te persigue 🏃🏼 y sigue puntos aleatorios !

UI

Make An Easy WIN and LOSE System For Your Games In Unreal Engine 5 Using Blueprints.

Unreal Engine 5 Health and Damage System Tutorial [2023].

Cinematics

How to Create an Opening Cinematic in Unreal Engine 5

Unreal Engine 5 Beginner Tutorial Part 16 : Cameras, Rig Rail, and Crane

Full Beginner Filmmaking Masterclass for Unreal Engine 5 - Make your First Cinematic.

Cómo Hacer CINEMÁTICAS en UNREAL ENGINE 5 | Principiante (Sequencer UE5).

Sockets

Cómo Añadir y Cambiar Armas en tu Personaje de Unreal Engine 5 (Paso a paso)

Empaquetado

Ojo, si quieres cambiar el icono en el ejecutable, tienes que tener en cuenta esto que se dice aquí.

Documentación, un tema que ha quedado pendiente y fundamental para el control de versiones, sobre todo si trabajas en equipo.

Fundamentos de Git

Sobre la plataforma Android, no llegamos a ver nada, pero me los apunto para verlo en un futuro proximo

Android

Unreal Engine 5.5: Android Target Platform Setup & Build .APK | Step-by-Step Guide

AR Android

AR from scratch in 10 minutes using Unreal Engine 5.3!

12.- El resultado.

🎮 Título del juego: IriaFinalProject: Buscando la Clave 🪐 Género: Aventura musical intergaláctica / Acción rítmica

_

✨ Especial mención.

Los promotores y medios

Incubadora de Realidades Inmersivas de Almendralejo

Plataforma de Capacitación Tecnológica de Extremadura

El Profesor

Javier Jurado Gámez

Los Alumnos

Que viven este camino, con admirable pasión y sacrificio.