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:

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

🔧 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

👥 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

✓ 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

🛠️ 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

const response = await fetch('http://localhost:3000/api/users');
const users = await response.json();
console.log(users);

POST Request

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

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

Leggi sempre il tutorial prima di iniziare gli esercizi
Apri la console browser (F12) per vedere i messaggi di errore
Utilizza network tab in DevTools per vedere le richieste HTTP
Prova i comandi curl nel terminale per testare gli endpoint
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

Buon lavoro! 🚀