Unit WEB PROGRAMMING LABORATORY II
- Course
- Programming and management of computer systems
- Study-unit Code
- A003661
- Curriculum
- In all curricula
- Teacher
- Daniele Selvi
- Teachers
-
- Daniele Selvi
- Hours
- 36 ore - Daniele Selvi
- CFU
- 3
- Course Regulation
- Coorte 2023
- Offered
- 2024/25
- Learning activities
- Altro
- Area
- Tirocini formativi e di orientamento
- Sector
- NN
- Type of study-unit
- Obbligatorio (Required)
- Type of learning activities
- Attività formativa monodisciplinare
- Language of instruction
- Italian, In English "on-deman" if requested by the class
- Contents
- The course teaches web application development using the Microsoft Blazor framework. Blazor is a modern framework based on HTML, CSS, and C# that allows for the creation of interactive and dynamic web applications. Students will learn to create reusable components, manage routing, implement Dependency Injection, communicate with REST APIs, handle authentication and authorization, and optimize application performance.
- Reference texts
- Teacher's slides, official Microsoft website: https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor, official community website https://mudblazor.com/, https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-9.0
- Educational objectives
- Learning the C# programming language and the Blazor framework provides students with a solid foundation to enter the workforce as web developers. C# is a versatile and powerful language widely used in the industry for developing desktop, web, and mobile applications. Blazor, being part of the .NET ecosystem, allows for the creation of modern and interactive web applications using C# instead of JavaScript, simplifying the development process and enhancing productivity. The educational objectives include understanding the fundamental concepts of C# and Blazor, the ability to develop complete web applications, and acquiring practical skills in managing components, routing, authentication, and API communication. By the end of the lessons, students are expected to be able to create functional and well-structured web applications, ready to be used in professional contexts.
- Prerequisites
- Technical Requirements:
- Operating System: Windows 10/11
- Software: Visual Studio 2022 Community or higher with WEB workload installed
- Hardware: Computer with at least 8 GB of RAM, multi-core processor, and sufficient disk space to install .NET SDK and Visual Studio
Functional Knowledge Requirements:
- Basic knowledge of C#
- Fundamentals of HTML and CSS
- Basic knowledge of ASP.NET Core
- Understanding of object-oriented programming concepts - Teaching methods
- Each lesson is structured into two main parts. In the first part, the instructor explains the fundamental theoretical concepts, providing a solid knowledge base that students can apply. In the second part of the lesson, students put into practice what they have learned through practical exercises and lab activities. These exercises are designed to reinforce the understanding of theoretical concepts and to develop practical skills. Additionally, the exercises serve as preparation for the final project, which is assigned to each student. The final project is an opportunity for students to demonstrate their knowledge and skills acquired during the course by developing a complete web application using the Blazor framework. This project will be evaluated to determine the level of understanding and competence achieved by each student.
- Other information
- //
- Learning verification modality
- The assessment of learning will be conducted through an individual project. Students are required to submit a report via email to me and Daniele Selvi (daniele.selvi@apsia.eu) one week before the exam date. The exam will consist of the presentation of the project and questions regarding the choices made during development. The last day of class will be dedicated to discussing the reports and sharing ideas about the implementation of the project.
Report
The report should be a maximum of 5 pages long and follow this structure:
- Description of the use case
- Type of application chosen and motivation
- Architecture diagram (database, components)
- Conclusions and evaluations: what was done, what can be improved, what features could be developed in the future
On the exam day
Students will need to bring their own laptop and present the developed application. During the presentation, questions will be asked about the choices made during the project development. - Extended program
- - Overview of Blazor and .NET
- What are components
- Routing in Blazor
- Introduction to Dependency Injection (DI) in Blazor
- Introduction to HttpClient in Blazor
- Using CSS in Blazor
- Introduction to authentication in Blazor
- Ideas suitable for Business Application
- What is Blazor? (WebAssembly and Server)
- Component lifecycle
- Event handling in Blazor
- Registering and using services
- Communication with REST APIs (e.g., Azure weather service)
- Scoped CSS for components
- Authentication and authorization configuration
- Best practices for organizing a Blazor project
- Advantages over other frameworks (React, Angular)
- Data passing between components (Parameters, EventCallback)
- Route parameters
- Form and user input management (Mudblazor)
- Transient, scoped, and singleton services
- Error handling in HTTP calls
- Integration with JavaScript
- JWT (JSON Web Tokens)
- Performance optimization
- System requirements and .NET SDK installation
- Component-level State Management
- Difference between static and dynamic navigation
- Communication between components via services
- Calling JS functions from C#
- Identity Server
- Debugging and troubleshooting tools
- Blazor architecture
- Navigation error handling
- Calling C# functions from JS (e.g., embedding a map)
- Role management and access restrictions
- Differences between Blazor Server and Blazor WebAssembly. Introduction to ASP .NET MVC
- Creating a form with validation (e.g., user registration)
- Creating a mock backend (e.g., with JSON Server or Postman)
- Blazor application lifecycle
- Creating custom components
- Using binding to dynamically update data
- Creating a service to manage shared data (e.g., a shopping cart)
- Making GET/POST/PUT/DELETE calls from Blazor
- Applying dynamic styles to a list of items
- Creating a complete project that integrates all concepts covered
- Introduction to Razor Components
- Passing parameters to a component
- Creating a multi-page application with Blazor
- Exercise: creating a simple calculator with real-time binding
- Using a service to make HTTP calls to a simulated (mock) API
- Exercise: building a complete CRUD to manage a list of resources
- Practical example of integration with a JS library (e.g., Chart.js for charts)
- Creating a login/logout system
- Multi-page, CRUD, authentication, charts, API integration
- Using EventCallback to handle events between components
- Passing parameters between pages
- Exercise: creating an application with centralized state management via a service
- Exercise: creating a dashboard with dynamic data and charts
- Protecting pages through authorization
- Code review and optimization
- Exercise: building a dynamic list with add/remove functionality
- Exercise: building a simple management application (e.g., a mini blog)
- Exercise: implementing an application with user roles (e.g., Admin/User)
- Presentation of student projects - Obiettivi Agenda 2030 per lo sviluppo sostenibile