Desarrollo de Software con IA

La vida secreta de una página: qué pasa cuando tocas un botón

Describir el viaje de una petición desde que oprime un botón hasta que aparece el resultado, pasando por navegador, servidor y base de datos.

Toque un botón, pasó algo

Panorama de ciudad nocturna con edificios cuyas ventanas encendidas se recortan en la oscuridad.
Detrás de cada app que abres hay una ciudad de piezas que nunca duermen: navegador, servidor, base de datos. Este módulo te da el mapa para verlas desde fuera.

Antes de pedirle nada a una IA necesitas un mapa en la cabeza de qué ocurre cuando alguien usa una aplicación. No la sintaxis: el mapa. Todo lo que construirás se apoya en esta idea sencilla. Cuando un usuario toca un botón, su dispositivo envía una petición a un computador lejano (el servidor). Ese servidor consulta la información que necesita, decide qué hacer con ella y devuelve una respuesta. El navegador pinta el resultado. Eso es todo. Se repite millones de veces al día en cada app del mundo.

La idea que lo explica todo Este ciclo petición → procesamiento → respuesta es el corazón de TODA aplicación conectada a internet. Si lo dominas, sabrás dónde buscar cualquier error.

El viaje de una petición, paso a paso

[Qué pasa cuando tocas "Agregar al carrito"]

Esta actividad interactiva ('Explicacion visual') requiere el motor completo de Lumbre. El contenido estatico se muestra arriba; para la experiencia interactiva, visita la version online de este objeto.

Un ejemplo concreto

Imagina una tienda. Ana escribe en su celular. Toca Comprar. Su navegador manda al servidor un mensaje que, en lenguaje humano, dice: «usuario Ana quiere comprar el producto 42». El servidor mira: ¿está Ana registrada? ¿queda stock? ¿cuánto pagar? Habla con la base de datos, anota la venta, y responde: «pedido 1234 confirmado». Ana ve el número de pedido.

Cómo le pides esto a una IA

Cuando entiendes la cadena, tus instrucciones a la IA dejan de ser vagas. En vez de «hazme una tienda», puedes señalar la pieza exacta:

Un prompt que señala la capa correcta
Necesito una función del BACKEND que reciba la petición "comprar producto".
Entrada: id de usuario y id de producto.
Debe: 1) verificar que el usuario exista, 2) revisar stock en la BASE DE DATOS, 3) si hay stock, crear el pedido y bajar el stock, 4) responder el numero de pedido o un error claro si no hay.
No toque el frontend: solo la logica del servidor y su consulta a datos.

Prueba que entendiste

Un usuario reporta que al tocar "Comprar" la pantalla se queda en blanco. Según el ciclo, ¿qué parte conviene revisar PRIMERO?

La base de datos es la parte de la aplicación que el usuario ve y toca directamente.

Detecta el error conceptual

Un compañero describe así cómo funciona una app. Señala la línea que está MALA:

  1. El navegador del usuario arma y envía una petición.
  2. El servidor recibe la petición y decide qué hacer.
  3. El servidor guarda y lee información en la base de datos.
  4. La base de datos pinta los botones en la pantalla del usuario.

Identifica la linea con error.

La corrección que cierra el ciclo

Corregido el entendimiento, la cadena queda completa y ordenada. Guárdata este resumen: es el vocabulario que usarás todo el curso.

Ordena el ciclo de una petición web:

☰
☰
☰
☰
☰
Siguiente: en "Los once piezas de cualquier aplicación" pondremos nombre a cada parte de este mapa. Y si quieres ver APIs con más detalle, el curso enlazado IA Aplicada tiene objetos dedicados (iav-c11).