Laboratorio: dashboard con dati esterni

In parole semplici

Una dashboard è una piccola area che mostra dati aggiornati. In questo laboratorio carichi dati esterni, mostri caricamento, contenuto ed errore.

Questa lezione fa parte del modulo Dati, attese e richieste web. L’obiettivo del modulo è: Capire come gestire operazioni che non danno una risposta immediata.

Parole nuove

• dashboard: pagina o sezione che riassume dati importanti.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una piccola dashboard che mostra dati caricati da una fonte esterna.

Esempio da copiare

<p id="stato">Pronto</p>
<button id="ricarica">Ricarica</button>

<script>
  const stato = document.querySelector("#stato");
  const ricarica = document.querySelector("#ricarica");

  async function carica() {
    stato.textContent = "Caricamento...";
    const risposta = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const utente = await risposta.json();
    stato.textContent = utente.name;
  }

  ricarica.addEventListener("click", carica);
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea una pagina con un paragrafo e un bottone.
2. Al clic del bottone carica dati con fetch.
3. Mostra Caricamento mentre aspetti.
4. Mostra un nome quando arriva.
5. Aggiungi un messaggio di errore con try/catch.

Controllo finale

Hai finito quando il bottone aggiorna la dashboard e la pagina non resta mai senza messaggio.