M06 / M07

Cadastro de Contatos – CRUD Completo

Esta aplicação demonstra as quatro operações fundamentais de persistência de dados — Create, Read, Update e Delete — usando o JSON Server como backend REST. O front-end é feito em HTML, CSS e JavaScript puro, sem framework.

Conceitos trabalhados

Fetch API – Leitura (GET)

fetch('/api/contatos') retorna a lista completa. fetch('/api/contatos/5') retorna um registro específico.

Criação (POST)

Método POST com Content-Type: application/json e body: JSON.stringify(obj) insere um novo registro.

Edição (PUT)

PUT /api/contatos/{id} substitui o registro completo. PATCH atualiza só os campos enviados.

Exclusão (DELETE)

DELETE /api/contatos/{id} remove o registro permanentemente do db.json.

Dados do JSON Server

Endpoint: GET /api/contatos

json db/db.json → "contatos" (amostra)

[
  {
    "id": 1,
    "nome": "Ana Souza",
    "email": "ana@email.com",
    "telefone": "(31) 9 8888-0001",
    "cidade": "Belo Horizonte",
    "estado": "MG",
    "categoria": "amigo"
  },
  {
    "id": 2,
    "nome": "Carlos Lima",
    "email": "carlos@empresa.com",
    "telefone": "(31) 9 8888-0002",
    "cidade": "São Paulo",
    "estado": "SP",
    "categoria": "trabalho"
  }
  // ... mais registros em db/db.json
]

Endpoints utilizados

Método	URL	Ação
GET	/api/contatos	Lista todos os contatos
POST	/api/contatos	Cria novo contato
PUT	/api/contatos/{id}	Atualiza contato completo
DELETE	/api/contatos/{id}	Remove contato

Exercícios sugeridos

Adicione um campo favorito (boolean) ao formulário e salve-o via PATCH.
Implemente ordenação por nome na listagem (sem recarregar do servidor).
Adicione confirmação antes de excluir usando window.confirm().
Exiba o número total de contatos cadastrados acima da tabela.
Implemente uma busca local em tempo real que filtre a tabela enquanto o usuário digita.