Criar um aplicativo .NET MAUIBlazor Hybrid

  • Artigo

Observação

Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Importante

Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.

Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Este tutorial mostra como criar e executar um aplicativo .NET MAUIBlazor Hybrid. Você aprenderá como:

  • Criar um projeto de aplicativo .NET MAUIBlazor Hybrid no Visual Studio
  • Executar o aplicativo no Windows
  • Executar o aplicativo em um dispositivo móvel emulado no Android Emulator

Pré-requisitos

Para obter mais informações sobre pré-requisitos e instalação de software para este tutorial, confira os seguintes recursos na documentação do .NET MAUI:

Criar um aplicativo .NET MAUIBlazor Hybrid

Inicie o Visual Studio. Na janela Iniciar, selecione Criar projeto:

Nova solução.

Na janela Criar projeto, use a lista suspensa Tipo de projeto para filtrar modelos MAUI:

Modelos de filtro para .NET MAUI.

Selecione o modelo de .NET MAUIBlazor Hybrid aplicativo e, em seguida, selecione o botão Avançar:

Escolher um modelo.

Observação

No .NET 7 ou anterior, o modelo é chamado Aplicativo .NET MAUIBlazor.

Na caixa de diálogo Configurar novo projeto:

  • Defina o Nome do projeto como MauiBlazor.
  • Escolha um local adequado para o projeto.
  • Selecione o botão Avançar.

Configurar o projeto.

Na caixa de diálogo Informações adicionais, selecione a versão da estrutura com a lista suspensa Estrutura. Selecione o botão Criar:

Caixa de diálogo de informações adicionais para selecionar a versão da estrutura e criar o projeto.

Aguarde até que o Visual Studio crie o projeto e restaure as dependências do projeto. Monitore o progresso no Gerenciador de Soluções abrindo a entrada Dependências.

Restauração de dependências:

Restaurar dependências.

Dependências restauradas:

Dependências restauradas.

Executar o aplicativo no Windows

Na barra de ferramentas do Visual Studio, selecione o botão Computador Windows para compilar e iniciar o projeto:

Botão do Computador Windows.

Se o Modo de Desenvolvedor não estiver habilitado, você será solicitado a habilitá-lo em Configurações>Para desenvolvedores>Modo de Desenvolvedor (Windows 10) ou Configurações>Privacy e segurança>Para desenvolvedores>Modo de Desenvolvedor (Windows 11). Defina a opção para Ativado.

O aplicativo em execução como um aplicativo Windows para desktop:

Aplicativo em execução no Windows.

Executar o aplicativo no Android Emulator

Se você seguiu as diretrizes na seção Executar o aplicativo no Windows, selecione o botão Parar Depuração na barra de ferramentas para interromper o aplicativo do Windows em execução:

Botão Parar Depuração.

Na barra de ferramentas do Visual Studio, selecione o botão suspenso Iniciar Configuração. Selecione Android Emulators>Android Emulator:

Seleção suspensa do Android Emulators para o botão Android Emulator.

Os SDKs do Android são necessários para criar aplicativos para Android. No painel Lista de Erros, uma mensagem é exibida solicitando que você clique duas vezes na mensagem para instalar os SDKs do Android necessários:

Lista de Erros do Visual Studio com a mensagem solicitando que você clique na mensagem para instalar os SDKs do Android.

A janela Aceitação da Licença do SDK do Android é exibida, em seguida, selecione o botão Aceitar para cada licença exibida. Uma janela adicional é exibida para as licenças do Android Emulator e do Aplicador de Patch do SDK. Selecione o botão Aceitar.

Aguarde até que o Visual Studio baixe o SDK do Android e o Android Emulator. Você pode acompanhar o progresso selecionando o indicador de tarefas em segundo plano no canto inferior esquerdo da interface do usuário do Visual Studio:

Indicador de tarefas em segundo plano do Visual Studio.

O indicador mostra uma marca de seleção quando as tarefas em segundo plano são concluídas:

Indicador de tarefas em segundo plano do Visual Studio marcado.

Na barra de ferramentas, selecione o botão Android Emulator:

Botão Android Emulator.

Na janela Criar um dispositivo Android padrão, selecione o botão Criar:

Janela Criar um dispositivo Android padrão.

Aguarde até que o Visual Studio baixe, descompacte e crie um Android Emulator. Quando o emulador de telefone Android estiver pronto, selecione o botão Iniciar.

Observação

Ative a aceleração de hardware para melhorar o desempenho do emulador do Android.

Feche a janela Gerenciador de Dispositivos Android. Aguarde até que a janela do telefone emulado apareça, o sistema operacional Android seja carregado e a tela inicial seja exibida.

Importante

O telefone emulado deve ser ligado com o sistema operacional Android carregado para carregar e executar o aplicativo no depurador. Se o telefone emulado não estiver em execução, ative o telefone usando o atalho de teclado Ctrl+P ou selecionando o botão Liga/Desliga na interface do usuário:

O botão Liga/Desliga do Android Emulator.

Na barra de ferramentas do Visual Studio, selecione o botão Pixel 5 - {VERSION} para compilar e executar o projeto, em que o espaço reservado {VERSION} é a versão do Android. No exemplo a seguir, a versão do Android é API 30 (Android 11.0 - API 30), e uma versão posterior é exibida dependendo do SDK do Android instalado:

Botão do emulador da API 30 do Pixel 5.

O Visual Studio compila o projeto e implanta o aplicativo no emulador.

Iniciar o emulador, carregar o telefone e o sistema operacional emulados e implantar e executar o aplicativo pode levar vários minutos, dependendo da velocidade do sistema e de a aceleração de hardware estar habilitada ou não. Você pode monitorar o progresso da implantação inspecionando a barra de status do Visual Studio na parte inferior da interface do usuário. O indicador Pronto recebe uma marca de seleção e os indicadores de carregamento de aplicativo e implantação do emulador desaparecem quando o aplicativo está em execução:

Durante a implantação:

O primeiro indicador de implantação-execução que aparece na barra de rodapé do Visual Studio.

Durante a inicialização do aplicativo:

O segundo indicador de implantação-execução que aparece na barra de rodapé do Visual Studio.

O aplicativo em execução no Android Emulator:

Aplicativo em execução no Android Emulator.

Próximas etapas

Neste tutorial, você aprendeu a:

  • Criar um projeto de aplicativo .NET MAUIBlazor Hybrid no Visual Studio
  • Executar o aplicativo no Windows
  • Executar o aplicativo em um dispositivo móvel emulado no Android Emulator

Saiba mais sobre os aplicativos Blazor Hybrid:

ASP.NET Core Blazor Hybrid