Piano Operativo: Clonazione e Personalizzazione in "stereocomics"

Questo piano descrive le opzioni e le fasi operative per creare un clone del progetto canti denominato stereocomics. Il clone condividerà le stesse librerie funzionali di base (servizi, parser, logica audio, ecc.) offrendo al contempo completa libertà di personalizzazione (grafica, asset, configurazioni, ed eventuali pagine specifiche).

Opzioni Architetturali Proposte

Prima di procedere con l'implementazione, è fondamentale scegliere l'approccio strutturale più adatto:

Opzione 1: White-Label / Multi-Configuration (Consigliata per Manutenibilità)

Se l'applicazione stereocomics differisce principalmente per branding, colori, logo, configurazioni e alcuni testi, ma condivide la quasi totalità delle pagine e dei flussi.

Come funziona: Si mantiene un unico codice sorgente. Si usano i file di configurazione ambientale di Angular (src/environments/) e file CSS personalizzati per caricare dinamicamente loghi, stili (tramite variabili CSS/SCSS), e comportamenti in base alla build (es. ng build --configuration=stereocomics).
Pro: Semplicità assoluta di manutenzione. Qualsiasi bug fix o nuova funzionalità su un servizio o una pagina si riflette istantaneamente su entrambi i brand senza duplicazione di codice.
Contro: Meno flessibilità se le pagine di stereocomics dovranno divergere drasticamente a livello di layout HTML o logica di navigazione rispetto a canti.

Opzione 2: Angular Workspace Monorepo (Consigliata per Massima Personalizzazione)

Se stereocomics deve avere pagine, componenti e flussi di navigazione diversi da canti, pur riutilizzando gli stessi servizi (audio, parser, database local, ecc.).

Come funziona: Si trasforma il progetto in un workspace Angular multi-applicazione.
1. Si crea una libreria condivisa (es. projects/shared-core) dove vengono spostati tutti i servizi di base (src/app/services/*).
2. L'applicazione attuale viene configurata come progetto canti.
3. Viene generata una nuova applicazione Angular/Ionic nello stesso workspace (projects/stereocomics) che importa i servizi da shared-core ma ha le sue pagine, i suoi componenti e la sua veste grafica indipendenti.
Pro: Massimo controllo. Ciascuna app ha la sua struttura di pagine, ma condividono al 100% la logica complessa dei servizi.
Contro: Richiede una ristrutturazione iniziale dei path di importazione dei servizi nel progetto attuale.

Opzione 3: Repository / Cartella Indipendente

Se si desidera un progetto completamente separato in una nuova cartella /Users/davidfrassi/SRC/agenti/stereocomics.

Come funziona: Si clona il progetto in una nuova cartella e si personalizza in modo indipendente. Per condividere le librerie, si può creare un package locale (npm link) o importare i servizi come sottomodulo git.
Pro: Isolamento totale.
Contro: Rischio elevato di divergenza del codice. I bug fix sui servizi in un progetto dovranno essere riportati manualmente o gestiti tramite rilasci di pacchetti.

User Review Required

Important

Si prega di verificare quale delle tre opzioni si adatta meglio alle esigenze di sviluppo a lungo termine di stereocomics.

Se il clone differisce solo per loghi, colori e piccoli dettagli, l'Opzione 1 (White-Label) è la più rapida ed efficiente.

Se il clone deve avere un'interfaccia utente o funzionalità molto diverse pur usando la stessa logica di lettura/parsing, l'Opzione 2 (Monorepo) è la scelta ideale.

Fasi del Piano Operativo (Esempio basato sull'Opzione 2 - Monorepo)

Se si sceglie l'approccio Monorepo, i passi saranno i seguenti:

Fase 1: Preparazione e Ristrutturazione (Refactoring dei Servizi)

Spostare i servizi core (ad es. lyrics-parser.service.ts, audio-engine.service.ts, canti.service.ts) in una libreria condivisa o in una cartella core dedicata configurata con path alias in tsconfig.json (es. @shared/services).
Aggiornare gli import in tutto il progetto canti per utilizzare il nuovo path alias.

Fase 2: Creazione del Progetto Stereocomics

Generare la nuova applicazione all'interno del workspace o duplicare la struttura configurando il nuovo target in angular.json.
Configurare gli asset (immagini, loghi, splash screen) per stereocomics in una cartella dedicata.
Creare il file di configurazione specifico per stereocomics (environment.stereocomics.ts).

Fase 3: Personalizzazione e Stile

Creare un tema CSS/SCSS personalizzato per stereocomics modificando le variabili di colore Ionic/CSS.
Sviluppare eventuali componenti o pagine specifiche per stereocomics.

Fase 4: Configurazione della Build e Deploy

Configurare gli script npm in package.json per avviare e buildare specificamente il nuovo target (es. npm run start:stereocomics, npm run build:stereocomics).
Configurare Capacitor/PWA per il nuovo brand (nuovo package ID, nome dell'app, icone).

Verification Plan

Manual Verification

Avvio di canti in modalità sviluppo per verificare che il refactoring dei servizi non abbia introdotto regressioni.
Avvio di stereocomics per verificare il caricamento del nuovo tema, logo e impostazioni personalizzate.
Test delle funzionalità core (riproduzione, parsing testi) in entrambe le applicazioni.

5.6 KiB Raw Blame History