Como criar uma aplicação CRUD básica com Blazor?

visão geral este guia irá te conduzir na construção de uma aplicação crud completa (criar, ler, atualizar, deletar) usando blazor neste tutorial, você configurará um projeto back4app, projetará seu esquema de banco de dados e integrará seu frontend blazor com o back4app via apis rest este processo ajudará você a estabelecer um backend robusto enquanto garante que sua aplicação web possa gerenciar dados de forma eficiente inicialmente, você configurará um projeto back4app intitulado basic crud app blazor , que servirá como a espinha dorsal do seu sistema de gerenciamento de dados em seguida, você criará um design de banco de dados escalável estabelecendo coleções e campos detalhados, seja manualmente ou com a ajuda do agente de ia do back4app depois disso, você aproveitará o poder do back4app admin app—uma interface amigável de arrastar e soltar—para gerenciar suas coleções sem esforço finalmente, você conectará seu frontend blazor ao back4app usando apis rest e protegerá seu backend com controle de acesso adequado ao final deste tutorial, você terá uma aplicação web pronta para produção que suporta operações crud essenciais, juntamente com autenticação de usuário e atualizações de dados seguras pontos chave de aprendizado construa aplicações crud que lidam com operações de dados de forma integrada usando um backend confiável adquira insights sobre como criar um backend escalável e integrá lo com um frontend blazor utilize as capacidades de arrastar e soltar do back4app admin app para simplificar a gestão de dados aprenda técnicas de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação pré requisitos antes de começar, certifique se de que você tem uma conta back4app e um novo projeto configurado visite introdução ao back4app https //www back4app com/docs/get started/new parse app se você precisar de assistência um ambiente de desenvolvimento blazor use o visual studio ou o visual studio code com o sdk net mais recente (versão 6 ou superior) conhecimento básico de c#, blazor e apis restful confira a documentação do blazor https //docs microsoft com/en us/aspnet/core/blazor se necessário passo 1 – configuração inicial do projeto estabelecendo um novo projeto back4app faça login na sua conta back4app selecione o botão “novo app” no seu painel insira o título do projeto basic crud app blazor e siga as instruções na tela para completar o processo de criação criar novo projeto após a configuração, seu novo projeto será exibido no seu painel, fornecendo uma base sólida para configurar seu backend passo 2 – projetando o esquema do seu banco de dados criando seu modelo de dados para este aplicativo crud básico, você precisará criar várias coleções abaixo estão exemplos das coleções junto com os campos e tipos de dados necessários para configurar seu banco de dados de forma eficiente 1\ coleta de itens campo tipo de dados propósito id objectid identificador único gerado automaticamente título string o nome ou título do item descrição string um breve resumo do item criado em data a data e hora em que o item foi criado atualizado em data a data e hora em que o item foi modificado pela última vez 2\ coleção de usuários campo tipo de dados propósito id objectid identificador único gerado automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail do usuário hash da senha string senha criptografada para login seguro criado em data timestamp da criação da conta atualizado em data timestamp da última atualização da conta você pode criar essas coleções manualmente no painel do back4app, estabelecendo uma nova classe para cada coleção e adicionando as colunas necessárias criar nova classe você pode definir colunas escolhendo um tipo de dado, nomeando o campo, definindo valores padrão e determinando se o campo é obrigatório criar coluna empregando o agente de ia do back4app para criação de esquema o agente de ia do back4app simplifica a criação de esquemas diretamente do seu painel ao inserir um prompt detalhando suas coleções e campos, o agente de ia gera automaticamente o esquema de banco de dados necessário como utilizar o agente de ia acesse o agente de ia faça login no seu painel do back4app e localize o agente de ia nas configurações ou no menu principal defina seu modelo de dados cole uma descrição que liste as coleções e seus campos revise e confirme verifique o esquema sugerido e aplique o ao seu projeto prompt de exemplo create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) usar este agente de ia não apenas economiza tempo, mas também garante uma configuração de esquema consistente e eficiente passo 3 – ativando o app de admin e gerenciando operações crud introdução ao app de admin o app de admin do back4app fornece uma interface sem código, arraste e solte para gerenciar seus dados de backend esta ferramenta intuitiva permite que você execute operações crud com facilidade ativando o app admin navegue até o “mais” menu no seu painel do back4app clique em “app admin” e depois selecione “habilitar app admin ” configure suas credenciais de administrador criando um usuário administrador inicial, que também estabelecerá funções padrão e coleções do sistema habilitar app admin após habilitar, faça login no app admin para gerenciar suas coleções e dados painel do app admin executando operações crud com o app admin dentro do app admin você pode criar registros clique no botão “adicionar registro” dentro de uma coleção (por exemplo, itens) para adicionar novas entradas ler/atualizar registros clique em um registro para inspecionar seus detalhes ou modificar seus campos excluir registros remova entradas que não são mais necessárias esta interface simples, de arrastar e soltar, melhora significativamente a experiência de gerenciamento de dados passo 4 – conectando blazor com back4app agora que seu backend está configurado, é hora de integrar seu frontend blazor com o back4app usando apis rest no blazor como o sdk parse não é aplicável ao blazor, você usará apis rest para realizar operações crud em sua aplicação blazor, use o httpclient para interagir com os endpoints rest do back4app exemplo buscando itens via rest crie um serviço em seu projeto blazor para buscar itens por exemplo // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } integre chamadas de api como essa em seus componentes blazor para gerenciar operações crud passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) proteja seus dados definindo acls em seus objetos por exemplo, para criar um item privado public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para garantir que apenas usuários autorizados possam acessar ou modificar dados sensíveis passo 6 – gerenciando a autenticação de usuários configurando contas de usuário no blazor o back4app utiliza a classe user do parse para gerenciar a autenticação no seu aplicativo blazor, gerencie o registro e o login do usuário por meio de chamadas rest por exemplo // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } métodos semelhantes podem ser implementados para login e gerenciamento de sessão funcionalidades adicionais, como logins sociais, verificação de e mail e recuperação de senha, podem ser configuradas através do painel do back4app passo 7 – implantando seu frontend blazor o recurso de implantação web do back4app permite que você hospede seu aplicativo blazor de forma contínua, implantando seu código de um repositório do github 7 1 criando seu build de produção abra o diretório do seu projeto em um terminal execute o comando de publicação dotnet publish c release este comando gera uma pasta publicada com arquivos estáticos otimizados para seu aplicativo blazor verifique a compilação confirme que a pasta de saída contém os arquivos necessários (por exemplo, index html , javascript, css, etc ) 7 2 organizando e enviando seu código seu repositório git deve encapsular o código fonte completo de sua aplicação blazor uma estrutura de pasta de exemplo pode ser basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md arquivo de exemplo program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); commit e push para o github inicialize o git na sua pasta de projeto (se ainda não tiver feito) git init adicione seus arquivos git add comite suas alterações git commit m "commit inicial do código fonte do frontend blazor" crie um repositório no github nomeie como basic crud app blazor frontend envie seu repositório git remote add origin https //github com/seu usuario/basic crud app blazor frontend git git push u origin main 7 3 integrando seu repositório com implantação web acesse a opção de implantação na web no seu painel do back4app, abra seu projeto ( basic crud app blazor ) e navegue até a seção implantação na web conecte sua conta do github siga as instruções para vincular sua conta do github, permitindo que o back4app acesse seu repositório selecione o repositório e o branch escolha o repositório (por exemplo, basic crud app blazor frontend ) e o branch (por exemplo, main ) que contém seu código blazor 7 4 configuração de implantação forneça detalhes adicionais, como comando de construção se a pasta publicada não estiver pré gerada, especifique um comando como dotnet publish c release diretório de saída defina o caminho de saída (por exemplo, bin/release/net6 0/wwwroot ) variáveis de ambiente adicione quaisquer configurações de ambiente necessárias (como chaves de api) na configuração 7 5 containerizando sua aplicação blazor com docker se você preferir o docker para implantação, inclua um dockerfile em seu repositório aqui está um exemplo \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] em seguida, nas suas configurações de implantação web, selecione a opção docker para implantar sua aplicação containerizada 7 6 lançando seu aplicativo inicie a implantação clique no botão de implantar no painel do back4app monitore a compilação o back4app buscará seu código do github, executará o comando de compilação se necessário e implantará seu aplicativo em um contêiner obtenha sua url uma vez que o processo de implantação esteja completo, o back4app fornecerá uma url para seu aplicativo blazor hospedado 7 7 confirmando a implantação abra a url fornecida visite a url em um navegador para ver seu aplicativo implantado teste o aplicativo verifique se todas as páginas carregam corretamente e se as operações crud funcionam como esperado resolva problemas se necessário use as ferramentas de desenvolvedor do navegador e revise os logs de implantação no back4app para diagnosticar quaisquer problemas passo 8 – resumo e exploração adicional parabéns! você construiu com sucesso uma aplicação crud básica usando blazor e back4app você configurou um projeto intitulado basic crud app blazor , projetou coleções para itens e usuários, e utilizou o back4app admin app para gerenciamento de dados sem interrupções além disso, você integrou seu frontend blazor com o back4app usando apis rest e aplicou medidas de segurança robustas próximos passos expanda seu frontend aprimore seu aplicativo blazor com visualizações mais detalhadas, funcionalidade de busca ou notificações em tempo real adicione recursos avançados considere incorporar funções em nuvem, integrações de terceiros ou permissões baseadas em funções consulte recursos adicionais revise a documentação do back4app https //www back4app com/docs e outros tutoriais avançados para otimizar e expandir ainda mais sua aplicação seguindo este guia, você agora tem a base para construir um backend crud escalável e seguro para sua aplicação blazor usando o back4app boa codificação!