Creación de una aplicación .NET MAUIBlazor Hybrid

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión .NET 8 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la Directiva de soporte técnico de .NET y .NET Core. Para la versión actual, consulte la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión .NET 8 de este artículo.

Este tutorial muestra cómo crear y ejecutar una aplicación .NET MAUIBlazor Hybrid. Aprenderá a:

• Crear un proyecto de aplicación Blazor Hybrid de .NET MAUI en Visual Studio.
• Ejecutar la aplicación en Windows.
• Ejecutar la aplicación en un dispositivo móvil emulado en Android Emulator.

Prerrequisitos

• Plataformas admitidas (documentación de .NET MAUI).
• Visual Studio con la carga de trabajo de desarrollo de .NET Multi-platform App UI.
• Microsoft Edge WebView2: WebView2 es necesario en Windows cuando se ejecuta una aplicación nativa. Cuando se desarrollan aplicaciones .NET MAUIBlazor Hybrid y se ejecutan únicamente en los emuladores de Visual Studio, WebView2 no es necesario.
• Habilitar la aceleración por hardware para mejorar el rendimiento de Android Emulator.

Para más información sobre los requisitos previos y la instalación del software de este tutorial, consulte los siguientes recursos en la documentación de .NET MAUI:

• Plataformas compatibles con aplicaciones de .NET MAUI
• Instalación (Visual Studio)

Creación de una aplicación .NET MAUIBlazor Hybrid

Inicie Visual Studio. En Ventana de inicio, seleccione Crear un proyecto:

En la ventana Crear un nuevo proyecto, use la lista desplegable Tipos de proyecto para filtrar las plantillas MAUI:

Elija la plantilla .NET MAUIAplicación Blazor Hybrid y seleccione luego el botón Siguiente:

Nota:

En .NET 7 o versiones anteriores, la plantilla se denomina aplicación de .NET MAUIBlazor.

En el cuadro de diálogo Configura el proyecto nuevo:

• Establece el nombre del proyecto a MauiBlazor.
• Elige una ubicación adecuada para el proyecto.
• Haga clic en el botón Siguiente.

En el cuadro de diálogo Información adicional, selecciona la versión del marco con la lista desplegable de Marco. Seleccione el botón Crear:

Espera a que Visual Studio cree el proyecto y se restauren las dependencias de este. Supervise el progreso en Explorador de soluciones abriendo la entrada Dependencias.

Restauración de dependencias:

Dependencias restauradas:

Ejecutar la aplicación en Windows.

En la barra de herramientas de Visual Studio, seleccione el botón Máquina Windows para compilar e iniciar el proyecto:

Si el modo de desarrollador no está habilitado, se le pedirá que lo habilite en Configuración>Para desarrolladores>Modo de desarrollador (Windows 10) o Configuración>Privacy y seguridad>Para desarrolladores>Modo de desarrollador (Windows 11). Establezca el conmutador en Activado.

La aplicación ejecutándose como una aplicación de escritorio de Windows:

Ejecutar la aplicación en Android Emulator.

Si ha seguido las instrucciones de la sección Ejecutar la aplicación en Windows, seleccione el botón Detener depuración de la barra de herramientas para detener la ejecución de la aplicación Windows:

En la barra de herramientas de Visual Studio, seleccione el botón desplegable Iniciar la configuración. Seleccione Emuladores de Android>Emulador de Android:

Android SDK son necesarios para compilar aplicaciones para Android. En el panel Lista de errores, aparece un mensaje que le pide que haga doble clic en el mensaje para instalar las instancias necesarias de Android SDK:

Aparece la ventana de aceptación de licencia de Android SDK, seleccione el botón Aceptar para cada licencia que aparezca. Aparece una ventana adicional para las licencias del emulador de Android y el aplicador de revisiones del SDK. Seleccione el botón Aceptar.

Espere a que Visual Studio descargue Android SDK y Android Emulator. Para realizar un seguimiento del progreso, seleccione el indicador de tareas en segundo plano en la esquina inferior izquierda de la interfaz de usuario de Visual Studio:

El indicador muestra una marca de verificación cuando se completan las tareas en segundo plano:

En la barra de herramientas, seleccione el botón Emulador Android:

En la ventana para crear un dispositivo Android predeterminado, seleccione el botón Crear:

Espere a que Visual Studio descargue, descomprima y cree una instancia de Android Emulator. Cuando el emulador de teléfono Android esté listo, seleccione el botón Iniciar.

Nota

Habilite la aceleración por hardware para mejorar el rendimiento de Android Emulator.

Cierre la ventana Administrador de dispositivos Android. Espera a que aparezca la ventana del teléfono emulado, se cargue el sistema operativo Android y aparezca la pantalla de inicio.

Importante

El teléfono emulado debe estar encendido con el sistema operativo Android cargado para cargar y ejecutar la aplicación en el depurador. Si el teléfono emulado no se está ejecutando, enciéndelo mediante la función rápida de teclado Ctrl+P o al seleccionar el botón Alimentación en la interfaz de usuario:

En la barra de herramientas de Visual Studio, seleccione el botón Pixel 5 - {VERSION} para compilar y ejecutar el proyecto, donde el marcador de posición {VERSION} es la versión de Android. En el ejemplo siguiente, la versión de Android es API 30 (Android 11.0 - API 30) y aparece una versión posterior en función de la versión de Android SDK instalada:

Visual Studio compila el proyecto e implementa la aplicación en el emulador.

Iniciar el emulador, cargar el teléfono emulado y el SO e implementar y ejecutar la aplicación puede tardar varios minutos en función de la velocidad del sistema y de si está habilitada o no la aceleración de hardware. Puede supervisar el progreso de la implementación inspeccionando la barra de estado de Visual Studio en la parte inferior de la UI. El indicador Listo recibe una marca de verificación y los indicadores de carga de aplicaciones e implementación del emulador desaparecen cuando se ejecuta la aplicación:

Durante la implementación:

Durante el inicio de la aplicación:

La aplicación ejecutándose en Android Emulator:

Pasos siguientes

En este tutorial, ha aprendido a:

• Crear un proyecto de aplicación Blazor Hybrid de .NET MAUI en Visual Studio.
• Ejecutar la aplicación en Windows.
• Ejecutar la aplicación en un dispositivo móvil emulado en Android Emulator.

Más información sobre las aplicaciones Blazor Hybrid:

ASP.NET Core Blazor Hybrid