How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

visão geral neste guia, você aprenderá como criar uma aplicação crud simples (criar, ler, atualizar, excluir) usando o framework aurelia este tutorial explica como construir uma aplicação capaz de lidar com operações essenciais de dados, integrando o aurelia com o back4app como seu serviço de backend inicialmente, você configurará um projeto back4app intitulado basic crud app aurelia para servir como seu robusto sistema de gerenciamento de dados em seguida, você esboçará uma estrutura de banco de dados escalável, definindo manualmente coleções e campos—ou utilizando o agente de ia do back4app—para garantir operações de dados confiáveis subsequentemente, você aproveitará o back4app admin app, que oferece uma interface de arrastar e soltar para gerenciar seus dados sem esforço finalmente, você conectará seu frontend aurelia com o back4app usando chamadas rest/graphql (ou o parse sdk onde aplicável) e protegerá seu backend com controle de acesso detalhado ao final deste tutorial, você terá uma aplicação web pronta para produção com funcionalidade crud completa, autenticação de usuário e manuseio seguro de dados principais insights domine a construção de aplicações crud com um serviço de backend confiável adquira habilidades práticas para projetar um backend escalável e conectá lo a um frontend aurelia explore uma interface administrativa sem código (back4app admin app) para operações de dados sem interrupções aprenda como implantar sua aplicação usando técnicas modernas, incluindo containerização pré requisitos antes de começar, certifique se de ter o seguinte uma conta back4app com um projeto ativo visite introdução ao back4app https //www back4app com/docs/get started/new parse app se você precisar de orientação uma configuração de desenvolvimento aurelia use o cli do aurelia ou uma ferramenta similar; certifique se de ter o node js (versão 14 ou posterior) instalado proficiência básica em javascript, aurelia e apis rest consulte a documentação do aurelia https //aurelia io/docs para mais detalhes, se necessário passo 1 – configurando seu projeto criando um novo projeto back4app faça login na sua conta back4app pressione o botão “novo app” no seu painel digite o nome do projeto basic crud app aurelia e complete as etapas de configuração criar novo projeto após a criação, seu projeto será visível no seu painel, pronto para configuração de backend e gerenciamento de dados passo 2 – projetando o esquema do seu banco de dados elaborando o modelo de dados para este aplicativo crud, você definirá várias coleções abaixo estão exemplos das coleções necessárias, juntamente com os campos e tipos de dados necessários para suportar operações crud de forma eficaz 1\ coleção de itens campo tipo de dados detalhes id objectid chave primária gerada automaticamente título string nome ou título do item descrição string uma breve descrição do item criado em data timestamp quando o item foi criado atualizado em data timestamp quando o item foi modificado pela última vez 2\ coleção de usuários campo tipo de dados detalhes id objectid chave primária gerada automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail exclusivo para validação da conta hash da senha string senha criptografada para autenticação do usuário criado em data timestamp de 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, adicionando uma nova classe para cada uma e definindo as colunas necessárias criar nova classe configure facilmente os campos do seu banco de dados escolhendo o tipo de dado correto, especificando os nomes dos campos, definindo valores padrão e indicando 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 geração de esquemas permitindo que você descreva seu modelo de dados através de prompts esta ferramenta cria automaticamente coleções e campos com base em seus requisitos passos para usar o agente de ia inicie o agente de ia abra seu painel do back4app e localize o agente de ia nas configurações do projeto descreva seu esquema insira um prompt detalhado que descreva as coleções e campos que você precisa revise e confirme examine as sugestões de esquema geradas e aplique as 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) este método acelera o processo de criação de esquemas e garante uma estrutura consistente para sua aplicação passo 3 – ativando a interface de administração & funcionalidade crud explorando a interface de administração o app de administração do back4app é uma solução robusta, sem código, que permite gerenciar seus dados de backend através de uma interface amigável de arrastar e soltar esta ferramenta simplifica a execução de operações crud ativando o app de administração abra o menu “mais” no seu painel do back4app selecione “admin app” e então clique “ativar admin app ” configure suas credenciais de administrador criando sua conta de administrador inicial, que também estabelece funções padrão (como b4aadminuser ) e coleções do sistema ativar admin app após ativar, faça login no admin app para começar a gerenciar seus dados painel do admin app executando operações crud com o admin app dentro desta interface você pode criar entradas use a opção “adicionar registro” em uma coleção (por exemplo, itens) para adicionar novos dados visualizar/modificar entradas clique em qualquer registro para inspecionar seus detalhes ou fazer alterações remover entradas selecione a opção de excluir para eliminar dados que não são mais necessários esta interface simplifica suas operações de dados, melhorando a experiência do usuário com seu design intuitivo passo 4 – conectando aurelia com back4app com seu backend configurado e gerenciado via o admin app, é hora de conectar seu frontend aurelia ao back4app utilizando rest ou graphql você pode usar apis rest ou graphql por exemplo, para buscar itens via rest // example rest request to get items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integre essas chamadas de api dentro dos seus componentes aurelia conforme necessário passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) aumente a segurança atribuindo acls aos seus objetos de dados por exemplo, para criar um item privado async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para impor regras de segurança padrão, garantindo que apenas usuários autenticados ou autorizados possam acessar informações sensíveis passo 6 – gerenciando a autenticação de usuários configurando contas de usuário o back4app usa a classe user do parse para gerenciar a autenticação no seu aplicativo aurelia, você pode gerenciar o registro e o login de usuários, conforme ilustrado abaixo // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } um padrão semelhante pode ser implementado para login e gerenciamento de sessão funcionalidades adicionais, como integração de login social, verificação de e mail e redefinição de senha, podem ser configuradas através do painel do back4app passo 7 – implantando seu frontend aurelia via implantação web o recurso de implantação web do back4app permite que você hospede sua aplicação aurelia de forma eficiente, implantando o código de um repositório do github nesta seção, você irá preparar sua build de produção, commitar seu código no github, conectar seu repositório com a implantação web e implantar seu site 7 1 crie sua build de produção abra o diretório do seu projeto no terminal execute o comando de build au build env production este comando gera uma dist pasta contendo seus ativos estáticos otimizados confirme a build certifique se de que a dist pasta inclui um index html e os subdiretórios necessários para javascript, css e imagens 7 2 organize e faça o upload do código do seu projeto seu repositório do github deve abrigar todos os arquivos fonte para seu frontend aurelia uma estrutura de exemplo pode ser basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md arquivos de exemplo src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } comprometendo seu código no github inicialize o git na pasta do seu projeto (se ainda não tiver feito) git init prepare seus arquivos git add confirme suas alterações git commit m "compromisso inicial do código fonte do frontend aurelia" crie um repositório no github (por exemplo, basic crud app aurelia frontend ) envie seu código para o github git remote add origin https //github com/seu nome de usuario/basic crud app aurelia frontend git git push u origin main 7 3 vinculando seu repositório do github com a implantação na web acesse a implantação na web faça login no seu painel do back4app, navegue até seu projeto (basic crud app aurelia) e selecione a opção implantação na web conecte se ao github siga as instruções para integrar sua conta do github, concedendo ao back4app acesso ao seu repositório escolha seu repositório e branch selecione o repositório (por exemplo, basic crud app aurelia frontend ) e a branch (por exemplo, main ) que contém seu código 7 4 configuração de implantação defina os seguintes detalhes de configuração comando de construção se a dist pasta não estiver pré construída, especifique um comando (por exemplo, au build env production ) para o back4app executar diretório de saída defina isso como dist para que o back4app saiba onde seus arquivos estáticos estão localizados variáveis de ambiente adicione quaisquer variáveis de ambiente necessárias (como chaves de api) nas configurações de configuração 7 5 containerizando sua aplicação aurelia (docker) se você preferir a implantação com docker, inclua um dockerfile em seu repositório semelhante ao seguinte \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure a opção de implantação do docker na implantação web de acordo 7 6 implantando seu aplicativo pressione o botão de implantação após configurar a implantação, clique em implantar monitore o processo de construção back4app buscará seu código do github, executará o comando de construção se necessário, e implantará seu aplicativo em um contêiner recupere sua url uma vez que a implantação esteja completa, o back4app fornecerá a url onde seu aplicativo aurelia está hospedado 7 7 verificando sua implantação abra a url fornecida visite a url em seu navegador para ver seu site ao vivo teste o aplicativo certifique se de que seu aplicativo carrega corretamente, as rotas funcionam como esperado, e todos os ativos (css, javascript, imagens) estão disponíveis resolva problemas se necessário use as ferramentas de desenvolvedor do navegador para diagnosticar quaisquer problemas e revise os logs de implantação do back4app se necessário passo 8 – conclusão e direções futuras parabéns! você construiu com sucesso uma aplicação crud completa usando aurelia e back4app você configurou um projeto chamado basic crud app aurelia , definiu esquemas de banco de dados abrangentes para itens e usuários, e gerenciou seus dados usando o back4app admin app você também integrou seu frontend aurelia com o backend e implementou medidas de segurança robustas próximos passos aprimore sua ui expanda sua aplicação aurelia com visualizações detalhadas, funcionalidades de busca e atualizações de dados em tempo real adicione recursos avançados considere incorporar funções em nuvem, apis de terceiros ou permissões baseadas em funções explore mais confira a documentação do back4app https //www back4app com/docs e recursos adicionais do aurelia para orientações mais detalhadas sobre otimização e personalização feliz codificação e boa sorte em sua jornada de desenvolvimento!