Compartilhar via

Simular uma API CRUD

  • Artigo

Ao criar aplicativos, você geralmente interage com APIs de back-end. Às vezes, essas APIs ainda não estão disponíveis ou outras equipes as estão atualizando para atender aos requisitos mais recentes. Para evitar espera, você normalmente cria uma API fictícia que retorna os dados necessários. Embora essa abordagem o desbloqueie, ela exige que você gaste tempo na criação de uma API que eventualmente substitua pela real. Para evitar perda de tempo, você pode usar o Dev Proxy para simular uma API CRUD e acelerar o desenvolvimento.

Usando o CrudApiPlugin, você pode simular uma API CRUD (Criar, Ler, Atualizar, Excluir) com um armazenamento de dados na memória. Usando um arquivo de configuração simples, você pode definir quais URLs sua API simulada suporta e quais dados ela retorna. O plug-in também oferece suporte a CORS para uso entre domínios de aplicativos do lado do cliente.

Onde o MockResponsePlugin permite definir respostas simuladas estáticas, o CrudApiPlugin permite definir uma API simulada dinâmica que você pode usar para interagir com dados e ver suas alterações refletidas no conjunto de dados fictícios.

Cenário

Digamos que você esteja criando um aplicativo que permite aos usuários gerenciar clientes. Para obter os dados, você precisa chamar o /customers ponto de extremidade da API de back-end. Para evitar esperar que a equipe de back-end termine seu trabalho, você decide usar o Dev Proxy para simular a API e retornar os dados necessários.

Você começa habilitando o CrudApiPlugin e configurando-o para usar o customers-api.json arquivo.

{
  "name": "CrudApiPlugin",
  "enabled": true,
  "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
  "configSection": "customersApi"
}

{
  "customersApi": {
    "apiFile": "customers-api.json"
  }
}

customers-api.json No arquivo, você define a API de clientes fictícios.

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.14.1/crudapiplugin.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

baseUrl Na propriedade, você define a URL base da API fictícia. dataFile Na propriedade, você define o arquivo que contém dados fictícios do cliente. actions Na propriedade, você define as ações com suporte e como elas são mapeadas para os métodos HTTP e URLs. Você deseja usar sua API para:

  • obter todos os clientes, ligando para GET /v1/customers
  • obter um único cliente, ligando para GET /v1/customers/{customer-id}
  • adicionar um novo cliente, chamando POST /v1/customers,
  • atualizar um cliente, chamando PATCH /v1/customers/{customer-id},
  • excluir um cliente, chamando DELETE /v1/customers/{customer-id}

Em seus URLs, você usa o {customer-id} parâmetro, que o plug-in substitui pelo ID do cliente real do URL. O plug-in também usa o {customer-id} parâmetro em uma consulta JSONPath para pesquisar o cliente no arquivo de dados.

customers-data.json No arquivo, você define os dados fictícios do cliente.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

Você inicia o Dev Proxy e chama o https://api.contoso.com/v1/customers ponto de extremidade. O Dev Proxy intercepta a solicitação e retorna os dados fictícios do cliente.

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

Próxima etapa

Saiba mais sobre o CrudApiPlugin.

CrudApiPlugin

Exemplos

Confira também os exemplos relacionados do Dev Proxy: