Exercício: Crie seu primeiro aplicativo .NET MAUI

  • 5 minutos

Neste exercício, você começará a criar o aplicativo .NET MAUI para a rede de supermercados. Você usará o modelo para gerar o aplicativo padrão e executá-lo no Windows e no emulador Android. Você modificará este aplicativo em um exercício posterior para personalizar a interface do usuário e adicionar a funcionalidade exigida pelo aplicativo da cadeia de supermercados.

Criar um novo projeto

  1. Abra o Visual Studio e crie uma nova solução. Esta ação abre o assistente para Novo projeto no Visual Studio.

    Gorjeta

    Verifique se você tem a carga de trabalho do .NET MAUI instalada com o Visual Studio 2022 v17.3 ou posterior (v17.8 preferencial com o .NET 8). Mais informações aqui.

  2. Selecione o tipo de projeto MAUI, selecione o modelo .NET MAUI App e selecione Next.

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

  3. Na página Configurar seu novo projeto, nomeie a palavra de telefone do projetoe salve-a em um local de sua escolha. Selecione Seguinte.

    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. Selecione .NET 8.0 (Suporte de Longo Prazo) na lista suspensa Framework e, em seguida, selecione Criar para criar o aplicativo.

Examinar a estrutura da solução

  1. Na janela Gerenciador de Soluções, expanda o projeto Phoneword . Expanda a pasta Recursos e suas subpastas, expanda o nó App.xaml, o nó AppShell.xaml e o nó MainPage.xaml.

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

  2. No projeto, observe os seguintes itens:

    • A pasta Recursos contém fontes, imagens e ativos compartilhados usados por todas as plataformas.

    • O arquivo MauiProgram.cs contém o código que configura o aplicativo e especifica que a classe App deve ser usada para executar o aplicativo.

    • O arquivo App.xaml.cs, o construtor da classe App, cria uma nova instância da classe AppShell, que é exibida na janela do aplicativo.

    • O arquivo AppShell.xaml contém o layout principal do aplicativo e a página inicial da MainPage.

    • O arquivo MainPage.xaml contém o layout da página. Esse layout inclui o código XAML para um botão com a legenda Click me e uma imagem que exibe o arquivo dotnet_bot.png . Há outros dois rótulos também.

    • O arquivo MainPage.xaml.cs contém a lógica do aplicativo para a página. Especificamente, a classe MainPage inclui um método chamado OnCounterClicked que é executado quando o usuário toca no botão Click me .

Crie e execute o aplicativo no Windows

  1. Na barra de ferramentas do Visual Studio, selecione o perfil do Windows Machine . Selecione a estrutura .net6.0-windows na lista na caixa de listagem suspensa de estruturas.

    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. No menu Debug (Depurar), selecione Start Debugging (Iniciar Depuração). Esta ação irá criar, implantar e executar o aplicativo no Windows:

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

  3. Verifique se a versão do aplicativo para Windows é iniciada. Selecione o botão Clique em mim várias vezes. O texto do botão deve ser atualizado com a contagem sendo incrementada a cada toque.

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

  4. No menu Exibir, selecione Gerenciador de Soluções. Na janela Gerenciador de Soluções, expanda o nó MainPage.xaml e abra o arquivo code-behind MainPage.xaml.cs.

  5. No método OnCounterClicked, altere a instrução que incrementa a variável count para adicionar 5 a essa variável:

    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. Na barra de ferramentas do Visual Studio, selecione o botão Hot Reload :

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

  7. Volte para o aplicativo e selecione o botão Clique em mim . Verifique se a contagem agora é incrementada em 5.

    Nota

    O recurso Hot Reload do Visual Studio permite que você modifique seu código enquanto o aplicativo está sendo executado no modo de Depuração. Não é necessário parar o aplicativo para ver as alterações. Além de modificar o código, você também pode fazer alterações na marcação XAML de uma página, e essas alterações ficarão visíveis no aplicativo em execução.

  8. Feche o aplicativo e retorne ao Visual Studio.

Crie e execute o aplicativo no Android

  1. Na barra de ferramentas do Visual Studio, selecione o projeto Phoneword .

  2. No menu Ferramentas, selecione Android e, em seguida, selecione Gerenciador de dispositivos Android. Se lhe for pedido para permitir que o Gestor de Dispositivos Android faça alterações no seu computador, selecione Sim.

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

  3. Na janela Gestor de dispositivos Android, selecione + Novo. Na janela Novo dispositivo, selecione o dispositivo base do Pixel 3a (+ Store), selecione o sistema operacional API 30 e selecione Criar. Aguarde enquanto as várias bibliotecas são baixadas e o dispositivo está configurado.

    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. Quando o dispositivo for criado, retorne ao Visual Studio.

  5. Na barra de ferramentas do Visual Studio, na caixa de listagem suspensa Configuração de depuração, selecione o perfil Emuladores Android e selecione o dispositivo api_30 pixel_3a. Este é o dispositivo que você acabou de criar.

    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. Inicie a depuração usando o perfil pixel_3a-api_30 . Esta ação irá criar, implantar e executar o aplicativo no 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. Quando o aplicativo começar a ser executado no emulador (isso pode levar vários minutos), selecione o botão Clique em mim e verifique se o aplicativo é executado exatamente da mesma maneira que no Windows.

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

  8. Retorne ao Visual Studio e pare a depuração.