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

introduzione in questa guida, imparerai come creare un'applicazione crud completa (crea, leggi, aggiorna, elimina) utilizzando marionette js questo tutorial ti mostra come impostare un'applicazione che gestisce le operazioni sui dati in modo efficiente inizieremo impostando un progetto back4app chiamato basic crud app marionettejs , che funge da potente backend per la tua applicazione dopo aver configurato il tuo progetto, progetterai uno schema di database flessibile definendo collezioni e campi—sia manualmente che con l'assistenza dell'ai agent di back4app questo approccio garantisce che il tuo backend sia ben organizzato e in grado di gestire le operazioni crud in modo affidabile successivamente, utilizzerai l'app admin di back4app—un'interfaccia drag and drop—per gestire le tue collezioni senza sforzo, permettendoti di eseguire operazioni di creazione, lettura, aggiornamento ed eliminazione con facilità infine, integrerai il tuo frontend marionette js con back4app utilizzando rest/graphql (o il parse sdk, se applicabile), assicurandoti che il tuo backend rimanga sicuro con controlli di accesso avanzati entro la fine di questo tutorial, avrai un'applicazione web pronta per la produzione che supporta le operazioni crud insieme all'autenticazione degli utenti e alla gestione sicura dei dati punti chiave crea applicazioni crud che gestiscono efficacemente i dati utilizzando un backend robusto ottieni informazioni su come creare un backend scalabile e collegarlo a un frontend marionette js impara a utilizzare un'interfaccia di gestione senza codice (back4app admin app) per semplificare le operazioni sui dati comprendi le tecniche di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione requisiti prima di iniziare, assicurati di avere quanto segue un account back4app con un nuovo progetto impostato per indicazioni, vedere iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo marionette js puoi utilizzare un boilerplate o un kit di avvio per marionette js assicurati che node js (versione 14 o superiore) sia installato una comprensione di base di javascript, marionette js e rest api fai riferimento alla documentazione di marionette js https //marionettejs com/docs/master/ per ulteriori dettagli passo 1 – impostazione del progetto creazione di un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” sulla tua dashboard nomina il tuo progetto basic crud app marionettejs e completa i prompt crea nuovo progetto dopo aver creato il progetto, apparirà sulla tua dashboard, fornendo la base per la configurazione e la gestione del backend passo 2 – progettazione del tuo schema di database creazione del tuo modello dati per questa app crud, definirai diverse collezioni ecco alcuni esempi di collezioni che potresti creare, inclusi i campi e i tipi di dati che alimenteranno il tuo database 1\ collezione articoli questa collezione contiene i dettagli per ogni articolo campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa nome dell'oggetto descrizione stringa un breve riassunto sull'oggetto creato il data timestamp per quando l'elemento è stato creato aggiornato a data timestamp per l'ultimo aggiornamento 2\ raccolta utenti questa raccolta memorizza le credenziali degli utenti e i dettagli del profilo campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico hash password stringa password crittografata per l'autenticazione dell'utente creato il data timestamp per la creazione dell'account aggiornato a data timestamp per l'ultimo aggiornamento dell'account puoi aggiungere manualmente queste collezioni nel pannello di controllo di back4app creando una nuova classe per ciascuna e definendo i rispettivi campi crea nuova classe puoi creare campi selezionando un tipo di dato, fornendo un nome, impostando valori predefiniti e contrassegnandoli come obbligatori se necessario crea colonna utilizzare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app semplifica la creazione dello schema generando collezioni e campi da un prompt descrittivo come utilizzare l'agente ai avvia l'agente ai accedilo tramite il menu della dashboard di back4app o le impostazioni del progetto descrivi il tuo modello di dati incolla un prompt dettagliato che delinea le collezioni e i campi di cui hai bisogno esamina e conferma esamina lo schema suggerito e applicalo al tuo progetto esempio di prompt 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) questo metodo fa risparmiare tempo e garantisce coerenza nel tuo schema di database passo 3 – attivazione dell'app admin e esecuzione delle operazioni crud panoramica dell'app admin l'app admin di back4app offre un'interfaccia senza codice, drag and drop per gestire i tuoi dati di backend semplifica le operazioni crud come creare, leggere, aggiornare ed eliminare record abilitare l'app admin apri il menu “altro” nella tua dashboard di back4app seleziona “admin app” poi clicca “abilita admin app ” imposta le tue credenziali di amministratore creando un utente amministratore, che configura anche ruoli predefiniti come b4aadminuser abilita admin app dopo l'attivazione, accedi all'admin app per gestire le tue collezioni dashboard admin app utilizzare l'admin app per le operazioni crud crea record usa il pulsante “aggiungi record” per inserire nuove voci in una collezione leggi/aggiorna record clicca su un record per visualizzarne o modificarne i dettagli elimina record rimuovi record obsoleti utilizzando l'opzione di eliminazione questa interfaccia intuitiva migliora l'interazione dell'utente semplificando la gestione dei dati passo 4 – collegare marionette js con back4app con il tuo backend configurato e gestito tramite l'admin app, il passo successivo è integrare il tuo frontend marionette js con back4app opzione a utilizzare il parse sdk (se applicabile) installa il parse sdk npm install parse inizializza parse nella tua applicazione marionette js crea un file di configurazione (ad esempio, app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // inserisci qui le tue credenziali back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integra parse in una vista marionette ad esempio, crea una vista per recuperare e visualizzare gli elementi // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>elementi\</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("errore durante il recupero degli elementi ", error); } }, serializedata() { return { items this items }; } }); opzione b utilizzare rest o graphql se il parse sdk non è un'opzione, puoi interagire con back4app utilizzando chiamate rest o graphql ad esempio, per recuperare elementi tramite 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(); incorpora queste chiamate api nelle tue viste o controller marionette js secondo necessità passo 5 – sicurezza del tuo backend configurazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando le acl sugli oggetti ad esempio, per creare un elemento accessibile solo al suo proprietario 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); } } impostazione dei permessi a livello di classe (clp) nel dashboard di back4app, configura i clp per ogni collezione per applicare le regole di accesso predefinite, assicurando che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – autenticazione utente creazione di account utente back4app utilizza la classe user di parse per gestire l'autenticazione nella tua app marionette js, gestisci la registrazione e il login degli utenti come mostrato di seguito // 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); } } }); un modello simile può essere seguito per il login e la gestione delle sessioni funzionalità aggiuntive come il login sociale o il ripristino della password possono essere configurate tramite il dashboard di back4app passo 7 – distribuzione del tuo frontend marionette js con web deployment la funzione di web deployment di back4app ti consente di ospitare il tuo frontend marionette js senza problemi collegando il tuo repository github 7 1 – creazione della tua versione di produzione naviga nella directory del tuo progetto in un terminale esegui il comando di build npm run build questo genera una build cartella contenente file statici ottimizzati (html, js, css, immagini) conferma la build assicurati che la build cartella includa un index html file insieme agli asset richiesti 7 2 – organizzazione e caricamento del tuo codice sorgente il tuo repository dovrebbe contenere tutto il codice sorgente per il tuo frontend marionette js un esempio di struttura dei file è basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md esempio di file di configurazione 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; esempio di file dell'applicazione 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(); impegnarsi su github inizializza un repository git (se non già fatto) git init metti in staging i tuoi file git add impegnati delle tue modifiche git commit m "impegno iniziale per il frontend di marionette js" crea un repository su github (ad esempio, basic crud app marionettejs frontend ) invia il tuo codice git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – integrare il tuo repository con il deployment web accedi al deployment web nel tuo dashboard di back4app, seleziona il tuo progetto (basic crud app marionettejs) e clicca su deployment web collegati a github segui le istruzioni per collegare il tuo account github in modo che back4app possa accedere al tuo repository seleziona repository e branch scegli il repository (ad esempio, basic crud app marionettejs frontend ) e il branch (ad esempio, main ) che contiene il tuo codice 7 4 – configurare il tuo deployment specifica impostazioni aggiuntive comando di costruzione se una build cartella pre costruita è mancante, imposta il comando di costruzione (ad es , npm run build ) back4app eseguirà questo durante il deployment directory di output indica build come la cartella contenente i tuoi file statici variabili di ambiente fornisci eventuali variabili di ambiente necessarie (come le chiavi api) nelle impostazioni di deployment 7 5 – dockerizzare la tua applicazione marionette js se preferisci docker per il deployment, containerizza la tua applicazione includendo un dockerfile nel tuo repository \# 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;"] configura il deployment web per utilizzare l'opzione docker se desiderato 7 6 – distribuire la tua applicazione clicca sul pulsante di distribuzione finalizza le impostazioni di distribuzione e clicca su distribuisci monitora la build back4app preleverà il tuo codice github, eseguirà il comando di build e distribuirà il tuo container ottieni il tuo url una volta distribuito, back4app fornirà un url dove è ospitata la tua applicazione marionette js 7 7 – verificare la tua distribuzione visita l'url fornito apri l'url di distribuzione nel tuo browser testa l'applicazione assicurati che l'applicazione si carichi correttamente e che tutte le funzionalità (route, risorse) siano operative risolvi i problemi se necessario utilizza gli strumenti per sviluppatori del browser e controlla i log di distribuzione su back4app se si verificano problemi passo 8 – conclusione e prossimi passi ben fatto! hai costruito con successo un'applicazione crud utilizzando marionette js e back4app hai impostato un progetto chiamato basic crud app marionettejs , creato collezioni di database dettagliate per articoli e utenti, e gestito i tuoi dati tramite l'app admin hai anche collegato il tuo frontend marionette js al tuo backend e implementato misure di sicurezza solide miglioramenti futuri affina il tuo frontend aggiungi funzionalità come viste dettagliate, capacità di ricerca e aggiornamenti in tempo reale espandi la funzionalità del backend considera di integrare cloud functions, api di terze parti o controlli di accesso avanzati basati su ruoli ulteriore apprendimento esplora risorse aggiuntive nella documentazione di back4app https //www back4app com/docs per ottimizzazioni e integrazioni più avanzate seguendo questo tutorial, ora possiedi le conoscenze per costruire un'applicazione crud robusta e scalabile utilizzando marionette js e back4app buon coding!