Este entrenamiento proporciona a los participantes los conocimientos esenciales para empezar a desarrollar aplicaciones web SPA utilizando Blazor WebAssembly implementando Clean Architecture.

En este entrenamiento desarrollaremos una aplicación Blazor WebAssembly completa, desde la creación de la solución utilizando la plantilla Blazor WebAssembly Standalone App hasta su publicación en Microsoft Azure.

La aplicación será desarrollada para una tienda ficticia de Pizzas y permitirá a los usuarios ordenar pizzas, personalizar sus ingredientes y llevar un seguimiento de la orden.

Incorporaremos características Progressive Web App (PWA) para hacer que la aplicación pueda comportarse como una aplicación nativa del sistema operativo, permitiendo su instalación y la recepción de Notificaciones Web Push.

La aplicación que desarrollaremos consumirá la funcionalidad expuesta por un backend a través de endpoints REST y servicios gRPC.

A medida que vayamos desarrollando la aplicación, aprenderemos de las distintas características que nos ofrece el framework Blazor WebAssembly aplicando buenas prácticas de programación.

Audiencia

Este entrenamiento está dirigido a personas que deseen conocer la forma de desarrollar aplicaciones web SPA utilizando Blazor WebAssembly aplicando buenas prácticas de programación. Para un mejor aprovechamiento de este entrenamiento, se recomienda que los participantes tengan conocimientos básicos sobre:

• Desarrollo de aplicaciones .NET con C#.
• Desarrollo de aplicaciones web con ASP.NET Core.

Requisitos

Para poder realizar los ejercicios del entrenamiento, se recomienda contar con un equipo de desarrollo que cumpla con los siguientes requisitos:

• Sistema operativo Windows 10 o posterior.
• Entorno de desarrollo con la versión más reciente de Visual Studio (puede ser la versión gratuita Visual Studio Community).

Formato del curso

Instructor

Material para el participante

Fecha de inicio

Martes 14 de octubre de 2025

Horario

Martes y Jueves.
18:30 a 21:30 horas. UTC-06. Tiempo de la ciudad de México.

Duración

30 horas

Costo

Registro

Realiza el pago a través de PayPal o mediante transferencia o depósito bancario y envía tu comprobante a logistica@ticapacitacion.com para confirmar tu participación.

NOTA: Para la emisión de facturas en la republica mexicana, el pago deberá ser realizado mediante transferencia o depósito bancario.

Enlace para pago mediante PayPal

Datos para Transferencia o depósito bancario

Si necesitas más información, escribe a logistica@ticapacitacion.com.

El cupo es limitado.

Contenido

El contenido del entrenamiento está dividido en 10 lecciones:

Lección 1: Introducción al desarrollo web con Blazor

• ¿Qué es Razor?
• ¿Qué es Blazor?
• Requerimientos de desarrollo de Blazor
• ¿Cuándo utilizar Blazor?

Lección 2: Crear una aplicación web con Blazor

• Creación y ejecución de una aplicación web Blazor
• Componentes Razor
• Agregando componentes
• Eventos y enlaces de datos

Lección 3: Interacción con datos en aplicaciones web Blazor

• Información sobre los componentes Blazor
• ¿Qué es Clean Architecture?
• ¿Qué es MVVM?
• Crear una interfaz de usuario con componentes de Blazor
• Acceso a datos desde un componente de Blazor
• Registro de servicios para Inyección de Dependencias
• Uso de servicios con Inyección de Dependencias para obtener datos
• Compartir información con otros componentes mediante parámetros
• Compartir información mediante parámetros de cascada
• Compartir información implementando el patrón AppState
• Enlace de controles a datos en aplicaciones Blazor

Lección 4: Uso de páginas, enrutamiento y layouts para mejorar la navegación de Blazor

• Uso del componente router de Blazor para controlar la navegación de la aplicación
• Obtención de información de ubicación y navegación con NavigationManager
• Enrutamiento y parámetros de ruta
• Parámetros de ruta opcionales
• Parámetro de ruta catch-all
• Creación de componentes de Blazor reutilizables mediante Layouts

Lección 5: Formularios y validación en aplicaciones web de Blazor

• Adjuntar código C# a eventos del DOM
• Control de un evento con Blazor y C#
• Control de eventos en JavaScript Vs control de eventos con Blazor
• Control asíncrono de eventos
• Uso de EventCallback para controlar eventos entre componentes
• Formularios en Blazor
• Creación de EditForm con enlace de datos
• Descripción de los controles de entrada de Blazor
• Validación de la entrada del usuario en formularios de Blazor
• Adición de componentes de validación al formulario
• Control de validaciones de formularios en el lado servidor durante el envío de un formulario

Lección 6: Creación de componentes interactivos enriquecidos para aplicaciones web de Blazor

• Creación de una interfaz de usuario con componentes de Blazor
• Interoperabilidad de JavaScript con Blazor
• Invocar código JavaScript desde código de .NET
• Actualización de DOM con JavaScript mediante un objeto ElementReference
• Invocar código de .NET desde JavaScript
• Mejorando la interactividad de aplicaciones con eventos del ciclo de vida
• Reutilización de componentes mediante la creación de plantillas

Lección 7: Creación de componentes reutilizables con Blazor

• Introducción a las Bibliotecas de clases de Razor (Razor Class Library)
• Creación y conceptos de la Biblioteca de clases de Razor
• Referencia a una Biblioteca de clases de Razor
• Diferencias entre una Biblioteca de clases y una Biblioteca de clases de Razor
• Creación de un componente de cuadro de diálogo modal
• Empaquetado de una Biblioteca de clases de Razor
• Configuración de una Biblioteca de clases de Razor para el empaquetado de NuGet
• Crear un paquete NuGet

Lección 8: Autenticación y Autorización

• Aplicar reglas de seguridad en el servidor
• Configurar ASP.NET Core Identity en el backend
• Llevar un seguimiento del estado de autenticación
• Mostrar el estado de inicio de sesión
• Registrar un usuario e iniciar sesión
• Solicitar un token de acceso
• Autorizar el acceso a recursos
• Forzar el inicio de sesión en páginas especificas
• Ocultar opciones de navegación según el estado de la autorización
• Mantener el estado de la aplicación durante redireccionamientos a otras páginas
• Personalizar la experiencia de fin de sesión
• Personalizar los mensajes de inicio de sesión
• Personalizar la página de inicio de sesión

Lección 9: Características de Aplicación Web Progresiva

• ¿Qué es una Aplicación Web Progresiva (Progressive Web Application)?
• Agregar un Service Worker
• Hacer que la aplicación sea instalable
• Enviar notificaciones Web Push

Lección 10: Publicar la aplicación

• Publicar la aplicación Web Assembly hacia Azure App Service
• Publicar la Web API hacia Azure App Service