Introdução a APIs
com Node.js
Sua primeira API: de iniciante a programador(a).
Olá, Aluno(a)! Vamos programar?
Você usa esses apps todos os dias...
Clique em um app para ver o que acontece por trás da tela.
...mas você já parou para pensar como isso funciona?
Nada disso é mágica.
Tudo isso funciona com
A Analogia do Restaurante
Clique em um cartão para destacar o personagem na cena.
Como funciona o fluxo:
1. Pedido
Você pede os dados
(Request)2. Processamento
A cozinha prepara
(Server)3. Resposta
O garçom traz a comida
(Response)
Então, o que é de verdade?
Uma API é simplesmente um intermediário que permite que dois sistemas diferentes conversem entre si.
O Sistema A pede, a API leva o pedido e o Sistema B responde.
Chega de teoria.
Configurando o Projeto.
Node.js
O motor do código.
Express
Cria APIs super fácil.
- 1. Crie uma pasta e abra no VS Code.
- 2. Abra o Terminal Integrado (Ctrl + `).
- 3. Rode os dois comandos ao lado.
# 1. Inicia o projeto Node (cria o package.json) $ npm init -y ✔ package.json criado # 2. Instala o framework Express $ npm install express ✔ express instalado (pasta node_modules)
Passo Final: Crie um arquivo chamado index.js
Escrevendo o Servidor
const express = require('express');
const app = express();
app.get('/hello', (req, res) => {
res.send('Olá, mundo! A minha primeira API!');
});
app.listen(3000);
Só 8 linhas. No próximo slide a gente destrincha cada pedaço.
Entendendo cada linha
const express = require('express'); const app = ; app.get(, () => { res.send('Olá, mundo! A minha primeira API!'); }); app.;
Passe o mouse ou clique nas partes tracejadas do código (ou nas explicações).
Vamos ver se o restaurante está aberto.
Vá ao terminal, digite node index.js e abra no navegador:
Olá, mundo! A minha primeira API!
Boom.
Você acabou de criar um servidor real.
O que aprendemos na Parte 1:
- API: O mensageiro (garçom) entre sistemas.
- Fluxo: Pedido entra ➔ Processamento ➔ Resposta sai.
- Ferramentas: Node.js + Express fazem acontecer.
Fato: Você já é Programador(a)!
Quiz rápido · Parte 1
Parte 2:
Múltiplas Rotas, JSON e
Os Métodos HTTP
Vamos entender como e por que as APIs conversam — incluindo o método mais novo do HTTP, o QUERY.
Revisando a Parte 1...
Criamos uma API com uma única rota: /hello. Mas a internet precisa de mais de uma porta para se comunicar, certo?
const express = require('express');
const app = express();
// Várias portas abertas no mesmo restaurante!
app.get('/hello', (req, res) => { res.send('Oi!'); });
app.get('/sobre', (req, res) => { res.send('Somos uma pizzaria.'); });
app.get('/menu', (req, res) => { res.send('Pizza de Calabresa'); });
app.listen(3000);
Pizza de Calabresa
Notou aquele "app.get"?
Ele significa "Pegar" ou "Obter".
Mas e se eu quiser Criar um usuário, Atualizar meu perfil ou Deletar uma foto?
Uma Viagem no Tempo
Use o mouse: clique em cada ano da linha para viajar no tempo. Toque em cada ano da linha para viajar no tempo.
Nasce a WWW
Sir Tim Berners-Lee inventa a WWW. Naquela época, a internet era só para ler documentos estáticos.
A internet precisou evoluir para se tornar interativa — e ainda está evoluindo.
Roy Fielding
Cientista da Computação
A Tese que Mudou a Web
No ano 2000, Roy Fielding, um dos autores do HTTP, publicou sua tese de doutorado.
"Architectural Styles and the Design of Network-based Software Architectures"
Ele definiu o conceito de REST (Representational State Transfer). Uma forma elegante de usar os métodos do HTTP para Criar, Ler, Atualizar e Deletar informações (CRUD).
Clique em uma letra para ver qual método HTTP faz esse trabalho.
Os 5 Métodos do Padrão REST + 1 novato
GET Ler ou listar dados
O clássico desde 1991.
Seguro = só lê, não altera nada no servidor. · Idempotente = repetir o mesmo pedido dá o mesmo resultado final.
O método novo: QUERY
Para buscas com muitos filtros, faltava um método que fosse só de leitura e que ainda levasse um corpo.
- ✓ seguro
- ✓ idempotente
- ✕ leva corpo
- ✕ seguro
- ✕ idempotente
- ✓ leva corpo
- ✓ seguro
- ✓ idempotente
- ✓ leva corpo
No restaurante: é como entregar ao garçom um bilhete com todas as suas preferências e perguntar “o que vocês têm que combina comigo?”. Você só está perguntando — nenhum pedido é criado e nada muda na cozinha.
Monte uma busca e compare
1. Escolha os filtros
2. Veja a mesma busca em cada método
QUERY /usuarios HTTP/1.1
Host: localhost:3000
Content-Type: application/json
{ "cidade": "Suzano", "idadeMin": 18 }
QUERY: bom saber antes de usar
// BUSCAR COM FILTROS — o método novo!
app.query('/usuarios', (req, res) => {
const filtro = req.body || {};
const achados = usuarios.filter(u =>
Object.keys(filtro).every(campo => u[campo] === filtro[campo])
);
res.json(achados);
});
const resposta = await fetch('http://localhost:3000/usuarios', {
method: 'QUERY',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cidade: 'Suzano' })
});
console.log(await resposta.json());
- Diga o formato do corpoSempre envie o cabeçalho
Content-Typejunto com o filtro. A especificação manda o servidor recusar o pedido se ele faltar. - A barra de endereço não faz QUERYEla só faz GET. Para testar, use
fetch,curl -X QUERYou um client de API. - O servidor avisa que aceitaPelo cabeçalho de resposta
Accept-Query, que lista os formatos de busca aceitos. - Ainda é novidadeNem todo servidor, proxy ou ferramenta entende QUERY. Aqui funciona: testado com Node.js 22 + Express 5.
O idioma da API: JSON
Quando enviamos dados complexos (no POST, PUT ou QUERY), não enviamos texto puro. Enviamos um objeto JSON.
JavaScript Object Notation
{
"nome": "Aluno(a)",
"idade": 25,
"sabeProgramar": true,
"habilidades": [
"Node.js",
"Express"
]
}
Mexa no formulário e veja o JSON mudar em tempo real.
Juntando tudo no Express
const express = require('express');
const app = express();
// Necessário para o Express entender JSON recebido
app.use(express.json());
// Nosso "banco de dados" de mentirinha (fica na memória)
const usuarios = [
{ id: 1, nome: 'Ana', cidade: 'Mogi das Cruzes' },
{ id: 2, nome: 'Bruno', cidade: 'Suzano' },
];
let proximoId = 3;
// ... aqui entram as rotas (veja as outras abas) ...
app.listen(3000);
// LER (Read)
app.get('/usuarios', (req, res) => {
res.json(usuarios);
});
// CRIAR (Create)
app.post('/usuarios', (req, res) => {
const novo = { id: proximoId++, ...req.body };
usuarios.push(novo);
res.status(201).json({ msg: 'Criado!', dados: novo });
});
// TROCAR O DADO INTEIRO (Update)
app.put('/usuarios/:id', (req, res) => {
const id = Number(req.params.id);
const posicao = usuarios.findIndex(u => u.id === id);
if (posicao === -1) return res.status(404).json({ erro: 'Usuário não encontrado' });
usuarios[posicao] = { id, ...req.body };
res.json(usuarios[posicao]);
});
// MUDAR SÓ UMA PARTE (Update)
app.patch('/usuarios/:id', (req, res) => {
const usuario = usuarios.find(u => u.id === Number(req.params.id));
if (!usuario) return res.status(404).json({ erro: 'Usuário não encontrado' });
Object.assign(usuario, req.body);
res.json(usuario);
});
// DELETAR (Delete)
app.delete('/usuarios/:id', (req, res) => {
const id = Number(req.params.id);
const posicao = usuarios.findIndex(u => u.id === id);
if (posicao === -1) return res.status(404).json({ erro: 'Usuário não encontrado' });
usuarios.splice(posicao, 1);
res.json({ mensagem: `Usuário ${id} deletado!` });
});
// BUSCAR COM FILTROS (Query) — o método novo!
app.query('/usuarios', (req, res) => {
const filtro = req.body || {};
const achados = usuarios.filter(u =>
Object.keys(filtro).every(campo => u[campo] === filtro[campo])
);
res.json(achados);
});
A base é a mesma da Parte 1, com duas novidades: express.json() para ler JSON e uma lista usuarios guardada na memória. Clique nas abas para ver cada rota.
Como testar tudo isso?
A barra de endereço do navegador só consegue fazer requisições GET.
Para testar POST, PUT, DELETE e QUERY, usamos os Clients de API.
Insomnia ou Postman
Programas independentes famosíssimos que simulam qualquer tipo de requisição HTTP, com suporte a envio de JSON.
Extensão Thunder Client
Testa a sua API direto dentro do VS Code! Sem precisar instalar programas pesados por fora.
Terminal com curl
Já vem no Windows, Mac e Linux e aceita qualquer método — inclusive o novato: curl -X QUERY. No PowerShell, digite curl.exe.
No próximo slide tem um mini client aqui mesmo, para você treinar sem instalar nada.
Sua vez: teste a API
Este mini client conversa com uma cópia do nosso index.js que roda aqui na página.
Requisição
Resposta aguardando
Clique em um exemplo pronto ou em “Enviar”.
Dica: comece por “Listar”, depois “Criar”, e liste de novo para ver o usuário novo.
Banco de dados (na memória)
| id | nome | cidade | outros |
|---|
Simulador didático — nada é enviado para a internet. No seu computador, use um client de verdade apontando para localhost:3000.
Os Códigos de Status HTTP
É a forma do garçom te avisar de forma padronizada se o pedido deu certo ou se a cozinha pegou fogo.
-
2xxSucesso! Tudo correu bem.
-
4xxErro do Cliente! Você pediu algo errado ou que não existe.
-
5xxErro do Servidor! A API deu "crash" por algum problema de código.
Clique em um código para ouvir o que o garçom diria.
Quiz final · Parte 2
O Céu é o Limite!
Parabéns, Aluno(a)! Você agora domina as bases das APIs REST.
Com Rotas, Métodos HTTP (do GET ao QUERY), JSON e Códigos de Status, você tem tudo o que precisa para construir os bastidores da internet.