Skills Tracker App

Introduzione

Un’ applicazione super semplice per tener traccia dell’avanzamento delle proprie skills. Può essere utile per fare un momento di riflessione e avere una rapida panoramica del livello in cui si è in quel momento.

Architettura

L’applicazione è scritta in HTML, JavaScript e CSS ed è composta da un unico file html. Il salvataggio e recupero dei dati avviene tramite chiamate HTTP a Firebase Real Time Database.

Prossime Modifiche

Le prossime modifiche che vorrei fare sono:

Riscrivere il frontend in Vuejs
Implementare la possibilità di aggiungere e cancellare una skill
Aggiungere il backend con Spring Boot
Aggiungere l’autenticazione di Firebase

Vediamo il progetto

Step 1: Come creare lo scheletro

Il progetto è composto da 1 pagina HTML contenitore. La prima riga è la dichiarazione <!DOCTYPE html>. Serve per indicare al browser che si deve aspettare un documento Html.

Si definisce il tag padre che conterrà tutti gli elementi, <html>. Il prossimo tag è <head> che contiene i metadata come stili, script, link, ecc. Non sono visibili in pagina.

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <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>
  <script>
   $(function () {
      getLivelli();
    })
    function getLivelli() {

    })
    function postLivelli() {

    })
  </script>
  <title>My Skills</title>
</head>