Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Esercizio 11 API

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-05 11:57:28 +01:00
parent f4d3e40059
commit 86611fd6e2
37 changed files with 5057 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
JS_Esercizi 11 - API/tutorial/index.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial - API REST e Fetch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>📡 Tutorial - API REST e Fetch</h1>
<p class="subtitle">Impara a comunicare con le API REST</p>
<h2>Cos'è un'API REST?</h2>
<p>
Un'API REST (Representational State Transfer) è un insieme di regole che permette a due applicazioni di comunicare.
Attraverso una API REST puoi <strong>recuperare dati</strong>, <strong>crearli</strong>, <strong>modificarli</strong> e <strong>eliminarli</strong>
da un server usando richieste HTTP.
</p>
<h2>Metodi HTTP Principali</h2>
<div class="endpoint-list">
<div class="endpoint-item">
<strong>GET</strong> - Recupera dati dal server
</div>
<div class="endpoint-item">
<strong>POST</strong> - Crea nuovi dati sul server
</div>
<div class="endpoint-item">
<strong>PUT</strong> - Aggiorna completamente un dato
</div>
<div class="endpoint-item">
<strong>PATCH</strong> - Aggiorna parzialmente un dato
</div>
<div class="endpoint-item">
<strong>DELETE</strong> - Elimina un dato dal server
</div>
</div>
<h2>L'API che Useremo</h2>
<p>
Utilizzeremo un server JSON locale accessibile a <code>http://localhost:3000/api</code>
che contiene risorse diverse (utenti, todo, ecc.).
</p>
<div class="note">
<strong>⚠️ Importante:</strong> Prima di iniziare gli esercizi, assicurati che il server sia avviato!
Apri il terminale nella cartella <code>server-api</code> e digita: <code>npm start</code>
</div>
<h2>1. Fetch API - GET Request</h2>
<p>La fetch API è il modo moderno per fare richieste HTTP in JavaScript.</p>
<h3>Sintassi Base:</h3>
<div class="code-block">
<code>fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Errore:', error));</code>
</div>
<h3>Come Funziona:</h3>
<ol>
<li><strong>fetch(url)</strong> - Invia la richiesta al server</li>
<li><strong>.then(response => response.json())</strong> - Converte la risposta in JSON</li>
<li><strong>.then(data => ...)</strong> - Ricevi e usa i dati</li>
<li><strong>.catch(error => ...)</strong> - Gestisci gli errori</li>
</ol>
<h3>Esempio Pratico:</h3>
<div class="code-block">
<code>fetch('http://localhost:3000/api/users')
.then(response => response.json())
.then(users => {
console.log('Utenti ricevuti:', users);
users.forEach(user => {
console.log(`${user.name} - ${user.email}`);
});
})
.catch(error => console.error('Errore:', error));</code>
</div>
<h2>2. Fetch API - POST Request</h2>
<p>Per inviare dati al server, usiamo il metodo POST.</p>
<h3>Sintassi:</h3>
<div class="code-block">
<code>fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Mario',
email: 'mario@example.com'
})
})
.then(response => response.json())
.then(data => console.log('Creato:', data))
.catch(error => console.error('Errore:', error));</code>
</div>
<h2>3. Fetch API - DELETE Request</h2>
<p>Per eliminare un dato dal server.</p>
<div class="code-block">
<code>fetch('https://api.example.com/users/1', {
method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log('Eliminato:', data))
.catch(error => console.error('Errore:', error));</code>
</div>
<h2>4. Async/Await - Sintassi Moderna</h2>
<p>Una sintassi più leggibile e facile da capire rispetto alle Promise.</p>
<h3>Sintassi:</h3>
<div class="code-block">
<code>async function fetchUsers() {
try {
const response = await fetch('http://localhost:3000/api/users');
const users = await response.json();
console.log('Utenti:', users);
} catch (error) {
console.error('Errore:', error);
}
}
fetchUsers();</code>
</div>
<div class="success">
<strong>✓ Vantaggi:</strong> Il codice è più leggibile e simile al codice sincrono tradizionale.
</div>
<h2>5. Gestione degli Errori</h2>
<p>È importante gestire gli errori quando facciamo richieste HTTP.</p>
<div class="code-block">
<code>fetch('http://localhost:3000/api/users')
.then(response => {
if (!response.ok) {
throw new Error(`Errore HTTP: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
console.error('Errore nella richiesta:', error.message);
});</code>
</div>
<h2>6. Endpoint Disponibili sul Nostro Server</h2>
<div class="endpoint-list">
<div class="endpoint-item">
<strong>GET /api/users</strong> - Ottieni lista utenti<br>
<small>Esempio: http://localhost:3000/api/users</small>
</div>
<div class="endpoint-item">
<strong>GET /api/users/:id</strong> - Ottieni un utente<br>
<small>Esempio: http://localhost:3000/api/users/1</small>
</div>
<div class="endpoint-item">
<strong>POST /api/users</strong> - Crea nuovo utente<br>
<small>Body: { "name": "Mario", "email": "mario@example.com" }</small>
</div>
<div class="endpoint-item">
<strong>PUT /api/users/:id</strong> - Aggiorna utente<br>
<small>Body: { "name": "Luigi", "email": "luigi@example.com" }</small>
</div>
<div class="endpoint-item">
<strong>DELETE /api/users/:id</strong> - Elimina utente<br>
<small>Esempio: http://localhost:3000/api/users/1</small>
</div>
</div>
<h2>Ora Sei Pronto!</h2>
<p>
Hai imparato i concetti fondamentali delle API REST e della Fetch API.
Ora puoi procedere agli esercizi e metterli in pratica!
</p>
<a href="../index.html" class="back-button">← Torna al Hub</a>
</div>
</body>
</html>

208
JS_Esercizi 11 - API/tutorial/styles.css Normal file
View File

@@ -0,0 +1,208 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
h1 {
color: #333;
margin-bottom: 10px;
text-align: center;
font-size: 2.5rem;
}
.subtitle {
text-align: center;
color: #666;
margin-bottom: 40px;
font-size: 1.1rem;
}
h2 {
color: #667eea;
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
font-size: 1.8rem;
}
h3 {
color: #555;
margin-top: 25px;
margin-bottom: 15px;
font-size: 1.3rem;
}
p {
color: #666;
line-height: 1.8;
margin-bottom: 15px;
font-size: 1rem;
}
code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: #d63384;
}
.code-block {
background: #f5f5f5;
border-left: 4px solid #667eea;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
overflow-x: auto;
}
.code-block code {
background: none;
padding: 0;
color: #333;
display: block;
font-size: 0.9rem;
}
.example-section {
background: #e3f2fd;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
border-left: 5px solid #2196F3;
}
.example-section h4 {
color: #1565c0;
margin-bottom: 10px;
}
.endpoint-list {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
.endpoint-item {
margin: 15px 0;
padding: 15px;
background: white;
border-left: 4px solid #667eea;
border-radius: 4px;
}
.endpoint-item strong {
color: #667eea;
font-family: monospace;
}
ul, ol {
margin-left: 20px;
color: #666;
line-height: 1.8;
}
li {
margin: 10px 0;
}
.back-button {
display: inline-block;
margin-top: 30px;
padding: 12px 30px;
background: #667eea;
color: white;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s;
font-weight: 600;
}
.back-button:hover {
background: #764ba2;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.note {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
border-radius: 4px;
margin: 15px 0;
}
.note strong {
color: #856404;
}
.success {
background: #d4edda;
border-left: 4px solid #28a745;
padding: 15px;
border-radius: 4px;
margin: 15px 0;
}
.success strong {
color: #155724;
}
.interactive-demo {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.interactive-demo input,
.interactive-demo button {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.9rem;
}
.interactive-demo button {
background: #667eea;
color: white;
cursor: pointer;
border: none;
font-weight: 600;
}
.interactive-demo button:hover {
background: #764ba2;
}
.result {
background: white;
padding: 15px;
margin-top: 10px;
border-radius: 4px;
border: 1px solid #ddd;
max-height: 200px;
overflow-y: auto;
font-size: 0.85rem;
font-family: monospace;
}