Curso con IA - Lección 3: Interfaz de usuario (parte 1)
Esta es la tercera lección de un curso donde estamos creando una aplicación de gestión de pólizas de seguro de automóviles usando OpenXava e inteligencia artificial.
Video
En esta tercera lección empezamos a refinar la interfaz de usuario por defecto generada por OpenXava, haciéndola más simple y limpia. Lo hacemos dando instrucciones a Windsurf, en inglés, sin usar términos técnicos de Java ni de OpenXava.
¿Problemas con la lección? Pregunta en el foro
Código
Si sigues el curso no tienes que escribir ningún código, lo escribirá la IA por ti. Y tu código no tiene que ser exactamente como el del video. Sin embargo, tienes el código generado en este video en un repositorio GitHub, por si te resulta interesante examinarlo.
Transcripción
Introducción
Hola, soy Mónica. En esta tercera lección vamos a refinar la interfaz de usuario de nuestra aplicación OpenXava. El objetivo es hacerla más simple y limpia usando Windsurf, nuestro IDE con IA, dándole instrucciones claras en un lenguaje sencillo.
Revisión de la interfaz actual
Empezamos revisando el estado actual de la aplicación. El módulo de Cliente está bastante bien, así que lo dejamos como está. En Póliza, los datos de abajo son razonables, pero la visualización del cliente es excesiva: muestra absolutamente toda su información, incluso una lista de pólizas. En Vehículo ocurre algo parecido: la vista es demasiado compleja porque la referencia a Póliza muestra la póliza completa, con listas de vehículos y siniestros que no están directamente relacionados con el vehículo. En Siniestro pasa lo mismo. La conclusión es clara: si simplificamos cómo se muestran las referencias a Póliza y Cliente, la interfaz quedará mucho más limpia.
Pedir a la IA simplificar las vistas
Le pedimos a Windsurf que simplifique las vistas usando un lenguaje natural, sin términos técnicos de OpenXava. Explicamos que la interfaz es demasiado compleja porque las referencias a Póliza y Cliente muestran demasiados datos, y le pedimos amablemente que lo arregle mostrando solo lo mínimo necesario.
Análisis de la IA y generación de código
Todo ocurre en tiempo real. Windsurf analiza nuestras entidades Java y propone la solución: usar @ReferenceView para apuntar a una vista más simple que Complete. Luego edita el código: modifica Policy y añade una vista Simple en Customer. También edita Claim para usar la vista Simple en la referencia a Policy. Al terminar, nos presenta un resumen claro de los cambios.
Primeros resultados en la aplicación
Aceptamos el código y vamos al navegador. En el módulo de Póliza, el Cliente embebido ahora muestra solo nombre y apellidos. Todo se ve limpio y claro. En Siniestro, la referencia a Póliza es simple y el resto del formulario también es directo. Quizá mostrar solo el número de póliza es un poco escaso, aunque podemos pulsar Editar para ver la póliza completa en un diálogo. En Vehículo, la referencia a Póliza es más sencilla porque el Cliente dentro ahora es mínimo, pero se sigue mostrando toda la información de la póliza, así que este módulo no ha mejorado tanto como los demás.
Ajuste fino del resultado
Agradecemos a la IA su trabajo y pedimos dos ajustes: en Siniestro, que la referencia a Póliza muestre también el cliente, de lo contrario el cliente no se ve en ningún sitio; y en Vehículo, que no muestre todos los datos de la póliza.
Segunda ronda de cambios
Windsurf analiza de nuevo el código y decide crear una vista nueva en Policy que incluya el cliente. Edita Claim para usar esa nueva vista en la referencia a Policy, y luego actualiza Vehicle con el mismo propósito. Aceptamos el código y probamos de nuevo. Ahora, tanto en Vehículo como en Siniestro, la póliza se muestra con el número y los datos básicos del cliente. Los formularios tienen mejor aspecto en general.
Revisión del código con control de versiones
Revisamos el código modificado con el sistema de control de versiones. En Claim vemos una nueva vista Simple y que en la referencia a póliza se usa WithCustomer en lugar de Complete. En Customer se ha añadido una vista Simple con nombre y apellidos. En Policy hay dos vistas nuevas: Simple, con solo el número de póliza, y WithCustomer, que además incluye el cliente; la referencia a cliente usa la vista Simple. Por último, en Vehicle hay una vista Simple y la referencia a póliza usa WithCustomer. Revisar los cambios es importante: si no conocemos OpenXava, tenemos la oportunidad de aprender; y si ya lo conocemos, mantenemos el control sobre nuestro código.
Conclusión
En pocos minutos y con un poco de inteligencia artificial, nuestra aplicación OpenXava tiene una interfaz mucho mejor. Lo hemos logrado sin escribir código y sin usar términos técnicos de OpenXava: hemos pedido el qué, no el cómo. En la siguiente parte continuaremos refinando la interfaz de usuario y podrás aprender cosas nuevas.
Próxima lección
Nos vemos en el próximo video, parte 2, donde seguiremos mejorando la interfaz de usuario de nuestra aplicación OpenXava.