Simulare un'API CRUD

  • Articolo

Quando si creano app, spesso si interagisce con le API back-end. In alcuni casi, queste API non sono ancora disponibili o altri team li aggiornano per soddisfare i requisiti più recenti. Per evitare l'attesa, in genere si crea un'API fittizia che restituisce i dati necessari. Anche se questo approccio sblocca l'utente, è necessario dedicare tempo alla creazione di un'API che alla fine si sostituisce con quella reale. Per evitare di perdere tempo, è possibile usare Dev Proxy per simulare un'API CRUD e velocizzare lo sviluppo.

CrudApiPluginUsando , è possibile simulare un'API CRUD (Create, Read, Update, Delete) con un archivio dati in memoria. Usando un file di configurazione semplice, è possibile definire gli URL supportati dall'API fittizia e i dati restituiti. Il plug-in supporta anche CORS per l'utilizzo tra domini da applicazioni lato client.

MockResponsePlugin Dove consente di definire risposte fittizie statiche, consente CrudApiPlugin di definire un'API fittizia dinamica che è possibile usare per interagire con i dati e visualizzare le modifiche riflesse nel set di dati fittizio.

Scenario

Si supponga di creare un'app che consenta agli utenti di gestire i clienti. Per ottenere i dati, è necessario chiamare l'endpoint /customers dell'API back-end. Per evitare di attendere il completamento del lavoro del team back-end, si decide di usare Dev Proxy per simulare l'API e restituire i dati necessari.

Iniziare con l'abilitazione di CrudApiPlugin e la configurazione per l'uso del customers-api.json file.

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

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

customers-api.json Nel file si definisce l'API dei clienti fittizi.

{
  "$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 Nella proprietà si definisce l'URL di base dell'API fittizia. dataFile Nella proprietà viene definito il file che contiene dati fittizi del cliente. actions Nella proprietà vengono definite le azioni supportate e viene eseguito il mapping ai metodi e agli URL HTTP. Si vuole usare l'API per:

  • ottenere tutti i clienti chiamando GET /v1/customers
  • ottenere un singolo cliente chiamando GET /v1/customers/{customer-id}
  • aggiungere un nuovo cliente chiamando POST /v1/customers,
  • aggiornare un cliente chiamando PATCH /v1/customers/{customer-id},
  • eliminare un cliente chiamando DELETE /v1/customers/{customer-id}

Negli URL si usa il {customer-id} parametro , che il plug-in sostituisce con l'ID cliente effettivo dall'URL. Il plug-in usa anche il {customer-id} parametro in una query JSONPath per cercare il cliente nel file di dati.

customers-data.json Nel file si definiscono i dati fittizi dei clienti.

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

Avviare Dev Proxy e chiamare l'endpoint https://api.contoso.com/v1/customers . Dev Proxy intercetta la richiesta e restituisce i dati fittizi dei clienti.

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

Passaggio successivo

Altre informazioni su CrudApiPlugin.

CrudApiPlugin

Esempi

Vedere anche gli esempi correlati di Dev Proxy: