Fundamentos & Prática Guiada

O Modelo de Referência da Aula 07

Entenda por que o JSON é a língua franca da Web moderna e aprenda como configurar seu servidor Express para receber e responder dados estruturados com testes no Thunder Client.

01 Passo

🌐 A "Língua Universal" da Web: O Formato JSON

O Front-End pode ser escrito em Kotlin (Android), Swift (iOS) ou React (Web). O Back-End está em Node.js. Para que eles troquem dados complexos sem ruídos, utilizamos o JSON (JavaScript Object Notation).

✅ Regras Obrigatórias do JSON
  • Chaves sempre com aspas duplas: "nome": "Teclado"
  • Textos sempre com aspas duplas: "marca": "Logitech"
  • Números e Booleanos sem aspas: "preco": 150, "ativo": true
  • Sem vírgula sobrando no último elemento!
❌ Erros Comuns Que Quebram APIs
  • Chaves sem aspas: nome: "Teclado" (Invalida o JSON).
  • Aspas simples: 'nome': 'Teclado' (O JSON rejeita).
  • Vírgula sobrando no final: { "preco": 150, }.
  • Números com vírgula: "preco": 150,50 (Use ponto: 150.50).
02 Nível 1

🥉 Nível 1: O Servidor Falando JSON (`res.json`) & Rota de Status

Nas aulas anteriores, respondíamos com texto simples usando res.send('...'). Agora, nossa API responderá com objetos estruturados através do método res.json(), configurando o status 200 OK e o cabeçalho HTTP Content-Type: application/json automaticamente.

server.js - Rota GET retornando JSON 
// Rota GET que responde com objeto JSON
app.get('/', (req, res) => {
    res.json({ 
        mensagem: 'API da Aula 07 rodando com sucesso', 
        status: 'ativo',
        ano: 2026
    });
});
03 Passo

👂 Prática 2: Ensinando o Express a "Ouvir" JSON (`app.use`)

O Bloqueio do Express: Por padrão de fábrica, o Express não sabe como extrair os dados enviados no corpo (Body) de uma requisição POST. Se você tentar acessar req.body sem preparar o servidor, o resultado será undefined!

A Solução (Middleware Nativo): Adicione a linha abaixo logo após instanciar a constante app = express(); e antes da declaração de qualquer rota:
server.js - Ativação do Middleware de Leitura de JSON 
const express = require('express');
const app = express();

// OBRIGATÓRIO: permite ao Express ler o corpo (Request Body) em formato JSON
app.use(express.json());
04 Nível 2

🥈 Nível 2: Persistência em Memória (Array) e Rota de Listagem

Para simular um banco de dados real, criamos um array em memória no topo do servidor. No POST, adicionamos o novo item com .push(). Em seguida, criamos uma rota GET /produtos para listar todos os cadastros acumulados!

server.js - Array em memória e Rota GET de Listagem 
// Banco de dados em memória (sessão ativa)
const produtos = [];

// Rota GET que lista todos os itens cadastrados
app.get('/produtos', (req, res) => {
    res.json({
        total: produtos.length,
        itens: produtos
    });
});
05 Nível 3

🥇 Nível 3: Validação de Payloads no Back-End (400 Bad Request vs 201 Created)

Uma API profissional nunca aceita dados incompletos! Se o cliente esquecer um campo obrigatório (ex: nome ou preco), o servidor deve rejeitar com status 400 Bad Request. Se os dados estiverem corretos, salva no array e responde com 201 Created.

server.js - Rota POST com Validação Rigorosa 
app.post('/produtos', (req, res) => {
    const dados = req.body;

    // 1. Validação de campos obrigatórios
    if (!dados.nome || !dados.preco || dados.preco <= 0) {
        return res.status(400).json({
            sucesso: false,
            erro: "Campos obrigatórios ausentes ou inválidos!",
            camposExigidos: ["nome", "preco"]
        });
    }

    // 2. Criação do registro com ID automático
    const novoProduto = {
        id: produtos.length + 1,
        nome: dados.nome,
        preco: Number(dados.preco),
        cadastradoEm: new Date().toLocaleTimeString()
    };

    // 3. Salva no array em memória
    produtos.push(novoProduto);

    // 4. Responde com status 201 Created
    res.status(201).json({
        sucesso: true,
        mensagem: "Produto cadastrado com sucesso!",
        produto: novoProduto
    });
});
⭐ Lousa

💻 Código de Referência Completo da Lousa (server.js do Professor)

Este é o modelo padrão completo e funcional que o professor constrói na lousa com a turma. Os alunos devem consultar esta estrutura como guia para desenvolver suas próprias missões individuais:

server.js (Modelo Completo dos 3 Níveis) 
const express = require('express');
const app = express();
const PORT = 3000;

// OBRIGATÓRIO: Habilita leitura de payloads JSON (req.body)
app.use(express.json());

// =============================================================================
// NÍVEL 1: Rota de Status (GET)
// =============================================================================
app.get('/', (req, res) => {
    res.json({
        mensagem: "API Modelo da Aula 07 rodando",
        status: "ativo",
        data: new Date().toLocaleDateString()
    });
});

// =============================================================================
// NÍVEL 2: Array em Memória + Rota GET de Listagem
// =============================================================================
const produtos = [];

app.get('/produtos', (req, res) => {
    res.json({
        total: produtos.length,
        itens: produtos
    });
});

// =============================================================================
// NÍVEL 3: Rota POST com Validação de Payload (Status 400 vs 201)
// =============================================================================
app.post('/produtos', (req, res) => {
    const dados = req.body;

    // Validação de campos
    if (!dados.nome || !dados.preco) {
        return res.status(400).json({
            sucesso: false,
            erro: "Campos obrigatórios ausentes no JSON!",
            camposExigidos: ["nome", "preco"]
        });
    }

    const novoProduto = {
        id: produtos.length + 1,
        nome: dados.nome,
        preco: Number(dados.preco),
        criadoEm: new Date().toLocaleTimeString()
    };

    produtos.push(novoProduto);

    res.status(201).json({
        sucesso: true,
        mensagem: "Produto cadastrado com sucesso!",
        produto: novoProduto
    });
});

app.listen(PORT, () => {
    console.log(`Servidor rodando em http://localhost:${PORT}`);
});
07 Testes

⚡ Guia de Testes Completo no Thunder Client (VS Code)

No laboratório, cada aluno criará uma Collection chamada Minha API - Aula 07 e configurará 4 requisições para demonstrar ao professor:

  1. Teste 1 (Nível 1): Disparar GET http://localhost:3000/ e verificar o status 200 OK com o JSON de status.
  2. Teste 2 (Nível 3 - Sucesso): Disparar POST http://localhost:3000/produtos com o JSON completo (ex: { "nome": "Teclado", "preco": 150 }) e verificar status 201 Created.
  3. Teste 3 (Nível 3 - Erro Proposital): Disparar POST http://localhost:3000/produtos com JSON faltando o campo "nome" (ex: { "preco": 150 }) e verificar status 400 Bad Request.
  4. Teste 4 (Nível 2): Disparar GET http://localhost:3000/produtos e verificar que a lista contém todos os produtos adicionados com seus IDs e datas!
  5. Exportação: Clicar nos três pontinhos da Collection no Thunder Client, escolher Export e salvar o arquivo .json para entrega.
Atividades Práticas Individuais

Central de Missões dos Alunos

Cada aluno possui um tema comercial exclusivo com rotas e contratos de dados específicos. Sorteie sua missão aleatoriamente ou selecione o número da sua chamada!

🎲 Qual é a sua missão de hoje?

São 32 cenários do mundo real (Pizzaria, Loja de Games, Clínica Pet, Oficina, Farmácia...). Clique no botão abaixo para rodar a roleta aleatória e descobrir o seu desafio!

Selecione pelo Número do Aluno (01 a 32):

🔍
Ambiente de Teste & Sintaxe

Laboratório & Validador de Payloads JSON

Teste seu payload antes de colar no Thunder Client. O validador detecta erros comuns da Metodologia SENAI (como aspas simples, vírgulas sobrando e chaves sem aspas) e simula o processamento no Express.

📝 Editor de Payload JSON

Status da Validação

200 OK - JSON Válido

📡 Resposta Simulada do Servidor Express 

// Aguardando análise de dados...