Diseño de aplicación Front mediante una IA

0
213

Este tutorial se ha hecho en colaboración con Valentín Valverde Romero, donde nos enfocaremos en la creación de una aplicación Front mediante una IA y buenas prácticas.

En otros artículos se ha visto el uso de una IA para el apoyo de la creación de un API en Backend para Spring Potenciando el Potencial: Cómo la IA puede mejorar la eficiencia de un programador y también el uso de un asistente para ayudarnos en el día a día en la programación Acelera tu desarrollo en Spring Boot con GitHub Copilot y nosotros nos enfocaremos en la creación de una aplicación Front mediante una IA.

0. Índice de contenidos

  1. Introducción
  2. Diseño de carpetas en arquitectura hexagonal en front
  3. Creación de entidades (con patrón value object)
  4. Creación de abstracciones de repositorios (patrón adapter)
  5. Creación de casos de uso
  6. Implementación de abstracciones (localstorage)
  7. Necesitamos un contenedor de inyección de dependencias
  8. Creación de componentes (views)
  9. Conclusiones
  10. Referencias

1. Introducción

En este artículo reflejamos el proceso de investigación de desarrollo de una aplicación Front mediante una IA, intentando que esta pueda generar código de buena calidad.

El objetivo es crear una pequeña aplicación en Vue 3. Queremos hacerlo con typescript y nos gustaría aplicar arquitectura hexagonal y el patrón “value object”. Se pretende comprobar si es posible crear esta aplicación “sin conocimientos” sobre el framework y arquitecturas limpias haciendo uso únicamente de la IA. Para ello, hemos dividido el proceso en diferentes pasos.

Para este tutorial vamos a utilizar la versión gratuita de ChatGPT (GPT 3.5). Para ello vamos a necesitar crear una cuenta en en la web de OpenAI. Nos ofrecerá diferentes formas de registros, queda a nuestra elección la más adecuada.

Imagen de la pantalla de creación de usuario en la web de OpenAI, donde aparece la opción de registros con una cuenta de Google, GitHub, Microsoft o con correo electrónico
Captura de página de registro de OpenAI

Una vez creada la cuenta, podremos acceder al chat, y empezar a realizar consultas, para ello, deberemos escribir en el cuadro de texto que aparece en la parte inferior de la vista principal.

Imagen con la interfaz de ChatGpt donde realizamos la primera pregunta
Interfaz de ChatGPT

En cada uno de los pasos, dejaremos una imagen con el prompt que hemos utilizado de inicio (ya que se requiere ir refinando las respuestas) y una puntualización de que tal se ha comportado la IA.

2. Inicio de proyecto

Imagen del prompt para la generación de la aplicación en Vue: Hola. Soy un desarrollador frontend que no conoce nada sobre vuejs. Quiero crear una aplicación en vue3 con typescript y vite.
Necesito el comando de cli para hacer el proyecto con npm.
No proveas descripción, solo el comando.
Prompt para la generación de la aplicación en Vue

En el inicio del proyecto para crear una app de vue con IA, utilizamos un comando proporcionado por la IA para generar el proyecto con vue3 y typescript. Aunque el comando funcionó correctamente, tuvimos problemas para que la aplicación iniciara correctamente debido a un error en el reconocimiento de las extensiones .vue. A pesar de que la IA nos dio algunas sugerencias para resolver el problema, ninguna de ellas fue válida. Finalmente, identificamos el problema y pudimos solucionarlo creando un fichero shims-vue.d.ts. Este incidente resalta que, aunque la IA puede ser de gran ayuda, se necesita conocimiento previo para resolver problemas complejos.

3. Diseño de carpetas en arquitectura hexagonal en front

Imagen del prompt para la generación de la estructura de carpetas: Hola, vamos a crear una aplicación para gestionar los horarios de las asignaturas en una universidad. Vamos a hacerlo con arquitectura hexagonal. El framework que vamos a utilizar es vue3.
Hazme una estructura de carpetas separando las capas: "domain", "application", "infrastructure" y "presentation"
Prompt para la generación de estructura de carpetas

En la generación de la estructura de carpetas para una arquitectura hexagonal en el framework de Vue, utilizamos un prompt para solicitar esta estructura a la IA. La primera respuesta que recibimos seguía una arquitectura hexagonal, pero era más adecuada para aplicaciones de back-end en lugar de front-end, lo cual no era adecuado para nuestro caso. Sin embargo, después de especificar que se trataba de una arquitectura front-end, la IA nos proporcionó la estructura de carpetas esperada.

Este incidente destaca que la IA está influenciada por los datos de entrenamiento y que, por lo tanto, puede ser más efectiva en ciertas áreas que en otras. Sin embargo, también muestra cómo la IA puede adaptarse y proporcionar resultados más precisos cuando se le brinda información adicional sobre el contexto de la tarea.

4. Creación de entidades (patrón value object)

Imagen del prompt para la generación de la entidad: Hola, estoy creando un app en vue donde estoy aplicando arquitectura hexagonal. Tengo en un primer nivel las carpetas de "domain", "application", "infrastructure" y "presentation". Quiero crear mi primera entidad de dominio que será University.ts.
¿Puedes darme el path de la carpeta donde debe ser creado y el contenido de cada uno de los ficheros?
Prompt para la generación de la entidad

En la generación de entidades de dominio siguiendo el patrón value object para una app en front, solicitamos a la IA que nos generara una entidad «University» con un «uuid» y un «name». La IA pudo representar correctamente el concepto de value object, pero no pudo abstraer la validación «not null» en una clase abstracta hasta que se le indicó explícitamente. Sin embargo, cuando se abordó el problema del path, la IA comenzó a tener problemas debido a la pérdida de contexto durante la conversación.

A pesar de que la IA tuvo dificultades para generar los archivos desde cero, aún puede ser útil como un apoyo para la creación de clases individuales necesarias para completar la entidad. En general, es importante reconocer que la IA puede no ser capaz de proporcionar soluciones completas para todos los casos y que puede ser necesario complementarla con conocimientos técnicos para lograr los resultados deseados.

5. Creación de abstracciones de repositorios (patrón adapter)

Imagen del prompt para la creación del repositorio: Hola, estoy creando una aplicación en front con typescript. He creado una entidad "University.ts" y necesito crear el repositorio, que tendrá un método "getAll". Estoy usando arquitectura hexagonal y esta será la interfaz del repositorio.
Prompt para la creación de repositorio

A continuación necesitamos crear la “firma” del repositorio de “University”. Al pasarle el prompt que aparece arriba, ChatGPT nos devuelve lo siguiente:

Inmediatamente después, nos devuelve una implementación “in memory”, que nos servirá para nuestra prueba:

En este caso, la IA se comporta como esperamos y nos devuelve un repositorio siguiendo el patrón adapter de forma eficiente con un único prompt conciso, con la salvedad de que se “ha inventado” la estructura del modelo “University”; esto es debido a que se ha realizado la consulta desde un chat diferente, por lo que no tenía contexto de esto.

6. Creación de casos de uso

Imagen del prompt para la creación de caso de uso: Hola, he creado una aplicación en front con arquitectura hexagonal en typescript. Tengo un repositorio "UniversityRepository" el cual tiene un método "getAll". Necesito un caso de uso para obtener un array de "University".
Prompt para la creación de caso de uso

A continuación se le solicita a la IA que nos genere un caso de uso para poder obtener todas las universidades de nuestro repositorio. Esto lo hace correctamente y nos genera el siguiente código:

7. Necesitamos un contenedor de inyección de dependencias

Imagen del prompt para obtener un contenedor de inyección de dependencias: Me encuentro en typescript y necesito un contenedor de inyección de dependencias ¿Cuál podría usar?
Prompt para obtener un contenedor de inyección de dependencias

Le hemos indicado a la IA que necesitamos un contenedor de inyección de dependencias. La respuesta al prompt han sido varias opciones de librerías que cumplen esta funcionalidad. Hemos elegido la primera opción (inversify).

Posteriormente, le hemos solicitado ayuda para poder inyectar nuestro “UserRepository” en el caso de uso:

Imagen del prompt para la generación de la inyección del repositorio: Tengo el siguiente repositorio export class InMemoryUniversityRepository implements UniversityRepository { private universities: University[]; constructor() { } this.universities ]; new University({ = [ uuid: "1234-abcg-5678", name: "University of Oxford", }); new University({ }), uuid: "1234-acsa-a456", name: "Harvard University", new University({ uuid: "1234-abcg-57782", }), name: "University of Tokyo", async getAll(): Promise { return this.universities; } } ¿Cómo puedo inyectar en el contenedor este repositorio?
Prompt para la generación de la inyección del repositorio

Nos ha dado una respuesta satisfactoria, que incluye:

  • Crear el contenedor
  • Aplicar los decoradores @injectable a repositorio y caso de uso
  • Aplicar decorador @inject a la inyección del repositorio en el caso de uso

8. Creación de componentes (views)

Imagen del prompt para la generación de las vistas: Hola, tengo una app en vue 3 (composition). Tengo instalado como inyector de dependencias inversify y un caso de uso GetUniversitiesUseCase. Necesito una view en vue que pinte un grid de cards con el nombre de cada university. La card tendrá una imagen generada en cada componente card usando una url de imagenes. El grid tendrá un gap de 1rem y un padding de 3rem arriba y abajo y бrem izquierda y derecha. La card tendra un padding de 0.5rem El objeto University tiene unicamente la propiedad name. La imagen debe ser de una url de imagenes Crea 2 componentes: * El componente card que recibe una university * El componente cardGrid que llama al caso de uso y pinta el grid de cards Estoy usando vue3 con typescript con composition api
Prompt para la generación de las vistas

Por último, hemos solicitado a la IA que nos genere un grid de tarjetas mostrando el nombre de la universidad y una imagen aleatoria de fondo.

Aunque el resultado no ha sido del todo malo, hemos tenido que hacer algunos ajustes sobre los componentes; sobre todo tiene problemas con “Composition API” de Vue. Suponemos por la falta de información.

Esta es una captura del resultado del componente que nos ha generado

Imagen con el resultado del HTML de la página dado por ChatGPT que consta de tres tarjetas con el nombre de universidad y una imagen de fondo
Resultado de la aplicación

9. Conclusiones

En resumen, los distintos incidentes mencionados ilustran tanto las limitaciones como las capacidades de la inteligencia artificial en el desarrollo de aplicaciones.

La creación de una aplicación Front siguiendo buenas prácticas puede ser un desafío incluso para los desarrolladores con experiencia. Sin embargo, intentar hacerlo sin conocimientos técnicos previos y solo con la ayuda de una IA, puede ser aún más difícil. Aunque la Inteligencia Artificial puede ser una herramienta poderosa para agilizar y optimizar el proceso de desarrollo de aplicaciones, su uso requiere una comprensión básica de los conceptos y tecnologías involucradas en la creación de aplicaciones Front.

Por lo tanto, podríamos decir que la creación de una aplicación Front mediante una IA con buenas prácticas sin tener conocimientos técnicos previos únicamente con la ayuda de una IA es una tarea bastante compleja.

10. Referencias

Acelera tu desarrollo en Spring Boot con GitHub Copilot
Potenciando el Potencial: Cómo la IA puede mejorar la eficiencia de un programador
Documentación de Vue
ChatGPT

Dejar respuesta

Please enter your comment!
Please enter your name here