In questo articolo raccontiamo come ne abbiamo progettato uno da zero: le scelte di architettura, il perché di un unico motore di disegno condiviso tra browser e server, e le ragioni per cui abbiamo preferito costruirlo su misura invece di assemblare un plugin.
In breve. Un solo motore SVG genera sia l'anteprima a schermo sia il PDF. La distinta esce come tavola tecnica in A4, volutamente senza prezzi. Il codice è di proprietà del serramentista, brandizzabile e senza lock-in. L'endpoint pubblico è blindato con validazione a whitelist e limitazione delle risorse. Puoi vederlo in funzione nella scheda del progetto.
Configuratore di serramenti su misura
Un configuratore di serramenti (o configuratore di infissi) è un'applicazione web che traduce le scelte di un utente — famiglia di serramento, materiale, tipologia di apertura, misure, ripartizione delle ante, inglesine, pacchetto vetro — in un prospetto tecnico quotato e in un documento riepilogativo. Non è un listino e non è un e-commerce: è uno strumento di preventivazione tecnica che prepara il terreno alla trattativa, lasciando al serramentista il controllo sul prezzo.
Il valore, per chi produce serramenti, è duplice: il cliente arriva alla richiesta di preventivo già con le idee chiare e una specifica corretta, e l'azienda riceve una distinta leggibile invece di una descrizione approssimativa.
Un serramento è un oggetto a parametri combinati. La stessa finestra può essere in legno, in alluminio, in PVC o in accoppiato legno-alluminio; può essere a battente, a ribalta, scorrevole; può avere una o più ante, con ripartizioni asimmetriche; può montare vetri diversi per isolamento termico o acustico. Le combinazioni sono migliaia, e ognuna ha un disegno e una descrizione tecnica differenti.
Questo è esattamente il tipo di problema che un configuratore risolve bene — a patto che il disegno sia corretto e coerente in ogni combinazione. È qui che si gioca la differenza tra uno strumento credibile davanti a un tecnico e un giocattolo che disegna rettangoli.
La decisione architetturale più importante è stata avere un unico motore di disegno, condiviso tra il browser e il server. La stessa funzione che disegna l'anteprima interattiva a schermo è quella che genera il disegno dentro il PDF. Nessuna duplicazione.
Il motivo è semplice e ha conseguenze concrete: se la logica del disegno vivesse in due copie — una lato client per l'anteprima, una lato server per il PDF — prima o poi divergerebbero, e il cliente vedrebbe a schermo un serramento diverso da quello stampato sulla distinta. Un errore inaccettabile in un documento tecnico. Con una sorgente unica, ciò che vedi è ciò che ottieni, per costruzione.
È il principio che sta dietro al nostro "Progettato. Non assemblato.": la coerenza non è un controllo aggiunto alla fine, è una proprietà dell'architettura.
Il disegno è realizzato in SVG, generato per intero dai parametri della configurazione. Ogni linea — telaio, anta, battuta, verso di apertura, quote dimensionali — è calcolata, non pescata da una libreria di immagini statiche. Questo permette misure reali, ante asimmetriche, prospetti quotati e un livello di dettaglio che regge lo sguardo di chi i serramenti li progetta.
La scelta estetica è deliberata: il linguaggio della tavola tecnica, con griglia, quote e tratto da blueprint. Non è decorazione. Parla la stessa lingua del serramentista e comunica precisione. A schermo il tema è scuro, da blueprint; in stampa diventa una tavola bianca, pulita e professionale — due rese dello stesso disegno, non due disegni.
Dalla configurazione nasce una distinta multi-posizione: più serramenti raccolti in un'unica richiesta, ciascuno con quantità, note e miniatura. La distinta si esporta in un PDF in formato A4, generato lato server per garantire un risultato identico su qualsiasi dispositivo e stampante.
Una scelta merita una nota: la distinta non contiene prezzi. È una decisione di prodotto, non una mancanza. La valorizzazione economica di un serramento dipende da troppe variabili aziendali e di posa perché abbia senso automatizzarla in modo generico; resta competenza del serramentista. Il configuratore produce la specifica tecnica corretta, non il preventivo economico.
Il configuratore è white-label e riproponibile: un'unica base di codice, installabile e brandizzata per ogni azienda. Ogni serramentista possiede la propria installazione, con il proprio marchio, e — punto per noi non negoziabile — il proprio codice, senza lock-in. Nessun abbonamento a piattaforma, nessun dato che vive su server di terzi fuori dal controllo dell'azienda.
Generare un PDF sul server significa esporre un endpoint pubblico che accetta input e produce un documento. Trattato con leggerezza, è un rischio concreto: input non validati che finiscono in un motore di rendering possono aprire a iniezioni o al consumo incontrollato di risorse.
Per questo l'input non viene mai considerato affidabile. Ogni richiesta viene ricostruita da zero contro una whitelist: le famiglie, i materiali e le aperture devono appartenere a insiemi noti; le misure sono forzate a interi entro intervalli validi. Nulla di ciò che arriva dall'esterno raggiunge grezzo il generatore. A questo si aggiungono la limitazione della concorrenza di rendering (per non saturare un server con richieste simultanee), un timeout con terminazione forzata, un tetto al numero di posizioni e un rate-limiting. Come diciamo altrove: sicurezza e performance non si negoziano.
La strada rapida sarebbe stata un plugin da installare o un servizio in abbonamento. L'abbiamo scartata per ragioni che valgono ben oltre questo progetto.
Un plugin generico disegna ciò che sa disegnare, non ciò che serve al singolo serramentista; porta con sé peso, dipendenze e codice che nessuno controlla davvero; e lega l'azienda a una piattaforma esterna. Un configuratore costruito su misura, al contrario, è snello, leggibile e di proprietà: fa esattamente quello che deve, si integra nel sito esistente senza appesantirlo, e cresce insieme all'azienda.
È la stessa logica che applichiamo quando scegliamo di scrivere codice invece di installarlo, e che raccontiamo in Dalla demo all'MVP: si parte da un prototipo funzionante e lo si porta a strumento di produzione, un passo verificabile alla volta.
Il configuratore è un'applicazione autonoma, servita accanto al sito del serramentista con architettura same-origin (frontend e API sulla stessa origine, senza complicazioni di CORS). Il catalogo dei materiali è predisposto per essere alimentato da un CMS ProcessWire, così l'azienda gestisce in autonomia profili, finiture e colori. Ed è predisposto il flusso di richiesta preventivo: la distinta può essere inoltrata all'azienda via email transazionale, con il PDF in allegato.
Sul piano operativo gira su una VPS con Node.js/Express dietro Nginx, con rendering del PDF lato server. Fondamenta leggere, URL puliti, nessun plugin superfluo: le stesse che usiamo quando prepariamo un sito per i motori di ricerca e per le AI generative.
Cos'è un configuratore di serramenti? È un'applicazione web che permette di comporre un infisso scegliendo materiale, apertura, dimensioni e vetro, ottenendo in tempo reale un disegno tecnico quotato e una distinta riepilogativa pronta per la richiesta di preventivo.
Un configuratore di serramenti mostra i prezzi? Non necessariamente. Nel nostro caso la distinta è volutamente senza prezzi: produce la specifica tecnica corretta e lascia la valorizzazione economica al serramentista, che la calcola in base alle proprie variabili di produzione e posa.
Che differenza c'è tra un configuratore su misura e un plugin? Un plugin è generico, porta dipendenze e lega l'azienda a una piattaforma esterna. Un configuratore su misura è leggero, si integra nel sito esistente, disegna esattamente le tipologie del serramentista ed è di proprietà dell'azienda, senza lock-in.
Il configuratore si può integrare nel sito che ho già? Sì. È un'applicazione autonoma che si affianca al sito esistente con architettura same-origin, e il catalogo materiali è predisposto per essere gestito da CMS come ProcessWire.
Come viene generato il documento tecnico? La distinta è generata come PDF A4 lato server, a partire dallo stesso motore di disegno che produce l'anteprima a schermo: ciò che il cliente vede è identico a ciò che viene stampato.
È adatto a più tipologie di infissi? Sì. Gestisce finestre, porte, portoni e vetrate scorrevoli, con materiali diversi (legno, alluminio, PVC, accoppiati), varie tipologie di apertura, ante multiple anche asimmetriche, inglesine e pacchetti vetro.
Il configuratore è online e interattivo. Puoi esplorarlo dalla scheda del progetto, oppure raccontarci la tua esigenza: se produci serramenti e vuoi uno strumento di preventivazione tecnica con il tuo marchio e il tuo codice, lo costruiamo su misura.