En la octava clase del curso de Lovable vamos a entrar en el código de la aplicación y a modificarlo directamente con criterio.
Hasta ahora hemos trabajado de una forma muy guiada, primero con prompts, después con edición visual, más tarde con archivos y finalmente con toda la parte de nube, que nos ha permitido entender cómo funcionan la base de datos, los usuarios, el almacenamiento y la lógica del backend. Pero llega un momento en el que necesitamos un nivel de control mayor. Ahí es donde cobra importancia poder acceder al código real que genera la herramienta. No para convertirnos de repente en desarrolladores puros, sino para perder el miedo a lo que hay debajo, entender cómo está organizada la aplicación y descubrir que muchos cambios concretos pueden hacerse de forma rápida sin consumir créditos ni depender siempre de nuevos prompts.
Vamos a recorrer la estructura interna del proyecto, identificar las carpetas más importantes y entender qué papel cumple cada una. Veremos dónde están las páginas, los componentes, la conexión con la base de datos y los archivos de configuración. Después haremos varios cambios reales directamente sobre el código: modificaremos textos del dashboard, ajustaremos etiquetas dentro de las tarjetas y añadiremos pequeños retoques visuales. Además, comprobaremos cómo podemos apoyarnos en otra IA para interpretar archivos concretos y sugerir cambios sencillos sobre el interfaz. ¡Vamos a ello!
Pues ya lo vemos, hemos conseguido abrir el proyecto por dentro, entender su estructura básica y tocar directamente varias partes del código con efecto inmediato en la aplicación. Hemos comprobado que no hay magia escondida, sino archivos, componentes y líneas concretas que podemos localizar, modificar y guardar para ver enseguida el resultado.
Uno de los puntos más importantes de esta clase es haber entendido que cada parte de la aplicación tiene su sitio. Las páginas contienen pantallas completas, los componentes reúnen piezas reutilizables del interfaz, la carpeta de integración conecta con la base de datos y los archivos de configuración definen cómo se construye y se ejecuta el proyecto. No se trata de memorizar todos los nombres, sino de saber orientarnos.
También hemos visto algo muy valioso: la posibilidad de hacer cambios pequeños sin pasar por el chat de la herramienta. Si queremos cambiar un título, un subtítulo o una etiqueta concreta, muchas veces resulta más rápido entrar al archivo correcto, localizar el fragmento y editarlo.
Por otro lado, hemos aprendido a localizar componentes visuales de forma práctica. Al modificar la plantilla de las tarjetas, hemos entendido que un solo cambio en el archivo adecuado repercute en todas las ideas de la aplicación. Esta lógica de componente reutilizable es una de las bases del desarrollo moderno, y comprenderla nos ayuda a pensar mejor nuestras apps.
Como ejercicio práctico, podemos elegir una zona concreta de nuestra aplicación, por ejemplo la cabecera o las tarjetas del listado principal, y modificar varios detalles desde el código sin usar prompts. Podemos cambiar un texto, añadir un icono, ajustar una etiqueta o probar un estilo nuevo.
Si surge cualquier duda al movernos por la estructura del proyecto, al localizar archivos o al hacer nuestros primeros cambios directos en el código, siempre podemos contar con el equipo de soporte que está al otro lado de la intranet para ayudarnos a seguir avanzando con confianza.