Exercício – Criar e executar um aplicativo Blazor Hybrid

  • 8 minutos

Vamos começar criando nosso primeiro aplicativo Web do Blazor.

Este módulo usa o Visual Studio 2022 para desenvolvimento local. Depois de concluir este módulo, você pode aplicar seus conceitos usando um ambiente de desenvolvimento como o Visual Studio Code.

Requisitos para o desenvolvimento de .NET MAUI

Para criar aplicativos do .NET MAUI com o .NET 8, você precisa instalar o Visual Studio versão 17.8 ou mais recente com a seguinte carga de trabalho instalada:

  • Desenvolvimento de .NET Multi-Platform App UI

Além disso, se quiser criar aplicativos Blazor .NET MAUI, você precisará instalar a carga de trabalho de desenvolvimento Web e ASP.NET.

Confira a documentação para obter um passo a passo da configuração.

Desenvolvimento com o Visual Studio Code

Se você estiver desenvolvendo no macOS ou Linux, precisará instalar o Visual Studio Code e a extensão do .NET MAUI, juntamente com o SDK do .NET e a carga de trabalho do .NET MAUI. Confira a documentação para obter um passo a passo da configuração.

Criar um aplicativo Blazor Hybrid

Para configurar um projeto do Blazor Hybrid com o qual trabalhar, usamos o Visual Studio 2022.

  1. No Visual Studio 2022, selecione Arquivo>Novo projeto ou selecione Criar um novo projeto no inicializador.

  2. Na caixa de pesquisa na parte superior da caixa de diálogo Criar um novo projeto, insira .NET MAUI Blazor, selecione Aplicativo .NET MAUI Blazor Hybrid e selecione Avançar.

    Captura de tela da tela Criar novo projeto do Visual Studio 2022 e do modelo de aplicativo .NET MAUI Blazor.

  3. Na tela subsequente, nomeie seu projeto BlazorHybridApp e especifique um local no computador para armazenar o projeto. Marque a caixa ao lado de Colocar a solução e o projeto no mesmo diretório e selecione Avançar.

    Captura de tela do Visual Studio 2022, tela

  4. Na tela Informações adicionais, selecione .NET 8.0 (suporte de longo prazo) na lista suspensa do Framework e selecione Criar.

  5. Este comando cria um projeto básico do Blazor Hybrid desenvolvido com .NET MAUI com todos os arquivos e páginas necessários.

    Agora você deve ter acesso a esses arquivos, e o Gerenciador de Soluções no Visual Studio 2022 deve ser semelhante ao exemplo a seguir:

    Captura de tela do Visual Studio 2022, tela

Para configurar um projeto do Blazor Hybrid com o qual trabalhar, usamos o Visual Studio Code.

  1. No Visual Studio Code, abra o Explorer e selecione Criar projeto do .NET.

  2. Selecione o aplicativo Blazor Hybrid do .NET MAUI na lista suspensa.

    Captura de tela da tela Criar Novo Projeto do Visual Studio Code e do modelo de Aplicativo Blazor do MAUI do .NET.

  3. Crie uma nova pasta no pop-up chamada BlazorHybridApp e selecione Selecionar Pasta.

  4. Nomeie o projeto BlazorHybridApp e pressione Enter para confirmar.

  5. Isso cria um projeto do Blazor Hybrid básico alimentado pelo .NET MAUI com todos os arquivos e páginas necessários.

    Agora você deve ter acesso a esses arquivos, e o gerenciador de soluções no Visual Studio Code deve ser semelhante a:

    Captura de tela do Gerenciador de Soluções do Visual Studio Code com uma lista dos arquivos em um projeto padrão do Blazor do .NET MAUI.

Blazor Hybrid com estrutura e inicialização do projeto .NET MAUI

O projeto é um projeto normal do .NET MAUI com um pouco mais de conteúdo relacionado ao Blazor.

Arquivos de projeto do Blazor

  • wwwroot: Essa pasta inclui ativos da Web estáticos que o Blazor usa, incluindo HTML, CSS, JavaScript e arquivos de imagem.

  • Components: Esta pasta armazena vários componentes de subpasta e Razor para o aplicativo.

    • Layout: Esta pasta contém componentes do Razor compartilhados, incluindo o layout principal do aplicativo e o menu de navegação.

    • Pages: Esta pasta contém três componentes Razor —Counter.razor, Home.razor e Weather.razor— que definem as três páginas que compõem a interface do usuário do Blazor.

    • _Imports.razor: Esse arquivo define namespaces que são importados para cada componente Razor.

    • Routes.razor: O componente Razor raiz do aplicativo que configura o roteador Blazor para lidar com a navegação de página no modo de exibição da Web.

Arquivos de projeto MAUI do .NET

  • App.xaml: Esse arquivo define os recursos de aplicativo que o aplicativo usa no layout XAML. Os recursos padrão estão localizados na pasta Resources e definem cores em todo o aplicativo e estilos padrão para cada controle interno do .NET MAUI.

  • App.xaml.cs: O code-behind do arquivo App.xaml. Esse arquivo define a classe App. Essa classe representa seu aplicativo no runtime. O construtor nessa classe cria uma janela inicial e a atribui para a propriedade MainPage; essa propriedade determina qual página é exibida quando o aplicativo começa a ser executado. Além disso, essa classe permite substituir manipuladores comuns de eventos de ciclo de vida de aplicativo neutros da plataforma. Os eventos incluem OnStart, OnResume e OnSleep.

  • MainPage.xaml: Esse arquivo contém a definição da interface do usuário. O aplicativo de exemplo gerado pelo modelo de aplicativo do Blazor do .NET MAUI compreende um BlazorWebView que carrega o componente Components.Routes na página HTML do host especificada (wwwroot/index.html) em um local especificado pelo seletor CSS (#app).

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:BlazorHybridApp"
            x:Class="BlazorHybridApp.MainPage"
            BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

  • MainPage.xaml.cs: O code-behind da página. Neste arquivo, você define a lógica para os vários manipuladores de eventos e outras ações que o .NET MAUI controla no gatilho de página. O código de exemplo no modelo tem apenas o construtor padrão, pois todos os eventos e interface do usuário estão localizados nos componentes do Blazor.

    namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

  • MauiProgram.cs: Cada plataforma nativa tem um ponto de partida diferente que cria e inicializa o aplicativo. Você pode encontrar esse código na pasta Platforms no projeto. Esse código é específico da plataforma, mas no final ele chama o método CreateMauiApp da classe estática MauiProgram. Use o método CreateMauiApp para configurar o aplicativo criando um objeto do construtor de aplicativos. No mínimo, você precisa especificar qual classe descreve seu aplicativo. Você pode fazer isso com o método genérico UseMauiApp do objeto do construtor de aplicativos; o parâmetro de tipo especifica a classe de aplicativo. O construtor de aplicativos também fornece métodos para tarefas como registrar fontes, configurar serviços para injeção de dependência, registrar manipuladores personalizados para controles e muito mais. O código a seguir mostra um exemplo de uso do construtor de aplicativos para registrar uma fonte, registrar o serviço meteorológico e adicionar suporte para Blazor Hybrid com o método AddMauiBlazorWebView:

    using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

        builder.Services.AddMauiBlazorWebView();

        #if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
        #endif

        return builder.Build();
    }
}

Executar o aplicativo

No Visual Studio, selecione Depurar>Iniciar Depuração

No Visual Studio Code, selecione Executar>Iniciar depuração. Selecione o depurador do .NET MAUI na lista suspensa para iniciar o aplicativo.

Isso cria e inicia o aplicativo no Windows e, em seguida, recria e reinicia o aplicativo sempre que você faz alterações de código. O aplicativo deve ser aberto automaticamente no Windows. Você também pode alterar o destino de implantação por meio do menu suspenso de depuração para implantar no Android ou em outras plataformas.

Captura de tela do aplicativo Blazor Hybrid padrão em execução no Windows e no Android.

Você usará este aplicativo Blazor Hybrid nos próximos exercícios.