O que é Blazor geração de código? Como você pode aproveitá-lo em um clique usando App Builder low-code? Encontre as respostas neste guia passo a passo.
Zdravko Kolev
8min de leitura
Última atualização em 16 de novembro de 2022
Blazor é a resposta da Microsoft à sua enorme comunidade de desenvolvedores .NET para criar aplicativos modernos de aplicativo de página única (SPA) – assim como aplicativos escritos em estruturas como Angular e React. Antes do Blazor, a Microsoft lançou a estrutura da Web mais popular do mundo, ASP.NET Web Forms. Há muito aposentado pela Microsoft, as únicas opções para desenvolvedores .NET eram Razor Pages e ASP.NET aplicativos MVC. Embora populares, eles nunca competiram com o que o 'resto' dos desenvolvedores da Web modernos estava usando em estruturas de aplicativos de página única. Com o Blazor, a comunidade Microsoft / .NET tinha uma estrutura que lhes dava tudo o que precisavam - acesso ao .NET Framework, a capacidade de usar C #, tudo isso enquanto eliminava a necessidade de aprender JavaScript para escrever aplicativos da Web modernos.
Blazor é uma estrutura da Web de código aberto gratuita que permite aos desenvolvedores criar interfaces do usuário interativas da Web usando habilidades puras em C#, código HTML e sintaxe Razor em vez de JavaScript. O interesse nessa estrutura despertou significativamente quando, em maio de 2021, a Microsoft lançou o Blazor 3.2 e o Blazor WebAssembly, combinando o padrão SPA (Single Page Application) para escrever aplicativos que plataformas como React e Angular seguem. Com o código do cliente e do servidor escrito em C#, os usuários podem compartilhar código Blazor e bibliotecas .NET com facilidade. Além disso, só para mencionar, Blazor código é otimizado para menos clichê e é super fácil de começar.
Nosso blog apresenta 3 artigos detalhados que exploram as diferenças entre Blazor e Angular, Blazor e React e Blazor Server vs Web Assembly. Se estiver curioso, você pode verificá-los para obter mais informações.
A geração de código, e Blazor geração de código em particular, é um processo pelo qual um compilador gera automaticamente o código de trabalho de um aplicativo, reduzindo assim o tempo, os esforços e os erros resultantes da codificação manual. Esses compiladores pegam o código-fonte como entrada e o convertem em código de máquina. E no nosso caso, o gerador de código é App Builder ™.
Nota: Você pode aprender tudo sobre nossa ferramenta de desenvolvimento de aplicativos low-code WYSIWYG para Blazor (e Angular) na Visão geral do produto e tutorial App Builder abaixo.
Para aqueles que se deparam com App Builder pela primeira vez, este é um criador de aplicativos WYSIWYG abrangente de arrastar e soltar que lida com todos os processos, desde o design até a geração de código. Aqui estão alguns dos principais destaques sobre o produto:
Com o .NET 6, começamos oficialmente a oferecer suporte a App Builder com Blazor como uma opção de geração de código. Isso significa que agora você pode criar qualquer interface do usuário Blazor com um simples arrastar e soltar e obter todo o código Razor, C# e CSS pronto para produção em um clique para os seguintes componentes com suporte:
Passo 1: Inicie o App Builder
Seguindo em frente, para gerar seu código Blazor com App Builder, primeiro você precisa iniciar nossa plataforma fazendo login diretamente em seu perfil App Builder. Se você escolher a segunda opção, será redirecionado para a tela inicial a partir da qual poderá acessar cada um dos três produtos principais – Protótipos, Testes de Usabilidade, App Builder na guia Aplicativos.
Etapa 2: Iniciando seu aplicativo Blazor– Escolha entre aplicativos de amostra, layouts padrão ou designs de importação
Na tela inicial App Builder, você pode iniciar um novo aplicativo, visualizar ou editar um existente. Por meio do menu de contexto, todos os aplicativos existentes também podem ser renomeados, duplicados ou arquivados.
Há quatro maneiras de iniciar seu novo aplicativo Blazor:
Uma vez no App Builder, você pode alternar facilmente entre seus aplicativos ativos ou voltar ao seu espaço de trabalho no menu lateral do aplicativo em tempo de design sem sair da plataforma.
Etapa 3: selecione Blazor servidor WASM ou Blazor
Depois de finalizar o design do seu aplicativo Blazor e antes de visualizar seu código, preste atenção ao menu suspenso do seletor de plataforma, localizado na barra de navegação ao lado dos botões de ação Publicar no GitHub e Visualizar. Escolha a opção Blazor WASM ou Server para gerar código para Blazor. O seletor lembra sua escolha e na próxima vez que você for para App Builder você terá a estrutura desejada pré-selecionada para você.
Etapa 4: visualizar o código do Blazor
Como visualizar o código do aplicativo Blazor que será gerado? Basta ativar a visualização de código e vê-la lado a lado com o design. Ele está no modo somente leitura, mas ajudará você a revisar a qualidade do código produzido. Em seguida, clique em visualizar e você verá a visualização do código, onde você pode ver que esta é uma página do Razor. Você verá todas as definições de controle, divs e muito mais e, claro, sua tag de código Blazor, CSS para o layout de uma página específica que você está visualizando.
Etapa 5: publicar no GitHub ou salvar como um arquivo zip
Se você voltar para "editar", poderá optar por publicá-lo no GitHub ou baixá-lo como um arquivo zip.
A visualização de código permite que você veja o HTML, CSS e TS separadamente. E isso economiza tempo, poupando você do esforço de escrever marcação e CSS para criar algo que seja perfeito em pixels. Você pode conferir nossa documentação abrangente do desenvolvedor e ver App Builder para obter suporte Blazor para obter mais detalhes.
App Builder exibe um aplicativo Web em execução ao vivo na superfície de design e na janela de visualização. Isso significa que o código Blazor subjacente e o modelo de aplicativo serão atualizados em tempo real à medida que você aplicar alterações ao aplicativo na superfície de design. Você pode exibir o código do aplicativo Blazor gerado sempre que quiser na janela de visualização. Além disso, você pode baixar o aplicativo gerado a qualquer momento como um repositório completo de código do aplicativo, que pode ser aberto em um editor de código de sua escolha. Em seguida, você pode criar e executar o aplicativo que projetou usando o App Builder localmente em seu computador e pode fazer modificações adicionais no código gerado. No entanto, lembre-se de que, depois que o código do aplicativo Blazor for baixado, as alterações feitas localmente não serão refletidas no espaço do usuário App Builder.
No entanto, sabemos que muitos de vocês gostam Angular. E se esse for o seu framework, você também pode usar nosso App Builder para gerar código pronto para produção em Angular.
Depois de baixar o aplicativo, vá em frente e abra o arquivo .csproj. Uma das primeiras coisas que você notará é que estamos gerando Blazor aplicativos WebAssembly/Server. Os aplicativos WASM serão executados diretamente no navegador em um tempo de execução .NET baseado em WebAssembly. Blazor aplicativos WebAssembly funcionam de maneira semelhante às estruturas JavaScript de front-end, como Angular ou React.
Observação: o runtime do .NET é baixado com o aplicativo junto com o assembly do aplicativo e todas as dependências necessárias. Não são necessários plug-ins ou extensões de navegador.
Agora você pode simplesmente pressionar F5 e pronto. Você está executando seu aplicativo localmente. Vá em frente e adicione o que você projetou com o App Builder.
Se você quiser se manter atualizado com os últimos lançamentos e atualizações de nossos App Builder e Ignite UI for Blazor WYSIWYG ou outras estruturas importantes, fique de olho em nossas postagens no blog e filtre os artigos por tags.
A versão mais recente do App Builder trouxe melhorias empolgantes, sendo a mais esperada React Code Generation. E este guia passo a passo mostrará como gerar código React pronto para produção com apenas alguns cliques.
Este artigo explora três aplicativos de exemplo de Blazor totalmente funcionais que ajudam você a começar com facilidade. Adicione algumas personalizações e elas se tornarão suas.
Leia este guia passo a passo para saber como gerar código pronto para produção no Angular com um único clique com pouco código.
