Amigo do Dev
DevOps
12 min de leitura

Como Usar o Simulador de API para Criar Mocks Reais — Guia Completo

Aprenda a criar mocks de APIs reais com o Simulador de API do Amigo do Dev. Endpoints temporários acessíveis online, perfeito para testes, desenvolvimento frontend e prototipagem rápida.

LinkedIn

1. Introdução

Testar aplicações que dependem de APIs externas pode ser um desafio. APIs podem estar indisponíveis, ter limites de taxa, ou simplesmente não existir durante o desenvolvimento de novos recursos. É aqui que o Simulador de API do Amigo do Dev se torna uma ferramenta essencial.

Com o Simulador de API, você pode criar endpoints HTTP reais e acessíveis online que retornam exatamente os dados que você precisa — sem precisar configurar servidores, banco de dados ou serviços de terceiros. Perfeito para desenvolvimento frontend, testes automatizados, prototipagem e demonstrações.

2. O que é o Simulador de API?

O Simulador de API é uma ferramenta online gratuita que permite criar endpoints HTTP temporários com respostas customizadas. Cada endpoint criado:

  • ✅ É acessível online — URL pública que pode ser usada de qualquer lugar
  • ✅ Retorna JSON personalizado — Você define exatamente a estrutura de dados
  • ✅ Suporta todos os métodos HTTP — GET, POST, PUT, PATCH, DELETE
  • ✅ Permite configurar status codes — 200, 201, 400, 404, 500, etc.
  • ✅ Headers CORS habilitados — Funciona perfeitamente com aplicações frontend
  • ✅ Temporário e seguro — Expira após 24 horas automaticamente

3. Casos de Uso Práticos

3.1. Desenvolvimento Frontend

Durante o desenvolvimento de uma aplicação React, Vue ou Angular, você frequentemente precisa de dados antes do backend estar pronto:

// Em vez de esperar o backend, crie um mock
const API_URL = 'https://api.amigododev.com/api-simulator/abc123';

async function fetchProducts() {
  const response = await fetch(API_URL);
  const data = await response.json();
  return data.products;
}

3.2. Testes Automatizados

Crie endpoints para simular diferentes cenários de teste (sucesso, erro, timeout):

// Testar tratamento de erro 404
test('should handle 404 errors', async () => {
  const mockUrl = 'https://api.amigododev.com/api-simulator/error404';
  const response = await fetch(mockUrl);
  expect(response.status).toBe(404);
});

3.3. Prototipagem Rápida

Demonstre uma ideia sem configurar infraestrutura completa:

// Apresentação para cliente ou equipe
const prototype = await fetch('https://api.amigododev.com/api-simulator/demo123');
const features = await prototype.json();

3.4. Documentação de API

Crie exemplos interativos para documentação de APIs:

# Exemplo na documentação
curl https://api.amigododev.com/api-simulator/example123

4. Como Usar — Passo a Passo

Passo 1: Acessar o Simulador

Acesse amigododev.com/ferramentas/api-simulator

Passo 2: Configurar o Método HTTP

Selecione o método HTTP que seu endpoint deve responder:

  • GET — Para listar dados (produtos, usuários, etc.)
  • POST — Para simular criação de recursos
  • PUT — Para simular atualização completa
  • PATCH — Para simular atualização parcial
  • DELETE — Para simular remoção de recursos

Passo 3: Definir o Nome do Endpoint

Dê um nome descritivo para identificar facilmente o endpoint (exemplo: "Produtos da Loja", "Lista de Usuários").

Passo 4: Configurar o Status Code

Escolha o código HTTP que a resposta deve retornar:

  • 200 — OK (sucesso padrão)
  • 201 — Created (recurso criado)
  • 400 — Bad Request (erro de validação)
  • 401 — Unauthorized (não autenticado)
  • 404 — Not Found (recurso não encontrado)
  • 500 — Internal Server Error (erro do servidor)

Passo 5: Definir o JSON de Resposta

Escreva ou cole o JSON que você quer que o endpoint retorne. O simulador oferece exemplos prontos, mas você pode customizar completamente:

{
  "users": [
    {
      "id": 1,
      "name": "Maria Silva",
      "email": "maria@example.com",
      "role": "admin",
      "active": true
    },
    {
      "id": 2,
      "name": "João Santos",
      "email": "joao@example.com",
      "role": "user",
      "active": true
    }
  ],
  "total": 2,
  "page": 1
}

Passo 6: Gerar o Endpoint

Clique em "Gerar Link de API". Em segundos, você receberá uma URL pública:

https://api.amigododev.com/api-simulator/x7k2m9p4q1

Passo 7: Usar o Endpoint

Copie o link e use em sua aplicação, testes ou documentação!

5. Exemplos Práticos de Uso

Exemplo 1: E-commerce — Lista de Produtos

{
  "products": [
    {
      "id": 1,
      "name": "Notebook Gamer",
      "price": 5999.99,
      "category": "Eletrônicos",
      "inStock": true,
      "image": "https://picsum.photos/200/200?random=1"
    },
    {
      "id": 2,
      "name": "Smartphone XYZ",
      "price": 2999.99,
      "category": "Eletrônicos",
      "inStock": false,
      "image": "https://picsum.photos/200/200?random=2"
    }
  ],
  "total": 2
}

Exemplo 2: Sistema de Autenticação — Login

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": 123,
    "name": "Ana Paula",
    "email": "ana@example.com",
    "role": "admin"
  },
  "expiresIn": 3600,
  "message": "Login realizado com sucesso"
}

Exemplo 3: Dashboard — Estatísticas

{
  "metrics": {
    "totalUsers": 1523,
    "activeUsers": 892,
    "revenue": 157320.50,
    "orders": 2341
  },
  "period": "last_30_days",
  "updatedAt": "2026-01-28T10:30:00Z"
}

Exemplo 4: Erro 404 — Recurso Não Encontrado

Configure status code 404 e retorne:

{
  "error": "Resource not found",
  "message": "The requested user does not exist",
  "code": "USER_NOT_FOUND",
  "status": 404
}

Exemplo 5: Erro 500 — Erro do Servidor

Configure status code 500 para simular falhas:

{
  "error": "Internal Server Error",
  "message": "Database connection failed",
  "code": "DB_CONNECTION_ERROR",
  "status": 500
}

6. Integração com Frontend

React / Next.js

import { useEffect, useState } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

export default function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchProducts() {
      try {
        const response = await fetch('https://api.amigododev.com/api-simulator/abc123');
        const data = await response.json();
        setProducts(data.products);
      } catch (error) {
        console.error('Error fetching products:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchProducts();
  }, []);

  if (loading) return <div>Carregando...</div>;

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>R$ {product.price}</p>
        </div>
      ))}
    </div>
  );
}

Vue.js

<script setup>
import { ref, onMounted } from 'vue';

const products = ref([]);
const loading = ref(true);

onMounted(async () => {
  try {
    const response = await fetch('https://api.amigododev.com/api-simulator/abc123');
    const data = await response.json();
    products.value = data.products;
  } catch (error) {
    console.error('Error fetching products:', error);
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div v-if="loading">Carregando...</div>
  <div v-else>
    <div v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>R$ {{ product.price }}</p>
    </div>
  </div>
</template>

Angular

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngIf="loading">Carregando...</div>
    <div *ngFor="let product of products">
      <h3>{{ product.name }}</h3>
      <p>R$ {{ product.price }}</p>
    </div>
  `
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];
  loading = true;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any>('https://api.amigododev.com/api-simulator/abc123')
      .subscribe({
        next: (data) => {
          this.products = data.products;
          this.loading = false;
        },
        error: (error) => {
          console.error('Error fetching products:', error);
          this.loading = false;
        }
      });
  }
}

7. Uso em Testes Automatizados

Jest + Fetch

describe('Product API', () => {
  test('should fetch products successfully', async () => {
    const response = await fetch('https://api.amigododev.com/api-simulator/abc123');
    const data = await response.json();
    
    expect(response.status).toBe(200);
    expect(data.products).toBeDefined();
    expect(data.products.length).toBeGreaterThan(0);
  });

  test('should handle 404 errors', async () => {
    const response = await fetch('https://api.amigododev.com/api-simulator/error404');
    
    expect(response.status).toBe(404);
    const data = await response.json();
    expect(data.error).toBeDefined();
  });
});

Cypress E2E

describe('Product Page', () => {
  beforeEach(() => {
    // Interceptar chamadas reais com mock
    cy.intercept('GET', '**/api/products', {
      fixture: 'products.json' // ou usar endpoint do simulador
    }).as('getProducts');
    
    cy.visit('/products');
  });

  it('should display products from API', () => {
    cy.wait('@getProducts');
    cy.get('[data-testid="product-item"]').should('have.length.greaterThan', 0);
  });
});

8. Dicas e Melhores Práticas

✅ Valide seu JSON

Antes de gerar o endpoint, certifique-se de que seu JSON é válido. Use o Validador JSON do Amigo do Dev.

✅ Use Status Codes Apropriados

  • 200 para GET com sucesso
  • 201 para POST (criação) com sucesso
  • 204 para DELETE com sucesso (sem corpo)
  • 400 para erros de validação
  • 401 para erros de autenticação
  • 404 para recursos não encontrados
  • 500 para erros do servidor

✅ Estruture Dados Realistas

Crie JSONs que reflitam a estrutura real da API que você está mockando. Inclua paginação, metadados e timestamps quando apropriado.

✅ Documente seus Endpoints

Mantenha uma lista dos endpoints criados com seus propósitos e datas de expiração.

✅ Endpoints Expiram em 24 Horas

Lembre-se que os endpoints são temporários. Para uso prolongado, considere salvá-los ou recriar quando necessário.

✅ Teste Cenários de Erro

Não teste apenas o caminho feliz. Crie mocks para erros 400, 404, 500 para garantir que sua aplicação trata falhas corretamente.

⚠️ Não Use para Produção

Os endpoints são temporários e públicos. Nunca use em ambientes de produção ou com dados sensíveis.

9. Alternativas e Quando Usar Cada Uma

Ferramenta Quando Usar Pros Contras
Simulador de API (Amigo do Dev) Testes rápidos, prototipagem, desenvolvimento frontend Rápido, online, sem configuração Temporário (24h), público
JSON Server Desenvolvimento local com persistência CRUD completo, persistência em arquivo Requer instalação, apenas local
Mockoon Mocks complexos com regras condicionais Interface gráfica, muitos recursos Requer instalação do app
MSW (Mock Service Worker) Testes automatizados, desenvolvimento Integrado ao código, muito poderoso Curva de aprendizado
Postman Mock Server Equipes, documentação Colaborativo, documentação integrada Requer conta, limitações no plano free

10. Conclusão

O Simulador de API do Amigo do Dev é a ferramenta perfeita para criar mocks de APIs de forma rápida e sem complicações. Seja para desenvolvimento frontend, testes automatizados, prototipagem ou demonstrações, você pode ter um endpoint HTTP real funcionando em segundos.

Principais vantagens:

  • ✅ Sem configuração — use direto no navegador
  • ✅ Endpoints reais e acessíveis online
  • ✅ Suporta todos os métodos HTTP e status codes
  • ✅ CORS habilitado por padrão
  • ✅ Gratuito e ilimitado
  • ✅ Perfeito para desenvolvimento ágil

Experimente agora: Simulador de API — Amigo do Dev

🚀 Dica bônus: Combine o Simulador de API com outras ferramentas do Amigo do Dev como Testador HTTP, Formatador JSON e Decodificador JWT para um fluxo de trabalho completo!

Tags

APIMockTestingFrontendBackendRESTJSONHTTP
Voltar ao BlogExplorar Ferramentas

© 2026 Amigo do Dev — Ferramentas gratuitas para desenvolvedores