How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

introduzione in questa guida, imparerai come creare un'applicazione crud (crea, leggi, aggiorna, elimina) funzionale utilizzando backbone js questa guida ti aiuterà a comprendere le operazioni fondamentali di un'applicazione web mostrandoti come costruire un sistema crud che manipola e gestisce i dati in modo efficace inizierai impostando un progetto back4app intitolato basic crud app backbone per servire come backend affidabile per la tua applicazione dopo, progetterai uno schema di database flessibile definendo collezioni e campi specifici—sia manualmente che con l'assistenza dell'agente ai di back4app questo processo garantisce che la tua struttura dati sia adattata per interazioni crud senza soluzione di continuità successivamente, utilizzerai l'intuitiva app admin di back4app, che presenta un'interfaccia drag and drop, per gestire facilmente le tue collezioni di dati questo strumento semplifica le operazioni crud, rendendo la gestione dei dati del backend semplice infine, collegherai il tuo frontend backbone js a back4app utilizzando l'api rest e la guida si basa su chiamate api standard per interagire con il tuo backend imparerai anche come proteggere i tuoi dati con controlli di accesso robusti alla conclusione di questo tutorial, avrai costruito un'applicazione web pronta per la produzione che supporta le funzionalità crud e include l'autenticazione degli utenti insieme a funzionalità avanzate di gestione dei dati punti chiave padroneggia l'arte di costruire applicazioni crud che gestiscono i dati in modo efficace utilizzando un servizio backend affidabile scopri strategie per creare un design di database scalabile e integrarlo con un frontend backbone js impara a utilizzare le funzionalità di trascinamento della back4app admin app per semplificare le operazioni di creazione, lettura, aggiornamento e cancellazione familiarizzati con i metodi di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione requisiti prima di immergerti, assicurati di avere un account back4app e un progetto attivo fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app se hai bisogno di indicazioni un setup di sviluppo backbone js puoi includere backbone js tramite un gestore di pacchetti come npm o collegandoti direttamente da un cdn una comprensione di base di javascript, backbone js e api restful dai un'occhiata alla documentazione di backbone js https //backbonejs org/#getting started per un ripasso se necessario passo 1 – inizializzazione del progetto creazione del tuo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” dalla tua dashboard dai un nome al tuo progetto basic crud app backbone e segui le istruzioni per configurarlo crea nuovo progetto una volta creato il tuo progetto, sarà visibile sulla tua dashboard, pronto per essere configurato come backend per l'applicazione passo 2 – creazione dello schema del database definire il tuo modello di dati per questa applicazione crud, imposterai diverse collezioni di seguito sono riportate collezioni di esempio con i campi e i tipi necessari per stabilire il tuo schema, assicurandoti che la tua app possa eseguire tutte le operazioni crud 1\ collezione articoli questa collezione conterrà dettagli per ogni articolo campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa una breve panoramica dell'oggetto creato il data timestamp che indica quando l'elemento è stato aggiunto aggiornato a data timestamp per l'aggiornamento più recente 2\ raccolta utenti questa raccolta memorizza i dettagli degli utenti e le informazioni di autenticazione campo tipo di dati descrizione id objectid identificatore unico generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico dell'utente hash password stringa password crittografata in modo sicuro creato il data timestamp di creazione dell'account aggiornato a data ultima modifica del timestamp dei dati dell'utente puoi creare queste collezioni manualmente tramite il pannello di controllo di back4app aggiungendo una nuova classe per ogni collezione e configurando i campi corrispondenti crea nuova classe semplicemente scegli un tipo di dato, imposta il nome del campo, fornisci un valore predefinito se necessario e contrassegna il campo come obbligatorio crea colonna sfruttare l'agente ai di back4app per la creazione di schemi l'agente ai di back4app è un'utilità utile all'interno del tuo dashboard che aiuta ad automatizzare la creazione di schemi di database fornendo un prompt descrittivo per le collezioni e i campi desiderati, l'agente ai può generare rapidamente la struttura del database necessaria, risparmiando tempo e garantendo coerenza come utilizzare l'agente ai accedi all'agente ai accedi al tuo dashboard di back4app e trova l'agente ai nella navigazione o nelle impostazioni del progetto dettaglia il tuo modello di dati inserisci un prompt che delinei le collezioni e i campi di cui hai bisogno rivedi e applica valuta lo schema suggerito e applica le modifiche al tuo progetto esempio di prompt 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) utilizzare l'agente ai garantisce che il tuo schema sia strutturato correttamente per le esigenze della tua applicazione passo 3 – attivazione dell'app admin e gestione delle operazioni crud introduzione all'app admin l'app admin di back4app è un'interfaccia senza codice che ti consente di gestire in modo efficiente i tuoi dati di backend il suo design intuitivo drag and drop rende l'esecuzione delle operazioni crud come aggiungere, visualizzare, modificare e eliminare record incredibilmente semplice attivazione dell'app admin apri il menu “altro” dal tuo dashboard di back4app seleziona “app admin” e poi scegli “abilita app admin ” imposta le tue credenziali di amministratore creando l'account admin iniziale questo passaggio stabilisce anche i ruoli (come b4aadminuser ) e le collezioni di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire i tuoi dati senza problemi dashboard app admin gestire le operazioni crud utilizzando l'app admin all'interno dell'app admin puoi aggiungere nuove voci usa l'opzione “aggiungi record” in qualsiasi collezione (ad esempio, articoli) per creare nuove voci visualizzare/modificare record clicca su un record per ispezionare o modificare i suoi dettagli rimuovere record utilizza la funzione di eliminazione per rimuovere dati indesiderati questa interfaccia migliora l'esperienza dell'utente semplificando tutte le attività di gestione dei dati passo 4 – collegare backbone js con back4app ora che il tuo backend è configurato, è tempo di integrare il tuo frontend backbone js con back4app utilizzare backbone js con le chiamate api rest poiché il parse sdk non è progettato per backbone js, utilizzerai i modelli, le collezioni e le viste integrate di backbone insieme alle chiamate api rest per interagire con back4app impostare i tuoi modelli e collezioni backbone inizia definendo un modello per i tuoi elementi e una collezione corrispondente ad esempio // 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; costruire una vista backbone per interazioni crud crea una vista per visualizzare l'elenco degli elementi e gestire le azioni dell'utente come aggiungere, modificare ed eliminare // 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; questa vista recupera elementi da back4app utilizzando l'api rest e consente di aggiungere, modificare e eliminare record passo 5 – sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando le acl sui tuoi oggetti ad esempio, per limitare l'accesso a un elemento solo al suo creatore 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); } }); } configurazione delle autorizzazioni a livello di classe (clp) all'interno del tuo dashboard di back4app, imposta le clp per ogni collezione per garantire che solo gli utenti autorizzati possano accedere o modificare dati sensibili passo 6 – autenticazione utente impostazione degli account utente in backbone js back4app utilizza un sistema di gestione degli utenti simile alla classe user di parse per l'autenticazione nella tua applicazione backbone js, puoi gestire la registrazione e il login degli utenti utilizzando chiamate ajax all'api rest di back4app ad esempio, per registrare un nuovo utente 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); } }); } un metodo simile può essere applicato per il login degli utenti e la gestione delle sessioni passo 7 – distribuzione del tuo frontend backbone js la funzione di distribuzione web di back4app ti consente di ospitare la tua applicazione backbone js senza problemi collegando il tuo repository github 7 1 creazione di una build di produzione apri la directory del tuo progetto in un terminale esegui il tuo processo di build se stai utilizzando un task runner o un bundler (come webpack o gulp), esegui il comando (ad esempio, npm run build ) per generare asset statici ottimizzati conferma la build assicurati che la directory di output della tua build contenga il file html principale e tutte le cartelle di asset necessarie 7 2 organizzazione e invio del tuo codice sorgente il tuo repository github dovrebbe includere tutti i file sorgente per la tua app backbone js una struttura tipica potrebbe essere 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 file di configurazione di esempio src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); invio a github inizializza git (se non fatto) git init aggiungi i tuoi file git add esegui il commit delle tue modifiche git commit m "commit iniziale del codice frontend di backbone js" crea un repository github (ad esempio, basic crud app backbone ) invia il tuo repository git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 integrazione del tuo repository con il deployment web di back4app accedi alla sezione deployment web nel tuo dashboard di back4app, vai al tuo progetto e clicca sull'opzione deployment web collega il tuo account github segui le istruzioni per autorizzare back4app ad accedere al tuo repository seleziona il tuo repository e branch scegli il tuo basic crud app backbone repository e il branch principale 7 4 configurazione del deployment fornire impostazioni aggiuntive comando di build se non esistono asset pre costruiti, specificare il comando (ad esempio, npm run build ) per costruire la tua app directory di output designare la cartella (ad esempio, public o dist ) contenente i tuoi file statici variabili d'ambiente aggiungere eventuali chiavi api o configurazioni necessarie 7 5 dockerizzare il tuo progetto backbone js se scegli docker per il deployment, includi un dockerfile simile 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;"] configura back4app per utilizzare il deployment docker se desiderato 7 6 avviare la tua applicazione clicca sul pulsante di distribuzione una volta che la tua configurazione è impostata, premi distribuisci monitora la build back4app recupererà il tuo codice, eseguirà il processo di build e distribuirà la tua app containerizzata ottieni il tuo url live dopo la distribuzione, verrà fornito un url dove è ospitata la tua app backbone js 7 7 verificare la tua distribuzione visita l'url fornito apri l'url nel tuo browser per confermare che la tua app si carica correttamente testa la funzionalità assicurati che la navigazione, il recupero dei dati e le operazioni crud funzionino come previsto risolvi i problemi utilizza gli strumenti del browser e i log di back4app per risolvere eventuali problemi passo 8 – conclusione e direzioni future ottimo lavoro! hai costruito con successo un'applicazione crud utilizzando backbone js e back4app hai impostato un progetto chiamato basic crud app backbone , definito collezioni dettagliate per articoli e utenti, e gestito il tuo backend utilizzando l'admin app inoltre, hai integrato il tuo frontend backbone js tramite chiamate api rest e applicato misure di sicurezza essenziali prossimi passi migliora il frontend espandi la tua app backbone js con viste più dettagliate, capacità di ricerca e aggiornamenti in tempo reale aggiungi nuove funzionalità considera di integrare logiche backend più avanzate, api di terze parti o controlli di accesso raffinati ulteriore apprendimento visita la documentazione di back4app https //www back4app com/docs per ulteriori informazioni su miglioramenti delle prestazioni e integrazioni personalizzate seguendo questo tutorial, ora hai le competenze per creare un robusto e scalabile backend crud per la tua applicazione backbone js utilizzando back4app buon coding e buona esplorazione di nuove funzionalità!