Neste artigo, exploraremos como o JSONPlaceholder funciona, como utilizá-lo e quais são os benefícios de simular uma API com dados fake. Assim, veremos também exemplos de uso em JavaScript, mostrando como obter postagens, comentários, criar novos registros e muito mais.

Então, além deste, aqui no blog temos diversos outros artigos sobre desenvolvimento, arquitetura de software e afins. É possível que te interesse ler também As 10 leis da usabilidade, Acessibilidade Web, CSS para o BEM e SMACSS.

O JSON Placeholder

O JSONPlaceholder é um sistema online gratuito que fornece dados fictícios para testes e protótipos. Então, com ele, você pode simular chamadas de API e obter respostas falsas para seus aplicativos ou projetos. Desse modo, ele oferece vários recursos, incluindo postagens, comentários, álbuns, fotos, tarefas e usuários. Portanto, cada recurso tem uma rota correspondente que você pode acessar via HTTP. Por exemplo, /posts retorna 100 postagens fictícias, e /users fornece informações sobre 10 usuários fictícios. A solução se baseia no uso do JSON Server e do LowDB.

O JSON Server

O JSON Server é uma ferramenta que permite criar rapidamente uma API REST falsa (Mock) com base em um arquivo JSON. Ele é bastante utilizado para desenvolvimento e testes, especialmente quando você precisa simular uma API real sem ter um backend completo.

O LowDB

Já o LowDB é uma ferramenta leve e flexível para bancos de dados em JavaScript e TypeScript. Ele permite criar bancos de dados baseados em arquivos JSON, tornando-o ideal para projetos simples, prototipagem e desenvolvimento frontend.

EndPoints

OS endpoint disponibilizados pela estrutura possuem limitações particulares. Veja quais são as principais totas e os limites associados.

/posts: 100 postagens
/comments: 500 comentários
/albums: 100 álbuns
/photos: 5000 fotos
/todos: 200 tarefas
/users: 10 usuários

Exemplos

Veja alguns exemplos de uso jsonplaceholder utilizando os endpoints disponibilizados pelo próprio site, utilizando o fetch em javascript.

// Obtém o post com ID 1 e exibe seus detalhes
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(post => console.log(post));

// Obtém os comentários associados ao post com ID 1
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
  .then(response => response.json())
  .then(comments => console.log(comments));

// Cria um novo post com título, conteúdo e ID do usuário especificados
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'Novo Post',
    body: 'Conteúdo do novo post',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
}).then(response => response.json())
  .then(newPost => console.log(newPost));

// Atualiza o título do post com ID 1
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({ title: 'Título atualizado' }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
}).then(response => response.json())
  .then(updatedPost => console.log(updatedPost));

// Remove o post com ID 1.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
}).then(response => {
  if (response.status === 200) {
    console.log('Post excluído com sucesso.');
  } else {
    console.log('Erro ao excluir o post.');
  }
});

Conclusão de JSON Placeholder

O JSONPlaceholder é uma ferramenta poderosa para desenvolvedores que precisam simular chamadas de API em seus projetos. Assim, com dados falsos (fake) disponíveis em endpoints específicos, você pode testar, prototipar e aprimorar suas aplicações sem depender de um backend real. Desse modo você economiza tempo e recursos, além de garantir que seu código esteja funcionando corretamente antes de integrar com uma API real.