FabioBiondi.
← tutti i corsi
// corso · 2026angularaiNEW

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
[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

Introduzione

Questo corso è il proseguimento del corso Applicazioni Agentiche con Gemini SDK, NodeS & TypeScript e si concentra sull'integrazione di modelli di intelligenza artificiale in un'applicazione Angular tramite l'SDK Google GEN AI.

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.

§02

Dalla logica alla UI

Integrare l'intelligenza artificiale in un'applicazione professionale non significa solo fare una chiamata API. Significa gestire flussi di streaming, uploader multimodali complessi e dashboard reattive.

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.
§03

OBIETTIVO DEL CORSO

Fornire agli sviluppatori Angular materiale riutilizzabile e know-how per progettare interfacce multimodali per l'AI utilizzando tecniche, API e metodologie delle ultime versioni del framework.

[ programma ]

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.

6 moduli · 26 argomenti
  1. M01

    Angular & Gemini

    • Integrazione Gemini SDK in Angular
    • Architettura e componenti riutilizzabili
    • Gestire budget e token count
  2. M02

    Modern stack

    • Comunicazione tramite resource e httpResource
    • Stato dell'AI con Signals e DI
    • UI con Signal Forms
    • Custom Form Field per prompts e file uploader
    • Environment Variables
    • Function Provider: geminiProvider(config)
  3. M03

    Prompt multimodali

    • UI per prompt multimodali e chat
    • Stato e comunicazione con il server
    • Markdown e Syntax Highlighting nelle risposte
    • Output strutturati JSON
    • Error handling
    • Signal Forms avanzati: Validatori Custom, FormGroup, FormArray, Custom Form Field
  4. M04

    Nano Banana: Generative Image Editor

    • Dashboard Text-to-Image e Image-to-Image
    • Modifica delle immagini
  5. M05

    Veo: Dashboard Video Generation

    • Dashboard Text-to-Video e Image-to-Video
    • Polling per task video long-running
  6. M06

    Angular SSR & Fullstack: proteggere le API Key

    • Dal client puro al fullstack: perché esporre le API Key nel browser è un problema
    • Setup di Angular SSR con @angular/ssr ed Express
    • Creazione di endpoint Express custom per Gemini, Veo e Nano Banana
    • Gestione delle environment variables e dei secret lato server
    • Refactoring dei servizi Angular: da chiamate dirette al SDK a chiamate httpResource verso i propri endpoint
    • Streaming delle risposte AI tramite il backend Express
    • Cenni a rate limiting, validazione input e protezione degli endpoint

Pronto a portarlo nel tuo team?

Contattami →