Insegnamento LABORATORIO DI PROGRAMMAZIONE WEB II
- Corso
- Programmazione e gestione di sistemi informatici
- Codice insegnamento
- A003661
- Curriculum
- Comune a tutti i curricula
- Docente
- Daniele Selvi
- Docenti
-
- Daniele Selvi
- Ore
- 36 ore - Daniele Selvi
- CFU
- 3
- Regolamento
- Coorte 2024
- Erogato
- 2025/26
- Attività
- Altro
- Ambito
- Tirocini formativi e di orientamento
- Settore
- NN
- Tipo insegnamento
- Obbligatorio (Required)
- Tipo attività
- Attività formativa monodisciplinare
- Lingua insegnamento
- Italiano, In Inglese su richiesta dell'intera classe.
- Contenuti
- Il corso insegna lo sviluppo di applicazioni web utilizzando il framework Microsoft Blazor. Blazor è un framework moderno basato su HTML, CSS e C# che consente di creare applicazioni web interattive e dinamiche. Gli studenti impareranno a creare componenti riutilizzabili, gestire il routing, implementare la Dependency Injection, comunicare con API REST, gestire l'autenticazione e autorizzazione, e ottimizzare le performance delle applicazioni.
- Testi di riferimento
- Slide del docente, sito web ufficiali Microsoft: https://dotnet.microsoft.com/it-it/apps/aspnet/web-apps/blazor, sito web ufficiale community https://mudblazor.com/, https://learn.microsoft.com/it-it/aspnet/core/blazor/?view=aspnetcore-9.0
- Obiettivi formativi
- Imparare il linguaggio di programmazione C# e il framework Blazor offre agli studenti una solida base per entrare nel mondo del lavoro come sviluppatori web. C# è un linguaggio versatile e potente, ampiamente utilizzato nell'industria per lo sviluppo di applicazioni desktop, web e mobile. Blazor, essendo parte dell'ecosistema .NET, permette di creare applicazioni web moderne e interattive utilizzando C# anziché JavaScript, semplificando il processo di sviluppo e migliorando la produttività. Gli obiettivi formativi includono la comprensione dei concetti fondamentali di C# e Blazor, la capacità di sviluppare applicazioni web complete, e l'acquisizione di competenze pratiche nella gestione di componenti, routing, autenticazione, e comunicazione con API. Al termine delle lezioni, ci si aspetta che gli studenti siano in grado di creare applicazioni web funzionali e ben strutturate, pronte per essere utilizzate in contesti professionali.
- Prerequisiti
- Requisiti tecnici:
- Sistema operativo: Windows 10/11
- Software: Visual Studio 2022 Community o superiore con carico WEB installato
- Hardware: Computer con almeno 8 GB di RAM, processore multi-core, e spazio su disco sufficiente per installare .NET SDK e Visual Studio
Requisiti di conoscenze funzionali:
- Conoscenza di base di C#
- Fondamenti di HTML e CSS
- Conoscenza di base di ASP.NET Core
- Comprensione dei concetti di programmazione ad oggetti - Metodi didattici
- Ogni lezione è strutturata in due parti principali. Nella prima parte, il docente spiega i concetti teorici fondamentali, fornendo una base solida di conoscenze che gli studenti possono applicare. Nella seconda parte della lezione, gli studenti mettono in pratica quanto appreso attraverso esercizi pratici e attività di laboratorio. Questi esercizi sono progettati per rafforzare la comprensione dei concetti teorici e per sviluppare competenze pratiche. Inoltre, gli esercizi servono come preparazione per il progetto finale, che viene assegnato a ogni studente. Il progetto finale è un'opportunità per gli studenti di dimostrare le loro conoscenze e abilità acquisite durante il corso, sviluppando un'applicazione web completa utilizzando il framework Blazor. Questo progetto sarà valutato per determinare il livello di comprensione e competenza raggiunto da ciascuno studente.
- Altre informazioni
- //
- Modalità di verifica dell'apprendimento
- La verifica dell'apprendimento avverrà attraverso un progetto individuale. Gli studenti dovranno inviare una tesina via e-mail al docente, una settimana prima della data d'esame. L'esame consisterà nella presentazione del progetto e in domande riguardanti le scelte fatte durante lo sviluppo. L'ultimo giorno di lezione sarà dedicato alla discussione delle tesine e alla condivisione di spunti per l’implementazione del progetto
Tesina
La tesina dovrà avere una lunghezza massima di 5 pagine e seguire la seguente struttura:
- Descrizione del caso d'uso
- Tipologia di applicazione scelta e motivazione
- Schema dell'architettura (database, componenti)
- Conclusioni e valutazioni: cosa è stato fatto, cosa è migliorabile, quali features potrebbero essere sviluppate in futuro
Il giorno dell'esame
Gli studenti dovranno portare il proprio laptop e presentare l'applicazione sviluppata. Durante la presentazione, verranno poste domande sulle scelte fatte durante lo sviluppo del progetto. - Programma esteso
- - Panoramica su Blazor e .NET
- Che cosa sono i componenti
- Routing in Blazor
- Introduzione alla Dependency Injection (DI) in Blazor
- Introduzione a HttpClient in Blazor
- Utilizzo di CSS in Blazor
- Introduzione all'autenticazione in Blazor
- Idee congeniali alla Business Application
- Cos'è Blazor? (WebAssembly e Server)
- Ciclo di vita di un componente
- Gestione degli eventi in Blazor
- Registrazione e utilizzo dei servizi
- Comunicazione con API REST (es. servizio Azure per il meteo)
- Scoped CSS per componenti
- Configurazione di autenticazione e autorizzazione
- Best practices per organizzare un progetto Blazor
- Vantaggi rispetto ad altri framework (React, Angular)
- Passaggio di dati tra componenti (Parameters, EventCallback)
- Parametri di route
- Gestione di form e input utente (Mudblazor)
- Servizi transitori, scoped e singleton
- Gestione degli errori nelle chiamate HTTP
- Integrazione con JavaScript
- JWT (JSON Web Tokens)
- Ottimizzazione delle performance
- Requisiti di sistema e installazione di .NET SDK
- State Management a livello di componenti
- Differenza tra navigazione statica e dinamica
- Comunicazione tra componenti tramite servizi
- Chiamare funzioni JS da C#
- Identity Server
- Strumenti di debug e troubleshooting
- Architettura di Blazor
- Gestione di errori di navigazione
- Chiamare funzioni C# da JS (es. embeddare mappa)
- Gestione dei ruoli e restrizioni di accesso
- Differenze tra Blazor Server e Blazor WebAssembly. Cenni a ASP .NET MVC
- Creazione di una form con validazione (es. registrazione utente)
- Creazione di un backend mock (es. con JSON Server o Postman)
- Ciclo di vita di un'applicazione Blazor
- Creazione di componenti personalizzati
- Utilizzo di binding per aggiornare dinamicamente i dati
- Creare un servizio per gestire dati condivisi (es. un carrello della spesa)
- Fare chiamate GET/POST/PUT/DELETE da Blazor
- Applicare stili dinamici a una lista di elementi
- Creazione di un progetto completo che integri tutti i concetti visti
- Introduzione a Razor Components
- Passaggio di parametri a un componente
- Creare un'applicazione multi-pagina con Blazor
- Esercizio: creare un calcolatore semplice con binding in tempo reale
- Utilizzare un servizio per fare chiamate HTTP a un'API simulata (mock)
- Esercizio: costruire una CRUD completa per gestire un elenco di risorse
- Esempio pratico di integrazione con una libreria JS (es. Chart.js per grafici)
- Creare un sistema di login/logout
- Multi-pagina, CRUD, autenticazione, grafici, integrazione con API
- Utilizzo di EventCallback per gestire eventi tra componenti
- Passaggio di parametri tra le pagine
- Esercizio: creare un'applicazione con gestione centralizzata dello stato tramite un servizio
- Esercizio: creare una dashboard con dati dinamici e grafici
- Proteggere pagine tramite autorizzazione
- Revisione e ottimizzazione del codice
- Esercizio: costruire una lista dinamica con funzionalità di aggiunta/rimozione
- Esercizio: costruire una semplice applicazione di gestione (es. un mini blog)
- Esercizio: implementare un'applicazione con ruoli utente (es. Admin/Utente)
- Presentazione dei progetti degli studenti - Obiettivi Agenda 2030 per lo sviluppo sostenibile