Pular para o conteúdo principal

Aplicação Blazor Server

O projeto WMS.AI.Blazor é a interface principal do WMS, desenvolvida em Blazor Server.
Ele fornece a camada de apresentação e interação com o usuário, consumindo os serviços e APIs fornecidos pelas demais camadas do sistema.

informação

A aplicação segue uma arquitetura modular, garantindo isolamento de responsabilidades e facilidade de evolução.

observação

Por se tratar de Blazor Server e termos renderização do lado do servidor (SSR), fazemos referência direta à camada de aplicação ao invés de realizar chamadas HTTP para uma API.

Estrutura de Pastas​

  • Pages
    • Modules → cada módulo representa um subdomínio ou funcionalidade específica do sistema.
      Dentro de cada módulo podem existir:
      • Services → lógica de orquestração de UI ou chamadas à API.
      • Models → estruturas de dados específicas da interface.
      • Contexts → providers ou contextos locais usados na renderização.
      • Pages → páginas Razor vinculadas ao módulo.
      • Components → componentes reutilizáveis do módulo.
    • Shared → componentes e páginas compartilhados entre múltiplos módulos.
  • Services → Serviços globais da aplicação, como:
    • LayoutService → gerencia estado/layout da aplicação.
    • NotificationService → exibe mensagens e alertas.
    • SidebarMenuService → controla itens do menu lateral.
    • SignInService → autenticação de usuários.
    • UserClaimsService → acesso às claims do usuário autenticado.
  • Settings → Arquivos de configuração (appsettings.json, appsettings.Development.json).
  • wwwroot → Recursos estáticos (CSS, JS, imagens).
  • Dockerfile → Definições para build e deploy em container.

Modularidade​

Cada módulo Blazor funciona como uma "mini aplicação" isolada dentro do sistema.
Isso garante:

  • Organização → funcionalidades agrupadas por contexto de negócio.
  • Escalabilidade → novos módulos podem ser adicionados sem alterar módulos existentes.
  • Reuso → componentes e serviços podem ser compartilhados quando necessário.

Exemplo de Página​

@page "/produtos"
@inject IProdutoService IProdutoService

<h3>Lista de Produtos</h3>

<ul>
    @foreach (var produto in Produtos)
    {
        <li>@produto.Nome</li>
    }
</ul>

@code {
    private List<ProdutoModel> Produtos = new();

    protected override async Task OnInitializedAsync()
    {
        Produtos = await IProdutoService.ListarAsync();
    }
}

Neste exemplo:

  • A página Produtos consome um service (IProdutoService) para buscar dados.
  • O modelo (ProdutoModel) abstrai a estrutura exibida no front.
  • A lógica de negócio permanece no Core/Domain, consumida via camadas de aplicação.

Boas Práticas Adotadas​

  • Separação clara entre UI, serviços de aplicação e domínio.
  • Estrutura modular em Pages/Modules.
  • Uso de serviços globais para funcionalidades transversais (layout, autenticação, notificações).
  • Configuração simplificada via Settings.
  • Preparação para deploy em containers via Dockerfile.