Como criar uma FAKE API REST para testes — JSONPlaceholder

Fora os aventureiros que tentam encontrar altas emoções no mundo Full Stack, boa parte dos profissionais de programação escolhem uma área específica para atuar: front-end, back-end, devops, etc. Felizmente as opções são abundantes.

A grande questão é que na vida real um único produto/serviço precisa da poderosa união de todas essas áreas para que possa funcionar de forma satisfatória. E é ai que mora um dos grandes desafios no desenvolvimento de software.

Para facilitar este trabalho de sinergia entre as áreas, hoje gostaria de mostrar como funciona o JSONPlaceholder, uma simples ferramenta que simula o back-end de uma aplicação, deste modo permitindo que o front-end consiga trabalhar nas questões visuais antes mesmo do back-end estar finalizado — claro, desde que exista um consenso em como as APIs irão funcionar (endpoints, estrutura do json, tipos de respostas, etc). Além de ser uma boa ferramenta de estudos para treinar pequenas aplicações e protótipos.

É tudo muito simples e sem complicação. Basta seguir os passos adiante para sair usando.

Versão em Vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Conhecendo o JSONPlaceholder

A proposta do JSONPlaceholder — projeto de código aberto hospedado no GitHub e com mais de 44 mil estrelas — é bem simples: ser uma ferramenta de fácil acesso para testes e prototipação.

É possível utilizá-la de duas formas: com dados prontos da plataforma ou com dados personalizados. Vamos ver como trabalhar com cada uma das formas.

Consumindo respostas

O JSONPlaholder já possui toda uma estrutura de dados que podem ser utilizados na sua aplicação. Estes recursos (endpoints) são:

1. /posts : 100 posts
2. /comments : 500 comments
3. /albums : 100 albums
4. /photos : 5000 photos
5. /todos : 200 todos
6. /users : 10 users

Estes recursos possuem relações entre si. O que significa na prática que os posts possuem comentários, álbuns possuem fotos, e assim por diante. Estas relações podem ser observadas nas rotas que podemos consumir, como por exemplo:

1. GET /posts
2. GET /posts/
3. GET /posts/1/comments
4. GET /comments?postId=1
5. GET /posts?userId=1
6. POST /posts
7. PUT /posts/1
8. PATCH /posts/1
9. DELETE /posts/1

Como é possível notar, todos os tradicionais métodos HTTP estão disponíveis para uso, sendo que cada um dos métodos tem um objetivo (conforme padrão em APIs REST).

Para usar o serviço em sua aplicação, basta fazer uma requisição para qualquer um dos endpoints disponíveis, como segue o exemplo:

Configurando respostas

Para usar dados próprios na plataforma, o processo é bem simples e até certo ponto criativo. O primeiro passo será criar um novo repositório no GitHub. Feito isso, crie um arquivo chamado db.json . É neste arquivo que criaremos nossa "estrutura" de endpoints.

Para mostrar um exemplo, imagine que estamos desenvolvendo uma API para acessar os cursos da Code Prestige. Poderíamos ter algo como:

E pronto! Para acessar o conteúdo da sua Fake API basta acessar:
https://my-json-server.typicode.com//

No caso deste artigo, podemos acessar em:
https://my-json-server.typicode.com/DiegoPinho/fakeapi-testes

Se tudo estiver certo, uma página como essa será criada para sua Fake API:

Esta página é como a "documentação" da API. Agora basta criar uma aplicação que consuma esta API, como no exemplo abaixo onde fazemos uma requisição para listar os cursos:

Bem legal, né? Mas antes que você saia usando ela por aí, vale ressaltar quais são as limitações:

1. As mudanças NÃO SÃO PERSISTIDAS
2. As requisições possuem cache de 1 minuto
3. db.json tem limites (você não pensou em subir o back-end de produção aqui, né?)
4. Todos os servidores são públicos
5. Repositórios privados ainda não são suportados

Se nenhuma destas limitações for um real problema para o que você quer fazer, não há porque perder tempo. É só sair usando ;)

Conclusão

Depender do back-end para o desenvolvimento do front-end pode ser um grande empecilho para o desenvolvimento de um projeto (e claro, o vice-versa também pode se tornar um grande problema). Felizmente mais soluções como o JSONPlaceholder estão aparecendo, pois assim até mesmo os mais inexperientes em back-end poderão simular as respostas e fazer o seu trabalho com mais tranquilidade.