capitulo_18_json

Capítulo 18: Middlewares e Respostas em JSON 🛡️🦇

Neste capítulo, vamos aprender a trabalhar com dados no formato JSON e a usar Middlewares no Express para processar dados antes que eles cheguem às rotas, com o tema Batman!

---

📖 O que é JSON e Middlewares?

• JSON (JavaScript Object Notation): É o formato padrão para troca de dados na web. Em vez de enviar HTML, enviamos dados puros (como objetos JS).
• Middleware: É uma função que tem acesso ao objeto de solicitação (req), ao objeto de resposta (res) e à próxima função de middleware no ciclo de solicitação-resposta do aplicativo. É como o cinto de utilidades do Batman!

---

📖 Exemplo Guiado: Bat-Computador (API JSON)

Vamos criar um servidor que responde com os dados de um vilão em formato JSON.

1. Crie o arquivo bat_computador.js na pasta src/:

const express = require('express');
const app = express();
 
// Middleware para permitir que o Express entenda JSON no corpo das requisições (POST)
app.use(express.json());
 
const vilao = {
    nome: "Coringa",
    perigo: "Maximo",
    habilidades: ["Caos", "Gases do Riso"]
};
 
// Rota que responde com JSON
app.get('/vilao', (req, res) => {
    // res.json() envia o objeto automaticamente formatado como JSON
    res.json(vilao);
});
 
app.listen(3000, () => {
    console.log("Bat-Computador online em http://localhost:3000");
});

🕹️ Como Executar e Testar no VS Code

1. Abra o terminal integrado e execute: node bat_computador.js
2. Acesse no navegador: http://localhost:3000/vilao

Resultado Esperado: Você verá o objeto formatado no navegador (ou texto puro dependendo do navegador).

---

📊 Ilustração Visual: O que é Middleware?

Veja como o Middleware fica no meio do caminho:

graph LR
    A[Cliente] --> B["🛡️ Middleware: express.json"]
    B --> C[Rotas]

---

🛠️ Prática Obrigatória 1: Cadastro de Vilão (POST)

Pesquise como criar uma rota app.post('/vilao', ...). Use o req.body para receber os dados de um novo vilão enviado pelo usuário e responda com “Vilão [Nome] cadastrado no Asilo Arkham!“. Para testar rotas POST, você pode usar extensões como “Thunder Client” no VS Code ou o comando curl no terminal.

---

🔑 Gabarito de Código

Prática 1: cadastro_vilao.js

const express = require('express');
const app = express();
 
app.use(express.json());
 
app.post('/vilao', (req, res) => {
    const novoVilao = req.body;
    res.send(`Vilao ${novoVilao.nome} cadastrado no Asilo Arkham!`);
});
 
app.listen(3000, () => {
    console.log("Servidor rodando!");
});

---

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

(Siga o padrão estabelecido no Guia)

---

← Capitulo Anterior | Proximo Capitulo →