How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide

introdução neste guia, você aprenderá como criar uma aplicação crud completa (criar, ler, atualizar, excluir) usando marionette js este tutorial mostra como configurar uma aplicação que gerencia operações de dados de forma eficiente começaremos configurando um projeto back4app chamado basic crud app marionettejs , que serve como um backend poderoso para sua aplicação após configurar seu projeto, você irá projetar um esquema de banco de dados flexível definindo coleções e campos—seja manualmente ou com a ajuda do agente de ia do back4app essa abordagem garante que seu backend esteja bem organizado e capaz de lidar com operações crud de forma confiável em seguida, você usará o back4app admin app—uma interface de arrastar e soltar—para gerenciar suas coleções sem esforço, permitindo que você execute operações de criar, ler, atualizar e excluir com facilidade finalmente, você integrará seu frontend marionette js com o back4app usando rest/graphql (ou o parse sdk, se aplicável), enquanto garante que seu backend permaneça seguro com controles de acesso avançados ao final deste tutorial, você terá uma aplicação web pronta para produção que suporta operações crud juntamente com autenticação de usuários e gerenciamento seguro de dados principais conclusões crie aplicações crud que gerenciem dados de forma eficaz usando um backend robusto obtenha insights sobre como criar um backend escalável e conectá lo a um frontend marionette js aprenda a usar uma interface de gerenciamento sem código (back4app admin app) para simplificar operações de dados entenda técnicas de implantação, incluindo a containerização docker, para lançar rapidamente sua aplicação pré requisitos antes de começar, por favor, certifique se de que você tem o seguinte uma conta back4app com um novo projeto configurado para orientações, veja introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento marionette js você pode usar um boilerplate ou kit inicial para marionette js certifique se de que o node js (versão 14 ou superior) está instalado uma compreensão básica de javascript, marionette js e apis rest consulte a documentação do marionette js https //marionettejs com/docs/master/ para mais detalhes passo 1 – configuração do projeto criando um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel nomeie seu projeto basic crud app marionettejs e complete os prompts criar novo projeto após criar o projeto, ele aparecerá no seu painel, fornecendo a base para configuração e gerenciamento do backend passo 2 – projetando seu esquema de banco de dados elaborando seu modelo de dados para este aplicativo crud, você definirá várias coleções aqui estão exemplos de coleções que você pode criar, incluindo os campos e tipos de dados que alimentarão seu banco de dados 1\ coleção de itens esta coleção contém os detalhes de cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string nome do item descrição string um breve resumo sobre o item criado em data timestamp para quando o item foi criado atualizado em data timestamp da última atualização 2\ coleção de usuários esta coleção armazena credenciais de usuários e detalhes do perfil 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 hash senha string senha criptografada para autenticação de usuário criado em data timestamp para criação de conta atualizado em data carimbo de data/hora para a última atualização da conta você pode adicionar manualmente essas coleções no painel do back4app criando uma nova classe para cada uma e definindo seus respectivos campos criar nova classe você pode criar campos selecionando um tipo de dado, fornecendo um nome, definindo valores padrão e marcando os como obrigatórios, se necessário criar coluna utilizando o agente de ia do back4app para criação de esquemas o agente de ia do back4app simplifica a criação de esquemas gerando coleções e campos a partir de um prompt descritivo como usar o agente de ia inicie o agente de ia acesse o através do menu do seu painel do back4app ou nas configurações do projeto descreva seu modelo de dados cole uma descrição detalhada delineando as coleções e campos que você precisa revise e confirme examine o esquema sugerido e aplique o ao seu projeto prompt de exemplo create these 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 economiza tempo e garante consistência no esquema do seu banco de dados passo 3 – ativando o app de admin e realizando operações crud visão geral do app de admin o app de admin do back4app oferece uma interface sem código, de arrastar e soltar, para gerenciar seus dados de backend ele simplifica operações crud, como criar, ler, atualizar e excluir registros habilitando o app de admin abra o menu “mais” no seu painel do back4app selecione “admin app” e clique “ativar admin app ” configure suas credenciais de administrador criando um usuário administrador, que também configura funções padrão como b4aadminuser ativar admin app após a ativação, faça login no admin app para gerenciar suas coleções painel do admin app usando o admin app para tarefas crud criar registros use o botão “adicionar registro” para inserir novas entradas em uma coleção ler/atualizar registros clique em um registro para visualizar ou modificar seus detalhes excluir registros remova registros desatualizados usando a opção de exclusão esta interface intuitiva melhora a interação do usuário ao simplificar a gestão de dados passo 4 – conectando marionette js com back4app com seu backend configurado e gerenciado via o admin app, o próximo passo é integrar seu frontend marionette js com o back4app opção a usando o sdk parse (se aplicável) instale o sdk parse npm install parse inicialize o parse em sua aplicação marionette js crie um arquivo de configuração (por exemplo, app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // insira suas credenciais do back4app aqui parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integre o parse em uma view marionette por exemplo, crie uma view para buscar e renderizar itens // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>itens\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("erro ao buscar itens ", error); } }, serializedata() { return { items this items }; } }); opção b usando rest ou graphql se o sdk parse não for uma opção, você pode interagir com o back4app usando chamadas rest ou graphql por exemplo, para recuperar itens via rest // example rest call to retrieve 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); incorpore essas chamadas de api em suas views ou controladores do marionette js conforme necessário passo 5 – protegendo seu backend configurando listas de controle de acesso (acls) proteja seus dados configurando acls em objetos por exemplo, para criar um item acessível apenas ao seu proprietário async function createprivateitem(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 solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } configurando permissões em nível de classe (clps) no painel do back4app, configure clps para cada coleção para impor regras de acesso padrão, garantindo que apenas usuários autorizados possam acessar dados sensíveis passo 6 – autenticação de usuário criando contas de usuário o back4app utiliza a classe user do parse para gerenciar a autenticação no seu aplicativo marionette js, gerencie o registro e o login do usuário como mostrado abaixo // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); um padrão semelhante pode ser seguido para login e gerenciamento de sessão recursos adicionais, como login social ou redefinições de senha, podem ser configurados através do painel do back4app passo 7 – implantando seu frontend marionette js com implantação web o recurso de implantação web do back4app permite que você hospede seu frontend marionette js de forma integrada, vinculando seu repositório do github 7 1 – construindo sua versão de produção navegue até o diretório do seu projeto em um terminal execute o comando de construção npm run build isso gera uma build pasta contendo arquivos estáticos otimizados (html, js, css, imagens) confirme a construção certifique se de que a build pasta inclui um arquivo index html junto com os ativos necessários 7 2 – organizando e enviando seu código fonte seu repositório deve conter todo o código fonte do seu frontend marionette js um exemplo de estrutura de arquivos é basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md exemplo de arquivo de configuração app/parseconfig js // app/parseconfig 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; exemplo de arquivo de aplicação app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); comprometendo se com o github inicialize um repositório git (se ainda não feito) git init prepare seus arquivos git add confirme suas alterações git commit m "compromisso inicial para o frontend do marionette js" crie um repositório no github (por exemplo, basic crud app marionettejs frontend ) envie seu código git remote add origin https //github com/seu usuario/basic crud app marionettejs frontend git git push u origin main 7 3 – integrando seu repositório com a implantação web acessar implantação web no seu painel do back4app, selecione seu projeto (basic crud app marionettejs) e clique em implantação web conectar ao github siga as instruções para vincular sua conta do github para que o back4app possa acessar seu repositório selecionar repositório e branch escolha o repositório (por exemplo, basic crud app marionettejs frontend ) e a branch (por exemplo, main ) que contém seu código 7 4 – configurando sua implantação especifique configurações adicionais comando de construção se uma pasta de construção pré construída estiver faltando, defina o comando de construção (por exemplo, npm run build ) o back4app executará isso durante a implantação diretório de saída indique build como a pasta que contém seus arquivos estáticos variáveis de ambiente forneça quaisquer variáveis de ambiente necessárias (como chaves de api) nas configurações de implantação 7 5 – dockerizando sua aplicação marionette js se você preferir o docker para implantação, containerize sua aplicação incluindo um dockerfile em seu repositório \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure a implantação web para usar a opção docker, se desejado 7 6 – implantando seu aplicativo clique no botão de implantação finalize suas configurações de implantação e clique em implantar monitore a compilação back4app irá puxar seu código do github, executar o comando de compilação e implantar seu contêiner obtenha sua url uma vez implantado, o back4app fornecerá uma url onde seu aplicativo marionette js está hospedado 7 7 – verificando sua implantação visite a url fornecida abra a url de implantação em seu navegador teste o aplicativo certifique se de que o aplicativo carrega corretamente e que toda a funcionalidade (rotas, ativos) está operacional resolva problemas se necessário use as ferramentas de desenvolvedor do navegador e verifique os logs de implantação no back4app se ocorrerem problemas passo 8 – conclusão e próximos passos muito bem! você construiu com sucesso uma aplicação crud usando marionette js e back4app você configurou um projeto chamado basic crud app marionettejs , criou coleções de banco de dados detalhadas para itens e usuários, e gerenciou seus dados através do admin app você também conectou seu frontend marionette js ao seu backend e implementou medidas de segurança robustas melhorias futuras refine seu frontend adicione recursos como visualizações detalhadas, capacidades de busca e atualizações em tempo real expanda a funcionalidade do backend considere integrar funções em nuvem, apis de terceiros ou controles de acesso baseados em funções avançadas aprendizado adicional explore recursos adicionais na documentação do back4app https //www back4app com/docs para otimizações e integrações mais avançadas ao seguir este tutorial, você agora possui o conhecimento para construir uma aplicação crud robusta e escalável usando marionette js e back4app feliz codificação!