Compreendendo Mock API em JavaScript: Um Guia para Iniciantes

Olá, colegas desenvolvedores! Você já se viu no meio de construir uma incrível aplicação web, apenas para bater na parede porque estava esperando que uma API ficasse pronta? Frustrante, certo? Bem, é aí que APIs simuladas entram em cena, especialmente quando você está trabalhando com JavaScript. E adivinha? Ferramentas como Apidog tornam esse processo ainda mais simples.

Então, vamos mergulhar no mundo das APIs simuladas em JavaScript e explorar como elas podem acelerar seu processo de desenvolvimento!

O que é uma API Simulada?

Uma API simulada simula o comportamento de uma API real, fornecendo respostas pré-definidas a solicitações específicas. É como se fosse um substituto para a API real, permitindo que os desenvolvedores continuem construindo e testando suas aplicações sem ter que esperar que os serviços de backend sejam concluídos.

Por que usar APIs Simuladas?

As APIs simuladas são incrivelmente úteis por várias razões:

1. Acelere o Desenvolvimento: Chega de esperar pelos desenvolvedores de backend. Comece a integrar APIs assim que você começar a codificar seu frontend.
2. Testes: Elas ajudam a testar a fundo sua aplicação, fornecendo respostas consistentes.
3. Isolamento: Você pode isolar o desenvolvimento do frontend do backend, reduzindo dependências.
4. Colaboração: As equipes podem trabalhar em paralelo sem bloquear uns aos outros.

Introdução às APIs Simuladas em JavaScript

Agora, vamos colocar a mão na massa. Aqui está como você pode configurar uma API simulada em JavaScript.

Passo 1: Configurando Seu Projeto

Primeiro, crie um novo projeto em JavaScript. Se você está usando Node.js, pode começar com:

mkdir mock-api-demo
cd mock-api-demo
npm init -y

Instale o Express.js, um popular framework web para Node.js:

npm install express

Passo 2: Criando Sua API Simulada

Crie um arquivo chamado server.js no diretório do seu projeto. Este arquivo conterá o código para sua API simulada.

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ]);
});

app.listen(port, () => {
    console.log(`Servidor de API Simulada rodando em http://localhost:${port}`);
});

Execute o servidor com:

node server.js

Agora você tem uma API simulada rodando em http://localhost:3000/api/users que retorna uma lista de usuários.

Apresentando o Apidog

Enquanto escrever suas próprias APIs simuladas é ótimo, ferramentas como Apidog tornam tudo ainda mais fácil e poderoso. Apidog é uma ferramenta abrangente que ajuda você a criar, gerenciar e testar APIs sem esforço.

Por que escolher o Apidog?

1. Interface Amigável: Não é necessário escrever código do zero. O Apidog fornece uma interface visual para definir suas APIs.
2. Colaboração: Compartilhe suas definições de API facilmente com sua equipe.
3. Testes: Ferramentas integradas para testar suas APIs diretamente da interface.
4. Documentação: Gere automaticamente documentação da API.

Passo 1. Crie um Novo Projeto

O Apidog utiliza projetos para gerenciar APIs. Você pode criar várias APIs sob um único projeto. Cada API deve pertencer a um projeto. Para criar um novo projeto, clique no botão "Novo Projeto" no lado direito da página inicial do aplicativo Apidog.

Passo 2. Crie uma Nova API

Para demonstrar a criação de uma API para detalhes de usuários, siga estes passos:

• Método de solicitação: GET.
• URL: api/user/{id}, onde {id} é o parâmetro representando o ID do usuário.
• Tipo de resposta: json.
• Conteúdo da resposta:

{
id: number, // ID do usuário
name: string, // nome de usuário
gender: 1 | 2, // gênero: 1 para masculino, 2 para feminino
phone: string, // número de telefone
avatar: string, // endereço da imagem do avatar
}

Para criar uma nova interface, vá para a página inicial do projeto anteriormente criado e clique no botão "+" do lado esquerdo.

Preencha as informações correspondentes da interface e salve.

Com isso, a interface de detalhes do usuário foi criada. Enquanto isso, o Apidog gerou automaticamente um mock para nós com base no formato e tipo dos campos de resposta. Clique no botão "Solicitação" sob Mock para visualizar a resposta mock.

Vamos dar uma olhada na resposta mock. Clique no botão "Solicitação" e depois clique em "Enviar" na página que abrir.

Passo 3. Definir Regras de Correspondência de Mock

Você notou algo mágico? O Apidog definiu o campo "name" como tipo string, mas ainda assim retorna nomes; definiu o campo "phone" como tipo string, mas ainda assim retorna números de telefone; e definiu o campo "avatar" como tipo string, mas ainda assim retorna endereços de imagem.

A razão é que o Apidog suporta a definição de regras de correspondência para Mock. O Apidog possui regras integradas, e os usuários também podem personalizar suas próprias regras. Essas regras podem ser encontradas em Configurações do Projeto > Configurações de Recursos > Configurações de Mock.

Você também pode definir regras de Mock dedicadas para cada campo. Clique em "Mock" ao lado do campo:

As regras de correspondência de Mock do Apidog são as seguintes:

1. Quando um campo atende a uma regra de correspondência, a resposta retornará um valor aleatório que satisfaz a regra de Mock.
2. Se um campo não atender a nenhuma regra de correspondência, a resposta retornará um valor aleatório que atende ao tipo de dado do campo.

Existem três tipos de regras de correspondência:

1. Curingas: * corresponde a zero ou mais caracteres, e ? corresponde a qualquer caractere único. Por exemplo, *name pode corresponder a nome de usuário, nome, e assim por diante.
2. Expressões regulares.
3. Correspondência exata.

As regras de Mock são totalmente compatíveis com Mock.js e estendem algumas sintaxes que o Mock.js não possui (como números de telefone domésticos "@phone"). As regras de Mock comumente usadas incluem:

1. @integer: inteiro. @integer(min, max).
2. @string: string. @string(length): especifica o comprimento da string.
3. @regexp(regexp): expressão regular.
4. @url: URL.

Durante o desenvolvimento, podemos encontrar cenários de Mock flexíveis e complexos, como retornar conteúdo personalizado com base em diferentes parâmetros de solicitação. Por exemplo, retornar informações normais de usuário quando o ID é 1, e relatar um erro quando o ID é 2. O Apidog também suporta esses cenários, e os interessados podem conferir o documento de Mock Avançado.

Técnicas Avançadas de API Simulada

Respostas Dinâmicas

Às vezes, respostas estáticas não são suficientes. Você pode precisar que sua API simulada retorne dados diferentes com base na solicitação. Vamos aprimorar nosso exemplo anterior.

app.get('/api/users/:id', (req, res) => {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' }
    ];

    const user = users.find(u => u.id == req.params.id);
    if (user) {
        res.json(user);
    } else {
        res.status(404).send('Usuário não encontrado');
    }
});

Agora, você pode solicitar um usuário específico pelo ID, e a API simulada retornará o usuário correspondente ou um erro 404 se o usuário não for encontrado.

Delays nas Respostas

Para simular latência de rede, você pode introduzir atrasos em suas respostas. Isso pode ser útil para testar como sua aplicação lida com redes lentas.

app.get('/api/users', (req, res) => {
    setTimeout(() => {
        res.json([
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Smith' }
        ]);
    }, 2000); // 2 segundos de atraso
});

Como gerar dados simulados amigáveis para o usuário de forma eficiente com Apidog?​

• O Apidog pode gerar regras de mock com base na estrutura de dados e no tipo de dado na definição da API.
• O Apidog possui um mock inteligente integrado, que gera regras de mock com base no nome do campo e no tipo de dado do campo. Por exemplo, se um campo de string contém “imagem”, “tempo”, “cidade”, etc... em seu nome, o Apidog gerará um url, string ou nome de acordo com seu campo.
• Com base nas regras de mock integradas, o Apidog pode identificar automaticamente campos, como imagem, avatar, nome de usuário, número de celular, URL, data, hora, timestamp, e-mail, província, cidade, endereço e IP, para gerar dados fictícios amigáveis para o usuário.
• Além das regras de mock integradas, os usuários também podem personalizar regras para atender a diversas necessidades de personalização. Ele suporta correspondência de campo de string usando expressões regulares ou curingas.

Abaixo está um exemplo de dados simulados gerados pelo Apidog sem nenhuma configuração:

Melhores Práticas para o Uso de APIs Simuladas

1. Mantenha Simples: Comece com respostas simples e estáticas e adicione complexidade gradualmente conforme necessário.
2. Documente suas APIs Simuladas: Certifique-se de que sua equipe saiba quais são os endpoints disponíveis e suas respostas.
3. Atualizações Regulares: Mantenha suas APIs simuladas atualizadas à medida que as APIs reais evoluem.
4. Teste Minuciosamente: Use as APIs simuladas para testar diferentes cenários, incluindo casos extremos.

Casos de Uso do Mundo Real

Desenvolvimento Frontend

Ao construir uma aplicação frontend, você pode usar APIs simuladas para começar a trabalhar em recursos imediatamente, sem esperar que o backend fique pronto. Essa abordagem ajuda no desenvolvimento paralelo e acelera todo o processo.

Testes Automatizados

APIs simuladas são essenciais para testes automatizados. Elas fornecem respostas consistentes, facilitando a escrita de testes confiáveis. Ferramentas como Jest e Cypress podem se integrar com APIs simuladas para testar vários componentes e fluxos.

Prototipagem

Ao criar protótipos ou provas de conceito, as APIs simuladas permitem que você configure rapidamente as interações de backend necessárias sem investir tempo na construção dos serviços de backend reais.

Conclusão

As APIs simuladas são uma mudança de jogo para desenvolvedores, proporcionando uma maneira de acelerar o desenvolvimento, melhorar os testes e facilitar uma melhor colaboração. Com ferramentas como o Apidog, criar e gerenciar APIs simuladas se torna muito fácil, permitindo que você se concentre na construção de aplicações incríveis.

Portanto, da próxima vez que você se encontrar esperando por uma API, lembre-se de que as APIs simuladas são suas melhores amigas. E não se esqueça de conferir o Apidog para uma experiência sem complicações!

Chamada para AçãoBaixe o Apidog gratuitamente