Squad Front

Appearance

Servidor de Mock (JSON Server) ​

Para os desafios de front-end que exigem integração com APIs, utilizaremos o JSON Server. Ele permite criar uma API REST completa e falsa com zero codificação em menos de 30 segundos.

Por que usar? ​

  • Simplicidade: Configuração rápida via arquivo JSON.
  • Realismo: Suporta métodos HTTP (GET, POST, PUT, DELETE, PATCH).
  • Agilidade: Permite que o desenvolvimento do front-end não dependa de um back-end pronto.

Instalação ​

Recomendamos utilizar o npx para rodar o servidor sem precisar instalá-lo globalmente, ou adicioná-lo como dependência de desenvolvimento no seu projeto:

bash
npm install -D json-server@0.17.4

Nota: Recomendamos a versão 0.17.4 para maior estabilidade com os exemplos deste guia.

Configuração ​

  1. Na raiz do seu projeto, crie um arquivo chamado db.json.
  2. Adicione a estrutura de dados que você deseja simular.

Exemplo de db.json (Tema Telemedicina) ​

json
{
  "patients": [
    {
      "id": "1",
      "name": "João Silva",
      "cpf": "123.456.789-00",
      "status": "Aguardando"
    },
    {
      "id": "2",
      "name": "Maria Souza",
      "cpf": "987.654.321-11",
      "status": "Em Atendimento"
    }
  ],
  "appointments": [
    {
      "id": "1",
      "patientId": "1",
      "date": "2024-05-20T10:00:00Z",
      "specialty": "Cardiologia"
    }
  ]
}

Como Rodar ​

Adicione um script no seu package.json para facilitar o uso:

json
"scripts": {
"server": "json-server --watch db.json --port 3001"
}

Para iniciar o servidor, execute:

bash
npm run server

O servidor estará disponível em http://localhost:3001.

  • Para listar pacientes: GET http://localhost:3001/patients
  • Para buscar um paciente: GET http://localhost:3001/patients/1
  • Para criar um paciente: POST http://localhost:3001/patients

Dicas para o Desafio ​

  1. Persistência: Lembre-se que o json-server salva as alterações diretamente no arquivo db.json.
  2. Atraso na Resposta: Você pode simular lentidão na rede (ideal para testar loadings) usando a flag --delay:
    bash
    json-server --watch db.json --port 3001 --delay 1000
  3. Integração no React: No seu código, utilize o Axios ou Fetch apontando para a URL do servidor local.

Exemplo de Implementação (Axios) ​

typescript
import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3001'
});

export function getPatients() {
  return api.get('/patients');
}