How to Build a Basic CRUD App with Angular?

introdução neste guia, vamos orientá lo pelo processo de construção de uma aplicação crud básica (criar, ler, atualizar, excluir) usando angular você aprenderá a desenvolver uma aplicação que gerencia operações de dados de forma eficiente, aproveitando o robusto framework do angular para começar, você criará e configurará um novo projeto back4app intitulado basic crud app angular , que servirá como a espinha dorsal da sua gestão de dados no backend em seguida, você projetará um modelo de banco de dados escalável, delineando coleções e campos detalhados—seja manualmente ou com a ajuda do agente de ia do back4app esta etapa garante que seu sistema esteja bem preparado para lidar com todas as funcionalidades crud após configurar seu esquema, você explorará o back4app admin app, uma interface intuitiva de arrastar e soltar, para gerenciar facilmente suas coleções e registros finalmente, você integrará seu frontend angular com o back4app usando rest/graphql (ou o parse sdk, se preferir), enquanto também implementa medidas de segurança avançadas para proteger seu backend ao final deste tutorial, você terá construído uma aplicação angular pronta para produção, com autenticação de usuário e capacidades crud abrangentes principais conclusões domine como construir aplicações crud que manipulam dados de forma eficiente com um backend confiável obtenha insights práticos sobre como criar um modelo de dados escalável e vinculá lo a um frontend angular aprenda a utilizar a interface amigável do back4app admin app para gerenciamento de dados sem esforço entenda as estratégias de implantação, incluindo a containerização com docker, para lançar rapidamente seu aplicativo angular pré requisitos antes de começar, por favor, certifique se de que você tem o seguinte uma conta back4app com um novo projeto configurado precisa de ajuda? confira introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento angular instale o angular cli executando npm install g @angular/cli e crie um novo projeto usando ng new certifique se de que o node js (versão 14 ou superior) está instalado uma compreensão básica de typescript, angular e rest apis para uma atualização, visite a documentação do angular https //angular io/docs passo 1 – configurando seu projeto lançando um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel digite o nome do projeto basic crud app angular e siga os prompts de configuração criar novo projeto uma vez que o projeto é criado, ele aparecerá no seu painel back4app, fornecendo uma base sólida para a configuração do seu backend passo 2 – elaborando o seu esquema de banco de dados construindo seu modelo de dados para este aplicativo crud, você definirá várias coleções abaixo estão exemplos das coleções e seus campos que formarão a base do seu esquema de banco de dados essas coleções capacitam o aplicativo a realizar operações crud essenciais 1 coleta de itens esta coleção armazena informações para cada item campo tipo de dados detalhes id objectid identificador único gerado automaticamente título string o título do item descrição string um breve resumo do item criado em data timestamp para quando o item foi adicionado atualizado em data timestamp da última atualização 2 coleção de usuários esta coleção mantém credenciais de usuário e dados de autenticação campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string um identificador único para o usuário email string um endereço de e mail distinto hash de senha string senha hashada de forma segura para autenticação criado em data timestamp indicando quando a conta foi criada atualizado em data timestamp da atualização mais recente você pode configurar essas coleções manualmente no painel do back4app criando uma nova classe para cada uma e adicionando colunas para definir os campos criar nova classe adicione colunas escolhendo um tipo de dado, nomeando o campo, definindo um valor padrão e marcando se é obrigatório criar coluna aproveitando o agente de ia do back4app para configuração de esquema o agente de ia do back4app é uma ferramenta versátil disponível no seu painel que permite gerar automaticamente o esquema do seu banco de dados com base em um prompt descritivo este recurso economiza tempo e garante que seu backend esteja perfeitamente adaptado para operações crud passos para usar o agente de ia abra o agente de ia faça login no seu painel do back4app e encontre a opção do agente de ia descreva seu esquema insira um prompt detalhado descrevendo as coleções e campos que você precisa revise e confirme após a submissão, revise o esquema gerado 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 primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) essa abordagem impulsionada por ia simplifica o processo e garante um esquema consistente e otimizado passo 3 – ativando o app de admin e gerenciando operações crud um vislumbre do app de admin o app de admin do back4app fornece uma interface sem código, arraste e solte, que permite gerenciar seus dados de backend sem esforço com isso, você pode facilmente realizar operações crud, como adicionar, visualizar, modificar e excluir registros ativando o app admin navegue até o menu “mais” no seu painel do back4app selecione “app admin” e clique “ativar app admin ” configure suas credenciais de administrador crie seu usuário administrador inicial, que também configurará funções (por exemplo, b4aadminuser ) e coleções do sistema ativar app admin após a ativação, faça login no app admin para gerenciar suas coleções e registros painel do app admin utilizando o app admin para tarefas crud dentro do app admin, você pode adicionar novos registros clique em “adicionar registro” em qualquer coleção (por exemplo, itens) para criar novas entradas visualizar e editar registros selecione um registro para ver seus detalhes ou atualizar seus campos remover registros use a opção de excluir para remover registros desatualizados esta interface intuitiva simplifica muito a gestão dos seus dados de backend passo 4 – conectando seu frontend angular ao back4app agora que seu backend está totalmente configurado e gerenciado através do app admin, é hora de vincular seu frontend angular ao back4app opção a integrando o sdk parse com angular instale o sdk do parse npm install parse configure o parse no seu projeto angular crie um arquivo de configuração (por exemplo, src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // substitua pelas suas credenciais reais do back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } e no template html ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} opção b utilizando rest ou graphql se você preferir não usar o parse sdk, pode executar operações crud via rest ou graphql por exemplo, para buscar itens usando rest no angular, crie um método de serviço como este // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } você pode integrar essas chamadas de api dentro dos seus componentes angular conforme necessário passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) aumente a segurança dos seus dados atribuindo acls aos seus objetos por exemplo, para criar um item acessível apenas pelo seu proprietário async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access 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 creating item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para definir regras de acesso padrão, garantindo que apenas usuários autenticados ou autorizados possam acessar dados sensíveis passo 6 – gerenciando a autenticação de usuários criando e gerenciando contas de usuário o back4app utiliza a classe user do parse para gerenciar a autenticação no seu projeto angular, você pode gerenciar o registro e login de usuários da seguinte forma // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event 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('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } e o correspondente template html ( auth component html ) register register register register uma abordagem semelhante pode ser aplicada para login de usuário e gerenciamento de sessão para recursos como logins sociais ou redefinições de senha, ajuste suas configurações no painel do back4app passo 7 – implantando seu frontend angular o recurso de implantação web do back4app permite que você hospede sua aplicação angular implantando o código diretamente de um repositório do github nesta seção, você preparará sua build de produção, fará o commit do seu código fonte e integrará seu repositório para implantação 7 1 construindo sua versão de produção abra o diretório do seu projeto em um terminal execute o comando de build de produção ng build prod este comando compila sua aplicação angular em uma pasta dist/ otimizada verifique a build certifique se de que o diretório dist/ contém o index html e todos os ativos necessários 7 2 estruturando e enviando seu código fonte seu repositório deve conter todo o seu projeto angular uma estrutura de arquivos típica pode ser assim basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md exemplo src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemplo src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } comitando seu código no github inicialize um repositório git na sua pasta de projeto, se ainda não o fez git init adicione seus arquivos de projeto git add comite suas alterações git commit m "commit inicial para o frontend angular" crie um repositório no github por exemplo, nomeie o como basic crud app angular envie seu código para o github git remote add origin https //github com/seu usuario/basic crud app angular git git push u origin main 7 3 vinculando seu repositório do github com a implantação na web acesse o recurso de implantação na web faça login no seu painel do back4app, selecione seu projeto ( basic crud app angular ), e escolha implantação na web conecte sua conta do github siga as instruções para integrar sua conta do github, permitindo que o back4app acesse seu repositório selecione seu repositório e branch escolha seu repositório (por exemplo, basic crud app angular ) e o branch (por exemplo, main ) que contém seu código 7 4 configurando suas configurações de implantação forneça os detalhes de configuração necessários comando de construção se seu repositório não tiver uma pasta pré construída dist/ , especifique o comando de construção (por exemplo, ng build prod ) diretório de saída defina o diretório de saída como dist/your project name 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) na configuração de implantação 7 5 containerizando sua aplicação angular com docker se você preferir uma implantação baseada em docker, inclua um dockerfile em seu repositório por exemplo # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] inclua este dockerfile no seu repositório, então selecione a opção de implantação docker nas configurações de implantação web do back4app 7 6 lançando seu aplicativo clique no botão de implantação uma vez que suas configurações de implantação estejam configuradas, clique em implantar monitore o processo de implantação o back4app irá puxar seu código, executar o comando de build se necessário, e implantar seu aplicativo angular recupere sua url após uma implantação bem sucedida, o back4app fornecerá uma url onde seu aplicativo está ao vivo 7 7 testando seu aplicativo implantado visite a url fornecida abra a url no seu navegador verifique a funcionalidade certifique se de que seu aplicativo angular carrega corretamente, todas as rotas funcionam como esperado e os ativos são servidos corretamente resolva problemas se necessário use as ferramentas de desenvolvedor do navegador para identificar e resolver quaisquer problemas verifique os logs de implantação do back4app e sua configuração se surgirem problemas passo 8 – conclusão e direções futuras parabéns! você construiu com sucesso uma aplicação crud básica usando angular e back4app você configurou um projeto chamado basic crud app angular , projetou coleções de banco de dados abrangentes para itens e usuários, e gerenciou seus dados usando o intuitivo admin app além disso, você conectou seu frontend angular ao seu backend e implementou medidas de segurança robustas próximos passos aprimore seu frontend amplie sua aplicação angular com recursos avançados, como visualizações detalhadas de itens, funcionalidade de busca e atualizações em tempo real expanda a funcionalidade considere integrar lógica adicional de backend (como funções em nuvem) ou implementar controle de acesso baseado em funções explore mais recursos confira a documentação do back4app https //www back4app com/docs e outros recursos do angular para aprofundar seu entendimento com este guia, você agora está equipado para construir backends crud robustos e escaláveis para suas aplicações angular usando o back4app boa codificação!