Semana 04 — Diseñar y construir aplicaciones con IA

1. Objetivo de la semana

"Hazme una aplicación"

Durante esta semana aprenderás a:

• Transformar una idea en requisitos.
• Definir usuarios y casos de uso.
• Descomponer una aplicación en funcionalidades.
• Diseñar una arquitectura básica.
• Utilizar IA para generar componentes.
• Revisar código generado por IA.
• Detectar errores y pedir correcciones.
• Evitar que la IA genere una aplicación caótica.
• Documentar decisiones técnicas.
• Trabajar de forma iterativa con IA.

2. La nueva forma de desarrollar aplicaciones

Tradicionalmente un desarrollador recibía unos requisitos y posteriormente escribía código.

Con IA aparece una nueva capa:

Idea
  ↓
Requisitos
  ↓
Diseño
  ↓
IA
  ↓
Código
  ↓
Revisión humana
  ↓
Pruebas
  ↓
Corrección
  ↓
Aplicación

3. La IA no es un botón de "crear aplicación"

Uno de los errores más habituales de los principiantes es pedir a la IA:

Crea una aplicación de gestión de clientes.

La IA puede generar algo, pero normalmente aparecerán problemas:

• No están claros los usuarios.
• No están definidos los permisos.
• No sabemos qué información almacenar.
• No sabemos qué pantallas necesitamos.
• No sabemos qué ocurre cuando algo falla.
• No sabemos cómo escalar la aplicación.
• El código puede quedar mal estructurado.

La alternativa

Dividir el problema.

Idea
↓
Usuarios
↓
Problemas
↓
Requisitos
↓
Funcionalidades
↓
Datos
↓
Pantallas
↓
Arquitectura
↓
Implementación
↓
Pruebas

4. Ejemplo completo: aplicación de tareas

Vamos a utilizar durante toda la semana una aplicación sencilla:

Un usuario debería poder:

• Crear tareas.
• Editar tareas.
• Eliminar tareas.
• Marcar tareas como completadas.
• Asignar prioridades.
• Organizar tareas por proyectos.
• Filtrar tareas.

Esto ya es mejor que decir simplemente:

"Haz una aplicación de tareas."

5. Requisitos funcionales

Un requisito funcional describe algo que la aplicación debe poder hacer.

Ejemplos

Prompt para la IA

Actúa como analista funcional.

Tengo esta idea:

"Aplicación para gestionar tareas personales."

Ayúdame a convertirla en requisitos funcionales.

Para cada requisito proporciona:

- ID
- Nombre
- Descripción
- Actor
- Prioridad
- Criterios de aceptación

No escribas código todavía.

6. Criterios de aceptación

Un criterio de aceptación define cuándo podemos considerar que una funcionalidad funciona correctamente.

Ejemplo

Requisito:

El usuario podrá crear una tarea.

Criterios de aceptación:

1. El usuario introduce un título.
2. El título es obligatorio.
3. Si no introduce título se muestra un error.
4. Si introduce título se crea la tarea.
5. La tarea aparece en la lista.
6. La tarea inicialmente aparece como pendiente.

Esto es muchísimo más útil para una IA que simplemente:

"Haz que se puedan crear tareas."

7. User Stories

Una User Story expresa una necesidad desde el punto de vista del usuario.

Formato habitual:

Como [tipo de usuario]
quiero [acción]
para [beneficio].

Ejemplo

Como usuario,
quiero crear una tarea,
para poder recordar las cosas que tengo pendientes.

Otro ejemplo

Como usuario,
quiero asignar una prioridad a una tarea,
para poder identificar rápidamente qué debo hacer primero.

Prompt

Convierte estos requisitos en User Stories.

Para cada User Story incluye:

- ID
- User Story
- Criterios de aceptación
- Prioridad

No generes código.

8. Descomponer una aplicación

Una aplicación debe dividirse en piezas pequeñas.

TaskFlow

TaskFlow
│
├── Usuarios
│
├── Autenticación
│
├── Tareas
│   ├── Crear
│   ├── Editar
│   ├── Eliminar
│   └── Completar
│
├── Proyectos
│
├── Filtros
│
└── Dashboard

Esta estructura permite trabajar con la IA por partes.

9. Arquitectura básica

Antes de escribir código debemos decidir cómo se organizan las piezas.

Una aplicación web típica puede tener:

Usuario
   ↓
Frontend
   ↓
API / Backend
   ↓
Base de datos

Ejemplo

Browser
   │
   ▼
React / Frontend
   │
   ▼
API
   │
   ▼
Backend
   │
   ▼
PostgreSQL

La tecnología concreta es secundaria en este módulo.

Lo importante es comprender las responsabilidades.

10. Pedir a la IA que diseñe la arquitectura

Actúa como arquitecto de software.

Estoy diseñando una aplicación llamada TaskFlow.

Funcionalidades:

- Usuarios
- Login
- Tareas
- Proyectos
- Prioridades
- Filtros
- Dashboard

Quiero una arquitectura sencilla y mantenible.

Explica:

1. Componentes principales.
2. Responsabilidad de cada componente.
3. Cómo se comunican.
4. Qué datos necesita cada componente.
5. Posibles problemas de seguridad.

No escribas código todavía.

¿Por qué funciona mejor?

Porque estamos proporcionando:

• Contexto.
• Objetivo.
• Restricciones.
• Formato esperado.
• Una instrucción clara de no generar código.

11. Contexto: el elemento más importante

Una IA responde basándose en el contexto que tiene.

Si le proporcionamos poco contexto:

Haz un login.

tendrá que asumir demasiadas cosas.

Mejor:

Estamos construyendo una aplicación web llamada TaskFlow.

Arquitectura:

Frontend
↓
API
↓
Backend
↓
PostgreSQL

Necesitamos implementar el login.

Requisitos:

- Email y contraseña.
- Contraseña almacenada de forma segura.
- Mensajes de error genéricos.
- Sesión persistente.
- Logout.

Antes de escribir código:
explica qué componentes necesitamos.

12. Prompting técnico

Un buen prompt técnico puede seguir esta estructura:

ROL
↓
CONTEXTO
↓
OBJETIVO
↓
REQUISITOS
↓
RESTRICCIONES
↓
FORMATO DE RESPUESTA
↓
VALIDACIÓN

Ejemplo

ROL:
Actúa como desarrollador senior.

CONTEXTO:
Estamos construyendo TaskFlow.

OBJETIVO:
Crear el componente de formulario de tareas.

REQUISITOS:
- Título obligatorio.
- Descripción opcional.
- Prioridad.
- Fecha límite.

RESTRICCIONES:
- Código sencillo.
- Componentes reutilizables.
- Validación de entrada.

FORMATO:
1. Explica el diseño.
2. Genera el código.
3. Explica las decisiones.
4. Añade pruebas.

VALIDACIÓN:
Revisa el código antes de entregarlo.

13. La técnica "planifica antes de programar"

Una de las mejores técnicas para trabajar con IA consiste en pedir:

NO ESCRIBAS CÓDIGO TODAVÍA.

Primero:

1. Analizar.
2. Diseñar.
3. Identificar riesgos.
4. Definir pasos.
5. Después implementar.

Prompt

Antes de escribir código:

1. Analiza el problema.
2. Identifica las partes necesarias.
3. Propón una solución.
4. Identifica posibles problemas.
5. Propón pruebas.
6. Espera mi aprobación antes de generar código.

14. Construir por iteraciones

Nunca es necesario pedir a la IA que construya toda la aplicación de golpe.

Podemos trabajar así:

ITERACIÓN 1
Crear proyecto
↓
ITERACIÓN 2
Crear pantalla principal
↓
ITERACIÓN 3
Crear modelo de datos
↓
ITERACIÓN 4
Crear API
↓
ITERACIÓN 5
Conectar frontend
↓
ITERACIÓN 6
Validaciones
↓
ITERACIÓN 7
Tests
↓
ITERACIÓN 8
Seguridad
↓
ITERACIÓN 9
Documentación

15. Ejemplo práctico: crear una tarea

Paso 1 — Requisito

El usuario puede crear una tarea.

Paso 2 — Datos

Task

id
title
description
priority
due_date
completed
created_at

Paso 3 — Interfaz

Título
Descripción
Prioridad
Fecha límite
[ Crear tarea ]

Paso 4 — Backend

POST /tasks

Paso 5 — Persistencia

INSERT INTO tasks (...)

Paso 6 — Validación

Título vacío → error
Título válido → crear tarea

Esta descomposición permite que la IA nos ayude en cada paso.

16. Pedir código a la IA

Implementa únicamente la funcionalidad de creación de tareas.

Contexto:

La entidad Task contiene:

- id
- title
- description
- priority
- due_date
- completed
- created_at

Requisitos:

- title obligatorio.
- priority puede ser LOW, MEDIUM o HIGH.
- completed debe comenzar en false.

Primero explica la solución.

Después genera el código.

Finalmente incluye:

- casos límite
- posibles errores
- pruebas recomendadas

17. No aceptar automáticamente el código generado

Debemos revisar:

• ¿Hace realmente lo que pedimos?
• ¿Tiene errores?
• ¿Es seguro?
• ¿Es mantenible?
• ¿Está duplicando código?
• ¿Maneja errores?
• ¿Tiene tests?
• ¿Respeta nuestra arquitectura?

Prompt para revisión

Revisa este código como un desarrollador senior.

No lo reescribas todavía.

Busca:

- errores
- vulnerabilidades
- problemas de arquitectura
- código duplicado
- problemas de mantenibilidad
- casos límite
- problemas de rendimiento

Devuelve los problemas ordenados por gravedad.

18. Debugging asistido por IA

Cuando aparece un error, no debemos decir únicamente:

No funciona.

Debemos proporcionar información.

Prompt recomendado

Tengo este error:

[PEGAR ERROR]

Contexto:

Estoy implementando la creación de tareas.

Esperaba:

Que la tarea se guardase en la base de datos.

Resultado:

La API devuelve HTTP 500.

Código relevante:

[PEGAR CÓDIGO]

Analiza:

1. Qué significa el error.
2. Posibles causas.
3. Cómo comprobar cada causa.
4. Solución recomendada.

No modifiques código todavía.

19. La IA como debugger

Podemos pedirle que nos ayude a investigar de forma sistemática.

Quiero depurar este problema.

No me des directamente una solución.

Hazme preguntas para localizar la causa
y guíame paso a paso.

Esto es especialmente útil para aprender.

20. Tests generados por IA

La IA puede ayudarnos también a generar pruebas.

Genera una estrategia de pruebas para la funcionalidad:

"Crear tarea"

Incluye:

- casos normales
- casos límite
- entradas inválidas
- errores de base de datos
- problemas de autorización
- pruebas de seguridad

Ejemplos

21. Documentación generada con IA

La IA también puede generar documentación.

Ejemplo

Documenta esta API.

Incluye:

- Endpoint
- Método HTTP
- Parámetros
- Body
- Respuesta correcta
- Errores
- Ejemplos de uso

Formato Markdown.

Esto permite mantener la documentación sincronizada con el desarrollo.

22. Referencias externas

OpenAI

• OpenAI Documentation
• Prompt Engineering Guide

Anthropic

• Anthropic Documentation
• Prompt Engineering

GitHub

• GitHub Copilot Documentation

MDN

• MDN Web Docs

OWASP

• OWASP Top 10

23. Ejercicio práctico 1 — Analizar una aplicación

24. Ejercicio práctico 2 — Crear un prompt técnico

Actúa como arquitecto de software senior.

Contexto:

Estamos construyendo una aplicación web
para gestionar empleados de una consultora.

Objetivo:

Diseñar el módulo de empleados.

Cada empleado debe tener:

- id
- nombre
- email
- puesto
- skills
- disponibilidad

El módulo debe permitir:

- crear empleados
- editar empleados
- eliminar empleados
- buscar empleados
- filtrar por skill

Restricciones:

- arquitectura mantenible
- separación de responsabilidades
- validación de datos
- control de permisos

Antes de generar código:

1. Propón arquitectura.
2. Define modelo de datos.
3. Define API.
4. Identifica riesgos.
5. Propón estrategia de pruebas.

25. Ejercicio práctico 3 — Mejorar un prompt

Hazme una aplicación de empleados.

Actúa como arquitecto de software.

Necesito diseñar una aplicación web
para gestionar empleados de una empresa.

Los usuarios serán:

- Administradores
- Managers

Funcionalidades:

- Crear empleados
- Editar empleados
- Consultar empleados
- Buscar por nombre
- Filtrar por skills
- Consultar disponibilidad

Antes de escribir código:

1. Define requisitos.
2. Propón arquitectura.
3. Diseña el modelo de datos.
4. Define API.
5. Propón estructura del frontend.
6. Identifica riesgos.
7. Propón pruebas.

No escribas código todavía.

26. Ejercicio práctico 4 — Debugging

HTTP 500 Internal Server Error

Actúa como desarrollador senior especializado
en debugging.

Problema:

Al crear una tarea recibo HTTP 500.

Comportamiento esperado:

La tarea debería almacenarse en PostgreSQL.

Comportamiento actual:

La API devuelve HTTP 500.

Código del endpoint:

[PEGAR CÓDIGO]

Error del servidor:

[PEGAR STACK TRACE]

Analiza:

1. Qué significa el error.
2. Causa probable.
3. Otras causas posibles.
4. Cómo verificar cada hipótesis.
5. Solución recomendada.

No cambies código hasta explicar primero
la causa del problema.

27. Test de conocimientos

Selecciona mentalmente la respuesta antes de abrir la solución.

Pregunta 1

¿Qué debería hacerse antes de pedir a la IA que genere una aplicación completa?

Pregunta 2

¿Cuál de estos prompts es mejor?

A) Hazme un login.

B) Crea un login seguro para nuestra aplicación,
usando la arquitectura definida y teniendo en cuenta
autenticación, validación, sesiones y errores.

Pregunta 3

¿Debemos aceptar automáticamente código generado por IA?

Pregunta 4

¿Qué significa "descomponer una aplicación"?

Pregunta 5

¿Por qué es importante proporcionar contexto a la IA?

Pregunta 6

¿Qué es un criterio de aceptación?

Pregunta 7

¿Qué es mejor para debugging?

A) No funciona.

B) La API devuelve HTTP 500 al crear una tarea.
Este es el stack trace y este es el código.

Pregunta 8

¿Por qué conviene pedir a la IA que no escriba código inicialmente?

28. Test avanzado

Pregunta 9

La IA ha generado una aplicación que funciona pero contiene tres componentes enormes de más de 1.000 líneas cada uno. ¿Qué deberías hacer?

Pregunta 10

La IA propone almacenar contraseñas directamente en la base de datos. ¿Qué haces?

Pregunta 11

La IA genera código que funciona, pero no sabes por qué funciona. ¿Está terminado el trabajo?

Pregunta 12

¿Qué estrategia es mejor?

A) Crear toda la aplicación en un único prompt.

B) Diseñar, implementar y probar pequeñas funcionalidades
de forma iterativa.

29. Mini proyecto de la semana

Puede ser, por ejemplo:

• Gestor de tareas.
• Gestor de notas.
• CRM sencillo.
• Gestor de entrenamientos.
• Gestor de recetas.
• Gestor de proyectos.
• Gestor de gastos.
• Gestor de clientes.

Debes producir

1. Descripción del problema.
2. Usuarios.
3. Requisitos.
4. User Stories.
5. Criterios de aceptación.
6. Mapa de funcionalidades.
7. Arquitectura.
8. Modelo de datos inicial.
9. API propuesta.
10. Plan de implementación.
11. Estrategia de pruebas.

30. Entregable de la Week 04

Al finalizar la semana deberías disponer de un documento similar a:

MI APLICACIÓN
│
├── 01-problema.md
├── 02-usuarios.md
├── 03-requisitos.md
├── 04-user-stories.md
├── 05-criterios-aceptacion.md
├── 06-arquitectura.md
├── 07-modelo-datos.md
├── 08-api.md
├── 09-plan-implementacion.md
└── 10-tests.md

Este documento será utilizado durante las próximas semanas para construir realmente la aplicación.

31. Checklist de finalización

• ☐ Sé convertir una idea en requisitos.
• ☐ Sé crear User Stories.
• ☐ Sé definir criterios de aceptación.
• ☐ Sé dividir una aplicación en módulos.
• ☐ Comprendo frontend, backend, API y base de datos.
• ☐ Sé pedir a la IA que diseñe antes de programar.
• ☐ Sé construir prompts técnicos.
• ☐ Sé proporcionar contexto a una IA.
• ☐ Sé pedir código por partes.
• ☐ Sé pedir una revisión del código.
• ☐ Sé utilizar IA para debugging.
• ☐ Sé generar casos de prueba con IA.
• ☐ Entiendo que el código generado debe revisarse.
• ☐ He diseñado mi mini proyecto.

32. Autoevaluación

Si la respuesta es "sí" en la mayoría de los puntos, estás preparado para pasar al siguiente nivel.

33. Qué has aprendido realmente

El objetivo de esta semana no era aprender un nuevo lenguaje.

El verdadero aprendizaje es cambiar tu forma de pensar:

ANTES

Problema
↓
Código


AHORA

Problema
↓
Análisis
↓
Requisitos
↓
Diseño
↓
IA
↓
Implementación
↓
Tests
↓
Revisión
↓
Iteración