É uma situação bastante comum durante o início dos estudos de frontend, e especialmente quando estamos começando a criar os primeiros projetos pessoais, nos depararmos com uma barreira significativa que é precisar de uma API externa para manipular os dados fornecidos e exibí-los nas telas, e aí surge as famigeradas APIs da NASA, IMDB (R.I.P) e entre outras conhecidas, são excelentes APIs por terem uma boa documentação e uma quantidade enorme de informações que podemos manipular da forma como quisermos, no entanto, essas mesmas APIs acabam passando a visão de projetos de youtube/cursos que devido a uma quantidade considerável de pessoas que o fazem acaba dando a impressão de projetos em que se está sendo copiado e colado o que está escrito na tela, que veja bem, não são projetos ruins ainda são bons projetos para se começar e aprender, porém com um mercado cada vez mais competitivo precisamos encontrar uma forma de nos diferenciar, dito isso, surge a idéia do MockAPI.
MockAPI se trata de uma ferramenta que nos permite criar uma API REST com valores "mockados"[1] e gerados de forma aleatória de uma forma muito simples e fácil de personalizar, além de também não exigir que tenhamos um servidor rodando na máquina, a API será servida inteiramente por eles e podemos acessá-los de qualquer lugar e a qualquer momento, dito isso, iremos criar uma API que simula um endpoint que nos fornece dados de Usuários.
[1]: Valores falsos, normalmente usados para simular valores reais que estão inseridos em banco de dados ou manipulados por operações.
DISCLAIMER: O MockAPI é um "freemium", ou seja, é uma plataforma que tem uma parte dos recursos sendo fornecidos gratuitamente e uma outra parte sendo paga, no entanto, para projetos menores e que não exigem a necessidade de muitos endpoints a serem consumidos ele irá atender muito bem.
1. Cadastro
Entre no MockAPI e faça o seu cadastro clicando no botão "Get Started" no canto superior direito, pode ser pelo GitHub ou por qualquer outra forma, não há diferença.
2. Informações sobre o Projeto
Após o cadastro e iremos nos deparar com a tela abaixo, :
O MockAPI divide as APIs que criamos através de Projetos, então cada projeto terá um domínio específico e esse domínio pode fornecer XPTO recursos, exemplo:
Explicado isso, agora podemos criar o nosso projeto, clicando no botão de "+" em azul no canto superior.
3. Criando o nosso projeto
A tela abaixo aparecerá e temos dois campos a serem preenchidos, o primeiro se trata do nome do projeto, esse nome não irá influenciar na URL gerada, será apenas para fins de identificação dentro da plataforma, e abaixo temos um campo opcional onde podemos inserir algum prefixo que esse sim será concatenado na URL, não encontrei ainda uma utilidade para o prefixo então normalmente não coloco, fica seu critério.
Após a criação do projeto e entrarmos nele iremos para a tela abaixo onde já conseguiremos criar o nosso primeiro recurso que será consumido:
IMPORTANTE: A URL no topo da página NÃO deve ser compartilhada, ela é única e por ser acessível de qualquer lugar e por qualquer pessoa você pode acabar tendo problemas com a plataforma caso alguém utilize ela em excesso, para quem está um pouco mais a frente nos estudos deve ter sentido a ausência de uma chave para validar o usuário, no entanto, essa validação não existe e API é exposta para qualquer usuário que tenha o link.
4. Criando e manipulando o recurso
Ao clicarmos em "New Resource" a seguinte tela será aberta, e aqui começamos a modelar o formato dos dados que devem ser retornados assim como o nome do recurso.
No primeiro campo será onde iremos colocar o nome do recurso, esse nome será concatenado com a URL que vimos no passo anterior, então evite caracteres especiais, acentos e etc.
Nos campos abaixo do nome podemos criar quantos campos quisermos que cada objeto dentro desse recurso tenha, além de também utilizar o Faker.js, que é onde o MockAPI realmente brilha, para gerarmos os dados mais realísticos possíveis desde nomes de pessoas, datas, fotos de pessoas, comidas e etc. Enfim, dá para mockar muito valores, como estamos criando uma coleção de usuários irei criar a API com os seguintes dados:
(1): Primeiro Nome
(2): Sobrenome
(3): Foto de pessoas aleatórias, no caso virá uma URL e podemos inserí-las nas tags de img
(4): Email
(5): Data de Nascimento
Feito isso agora, podemos clicar no botão de "Create" e dizer exatamente quantos objetos serão criados a partir do modelo que criamos, sendo o máximo 100 objetos.
Por fim agora basta criarmos a requisição concatenando a URL do topo da página com o nome do nosso recurso, podendo também enviarmos requisições do tipo GET quando POST, PUT, PATCH e DELETE, basta alterarmos os headers para isso.
Resultado final:
DISCLAIMER: O MockAPI por padrão não faz nenhum tipo de validação nos métodos de alteração/criação então qualquer valor enviado é armazenado na coleção.
Conclusão
MockAPI é o que eu tenho utilizado com mais frequência para quando eu quero criar algo mais simples e/ou para aprender alguma tecnologia nova ou para testar algum cenário e etc, muito pela facilidade de manipular e modelar a API da forma como eu quiser gerando dados aleatórios para cada objeto dentro da API, além de que as funcionalidades essenciais são gratuitas.
Top comments (0)