1.1 ¿Cómo funciona el servicio web?
¡Hola! ¿Todos ustedes usan KakaoTalk, ven YouTube y compran en Coupang con sus teléfonos inteligentes todos los días? Pero, ¿no se preguntan cómo funcionan estas aplicaciones?
¡Hoy vamos a descubrir el secreto de los servicios web que usamos naturalmente!
El servicio web es como una casa de 3 pisos
Vamos a comparar el servicio web con una casa de 3 pisos. En cada piso, viven personas que hacen cosas diferentes.
┌─────────────────────────────────────┐
│ 3er piso: Base de datos │
│ Almacén de toda la información │
│ - Información de miembros, información de productos, historial de pedidos │
├─────────────────────────────────────┤
│ 2do piso: Backend │
│ Trabajadores invisibles │
│ - Cálculos, procesamiento, lógica empresarial │
├─────────────────────────────────────┤
│ 1er piso: Frontend │
│ La hermosa pantalla que vemos │
│ - Botones, imágenes, interfaz de usuario │
└─────────────────────────────────────┘
1er piso: Frontend - La hermosa pantalla que vemos
El 1er piso es el Frontend. Aquí es donde podemos ver y tocar directamente.
- Pantalla de la aplicación de teléfono inteligente: botones, imágenes, texto, etc.
- Pantalla del sitio web: página principal de Naver, pantalla de video de YouTube
- Diseño: hermosos colores, fuentes, animaciones
Si lo comparamos con una casa, es como la puerta principal y la sala de estar. ¡Es el espacio que los invitados (usuarios) ven primero!
2do piso: Backend - Trabajadores invisibles
El 2do piso es el Backend. Aquí es donde realmente sucede el trabajo, pero no lo vemos.
- Cálculos y procesamiento: verificación de inicio de sesión, búsqueda de productos, procesamiento de pagos
- Lógica empresarial: "¿Puede este usuario comprar este producto?", "¿Deberíamos aplicar un descuento?"
- Gestión del tráfico: procesar las solicitudes de muchos usuarios en orden
Si lo comparamos con una casa, es como la cocina. Es donde se preparan deliciosas comidas (procesamiento de datos), pero los invitados no pueden entrar directamente.
3er piso: Base de datos - Almacén que recuerda todo
El 3er piso es la Base de datos. Aquí, toda la información está organizada y almacenada.
- Información de miembros: nombre, correo electrónico, contraseña, dirección
- Información de productos: precio, inventario, descripción, imagen
- Registros: historial de pedidos, información de pago, estado de envío
Si lo comparamos con una casa, es como el almacén y la biblioteca. ¡Todos los objetos importantes y registros se mantienen ordenadamente!
Ejemplo real: Ordenar "auriculares inalámbricos" en Coupang
¡Ahora, sigamos el proceso de ordenar auriculares inalámbricos en Coupang y veamos qué sucede en cada piso!
Viaje de los datos: Proceso de búsqueda de "auriculares inalámbricos"
Usuario Casa de 3 pisos del servicio web
┌─────────────────────────┐
"Auriculares inalámbricos" │ 3er piso: Base de datos │
Búsqueda! ──────┐ │ SELECT * FROM productos │
│ │ WHERE nombre LIKE │
↓ │ │ '%auriculares inalámbricos%'... │
│ ├─────────────────────────┤
Mostrar en pantalla │ 2do piso: Backend │
resultados ←─────┘ │ • Procesamiento de búsqueda │
│ • Clasificación y filtrado │
│ • Cálculo de descuentos │
├─────────────────────────┤
│ 1er piso: Frontend │
│ • Barra de búsqueda │
│ • Pantalla de carga │
│ • Pantalla de resultados │
└─────────────────────────┘
Paso 1: ¡Ingrese "auriculares inalámbricos" en la barra de búsqueda!
En Frontend (1er piso):
- Tocas la barra de búsqueda
- Ingresas "auriculares inalámbricos"
- Presionas el botón de búsqueda
- Aparece una pantalla de carga que dice "Espera, buscando resultados..."
Paso 2: ¡El Backend está trabajando duro!
En Backend (2do piso):
Backend: "Oh, alguien está buscando auriculares inalámbricos!"
Backend: "Base de datos, ¿puedes encontrar algunos productos de auriculares inalámbricos?"
Backend: "¡Ah, y selecciona algunos productos que le gusten a este usuario!"
Backend: "¡Ordena por precio más bajo también!"
Paso 3: ¡La Base de datos responde!
En la Base de datos (3er piso):
```sql
Base de datos: "Espera, voy a buscar..."
SELECT nombre, precio, imagen, calificación, cantidad en stock
FROM lista de productos
WHERE nombre LIKE '%auriculares inalámbricos%'
AND cantidad en stock > 0
ORDER BY precio ASC;
Base de datos: "¡Encontré! ¡Hay 347 productos en total!"
```
Paso 4: ¡El Backend empaqueta los resultados de manera atractiva!
En Backend (2do piso):
Backend: "347 son demasiados. Solo selecciona los 20 productos populares"
Backend: "Calcula también la información de descuento y verifica el costo de envío..."
Backend: "¡También calcula la fecha estimada de entrega basada en la ubicación del usuario!"
Backend: "¡Bien, ahora envíalo al 1er piso!"
Paso 5: ¡Muestra en la hermosa pantalla!
En Frontend (1er piso):
- La lista de productos se muestra ordenadamente
- Se muestran la imagen, precio y calificación de cada producto
- Etiquetas como "Envío rápido", "Envío gratuito" también se muestran
- Al desplazarse, aparecen más productos
Paso 6: ¡Haga clic en un producto para agregarlo al carrito!
¡Este proceso también ocurre en el orden de 1er piso → 2do piso → 3er piso → 2do piso → 1er piso!
Usuario Proceso de servicio web
┌─────────────────────┐
"Haga clic en 'Agregar al carrito'" │ 3er piso: Base de datos │
¡Clic! ──────1──→ │ UPDATE inventario SET │
│ cantidad = cantidad - 1 │
↓ │ INSERT INTO carrito │
├─────────────────────┤
"¡Se ha agregado!" ←──5── │ 2do piso: Backend │
Mostrar mensaje │ • Verificación de inventario ←──3─┘│
│ • Verificación de permisos ──4──→│
│ • Cálculo de cupones │
├─────────────────────┤
│ 1er piso: Frontend │
│ • Detección de clic de botón ──2─┘│
│ • Mostrar mensaje de éxito │
└─────────────────────┘
- 1er piso: Hacer clic en el botón "Agregar AirPods Pro al carrito"
- 2do piso: "¿Puede este usuario comprar este producto? ¿Hay inventario?"
- 3er piso: "Resta 1 del inventario y agrega a la tabla del carrito"
- 2do piso: "¿Hay cupones de descuento? Calcula el monto total"
- 1er piso: "¡Se ha agregado al carrito!"
¿Por qué se divide de esta manera?
Puedes pensar: "¿No se puede hacer todo en un solo programa?" Sin embargo, ¡hay razones para dividirlo de esta manera!
1. ¡Eficiencia a través de la división de roles!
- Diseñador: Crear una hermosa pantalla en el 1er piso (Frontend)
- Desarrollador Backend: Implementar la lógica empresarial en el 2do piso (Backend)
- Experto en bases de datos: Diseñar la estructura de datos en el 3er piso (Base de datos)
¡Al concentrarse en sus respectivas áreas de especialización, se obtienen mejores resultados!
2. ¡Resolución rápida de problemas!
Si la pantalla se vuelve lenta:
- ¿Es un problema del 1er piso (Frontend)?
- ¿Es un problema del 2do piso (Backend)?
- ¿Es un problema del 3er piso (Base de datos)?
¡Puedes encontrar y corregir fácilmente!
3. ¡Es fácil de expandir!
Si aumenta el número de usuarios:
- Prepara más servidores en el 2do piso (Backend)
- Cambia a uno más rápido en el 3er piso (Base de datos)
- ¡Deja el 1er piso (Frontend) como está!
Solo necesitas actualizar las partes necesarias.
4. ¡Más seguridad!
- La información importante (contraseñas, información de pago) se almacena solo en el 2do y 3er piso
- El 1er piso solo muestra la información necesaria
- ¡Puedes minimizar los daños en caso de un ataque informático!
¿Qué hace un desarrollador Backend?
Entonces, ¿qué hace específicamente un desarrollador Backend?
1. Crear API
Establece reglas para comunicarse con el Frontend.
"Solicita información del usuario" → GET /usuario/123
"Búscame productos" → GET /productos?búsqueda=auriculares inalámbricos
"Haz un pedido" → POST /pedidos
2. Implementar la lógica empresarial
if (El usuario es VIP) {
Tasa de descuento = 20%;
} else if (Es un nuevo cliente) {
Tasa de descuento = 10%;
} else {
Tasa de descuento = 0%;
}
3. Hablar con la base de datos
-- Crear pedido
INSERT INTO pedidos (ID de cliente, ID de producto, cantidad, monto total)
VALUES (123, 456, 1, 89000);
-- Restar inventario
UPDATE productos SET cantidad = cantidad - 1 WHERE ID de producto = 456;
4. Optimizar el rendimiento
- Encuentra y haz rápidas las partes lentas
- Haz que pueda soportar a muchos usuarios conectados al mismo tiempo
- Ahorra costos del servidor
5. Gestionar la seguridad
- Permitir el acceso solo a usuarios registrados
- Evitar intentos de hackeo
- Encriptar información personal
En resumen...
El servicio web es como una casa de 3 pisos:
- 1er piso Frontend: La hermosa pantalla que vemos
- 2do piso Backend: Donde sucede el trabajo real (que no vemos)
- 3er piso Base de datos: El almacén donde se guarda toda la información
¡Estos tres pisos se comunican entre sí para crear las increíbles aplicaciones y sitios web que usamos!
Y el hecho de que estés leyendo este libro... ¡significa que te estás preparando para ser parte de este maravilloso mundo!
En la próxima sección, descubriremos por qué la base de datos es tan importante en este contexto y por qué es esencial. ¿Estás listo?