fix 11.tutorial

javascript/11_API/tutorial/index.html

@@ -36,7 +36,7 @@
         [
             {
                 title: "1. Il concetto di Attesa (Simulazione)",
-                description: "Le API sono lente. Simuliamo un ritardo di 2 secondi prima di mostrare il messaggio.",
+                description: "Le API sono lente. Simuliamo un ritardo di 1 secondo prima di mostrare il messaggio.",
                 outputLabel: "Output Step 1:"
             },
             {
@@ -50,22 +50,27 @@
                 outputLabel: "Dati ricevuti:"
             },
             {
-                title: "4. Estrazione Dati (JSON)",
+                title: "4. Risposta Grezza (Raw Response)",
+                description: "La risposta di fetch è un oggetto complesso. Vediamo cosa contiene davvero.",
+                outputLabel: "Oggetto Response:"
+            },
+            {
+                title: "5. Estrazione Dati (JSON)",
                 description: "La risposta grezza non basta. Dobbiamo convertirla ed estrarre il titolo.",
                 outputLabel: "Titolo del Post:"
             },
             {
-                title: "5. Gestione Errori (Try/Catch)",
+                title: "6. Gestione Errori (Try/Catch)",
                 description: "Proviamo a chiamare un sito che non esiste per vedere se il codice sopravvive.",
                 outputLabel: "Stato operazione:"
             },
             {
-                title: "6. Lavorare con le Liste (Array)",
+                title: "7. Lavorare con le Liste (Array)",
                 description: "Scarichiamo 10 utenti e mostriamo solo i loro nomi.",
                 outputLabel: "Elenco Utenti:"
             },
             {
-                title: "7. Invio Dati (POST)",
+                title: "8. Invio Dati (POST)",
                 description: "Simuliamo l'invio di un nuovo post al server.",
                 outputLabel: "Risposta Server:"
             }

javascript/11_API/tutorial/script.js

@@ -2,7 +2,7 @@
 
 // NON TOCCARE
 // Funzioni di supporto per il tutorial
-const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // Simula server lento
+const delay = (ms) => new Promise(res => setTimeout(res, ms)); // Simula server lento
 
 // Funzione pricipale del tutorial
 async function eseguiTutorial() {
@@ -14,8 +14,8 @@ async function eseguiTutorial() {
      * La keyword 'await' serve a dire "Fermati qui finché l'operazione non finisce".
      */
     // Questa funzione simula un server che ci mette 1 secondo a rispondere
-    // TODO: Aggiungi 'await' prima di wait(1000) per far funzionare l'attesa.
+    // TODO: Aggiungi 'await' prima di delay(1000) per far funzionare l'attesa.
-    wait(1000);
+    delay(1000);
 
     mostraOutput(1, "Operazione completata!");
 
@@ -24,7 +24,7 @@ async function eseguiTutorial() {
      * === 2. Async/Await ===
      * Per usare 'await', la funzione deve essere dichiarata come 'async'.
      * Questo è un modo elegante per scrivere codice asincrono.
-     * Crea una funzione async chiamata 'aspetta2Secondi' che aspetta 2 secondi (usa la funzione wait).
+     * Crea una funzione async chiamata 'aspetta2Secondi' che aspetta 2 secondi (usa la funzione delay).
      * Poi stampa "2 secondi sono passati!" e mostra il risultato usando mostraOutput(2, "2 secondi sono passati!").
      * Chiama la funzione subito dopo averla definita.
      */
@@ -38,7 +38,7 @@ async function eseguiTutorial() {
      * Usiamo `fetch(url)` per chiamare un server vero.
      */
     // TODO: crea una costante 'urlBase' con l'indirizzo dettato a lezione
-    // TODO: Esegui una fetch a quell'URL.
+    // TODO: Esegui una fetch a urlBase + "/users/1" e salva la risposta in 'rispostaGrezza'.
     // Ricorda di mettere 'await' davanti a fetch!
     const urlBase = "https://sito-finto.com";
     const rispostaGrezza = null;
@@ -48,7 +48,23 @@ async function eseguiTutorial() {
 
     /**
      * ===========================================
-     * === 4. Estrarre il JSON ===
+     * === 4. Controllare la Risposta ===
+     * Prima di estrarre i dati, dobbiamo controllare se la risposta è OK.
+     * La proprietà 'ok' è true se status code è 200-299.
+     */
+    let statoRisposta = "";
+
+    if (rispostaGrezza) {
+        //TODO: mostrare il codice e il suo testo
+        statoRisposta = "";
+    }
+
+    mostraOutput(4, statoRisposta);
+
+
+    /**
+     * ===========================================
+     * === 5. Estrarre il JSON ===
      * La risposta grezza contiene status code, headers, ecc.
      * A noi servono i dati. Dobbiamo usare il metodo .json().
      * ANCHE .json() è asincrono e vuole 'await'.
@@ -63,12 +79,12 @@ async function eseguiTutorial() {
         nomeUtente = "NOME MANCANTE"; 
     }
 
-    mostraOutput(4, nomeUtente);
+    mostraOutput(5, nomeUtente);
 
 
     /**
      * ===========================================
-     * === 5. Gestione Errori (Try / Catch) ===
+     * === 6. Gestione Errori (Try / Catch) ===
      * Se il server è giù o l'URL è sbagliato, fetch esplode.
      * Usiamo try/catch per gestire il problema.
      */
@@ -76,15 +92,15 @@ async function eseguiTutorial() {
         // TODO: Prova a fare una fetch a un URL sbagliato (es. 'https://sito-finto.com')
         // Ricorda l'await!
 
-        mostraOutput(5);
+        mostraOutput(6);
     } catch (errore) {
-        mostraOutput(5, errore.message);
+        mostraOutput(6, errore.message);
     }
 
 
     /**
      * ===========================================
-     * === 6. Liste di Dati (Array) ===
+     * === 7. Liste di Dati (Array) ===
      * Spesso riceviamo un array di oggetti. Dobbiamo ciclarlo.
      */
     // Scarichiamo 5 utenti
@@ -95,15 +111,15 @@ async function eseguiTutorial() {
         // TODO: Usa .map() o un ciclo for per creare un array contenente SOLO i nomi degli utenti.
         const soloNomi = []; 
 
-        mostraOutput(6, soloNomi);
+        mostraOutput(7, soloNomi);
     } catch (errore) {
-        mostraOutput(6, "");
+        mostraOutput(7, "");
     }
 
 
     /**
      * ===========================================
-     * === 7. Inviare Dati (POST) ===
+     * === 8. Inviare Dati (POST) ===
      * Per inviare dati, fetch accetta un secondo parametro di opzioni.
      */
     // TODO: Completa l'oggetto con i dati mancanti
@@ -127,8 +143,8 @@ async function eseguiTutorial() {
         });
 
         const risultatoInvio = await rispInvio.json();
-        mostraOutput(7, risultatoInvio);
+        mostraOutput(8, risultatoInvio);
     } catch (errore) {
-        mostraOutput(7, "");
+        mostraOutput(8, "");
     }
 }