Esercizio 11 API

2026-02-05 11:57:28 +01:00
parent f4d3e40059
commit 86611fd6e2
37 changed files with 5057 additions and 0 deletions
--- a/API/README.md
+++ b/API/README.md
@@ -0,0 +1,166 @@
+# 🔌 Esercizi API REST - Guida Completa
+
+## 📋 Struttura del Progetto
+
+```
+JS_Esercizi 11 - API/
+├── index.html              # Hub principale - accesso agli esercizi
+├── tutorial/
+│   └── index.html          # Tutorial su API REST e Fetch
+└── esercizi/
+    ├── meteo/
+    │   └── index.html      # Esercizio 1: GET Request base
+    ├── lista_utenti/
+    │   └── index.html      # Esercizio 2: GET con iterazione e DOM
+    └── todo_app/
+        └── index.html      # Esercizio 3: CRUD completo (POST, PUT, DELETE)
+```
+
+## 🚀 Come Iniziare
+
+### 1. Avvia il Server API
+Prima di iniziare qualsiasi esercizio, **devi avviare il server**:
+
+```bash
+cd server-api
+npm start
+```
+
+Il server sarà disponibile a: `http://localhost:3000/api`
+
+### ⚠️ Importante
+Se non avvii il server, gli esercizi non funzioneranno perché non riusciranno a recuperare i dati!
+
+## 📚 Contenuto del Corso
+
+### 🎓 Tutorial
+Leggi prima il tutorial per capire:
+- Cos'è un'API REST
+- Come funziona la Fetch API
+- Metodi HTTP (GET, POST, PUT, DELETE)
+- Promise e Async/Await
+
+**Accedi da:** [index.html → Tutorial](tutorial/index.html)
+
+### 🔧 Esercizio 1: App Meteo (GET Base)
+**Difficoltà:** ⭐ Base
+
+Impara i fondamenti delle GET request:
+- Fetch API base
+- Conversione JSON
+- Visualizzazione dati
+- Gestione errori
+
+**Cosa fare:** Scrivi il codice per recuperare e visualizzare dati meteo
+
+**Accedi da:** [index.html → App Meteo](esercizi/meteo/index.html)
+
+### 👥 Esercizio 2: Lista Utenti (GET + DOM)
+**Difficoltà:** ⭐⭐ Intermedio
+
+Sviluppa skills di manipolazione del DOM:
+- GET request avanzato
+- Iterazione array con map()
+- Creazione dinamica di elementi HTML
+- Conteggio e statistiche
+
+**Cosa fare:** Recupera una lista di utenti e crea card dinamiche
+
+**Accedi da:** [index.html → Lista Utenti](esercizi/lista_utenti/index.html)
+
+### ✓ Esercizio 3: Todo App (CRUD Completo)
+**Difficoltà:** ⭐⭐⭐ Avanzato
+
+Implementa tutte le operazioni CRUD:
+- **CREATE:** POST request per aggiungere todo
+- **READ:** GET request per recuperare todo
+- **UPDATE:** PUT request per segnare come completato
+- **DELETE:** DELETE request per eliminare
+
+**Cosa fare:** Crea un'app TODO completa con tutte le operazioni
+
+**Accedi da:** [index.html → Todo App](esercizi/todo_app/index.html)
+
+## 🛠️ API Endpoints Disponibili
+
+Il server fornisce questi endpoint:
+
+```
+GET    /api/weather      → Ottieni dati meteo
+GET    /api/users        → Ottieni lista utenti
+GET    /api/users/:id    → Ottieni un utente
+POST   /api/users        → Crea nuovo utente
+PUT    /api/users/:id    → Aggiorna utente
+DELETE /api/users/:id    → Elimina utente
+
+GET    /api/todos        → Ottieni lista todo
+GET    /api/todos/:id    → Ottieni un todo
+POST   /api/todos        → Crea nuovo todo
+PUT    /api/todos/:id    → Aggiorna todo
+DELETE /api/todos/:id    → Elimina todo
+```
+
+## 📖 Esempi di Codice
+
+### GET Request Base
+```javascript
+const response = await fetch('http://localhost:3000/api/users');
+const users = await response.json();
+console.log(users);
+```
+
+### POST Request
+```javascript
+const response = await fetch('http://localhost:3000/api/todos', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title: 'Nuovo todo', completed: false })
+});
+const newTodo = await response.json();
+```
+
+### DELETE Request
+```javascript
+const response = await fetch('http://localhost:3000/api/todos/1', {
+    method: 'DELETE'
+});
+```
+
+## ✅ Checklist Completamento
+
+- [ ] Ho avviato il server `npm start` nella cartella server-api
+- [ ] Ho letto il Tutorial
+- [ ] Ho completato l'Esercizio 1 (App Meteo)
+- [ ] Ho completato l'Esercizio 2 (Lista Utenti)
+- [ ] Ho completato l'Esercizio 3 (Todo App)
+
+## 💡 Suggerimenti
+
+1. **Leggi sempre il tutorial prima** di iniziare gli esercizi
+2. **Apri la console browser** (F12) per vedere i messaggi di errore
+3. **Utilizza network tab** in DevTools per vedere le richieste HTTP
+4. **Prova i comandi curl** nel terminale per testare gli endpoint
+5. **Inizia semplice:** completa prima le funzioni di base
+
+## 🐛 Troubleshooting
+
+**Errore: "Fetch failed"**
+- Controlla che il server sia avviato con `npm start`
+- Verifica che il URL sia corretto
+
+**Errore: "response.json() is not a function"**
+- Controlla che la risposta sia valida JSON
+- Vedi la console per il messaggio di errore esatto
+
+**Dati non visualizzati**
+- Controlla che il codice fetch sia implementato
+- Verifica che il DOM sia aggiornato correttamente
+- Usa `console.log()` per debuggare
+
+## 📚 Risorse Utili
+
+- [MDN - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [MDN - async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises)
+- [JSON Server GitHub](https://github.com/typicode/json-server)
+
+Buon lavoro! 🚀