Construye tu primera aplicación con IA

1. Objetivos de la semana

2. El nuevo ciclo de desarrollo

REQUISITO
    ↓
ANÁLISIS
    ↓
PLAN
    ↓
IA
    ↓
IMPLEMENTACIÓN
    ↓
EJECUCIÓN
    ↓
PRUEBAS
    ↓
ERROR
    ↓
DEBUGGING
    ↓
CORRECCIÓN
    ↓
REVISIÓN
    ↓
REFACTOR
    ↓
NUEVO REQUISITO

IA propone
    ↓
TÚ EVALÚAS
    ↓
IA IMPLEMENTA
    ↓
TÚ VALIDAS

3. Proyecto práctico: TaskFlow

3.1 Funcionalidades iniciales

TaskFlow
│
├── Dashboard
│
├── Tareas
│   ├── Ver
│   ├── Crear
│   ├── Editar
│   ├── Completar
│   └── Eliminar
│
├── Proyectos
│
└── Filtros

3.2 El MVP

No construiremos todo desde el principio.

Nuestro primer MVP será:

Crear tarea
     ↓
Ver tareas
     ↓
Completar tarea

4. Preparar el entorno de trabajo

Antes de escribir código necesitamos organizar el proyecto.

taskflow/
│
├── README.md
├── REQUIREMENTS.md
├── ARCHITECTURE.md
├── AI_RULES.md
├── CHANGELOG.md
│
├── src/
│
├── tests/
│
└── docs/

4.1 README.md

El README explica qué es el proyecto y cómo utilizarlo.

PROMPT
Actúa como Technical Writer.

Crea un README.md para una aplicación
llamada TaskFlow.

La aplicación permite gestionar tareas
y proyectos.

Incluye:

- descripción
- funcionalidades
- arquitectura
- instalación
- ejecución
- tests
- estructura del proyecto

No inventes información técnica
que no te haya proporcionado.

4.2 ARCHITECTURE.md

Este documento describe cómo está construida la aplicación.

Usuario
   ↓
Frontend
   ↓
API
   ↓
Backend
   ↓
Base de datos

4.3 AI_RULES.md

Este archivo contiene reglas que la IA deberá respetar.

# AI DEVELOPMENT RULES

1. No modificar archivos innecesariamente.

2. No introducir nuevas dependencias
   sin justificarlo.

3. No cambiar la arquitectura
   sin solicitar aprobación.

4. No eliminar funcionalidades existentes.

5. Escribir tests para funcionalidades nuevas.

6. Explicar los cambios realizados.

7. No inventar APIs.

8. No introducir credenciales.

9. Priorizar soluciones simples.

10. Mantener separación de responsabilidades.

5. Contexto vs. Prompt

Una de las habilidades más importantes que aprenderás es diferenciar el contexto del proyecto de la tarea concreta.

CONTEXTO DEL PROYECTO
        +
TAREA ACTUAL

CONTEXTO:

TaskFlow es una aplicación de gestión
de tareas.

Arquitectura:

Frontend → API → Backend → DB

Reglas:

- no modificar arquitectura;
- no añadir dependencias sin justificar;
- escribir tests.

TAREA:

Implementar la creación de tareas.

Primer prompt del proyecto

Analiza el proyecto existente.

Lee:

- README.md
- REQUIREMENTS.md
- ARCHITECTURE.md
- AI_RULES.md

Resume:

1. Qué estamos construyendo.
2. Qué funcionalidades existen.
3. Qué arquitectura utilizamos.
4. Qué restricciones debemos respetar.

No modifiques ningún archivo.

6. Primer desarrollo

6.1 Requisito

Vamos a implementar la creación de una tarea.

Título
Descripción
Prioridad
Fecha límite

[Crear]

6.2 Requisitos

• El título es obligatorio.
• La descripción es opcional.
• La prioridad puede ser LOW, MEDIUM o HIGH.
• El estado inicial será PENDING.

6.3 Primer prompt

Vamos a implementar la funcionalidad
"Crear tarea".

Contexto:

TaskFlow es una aplicación de gestión
de tareas.

La entidad Task tiene:

- id
- title
- description
- priority
- status
- dueDate
- createdAt

Requisitos:

- title obligatorio.
- description opcional.
- priority: LOW, MEDIUM, HIGH.
- status inicial: PENDING.

Antes de escribir código:

1. Analiza los requisitos.
2. Identifica los componentes necesarios.
3. Identifica validaciones.
4. Identifica posibles casos límite.
5. Propón un plan de implementación.

No escribas código todavía.

6.4 Segundo prompt

Implementa el plan anterior.

Condiciones:

- realiza únicamente los cambios necesarios;
- no modifiques la arquitectura;
- no añadas dependencias;
- mantén el código sencillo;
- añade tests.

Antes de finalizar:

1. Revisa los cambios.
2. Comprueba errores.
3. Explica qué archivos has modificado.
4. Explica cómo probar la funcionalidad.

7. Debugging con IA

En algún momento aparecerá un error.

Esto no significa que la IA haya "fallado". Forma parte normal del desarrollo.

Cannot read properties of undefined

Arréglalo.

Prompt de debugging

Tenemos un error al crear una tarea.

Error:

Cannot read properties of undefined

Comportamiento esperado:

Al pulsar "Crear", la tarea
debería guardarse y aparecer en la lista.

Comportamiento actual:

La aplicación muestra un error.

Código relevante:

[PEGAR CÓDIGO]

Analiza:

1. Qué significa el error.
2. Qué componente parece causarlo.
3. Posibles causas.
4. Cómo verificar cada hipótesis.
5. Solución recomendada.

No modifiques código todavía.

El ciclo correcto

Error
 ↓
Hipótesis
 ↓
Investigación
 ↓
IA
 ↓
Comprobación
 ↓
Solución
 ↓
Test

Ejercicio 1 — Provocar un error

Modifica deliberadamente una funcionalidad de TaskFlow.

Después utiliza IA para encontrar el problema.

Documenta:

Problema:
...

Hipótesis:
...

Investigación:
...

Solución:
...

Test:
...

Qué aprendí:
...

8. Casos límite

Una aplicación no debe probarse únicamente con datos normales.

Prompt

Analiza la funcionalidad de creación de tareas.

Identifica todos los casos límite
que deberíamos probar.

Incluye:

- entradas vacías;
- entradas demasiado largas;
- caracteres especiales;
- valores inválidos;
- fechas;
- estados;
- errores de persistencia;
- problemas de autorización;
- datos inesperados.

Clasifica los casos por prioridad.

Ejercicio 2

Genera al menos 15 casos límite para TaskFlow.

Clasifícalos como:

• Crítico
• Alto
• Medio
• Bajo

9. Testing con IA

La IA puede ayudarnos a diseñar y generar pruebas.

Genera tests para la funcionalidad
"Crear tarea".

Incluye:

1. Caso correcto.
2. Título vacío.
3. Prioridad inválida.
4. Fecha inválida.
5. Datos demasiado largos.
6. Error de persistencia.
7. Petición duplicada.

Explica qué valida cada test.

test("crear tarea", () => {
    expect(true).toBe(true);
});

Prompt para revisar tests

Revisa estos tests.

Para cada uno indica:

- qué comportamiento comprueba;
- si realmente valida el requisito;
- si podría pasar aunque el código estuviera roto;
- qué casos faltan.

No modifiques los tests todavía.

Ejercicio 3 — Matriz de pruebas

Crea una matriz para la funcionalidad de creación de tareas.

10. Code Review con IA

Una IA puede actuar también como Tech Lead.

Actúa como Tech Lead.

Revisa la implementación de TaskFlow.

Evalúa:

- arquitectura;
- legibilidad;
- mantenibilidad;
- duplicación;
- complejidad;
- manejo de errores;
- seguridad;
- validaciones;
- tests;
- rendimiento.

No modifiques código.

Genera un informe con:

CRÍTICO
ALTO
MEDIO
BAJO

Para cada problema explica:

- qué ocurre;
- por qué es un problema;
- cómo solucionarlo.

La IA puede encontrar problemas que tú no ves

Pero tampoco debes aceptar automáticamente sus recomendaciones.

¿Por qué necesitamos estas dependencias?

¿Qué problema resuelve cada una?

¿Podemos implementar esta funcionalidad
sin añadir dependencias?

¿Qué impacto tienen en:

- seguridad;
- mantenimiento;
- rendimiento;
- tamaño;
- licencias?

11. Refactorización

Una vez detectados problemas podemos pedir a la IA que refactorice.

Refactoriza únicamente
los problemas 2 y 4.

No modifiques:

- API;
- comportamiento;
- modelo de datos;
- funcionalidades.

Después ejecuta/revisa los tests.

Refactoriza todo.

12. Git como red de seguridad

Cuando trabajamos con IA, Git se vuelve especialmente importante.

VERSIÓN FUNCIONAL
       ↓
     COMMIT
       ↓
EXPERIMENTO CON IA
       ↓
¿FUNCIONA?
   ↙       ↘
 SÍ        NO
 ↓          ↓
COMMIT    REVERT

Antes de un cambio importante, crea un punto de recuperación.

git status
git add .
git commit -m "Estado funcional antes de nueva funcionalidad"

13. Utilizar IA para revisar UX

La IA no solamente sirve para escribir código.

Actúa como UX Designer.

Revisa la interfaz de TaskFlow.

Evalúa:

- claridad;
- jerarquía visual;
- facilidad de uso;
- mensajes de error;
- estados vacíos;
- feedback;
- accesibilidad;
- responsive.

Propón mejoras.

No modifiques código todavía.

Estados que debemos contemplar

LOADING
EMPTY
ERROR
SUCCESS
DISABLED
NO RESULTS

Ejemplos

14. Primer contacto con seguridad

No vamos a convertir esta semana en un curso de ciberseguridad, pero desde el primer proyecto debemos desarrollar el hábito de revisar seguridad.

Analiza esta funcionalidad
desde el punto de vista de seguridad.

Busca:

- inyección;
- XSS;
- autorización;
- validación;
- exposición de información;
- datos sensibles;
- errores;
- dependencias.

No modifiques código todavía.

Una referencia fundamental es OWASP Top 10.

15. Mini proyecto individual

Ahora debes construir una aplicación diferente de TaskFlow.

Ideas

Fase 1 — Definición

Problema:
...

Usuarios:
...

Objetivo:
...

Funcionalidades:
...

MVP:
...

Fase 2 — Documentación

Crea:

README.md
REQUIREMENTS.md
ARCHITECTURE.md
AI_RULES.md

Fase 3 — Construcción

Construye solamente una funcionalidad principal.

Fase 4 — Validación

• Validación.
• Errores.
• Tests.
• Code review.
• Documentación.

Fase 5 — Revisión final

Actúa como Tech Lead.

Revisa mi aplicación.

No quiero que escribas código.

Quiero saber:

1. Qué está bien.
2. Qué está mal.
3. Qué falta.
4. Qué riesgos existen.
5. Qué debería mejorar.
6. Qué deuda técnica existe.

Clasifica cada problema:

CRÍTICO
ALTO
MEDIO
BAJO

Sé crítico.

16. AI Log

Durante esta semana documentarás las interacciones importantes con IA.

## Cambio 01

### Objetivo
Crear formulario de tareas.

### Prompt
...

### Resultado
...

### Problemas
...

### Solución
...

### Qué aprendí
...

17. Challenge final

Esta vez no recibirás el prompt.

Tú debes decidir cómo trabajar con la IA.

1. Analizar requisito

2. Identificar preguntas

3. Diseñar solución

4. Pedir análisis a IA

5. Revisar propuesta

6. Implementar

7. Probar

8. Debuggear

9. Revisar

10. Documentar

Preguntas que deberías hacerte

• ¿Qué es un proyecto?
• ¿Puede una tarea pertenecer a varios proyectos?
• ¿Puede existir una tarea sin proyecto?
• ¿Puede eliminarse un proyecto?
• ¿Qué ocurre con sus tareas?
• ¿Quién puede modificarlo?
• ¿Cómo se filtran las tareas?
• ¿Qué ocurre si el proyecto no existe?

18. Test autocorregible

Responde a las siguientes preguntas y pulsa Corregir test.

Respuestas explicadas

19. Recursos externos

No necesitas consumir todos estos recursos. Utilízalos como referencias cuando necesites profundizar.

20. Checklist de finalización

21. Conclusión

LA IA GENERA.
TÚ DIRIGES.