Desarrollo Web Backend

Sesión 1: Fundamentos de la Web

Jorge Antonio Del Aguila / Instructor

Django Logo

📋 Agenda de Hoy

  • Introducción: ¿Qué es Backend?
  • El viaje de una petición web
  • Protocolo HTTP (Métodos, Headers)
  • El concepto clave: API
  • Códigos de Estado (Status Codes)
  • JSON vs HTML & APIs
  • Mini Ejercicios Prácticos

¿Qué es Backend? 🤔

Es la "cocina" de la aplicación. Lo que el usuario NO ve.

Frontend 🎨

El Menú, la Decoración, el Mesero.

Backend ⚙️

El Chef, la Cocina, la Despensa.

🛠️ Tu rol como Backend Developer

  • Diseñar y construir APIs.
  • Implementar Lógica de Negocio.
  • Gestionar la Base de Datos.
  • Asegurar la Seguridad y Autenticación.

El Viaje de una Petición 🌍

Navegador
(Cliente)
➡️
Servidor
(Django)
🔄
Base de
Datos

1. Petición HTTP    2. Proceso Lógico    3. Consulta DB    4. Respuesta

Protocolo HTTP / HTTPS 🔒

El lenguaje de la web.

  • HTTP: HyperText Transfer Protocol.
  • HTTPS: Versión segura (encriptada con SSL/TLS).

¡Hoy en día, todo debe ser HTTPS!

Verbos HTTP (Acciones)

Método Acción (CRUD) Descripción
GET Read Pedir datos (sin modificar).
POST Create Enviar datos (crear nuevo).
PUT Update Actualizar datos existentes.
DELETE Delete Borrar un recurso.

¿Qué es una API? 🔌

Application Programming Interface

Es un intermediario que permite que dos aplicaciones se hablen entre sí.

La Analogía del Mesero 🤵

TÚ (Cliente)

Tienes hambre, pero no puedes entrar a la cocina a cocinarte.
EL MESERO (API)

Toma tu pedido (formato específico), lo lleva a la cocina y te trae la comida.
LA COCINA (Backend/BD)

Prepara la comida con los ingredientes crudos (Datos).

¿Por qué son vitales?

Gracias a la API, tu mismo Backend (Django) puede servir datos a:

  • 💻 Una Web (React/Vue)
  • 📱 Una App Móvil (iOS/Android)
  • ⌚ Un Smart Watch

Todos "piden" datos a la misma API.

El Flujo App Mobile

App Móvil
➡️
API
➡️
Base de Datos

La API define CÓMO pedir las cosas (Endpoints).

GET /api/productos  --> "Mesero, tráeme la lista de productos"

Anatomía de una Petición 🧬

POST /api/users HTTP/1.1
Host: miweb.com
Content-Type: application/json
Authorization: Bearer tokensicreto123

{
  "nombre": "Juan",
  "email": "juan@email.com"
}

☝️ Headers (Metadatos) vs Body (Datos reales)

JSON (JavaScript Object Notation)


                    {
                    "plato": "Pizza",
                    "precio": 15,
                    "ingredientes": ["Queso", "Tomate"]
                    }

Es texto plano, ligero y fácil de leer para cualquier programa.

Status Codes (Semáforo) 🚦

  • 2xx (Éxito): 200 OK, 201 Created.
  • 4xx (Error Cliente):
    • 400 Bad Request (Datos mal)
    • 401 Unauthorized (Loguéate)
    • 404 Not Found (No existe)
  • 5xx (Error Servidor): 500 Internal Error (Culpa nuestra 😅).

Formatos de Respuesta

¿Qué devolvemos al usuario?

Web Tradicional (HTML)





    
Hola, Juan

    
Tu saldo es $50

Mezcla datos y diseño.

API (JSON)


// Solo datos. El Frontend decide cómo mostrarlo.
{
    "user": "Juan",
    "balance": 50,
    "currency": "USD"
}

Este es el estándar moderno para Backend.

🕵️‍♂️ DevTools

Tu mejor amigo: F12 > Pestaña Network.

Nos permite ver qué entra y sale de nuestro navegador en tiempo real.

⚡ Hora de Práctica

  1. Abrir DevTools en una web de noticias.
  2. Analizar el primer GET (Status 200).
  3. Entrar a JSONPlaceholder.
  4. Entrar a PokeAPI.

¡Fin de la Sesión 1! 🚀

¿Preguntas?

Próxima clase: Configuración de entorno y "Hola Mundo" en Django.