Simular uma API CRUD

  • Artigo

Ao criar aplicações, muitas vezes interage com APIs de back-end. Por vezes, estas APIs ainda não estão disponíveis ou outras equipas estão a atualizá-las para cumprir os requisitos mais recentes. Para evitar esperar, normalmente cria uma API fictícia que devolve os dados de que precisa. Embora esta abordagem o desbloqueie, é necessário que despende tempo na criação de uma API que eventualmente substituirá pela verdadeira. Para evitar perder tempo, pode utilizar o Proxy de Programador para simular uma API CRUD e acelerar o desenvolvimento.

Com o CrudApiPlugin, pode simular uma API CRUD (Criar, Ler, Atualizar, Eliminar) com um arquivo de dados dentro da memória. Com um ficheiro de configuração simples, pode definir os URLs suportados pela API fictícia e os dados que devolve. O plug-in também suporta CORS para utilização entre domínios a partir de aplicações do lado do cliente.

Quando o MockResponsePlugin permite definir respostas simuladas estáticas, permite-lhe CrudApiPlugin definir uma API simulada dinâmica que pode utilizar para interagir com dados e ver as suas alterações refletidas no conjunto de dados simulados.

Scenario

Digamos que está a criar uma aplicação que permite aos utilizadores gerir clientes. Para obter os dados, tem de chamar o /customers ponto final da API de back-end. Para evitar esperar que a equipa de back-end conclua o seu trabalho, decide utilizar o Proxy de Programador para simular a API e devolver os dados de que precisa.

Comece por ativar o CrudApiPlugin e configurá-lo para utilizar o customers-api.json ficheiro.

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

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

customers-api.json No ficheiro, 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 , define o URL base da API fictícia. dataFile Na propriedade , define o ficheiro que contém dados fictícios do cliente. actions Na propriedade , define as ações suportadas e como são mapeadas para os métodos e URLs HTTP. Quer utilizar a API para:

  • obter todos os clientes, ao chamar GET /v1/customers
  • obter um único cliente, ao ligar GET /v1/customers/{customer-id}
  • adicionar um novo cliente, ao chamar POST /v1/customers,
  • atualizar um cliente, ao chamar PATCH /v1/customers/{customer-id},
  • eliminar um cliente, ao chamar DELETE /v1/customers/{customer-id}

Nos URLs, utilize o {customer-id} parâmetro , que o plug-in substitui pelo ID de cliente real do URL. O plug-in também utiliza o {customer-id} parâmetro numa consulta JSONPath para procurar o cliente no ficheiro de dados.

customers-data.json No ficheiro, 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"
  }
]

Inicie o Proxy de Programador e chame o https://api.contoso.com/v1/customers ponto final. O Proxy Dev interceta o pedido e devolve 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"
  }
]

Passo seguinte

Saiba mais sobre o CrudApiPlugin.

CrudApiPlugin

Amostras

Veja também os exemplos de Proxy de Programador relacionados: