Capítulo 6.1: Conectando o FastAPI ao Frontend

Tempo de estudo: 30 minutos

---

1. Retorno ao "hipermotor": Comparação de Protocolos

No capítulo anterior, acoplamos nosso MCC (frontend) à "ISS" (Laravel API). Agora, retornaremos ao nosso caça superluminal (FastAPI) e realizaremos a mesma operação.

O objetivo deste capítulo não é apenas repetir as ações, mas comparar duas abordagens. É como se a mesma nave Dragon se acoplasse primeiro à ISS e depois à estação chinesa "Tiangong". O mecanismo de acoplagem é o mesmo (REST), mas podem existir nuances nos procedimentos e na localização das portas.

💡 Analogia Espacial:

O processo é o mesmo: aproximar-se, alinhar-se, acoplar-se. Mas para a "ISS" era necessário usar a porta /api/planets, e para a "Tiangong", a porta /spaceships. Nosso operador no MCC deve conhecer esses detalhes para que a missão seja bem-sucedida.

---

2. Preparando o "caça" (FastAPI) para o acoplamento

Já fizemos isso no Capítulo 4.2, mas vamos garantir que tudo esteja no lugar.

Passo 1: Iniciando o servidor FastAPI

1. Pare o servidor Laravel, se estiver em execução (para evitar conflito de portas).
2. Abra o terminal na pasta do seu projeto FastAPI.

3. Ative o ambiente virtual:

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

4. Inicie o servidor:

   uvicorn main:app --reload
   

   O servidor estará disponível em http://127.0.0.1:8000.

Passo 2: Verificando as configurações CORS em main.py

Certifique-se de que seu projeto FastAPI possui o CORSMiddleware configurado, que adicionamos anteriormente. Ele deve permitir requisições do endereço do seu frontend.

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

# ...

origins = [
    "http://127.0.0.1:5500", # Endereço do Live Server
    "null", # Para file:///
]

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

# ...

Se tudo estiver no lugar, seu servidor FastAPI está completamente pronto.

---

3. Reconfigurando a "antena" do MCC de volta para o FastAPI

Agora, o mais interessante — as mudanças mínimas que precisamos fazer em nosso JavaScript para que ele funcione novamente com o FastAPI.

Passo 1: Alterando a URL base

Abra api.js e retorne API_BASE_URL ao seu valor original.

// api.js

// Especificamos a URL da nossa API FastAPI
const API_BASE_URL = 'http://127.0.0.1:8000'; // <-- Sem /api!

// ... o restante do código apiRequest ...

Passo 2: Adaptação à estrutura de resposta do FastAPI

Lembre-se que nosso GET /spaceships no FastAPI retorna um array simples, e não um objeto com paginação. Isso significa que precisamos reverter o código de fetchAndDisplayFleet para sua forma original.

Altere a função fetchAndDisplayFleet em app.js:

// app.js

async function fetchAndDisplayFleet() {
    try {
        fleetListContainer.innerHTML = '<p>Carregando telemetria do FastAPI...</p>';
        const ships = await apiRequest('/spaceships'); // <-- Requisição para /spaceships

        // No FastAPI, temos um array simples, então a chave .data não é necessária!

        fleetListContainer.innerHTML = '';
        if (ships.length === 0) {
            fleetListContainer.innerHTML = '<p>Não há naves registradas.</p>';
            return;
        }

        ships.forEach(ship => {
            // Revertendo para nossa função original para criar cartões
            const card = createShipCard(ship);
            fleetListContainer.appendChild(card);
        });
    } catch (error) {
        fleetListContainer.innerHTML = `<p style="color: #ff6b6b;">Erro ao carregar a frota: ${error.message}</p>`;
    }
}

// Função original para criar cartões 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>Ano de Lançamento: ${ship.launch_year}</p>
        <p>Status: ${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}">Desativar</button>
        </div>
    `;
    return card;
}

Passo 3: Verificação das operações CRUD

Como nossos modelos Pydantic no FastAPI e os campos no formulário HTML coincidem (name, type, launch_year, status), as funções handleSaveShip e handleDeleteShip devem funcionar sem alterações, pois já estão direcionadas para o endpoint /spaceships.

---

4. Conclusões da comparação: O que isso significa para o desenvolvedor frontend?

• Universalidade do REST: Você viu claramente que, para o frontend, não importa em qual tecnologia o backend foi escrito (PHP/Laravel ou Python/FastAPI), desde que ele siga os princípios REST.
• Importância da documentação: As principais diferenças estavam nas URLs dos endpoints e na estrutura das respostas JSON. É exatamente isso que deve ser descrito na documentação da API. Sem ela, o desenvolvedor frontend trabalhará "às cegas".
• Flexibilidade do frontend: Seu código JavaScript deve ser flexível o suficiente para se adaptar facilmente a diferentes formatos de dados (por exemplo, verificar se existe uma chave data, ou se é apenas um array).

Conclusão: A habilidade de trabalhar com a API REST é uma chave universal que abre portas para a interação com qualquer backend moderno.

---

Quiz para fixação

1. A principal diferença na URL entre nossa API Laravel e a API FastAPI foi em...

a) No uso de portas diferentes b) Na presença do prefixo `/api` no Laravel c) No uso de HTTPS pelo FastAPI

2. Qual foi a principal mudança no código JS necessária ao alternar da resposta paginada do Laravel para um array simples do FastAPI?

a) Parar de acessar `responseData.data` e usar `responseData` diretamente b) Usar outro método `fetch` c) Alterar o `Content-Type` nos cabeçalhos

3. Este experimento prova que, para o desenvolvedor frontend...

a) É importante conhecer tanto PHP quanto Python b) É importante entender os princípios REST e saber ler a documentação da API c) Laravel e FastAPI são absolutamente idênticos

4. A configuração do CORS é uma tarefa...

a) Do desenvolvedor frontend b) Do administrador de sistemas c) Do desenvolvedor backend

5. Se o FastAPI usasse paginação, como no Laravel, o que teríamos que fazer no frontend?

a) Nada, o código funcionaria sozinho b) Mudar a lógica novamente para extrair o array da chave `data` (ou similar) c) Mudar de `fetch` para a biblioteca Axios

Verificar

---

🚀 Resumo do Capítulo:

Você conseguiu alternar os "protocolos de comunicação" do seu Centro de Controle de Missão (CCM) e comparar na prática o trabalho com dois sistemas de backend diferentes.

• ✅ Você consolidou a habilidade de configurar API_BASE_URL para alternar entre servidores.
• ✅ Você entendeu a importância da estrutura da resposta (data vs array simples) e como adaptar o frontend a ela.
• ✅ Você percebeu que um bom desenvolvedor frontend deve estar preparado para trabalhar com qualquer API RESTful, estudando cuidadosamente sua documentação.

Habilidade de conexão universal adquirida! Agora que sabemos como configurar a comunicação básica, é hora de falar sobre protocolos mais complexos — CORS, autenticação e segurança.

📌 Verificação:

• Certifique-se de que seu servidor FastAPI esteja rodando.
• Certifique-se de ter retornado API_BASE_URL e a lógica de tratamento de resposta em app.js para a variante do FastAPI.
• Verifique se seu frontend está novamente executando corretamente todas as operações CRUD com o backend FastAPI.

⚠️ Em caso de erros:

• CORS error: Certifique-se de que o servidor FastAPI esteja rodando com as configurações CORS corretas.
• Erro Cannot read properties of undefined (reading 'length'): Possivelmente, você esqueceu de remover a chamada a .data de responseData.
• 404 Not Found: Verifique API_BASE_URL — o FastAPI não tem o prefixo /api.