Applicazioni Agentiche con Angular & Gemini SDK
Interfacce professionali per l'AI, dashboard per la generazione video con Veo e tool di image editing basati su Nano Banana.

- Durata
- 12h
- Sessioni
- 3 da 4h
- Livello
- Intermedio
Di cosa parla
questo corso.
Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.
Introduzione
Oltre ad utilizzare le API di Gemini sfrutteremo le potenzialità delle ultime versioni di Angular e le sue più recenti API (Signal Forms, Resource, ...) per creare interfacce professionali e dashboard per l'AI.
Dalla logica alla UI
In questo corso avanzato, non perderemo tempo sulle basi di Gemini (già affrontate nel corso Applicazioni Agentiche con Gemini SDK, NodeS & TypeScript) ma ci concentreremo più che altro sulla creazione di una User Experience fluida per l'AI utilizzando le potenzialità di Angular.
Oltre a gestire prompt multimodali, analizzeremo diverse tipologie di documenti e risposte in diversi formati; esploreremo l'integrazione di VEO per la generazione video tramite API; costruiremo una dashboard completa per Nano Banana per il photo editing generativo gestendo lo stato con i Signal e ottimizzando le performance di rendering.
Affronteremo inoltre l'evoluzione da un'applicazione puramente client — in cui le API Key sono esposte nel browser — verso un'architettura fullstack con Angular SSR ed Express, in cui il server espone endpoint sicuri e protegge le credenziali di accesso ai modelli.
Il corso si focalizza principalmente sulla creazione di User Interface e architetture in Angular, sfruttando le API di Google GEN AI SDK sia lato client che lato server.
OBIETTIVO DEL CORSO
REQUISITI
Cosa vediamo,
in dettaglio.
Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.
M01 Angular & Gemini
- 01Integrazione Gemini SDK in Angular
- 02Architettura e componenti riutilizzabili
- 03Gestire budget e token count
M02 Modern stack
- 01Comunicazione tramite
resourceehttpResource - 02Stato dell'AI con Signals e DI
- 03UI con Signal Forms
- 04Custom Form Field per prompts e file uploader
- 05Environment Variables
- 06Function Provider:
geminiProvider(config)
- 01Comunicazione tramite
M03 Prompt multimodali
- 01UI per prompt multimodali e chat
- 02Stato e comunicazione con il server
- 03Markdown e Syntax Highlighting nelle risposte
- 04Output strutturati JSON
- 05Error handling
- 06Signal Forms avanzati: Validatori Custom, FormGroup, FormArray, Custom Form Field
M04 Nano Banana: Generative Image Editor
- 01Dashboard Text-to-Image e Image-to-Image
- 02Modifica delle immagini
M05 Veo: Dashboard Video Generation
- 01Dashboard Text-to-Video e Image-to-Video
- 02Polling per task video long-running
M06 Angular SSR & Fullstack: proteggere le API Key
- 01Dal client puro al fullstack: perché esporre le API Key nel browser è un problema
- 02Setup di Angular SSR con
@angular/ssred Express - 03Creazione di endpoint Express custom per Gemini, Veo e Nano Banana
- 04Gestione delle environment variables e dei secret lato server
- 05Refactoring dei servizi Angular: da chiamate dirette al SDK a chiamate
httpResourceverso i propri endpoint - 06Streaming delle risposte AI tramite il backend Express
- 07Cenni a rate limiting, validazione input e protezione degli endpoint
Prima di questo corso...
8h · BaseApplicazioni Agentiche con Gemini SDK, NodeS & TypeScript
Corso introduttivo per integrare l'AI generativa in applicazioni Node.js (v.24+) con TypeScript e l'SDK di Gemini
16h · BaseAngular Core Concepts
Le principali funzionalità di Angular (v.22+) per acquisire una solida base sul framework.
8h · IntermedioAngular Signal Forms
Le nuove API per la creazione di form in Angular, basate sui Signal: masterclass intensiva, reattiva e moderna.
Potrebbero piacerti anche...
8h · BaseGemini CLI & Antigravity
Sfrutta i più recenti strumenti AI di Google per scrivere codice: Antigravity, Gemini CLI e Google AI Studio.
6h · BaseClaude Code
Impara a usare Claude Code per assisterti nel tuo lavoro da developer: skills, context engineering, plan & spec-driven development.
6h · IntermedioAgent Development Kit (ADK) in Node.js e TypeScript
Costruisci sistemi multi-agente AI con il framework Agent Development Kit di Google in Node.js e TypeScript: tool, memoria, orchestrazione e workflow. Esempi anche in NextJS e Angular