udistrital / autenticacion_mid

0 stars 0 forks source link

Análisis de herramientas para automatizar código #75

Closed milo19980525 closed 1 year ago

milo19980525 commented 1 year ago

Se requiere investigar que herramientas existen en el mercado que permiten la generación de código automatizada.

Especificaciones técnicas

Sub Tareas

Criterios de aceptación

Requerimientos

Dependencias

Definition of Ready - DoR

Definition of Done - DoD - Desarrollo

a52290451 commented 1 year ago

Investigación sobre Herramientas para automatización de código:

FRONTEND


Java Script



  1. Angular JS

Es una herramienta de línea de comandos desarrollada por el equipo de Angular para simplificar y agilizar el proceso de desarrollo de aplicaciones web con el framework Angular.

Características Principales

Generación de Código Automatizada: Angular CLI permite generar automáticamente componentes, servicios, módulos, rutas y otros elementos esenciales de una aplicación Angular. Esto agiliza la creación de la estructura básica de la aplicación y mejora la productividad.

Gestión de Dependencias: Angular CLI maneja la instalación y administración de dependencias, lo que simplifica el proceso de mantener actualizadas las bibliotecas y paquetes utilizados en el proyecto.

Desarrollo en Tiempo Real: Angular CLI proporciona un servidor de desarrollo integrado con recarga en tiempo real (live reload), lo que significa que los cambios en el código se reflejarán instantáneamente en el navegador sin necesidad de recargar manualmente.

Optimización para Producción: La herramienta incluye funciones para compilar y optimizar la aplicación para entornos de producción, lo que resulta en una aplicación más rápida y eficiente.

Pruebas Automatizadas: Angular CLI integra herramientas para la ejecución y configuración de pruebas unitarias y de integración, lo que facilita la adopción de prácticas de desarrollo basadas en pruebas.

Generación de Proyectos: Angular CLI permite la creación de nuevos proyectos con una estructura organizada y coherente. También ofrece plantillas predefinidas para proyectos, como proyectos de aplicación única, proyectos de biblioteca y proyectos de aplicación de componente.

Ventajas

Productividad: Angular CLI acelera el proceso de desarrollo al proporcionar comandos sencillos para crear componentes, servicios y otros elementos. Esto reduce la necesidad de escribir manualmente código repetitivo.

Consistencia: La herramienta promueve la coherencia en la estructura y organización del proyecto, lo que facilita la colaboración en equipo y la comprensión del código.

Automatización: Angular CLI automatiza tareas como la compilación, optimización y pruebas, lo que ahorra tiempo y reduce la posibilidad de errores humanos.

Mejores Prácticas: Los proyectos generados por Angular CLI siguen las mejores prácticas recomendadas por el equipo de Angular, lo que garantiza que la aplicación esté bien estructurada y sea mantenible.

Desventajas

Curva de Aprendizaje: Aunque Angular CLI simplifica muchas tareas, puede haber una curva de aprendizaje inicial para comprender todos los comandos y opciones disponibles.

Menos Flexibilidad: Aunque la generación automática de código es útil, puede limitar la flexibilidad en ciertas situaciones en las que se requiere una personalización más específica.

Generación Excesiva: En proyectos pequeños, la generación automática de componentes y elementos podría ser excesiva, generando más código del necesario.

En general, Angular CLI es una herramienta esencial para el desarrollo de aplicaciones Angular, especialmente para proyectos medianos y grandes. Sus características y ventajas superan sus desventajas, y proporciona una forma eficiente y coherente de construir aplicaciones web modernas con Angular.

Prueba de funcionamiento

A través de la ejecución de algunos cuantos comandos, es posible crear un proyecto en Angular JS, con una configuración de archivos predeterminada:

image

Esta configuración viene con una interfaz predeterminada. A través de el comando "ng server" se puede correr de inmediato el proyecto y acceder a través del navegador:

image image

A través de otros comandos, es posible crear nuevos componentes que se enrutan automáticamente en el código y quedan disponibles para su consulta.

image image

La estructura de archivos es la que viene por defecto en Angular JS y es la que actualmente se utiliza en la OAS para la creación de nuevos clientes. Sin embargo, haría falta agregar otros archivos de configuración requeridos, según los lineamientos.

Para mas información, revisar: https://angular.io/cli



  1. Vue JS

Es una herramienta de línea de comandos diseñada para facilitar el desarrollo de aplicaciones web utilizando el framework Vue.js. Ofrece una serie de comandos y funcionalidades que simplifican la creación, configuración y despliegue de proyectos Vue de manera rápida y eficiente.

Características Principales

Creación de Proyectos: Vue CLI permite crear nuevos proyectos Vue desde cero con una estructura organizada y preconfigurada. Los proyectos generados incluyen una serie de características y configuraciones por defecto.

Desarrollo en Tiempo Real: Proporciona un servidor de desarrollo con recarga en tiempo real (live reload) que actualiza automáticamente la aplicación en el navegador cuando se realizan cambios en el código.

Configuración Personalizada: Vue CLI permite la personalización de las configuraciones del proyecto a través de un archivo de configuración (vue.config.js). Esto facilita la adaptación a las necesidades específicas del proyecto.

Gestión de Dependencias: Vue CLI administra las dependencias del proyecto y proporciona un sistema de construcción optimizado que separa las dependencias en el archivo final de JavaScript.

Generación de Componentes: Ofrece comandos para generar componentes, vistas, rutas y otros elementos necesarios en una aplicación Vue. Esto agiliza la creación de nuevas partes de la aplicación.

Soporte para Plugins: Vue CLI admite plugins que pueden extender sus capacidades y funcionalidades. Los plugins pueden agregar características como soporte para TypeScript, manejo de estilos y más.

Ventajas

Rápida Configuración: Vue CLI permite a los desarrolladores crear proyectos Vue en minutos, eliminando la necesidad de configurar manualmente las herramientas y dependencias.

Desarrollo Eficiente: El servidor de desarrollo en tiempo real facilita la visualización instantánea de los cambios en la aplicación sin necesidad de recargar el navegador.

Gestión de Dependencias Simplificada: Vue CLI maneja la administración de dependencias y la construcción optimizada, lo que simplifica el proceso de desarrollo y despliegue.

Personalización: Aunque Vue CLI ofrece configuraciones predefinidas, también permite la personalización a través del archivo vue.config.js, lo que brinda flexibilidad en las configuraciones del proyecto.

Comunidad Activa: Como parte del ecosistema Vue.js, Vue CLI es respaldado por una comunidad activa que contribuye con plugins y mejoras.

Desventajas

Curva de Aprendizaje: Si bien Vue CLI simplifica el desarrollo, aún puede requerir tiempo para familiarizarse con los comandos y conceptos.

Dependencia de la Herramienta: Al usar Vue CLI, estás dependiendo de una herramienta externa para el proceso de desarrollo, lo que podría ser una preocupación en algunos casos.

En resumen, Vue CLI es una herramienta valiosa para el desarrollo de aplicaciones Vue.js. Sus características, como la creación rápida de proyectos, el desarrollo en tiempo real y la gestión simplificada de dependencias, hacen que sea una opción sólida para desarrolladores que deseen trabajar con Vue.js de manera eficiente y organizada.

Prueba de funcionamiento

A través de la ejecución de algunos cuantos comandos, es posible crear un proyecto en Vue JS, con una configuración de archivos predeterminada:

image

Esta configuración viene con una interfaz predeterminada. A través de el comando "npm run server" o "vue serve" se puede correr de inmediato el proyecto y acceder a través del navegador:

image image

Otros comandos útiles que ofrece Vue CLI son:

image

La estructura de archivos es la que viene por defecto en Vue JS y es la que actualmente se utiliza en la OAS para la creación de nuevos clientes con Vue JS. Sin embargo, haría falta agregar otros archivos de configuración requeridos, según los lineamientos.

Adicionalmente, a través del comando "vue ui" se abre una nueva interfaz en el puerto 8080 en la cual se pueden adicionar y ajustar complementos, dependencias, tareas asociadas y configuraciones generales del proyecto.

image image image image

Para mas información, revisar: https://cli.vuejs.org/guide/



  1. React

Es una herramienta de línea de comandos que permite a los desarrolladores crear proyectos React desde cero sin la necesidad de configurar manualmente herramientas y dependencias. CRA crea un entorno de desarrollo listo para usar con las mejores prácticas recomendadas, lo que facilita la creación de aplicaciones React modernas y eficientes.

Características Principales

Configuración Cero: Con Create React App, no es necesario configurar manualmente herramientas como Babel, Webpack y otras dependencias. CRA maneja la configuración por ti, lo que te permite enfocarte en la escritura de código.

Entorno de Desarrollo Preconfigurado: CRA proporciona un servidor de desarrollo con recarga en tiempo real (live reload) que muestra instantáneamente los cambios realizados en el código. También incluye herramientas de depuración y control de errores.

Gestión de Dependencias Optimizada: CRA gestiona las dependencias y sus versiones para garantizar un flujo de trabajo coherente y predecible. También optimiza la construcción de la aplicación para un rendimiento óptimo.

Generación de Archivos Optimizada: Create React App crea automáticamente archivos optimizados y minimizados para la producción, lo que reduce el tamaño de los archivos y mejora el rendimiento de la aplicación.

Soporte para ES6+ y JSX: CRA es compatible con las características modernas de JavaScript (ES6+) y JSX, lo que permite utilizar sintaxis moderna en tus componentes React.

Gestión de Estilos: CRA permite importar archivos CSS directamente en tus componentes, lo que facilita la gestión de estilos en la aplicación.

Ventajas

Configuración Rápida: CRA elimina la necesidad de configurar manualmente herramientas de construcción y dependencias, lo que acelera el proceso de inicio del proyecto.

Desarrollo Eficaz: El servidor de desarrollo con recarga en tiempo real permite ver instantáneamente los cambios en el navegador, lo que mejora la eficiencia durante el desarrollo.

Actualizaciones Simplificadas: CRA se actualiza regularmente con las últimas versiones de React y otras dependencias, lo que facilita la adopción de las últimas características y mejoras.

Enfoque en el Código: Al eliminar la necesidad de configuración manual, CRA permite a los desarrolladores centrarse en escribir código y crear componentes.

Desventajas

Menos Flexibilidad: CRA oculta gran parte de la configuración, lo que podría limitar la personalización y flexibilidad en proyectos muy específicos.

Dependencia Externa: Al usar CRA, estás dependiendo de una herramienta externa, lo que podría ser una preocupación en ciertos escenarios.

Curva de Aprendizaje: Si bien CRA simplifica la configuración, todavía puede haber una curva de aprendizaje para comprender su estructura y características.

En resumen, Create React App es una herramienta valiosa para el desarrollo de aplicaciones React, especialmente para proyectos pequeños y medianos. Sus características, como la configuración cero y el entorno de desarrollo preconfigurado, hacen que sea una opción popular para desarrolladores que buscan crear aplicaciones React de manera rápida y eficiente.

Prueba de funcionamiento

A través de la ejecución de algunos cuantos comandos, es posible crear un proyecto en React, con una configuración de archivos predeterminada:

image

Esta configuración viene con una interfaz predeterminada. A través de el comando "npm start" se puede correr de inmediato el proyecto y acceder a través del navegador:

image image

La estructura de archivos es la que viene por defecto en React. Actualmente no se implementan proyectos de JS en este framework en la OAS para la creación de nuevos clientes. Sin embargo, en caso de que se utilice, haría falta agregar otros archivos de configuración requeridos, según los lineamientos.

Adicionalmente, a través del comando "npm test" realiza pruebas automatizadas a los componentes del proyecto:

image

De forma nativa, Create React App no posee comandos específicos para la creación de componentes dentro del proyecto de forma automática, sin embargo, existen complementos que se pueden instalar para esta tarea.

Además, Create React App permite crear proyectos completos a través de plantillas definidas previamente, lo cual es una ventaja para la automatización de código. En este caso, se creo un proyecto react, con una plantilla de TypeScript:

image image

Para mas información, revisar: https://create-react-app.dev/docs/documentation-intro



BACKEND

  1. GO


  1. Python

La creación de proyectos web en Python mediante frameworks como Flask o Django es un proceso relativamente sencillo que implica la ejecución de comandos específicos de cada framework. Estos comandos se encargan de establecer la estructura base de archivos del proyecto.

Para agilizar y simplificar la generación de código en el proyecto, existen diversas herramientas diseñadas específicamente para el lenguaje Python. Estas herramientas no solo aceleran el proceso de desarrollo, sino que también contribuyen a mantener un código limpio y coherente, conforme a las mejores prácticas de programación. A continuación, se enumeran algunas de estas herramientas:

Para generar un docstring, simplemente coloque el cursor dentro de la función o clase que desea documentar. Luego, presione Ctrl+Shift+P y escriba "Python Docstring Generator". La extensión le presentará un menú de opciones para elegir el tipo de docstring que desea generar.

La extensión colorea los diferentes niveles de indentación con diferentes colores. Por ejemplo, el código indentado en un nivel se coloreará en rojo, el código indentado en dos niveles se coloreará en verde, y así sucesivamente.

El linter puede ayudar a identificar errores y problemas de estilo en su código Django. El depurador puede ayudarle a depurar su código Django paso a paso. El explorador de variables puede ayudarle a ver las variables que están disponibles en su código Django. El explorador de pruebas puede ayudarle a ejecutar sus pruebas de unidad de Django.

La extensión incluye fragmentos de código para funciones comunes, como render_template() y request.get(). También incluye fragmentos de código para vistas, plantillas y rutas.

La extensión incluye fragmentos de código para funciones comunes, como print() y len(). También incluye fragmentos de código para bucles, condicionales y excepciones.

El linter utiliza reglas predefinidas para identificar problemas en su código. También puede personalizar el linter para que siga sus propias reglas.

La extensión incluye fragmentos de código para funciones comunes, como render_template() y request.get(). También incluye fragmentos de código para vistas, plantillas y rutas.

Para utilizar Django Snippets, simplemente escriba la abreviatura del fragmento de código que desea utilizar. Por ejemplo, para insertar un fragmento de código para una vista, escriba view. La extensión completará el fragmento de código por usted.



GENERALES

  1. Yeoman

Te ayuda a iniciar nuevos proyectos, prescribiendo las mejores prácticas y herramientas para ayudarte a mantener la productividad.

Para hacerlo, proporciona un ecosistema de generadores. Un generador es básicamente un complemento que se puede ejecutar con el comando yo para crear proyectos completos o partes útiles.

A través de los Generadores oficiales, promueve el "flujo de trabajo Yeoman". Este flujo de trabajo es un conjunto sólido y con opciones, que comprende herramientas y marcos de trabajo que pueden ayudar a los desarrolladores a crear rápidamente hermosas aplicaciones web. Proporciona todo lo necesario para comenzar sin ninguno de los dolores de cabeza normales asociados con una configuración manual.

Con una arquitectura modular que puede escalar de manera nativa, aprovecha el éxito y las lecciones aprendidas de varias comunidades de código abierto para asegurarse de que los desarrolladores lo utilicen de la manera más inteligente posible.

Yeoman incluye soporte para linting, pruebas, minificación y mucho más, para que los desarrolladores puedan concentrarse en soluciones en lugar de preocuparse por los detalles pequeños.

Características Principales

Generación Automatizada: Yeoman permite generar automáticamente estructuras de proyectos, archivos y componentes utilizando generadores predefinidos. Estos generadores incluyen plantillas que siguen las mejores prácticas y convenciones.

Personalización: Aunque Yeoman ofrece plantillas prediseñadas, también es altamente personalizable. Puedes crear tus propios generadores y ajustar los existentes para adaptarlos a las necesidades de tu proyecto.

Gestión de Dependencias: Yeoman puede manejar la instalación de dependencias y bibliotecas necesarias para tu proyecto, lo que reduce la posibilidad de errores de configuración.

Integración con CLIs de Frameworks: Yeoman se puede integrar con los CLIs (Command Line Interfaces) de diferentes frameworks, como Angular CLI, Vue CLI y otros, para generar código personalizado en combinación con las funcionalidades del framework.

Generadores Comunitarios: Existe una comunidad activa que contribuye con generadores personalizados para diferentes tecnologías y patrones de desarrollo, lo que amplía las capacidades de Yeoman.

Ventajas

Productividad: Yeoman agiliza la configuración inicial y la creación de componentes comunes, lo que ahorra tiempo en el proceso de desarrollo.

Consistencia: Al generar automáticamente estructuras y componentes, Yeoman garantiza una estructura coherente en todos los proyectos y mejora la colaboración en equipo.

Mejores Prácticas: Los generadores de Yeoman a menudo siguen las mejores prácticas recomendadas por la comunidad, lo que mejora la calidad del código.

Aprendizaje Rápido: Incluso si eres nuevo en un framework o tecnología, Yeoman puede ayudarte a establecer la estructura correcta y empezar a escribir código de manera efectiva.

Desventajas

Curva de Aprendizaje: Si bien Yeoman es relativamente fácil de usar, todavía hay una curva de aprendizaje para comprender cómo funcionan los generadores y cómo personalizarlos.

Dependencia Externa: Al usar Yeoman, estás confiando en una herramienta externa para generar tu código, lo que podría ser una preocupación en ciertos escenarios.

Generación Excesiva: En proyectos pequeños o simples, la generación automática podría ser más de lo necesario y generar código innecesario.

En resumen, Yeoman es una herramienta poderosa para la generación de código automatizada y es especialmente útil en proyectos donde se requiere una estructura coherente y componentes comunes. Sus características y ventajas hacen que sea una opción valiosa para desarrolladores que buscan mejorar la eficiencia y la calidad en el proceso de desarrollo.

Para mas información, revisar: https://yeoman.io/



  1. Hygen

Es una herramienta de línea de comandos que permite la generación automatizada de código y archivos basados en plantillas configurables. A diferencia de otras herramientas como Yeoman, Hygen se centra en proporcionar una solución simple y flexible para la generación de código sin introducir una complejidad excesiva.

Características Principales

Plantillas Configurables: Hygen permite definir plantillas de código personalizadas utilizando una sintaxis sencilla. Estas plantillas pueden incluir variables, condicionales y ciclos para generar código dinámico.

Automatización de Tareas Comunes: Con Hygen, puedes automatizar tareas comunes como la creación de componentes, módulos, controladores y otros elementos de la aplicación.

Personalización Flexible: Hygen permite la personalización completa de las plantillas y las reglas de generación. Puedes adaptar la generación de código a las convenciones y patrones de tu proyecto.

Soporte para Diferentes Lenguajes y Marcos: Hygen puede utilizarse para proyectos en varios lenguajes de programación y frameworks, lo que lo hace versátil y adecuado para diferentes entornos.

Generación de Estructuras de Proyecto: Además de la generación de componentes individuales, Hygen puede utilizarse para crear estructuras de directorios y archivos en proyectos.

Ventajas

Flexibilidad y Simplicidad: Hygen ofrece una manera sencilla de crear y administrar plantillas de código personalizadas, lo que brinda flexibilidad sin la necesidad de configuraciones complejas.

Enfoque en la Automatización: Hygen está diseñado específicamente para la generación automatizada de código y estructuras de proyecto, lo que lo hace eficaz en la automatización de tareas repetitivas.

Compatibilidad con Proyectos Existentes: Puedes integrar Hygen en proyectos existentes y adaptar las plantillas para que coincidan con las convenciones de tu proyecto.

Desventajas

Menos Automatización Compleja: A diferencia de herramientas como Yeoman, Hygen puede ser menos adecuado para proyectos que requieren automatización de tareas más complejas y configuraciones detalladas.

Dependencia Externa: Al utilizar Hygen, estás confiando en una herramienta externa para la generación de código, lo que podría ser una preocupación en ciertos escenarios.

En resumen, Hygen es una herramienta simple y flexible para la generación de código automatizada y estructuras de proyecto. Sus características y ventajas lo hacen adecuado para desarrolladores que buscan automatizar tareas repetitivas y personalizar la generación de código de acuerdo con las necesidades de sus proyectos. Sin embargo, es importante considerar si la herramienta se ajusta a las complejidades y requerimientos específicos de tus proyectos antes de su adopción.

Para mas información, revisar: https://www.hygen.io/



HERRAMIENTAS DE APOYO CON IA

  1. BITO

BITO es una extensión gratuita de Visual Studio Code que te permite usar ChatGPT, un modelo de inteligencia artificial que genera código, explica código, crea pruebas y más.

Ventajas:

Desventajas:

Prueba de funcionamiento

image image image image

BITO presenta una sección de plantillas, las cuales sirven para analizar el código de tu aplicación:

image

En el siguiente caso, se analiza el código de main.js con la plantilla "Style Check". La herramienta menciona las sugerencias de corrección de estilo tanto en comentarios, como directamente en el código.

image

Adicionalmente, tiene otras funciones como comentar el código, realizar pruebas unitarias, revisar rendimiento, etc.

  1. Black Box

Es una extensión de VS Code que ofrece generación de código, chat de código y búsqueda de código con inteligencia artificial.

Características principales:

Ventajas:

Desventajas:

Prueba de funcionamiento

Permite realizar preguntas al interior del código, realizando un comentario y terminandolo con "?"

image

Tambien permite realizar consultas directas a través del chat:

image

  1. Codeium

Es una herramienta gratuita de aceleración de código basada en inteligencia artificial que ofrece capacidades de autocompletado de código en más de 70 lenguajes de programación.

Características principales:

Ventajas:

Desventajas:

Prueba de funcionamiento

image image

Codeium crea recomendaciones al interior de tu código, lo cual es beneficioso para refactorizar y autocompletar en algunos casos:

Sin título

  1. Tabnine

Es una extensión de VS Code que ofrece autocompletado de código basado en inteligencia artificial en más de 30 lenguajes de programación.

Características principales

Ventajas:

Desventajas:

Prueba de funcionamiento

Sin título Sin título Sin título

En general, esta herramienta permite autocompletar código, realizando sugerencias según el contexto. Adicionalmente, interpreta el lenguaje natural en los comentarios y sugiere código con base en el mismo.

  1. AWS CodeWhisperer

Es una herramienta de codificación de inteligencia artificial que acelera y mejora el desarrollo de software. Es una extensión de VS Code que se conecta con el AWS Toolkit y ofrece sugerencias de código en tiempo real basadas en el aprendizaje automático. CodeWhisperer analiza el código y los comentarios existentes y genera recomendaciones que se adaptan al contexto, al estilo y a las necesidades del desarrollador. También ayuda a utilizar los servicios de AWS de forma más eficiente al proporcionar sugerencias de código optimizadas para las API de AWS.

Características principales:

Ventajas:

Desventajas:

Prueba de funcionamiento

Sin título

No hay mucho que mostrar de esta herramienta. Solo ofrece la función de autocompletar código linea por linea.

  1. Codex
  2. Intellicode
  3. AskCode
milo19980525 commented 1 year ago

@a52290451 Realizar la presentación de las herramientas encontradas (al mismo estilo de X-Ray).

a52290451 commented 1 year ago

Presentación de Herramientas para Automatización de Código:

https://gamma.app/docs/Herramientas-de-Automatizacion-de-Codigo-sf6x4to9ud76hyb