How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

panoramica in questa guida, creerai una semplice applicazione crud (crea, leggi, aggiorna, elimina) utilizzando sveltekit dimostreremo come eseguire operazioni standard sui dati e gestire il backend della tua web app con back4app il tutorial inizia con la configurazione di un progetto back4app intitolato basic crud app sveltekit , che funge da robusto backend progetterai quindi uno schema di database adattabile creando manualmente collezioni e campi, o sfruttando l'ai agent di back4app questo assicura che il tuo modello di dati sia ottimizzato per operazioni crud efficienti successivamente, utilizzerai l'app admin di back4app—uno strumento senza codice, drag and drop—per gestire le tue collezioni, semplificando il processo di gestione dei dati infine, integrerai il tuo frontend sveltekit con back4app utilizzando le api rest saranno configurate anche misure di sicurezza avanzate, come i controlli di accesso, per proteggere il tuo backend alla conclusione di questo tutorial, avrai un'applicazione web pronta per la produzione che supporta operazioni crud insieme all'autenticazione degli utenti e aggiornamenti dinamici dei dati punti principali padroneggia la creazione di applicazioni crud che gestiscono efficacemente i dati con un backend affidabile comprendi come strutturare un database scalabile e collegarlo a un frontend sveltekit impara a utilizzare uno strumento di amministrazione visivo (back4app admin app) per eseguire operazioni sui dati senza problemi esplora strategie di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione requisiti prima di iniziare, assicurati di avere un account back4app con un nuovo progetto pronto fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app per indicazioni un ambiente di sviluppo sveltekit installa sveltekit seguendo la documentazione ufficiale https //kit svelte dev/docs una comprensione di base di javascript, sveltekit e rest api dai un'occhiata alla documentazione di sveltekit https //kit svelte dev/docs per ulteriori dettagli passo 1 – inizializzazione del progetto impostazione di un nuovo progetto back4app accedi al tuo dashboard di back4app clicca sul pulsante “nuova app” sul tuo dashboard inserisci il nome del progetto basic crud app sveltekit e segui le istruzioni sullo schermo per creare il tuo progetto crea nuovo progetto dopo la creazione, il tuo nuovo progetto appare sul tuo dashboard, fornendo una piattaforma stabile per la configurazione del backend passo 2 – creazione dello schema del database formulazione del tuo modello dati per la nostra app crud, dobbiamo creare più collezioni ecco alcuni esempi che delineano le collezioni richieste e i loro campi per impostare il tuo schema di database per eseguire operazioni crud 1\ raccolta di articoli questa raccolta contiene dettagli su ciascun articolo campo tipo di dato descrizione id objectid chiave primaria generata automaticamente titolo stringa titolo dell'oggetto descrizione stringa breve panoramica dell'oggetto creato il data timestamp quando l'elemento è stato creato aggiornato il data timestamp per l'ultimo aggiornamento 2\ raccolta utenti questa collezione memorizza le credenziali degli utenti e i dettagli del profilo campo tipo di dati descrizione id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email utente unico hash password stringa password crittografata per l'autenticazione creato il data timestamp di creazione dell'account aggiornato a data timestamp per l'ultimo aggiornamento del profilo puoi creare manualmente queste collezioni nel dashboard di back4app stabilendo una nuova classe per ciascuna e aggiungendo le rispettive colonne crea nuova classe definisci ogni campo selezionando il tipo di dato appropriato, assegnandogli un nome, impostando valori predefiniti e contrassegnandolo come obbligatorio se necessario crea colonna automatizzare la creazione dello schema con l'agente ai di back4app l'agente ai di back4app semplifica il processo di configurazione dello schema direttamente dalla tua dashboard inserendo un prompt che descrive le tue collezioni e i tuoi campi, puoi generare automaticamente la struttura del tuo database come usare l'agente ai accedi all'agente ai apri la tua dashboard di back4app e naviga verso l'agente ai all'interno delle impostazioni del tuo progetto descrivi il tuo modello incolla un prompt dettagliato che delinea le collezioni e i campi di cui hai bisogno rivedi e conferma dopo l'invio, rivedi le collezioni generate e le definizioni dei campi, quindi applicale al 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 approccio fa risparmiare tempo e garantisce che il tuo schema sia sia coerente che ottimizzato passo 3 – attivazione dell'app admin e esecuzione delle operazioni crud introduzione all'app admin l'app admin di back4app offre un'interfaccia visiva per gestire il tuo backend senza sforzo con le sue funzionalità di trascinamento, eseguire operazioni crud diventa semplice attivazione dell'app admin vai alla sezione “altro” nel tuo dashboard di back4app seleziona “app admin” poi clicca “abilita app admin ” imposta le credenziali dell'amministratore crea un utente amministratore iniziale per stabilire i ruoli (ad es , b4aadminuser ) e le collezioni di sistema abilita app admin dopo l'attivazione, accedi all'app admin per iniziare a gestire i tuoi dati dashboard app admin gestire le operazioni crud con l'app admin all'interno dell'app admin puoi aggiungere record clicca il pulsante “aggiungi record” in qualsiasi collezione (ad es , articoli) per creare nuove voci visualizzare e modificare record seleziona un record per vedere i suoi dettagli o modificare i suoi campi rimuovere record usa l'opzione di eliminazione per rimuovere voci che non sono più necessarie questa interfaccia intuitiva semplifica notevolmente il tuo processo di gestione dei dati passo 4 – collegare sveltekit con back4app con il tuo backend configurato tramite l'app admin, è tempo di collegare il tuo frontend sveltekit a back4app sfruttare le api rest in sveltekit esegui operazioni crud utilizzando chiamate api rest esempio di recupero dati crea un endpoint o un componente sveltekit che recupera elementi da back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = async () => { 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> integra chiamate api simili all'interno dei tuoi componenti sveltekit per operazioni di creazione, aggiornamento e cancellazione passo 5 – sicurezza del tuo backend configurazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando acl per ogni oggetto ad esempio, per creare un elemento privato async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } impostazione dei permessi a livello di classe (clp) nel dashboard di back4app, configura i clp per ogni collezione in modo che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – implementazione dell'autenticazione utente gestione degli account utente back4app utilizza la classe utente di parse per l'autenticazione nella tua app sveltekit, imposta moduli di registrazione e accesso che interagiscono con back4app tramite chiamate api rest esempio registrazione utente \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('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' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> un metodo simile può essere implementato per il login dell'utente e la gestione delle sessioni passo 7 – distribuzione del tuo frontend sveltekit la funzione di distribuzione web di back4app ti consente di ospitare il tuo frontend sveltekit collegandolo a un repository github questa sezione tratta di come costruire i tuoi file di produzione, caricare il tuo codice sorgente e distribuire il tuo sito 7 1 creazione di una build di produzione apri il tuo terminale nella directory del progetto esegui il comando di build npm run build questo genera una build (o output ) cartella con asset statici ottimizzati verifica la build assicurati che la cartella di build contenga un index html e tutte le directory di asset necessarie 7 2 strutturare e caricare il tuo codice il tuo repository dovrebbe contenere il codice sorgente completo di sveltekit una struttura tipica potrebbe essere basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md file api di esempio src/lib/api js export const fetchitems = async () => { const res = 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 res json(); return data results; }; impegnarsi su github inizializza git (se non fatto) git init aggiungi i tuoi file git add impegnati con le tue modifiche git commit m "impegno iniziale per il frontend di sveltekit" crea un repository github nominalo, ad esempio, basic crud app sveltekit carica il tuo codice git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 collegare il tuo repository github con il deployment web apri il deployment web accedi a back4app, naviga al tuo progetto (basic crud app sveltekit) e seleziona l'opzione web deployment collegati a github segui le istruzioni per collegare il tuo account github in modo che back4app possa accedere al tuo repository scegli il tuo repository e branch seleziona il tuo repository sveltekit (ad esempio, basic crud app sveltekit unhandled content type main ) 7 4 configurare il tuo deployment fornire queste impostazioni aggiuntive comando di costruzione se non c'è una cartella pre costruita, impostare il comando (ad es , npm run build ) directory di output specificare la cartella (tipicamente build o output ) che contiene i tuoi file statici variabili di ambiente aggiungere eventuali variabili necessarie come le chiavi api 7 5 dockerizzare la tua applicazione sveltekit se docker è la tua scelta di distribuzione, includi un dockerfile nel tuo repository \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built 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 docker se preferito 7 6 distribuire la tua applicazione clicca sul pulsante di distribuzione una volta completata la configurazione, premi il pulsante di distribuzione monitora la distribuzione back4app recupererà il tuo codice, eseguirà la build e distribuirà la tua app in un contenitore ottieni il tuo url dopo una distribuzione riuscita, back4app fornisce un url per la tua app sveltekit ospitata 7 7 validare la tua distribuzione visita l'url apri l'url fornito nel tuo browser testa la funzionalità conferma che la tua app si carica correttamente, le rotte funzionano e tutte le risorse sono servite correttamente debug se necessario usa gli strumenti per sviluppatori del browser per ispezionare gli errori e rivedere i log di back4app per la risoluzione dei problemi passo 8 – conclusione e direzioni future complimenti per aver costruito un'applicazione crud completa con sveltekit e back4app! hai impostato un progetto chiamato basic crud app sveltekit , creato collezioni dettagliate per articoli e utenti, e gestito il tuo backend tramite l'app di amministrazione inoltre, hai integrato il tuo frontend sveltekit tramite api rest e applicato rigorosi controlli di accesso miglioramenti futuri espandi il tuo frontend migliora la tua app sveltekit con viste dettagliate, capacità di ricerca e notifiche in tempo reale aggiungi funzionalità avanzate implementa logica lato server (ad es , cloud functions), integra api di terze parti o abilita permessi basati sui ruoli approfondisci le tue conoscenze visita la documentazione di back4app https //www back4app com/docs e esplora ulteriori tutorial per miglioramenti delle prestazioni e integrazioni personalizzate questo tutorial ti ha fornito le competenze necessarie per creare un backend crud scalabile per la tua applicazione sveltekit utilizzando back4app buon coding e buona costruzione!