How to Build a Backend for Blazor?

introdução neste tutorial, você aprenderá como construir um backend completo para uma aplicação blazor usando o back4app vamos percorrer a integração de recursos essenciais do back4app como gerenciamento de banco de dados, funções de código em nuvem, apis rest e graphql, autenticação de usuários e consultas em tempo real (consultas ao vivo) para criar um backend seguro, escalável e robusto que se comunica perfeitamente com seu frontend blazor aproveitar os robustos serviços de backend do back4app com blazor, um framework asp net core para construir interfaces web interativas usando c#, permite que os desenvolvedores acelerem o desenvolvimento do backend se você está construindo um aplicativo blazor server ou um aplicativo blazor webassembly, a integração perfeita com o back4app pode reduzir drasticamente o tempo de desenvolvimento, garantindo uma lógica de negócios de alta qualidade no lado do servidor ao final deste tutorial, você terá construído uma estrutura de backend segura adaptada para uma aplicação web full stack usando blazor você obterá insights sobre como lidar com operações de dados, aplicar controles de segurança e implementar funções em nuvem, tornando sua aplicação web blazor robusta e escalável pré requisitos para completar este tutorial, você precisará uma conta back4app e um novo projeto back4app começando com o back4app https //www back4app com/docs/get started/new parse app se você não tiver uma conta, pode criar uma gratuitamente siga o guia acima para preparar seu projeto ambiente básico de desenvolvimento blazor você pode configurar isso instalando o sdk net mais recente da microsoft https //dotnet microsoft com/download e criando um novo projeto blazor usando templates como dotnet new blazorserver ou dotnet new blazorwasm net sdk (versão 6 ou superior) instalado certifique se de ter o sdk net para construir e executar aplicativos blazor familiaridade com c# e conceitos de blazor documentação oficial do blazor https //docs microsoft com/en us/aspnet/core/blazor/?view=aspnetcore 6 0 se você é novo no blazor, revise a documentação oficial ou um tutorial para iniciantes antes de começar certifique se de ter esses pré requisitos antes de começar para garantir uma experiência de tutorial tranquila passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend blazor no back4app é criar um novo projeto se você ainda não criou um, siga estes passos faça login na sua conta back4app clique no botão “novo app” no seu painel do back4app dê um nome ao seu app (por exemplo, “blazor backend tutorial”) uma vez que o projeto é criado, você o verá listado no seu painel do back4app este projeto será a base para todas as configurações de backend discutidas neste tutorial conectar o sdk do parse o back4app depende da plataforma parse para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais conectar sua aplicação blazor ao back4app envolve instalar o sdk do parse para net e inicializá lo com as credenciais do seu painel do back4app recupere suas chaves parse no seu painel do back4app, navegue até a seção “configurações do app” ou “segurança & chaves” para encontrar seu id da aplicação e net key você também encontrará a url do servidor parse (geralmente no formato https //parseapi back4app com ) instale o sdk do parse no seu projeto blazor dotnet add package parse inicialize o parse na sua aplicação blazor normalmente, você configuraria a inicialização no program cs ou em uma classe de serviço dedicada program cs using parse; var builder = webapplication createbuilder(args); // inicialize o parse parseclient initialize(new parseclient configuration { applicationid = "your application id", windowskey = "your dotnet key", server = "https //parseapi back4app com" }); var app = builder build(); // resto da sua configuração esta configuração garante que sempre que você usar o parse na sua aplicação blazor, ele esteja pré configurado para se conectar à sua instância específica do back4app ao completar esta etapa, você estabeleceu uma conexão segura entre seu frontend blazor e o backend do back4app, abrindo caminho para realizar operações de banco de dados, gerenciamento de usuários e mais etapa 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app configurado e o sdk parse integrado ao seu aplicativo blazor, você pode agora começar a salvar e recuperar dados a maneira mais simples de criar um registro é usar a parseobject classe somedataservice cs using parse; using system threading tasks; public class somedataservice { public async task\<parseobject> createtodoitemasync(string title, bool iscompleted) { var todo = new parseobject("todo"); todo\["title"] = title; todo\["iscompleted"] = iscompleted; try { await todo saveasync(); console writeline("todo saved successfully " + todo objectid); return todo; } catch (exception ex) { console writeline("error saving todo " + ex message); return null; } } public async task\<ilist\<parseobject>> fetchtodosasync() { var query = new parsequery\<parseobject>("todo"); try { var results = await query findasync(); console writeline("fetched todo items " + results count); return results; } catch (exception ex) { console writeline("error fetching todos " + ex message); return null; } } } alternativamente, você pode usar os endpoints da api rest do back4app para operações design de esquema e tipos de dados por padrão, o parse permite criação de esquema dinamicamente , mas você também pode definir suas classes e tipos de dados no painel do back4app para mais controle navegue até a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas relevantes, como título (string) e iscompleted (boolean) back4app também suporta vários tipos de dados string , número , booleano , objeto , data , arquivo , ponteiro, array, relação , geopoint , e polígono você pode escolher o tipo apropriado para cada campo se preferir, você também pode deixar o parse criar automaticamente essas colunas quando você salvar um objeto pela primeira vez a partir do seu aplicativo blazor back4app oferece um agente de ia que pode ajudá lo a projetar seu modelo de dados abra o agente de ia no seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo todo no back4app com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você usar o agente de ia pode economizar tempo ao configurar sua arquitetura de dados e garantir consistência em seu aplicativo dados relacionais se você tiver dados relacionais por exemplo, um objeto categoria que aponta para vários itens todo você pode usar ponteiros ou relações no parse o processo é semelhante ao reactjs, mas usando objetos net somedataservice cs (continuação) public async task\<parseobject> createtaskforcategoryasync(string categoryobjectid, string title) { var todo = new parseobject("todo"); // crie um ponteiro para a categoria var categorypointer = parseobject createwithoutdata("category", categoryobjectid); todo\["title"] = title; todo\["category"] = categorypointer; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("erro ao criar tarefa com relação à categoria " + ex message); return null; } } ao consultar, inclua dados de ponteiro somedataservice cs (continuation) public async task\<ilist\<parseobject>> fetchtodoswithcategoryasync() { var query = new parsequery\<parseobject>("todo") include("category"); try { var todoswithcategory = await query findasync(); return todoswithcategory; } catch (exception ex) { console writeline("error fetching todos with category " + ex message); return null; } } consultas ao vivo para atualizações em tempo real em um aplicativo blazor server, considere usar a conexão signalr para consultas ao vivo embora o sdk net do parse suporte consultas ao vivo, integrá las diretamente em um aplicativo blazor pode exigir configuração adicional com signalr para comunicação em tempo real ativar consultas ao vivo no seu painel do back4app sob as configurações do servidor certifique se de que “consultas ao vivo” esteja ativado configurar cliente de consulta ao vivo no net, se necessário no entanto, para aplicativos blazor, aproveitar o signalr pode ser mais idiomático para conexões do lado do servidor devido à complexidade de configurar consultas ao vivo dentro do blazor e às potenciais limitações do sdk net do parse no blazor webassembly, pode ser necessário implementar um serviço do lado do servidor que conecte as consultas ao vivo do parse com os clientes signalr passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app o back4app leva a segurança a sério, fornecendo listas de controle de acesso (acls) e permissões de nível de classe (clps) esses recursos permitem que você restrinja quem pode ler ou escrever dados em uma base por objeto ou por classe, garantindo que apenas usuários autorizados possam modificar seus dados listas de controle de acesso (acls) uma acl é aplicada a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/gravação por exemplo somedataservice cs (acl example) public async task\<parseobject> createprivatetodoasync(string title, parseuser owneruser) { var todo = new parseobject("todo"); todo\["title"] = title; // create an acl granting read/write access only to the owner var acl = new parseacl(owneruser); acl publicreadaccess = false; acl publicwriteaccess = false; todo acl = acl; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("error saving private todo " + ex message); return null; } } quando você salva o objeto, ele tem uma acl que impede qualquer pessoa, exceto o usuário especificado, de lê lo ou modificá lo permissões em nível de classe (clps) clps governam as permissões padrão de toda a classe, como se a classe é publicamente legível ou gravável, ou se apenas certas funções podem acessá la vá para o seu painel do back4app , selecione seu aplicativo e abra a base de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões em nível de classe aba configure seus padrões, como “requer autenticação” para leitura ou gravação, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto as acls ajustam as permissões para objetos individuais um modelo de segurança robusto geralmente combina tanto clps (restrições amplas) quanto acls (restrições detalhadas por objeto) para mais informações, vá para diretrizes de segurança do aplicativo https //www back4app com/docs/security/parse security passo 4 – escrevendo e implantando funções em nuvem o cloud code é um recurso do ambiente parse server que permite executar código javascript personalizado no lado do servidor sem precisar gerenciar seus servidores ou infraestrutura ao escrever cloud code, você pode estender seu backend do back4app com lógica de negócios adicional, validações, gatilhos e integrações que são executadas de forma segura e eficiente no parse server como funciona quando você escreve cloud code, normalmente coloca suas funções javascript, gatilhos e quaisquer módulos npm necessários em um main js (ou app js ) arquivo este arquivo é então implantado no seu projeto back4app, que é executado dentro do ambiente parse server como essas funções e gatilhos são executados no servidor, você pode confiar que eles lidam com lógica confidencial, processam dados sensíveis ou fazem chamadas de api apenas no backend processos que você pode não querer expor diretamente ao cliente todo o cloud code para seu aplicativo back4app é executado dentro do parse server que é gerenciado pelo back4app, então você não precisa se preocupar com manutenção de servidor, escalabilidade ou provisionamento sempre que você atualizar e implantar seu arquivo main js, o parse server em execução é atualizado com seu código mais recente estrutura do arquivo main js um típico main js pode conter declarações de require para quaisquer módulos necessários (pacotes npm, módulos internos do node ou outros arquivos de código em nuvem) definições de funções em nuvem usando parse cloud define() gatilhos como parse cloud beforesave() , parse cloud aftersave() , etc módulos npm que você instalou (se necessário) main js // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); com a capacidade de instalar e usar módulos npm, o código em nuvem se torna incrivelmente flexível, permitindo que você integre com apis externas, realize transformações de dados ou execute lógica complexa do lado do servidor casos de uso típicos lógica de negócio por exemplo, agregar dados para análises ou realizar cálculos antes de salvar no banco de dados validações de dados garantir que certos campos estejam presentes ou que um usuário tenha as permissões corretas antes de salvar ou excluir um registro gatilhos realizar ações quando os dados mudam (por exemplo, enviar uma notificação quando um usuário atualiza seu perfil) integrações conectar com apis ou serviços de terceiros aplicação de segurança validar e sanitizar entradas para aplicar segurança antes de realizar operações sensíveis implante sua função abaixo está uma função simples de cloud code que calcula o comprimento de uma string de texto enviada do cliente main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); implantando via back4app cli https //www back4app com/docs/local development/parse cli 1 instale o cli para linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows baixe o b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe arquivo da página de lançamentos 2 configure sua chave de conta https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 implemente seu código na nuvem b4a deploy implantando através do painel no painel do seu aplicativo, vá para cloud code > functions copie/cole a função no main js editor clique em deploy chamando sua função do blazor usando o sdk net do parse somedataservice cs (calling function) public async task\<int?> gettextlengthasync(string text) { try { var result = await parsecloud callfunctionasync\<dictionary\<string, object>>("calculatetextlength", new dictionary\<string, object> { { "text", text } }); if(result != null && result containskey("length")) return convert toint32(result\["length"]); return null; } catch(exception ex) { console writeline("error calling cloud function " + ex message); return null; } } você também pode chamá la via rest ou graphql, conforme mostrado no tutorial do reactjs passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app o back4app utiliza a classe parse user como base para autenticação por padrão, o parse gerencia a hash de senhas, tokens de sessão e armazenamento seguro isso significa que você não precisa configurar fluxos de segurança complexos manualmente configurando a autenticação de usuário em uma aplicação blazor, você pode criar um novo usuário com authservice cs using parse; using system threading tasks; public class authservice { public async task signupuserasync(string username, string password, string email) { var user = new parseuser() { username = username, password = password, email = email }; try { await user signupasync(); console writeline("user signed up successfully!"); } catch (exception ex) { console writeline("error signing up user " + ex message); } } public async task loginuserasync(string username, string password) { try { var user = await parseuser loginasync(username, password); console writeline("user logged in " + user username); } catch (exception ex) { console writeline("error logging in user " + ex message); } } } gerenciamento de sessão após um login bem sucedido, o parse cria um token de sessão que é armazenado no objeto do usuário em seu aplicativo blazor, você pode acessar o usuário atualmente logado somecomponent razor cs var currentuser = parseuser currentuser; if (currentuser != null) { console writeline("currently logged in user " + currentuser username); } else { console writeline("no user is logged in"); } o parse gerencia automaticamente sessões baseadas em token em segundo plano, mas você também pode gerenciá las ou revogá las manualmente para sair authservice cs (logout) public async task logoutasync() { await parseuser logoutasync(); console writeline("user logged out"); } integração de login social back4app e parse podem se integrar com provedores populares de oauth, como google ou facebook a configuração pode variar e muitas vezes envolve configuração do lado do servidor ou pacotes adicionais consulte a documentação de login social https //www back4app com/docs/platform/sign in with apple para instruções detalhadas como os aplicativos blazor server são executados no asp net core, você pode integrar o login social usando provedores de identidade do asp net core junto com o parse para uma autenticação sem costura verificação de email e redefinição de senha para habilitar a verificação de email e a redefinição de senha navegue até as configurações de email no seu painel do back4app habilite a verificação de email para garantir que novos usuários verifiquem a propriedade de seus endereços de email configure o endereço de remetente , modelos de email e seu domínio personalizado, se desejado esses recursos melhoram a segurança da conta e a experiência do usuário, validando a propriedade do email pelos usuários e fornecendo um método seguro de recuperação de senha passo 6 – gerenciamento de armazenamento de arquivos carregando e recuperando arquivos parse inclui a parsefile classe para gerenciar o upload de arquivos, que o back4app armazena de forma segura fileservice cs using parse; using system; using system threading tasks; public class fileservice { public async task\<string> uploadimageasync(byte\[] filedata, string filename) { var parsefile = new parsefile(filename, filedata); try { await parsefile saveasync(); console writeline("file saved " + parsefile url); return parsefile url; } catch (exception ex) { console writeline("error uploading file " + ex message); return null; } } } para anexar o arquivo a um objeto fileservice cs (continued) public async task\<parseobject> createphotoobjectasync(byte\[] filedata, string filename) { var photo = new parseobject("photo"); var parsefile = new parsefile(filename, filedata); photo\["imagefile"] = parsefile; try { await photo saveasync(); return photo; } catch (exception ex) { console writeline("error creating photo object " + ex message); return null; } } recuperando a url do arquivo somecomponent razor cs var imagefile = photo get\<parsefile>("imagefile"); var imageurl = imagefile url; você pode exibir esta imageurl em seus componentes blazor definindo a como a fonte de um \<img> tag segurança de arquivos o parse server fornece configurações flexíveis para gerenciar a segurança do upload de arquivos use acls em parsefiles ou defina configurações em nível de servidor conforme necessário passo 7 – agendando tarefas com cloud jobs cloud jobs cloud jobs no back4app permitem que você agende e execute tarefas rotineiras em seu backend como limpar dados antigos ou enviar um e mail de resumo diário um cloud job típico pode parecer assim main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); implante seu cloud code com o novo job (via cli ou o painel) vá para o painel do back4app > configurações do app > configurações do servidor > tarefas em segundo plano agende o job para ser executado diariamente ou em qualquer intervalo que atenda suas necessidades os cloud jobs permitem que você automatize a manutenção em segundo plano ou outros processos periódicos sem exigir intervenção manual passo 8 – integrando webhooks webhooks permitem que seu aplicativo back4app envie solicitações http para um serviço externo sempre que certos eventos ocorrerem isso é poderoso para integrar com sistemas de terceiros, como gateways de pagamento, ferramentas de marketing por e mail ou plataformas de análise navegue até a configuração de webhooks no seu painel do back4app > mais > webhooks e clique em adicionar webhook configure um endpoint (por exemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configure gatilhos para especificar quais eventos nas suas classes do back4app ou funções de cloud code dispararão o webhook por exemplo, se você quiser notificar um canal do slack sempre que um novo todo for criado crie um aplicativo slack que aceite webhooks de entrada copie a url do webhook do slack no seu painel do back4app, defina o endpoint para essa url do slack para o evento “novo registro na classe todo ” você também pode adicionar cabeçalhos http ou payloads personalizados, se necessário você também pode definir webhooks no cloud code fazendo solicitações http personalizadas em gatilhos como beforesave, aftersave passo 9 – explorando o painel de administração do back4app o back4app admin app é uma interface de gerenciamento baseada na web projetada para usuários não técnicos realizarem operações crud e lidarem com tarefas rotineiras de dados sem escrever nenhum código ele fornece uma interface centrada em modelos , amigável ao usuário que simplifica a administração de banco de dados, gerenciamento de dados personalizados e operações em nível empresarial habilitando o app de administração habilite indo para app dashboard > mais > admin app e clicando no botão “habilitar app de administração” crie um primeiro usuário administrador (nome de usuário/senha), que gera automaticamente um novo papel (b4aadminuser) e classes (b4asetting, b4amenuitem e b4acustomfield) no esquema do seu app escolha um subdomínio para acessar a interface de administração e complete a configuração faça login usando as credenciais de administrador que você criou para acessar o novo painel do seu app de administração uma vez habilitado, o back4app admin app facilita a visualização, edição ou remoção de registros do seu banco de dados sem exigir o uso direto do parse dashboard ou código de backend conclusão ao seguir este tutorial abrangente, você criou um backend seguro para um aplicativo blazor no back4app configurou um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrou consultas em tempo real onde aplicável para atualizações imediatas de dados aplicou medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementou funções de cloud code para executar lógica de negócios personalizada no lado do servidor configurou a autenticação de usuários com suporte para verificação de e mail e redefinições de senha gerenciou uploads de arquivos e recuperação, com controles de segurança de arquivos opcionais agendou tarefas em nuvem para tarefas automatizadas em segundo plano usou webhooks para integrar com serviços externos explorou o painel de administração do back4app para gerenciamento de dados com um frontend blazor sólido e um backend robusto do back4app, você agora está bem equipado para desenvolver aplicações web ricas em recursos, escaláveis e seguras continue explorando funcionalidades mais avançadas, integre sua lógica de negócios e aproveite o poder do back4app para economizar inúmeras horas na administração de servidores e bancos de dados boa codificação! próximos passos construa um aplicativo blazor pronto para produção estendendo este backend para lidar com modelos de dados mais complexos, estratégias de cache e otimizações de desempenho integre recursos avançados como fluxos de autenticação especializados, controle de acesso baseado em funções ou apis externas confira a documentação oficial do back4app para mergulhos mais profundos em segurança avançada, ajuste de desempenho e análise de logs explore outros tutoriais sobre aplicações de chat em tempo real, painéis de iot ou serviços baseados em localização combine as técnicas aprendidas aqui com apis de terceiros para criar aplicações complexas do mundo real