Angel(2)Cabrera

Cómo mejorar la interacción con IA en proyectos de desarrollo

Gracias por darme amor compartiendo en tu app favorita:

Dominando la interacción con IA en proyectos de desarrollo para programadores junior

En el vertiginoso mundo del desarrollo de software, la capacidad de mantener un contexto claro y actualizado del proyecto no es solo una buena práctica; es una necesidad fundamental para evitar errores, disparar la productividad y, lo más importante, colaborar eficazmente con las herramientas de Inteligencia Artificial. A medida que integran IAs como ChatGPT en su flujo de trabajo, la clave está en saber cómo estructurar y compartir la información crucial del proyecto de manera eficiente.

Este artículo es una maxi-guía práctica. Les presentaremos una plantilla para documentar el contexto de su proyecto, diseñada para que la colaboración con asistentes de IA sea fluida y sus respuestas, increíblemente precisas y útiles para su stack (HTML, CSS, JS, Angular, Cordova, PHP, SQL, CodeIgniter 4).

La importancia crucial del contexto en el desarrollo con IA

Uno de los mayores desafíos al trabajar con modelos de IA como ChatGPT es la temida «pérdida de contexto». Imaginen esto: están charlando con un compañero sobre su código. Él recuerda lo que hablaron hace cinco minutos. La IA, no. A diferencia de una conversación humana fluida, donde el interlocutor retiene los detalles previos, la IA necesita que le proporcionen explícitamente la información relevante en cada interacción.

Esto se vuelve crítico en proyectos complejos, como los que ya están manejando: con múltiples archivos en Angular y CodeIgniter, variables con nombres específicos, convenciones de código y decisiones técnicas clave que han tomado. Sin un contexto claro y actualizado, la IA es como un junior brillante pero desinformado: puede cometer errores garrafales al sugerir cambios, nombres de variables o estructuras de código. El resultado: confusión, retrabajo y frustración.

¿Por qué la IA «olvida» y cómo funciona su memoria?

Los modelos de IA actuales, por razones técnicas (limitaciones de memoria del «cerebro» del modelo) y de privacidad, no mantienen una memoria permanente de las conversaciones pasadas. Cada vez que interactúan, el modelo recibe un «prompt», que es como un «ticket de encargo» que incluye un fragmento limitado de texto: el contexto. La IA genera su respuesta basándose ÚNICAMENTE en lo que está en ese ticket. Si no le dan el panorama general o los detalles esenciales, es como si cada pregunta que hacen fuera la primera. Empieza de cero.

La solución práctica: Un archivo de contexto estructurado y dinámico

Para minimizar esta pérdida de contexto y convertir la IA en su mejor aliado, la práctica más efectiva es mantener un archivo de contexto. Piensen en él como el «manual de operaciones» de su proyecto para la IA.

Este archivo debe documentar:

  • La estructura completa del proyecto: No solo las carpetas raíz, sino también subcarpetas clave, archivos importantes, dónde están sus componentes de Angular, sus controladores y modelos de CodeIgniter.
  • Convenciones de código: ¿Usan camelCase, snake_case? ¿Cómo nombran sus clases CSS o sus servicios de Angular? ¿Siguen una convención específica en PHP?
  • Clases y funciones principales: Describan brevemente las clases más importantes de su backend (PHP/CodeIgniter) y los componentes/servicios clave de su frontend (Angular).
  • Decisiones arquitectónicas clave: Por ejemplo, «usamos un enfoque de componentes en Angular», «la base de datos es MySQL y usamos el ORM de CodeIgniter».
  • Estado actual y tareas pendientes: «¿Estamos desarrollando la sección de usuarios?», «Necesitamos implementar la validación de formularios».
  • Otros detalles relevantes: Versiones de librerías (Angular 17, PHP 8.2, CodeIgniter 4.x), librerías externas que usan, dependencias específicas.

Este archivo debe ser:

  • Fácil de actualizar: No tiene que ser un documento formal e intimidante. Un simple .txt o .md es perfecto.
  • Conciso pero completo: Lo suficientemente detallado para ser útil, pero no tan largo que «inunde» a la IA o consuma demasiados «tokens» (la medida de la memoria de la IA).

Beneficios concretos para los programadores

Adoptar esta estrategia de contexto les traerá ventajas significativas:

  1. Facilita que la IA entienda su proyecto rápidamente: Ya no tendrán que explicar la misma estructura una y otra vez.
  2. Reduce errores y malentendidos en las respuestas: La IA les dará código y sugerencias que realmente se ajustan a su proyecto.
  3. Permite consultas más precisas y eficientes: Podrán preguntar cosas como: «Basado en nuestro modelo de Usuario en CI4, ¿cómo creo un método actualizarContraseña que use hash?»
  4. Evita tener que enviar grandes volúmenes de código innecesario: Si la IA ya conoce su contexto, solo tendrán que enviar el fragmento de código relevante para su pregunta específica.
  5. Les ayuda a mantener documentación viva y útil: El archivo de contexto se convierte en una referencia valiosa no solo para la IA, sino también para ustedes mismos y futuros compañeros de equipo.

Plantilla para tu archivo de contexto (con ejemplos para tu stack)

Aquí tienen una plantilla detallada que pueden usar. No es necesario que sea un .md o Notion; un simple .txt en la raíz de su proyecto puede servir.

¡La clave es que sea vivo y se actualice! resolver esta necesidad.

Contexto del Proyecto: [Nombre de tu Proyecto]

1. Resumen General del Proyecto

Describe brevemente el propósito principal del proyecto y su estado actual.

Propósito: [Ej: Sistema de gestión de inventario para pequeña empresa]

Estado: [Ej: Desarrollo de módulos de autenticación y CRUD de productos]

Tecnologías Principales:

- Frontend: Angular [version], HTML, CSS, JavaScript (ES6+), Cordova.
- Backend: PHP [version], CodeIgniter [version], MySQL.

2. Estructura de Carpetas y Archivos Clave

Muestra la estructura relevante de tus directorios y algunos archivos importantes.

.
├── backend/
│   ├── app/
│   │   ├── Config/              # Archivos de configuración de CI4
│   │   ├── Controllers/         # Controladores de CI4 (Ej: UserController.php)
│   │   ├── Models/              # Modelos de base de datos de CI4 (Ej: ProductModel.php)
│   │   ├── Views/               # Vistas de CodeIgniter
│   │   └── ...
│   ├── public/                  # Punto de entrada de CI4
│   └── ...
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/      # Angular (Ej: product-list/product-list.component.ts)
│   │   │   ├── services/        # Servicios de Angular (Ej: auth.service.ts)
│   │   │   ├── models/          # Interfaces y modelos TypeScript (Ej: user.interface.ts)
│   │   │   ├── app-routing.module.ts # Rutas de Angular
│   │   │   └── ...
│   │   ├── assets/
│   │   ├── environments/
│   │   └── ...
│   ├── angular.json
│   ├── package.json
│   └── ...
├── cordova/                     # Si usan Cordova, estructura sus carpetas aquí
│   ├── platforms/
│   ├── plugins/
│   ├── www/                     # Aquí iría la build de Angular para Cordova
│   └── config.xml
└── README.md

3. Clases, Componentes y Funciones Principales

Describe las entidades más importantes y su rol.

Backend (PHP/CodeIgniter)

UserModel.php: Gestiona la interacción con la tabla usuarios (CRUD, autenticación).

ProductController.php: Maneja las peticiones HTTP relacionadas con productos (listado, creación, actualización, eliminación).

Database.php (CI Config): Contiene la configuración de la conexión a la base de datos.

AuthFilter.php (CI Filter): Filtro de ruta para proteger rutas con autenticación JWT.

Frontend (Angular)

AppComponent: Componente raíz de la aplicación.

AuthService: Servicio para manejar la lógica de autenticación (login, logout, tokens JWT).

ProductListComponent: Componente que muestra el listado de productos desde la API.

ProductDetailComponent: Componente para ver o editar un producto específico.

SharedModule: Módulo que contiene componentes y pipes reutilizables en toda la aplicación.

4. Modelos de Base de Datos y Relaciones (MySQL/SQL)

Lista las tablas principales y sus relaciones.

usuarios: id, nombre, email, password_hash, rol_id (FK a roles)

productos: id, nombre, descripcion, precio, stock, categoria_id (FK a categorias)

categorias: id, nombre

Relaciones:

usuarios M:1 roles

productos M:1 categorias

5. Convenciones Internas y Estilos

Reglas de codificación específicas de tu equipo o proyecto.

Nomenclatura PHP: Clases en PascalCase, funciones en camelCase, variables en snake_case.

Nomenclatura JS/TS: Variables y funciones en camelCase, clases en PascalCase.

Estilos CSS: Usamos SCSS. Convención BEM para clases.

Commit Messages: Usamos Conventional Commits (Ej: feat: add user login).

6. Decisiones y Restricciones Importantes

Cualquier decisión de diseño o limitación a tener en cuenta.

Autenticación: JWT (JSON Web Tokens) para API REST.

Estado Global Angular: Usamos [Ej: NgRx / Servicios simples de Angular] para el manejo de estado.

Responsive Design: La aplicación debe ser completamente responsive y compatible con Cordova.

Validación Backend: Toda la validación de datos se hace en el backend con las reglas de validación de CodeIgniter 4.

7. Tareas Pendientes o Áreas de Enfoque Actual

Lo que están trabajando o lo que sigue.

Implementar pasarela de pago para pedidos.

Optimizar consultas SQL en ProductModel para búsquedas grandes.

Refactorizar AuthService en Angular para usar HttpClient Interceptors.

Ejemplos prácticos de interacción (¡con tu stack!)

Mal Contexto: «Escribe un componente de producto.» (Resultado: HTML/JS genérico que no encaja con Angular o tus convenciones).

Buen Contexto (usando el archivo): (Copias tu sección de «Frontend/src/app/components/» y «Convenciones Internas»). «Necesito un nuevo componente de Angular llamado cart-item que muestre el nombre del producto, cantidad y precio, y tenga un botón para eliminar. Sigue nuestras convenciones de nomenclatura y estructura.»

Resultado esperado: Un cart-item.component.ts, cart-item.component.html, cart-item.component.css con la estructura base de Angular, variables en camelCase y quizás hasta un Input() para el ítem del carrito.

Mal Contexto: «Hazme una consulta para traer usuarios.» (Resultado: SQL plano que no usa el Query Builder de CI4, o sin filtros de seguridad).

Buen Contexto (usando el archivo): (Copias tu sección de «Modelos de DB/usuarios» y «Clases principales/UserModel»). «En UserModel.php de CodeIgniter 4, necesito un método getUsersByRole($roleId) que use el Query Builder para traer todos los usuarios con un rol_id específico.»

Resultado esperado: Un método getUsersByRole($roleId) dentro de tu UserModel usando $this->db->table('usuarios')->where('rol_id', $roleId)->get()->getResultArray();.

Gestión del contexto: Vivo y evolutivo

Actualización Constante: Designen a alguien para que, al final de cada sesión de trabajo, revise y actualice el archivo de contexto con los nuevos componentes, funciones o decisiones importantes. ¡Es parte del control de versiones!

Versionado con Git: Traten el archivo de contexto como cualquier otro archivo de código. Súbanlo a su repositorio Git. Cuando hagan un git pull, ¡también obtendrán la última versión del contexto!

Contexto «Just-in-Time»: No siempre tienen que pegar todo el archivo. Para preguntas muy específicas, aprendan a seleccionar solo las secciones relevantes. Por ejemplo, si preguntan sobre una función en AuthService, solo copien la descripción de AuthService y las convenciones de TypeScript.

Tipos de interacciones avanzadas con IA

¡No solo pedir código!

Depuración Asistida: «Estoy recibiendo un error ‘Undefined property: Model::$db’ en mi ProductModel.php al intentar guardar. Aquí está el código del modelo y mi controlador. ¿Qué estoy haciendo mal, considerando que estamos en CI4?»

Refactorización y Mejora: «Mi componente ProductListComponent está muy grande. Aquí está su código y el contexto de nuestro proyecto. ¿Puedes sugerir formas de refactorizarlo o dividirlo en subcomponentes?»

Generación de Pruebas: «Necesito escribir una prueba unitaria para el método login de mi AuthService en Angular. Aquí está el código del servicio y el contexto de cómo manejamos las pruebas.»

Explicación de Código Ajeno: «Encontré este código PHP de un compañero en OrderController.php. ¿Puedes explicarme qué hace exactamente este bucle foreach y por qué se usa $this->db->transStart() aquí, en el contexto de CodeIgniter?»

Ética, seguridad y limitaciones

¡Sean programadores críticos!
  • Verificación Humana es Obligatoria: La IA es una herramienta increíble, pero no es un reemplazo. TODO el código generado por IA debe ser revisado, entendido y probado por ustedes. ¡La IA «alucina» (inventa cosas) más de lo que creen!
  • Sesgos y Errores de la IA: Las IAs aprenden de datos existentes, y esos datos pueden tener sesgos o errores. El código que generen podría no ser siempre el más optimizado, seguro o correcto.
  • Privacidad y Datos Sensibles: ¡NUNCA compartan información sensible de clientes, credenciales de bases de datos o secretos de API directamente con una IA pública! Si su empresa usa soluciones de IA privadas, pregunten sobre sus políticas.
  • Derechos de Autor y Licencias: Es un área gris. El código generado por IA es un remix de lo que ha aprendido. Sean conscientes de las licencias de las librerías y fragmentos que la IA podría «inspirarse».

Herramientas y prompts efectivos

Extensiones IDE: Si usan VS Code, prueben extensiones como GitHub Copilot. Estas herramientas ya integran parte del «contexto automático» al estar directamente en su editor.

La Ingeniería de Prompts: Dominar la forma de preguntar es casi tan importante como el contexto.

  • Sé Específico: «Genera la interfaz TypeScript IProduct con id: number, name: string, price: number.»
  • Define Roles: «Actúa como un experto en seguridad de CodeIgniter. Revisa esta función de login y dime vulnerabilidades.»
  • Formato de Salida: «Dame la respuesta en formato JSON.» o «Dame solo el bloque de código, sin explicaciones.»

Con este enfoque, la interacción con la IA en sus proyectos de desarrollo no solo será mucho más fluida y precisa, sino que también les permitirá aprender de forma más profunda, ahorrar tiempo valioso y reducir errores.

¡Están en el camino correcto para convertirse en programadores 3.0!