Ejercicio: Creación y ejecución de una aplicación de Blazor Hybrid

8 minutos

Para empezar, se creará la primera aplicación web Blazor.

En este módulo se usa Visual Studio 2022 para el desarrollo local. Cuando complete este módulo, podrá aplicar sus conceptos mediante un entorno de desarrollo como Visual Studio Code.

Requisitos para el desarrollo de .NET MAUI

Para crear aplicaciones .NET MAUI con .NET 8, debe instalar Visual Studio versión 17.8 o posterior con la siguiente carga de trabajo instalada:

Desarrollo de la interfaz de usuario de aplicaciones multiplataforma de .NET

Además, si quiere crear aplicaciones .NET MAUI Blazor, debe instalar la carga de trabajo de desarrollo web y ASP.NET.

Consulte la documentación para ver un tutorial de configuración.

Desarrollo con Visual Studio Code

Si está desarrollando en macOS o Linux, deberá instalar Visual Studio Code y la extensión MAUI de .NET junto con la SDK de .NET y la carga de trabajo de MAUI de .NET. Consulte la documentación para obtener información sobre la configuración.

Creación de una aplicación de Blazor Hybrid

Para configurar un proyecto de Blazor Hybrid con el que trabajar, se usa Visual Studio 2022.

En Visual Studio 2022, seleccione Archivo>nuevo proyecto, o bien seleccione Crear un nuevo proyecto en el iniciador.
En el cuadro de búsqueda de la parte superior del cuadro de diálogo Crear un proyecto nuevo, escriba .NET MAUI Blazor, seleccione .NET MAUI Blazor Hybrid App y luego Siguiente.
En la pantalla siguiente, asigne el nombre BlazorHybridApp al proyecto y especifique una ubicación en el equipo para almacenarlo. Active la casilla situada junto a Colocar la solución y el proyecto en el mismo directorio y, después, seleccione Siguiente.
En la pantalla Información adicional, seleccione .NET 8.0 (soporte técnico a largo plazo) en la lista desplegable Marco y, después, seleccione Crear.
Este comando crea un proyecto de Blazor Hybrid con la tecnología de .NET MAUI con todos los archivos y páginas necesarios.

Ahora debería tener acceso a estos archivos y el Explorador de soluciones de Visual Studio 2022 será similar al del ejemplo siguiente:

Para configurar un proyecto de Blazor Hybrid con el que trabajar, se usa Visual Studio Code.

En Visual Studio Code, abra el Explorador y seleccione Crear proyecto de .NET.
Seleccione Aplicación híbrida Blazor de .NET MAUI en la lista desplegable.
Cree una carpeta en los nombres emergentes BlazorHybridApp y seleccione Seleccionar carpeta.
Asigne el nombre BlazorHybridApp al proyecto y presione Entrar para confirmar.
De esta forma se crea un proyecto de Blazor Hybrid con tecnología de .NET MAUI con todos los archivos y páginas necesarios.

Ahora debería tener acceso a estos archivos y el explorador de soluciones de Visual Studio Code tendrá un aspecto similar al siguiente:

Proyecto de Blazor Hybrid con estructura y puesta en marcha del proyecto de .NET MAUI

Es un proyecto de .NET MAUI normal con contenido adicional relacionado con Blazor.

Archivos de proyecto de Blazor

wwwroot: esta carpeta incluye recursos web estáticos usados por Blazor, incluidos archivos HTML, CSS, JavaScript y de imagen.
Components: Esta carpeta incluye varias subcarpetas y componentes de Razor para la aplicación.
- Layout: esta carpeta contiene componentes compartidos de Razor, incluido el diseño principal y el menú de navegación de la aplicación.
- Pages: esta carpeta contiene tres componentes de Razor (Counter.razor, Home.razor y Weather.razor) que definen las tres páginas que componen la interfaz de usuario de Blazor.
- _Imports.razor: Este archivo define los espacios de nombres que se importan en cada componente de Razor.
- Routes.razor: el componente raíz de Razor de la aplicación que configura el enrutador Blazor para controlar la navegación de páginas dentro de la vista web.

Archivos de proyecto de .NET MAUI

App.xaml: este archivo define los recursos de la aplicación que la aplicación usa en el diseño XAML. Los recursos predeterminados se encuentran en la carpeta Resources y definen los colores para toda la aplicación y estilos predeterminados para cada control integrado de .NET MAUI.
App.xaml.cs: código subyacente del archivo App.xaml. Este archivo define la clase App. Esta clase representa la aplicación en tiempo de ejecución. El constructor de esta clase crea una ventana inicial y le asigna la propiedadMainPage. Esta propiedad determina qué página se muestra cuando la aplicación comienza a ejecutarse. Además, esta clase le permite invalidar controladores comunes de eventos de ciclo de vida de aplicaciones independientes de la plataforma. Los eventos incluyen OnStart, OnResume y OnSleep.

MainPage.xaml: Este archivo contiene la definición de la interfaz de usuario. La aplicación de muestra que genera la plantilla Aplicación Blazor de .NET MAUI consta de un elemento BlazorWebView, que carga el componente Components.Routes en la página HTML del host especificada (wwwroot/index.html) en una ubicación especificada por el selector CSS (#app).

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:BlazorHybridApp"
            x:Class="BlazorHybridApp.MainPage"
            BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

MainPage.xaml.cs: código subyacente de la página. En este archivo se define la lógica para los distintos controladores de eventos y otras acciones desencadenadas por los controles de .NET MAUI de la página. El código de ejemplo de la plantilla solo tiene el constructor predeterminado, ya que todos los eventos y la interfaz de usuario se encuentran en los componentes de Blazor.
```
namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}
```
MauiProgram.cs: Cada plataforma nativa tiene un punto de partida diferente que crea e inicializa la aplicación. Encontrará este código en la carpeta Plataformas del proyecto. Este código es específico de la plataforma, pero al final llama al método CreateMauiApp de la clase estática MauiProgram. Use el método CreateMauiApp para configurar la aplicación mediante la creación de un objeto generador de aplicaciones. Como mínimo, debe especificar qué clase describe la aplicación. Esto se hace con el método genérico UseMauiApp del objeto generador de aplicaciones; el parámetro type especifica la clase de aplicación. El generador de aplicaciones también proporciona métodos para tareas como el registro de fuentes, la configuración de servicios para la inserción de dependencias, el registro de controladores personalizados para los controles y mucho más. En el código siguiente se muestra un ejemplo del uso del generador de aplicaciones para registrar una fuente, registrar el servicio meteorológico y agregar compatibilidad con Blazor Hybrid con el método AddMauiBlazorWebView:
```
using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

        builder.Services.AddMauiBlazorWebView();

        #if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
        #endif

        return builder.Build();
    }
}
```

Ejecutar la aplicación

En Visual Studio, seleccione Depurar>Iniciar depuración.

En Visual Studio Code, seleccione Ejecutar>Iniciar depuración. Seleccione el depurador .NET MAUI en la lista desplegable para iniciar la aplicación.

Esto compila e inicia la aplicación en Windows y, a continuación, vuelve a generar y reinicia la aplicación cada vez que realice cambios en el código. La aplicación debe abrirse automáticamente en Windows. También puede cambiar el destino de implementación a través del menú desplegable depurar para implementar en Android u otras plataformas.

Captura de pantalla de la aplicación de Blazor Hybrid predeterminada que se ejecuta en Windows y Android.

En los ejercicios siguientes usará esta aplicación de Blazor Hybrid.