1. EasyEDA – Footprint e Simboli

1.1 Come orientarsi nei footprint

Footprint Manager: si apre da Tools → Footprint Manager o cliccando sul campo “Footprint” di un componente.

• Mostra tutti i footprint associati ai simboli presenti nello schema
• Evidenzia errori di corrispondenza tra pin del simbolo e pad del footprint

1.2 Libreria online

• Integra la libreria di LCSC/JLCPCB
• Puoi cercare per nome del package (es. “SOIC-8”, “0603”, “TO-220”)
• Non è un catalogo narrativo: devi sapere almeno il tipo di package

1.3 Creazione footprint personalizzati

• Da File → New → Footprint
• Serve il datasheet del componente per dimensioni, piazzole e spaziature

2. Breakout – Tabella e Associare Footprint

2.1 Come associare un componente a un footprint

1. Apri lo schematico dove hai inserito il simbolo
2. Seleziona il componente → nella barra laterale (Properties) trovi Footprint
3. Clicca sul campo Footprint (o sul pulsante “…”)
4. Si apre la finestra di ricerca footprint
5. Cerca il footprint (es. “SOIC-8”, “0805”, “PinHeader 1×6 2.54mm”)
6. Seleziona il footprint corretto e conferma
7. Verifica con Footprint Manager (Tools → Footprint Manager)

2.2 Tabella breakout/moduli comuni

• MPU6050 (GY-521): Cerca “MPU6050” o “GY-521” → PinHeader 1×8, 2.54mm
• HC-05 Bluetooth: Cerca “HC-05” → PinHeader 1×6, 2.54mm
• ESP32-WROOM: Cerca “ESP32-WROOM-32” → Package modulare 38 pin (2×19)
• OLED SSD1306: Cerca “SSD1306” o “OLED 128×64” → PinHeader 1×4, 2.54mm
• DHT11/DHT22: Cerca “DHT11″/”DHT22” → PinHeader 1×3, 2.54mm
• NRF24L01+: Cerca “NRF24L01” → PinHeader 2×4, 2.54mm
• Relay module: Cerca “Relay module” → PinHeader 1×3/1×4, 2.54mm
• Arduino Nano: Cerca “Arduino Nano” → Dual PinHeader 2×15, 2.54mm

3. PWA – Guida all’Installazione

3.1 Requisiti per l’installabilità

• HTTPS (obbligatorio per Chrome Android)
• Manifest.json valido con id e start_url assoluti
• Service Worker registrato e attivo
• Icone 192×192 e 512×512 raggiungibili
• Il service worker deve controllare la pagina

3.2 Service Worker – Configurazione corretta

const CACHE_NAME = 'ruota-radioamatori-v1';
const ASSETS = [
  './',
  './index.html',
  './manifest.json',
  './icon-192.png',
  './icon-512.png'
];

self.addEventListener('install', event => {
  self.skipWaiting();
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('activate', event => {
  self.clients.claim();
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys
          .filter(k => k !== CACHE_NAME)
          .map(k => caches.delete(k))
      )
    )
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(resp => resp || fetch(event.request))
  );
});

4. Manifest.json – Configurazione

4.1 Manifest corretto per GitHub Pages / Netlify

{
  "name": "Ruota Radioamatori",
  "short_name": "Ruota",
  "id": "/",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f5f5f5",
  "theme_color": "#1f4f7f",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. Service Worker – Registrazione

5.1 Registrazione corretta (senza event load)

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .catch(err => console.log('SW registration failed', err));
}
</script>

5.2 Posizione del file

• service-worker.js deve essere nella root del sito
• Non deve essere in sottocartelle (es. /js/, /assets/)
• La registrazione deve usare percorso relativo: 'service-worker.js'

6. GitHub Pages – Deploy

6.1 Procedura

1. Crea repository pubblico (es. ruota-pwa)
2. Carica i file: index.html, manifest.json, service-worker.js, icon-*.png
3. Vai su Settings → Pages
4. Scegli: Deploy from branch → main → / (root)
5. Attendi 10-30 secondi
6. URL: https://USERNAME.github.io/REPOSITORY/

6.2 Problemi comuni

• 404: Il file principale deve chiamarsi index.html
• Repository sbagliato: GitHub Pages usa il nome del repository per l’URL
• Cache: Forza il rebuild con un commit vuoto (es. aggiungi un commento in index.html)

7. Netlify – Deploy Alternativo

7.1 Procedura

1. Vai su app.netlify.com
2. Login (Google va bene)
3. Clicca Add new site → Deploy manually
4. Trascina la cartella con i file
5. Netlify pubblica e assegna un URL tipo https://nome-casuale.netlify.app/

7.2 Redirect per index.html

Se vuoi che /index.html reindirizzi a /, crea un file _netlify.toml nella root:

[[redirects]]
  from = "/index.html"
  to = "/"
  status = 301

8. Troubleshooting PWA

8.1 Problema: il service worker è attivo ma la pagina non è controllata

• skipWaiting() e clients.claim() mancano nel service worker
• Registrazione troppo tarda: usa window.addEventListener('load', ...) solo se necessario
• Percorso sbagliato: service-worker.js deve essere nella root
• Registrazione duplicata: controlla che non ci siano altre registrazioni in altri file
• Manifest con start_url e id sbagliati: deve corrispondere all’URL reale

8.2 Problema: il manifest non viene caricato

• Percorso sbagliato: verificare che manifest.json sia nella root
• id e start_url assoluti: se su sottocartella, usarli assoluti
• Cache: forzare il rebuild con commit vuoto

8.3 Problema: il pulsante “Installa app” non compare

• HTTPS: la PWA deve essere servita su HTTPS
• Service worker controlla la pagina: verificare in DevTools → Application → Service Workers
• Chiusura/riapertura pagina: dopo l’attivazione del SW, chiudere e riaprire la scheda
• DevTools aperto: il pulsante potrebbe non comparire con DevTools aperto