Come costruire un'app CRUD di base con Knockout.js: Una guida passo passo

panoramica in questa guida, imparerai come creare un'applicazione crud (crea, leggi, aggiorna, elimina) completa utilizzando knockout js questo tutorial dimostra come implementare operazioni essenziali all'interno di un'app web sfruttando back4app come servizio backend inizieremo impostando un progetto back4app intitolato basic crud app knockout , stabilendo un sistema di gestione dei dati affidabile per la tua applicazione dopo, progetterai uno schema di database flessibile definendo collezioni e campi—sia manualmente che con l'assistenza dell'agente ai di back4app—per garantire che la tua app possa gestire efficacemente tutte le operazioni crud successivamente, utilizzerai l'app admin di back4app, uno strumento intuitivo di trascinamento, per gestire le tue collezioni con facilità questa interfaccia semplifica il processo di esecuzione delle operazioni crud infine, integrerai il tuo frontend knockout js con back4app utilizzando chiamate api rest questa integrazione coprirà anche pratiche di backend sicure con controlli di accesso appropriati entro la fine di questo tutorial, avrai costruito un'app web pronta per la produzione che supporta le funzionalità crud di base, include l'autenticazione degli utenti e presenta una gestione dei dati robusta punti chiave comprendere come sviluppare applicazioni crud che gestiscono i dati in modo efficiente utilizzando back4app acquisire esperienza pratica nella progettazione di un backend scalabile e nel collegarlo a un frontend knockout js imparare a utilizzare uno strumento di amministrazione senza codice (back4app admin app) per eseguire operazioni di creazione, lettura, aggiornamento e cancellazione scoprire strategie di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua app web requisiti preliminari prima di iniziare, 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 guida un ambiente di sviluppo configurato per knockout js includi librerie tramite cdn o installa tramite npm se preferisci una configurazione modulare conoscenze di base di javascript, knockout js e rest api consulta la documentazione di knockout js https //knockoutjs com/documentation/introduction html per un'introduzione passo 1 – inizializzazione del progetto impostare il tuo progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” dalla tua dashboard inserisci il nome del progetto basic crud app knockout e completa il processo di configurazione crea nuovo progetto una volta creato, il tuo progetto sarà visibile sulla tua dashboard, formando la spina dorsale per la configurazione del tuo backend passo 2 – creazione del tuo schema di database progettazione della struttura dei dati per questa app crud, creerai diverse collezioni di seguito sono riportate collezioni di esempio con campi e tipi di dati suggeriti per guidare la progettazione del tuo database questo schema supporta le operazioni crud fondamentali 1 collezione degli elementi campo tipo di dato dettagli id objectid chiave unica generata automaticamente titolo stringa il titolo dell'oggetto descrizione stringa un breve riassunto dell'elemento creato il data timestamp quando l'elemento è creato aggiornato a data timestamp dell'ultimo aggiornamento 2 raccolta utenti campo tipo di dato dettagli id objectid identificatore unico generato automaticamente nome utente stringa identificatore unico per ogni utente email stringa indirizzo email unico dell'utente hash password stringa hash sicuro della password dell'utente creato il data timestamp di creazione dell'account aggiornato a data timestamp per l'ultimo aggiornamento dell'account puoi creare manualmente queste collezioni nel dashboard di back4app aggiungendo una nuova classe per ogni collezione e definendo i campi crea nuova classe definisci i tuoi campi scegliendo un tipo di dato, nominando il campo, impostando valori predefiniti e contrassegnando i campi obbligatori crea colonna utilizzare l'agente ai di back4app per l'automazione dello schema l'agente ai di back4app semplifica la generazione dello schema direttamente dal tuo dashboard può creare automaticamente collezioni e campi in base alla tua descrizione passaggi per utilizzare l'agente ai avvia l'agente ai accedilo tramite il tuo dashboard di back4app o le impostazioni del progetto dettaglia il tuo modello dati incolla un prompt descrittivo che elenchi le collezioni e i campi richiesti rivedi e applica l'agente proporrà uno schema rivedi e conferma le proposte per integrarle nel tuo progetto esempio di prompt create the following 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 processo fa risparmiare tempo e garantisce uno schema coerente e ottimizzato per la tua applicazione passo 3 – attivazione dell'app admin e gestione delle operazioni crud panoramica dell'interfaccia di amministrazione l'app admin di back4app offre una soluzione senza codice per gestire i tuoi dati di backend la sua interfaccia intuitiva drag and drop consente operazioni crud senza sforzo come attivare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca su “abilita app admin ” imposta le tue credenziali di amministratore creando il primo utente amministratore, che configura anche ruoli come b4aadminuser e collezioni di sistema essenziali abilita app admin dopo l'attivazione, accedi all'app admin per iniziare la gestione dei dati dashboard app admin utilizzare l'interfaccia di amministrazione per crud all'interno dell'app admin puoi aggiungere record clicca sul pulsante “aggiungi record” in una collezione (ad esempio, articoli) per creare nuove voci visualizzare/modificare record seleziona un record per ispezionare i suoi dettagli o aggiornare i campi rimuovere record elimina qualsiasi voce che non è più necessaria questa interfaccia semplificata migliora l'usabilità e accelera la gestione dei tuoi dati passo 4 – collegare knockout js con back4app con il tuo backend in posizione, è tempo di integrare il tuo frontend knockout js utilizzando chiamate api rest utilizzare l'api rest per le operazioni crud poiché il parse sdk non è tipicamente utilizzato con knockout js, eseguirai chiamate api direttamente di seguito sono riportati esempi di come gestire i compiti crud esempio di recupero degli elementi // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); esempio di viewmodel knockout js di seguito è riportato un esempio di viewmodel per gestire i tuoi elementi function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); questo viewmodel integra chiamate api per creare ed eliminare elementi mentre gestisce lo stato con gli observable di knockout js passo 5 – sicurezza del tuo backend liste di controllo degli accessi (acl) proteggi i tuoi dati assegnando acl a ciascun oggetto ad esempio, per rendere un elemento accessibile solo al suo creatore function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } permessi a livello di classe (clp) all'interno del dashboard di back4app, imposta i clp per ogni collezione per garantire che solo gli utenti autenticati o autorizzati possano accedere a informazioni sensibili passo 6 – implementazione dell'autenticazione utente configurazione degli account utente back4app utilizza una classe utente per gestire l'autenticazione nella tua app knockout js, gestisci la registrazione e il login degli utenti utilizzando chiamate api rest esempio registrazione utente function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } un approccio simile può essere seguito per il login degli utenti e la gestione delle sessioni funzionalità aggiuntive come la verifica dell'email e il ripristino della password possono essere configurate tramite back4app passo 7 – distribuzione del tuo frontend knockout js utilizzando la distribuzione web la funzionalità di distribuzione web di back4app ti consente di ospitare il tuo frontend knockout js senza sforzo collegando il tuo repository github segui questi passaggi 7 1 crea i tuoi file di produzione apri la directory del tuo progetto in un terminale esegui il tuo processo di build se stai usando uno strumento di build come webpack, esegui il comando appropriato (ad esempio, npm run build ) per compilare le tue risorse conferma la build assicurati che la tua cartella di build contenga un index html e tutte le risorse statiche necessarie 7 2 organizza e commetti il tuo codice su github il tuo repository dovrebbe includere tutti i file sorgente per il tuo frontend knockout js una struttura di esempio potrebbe essere basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md file di esempio src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); commettere e spingere il codice su github inizializza git (se non già fatto) git init aggiungi i tuoi file git add esegui il commit delle tue modifiche git commit m "commit iniziale per il frontend di knockout js" crea un repository github (ad esempio, basic crud app knockout frontend ) invia il tuo codice git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 collegare il tuo repository github con il web deployment accedi alla funzione di web deployment nel tuo dashboard di back4app, seleziona il tuo progetto (basic crud app knockout) e clicca su web deployment collegati a github segui le istruzioni per integrare il tuo account github scegli il tuo repository e branch seleziona il tuo repository (ad esempio, basic crud app knockout frontend ) e il branch (ad esempio, main ) contenente il tuo codice 7 4 impostazioni di deployment comando di build se il tuo repository non include una cartella pre costruita, specifica il comando di build (ad es , npm run build ) directory di output imposta questo sulla cartella contenente i tuoi file statici (ad es , build o public ) variabili d'ambiente aggiungi eventuali variabili d'ambiente richieste, come le chiavi api 7 5 contenere la tua applicazione con docker (opzionale) se desideri utilizzare docker, includi un dockerfile nel tuo repository # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 distribuzione della tua applicazione clicca sul pulsante distribuisci dopo aver configurato le impostazioni, avvia la distribuzione monitora il processo back4app recupererà il tuo codice, lo costruirà (se necessario) e distribuirà la tua app containerizzata accedi alla tua app una volta completato, back4app fornirà un url per accedere alla tua app knockout js 7 7 test della distribuzione apri l'url fornito controlla se la tua app si carica correttamente esegui i test assicurati che tutte le rotte e le risorse (css, js, immagini) funzionino debug se necessario usa gli strumenti per sviluppatori per ispezionare eventuali errori e fai riferimento ai log di distribuzione di back4app passo 8 – conclusione e direzioni future ben fatto! hai costruito con successo una semplice applicazione crud utilizzando knockout js e back4app hai impostato un progetto chiamato basic crud app knockout , creato collezioni dettagliate per articoli e utenti, e gestito i tuoi dati tramite l'app admin inoltre, hai integrato il tuo frontend knockout js con il tuo backend utilizzando chiamate api rest e implementato controlli di accesso sicuri prossimi passi espandi il tuo frontend migliora la tua app con funzionalità come visualizzazioni dettagliate degli articoli, capacità di ricerca o aggiornamenti in tempo reale aggiungi logica backend avanzata esplora l'uso delle funzioni cloud o l'integrazione di servizi di terze parti approfondisci consulta la documentazione di back4app https //www back4app com/docs per ulteriori ottimizzazioni e integrazioni avanzate seguendo questo tutorial, ora hai le conoscenze per costruire un'app crud robusta e scalabile con knockout js utilizzando back4app buon coding!