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 de .NET 9 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 compatibilidad de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 9 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 de .NET 9 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 .NET MAUI de Blazor Hybrid 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:
- .NET MAUIaplicaciones de
- 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, selecciona el botón Máquina Windows para compilar e iniciar el proyecto:
Si el modo de desarrollador no está habilitado, se te pedirá que lo habilites en Configuración>Para desarrolladores>Modo de desarrollador (Windows 10) o Configuración>Privacy y seguridad>Para desarrolladores>Modo de desarrollador (Windows 11). Establece 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 has seguido las instrucciones de la sección Ejecutar la aplicación en Windows, selecciona 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, selecciona el botón desplegable Iniciar la configuración. Selecciona 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 te pide que hagas doble clic en el mensaje para instalar las instancias necesarias de Android SDK:
Aparece la ventana de aceptación de licencia de Android SDK, selecciona 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. Selecciona el botón Aceptar.
Espera a que Visual Studio descargue Android SDK y Android Emulator. Para realizar un seguimiento del progreso, selecciona 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, selecciona el botón Emulador Android:
En la ventana para Crear un dispositivo Android predeterminado, selecciona el botón Crear:
Espera a que Visual Studio descargue, descomprima y cree una instancia de Android Emulator. Cuando el emulador de teléfono Android esté listo, selecciona el botón Iniciar.
Nota
Habilitar la aceleración por hardware para mejorar el rendimiento de Android Emulator.
Cierra 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 home.
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, selecciona 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. Puedes 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 .NET MAUI de Blazor Hybrid 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:
