Skip to main content

📂 Struttura del Progetto — Electron Barcode App

L’applicazione Electron Barcode App è una desktop app multipiattaforma sviluppata con Angular come frontend e Electron come wrapper per la distribuzione.
La struttura è divisa in due livelli principali:

  1. Root (Electron layer): configurazione e avvio della finestra desktop (main.js, preload.js);
  2. src/ (Angular app): codice applicativo della web app.

⚡ Electron Layer​

Nella root del progetto troviamo i file specifici di Electron:

  • main.js

    • Entry point del processo main di Electron.
    • Crea la BrowserWindow e carica l’index.html buildato da Angular.
    • Configura la comunicazione IPC con il renderer:
      • print-action: riceve i dati per la stampa e li invia alla stampante.
      • add-printer: comunica alla UI eventuali aggiornamenti stampanti.
    • Abilita preload.js con contextIsolation.

  • preload.js

    • Funziona da ponte sicuro tra il main process e Angular.
    • Espone in window.electronAPI:
      • printAction({ printerIp, printerPort, message }): invia messaggi di stampa al main.
      • addPrinter(callback): sottoscrizione a eventi di configurazione stampante.

  • File di configurazione principali

    • package.json: definisce dipendenze (Electron, Angular, ecc.) e script di avvio.
    • tsconfig.json: configurazione TypeScript.
    • angular.json: configurazione build Angular.

🧩 Angular Layer (/src)​

Dentro la cartella src risiede la classica struttura di un progetto Angular:

src/
├── app/                     # Root Angular component
├── assets/                  # Asset statici (icone, immagini, ecc.)
├── authenticationStore/     # Gestione autenticazione (NgRx store/effects)
├── components/              # Componenti condivisi
│   └── app-topbar/          # Barra superiore comune
├── environments/            # Configurazioni ambienti (dev/prod)
├── homepage/                # Schermata principale con wizard dei lotti
│   ├── components/          # Sottocomponenti specifici (es. add-dispenser)
│   └── store/               # Stato locale con NgRx/Signals
├── login/                   # Modulo login (form autenticazione)
├── modules/                 # Routing e moduli Angular
├── services/                # Servizi globali (printer, popup, backend)
├── store/                   # Store condivisi (gestione dispenser, update-lot)
├── update-dispenser-lot/    # Flusso dedicato alla modifica e ristampa lotti
├── main.ts                  # Bootstrap dell’app Angular
├── styles.scss              # Stili globali
└── typings.d.ts             # Tipizzazioni globali per Electron API

📌 File chiave Angular​

  • main.ts

    • Avvio Angular, bootstrap di AppModule.

  • typings.d.ts

    • Estende l’interfaccia Window dichiarando electronAPI.

    • Consente l’autocompletamento TypeScript quando Angular invoca API di Electron.

  • app/

    • Contiene il AppComponent, root container con <router-outlet>.

  • components/app-topbar/

    • Barra superiore persistente.

    • Mostra configurazione stampante, controlli globali e navigazione.

  • homepage/

    • Feature principale per creazione e gestione lotti dispenser.

    • Flusso guidato a più step:

      • NEW_LOT: creazione nuovo lotto.

      • ADD_DISPENSER_SERIAL: aggiunta seriali dispenser.

      • RECAP_PAGE: riepilogo e invio in stampa.

    • Store dedicato (dispenserLot.store.ts) con gestione in locale (localStorage).

  • update-dispenser-lot/

    • Gestione modifica lotti esistenti.

    • Permette ristampa etichette e aggiornamento informazioni.

  • services/

    • printer.service.ts: interfaccia Angular → Electron → stampante.

    • popup.service.ts: gestione messaggi e notifiche UI.

    • backend.service.ts (se presente): API HTTP verso servizi remoti.

  • authenticationStore/

    • Gestisce autenticazione e sessione con NgRx Effects e Selectors.

🔄 Integrazione Angular + Electron​

  • Angular genera la build (dist/).

  • Electron (main.js) apre index.html della build in una BrowserWindow.

  • Preload (preload.js) espone API sicure (window.electronAPI).

  • Angular services (es. PrinterService) invocano queste API → IPC verso main.js.

  • Main.js esegue l’azione (es. invio TCP alla stampante) e opzionalmente invia risposta al renderer.

🛠️ Tecniche di sviluppo​

  • Gestione stato: NgRx Store + effetti; nei nuovi componenti introdotti Signals.

  • Osservabili: convenzione variabile$ per proprietà Observable.

  • Naming conventions:

    • nomeVariabile

    • nomeFunzione()

    • NomeClasse

    • NOME_COSTANTE

👉 In sintesi:​

Il progetto è una desktop app Angular/Electron per la gestione di lotti dispenser e la stampa etichette. Electron fornisce il wrapper desktop e la comunicazione con le stampanti, mentre Angular gestisce la logica applicativa, UI e flussi di business.