DS & II

Capítulo 16 - Vingadores

Leitura de 4 min

🚀 Capítulo 16: Vingadores, Unidos! (Tema: Vingadores)

NOTE

Este capítulo utiliza a temática de Vingadores para explicar a integração das camadas. Chegou a hora de unir o Frontend, o Backend e o Banco de Dados para fazer a sua aplicação Full Stack funcionar de verdade!

1. 🎯 Objetivo da Aula

Compreender o fluxo completo de uma requisição em uma aplicação Full Stack, conectando o Frontend (React), o Backend (Node/Express) e o Banco de Dados (Prisma/PostgreSQL).

2. 🏢 O Cenário Prático (Seu Desafio)

Os heróis Vingadores são incríveis trabalhando sozinhos, mas eles só conseguem vencer ameaças do nível do Thanos quando trabalham juntos. O Homem de Ferro (Backend) cria a estratégia e a lógica, o Capitão América (Frontend) lidera no campo visual de batalha e o Thor (Banco de Dados) traz a força bruta da persistência. Quando eles se unem, o grito ecoa: “Vingadores, Unidos!“.

Até agora no curso, nós aprendemos a criar cada herói separadamente:

  1. Aprendemos a fazer a interface bonita (HTML, CSS e React).
  2. Aprendemos a criar as rotas e regras do servidor (Node e Express).
  3. Aprendemos a guardar dados de forma permanente (SQL e NoSQL). Chegou a hora da batalha final! Seu desafio é unir todas essas partes para criar um sistema completo onde o usuário clica na tela e os dados são salvos lá no fundo do banco de dados!

🧠 Fundamentos: A Teoria Traduzida

O fluxo de dados em uma aplicação Full Stack integrada segue passos básicos:

🔄 O Fluxo da Batalha:

  1. O Usuário age (Frontend): O usuário preenche um formulário de cadastro no site e clica no botão “Enviar”.
  2. O Portal se abre (API): O JavaScript do Frontend usa o comando fetch para enviar esses dados via método POST para a URL do servidor (Ex: http://localhost:3000/usuarios).
  3. O Guarda recebe (Backend): O servidor Express recebe a requisição, passa pelos middlewares de segurança e lê os dados que o usuário digitou.
  4. O Arquivo é gravado (Banco de Dados): O Backend usa o ORM (Prisma) para traduzir os dados e salvá-los em uma nova linha da tabela do banco de dados.
  5. A Resposta volta: O banco avisa o backend que deu certo, e o backend responde ao frontend com o código (Sucesso). A tela do usuário mostra: “Cadastro realizado com sucesso!“.

4. 📖 Exemplo Guiado: O Código Integrado

Veja como as duas pontas se conectam no código:

// NO FRONTEND (React / JS)
async function cadastrarHeroi() {
    await fetch("http://localhost:3000/herois", {
        method: "POST",
        body: JSON.stringify({ nome: "Thor", poder: "Trovão" })
    });
}
 
// NO BACKEND (Express / Node)
app.post("/herois", async (req, res) => {
    const { nome, poder } = req.body;
    // Salva no banco de dados usando o Prisma
    const novoHeroi = await prisma.heroi.create({ data: { nome, poder } });
    res.status(200).json(novoHeroi);
});

5. 🛠️ Prática Obrigatória 1: Identificando a Falha

Imagine que você está testando o seu aplicativo Full Stack de catálogo de filmes. Você clica no botão “Ver Filmes” e a página fica carregando para sempre, sem mostrar nada.

  1. Se você abrir o console do desenvolvedor e ver que o comando fetch deu erro de “Connection Refused” (Conexão Recusada) na URL do servidor, qual das três camadas (Frontend, Backend ou Banco) provavelmente está desligada ou fora do ar?

6. 🛠️ Prática Obrigatória 2: O Caminho do Dado

  1. Escreva, em ordem de execução (do ao ), o caminho que o nome de um usuário percorre desde o momento em que ele digita na tela até ser guardado para sempre. Use as palavras: Backend, Banco de Dados e Frontend.

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 16 FS_Vingadores) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   └── capitulo_16_vingadores.md

💡 Checkpoint de Lógica

Em desenvolvimento local, o seu Frontend e o seu Backend rodam no mesmo computador, mas em “portas” diferentes (Ex: Frontend na porta e Backend na porta )!

10. 🔥 Desafio de Fixação

Pesquise o que significa a sigla CORS e por que ela costuma dar dor de cabeça para desenvolvedores Full Stack iniciantes na hora de conectar o Frontend com o Backend.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. O Backend (O servidor Node.js não está rodando ou a URL está errada). Gabarito da Prática 2:
  2. Frontend (Onde ele digita).
  3. Backend (Para onde o dado é enviado e processado).
  4. Banco de Dados (Onde o dado é guardado permanentemente).

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks