Exercício - Criar e executar um aplicativo Blazor Hybrid

Vamos começar criando nosso primeiro aplicativo web 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 do .NET MAUI

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

• Desenvolvimento da interface do usuário do aplicativo multiplataforma .NET

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

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

Desenvolvimento com Visual Studio Code

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

Criar um novo aplicativo Blazor Hybrid

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

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

Arquivos de projeto Blazor

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

• Componentes: Esta pasta contém várias subpastas e componentes Razor para a aplicação.

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

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

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

  • Routes.razor: O componente raiz do Razor para a aplicação que configura o roteador Blazor para lidar com a navegação da página dentro da visão web.

Arquivos de projeto .NET MAUI

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

• App.xaml.cs: Code-behind do arquivo App.xaml. Esse arquivo define a classe App. Esta classe representa seu aplicativo em tempo de execução. O construtor nessa classe cria uma janela inicial e a atribui à MainPage propriedade, essa propriedade determina qual página é exibida quando o aplicativo começa a ser executado. Além disso, esta classe permite substituir manipuladores de eventos do ciclo de vida de aplicações comuns neutras em relação à plataforma. Os eventos incluem OnStart, OnResumee OnSleep.

• MainPage.xaml: Este arquivo contém a definição da interface do usuário. O aplicativo de exemplo que o template .NET MAUI Blazor App gera consiste em um BlazorWebView que carrega o componente Components.Routes na página HTML do host especificada (wwwroot/index.html) em um local determinado 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 código subjacente 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 toda a interface do usuário e eventos estão localizados nos componentes 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 Plataformas no projeto. Esse código é específico da plataforma, mas no final ele chama o CreateMauiApp método da classe estática MauiProgram. Use o CreateMauiApp método 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 UseMauiApp método genérico do objeto do construtor de aplicativos; o parâmetro type especifica a classe do 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 AddMauiBlazorWebView método:

  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 a aplicação

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 abrir 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.

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