Che cosa sono le RESTful APIs e perchè è importante conoscerle

Corso completo Web Developer - Parte 3 - 3.1

Introduzione

Siamo abituati a navigare il web e ad interagire con le pagine web attraverso i browser, ma come funziona il web? Come funzionano le richieste che facciamo al server e le risposte che riceviamo? In questo articolo vedremo come funzionano le RESTful APIs e perchè è importante conoscerle.

Ti dò il benvenuto in questa nuova lezione! Andremo ad esplorare il mondo delle RESTful APIs. Ma che cosa significa RESTful?

REST sta per Representational State Transfer, ovvero il trasferimento di rappresentazioni di stato. In pratica, si tratta di un'architettura per la creazione di web services basata sul protocollo HTTP.

Alcuni dei concetti che andremo a vedere in questa lezione li abbiamo già visti nelle lezioni precedenti quindi sarà parzialmente una ripetizione di concetti già visti ma ti consiglio di mantenere alta l'attenzione perchè li andremo a vedere in un contesto pratico che ti aiuterà a capirli molto meglio!

Principi di base delle RESTful API

Richieste HTTP (GET, POST, PUT, DELETE)

Le RESTful APIs utilizzano le richieste HTTP per comunicare tra client e server. Le richieste più comuni sono GET, POST, PUT e DELETE.

  • GET: viene utilizzata per leggere una risorsa dal server.
  • POST: viene utilizzata per creare una nuova risorsa.
  • PUT: viene utilizzata per aggiornare una risorsa esistente.
  • DELETE: viene utilizzata per eliminare una risorsa.

Concetto di REST

Il concetto principale di REST è quello di trattare le risorse come oggetti. Ogni risorsa ha una propria identità univoca (come un ID) e uno stato che può essere letto, modificato o eliminato dal client (ad esempio il Browser) che fa la richiesta.

Implementazione di una RESTful API con Express

Installazione e configurazione di Express

La primissima cosa da fare sarà quella di creare un nuovo progetto Express.

Per farlo apriamo il terminale, ci spostiamo nella cartella dove vogliamo creare il progetto, creiamo una cartella per il progetto e ci spostiamo all'interno di essa.

mkdir tutorial_restful_api
cd tutorial_restful_api

Ora inizializziamo il progetto con NPM, dopodichè installiamo Express e creiamo un file index.js

npm init -y
npm install express
touch index.js (in Windows PowerShell usa il comando "New-Item" al posto di "touch")
ls

Come puoi notare ho anche eseguito il comando ls per controllare cosa ci fosse all'interno della cartella dopo aver eseguito tutti i comandi e quindi accertarmi che tutto sia stato creato correttamente.

A questo punto apriamo l'intero progetto su VS Code e aggiungiamo il boilerplate per un server Express.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log(`Server in esecuzione sulla porta ${port}`);
})

Ora che abbiamo il server Express possiamo avviarlo con il comando nodemon index.js nella root del progetto e verificare che funzioni correttamente andando sul browser all'indirizzo http://localhost:3000 verificando che appunto la richiesta ci ritorna la stringa Hello World!.

nodemon index.js

Aggiungere EJS come template engine

Siamo pronti a configurare EJS come template engine per il nostro progetto Express.

Per farlo installiamo il pacchetto ejs con NPM e lo aggiungiamo al file index.js come middleware di Express.

npm install ejs
const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

app.set('view engine', 'ejs'); 
app.set('views', path.join(__dirname, '/views'));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log(`Server in esecuzione sulla porta ${port}`);
})
mkdir views
touch views/homepage.ejs (in Windows PowerShell usa il comando "New-Item" al posto di "touch")
// views/homepage.ejs

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restful APIs</title>
</head>
<body>
  <h1>Benvenuto su Restful APIs</h1>
</body>
</html>

Ora che abbiamo creato il file homepage.ejs possiamo modificare il file index.js per renderlo funzionante.

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'));

app.get('/', (req, res) => {
  res.render('homepage.ejs');
});

app.listen(3000, () => {
  console.log(`Server in esecuzione sulla porta ${port}`);
})

Ora possiamo avviare il server e verificare che funzioni correttamente.

nodemon index.js

Parsing del body delle richieste HTTP

Prima di addentrarci nella creazione degli endpoints CRUD, dobbiamo configurare Express per poter gestire il parsing del body delle richieste HTTP.

Per farlo installiamo il pacchetto body-parser con NPM e lo aggiungiamo al file index.js come middleware di Express.

npm install body-parser
const express = require('express');
const app = express();
const port = 3000;
const path = require('path');
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'));

app.get('/', (req, res) => {
  res.render('homepage.ejs');
});

app.listen(3000, () => {
  console.log(`Server in esecuzione sulla porta ${port}`);
})

Operazioni CRUD (Create, Read, Update, Delete) con Express

Ogni articolo nel nostro blog può essere creato, letto, modificato ed eliminato (CRUD) - Create, Read, Update, Delete.

Quindi ora che abbiamo un server Express funzionante e un template engine possiamo iniziare a creare le operazioni CRUD per i nostri articoli.

Tieni presente che solitamente le operazioni CRUD sono eseguite su un database, ma per questo tutorial utilizzeremo un array di oggetti JavaScript per simulare un database.

Approfitto per spoilerarti che introdurremo i database esattamente nella prossima lezione! 🤓

Una cosa che noterai è che ognuno degli endpoint che andremo a creare userà una base articoli. Perchè ti chiederai e la risposta è semplice: questo è uno standard di quando si creano API di tipo RESTful ovvero utilizare il nome della risorsa ed utilizzarlo al plurale, usare i verbi HTTP per definire il tipo di operazione che si vuole eseguire e, se necessario, utilizzare l'ID dopo il nome della risorsa.

Infatti a proposito di ID o numero identificativo, questo è un numero sempre presente quando si lavora con i database perchè è il modo che viene utilizzato per distinguere uno specifico record da un altro.

Quello che andremo a vedere quindi è uno dei modi (uno dei più comuni) per creare API RESTful ma ci sono tanti altri modi per farlo.

Ora che abbiamo chiarito anche questo punto possiamo anadre avanti.

La prima cosa che faremo sarà quella di aggiungere un array di articoli al nostro file index.js per simulare un database e salvarla in una variabile let chiamata articoli:

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'));

let articoli = [
  {
    id: 1,
    titolo: "Titolo 1",
    descrizione: "Descrizione 1",
    contenuto: "Contenuto Articolo 1",
    categoria: "categoria 1"
  },
  {
    id: 2,
    titolo: "Titolo 2",
    descrizione: "Descrizione 2",
    contenuto: "Contenuto Articolo 2",
    categoria: "categoria 2"
  },
  {
    id: 3,
    titolo: "Titolo 3",
    descrizione: "Descrizione 3",
    contenuto: "Contenuto Articolo 3",
    categoria: "categoria 3"
  },
  {
    id: 4,
    titolo: "Titolo 4",
    descrizione: "Descrizione 4",
    contenuto: "Contenuto Articolo 4",
    categoria: "categoria 4"
  },
]

app.get('/', (req, res) => {
  res.render('homepage.ejs');
});

app.listen(3000, () => {
  console.log(`Server in esecuzione sulla porta ${port}`);
})

A questo punto possiamo iniziare con l'endpoint per visualizzare tutti gli articoli: GET /articoli.

Visualizzazione di tutti gli articoli

Questo endpoint viene anche definito come INDEX endpoint ovvero l'endpoint che ci permette di richiedere al server di farci visualizzare tutti gli articoli presenti nel nostro "database". Ti ricordo che il nostro database al momento lo stiamo raffigurando con l'array articoli definita nel file index.js.

Andiamo adesso ad aggiungere l'endpoint /articoli al nostro file index.js:

app.get('/articoli', (req, res) => {
  res.render('articoli/index.ejs', { articoli });
});

Ora che abbiamo definito l'endpoint possiamo creare la view che ci permetterà di visualizzare tutti gli articoli.

Creiamo quindi la cartella articoli all'interno della cartella views e all'interno di questa cartella creiamo il file index.ejs:

mkdir views/articoli
touch views/articoli/index.ejs (in Windows PowerShell usa il comando "New-Item" al posto di "touch")

Ora che abbiamo creato il file index.ejs possiamo iniziare a scrivere il codice per visualizzare tutti gli articoli.

// views/articoli/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REST Blog</title>
</head>
<body>
  <h3>Tutti gli articoli:</h3>
  <ul>
    <% for (let a of articoli) { %>
      <li>ID: <%= a.id %></li>
      <li>Titolo: <%= a.titolo %></li>
      <li>Descrizione: <%= a.descrizione %></li>
      <li>Contenuto: <%= a.contenuto %></li>
      <li>Categoria: <%= a.categoria %></li>
      <br>
    <% } %>
  </ul>  
</body>
</html>

Per andare a visualizzare tutti gli articoli possiamo andare sul browser e inserire l'URL localhost:3000/articoli

Creazione di un nuovo articolo

Ora che abbiamo creato l'endpoint per visualizzare tutti gli articoli possiamo andare avanti con la creazione dell'endpoint che serve per creare un nuovo articolo.

Il verbo HTTP che viene utilizzato per creare una nuova risorsa è il verbo POST e quindi l'endpoint che andremo a creare sarà POST /articoli.

All'interno di questo endpoint ci occuperemo di creare un nuovo articolo ed aggiungerlo al nostro "database" (l'array articoli).

Nel nostro caso per simulare la creazione di un nuovo articolo avremo bisogno anche di una pagina web HTML che ci permetta di inserire i dati del nuovo articolo attraverso un form.

Quale endpoint utilizzeremo per servire questa pagina? Solitamente si utilizza un endpoint GET /articoli/new che appunto ha il compito di servire una pagina HTML con un form per la creazione di una determinata risorsa.

Andiamo quindi prima ad aggiungere l'endpoint new e la relativa view new.ejs:

app.get('/articoli/new', (req, res) => {
  res.render('articoli/new.ejs');
});
touch views/articoli/new.ejs (in Windows PowerShell usa il comando "New-Item" al posto di "touch")

Ora che abbiamo creato il file new.ejs possiamo iniziare a scrivere il codice per visualizzare il form per la creazione di un nuovo articolo.

// views/articoli/new.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REST Blog</title>
</head>
<body>
  <h3>Crea un nuovo articolo:</h3>

  <form method="POST" action="/articoli">
    <input type="text" name="title" placeholder="Titolo">
    <input type="text" name="description" placeholder="Descrizione">
    <input type="text" name="categoria" placeholder="Categoria">
    <textarea cols="25" rows="7"></textarea>
    <button type="submit">Crea</button>
  </form>
</body>
</html>

Adesso proviamo ad andare sul browser e ad inserire l'URL localhost:3000/articoli/new per verificare che la pagina venga servita correttamente con il form.

A questo punto siamo pronti ad aggiungere il nostro POST endpoint che si occuperà di creare il nuovo articolo sulla base dei dati che vengono inviati dal form e di aggiungerlo al nostro "database" (l'array articoli).

app.post('/articoli', (req, res) => {
  const { title, description, categoria, contenuto } = req.body;
  const id = articoli.length + 1;
  articoli.push({ id, titolo: title, descrizione: description, categoria, contenuto });
  res.redirect('/articoli');
});

E adesso proviamo ad andare sul browser, inseririamo l'URL localhost:3000/articoli/new e infine compiliamo il form per verificare che possiamo creare un nuovo articolo 😃

Se il tutto viene eseguito correttamente dovremmo essere reindirizzato alla pagina che visualizza tutti gli articoli e dovremmo vedere il nuovo articolo che abbiamo appena creato.

Siamo riusciti a create il nostro primo articolo e salvarlo nell'array! 🎉

Solitamente quando si crea una risorsa viene salvata nel database ma in questo caso noi la stiamo salvando in un array poichè non abbiamo ancora visto come funzionano i database. Approfitto per ricordarti che la prossima lezione si baserà proprio sui database! 😉

Visualizzazione di un singolo articolo

Come avrai potuto notare quando creiamo un nuovo articolo veniamo reindirizzati sulla pagina Index (quella che mostra tutti gli articoli).

Oltre alla pagina Index è estremamente comune nei siti web avere una pagina dove puoi visualizzare una singola risorsa. Questa pagina viene servita dalla route Show che nel concetto CRUD rientra nella lettera "R" ovvero Read.

Questa route solitamente può gestire e visualizzare la corretta risorsa basandosi sull'ID della risorsa che stiamo cercando di visualizzare. Quindi andiamo a sfruttare l'ID dei nostri articoli per sviluppare questa route.

app.get('/articoli/:id', (req, res) => {
  const { id } = req.params;
  const articolo = articoli.find(articolo => articolo.id === Number(id));
  res.render('articoli/show.ejs', { articolo });
});

In questa route stiamo selezionando l'ID dell'articolo dai request parameters poichè questo verrà passato nell'URL. Successivamente stiamo utilizzando il metodo find per trovare l'articolo nell'array degli articoli che ha l'ID corrispondente a quello che stiamo cercando e per farlo dobbiamo convertire l'ID ricevuto nei parameters in un numero poichè gli articoli nell'array hanno l'ID salvato come numero.

Ed ora che abbiamo la route preparata procediamo con la creazione della view show.ejs:

touch views/articoli/show.ejs (in Windows PowerShell usa il comando "New-Item" al posto di "touch")
// views/articoli/show.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Articolo</title>
</head>
<body>
  <h1>Articolo</h1>
  <ul>
    <li>Titolo: <%= articolo.titolo %></li>
    <li>Descrizione: <%= articolo.descrizione %></li>
    <li>Contenuto: <%= articolo.contenuto %></li>
    <li>Categoria: <%= articolo.categoria %></li>
    <li><a href="/articoli">Torna alla lista degli articoli</a></li>
    <li><a href="/">Homepage</a></li>
    <br>
  </ul>
</body>
</html>

Ed ora aggiungiamo un modo facile per visualizzare un singolo articolo nella pagina Index dove mostriamo tutti gli articoli. Apriamo il file views/articoli/index.ejs e aggiungiamo un link per ogni articolo che ci permetta di visualizzare l'articolo cliccato.

// views/articoli/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REST Blog</title>
</head>
<body>
  <h3>Tutti gli articoli:</h3>
  <ul>
    <% for (let articolo of articoli) { %>
      <li>ID: <%= articolo.id %></li>
      <li>Titolo: <%= articolo.titolo %></li>
      <li>Descrizione: <%= articolo.descrizione %></li>
      <li>Contenuto: <%= articolo.contenuto %></li>
      <li>Categoria: <%= articolo.categoria %></li>
      <li><a href="/articoli/<%= articolo.id %>">Visualizza</a></li>
      <br>
    <% } %>
  </ul>
</body>
</html>

A questo punto dovresti avere una pagina Index che somiglia a questa:

Ed una pagina Show che somiglia a questa:

Aggiornamento di un articolo

Ora siamo pronti a definire la lettera "U" del concetto CRUD ovvero Update. Con questo endpoint dovremmo essere in grado di aggiornare un articolo esistente.

Ci sono due verbi HTTP che vengono utilizzati per gestire l'aggiornamento di una risorsa esistente: PUT e PATCH. La principale differenza è che PUT viene utilizzato quando l'endpoint che si sta creando andrà ad aggiornare completamente la risorsa mentre PATCH viene utilizzato quando l'endpoint che si sta creando andrà ad aggiornare solo una parte della risorsa, ad esempio solo uno o due campi della risorsa anzichè tutti quanti.

Nel nostro caso andremo ad utilizzare il verbo PATCH.

Andiamo ad aggiungere la route:

app.patch('/articoli/:id', (req, res) => {
  const { id } = req.params;
  const { descrizione, contenuto, categoria } = req.body;
  const articolo = articoli.find(articolo => articolo.id === Number(id));
  articolo.descrizione = descrizione;
  articolo.contenuto = contenuto;
  articolo.categoria = categoria;
  res.render('articoli/show.ejs', { articolo });
});

I campi che stiamo aggiornando sono descrizione, contenuto e categoria e questi sono i campi che stiamo estrapolando dal body della request.

Come facciamo adesso dal browser a fare una richiesta a questo endpoint ed inviare una nuova descrizione, contenuto e categoria?

Per farlo abbiamo bisogno di una pagina che ci mostri un form che ci permetta di inserire i nuovi valori per questi campi e che poi invii una richiesta PATCH a questo endpoint.

Andiamo quindi a creare una nuova route:

app.get('/articoli/:id/edit', (req, res) => {
  const { id } = req.params;
  const articolo = articoli.find(articolo => articolo.id === Number(id));
  res.render('articoli/edit.ejs', { articolo });
});

A questo punto abbiamo bisogno di creare la view edit.ejs. In questa view andremo a creare un form che ci permetta di inviare una richiesta PATCH a /articoli/:id ma abbiamo un problema. I form HTML non supportano il metodo PATCH, quindi come possiamo fare?

Per risolvere questo problema possiamo utilizzare un package npm chiamato method-override che ci permette di utilizzare il metodo PATCH in un form HTML.

npm install method-override

Ed ora nel file index.js dove abbiamo tutte le route andiamo ad aggiungere il seguente codice in alto prima dell'array degli articoli:

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

Ora siamo pronti a creare la view edit.ejs:

touch views/articoli/edit.ejs (in Windows PowerShell usa il comando "New-Item" al posto di "touch")
// views/articoli/edit.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modifica articolo</title>
</head>
<body>
  <h1>Modifica articolo</h1>
  <form action="/articoli/<%= articolo.id %>?_method=PATCH" method="POST">
    <label for="descrizione">Descrizione</label>
    <input type="text" name="descrizione" id="descrizione" value="<%= articolo.descrizione %>">
    <br>
    <label for="contenuto">Contenuto</label>
    <input type="text" name="contenuto" id="contenuto" value="<%= articolo.contenuto %>">
    <br>
    <label for="categoria">Categoria</label>
    <input type="text" name="categoria" id="categoria" value="<%= articolo.categoria %>">
    <br>
    <input type="submit" value="Modifica articolo">
  </form>
</body>
</html>

E a questo punto aggiungiamo un link nel file show.ejs che ci permetta di andare alla pagina di modifica di un articolo:

// views/articoli/show.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Articolo</title>
</head>
<body>
  <h1>Articolo</h1>
  <ul>
    <li>Titolo: <%= articolo.titolo %></li>
    <li>Descrizione: <%= articolo.descrizione %></li>
    <li>Contenuto: <%= articolo.contenuto %></li>
    <li>Categoria: <%= articolo.categoria %></li>
    <li><a href="/articoli/<%= articolo.id %>/edit">Modifica</a></li>
    <li><a href="/articoli">Torna alla lista degli articoli</a></li>
    <li><a href="/">Homepage</a></li>
    <br>
  </ul>
</body>
</html>

Ora se andiamo alla pagina di un articolo e clicchiamo sul link "Modifica" dovremmo essere reindirizzati alla pagina di modifica dell'articolo.

Ora possiamo modificare i campi che vogliamo e cliccare sul pulsante "Modifica articolo" per inviare la richiesta PATCH.

Una volta inviata la richiesta PATCH dovremmo essere reindirizzati alla pagina Show dell'articolo che abbiamo appena modificato.

Cancellazione di un articolo

Infine abbiamo la lettera "D" del concetto CRUD che sta per Delete. Questa è la route che ci permette di cancellare un articolo ed è molto semplice definirla.

const { id } = req.params;
articoli = articoli.filter(articolo => articolo.id !== Number(id));
res.redirect('/articoli');

Ora dobbiamo aggiungere un bottone nella pagina Show di fianco al bottone Modifica che ci permetta di cancellare l'articolo.

// views/articoli/show.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Articolo</title>
</head>
<body>
  <h1>Articolo</h1>
  <ul>
    <li>Titolo: <%= articolo.titolo %></li>
    <li>Descrizione: <%= articolo.descrizione %></li>
    <li>Contenuto: <%= articolo.contenuto %></li>
    <li>Categoria: <%= articolo.categoria %></li>
    <li><a href="/articoli/<%= articolo.id %>/edit">Modifica</a></li>
    <li>
      <form action="/articoli/<%= articolo.id %>?_method=DELETE" method="POST">
        <input type="submit" value="Cancella articolo">
      </form>
    </li>
    <li><a href="/articoli">Torna alla lista degli articoli</a></li>
    <li><a href="/">Homepage</a></li>
    <br>
  </ul>
</body>
</html>

Aggiungere dei pulsanti per facilitare la navigazione

In Alcuni casi abbiamo bisogno di inserire l'URL manualmente per poter navigare tra le pagine. Per evitare questo possiamo aggiungere dei pulsanti che ci permettono di navigare tra le pagine.

Iniziamo con la nostra homepage dove possiamo aggiungere un tasto che ci permette di andare alla pagina Index per visualizzare tutti gli articoli.

// views/homepage.ejs

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restful APIs</title>
</head>
<body>
  <h1>Benvenuto su Restful APIs</h1>

  <a href="/articoli">Vai alla lista degli articoli</a>
</body>
</html>

Ora alla pagina Index possiamo aggiungere un pulsante che ci permette di andare alla pagina New per creare un nuovo articolo ed un pulsante che ci permette di tornare alla Homepage.

// views/articoli/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REST Blog</title>
</head>
<body>
  <h3>Tutti gli articoli:</h3>
  <ul>
    <% for (let articolo of articoli) { %>
      <li>ID: <%= articolo.id %></li>
      <li>Titolo: <%= articolo.titolo %></li>
      <li>Descrizione: <%= articolo.descrizione %></li>
      <li>Contenuto: <%= articolo.contenuto %></li>
      <li>Categoria: <%= articolo.categoria %></li>
      <li><a href="/articoli/<%= articolo.id %>">Visualizza</a></li>
      <br>
    <% } %>
  </ul>

  <a href="/articoli/new">Crea un nuovo articolo</a>
  <br>
  <a href="/">Homepage</a>
</body>
</html>

Per finire, nella pagina New possiamo aggiungere un pulsante che ci permette di tornare alla pagina Index.

// views/articoli/new.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REST Blog</title>
</head>
<body>
  <h3>Crea un nuovo articolo:</h3>

  <form method="POST" action="/articoli">
    <input type="text" name="title" placeholder="Titolo">
    <input type="text" name="description" placeholder="Descrizione">
    <input type="text" name="category" placeholder="Categoria">
    <textarea cols="25" rows="7" name="content"></textarea>
    <button type="submit">Crea</button>
  </form>

  <br>
  <a href="/articoli">Torna alla lista degli articoli</a>
</body>
</html>

Conclusione

Siamo arrivati al termine di questa lunga lezione. Abbiamo visto come creare un RESTful API con Express e Node.js approfondendo il concetto CRUD - Create, Read, Update e Delete.

Questo è stato un grosso passo avanti nel tuo percorso d'apprendimento. Come avrai potuto notare l'estetica di quello che abbiamo sviluppato è molto semplice ma non era questo il punto della lezione. Il punto era quello di farti scoprire e farti praticare concetti importanti come quello di una RESTful API e operazioni CRUD.

Infatti con questa lezione ci stiamo avvicinando alla fine del corso. Nella prossima lezione metteremo in pausa Node JS ed Express per un attimo e ci concentreremo su un altro argomento importantissimo: i Database! In particolare andremo alla scoperta di Mongo DB, un database NoSQL molto popolare e molto utilizzando nel mondo JavaScript che ci permetterà di salvare i nostri dati in un vero e proprio database.

Adesso ti saluto, vado a prendermi un caffè ☕ e ti aspetto alla prossima lezione! Ciao! 👋