David Frassi
73 lines
5.6 KiB
Markdown
73 lines
5.6 KiB
Markdown
# 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)
|
|
1. Spostare i servizi core (ad es. [lyrics-parser.service.ts](file:///Users/davidfrassi/SRC/agenti/canti/src/app/services/lyrics-parser.service.ts), [audio-engine.service.ts](file:///Users/davidfrassi/SRC/agenti/canti/src/app/services/audio-engine.service.ts), [canti.service.ts](file:///Users/davidfrassi/SRC/agenti/canti/src/app/services/canti.service.ts)) in una libreria condivisa o in una cartella core dedicata configurata con path alias in `tsconfig.json` (es. `@shared/services`).
|
|
2. Aggiornare gli import in tutto il progetto `canti` per utilizzare il nuovo path alias.
|
|
|
|
### Fase 2: Creazione del Progetto Stereocomics
|
|
1. Generare la nuova applicazione all'interno del workspace o duplicare la struttura configurando il nuovo target in [angular.json](file:///Users/davidfrassi/SRC/agenti/canti/angular.json).
|
|
2. Configurare gli asset (immagini, loghi, splash screen) per `stereocomics` in una cartella dedicata.
|
|
3. Creare il file di configurazione specifico per stereocomics (`environment.stereocomics.ts`).
|
|
|
|
### Fase 3: Personalizzazione e Stile
|
|
1. Creare un tema CSS/SCSS personalizzato per `stereocomics` modificando le variabili di colore Ionic/CSS.
|
|
2. Sviluppare eventuali componenti o pagine specifiche per `stereocomics`.
|
|
|
|
### Fase 4: Configurazione della Build e Deploy
|
|
1. Configurare gli script npm in `package.json` per avviare e buildare specificamente il nuovo target (es. `npm run start:stereocomics`, `npm run build:stereocomics`).
|
|
2. 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.
|