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
- Introducción
- Diseño de carpetas en arquitectura hexagonal en front
- Creación de entidades (con patrón value object)
- Creación de abstracciones de repositorios (patrón adapter)
- Creación de casos de uso
- Implementación de abstracciones (localstorage)
- Necesitamos un contenedor de inyección de dependencias
- Creación de componentes (views)
- Conclusiones
- 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.
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.
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
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
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)
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)
A continuación necesitamos crear la “firma” del repositorio de “University”. Al pasarle el prompt que aparece arriba, ChatGPT nos devuelve lo siguiente:
interface UniversityRepository {
getAll(): Promise;
}Inmediatamente después, nos devuelve una implementación “in memory”, que nos servirá para nuestra prueba:
class InMemoryUniversityRepository implements UniversityRepository {
private universities: University[];
constructor() {
this.universities = [
{ id: '1', name: 'University of Oxford', country: 'United Kingdom' },
{ id: '2', name: 'Harvard University', country: 'United States' },
{ id: '3', name: 'University of Tokyo', country: 'Japan' },
];
}
async getAll(): Promise {
return this.universities;
}
}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
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:
export class GetUniversitiesUseCase {
constructor(private readonly universityRepository: UniversityRepository) {}
async execute(): Promise {
return await this.universityRepository.getAll();
}
}7. Necesitamos 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?](https://adictosaltrabajo.com/wp-content/uploads/2023/05/7.png)
- 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)
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
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
