Guida alla Creazione di "stereocomics" tramite Angular Workspace Monorepo

Questo documento descrive dettagliatamente la strategia dell'Opzione 2 (Monorepo). L'obiettivo è trasformare l'attuale struttura del progetto in un Workspace Angular multi-applicazione, dove le logiche funzionali (servizi, parser, gestione audio) risiedono in una libreria condivisa, mentre le applicazioni canti e stereocomics rimangono indipendenti per quanto riguarda interfacce grafiche, stili, asset e configurazioni.

Struttura Finale del Workspace Monorepo

Al termine del processo, la struttura delle cartelle del progetto si presenterà così:

canti/ (Root del Workspace)
├── angular.json                 # Configurazione di build per entrambi i progetti
├── package.json                 # Dipendenze condivise
├── tsconfig.json                # Configurazione TypeScript con path alias per il core
├── src/                         # Codice sorgente dell'applicazione originale "canti"
│   ├── app/                     # Componenti, pagine e routing specifici di canti
│   └── assets/                  # Immagini, loghi e risorse di canti
└── projects/
    ├── core/                    # LIBRERIA CONDIVISA (TypeScript puro)
    │   └── src/
    │       ├── public-api.ts    # Esporta i servizi core
    │       └── lib/
    │           └── services/    # I servizi estratti (audio, parser, canti, settings, ecc.)
    └── stereocomics/            # NUOVA APPLICAZIONE "stereocomics"
        ├── src/
        │   ├── app/             # Pagine, componenti e routing specifici di stereocomics
        │   ├── assets/          # Loghi, immagini e splash screen di stereocomics
        │   └── theme/           # CSS/SCSS personalizzato (variabili di colore diverse)
        └── capacitor.config.ts  # Configurazione Capacitor specifica (es. per iOS/Android)

Fasi di Implementazione Dettagliate

Fase 1: Creazione della Libreria Condivisa (`core`)

Il primo passo consiste nel creare un modulo di libreria all'interno del workspace.

Generazione della libreria: Utilizzando l'Angular CLI dalla root del progetto:
```
ng generate library core --prefix=core
```
Questo comando creerà la cartella projects/core e configurerà automaticamente i path alias nel file tsconfig.json (es. "@core/*" o "core").
Migrazione dei Servizi: Sposteremo i file dei servizi core da src/app/services/ a projects/core/src/lib/services/. I file principali da migrare includono:
- lyrics-parser.service.ts
- audio-engine.service.ts
- canti.service.ts
- playlist.service.ts
- settings.service.ts
- comunita.service.ts
- E gli altri servizi correlati.
Esportazione delle API: Nel file projects/core/src/public-api.ts, esporteremo tutti i servizi migrati in modo che siano importabili dalle applicazioni esterne:
```
export * from './lib/services/canti.service';
export * from './lib/services/lyrics-parser.service';
// ... altre esportazioni
```
Compilazione iniziale: Si compila la libreria core affinché sia disponibile per i progetti:
```
ng build core
```

Fase 2: Adeguamento dell'Applicazione `canti`

Dopo aver spostato i servizi nella libreria condivisa, dobbiamo aggiornare l'applicazione originale affinché consumi la libreria anziché i vecchi file locali.

Aggiornamento degli Import: In tutti i componenti e pagine di canti (es. src/app/home/home.page.ts), modificheremo gli import dei servizi: Prima:
```
import { CantiService } from '../services/canti.service';
```
Dopo:
```
import { CantiService } from 'core';
```
Rimozione dei Vecchi Servizi: Elimineremo la cartella src/app/services/ ormai vuota.
Test di Verifica: Avvieremo canti con npm run start (o ng serve) per assicurarci che l'applicazione funzioni correttamente importando i servizi dalla libreria.

Fase 3: Generazione dell'Applicazione `stereocomics`

Ora che le fondamenta condivise sono pronte, creiamo la nuova applicazione stereocomics.

Generazione: Sempre tramite Angular CLI:
```
ng generate application stereocomics --style=scss --routing=true
```
Questo configurerà un nuovo blocco chiamato stereocomics in angular.json e creerà la cartella projects/stereocomics.
Integrazione con Ionic: Aggiungeremo il supporto a Ionic nella nuova applicazione importando IonicModule.forRoot() nel file projects/stereocomics/src/app/app.module.ts.

Fase 4: Sviluppo e Personalizzazione di `stereocomics`

A questo punto abbiamo un'applicazione vergine che possiamo strutturare come vogliamo, riutilizzando però i servizi core.

Struttura delle Pagine: Possiamo decidere di copiare le pagine esistenti di canti (se vogliamo che stereocomics parta con lo stesso layout per poi essere modificato) oppure creare pagine del tutto nuove. Ad esempio, per generare una pagina specifica in stereocomics:
```
ng generate page pages/home --project=stereocomics
```

Consumo dei Servizi Shared: Nel codice di stereocomics, per caricare i dati useremo la libreria condivisa:

import { Component, OnInit } from '@angular/core';
import { CantiService } from 'core';

@Component({ ... })
export class HomePage implements OnInit {
  constructor(private cantiService: CantiService) {}

  ngOnInit() {
    // Possiamo accedere a tutte le funzioni storiche
    this.cantiService.loadCanti();
  }
}

Personalizzazione Visiva (Branding):
- Modificheremo projects/stereocomics/src/theme/variables.scss per definire la palette di colori di stereocomics (ad es. tonalità arancioni o viola, differenziandosi dal blu di canti).
- Sostituiremo gli asset in projects/stereocomics/src/assets/ con loghi, icone e immagini dedicati a stereocomics.

Fase 5: Configurazione dei Comandi di Build

Aggiungeremo o modificheremo gli script nel file package.json per facilitare lo sviluppo parallelo:

"scripts": {
  "start:canti": "ng serve app",
  "start:stereocomics": "ng serve stereocomics",
  "build:canti": "ng build app --configuration production",
  "build:stereocomics": "ng build stereocomics --configuration production",
  "watch:core": "ng build core --watch"
}

Durante lo sviluppo, se modifichi un servizio core, il comando watch:core ricompilerà automaticamente la libreria in background, aggiornando istantaneamente l'app che stai servendo localmente.

Vantaggi di questo Approccio

Sorgente di Verità Unica (Single Source of Truth): La complessa logica di business (algoritmi di parsing, logica audio per i player, caching, sync) viene scritta, testata e manutenuta in un solo posto (projects/core).
Autonomia Grafica ed Esperienziale: stereocomics ha le sue pagine HTML e i suoi fogli di stile CSS/SCSS. Può avere una navigazione a tab, mentre canti usa un menu laterale (sidemenu), senza alcun conflitto.
Semplicità di Aggiornamento delle Dipendenze: Entrambe le applicazioni utilizzano gli stessi pacchetti npm (configurati nel package.json globale nella root), riducendo il disallineamento delle versioni delle librerie terze (es. Capacitor, Ionic, Angular).

7.8 KiB Raw Blame History

Guida alla Creazione di "stereocomics" tramite Angular Workspace Monorepo

Struttura Finale del Workspace Monorepo

Fasi di Implementazione Dettagliate

Fase 1: Creazione della Libreria Condivisa (core)

Fase 2: Adeguamento dell'Applicazione canti

Fase 3: Generazione dell'Applicazione stereocomics

Fase 4: Sviluppo e Personalizzazione di stereocomics