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

  • 5 minutos

En este ejercicio empezará a compilar la aplicación de .NET MAUI para la cadena de tiendas de comestibles. Usará la plantilla para generar la aplicación predeterminada y ejecutarla en Windows y en el emulador de Android. Modificará esta aplicación en un ejercicio posterior para personalizar la interfaz de usuario y agregar la funcionalidad requerida por la aplicación de la cadena de tiendas de comestibles.

Creación de un 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.

    A screenshot of the Create a new project dialog box. The user has selected the .NET MAUI App template.

  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.

    A screenshot of the Configure your new project dialog box. The user has named the project Phoneword and selected a location on their hard drive to store it.

  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.

    A screenshot of the Phoneword project in the Visual Studio solution explorer window.

  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 para un botón con el título Hacer clic aquí 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 el marco .net6.0-windows de la lista en el cuadro de lista desplegable de marcos.

    A screenshot of the target runtime dropdown in Visual Studio. The user has set the Windows.Machine profile as the startup profile for the solution.

  2. En el menú Depurar, seleccione Iniciar depuración. Esta acción creará, implementará y ejecutará la aplicación en Windows:

    A screenshot of the Visual Studio debug menu. The user has started debugging the app using the Windows Machine profile.

  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.

    A screenshot of the Windows UI app running. The user has tapped the 'Click me' button four times.

  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:

    A screenshot of the Visual Studio toolbar. The Hot Reload button is highlighted.

  7. Vuelva a la aplicación y seleccione el botón Hacer clic aquí. Compruebe que el recuento ahora se incrementa 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í.

    A screenshot of the Visual Studio tools menu. The user has selected the Android Device Manager option.

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

    A screenshot of the New Device window from the Android SDK. The user is creating a new Pixel 3 device with API 30 selected.

  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 y seleccione el dispositivo pixel_3a-api_30. Este es el dispositivo que acaba de crear.

    A screenshot of the Visual Studio toolbar. The user has specified the Pixel 3 with the API 30 profile for the Android emulator to start debugging with.

  6. Para iniciar la depuración, use el perfil pixel_3a-api_30. Esta acción creará, implementará y ejecutará la aplicación en el dispositivo Android.

    A screenshot of the Visual Studio toolbar. It shows the pixel 3 a p i 30 profile has been selected and ready to start debugging with as soon as the user presses the play button.

  7. Cuando la aplicación empiece a ejecutarse en el emulador (lo 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.

    A screenshot of the Android version of the Phoneword application running in the selected emulator.

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