Como construir uma aplicação CRUD com Backbone.js?

introdução neste guia, você aprenderá como criar uma aplicação crud funcional (criar, ler, atualizar, excluir) usando backbone js este tutorial ajudará você a entender as operações principais de uma aplicação web, mostrando como construir um sistema crud que manipula e gerencia dados de forma eficaz você começará configurando um projeto back4app intitulado basic crud app backbone para servir como um backend confiável para sua aplicação depois disso, você projetará um esquema de banco de dados flexível definindo coleções e campos específicos—seja manualmente ou com a ajuda do agente de ia do back4app esse processo garante que sua estrutura de dados seja adaptada para interações crud sem problemas em seguida, você usará o intuitivo back4app admin app, que possui uma interface de arrastar e soltar, para gerenciar facilmente suas coleções de dados esta ferramenta simplifica as operações crud, tornando a gestão de dados do backend direta finalmente, você conectará seu frontend backbone js ao back4app usando a api rest e o guia se baseia em chamadas de api padrão para interagir com seu backend você também aprenderá como proteger seus dados com controles de acesso robustos ao final deste tutorial, você terá construído uma aplicação web pronta para produção que suporta funcionalidades crud e inclui autenticação de usuário, além de recursos avançados de gerenciamento de dados principais conclusões domine a arte de construir aplicações crud que manipulam dados de forma eficaz usando um serviço de backend confiável descubra estratégias para criar um design de banco de dados escalável e integrá lo com um frontend backbone js aprenda a usar os recursos de arrastar e soltar do back4app admin app para simplificar as tarefas de criar, ler, atualizar e excluir familiarize se com métodos de implantação, incluindo a containerização 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 projeto ativo consulte 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 backbone js você pode incluir backbone js através de um gerenciador de pacotes como npm ou vinculando diretamente de um cdn uma compreensão básica de javascript, backbone js e apis restful confira a documentação do backbone js https //backbonejs org/#getting started para um lembrete, se necessário passo 1 – inicialização do projeto criando seu projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel nomeie seu projeto basic crud app backbone e siga as instruções para configurá lo criar novo projeto uma vez que seu projeto é criado, ele será visível no seu painel, pronto para ser configurado como seu backend para a aplicação passo 2 – elaborando o esquema do banco de dados definindo seu modelo de dados para esta aplicação crud, você irá configurar várias coleções abaixo estão coleções de exemplo com os campos e tipos que você precisa estabelecer para seu esquema, garantindo que seu app possa realizar todas as operações crud 1\ coleção de itens esta coleção conterá detalhes para cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string nome ou título do item descrição string uma breve visão geral do item criado em data timestamp indicando quando o item foi adicionado atualizado em data timestamp da atualização mais recente 2\ coleção de usuários esta coleção armazena detalhes do usuário e informações de autenticação campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único do usuário hash da senha string securely hashed password criado em data timestamp de criação da conta atualizado em data última modificação do timestamp dos dados do usuário você pode criar essas coleções manualmente através do painel do back4app, adicionando uma nova classe para cada coleção e configurando os campos correspondentes criar nova classe basta escolher um tipo de dado, definir o nome do campo, fornecer um valor padrão se necessário e marcar o campo como obrigatório criar coluna aproveitando o agente de ia do back4app para criação de esquemas o agente de ia do back4app é uma ferramenta útil dentro do seu painel que ajuda a automatizar a criação de esquemas de banco de dados ao inserir um prompt descritivo para suas coleções e campos desejados, o agente de ia pode gerar rapidamente a estrutura de banco de dados necessária, economizando seu tempo e garantindo consistência como usar o agente de ia acesse o agente de ia faça login no seu painel do back4app e localize o agente de ia na navegação ou nas configurações do projeto detalhe seu modelo de dados insira um prompt que descreva as coleções e campos que você precisa revise e implemente avalie o esquema sugerido e aplique as mudanças ao seu projeto prompt de exemplo create the following collections for 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) utilizar o agente de ia garante que seu esquema esteja devidamente estruturado para os requisitos do seu aplicativo passo 3 – ativando o app de admin e gerenciando operações crud apresentando o app de admin o app de admin do back4app é uma interface sem código que permite gerenciar eficientemente seus dados de backend seu design intuitivo de arrastar e soltar torna a execução de operações crud, como adicionar, visualizar, modificar e excluir registros, incrivelmente simples ativando o app admin abra o menu “mais” no seu painel do back4app selecione “app admin” e depois escolha “habilitar app admin ” configure suas credenciais de administrador criando a conta de administrador inicial este passo também estabelece funções (como b4aadminuser ) e coleções do sistema habilitar app admin após a ativação, faça login no app admin para gerenciar seus dados de forma contínua painel do app admin gerenciando operações crud usando o app admin dentro do app admin você pode adicionar novas entradas use a opção “adicionar registro” em qualquer coleção (por exemplo, itens) para criar novas entradas visualizar/modificar registros clique em um registro para inspecionar ou alterar seus detalhes remover registros utilize a função de exclusão para eliminar dados indesejados esta interface melhora a experiência do usuário ao simplificar todas as tarefas de gerenciamento de dados passo 4 – conectando backbone js com back4app agora que seu backend está configurado, é hora de integrar seu frontend backbone js com o back4app usando backbone js com chamadas de api rest como o sdk do parse não é adaptado para backbone js, você usará os modelos, coleções e visualizações integrados do backbone em conjunto com chamadas de api rest para interagir com o back4app configurando seus modelos e coleções backbone comece definindo um modelo para seus itens e uma coleção correspondente por exemplo // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; construindo uma visão backbone para interações crud crie uma visualização para renderizar a lista de itens e lidar com ações do usuário, como adicionar, editar e excluir // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; esta visão busca itens do back4app usando a api rest e permite que você adicione, edite e exclua registros passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) proteja seus dados configurando acls em seus objetos por exemplo, para restringir o acesso a um item apenas ao seu criador function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } configurando permissões em nível de classe (clps) dentro do seu painel do back4app, configure clps para cada coleção para garantir que apenas usuários autorizados possam acessar ou modificar dados sensíveis passo 6 – autenticação de usuário configurando contas de usuário no backbone js back4app utiliza um sistema de gerenciamento de usuários semelhante à classe user do parse para autenticação em sua aplicação backbone js, você pode gerenciar o registro e login de usuários usando chamadas ajax para a api rest do back4app por exemplo, para registrar um novo usuário function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } um método semelhante pode ser aplicado para fazer login de usuários e gerenciar sessões passo 7 – implantando seu frontend backbone js o recurso de implantação web do back4app permite que você hospede sua aplicação backbone js de forma integrada, vinculando seu repositório do github 7 1 criando uma build de produção abra o diretório do seu projeto em um terminal execute seu processo de build se você estiver usando um runner de tarefas ou bundler (como webpack ou gulp), execute o comando (por exemplo, npm run build ) para gerar ativos estáticos otimizados confirme a build certifique se de que o diretório de saída da sua build contém o arquivo html principal e todas as pastas de ativos necessárias 7 2 organizando e enviando seu código fonte seu repositório do github deve incluir todos os arquivos fonte para seu aplicativo backbone js uma estrutura típica pode ser basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md arquivo de configuração de exemplo src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); enviando para o github inicialize o git (se não feito) git init adicione seus arquivos ao estágio git add confirme suas alterações git commit m "commit inicial do código frontend backbone js" crie um repositório no github (por exemplo, basic crud app backbone ) envie seu repositório git remote add origin https //github com/seu usuario/basic crud app backbone git git push u origin main 7 3 integrando seu repositório com a implantação web do back4app acesse a seção de implantação web no seu painel do back4app, vá para o seu projeto e clique na opção implantação web vincule sua conta do github siga as instruções para autorizar o back4app a acessar seu repositório selecione seu repositório e branch escolha seu basic crud app backbone repositório e a branch principal 7 4 configuração de implantação forneça configurações adicionais comando de construção se não houver ativos pré construídos, especifique o comando (por exemplo, npm run build ) para construir seu aplicativo diretório de saída designe a pasta (por exemplo, public ou dist ) contendo seus arquivos estáticos variáveis de ambiente adicione quaisquer chaves de api ou configurações necessárias 7 5 dockerizando seu projeto backbone js se você escolher o docker para implantação, inclua um dockerfile semelhante a \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure o back4app para usar a implantação docker, se desejado 7 6 lançando seu aplicativo clique no botão de implantação uma vez que sua configuração esteja definida, clique em implantar monitore a construção o back4app buscará seu código, executará o processo de construção e implantará seu aplicativo containerizado obtenha sua url ao vivo após a implantação, uma url será fornecida onde seu aplicativo backbone js está hospedado 7 7 verificando sua implantação visite a url fornecida abra a url em seu navegador para confirmar que seu aplicativo carrega corretamente teste a funcionalidade certifique se de que a navegação, a busca de dados e as operações crud funcionem como esperado solucione problemas use ferramentas do navegador e logs do back4app para resolver quaisquer problemas passo 8 – conclusão e direções futuras ótimo trabalho! você construiu com sucesso uma aplicação crud usando backbone js e back4app você configurou um projeto chamado basic crud app backbone , definiu coleções detalhadas para itens e usuários, e gerenciou seu backend usando o admin app além disso, você integrou seu frontend backbone js por meio de chamadas de api rest e aplicou medidas de segurança essenciais próximos passos aprimorar o frontend expanda seu aplicativo backbone js com visualizações mais detalhadas, capacidades de busca e atualizações em tempo real adicionar novos recursos considere integrar lógica de backend mais avançada, apis de terceiros ou controles de acesso refinados aprendizado adicional visite a documentação do back4app https //www back4app com/docs para mais insights sobre melhorias de desempenho e integrações personalizadas ao seguir este tutorial, você agora tem a expertise para criar um backend crud robusto e escalável para sua aplicação backbone js usando o back4app aproveite a codificação e a exploração de novos recursos!