Como criar um Mock de API em UM minuto
Tags: api, braziliandevs, webdev, beginners
Published: 2023-10-13 07:53:54

Desenvolvedores front-end geralmente encontram esse problema. A API é projetada, mas ainda não foi implementada. Eu preciso criar alguns dados falsos para a minha interface, o que significa que tenho que configurar um servidor de mock e adicionar alguns exemplos de resposta. Se não houver exemplos de resposta na documentação da API, eu mesmo terei que criar alguns dados de resposta.

Toda vez que faço isso, penso que não é o que um desenvolvedor front-end deveria fazer. 

Deveria haver uma maneira melhor de conseguir isso.

Experimentei muitas ferramentas. Usei o Postman como servidor de mock, mas todos os dados de resposta precisam ser adicionados manualmente. Tentei o faker.js, mas tenho que escrever código de mock para cada campo.

Na minha expectativa, um excelente servidor de mock deveria gerar os próprios dados. Os desenvolvedores deveriam se concentrar nas coisas realmente essenciais.

Ótimas notícias: agora, você pode **criar um mock de API em apenas um minuto**. E você não precisa escrever nenhum script.

## Por que fazer mock?

Fazer mock é uma boa escolha se você estiver em uma das seguintes situações:

1. A API está projetada, mas não desenvolvida. Isso geralmente acontece em equipes ágeis.

2. APIs restritas ou pagas. Por exemplo, APIs bancárias. Você não pode obter dados reais antes que o desenvolvimento seja concluído. Então, você precisa de dados falsos.

3. Ambiente offline ou intranet. Dados falsos permitem que você trabalhe em uma máquina local.

## Vamos fazer o mock!

Existem duas etapas para mockar a API:

1. Importar as definições da API.

2. Obter a URL de mock.


Muito fácil! Vamos mockar!

### Etapa 1 - Importar definições de API

A documentação da API é necessária. O OpenAPI (Swagger) é o melhor, e qualquer outro formato também serve. 

Suponha que você tenha um arquivo YAML ou JSON. Vamos importá-lo nesta ferramenta: Apidog. Se você ainda não tem uma API, também pode criá-la no Apidog.

1. Crie um novo projeto no Apidog.

![Crie um novo projeto no Apidog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugpxhlzuuo28pmmofqkd.png)

2. Vá em "Settings" - "Import" e arraste o arquivo da sua API.

!["Configurações" - "Importar"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ictyuq3tf82mgazaqo9.png)

Mais de dez formatos de documentação de API são suportados. Clique em "Next" e sua API será importada.

Agora você verá as APIs no Apidog. 

![APIs no Apidog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8xinwhcr928je7tv0bn.jpeg)

### Etapa 2 - Obter a URL de mock

1. Clique em uma API no Apidog. Você verá uma página de definição da API, na qual há uma seção chamada "Mock".

2. Clique na URL na parte "Local Mock" que começa com "127.0.0.1" para copiá-la.

![Local Mock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2sabuo55fbtzz5hvv3h.png)

3. Cole-a no seu navegador.

Pronto, está feito! Você verá um JSON de mock!

![Você verá um JSON de mock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0h8wj6ngh16fl29xdlh.png)

Um campo "city" é preenchido com o nome de uma cidade, um campo "id" é preenchido com um número inteiro e "createdAt" é preenchido com uma data e hora.

Agora você pode usar os dados da API no seu App. 

E você não precisa escrever nenhum script! Os dados em todos os campos são gerados automaticamente.

Além disso, se você clicar em "reload" no navegador, os dados serão atualizados!

!["reload" no navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f3dq93icou22xmtgygo.png)

Incrível.

## Como isso funciona

Na primeira vez que encontrei esse recurso, fiquei bastante surpreso. Por que o Apidog consegue gerar isso? Eu não configurei nada!

Depois descobri o motivo.

![Como isso funciona](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iga8r5aitoc7ni9lnc9r.png)



Existe um conjunto de regras de mock internas no Apidog, como as acima. Se o nome do seu campo na definição de resposta corresponder a uma delas, os dados do campo serão mockados automaticamente. 

E o Apidog inicia automaticamente um servidor de mock na sua máquina local. Então você não precisa fazer nada na camada de servidor.

E se você não gostar dos dados que ele mocka automaticamente? Isso também é fácil.

Você pode preencher diretamente o valor de mock do campo com Faker.js assim:

![mock field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyadfji3wdlar9peztgb.png)

Toda gramática do Faker.js é suportada para que você possa selecioná-las facilmente.

E se algum campo tiver um valor fixo, você também pode preencher o "mock" com o valor especificado.

![mock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb5kxhjxbmfrjueue14n.png)

Pronto, tudo feito.

Espero que você faça mock feliz com o [Apidog](https://apidog.com/?utm_source=dev_to&utm_medium=br&utm_content=Mock-API-in-one-minute). 

É realmente uma boa ferramenta. E descobri que não é só bom para mock, mas para tudo no desenvolvimento de APIs.
[Faça o download do Apidog aqui](http://www.apidog.com/?utm_source=dev_to&utm_medium=br&utm_content=Mock-API-in-one-minute)