Skip to content

Capítulo 6.1: Conectando FastAPI con el frontend

Tiempo de estudio: 30 minutos

1. Volviendo al "hiperpropulsor": Comparación de protocolos

En el capítulo anterior, acoplamos nuestro Centro de Control de Misiones (frontend) a la "ISS" (API de Laravel). Ahora, volveremos a nuestro caza supersónico (FastAPI) y realizaremos la misma operación.

El objetivo de este capítulo no es simplemente repetir acciones, sino comparar dos enfoques. Es como si la misma nave Dragon se acoplara primero a la ISS y luego a la estación espacial china "Tiangong". El puerto de acoplamiento es el mismo (REST), pero puede haber matices en los procedimientos y la ubicación de los puertos.

💡 Analogía espacial:

El proceso es el mismo: acercarse, alinearse, acoplarse. Pero para la "ISS" tuvimos que usar el puerto /api/planets, y para "Tiangong", el puerto /spaceships. Nuestro operador en el Centro de Control de Misiones debe conocer estos detalles para que la misión tenga éxito.

2. Preparando el "caza" (FastAPI) para el acoplamiento

Ya lo hicimos en el Capítulo 4.2, pero asegurémonos de que todo esté en su lugar.

Paso 1: Iniciando el servidor FastAPI

  1. Detenga el servidor Laravel si está en ejecución (para evitar conflictos de puertos).
  2. Abra una terminal en la carpeta de su proyecto FastAPI.

  3. Active el entorno virtual:

    • Windows: .\venv\Scripts\Activate.ps1
    • macOS / Linux: source venv/bin/activate

  4. Inicie el servidor: 

    uvicorn main:app --reload
    El servidor estará disponible en la dirección http://127.0.0.1:8000.

Paso 2: Verificando la configuración CORS en main.py

Asegúrese de que su proyecto FastAPI tenga configurado el CORSMiddleware que agregamos anteriormente. Debe permitir solicitudes desde la dirección de su frontend. 

# main.py
from fastapi.middleware.cors import CORSMiddleware

# ...

origins = [
    "http://127.0.0.1:5500", # Dirección de Live Server
    "null", # Para file:///
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# ...
Si todo está en su lugar, su servidor FastAPI está completamente listo.

3. Reconfigurando la "antena" del Centro de Control de Misiones de vuelta a FastAPI

Ahora lo más interesante: los cambios mínimos que debemos hacer en nuestro JavaScript para que funcione de nuevo con FastAPI.

Paso 1: Cambiando la URL base

Abra api.js y restaure API_BASE_URL a su valor original. 

// api.js

// Especificamos la URL de nuestra API FastAPI
const API_BASE_URL = 'http://127.0.0.1:8000'; // <-- ¡Sin /api!

// ... el resto del código de apiRequest ...

Paso 2: Adaptación a la estructura de respuesta de FastAPI

Recordemos que nuestro GET /spaceships en FastAPI devuelve un array simple, no un objeto con paginación. Esto significa que necesitamos restaurar el código de fetchAndDisplayFleet a su forma original.

Modifique la función fetchAndDisplayFleet en app.js: 

// app.js

async function fetchAndDisplayFleet() {
    try {
        fleetListContainer.innerHTML = '<p>Cargando telemetría de FastAPI...</p>';
        const ships = await apiRequest('/spaceships'); // <-- Solicitud a /spaceships

        // En FastAPI tenemos un array simple, ¡así que la clave .data no es necesaria!

        fleetListContainer.innerHTML = '';
        if (ships.length === 0) {
            fleetListContainer.innerHTML = '<p>No hay naves en el registro.</p>';
            return;
        }

        ships.forEach(ship => {
            // Restauramos nuestra función original para crear tarjetas
            const card = createShipCard(ship);
            fleetListContainer.appendChild(card);
        });
    } catch (error) {
        fleetListContainer.innerHTML = `<p style="color: #ff6b6b;">Error al cargar la flota: ${error.message}</p>`;
    }
}

// Función original para crear tarjetas de naves
function createShipCard(ship) {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
        <h3>${ship.name} (ID: ${ship.id})</h3>
        <p>Tipo: ${ship.type}</p>
        <p>Año de lanzamiento: ${ship.launch_year}</p>
        <p>Estado: ${ship.status}</p>
        <div class="card-actions">
            <button class="edit-btn" data-ship-id="${ship.id}">Editar</button>
            <button class="delete-btn" data-ship-id="${ship.id}">Dar de baja</button>
        </div>
    `;
    return card;
}

Paso 3: Verificando las operaciones CRUD

Dado que nuestros modelos Pydantic en FastAPI y los campos del formulario HTML coinciden (name, type, launch_year, status), las funciones handleSaveShip y handleDeleteShip deberían funcionar sin cambios, ya que ya apuntan al endpoint /spaceships.

4. Conclusiones de la comparación: ¿Qué significa esto para un desarrollador frontend?

  • Universalidad de REST: Ha comprobado visualmente que para el frontend no importa en qué esté escrito el backend (PHP/Laravel o Python/FastAPI), siempre que siga los principios de REST.
  • Importancia de la documentación: Las principales diferencias radicaron en las URLs de los endpoints y la estructura de las respuestas JSON. Esto es precisamente lo que debe describirse en la documentación de la API. Sin ella, el desarrollador frontend trabajaría "a ciegas".
  • Flexibilidad del frontend: Su código JavaScript debe ser lo suficientemente flexible para adaptarse fácilmente a diferentes formatos de datos (por ejemplo, verificar si hay una clave data, o si es simplemente un array).

Conclusión: La habilidad de trabajar con una API REST es una clave universal que abre las puertas a la interacción con cualquier backend moderno.

Cuestionario de repaso

1. La principal diferencia en la URL entre nuestra API de Laravel y la API de FastAPI fue en...

2. ¿Cuál fue el principal cambio requerido en el código JS al cambiar de la respuesta paginada de Laravel a un array simple de FastAPI?

3. Este experimento demuestra que para un desarrollador frontend...

4. La configuración de CORS es tarea de...

5. Si FastAPI utilizara paginación, como en Laravel, ¿qué tendríamos que hacer en el frontend?

🚀 Resumen del capítulo:

Has cambiado con éxito los "protocolos de comunicación" de tu Centro de Control de Misión y has comparado en la práctica el trabajo con dos sistemas de backend diferentes.

  • ✅ Has consolidado la habilidad de configurar API_BASE_URL para cambiar entre servidores.
  • ✅ Has comprendido la importancia de la estructura de la respuesta (data vs un array simple) y cómo adaptar el frontend a ella.
  • ✅ Te has dado cuenta de que un buen desarrollador frontend debe estar preparado para trabajar con cualquier API RESTful, estudiando cuidadosamente su documentación.

¡Habilidad de acoplamiento universal adquirida! Ahora que sabemos configurar la conexión básica, es hora de hablar de protocolos más complejos: CORS, autenticación y seguridad.

📌 Verificación:

  • Asegúrate de que tu servidor FastAPI está en ejecución.
  • Asegúrate de que has restaurado API_BASE_URL y la lógica de manejo de respuestas en app.js a la variante para FastAPI.
  • Verifica que tu frontend realiza de nuevo correctamente todas las operaciones CRUD con el backend de FastAPI.

⚠️ Si hay errores:

  • CORS error: Asegúrate de que el servidor FastAPI está en ejecución con la configuración CORS correcta.
  • Error Cannot read properties of undefined (reading 'length'): Es posible que hayas olvidado eliminar la referencia a .data de responseData.
  • 404 Not Found: Comprueba API_BASE_URL — FastAPI no tiene el prefijo /api.