Building AI-Powered Apps with Angular: è uscito il libro

Dopo circa 7 mesi di duro lavoro, è finalmente uscito il mio nuovo libro "Building AI-Powered Apps with Angular", pubblicato da Packt Publishing e scritto insieme al mio amico Giorgio Boa.

La proposta era arrivata originariamente a Giorgio, che poi mi ha chiesto se volessimo affrontarla insieme. Avendo già fatto revisioni tecniche per diversi libri e prodotto moltissimo contenuto tecnico, sapevo perfettamente che sarebbe stata una mole di lavoro enorme. Ciò nonostante, ho deciso di accettare, per due motivi:

1. Il carico di lavoro si sarebbe dimezzato, condiviso con Giorgio.

2. Il libro copriva due argomenti che in quel momento mi stavano particolarmente a cuore: Angular, che ho sempre amato e per cui sono Google Developer Expert, e le varie tecnologie AI di Google che studiavo nei mesi precedenti, e che sto tuttora approfondendo.

Lo stack principale: Angular e Gemini#

Il libro si concentra principalmente su due tecnologie:

1. Angular v.22

Per Angular abbiamo usato le API e i pattern più recenti, dai signal forms alla resource API, ai functional provider, Angular SSR e molti altri pattern e API moderne.

2. Google Gemini 3.x

Andiamo oltre il semplice text processing per sfruttare modelli multimodali con testo, immagini e video:

• Gemini Flash 3.5: ottimizzato per velocità ed efficienza, perfetto per interazioni ad alta frequenza.
• Gemini Pro 3.1: per ragionamento complesso e task di coding avanzati.
• Modelli specializzati: esploriamo inoltre nel dettaglio come usare i modelli Nano Banana per la generazione di immagini ad alta fedeltà e Veo per la produzione video cinematografica.

Un libro full-stack#

Da Node ad Angular, RAG e Deployment

Non è solo un libro su un framework frontend, è un percorso full-stack.

Sfruttiamo uno stack tecnologico completo per garantire che le funzionalità AI siano sicure, scalabili e intelligenti:

• Fondamenta: usiamo Node.js come proxy sicuro per gestire le API key sensibili.

• Intelligenza: integrazione approfondita con il Google GenAI SDK, Genkit e i modelli Gemini.

• Memoria: implementiamo la Retrieval-Augmented Generation (RAG) con Firestore per dare alle app dati live e memoria a lungo termine.

• Shipping: strategie complete per il Cloud Deployment e la sicurezza pronta per la produzione.

Parte 1: I principi fondamentali#

• Capitolo 1. AI for FrontEnd Developers
• Capitolo 2. Getting Started with Google Gemini
• Capitolo 3. Working with Prompts

AI per FrontEnd Developer#

Nel primo capitolo analizziamo le fondamenta delle reti neurali e come gli LLM elaborano il testo tramite la tokenizzazione, per poi passare subito alla pratica con il Google GenAI SDK, facendo le prime richieste, calibrando parametri come temperature e Top-P, e costruendo prompt multimodali tenendo sempre d'occhio il consumo di token.

In questo capitolo introduttivo imparerai i concetti essenziali che alimentano l'AI moderna, a partire dai tre principali paradigmi del machine learning: supervised, unsupervised e reinforcement learning. Copriamo anche le metriche critiche usate per valutare i modelli di classificazione, come i "veri/falsi positivi e negativi", fondamentali per capire i compromessi dei modelli.

Poi demistifichiamo la "scatola nera" del deep learning esaminandone i componenti principali, dal singolo neurone artificiale con i suoi pesi e bias fino ai livelli complessi che permettono ai modelli di imparare. Infine ci concentriamo sugli LLM, esplorando come elaborano il linguaggio tramite la tokenizzazione, come guidarli con il prompt engineering e come controllarne la creatività usando parametri come la temperature.

Iniziare con Google Gemini#

Invece di gestire chiamate REST grezze, utilizziamo l'SDK ufficiale Gemini per TypeScript per gestire operazioni complesse come la costruzione di prompt multimodali e lo streaming di contenuti in tempo reale.

Abbiamo deciso di usare Node v24 con supporto TypeScript, e abbiamo costruito tantissimi piccoli esempi standalone per spiegare ogni concetto singolarmente:

• REST API vs SDK
• Scrivere i tuoi primi prompt
• Performance e consumo: monitorare l'utilizzo dell'output, gli usage metadata e i thinking level

Lavorare con i prompt#

Nel terzo capitolo abbiamo lavorato di nuovo esclusivamente con Node, e abbiamo iniziato ad approfondire concetti come i prompt multimodali, i grounding tool come urlContext e googleSearch, la gestione dell'output in Markdown e la produzione di output strutturato in formato JSON, così che le risposte possano essere modellate in un formato pronto per essere consumato dal frontend.

Abbiamo trattato anche:

• Opzioni di configurazione come temperature, topK e topP
• Le system instruction
• La context window
• ...e molto altro.

Parte 2: Integrare l'AI in Angular#

• Capitolo 4. Building a UI in Angular with Google Gemini
• Capitolo 5. Creating Images with Gemini and Angular
• Capitolo 6. Producing and Managing Videos with VEO Models

Il libro è una masterclass di Angular moderno (v.22), lontano dai pattern più datati e verbosi.

Colleghiamo le app Angular al Google GenAI SDK e costruiamo UI interattive attorno alle funzionalità più potenti di Gemini, dal testo alla chat fino alla generazione di immagini e alla produzione video con i modelli VEO.

E come ho già detto, abbiamo usato la maggior parte delle API e dei pattern più recenti del framework:

• Signals & Resource API per gestire il ciclo di vita asincrono delle richieste AI. Imparerai a usare resource e httpResource per gestire automaticamente stati di loading, errori e cancellazioni delle richieste senza gestione manuale delle subscription.

contentResource = resource<string | undefined, Prompt>({
  params: () => this.prompt(),
  loader: async ({ params, abortSignal }) => {
    if (!params.text) return undefined
    const contents: ContentListUnion = [
      { text: params.text }
    ];
    if (params.image) {
      const dataUrlParts = params.image.split(',')
      const mimeType = dataUrlParts[0].match(/:(.*?);/)![1]
      if (dataUrlParts) {
        contents.push({
          inlineData: {
            data: dataUrlParts[1],
            mimeType,
          },
        });
      }
    }
    const response = await ai.models.generateContent({
      model: "gemini-3-pro-preview",
      contents,
      config: {
        abortSignal
      }
    });
    return response.text
  },
});

• Signal Forms: implementiamo form reattivi e type-safe usando le Nuove API dei form che si sincronizzano perfettamente con lo stato dell'applicazione, permettendo validazione in tempo reale e un input utente fluido.
  Abbiamo usato i controlli nativi, ma siamo andati oltre costruendo componenti di form riutilizzabili, come un pratico componente upload-file che rende facile scegliere un file dal disco locale e passarlo direttamente in un prompt multimodale, dalla UI Angular stessa.

<form (submit)="sendPrompt($event)">
  <textarea [formField]="form.text"></textarea>
  <app-upload-file [formField]="form.image" />
  ...

Questo permette agli utenti di combinare testo e immagini (o altri media) in un'unica richiesta, senza mai lasciare l'interfaccia.

L'idea chiave è che il componente si collega ai signal form di Angular esattamente come un controllo nativo. Implementando l'interfaccia FormValueControl, il nostro componente custom upload-file diventa un first-class citizen del form: si collega tramite [formField] esattamente come farebbe una textarea, così il form resta pulito, dichiarativo e completamente type-safe:

export class UploadFile implements FormValueControl<string> {
 // ...
}

• Functional Provider: ci spostiamo verso un'architettura più modulare e professionale creando un functional provider. Questo pattern è lo standard di riferimento per le applicazioni Angular moderne, e ci permette di configurare i servizi globali a livello di root:

export const appConfig: ApplicationConfig = {
  providers: [
    // ... altri provider
    provideGemini({ apiKey: environment.apiKey })
  ]
};

Naturalmente usiamo anche molte altre API, ma ti invito a leggere il libro per scoprirle.

Esempi#

Entro la fine di questo capitolo, saprai costruire UI Angular per inviare prompt multimodali:

Imparerai a generare immagini con gli ultimi modelli NanoBanana, ad esempio trasformando la planimetria 2D di un appartamento in un ambiente 3D completamente renderizzato:

Imparerai anche a combinare più immagini insieme.

Immagina una web app e-commerce dove l'utente carica una propria foto e può provare virtualmente un capo d'abbigliamento, un paio di occhiali, e così via:

Ma andremo anche oltre, generando video mozzafiato tramite l'API con i modelli VEO. Gestirai l'intero ciclo di vita: creazione del video, download dei risultati, gestione delle operazioni asincrone tramite polling per aspettare che il video sia pronto direttamente dalla UI, upload su Google Cloud, e molto altro:

...fino a costruire un piccolo video manager tutto tuo:

Parte 3: Costruire applicazioni AI-powered#

• Capitolo 7. Gemini QuickStart with Angular Server-Side Rendering
• Capitolo 8. Building an MCP with Node, Genkit, and Angular
• Capitolo 9. Implementing Vector Search with RAG and Firestore
• Capitolo 10. Smart Data Handling and Storage Strategies

Combiniamo il server-side rendering di Angular, il Model Context Protocol e la Retrieval-Augmented Generation (RAG) con Firestore per dare alle nostre app memoria e accesso a dati live, per poi affrontare le strategie di storage e gestione dati che le feature in produzione richiedono.

Angular SSR (Server-Side Rendering)#

Il motivo principale per cui introduciamo l'SSR qui è la sicurezza.

Nei capitoli precedenti chiamavamo le API AI direttamente, con la API key esposta lato client, il che va benissimo per imparare, ma è un rischio serio in un'applicazione reale, dove chiunque potrebbe ispezionare le richieste di rete e rubarla.

Passando a un progetto con supporto SSR, possiamo tenere quelle chiamate (e la chiave) al sicuro sul server senza mai inviare i "nostri segreti" al browser.

MCP e Firebase Genkit#

Capirai come costruire applicazioni AI-driven sofisticate e integrare MCP nei tuoi progetti con sicurezza. Abbiamo iniziato analizzando il concetto di Model Context Protocol, capendo come funge da standard universale per collegare i modelli AI a dati e strumenti proprietari, risolvendo così il problema della frammentazione dell'integrazione.

Poi abbiamo messo in pratica la teoria, configurando un server Express alimentato da Genkit. Imparerai, quindi, che Express non serve solo per servire l'HTML di Angular, ma può fungere da host per servizi AI.

npm install genkit genkitx-mcp @modelcontextprotocol/sdk
npm install express @types/express
npm install -D typescript tsx @types/node

Infine abbiamo chiuso il cerchio integrando il frontend, creando un'interfaccia reattiva capace di gestire flussi di dati asincroni e interazioni complesse, tenendo sempre a mente sicurezza e best practice di compliance per garantire che le nostre applicazioni non siano solo intelligenti ma anche robuste e sicure.

Imparerai anche a usare MCP Inspector per testare il tuo server MCP:

Implementare la Vector Search con RAG e Firestore#

Una delle sfide più critiche con gli LLM è il "knowledge gap": i loro dati di training hanno una data di cutoff e mancano della conoscenza specifica del tuo dominio. Risolviamo questo con il RAG.

Il concetto

Invece di affidarci solo alla memoria del modello, gli forniamo fatti rilevanti e verificabili dal tuo stesso database per ancorare le sue risposte. Il workflow:

1. Index: dividi i tuoi documenti in chunk e salva i loro vettori su Firestore.
2. Search: quando un utente fa una domanda, troviamo i chunk semanticamente più simili.
3. Generate: forniamo questi chunk come "contesto" a Gemini, istruendolo a rispondere usando solo quell'informazione.

Vector search in Firestore

Mostriamo come usare Firestore come vector database. Convertiamo la tua documentazione in rappresentazioni matematiche chiamate embedding (usando modelli come text-embedding-004) e le salviamo in un modo che permette la "ricerca semantica", trovando informazioni in base al significato e non solo alle parole chiave.

Gestione intelligente dei dati e strategie di storage#

Guardiamo alla gestione efficace dei dati generati e consumati dalla tua applicazione AI. La capacità di un'applicazione AI di performare in modo ottimale, scalare e fornire risultati accurati dipende in gran parte dalla robustezza delle sue strategie di gestione dati e storage.

Parte 4: Dal prototipo alla produzione#

• Capitolo 11. Bulletproof Testing and Debugging Strategies
• Capitolo 12. Error Handling, Security and Debugging
• Capitolo 13. Deploying Your AI-Powered App to the Cloud

Copriamo il testing e il debugging che rendono affidabili le feature AI, le misure di sicurezza e la gestione degli errori che le interazioni con gli LLM richiedono nelle app full-stack, e chiudiamo con il deploy della tua applicazione Angular e del suo backend nel cloud.

Strategie di testing e debugging a prova di bomba#

Ti guideremo nel capire l'importanza critica di strategie di testing e debugging robuste nello sviluppo di applicazioni AI-powered.

Esploreremo i principi fondamentali del testing, tecniche specifiche per validare le feature AI, e test end-to-end per workflow complessi guidati dall'AI.

Gestione degli errori, sicurezza e debugging#

La sicurezza non è un "optional": dev'essere gestita in ogni architettura e prodotto che costruiamo.

• Proteggere le API Key: vietiamo rigorosamente di "hardcodare" le chiavi nel frontend. Implementiamo invece un pattern Backend for Frontend (BFF) usando un proxy Node.js per proteggere le tue credenziali Gemini.

• Difendersi da XSS e Prompt Injection: imparerai a trattare l'output dell'AI come contenuto non attendibile, usando strumenti come DOMPurify e il DomSanitizer di Angular per ripulire script malevoli prima che raggiungano il browser dell'utente.

• Protezione CSRF: implementiamo un robusto handshake "Double-Submit Cookie" per garantire che le azioni guidate dall'AI (come eliminare la cronologia o chiamare tool) vengano avviate solo dalla tua applicazione legittima.

• e molto altro

Abbiamo passato molto tempo su questo capitolo e fornito tantissimi consigli e trucchi utili per proteggere il tuo FE e BE.

Deployment: da localhost al cloud globale#

Infine, trasformiamo il tuo progetto in un'entità "viva" nel cloud.

• Vercel & Serverless Functions: ti guidiamo nel deploy su Vercel, trasformando il tuo motore Angular SSR in un'applicazione cloud-native che scala automaticamente per gestire qualsiasi quantità di traffico.
• Continuous Deployment: collegando il tuo repository GitHub a Vercel, stabiliamo una pipeline automatizzata: ogni push al codice scatena istantaneamente una build fresca e sicura in produzione.

Impara i concetti, non solo le API#

Anche se il libro è costruito attorno ad Angular e Gemini, non lasciare che questi nomi specifici ti ingannino: la stragrande maggioranza dei concetti, sul frontend, sul backend e su AI generativa, sono trasversali, e resteranno utili ben oltre questo particolare stack.

Sul lato AI, gran parte di ciò che conta vive nel modello e nell'API, non nel linguaggio con cui li chiami. Tecniche di prompting, input multimodali, output strutturati, grounding, thinking level, temperature, topK/topP, RAG o MCP, solo per fare alcuni esempi, sono concetti che trascendono framework e linguaggi.

Ad esempio, nei primi capitoli in cui usiamo Gemini e Node, abbiamo deliberatamente insegnato ogni idea prima con piccoli esempi standalone in Node + TypeScript, senza UI di mezzo. La logica per chiamare un modello, gestire la sicurezza, o caricare file sul cloud non appartiene a nessun singolo framework, potresti inserirla in un server Express, in una funzione serverless, o in un frontend completamente diverso.

Sul frontend, le API specifiche (signal forms, resource API, functional provider) sono di Angular, ma i pattern sottostanti, costruire controlli di form riutilizzabili, gestire stato asincrono, mantenere la UI dichiarativa e type-safe, sono le stesse idee che trovi, sotto altri nomi, in React, Vue o Svelte.

Perché è importante?

Perché le tecnologie invecchiano in fretta, come ha dimostrato questo stesso libro, con modelli e API che sono cambiati sotto i nostri piedi mentre lo scrivevamo. I concetti no. Se ti concentri sul perché qualcosa funziona piuttosto che solo su quale metodo chiamare, tutto quello che impari qui continuerà a ripagare ben oltre i nomi dei modelli e i numeri di versione di oggi.

Disponibile su Amazon#

Il libro è disponibile su Amazon, sia in edizione cartacea che Kindle. Ci piacerebbe sapere cosa ne pensi, e se ti piace, ci faresti davvero felici scrivendo un post e taggandoci.