Ejercicio: Creación de su primera aplicación .NET MAUI

  • 5 minutos

En este ejercicio, empezará a compilar la aplicación .NET MAUI (interfaz de usuario de aplicación multiplataforma) para la cadena de tiendas de comestibles. La plantilla se usa para generar la aplicación predeterminada y ejecutarla en Windows y en Android emulador. En un ejercicio posterior, modificará esta aplicación para personalizar la interfaz de usuario y agregará la funcionalidad que requiere la aplicación de la cadena de tiendas de comestibles.

Crear un nuevo proyecto

  1. Abra Visual Studio y cree una solución. Esta acción abre el Asistente para nuevo proyecto en Visual Studio.

    Sugerencia

    Asegúrese de tener instalada la carga de trabajo de .NET MAUI con Visual Studio 2022, versión 17.3 o posterior (v17.8 preferida con .NET 8). Consulte más información aquí.

  2. Seleccione el tipo de proyecto MAUI, seleccione la plantilla Aplicación de .NET MAUI y, después, seleccione Siguiente.

    Captura de pantalla del cuadro de diálogo Crear un nuevo proyecto. La plantilla Aplicación MAUI de .NET está seleccionada.

  3. En la página Configure su nuevo proyecto, asigne un nombre al proyecto Phoneword y guárdelo en la ubicación que prefiera. Seleccione Siguiente.

    Captura de pantalla del cuadro de diálogo Configurar el nuevo proyecto. El usuario asigna el nombre Phoneword al proyecto y selecciona una ubicación en su disco duro para almacenarlo.

  4. Seleccione .NET 8.0 (compatibilidad a largo plazo) en la lista desplegable Marco y, después, seleccione Crear para crear la aplicación.

Examen de la estructura de la solución

  1. En la ventana Explorador de soluciones, expanda el proyecto Phoneword. Expanda la carpet aResources y sus subcarpetas, y después expanda el nodo App.xaml, el nodo AppShell.xaml y el nodo MainPage.xaml.

    Captura de pantalla del proyecto Phoneword en la ventana del Explorador de soluciones de Visual Studio.

  2. En el proyecto, tenga en cuenta los siguientes elementos:

    • La carpeta Resources contiene fuentes compartidas, imágenes y activos usados por todas las plataformas.

    • El archivo MauiProgram.cs contiene el código que configura la aplicación y especifica que se debe usar la clase App para ejecutar la aplicación.

    • El archivo App.xaml.cs, el constructor de la clase App, crea una nueva instancia de la clase AppShell, que luego se muestra en la ventana de la aplicación.

    • El archivo AppShell.xaml contiene el diseño principal de la aplicación y la página de inicio MainPage.

    • El archivo MainPage.xaml contiene el diseño de la página. Este diseño incluye el código XAML (lenguaje de marcado de aplicaciones extensible) para un botón con el título Hacer clic en mí y una imagen que muestra el archivo dotnet_bot.png. También hay otras dos etiquetas.

    • El archivo MainPage.xaml.cs contiene la lógica de la aplicación de la página. En concreto, la clase MainPage incluye un método denominado OnCounterClicked que se ejecuta cuando el usuario pulsa el botón Hacer clic aquí.

Compilación y ejecución de la aplicación en Windows

  1. En la barra de herramientas de Visual Studio, seleccione el perfil Máquina Windows. Seleccione .net8.0-windows en la lista del cuadro de lista desplegable Marcos.

    Captura de pantalla de la lista desplegable de tiempo de ejecución de destino en Visual Studio. El usuario establece el perfil de máquina Windows como perfil de inicio de la solución.

  2. En el menú Depurar, seleccione Iniciar depuración. Esta acción compila, implementa y ejecuta la aplicación en Windows:

    Captura de pantalla del menú depurar de Visual Studio. El usuario está depurando la aplicación mediante el perfil de máquina Windows.

  3. Compruebe que se inicie la versión de Windows de la aplicación. Seleccione el botón Hacer clic aquí varias veces. El texto del botón debería actualizarse y el recuento se incrementará con cada pulsación.

    Captura de pantalla de la aplicación de interfaz de usuario de Windows que se ejecuta. El usuario ha pulsado el botón

  4. En el menú Ver, seleccione Explorador de soluciones. En la ventana Explorador de soluciones, expanda el nodo MainPage.xaml y abra el archivo de código subyacente MainPage.xaml.cs.

  5. En el método OnCounterClicked, cambie la instrucción que incrementa la variable count para agregar 5 a esta variable en su lugar:

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. En la barra de herramientas de Visual Studio, seleccione el botón Recarga activa:

    Captura de pantalla de la barra de herramientas de Visual Studio. El botón Recarga activa aparece resaltado.

  7. Vuelva a la aplicación y seleccione el botón Hacer clic aquí. Compruebe que el recuento ahora se está incrementando en 5.

    Nota:

    La característica de Recarga activa de Visual Studio le permite modificar el código mientras la aplicación se ejecuta en modo de depuración. No es necesario detener la aplicación para ver los cambios. Además de modificar el código, también puede realizar cambios en el marcado XAML de una página y estos cambios se harán visibles en la aplicación en ejecución.

  8. Cierre la aplicación y vuelva a Visual Studio.

Compilación y ejecución de la aplicación en Android

  1. En la barra de herramientas de Visual Studio, seleccione el proyecto Phoneword.

  2. En el menú Herramientas, seleccione Android y, a continuación, seleccione Administrador de dispositivos Android. Si se le pide que deje que el Administrador de dispositivos Android realice cambios en el equipo, seleccione Sí.

    Captura de pantalla del menú Herramientas de Visual Studio. El usuario seleccionó la opción Administrador de dispositivos Android.

  3. En la ventana Administrador de dispositivos Android, seleccione + Nuevo. En la ventana Nuevo dispositivo, seleccione el dispositivo base de Pixel 3a (+ Store), seleccione el API 30 OS y seleccione Crear. Espere mientras se descargan las distintas bibliotecas y el dispositivo se configura.

    Nota:

    En el ejemplo de este ejercicio se usa el dispositivo base de Pixel 3a (+ Store), pero puede usar dispositivos más recientes. Por ejemplo, el Pixel 5 - API 31 o Pixel 5 - API 34.

    Captura de pantalla de la ventana Nuevo dispositivo en el Android SDK. El usuario crea un dispositivo Pixel 3 con la opción API 30 seleccionada.

  4. Cuando se haya creado el dispositivo, vuelva a Visual Studio.

  5. En la barra de herramientas de Visual Studio, en el cuadro de lista desplegable de configuración Depurar, seleccione el perfil Emuladores de Android. Seleccione el dispositivo pixel_3a api_30 que creó.

    Captura de pantalla de la barra de herramientas de Visual Studio. El usuario especificó el píxel 3 con el perfil de API 30 del emulador de Android para iniciar la depuración.

  6. Para iniciar la depuración, use el perfil pixel_3a-api_30. Esta acción compila, implementa y ejecuta la aplicación en el dispositivo Android.

    Captura de pantalla de la barra de herramientas de Visual Studio. Muestra el píxel 3 a p i 30 perfil está seleccionado y listo para iniciar la depuración con tan pronto como el usuario presione el botón de reproducción.

  7. Cuando la aplicación empiece a ejecutarse en el emulador (esta acción que puede tardar unos minutos), seleccione el botón Hacer clic aquí y compruebe que la aplicación se ejecute exactamente del mismo modo que en Windows.

    Captura de pantalla de la versión para Android de la aplicación Phoneword que se ejecuta en el emulador seleccionado.

  8. Vuelva a Visual Studio y detenga la depuración.