Crea tu primera aplicación útil con IA

Paso 1: Describe el problema con tus propias palabras

Hacer la compra es algo que hace casi todo el mundo, y por eso es un primer proyecto perfecto. No necesitas saber programar para darte cuenta de si una lista de la compra funciona: escribes pan, leche y huevos, ves el total y vas marcando lo que compras. El resultado es algo que de verdad puedes usar esta misma semana.

Antes de abrir ninguna herramienta de IA, completa estas tres frases en papel o en una nota. Es la habilidad de programación más importante de todo el libro: convertir un deseo en reglas concretas.

1. Necesito anotar… (por ejemplo: cada producto, cuántas unidades necesito y el precio de una).
2. Quiero que el programa calcule… (por ejemplo: el precio de cada línea y el total de toda la compra).
3. Sabré que el programa funciona cuando… (por ejemplo: dos productos a 25 € muestren 50 €, y marcar un producto como comprado no cambie el total).

Paso 2: Crea la primera versión pequeña

La primera versión es un solo archivo que se abre en tu navegador web. No hay que instalar ningún entorno de programación, no hay servidor ni inicio de sesión. Copia el prompt de abajo en tu asistente de IA (Claude, ChatGPT o similar) tal como está.

Ayúdame a crear mi primera aplicación sencilla. Soy totalmente principiante.

Crea una lista de la compra en un único archivo llamado compra.html que pueda abrir en mi navegador web. Pon todos los estilos y todo el JavaScript dentro de ese mismo archivo, sin bibliotecas externas.

Quiero introducir el nombre del producto, la cantidad y el precio de una unidad. Un botón añade el producto a la lista. Muestra el precio de cada línea y, abajo, el total de toda la compra. Déjame eliminar un producto y marcarlo como comprado. Marcar un producto como comprado no debe cambiar el total.

Rechaza un nombre vacío, los números no válidos, un precio negativo y una cantidad de cero o menos. Acepta en el precio tanto la coma decimal como el punto decimal.

Primero explica brevemente el plan. Después escribe el código completo y los pasos exactos para guardar y abrir el archivo. No añadas todavía ninguna otra función.

1. Copia el código. Usa el botón de copiar de la respuesta de la IA para llevarte todo el código, de la primera a la última línea.
2. Guárdalo como compra.html. Abre un editor de texto plano (Notepad en Windows, TextEdit en modo de texto sin formato en Mac), pega el código y guárdalo como compra.html. Elige «Todos los archivos» como tipo de archivo, no «Documentos de texto».
3. Ábrelo en el navegador. Haz doble clic en el archivo o arrástralo a una ventana del navegador. Deberías ver tu lista de la compra, no una página llena de código.

Paso 3: Comprueba que no es solo una imagen bonita

Una aplicación que parece correcta no es lo mismo que una aplicación que funciona. Recorre esta tabla fila por fila y compara lo que ves con el resultado correcto. Esta es tu primera prueba de verdad.

Si alguna fila falla, no arregles todavía el código a mano. Dile a la IA exactamente qué fila ha fallado, qué introdujiste y qué viste en su lugar, y pídele que corrija solo ese problema.

Paso 4: Haz tú mismo un cambio

Ahora haz tu primer cambio sin que la IA lo escriba por ti. Pregúntale a la IA: «¿Dónde está el título de la aplicación en mi código?». Te señalará una línea parecida a <h1>Lista de la compra</h1>.

1. Encuentra el título. Abre compra.html en tu editor de texto y busca la línea que te ha indicado la IA.
2. Cambia el texto. Sustituye las palabras entre <h1> y </h1> por tu propio título, por ejemplo «Compra del sábado». No borres los signos de menor y mayor.
3. Guarda y actualiza. Guarda el archivo, vuelve al navegador y actualiza la página. Debería aparecer tu nuevo título.

Después pide a la IA que te explique tu propio archivo en tres partes, usando tu código como ejemplo. Verás que toda aplicación web se construye con las mismas tres capas:

Paso 5: Enseña a la aplicación una habilidad nueva

Los programas reales crecen a pasos pequeños. Añade una sola función nueva y vuelve a probar. Envía a la IA este mensaje de seguimiento en la misma conversación:

Añade un presupuesto a mi lista de la compra. Déjame escribir la cantidad que quiero gastar. Muestra cuánto me queda. Si el total supera el presupuesto, muestra un aviso claro con la cantidad en la que me he pasado. Todo lo demás debe seguir funcionando exactamente igual que antes, y enséñame el archivo completo actualizado.

Ya has creado, ejecutado, probado y modificado una aplicación real. Eso no es toda la programación, pero es la rutina que repetirás en cada una de las lecciones siguientes: describir con claridad, dejar que la IA genere, comprobar frente a los resultados esperados y cambiar una sola cosa cada vez.