Le classiche operazioni di un'applicazione CRUD, necessitano di una RESTFULL API progettata ad hoc. Spesso questo rallenta il processo di sviluppo dell'applicazione, perché è necessario interrompere il flusso di sviluppo del front-end, e passare alla progettazione della parte server, questo indipendentemente dal framework che si sta usando (Angular, React, Vue, etc)

Ci viene in aiuto un servizio web, che permette di inviare al volo tutte le tipiche richieste di un'applicazione CRUD. Si tratta di JSON Placeholder che puoi consultare a questo link. E' un servizio derivato dalla popolare libreria json-server, solo che a differenza di quest'ultima che funziona solo localmente, il servizio funziona come un vero server di produzione online.

Mette a disposizione diversi endpoint in modalità POST, GET, DELETE e PUT suddivisi in alcune tipologie classiche di CATEGORIE di dati (articoli, commenti, album, foto, utenti, lista cose da fare).

Ogni endpoint è caratterizzato da una struttura del tipo:

https://jsonplaceholder.typicode.com/CATEGORIA/MODALITA

Ognuno può essere testato sfruttando una qualsiasi API. Se stai sviluppando in JavaScript o Vue o jQuery, potresti usare la libreria fetch o axio, se invece stai sviluppando in Angular, la libreria HTTPClientModule.

Qui di seguito un elenco di endpoint e relativa richiesta HTTP, che potresti usare per leggere dei dati di ipotetici articoli di un blog (posts) in formato JSON, o per scrivere deli dati:

Operazione di elenco articoli - GET

Se volessi visualizzare l'elenco degli articoli presenti in un ipotetico database, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un array di oggetti con proprietà userid, id, title, body:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
]

La stessa operazione effettuata in Angular potresti scriverla così:

    this.httpClient.get("https://jsonplaceholder.typicode.com/posts").subscribe(
      success => {
        console.log("Successfully Completed");
        console.log(success);
      }
    );

Operazione di lettura singolo articolo - GET

Se invece volessi recuperare i dati di uno specifico articolo caratterizzato da una chiave id pari a 1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un oggetto JSON con proprietà userId, id, title, body:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Operazione di modifica singolo articolo - PUT

Nel caso volessi aggiornare i dati già memorizzare in precedenza per un articolo con id pari a 1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: JSON.stringify({
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un oggetto JSON con proprietà userId, id, title, bodym che rappresentano proprio il nuovo dato modificato. Chiaramente le modifiche non saranno salvate da nessuna parte.

{
  id: 1,
  title: 'foo',
  body: 'quia et suscipit [...]',
  userId: 1
}

Operazione di cancellazione singolo articolo - DELETE

Infine nel caso volessi cancellare un articolo con id=1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})

Chiaramente tutte queste richieste fanno riferimento a dati generici che potrebbe non essere perfettamente sfruttabili nel tuo progetto.

Ci viene in aiuto allora il servizio My JSON Server e GitHub.  Si tratta di creare, su un nuovo respository all'interno del tuo account su GitHub (vedi la nostra guida rapida guida GiHub), un file con nome db.json, che contenga all'interno una serie di oggetti json, che rappresentano gli intradamenti sotto forma di chiave: Array[] come evidenziato qui sotto:

{
  "posts": [
    {
      "id": 1,
      "title": "hello"
    }
  ],
  "news": [
    {
      "id": 1,
      "title": "My News 1"
    },
    {
      "id": 2,
      "title": "My News 2"
    }
  ]
}

posso interrogare un url del tipo:

https://my-json-server.typicode.com/NOMEUTENTE/NOMEREPOSITORY/posts/1

e recuperare il primo oggetto dell'array inserito all'interno del file db.json.