Skills Tracker: Come creare un'applicazione per tracciare le proprie competenze IT

Lo Skills Tracker nasce da un’esigenza molto pratica: fare il punto della situazione sul proprio percorso professionale, tracciando e visualizzando in modo chiaro il livello di padronanza raggiunto nelle varie tecnologie.

In questo articolo vediamo come ho realizzato una semplice Single Page Application (SPA) per gestire ed aggiornare visivamente le proprie competenze in tempo reale.

---

Architettura del progetto

Per mantenere l’applicazione il più reattiva e semplice possibile, l’architettura si basa su componenti essenziali:

• Frontend: Una pagina HTML monolitica affiancata da JavaScript per la gestione delle interazioni e l’aggiornamento dinamico del DOM.
• UI Framework: Materialize CSS per la componente visuale (slider, griglie e notifiche toast) e le icone Google Material.
• Database: Firebase Realtime Database per la persistenza dei dati gestita via chiamate HTTP RESTful.

---

Step 1: Lo scheletro HTML

L’interfaccia si basa su una struttura essenziale. Nel <head> vengono importati i fogli di stile di Materialize CSS, il font per le icone e la libreria jQuery per la gestione rapida delle chiamate AJAX e la manipolazione degli elementi.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Font Icone Google & Materialize CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  
  <!-- Script JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <title>My Skills Tracker</title>
</head>
<body>
  <header class="container">
    <h1 class="app-title">My Skills</h1>
  </header>

  <!-- Container dinamico in cui verranno iniettati gli slider -->
  <div id="mainContainer" class="container"></div>

  <div class="container">
    <div class="row">
      <button type="button" class="waves-effect waves-light btn" onclick="postLivelli()" style="float:right">
        <i class="material-icons left">save</i>Aggiorna livelli
      </button>
    </div>
  </div>
</body>
</html>

---

Step 2: Recuperare le competenze (Chiamata GET)

All’avvio dell’applicazione, una funzione JavaScript esegue una chiamata HTTP GET verso le API REST di Firebase Realtime Database. I dati ricevuti in formato JSON vengono iterati per generare dinamicamente gli input di tipo range (slider da 0 a 100).

function getLivelli() {
  $.ajax({
    type: "GET",
    url: "https://<YOUR-FIREBASE-APP>.firebaseio.com/skills.json",
    dataType: "json",
    success: function (result) {
      $('#mainContainer').html('');
      for (var comp in result) {
        $('#mainContainer').append(
          '<div>' +
            '<p class="range-field">' +
              '<label for="' + result[comp].nome + '" class="form-label">' + result[comp].label + '</label>' +
              '<input type="range" class="form-range" id="' + result[comp].nome + '" max="100" min="0" value="' + result[comp].livello + '">' +
            '</p>' +
          '</div>'
        );
      }
    },
    error: function (xhr, status, error) {
      alert("Errore nel recupero dati: " + status + " - " + error);
    }
  });
}

---

Step 3: Salvataggio e aggiornamento (Chiamata PUT)

Quando si spostano gli slider e si clicca sul pulsante “Aggiorna livelli”, l’applicazione raccoglie i nuovi valori impostati iterando sugli elementi del DOM e invia un payload JSON tramite una chiamata PUT a Firebase.

function postLivelli() {
  var params = [];

  // Raccogliamo i valori correnti dagli slider
  $("p.range-field").each(function () {
    params.push({
      "nome": $(this).find('input').attr('id'),
      "livello": $(this).find('input').val(),
      "label": $(this).find('label').text()
    });
  });

  // Chiamata HTTP PUT per sovrascrivere lo stato su Firebase
  $.ajax({
    type: "PUT",
    url: "https://<YOUR-FIREBASE-APP>.firebaseio.com/skills.json",
    dataType: "json",
    data: JSON.stringify(params),
    success: function () {
      // Notifica Toast visiva grazie a Materialize CSS
      M.toast({ html: 'Modifiche salvate con successo!' });
      getLivelli();
    },
    error: function (xhr, status, error) {
      alert("Errore durante il salvataggio: " + status + " - " + error);
    }
  });
}

---

Deploy dell’applicazione

L’intero progetto è stato distribuito tramite la piattaforma Netlify. Il workflow di pubblicazione è immediato:

1. Push del codice sorgente sul repository GitHub.
2. Collegamento del repository su Netlify con selezione del branch principale (main).
3. Deploy automatico a ogni nuova modifica.

---

Evoluzioni future

Questo prototipo rappresenta una solida base di partenza. I prossimi step di refactoring previsti sono:

• Refactoring Frontend: Migrare l’interfaccia verso un framework moderno come Vue.js o Angular.
• Gestione CRUD completa: Consentire la creazione di nuove skill e la cancellazione diretta da UI.
• Backend dedicato: Sviluppare un microservizio in Java Spring Boot per sganciarsi dalle chiamate dirette al DB.
• Autenticazione: Integrare Firebase Authentication per proteggere le API di aggiornamento.

Progetti semplici come questo sono eccellenti per testare rapidamente integrazioni tra frontend e backend cloud. Se hai suggerimenti o vuoi scambiare due chiacchiere sull’architettura, contattami pure!