Come creare un'app CRUD con Svelte?

panoramica in questa guida, imparerai a costruire un'app crud completa (crea, leggi, aggiorna, elimina) utilizzando svelte utilizzeremo back4app come nostra piattaforma backend, che offre un robusto backend low code per gestire i dati della tua app questa guida spiega come impostare un progetto back4app, progettare uno schema dati versatile e implementare operazioni crud all'interno di un'applicazione svelte inizialmente, creerai un progetto back4app intitolato basic crud app svelte questo progetto forma la base della tua configurazione backend, dove definirai il tuo schema dati manualmente o con l'aiuto dell'ai agent integrato di back4app successivamente, esplorerai l'app admin di back4app—un'interfaccia user friendly per la gestione dei dati—che ti consente di eseguire facilmente operazioni crud infine, collegherai la tua applicazione svelte a back4app, utilizzando sia il parse javascript sdk che chiamate dirette all'api rest/graphql, garantendo al contempo una gestione sicura dei dati alla fine di questo tutorial, avrai un'applicazione svelte completamente funzionale che esegue operazioni crud di base insieme a un'autenticazione utente sicura cosa imparerai come impostare un'applicazione crud basata su svelte con un backend flessibile metodi per organizzare il tuo backend e collegarlo alla tua app svelte come sfruttare l'app admin di back4app per operazioni sui dati senza soluzione di continuità strategie per distribuire la tua applicazione svelte, inclusa la containerizzazione docker requisiti preliminari prima di iniziare, assicurati di avere un account back4app con un progetto attivo hai bisogno di aiuto? visita back4app getting started https //www back4app com/docs/get started/new parse app per assistenza un ambiente di sviluppo svelte puoi utilizzare un editor di codice come vscode e assicurarti che node js sia installato una conoscenza di base di svelte, javascript e rest api rivedi la documentazione di svelte https //svelte dev/docs se necessario passo 1 – configurare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard dai un nome al tuo progetto basic crud app svelte e segui le istruzioni sullo schermo per completare la configurazione crea nuovo progetto dopo aver creato il tuo progetto, lo vedrai sulla tua dashboard, che funge da base per configurare il tuo backend passo 2 – creare lo schema dei dati strutturare i tuoi dati per questa applicazione crud, è necessario definire alcune collezioni nel tuo progetto back4app di seguito sono riportati esempi delle collezioni e dei campi chiave necessari per supportare le tue operazioni crud svelte 1\ collezione articoli questa collezione memorizza informazioni per ogni elemento campo tipo dettagli id objectid identificatore unico generato automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa breve descrizione dell'oggetto creatoil data timestamp quando l'elemento è stato creato aggiornatoil data timestamp per l'ultimo aggiornamento dell'elemento 2\ raccolta utenti questa collezione gestisce le credenziali degli utenti e i dettagli di autenticazione campo tipo dettagli id objectid identificatore unico generato automaticamente nome utente stringa nome utente unico per ogni utente email stringa indirizzo email dell'utente hashpassword stringa password crittografata per l'autenticazione creatoil data timestamp di creazione dell'account aggiornatoa data timestamp per l'ultimo aggiornamento dell'account puoi creare queste collezioni e definire i campi direttamente dal tuo dashboard di back4app crea nuova classe puoi aggiungere campi scegliendo il tipo appropriato, nominando il campo, impostando valori predefiniti e contrassegnandolo come obbligatorio crea colonna utilizzare l'agente ai di back4app per una generazione rapida dello schema l'agente ai integrato in back4app può configurare automaticamente il tuo schema dati basato su una semplice descrizione questo strumento semplifica il processo di configurazione e garantisce che il tuo schema sia ottimizzato per le operazioni crud come utilizzare l'agente ai apri l'ai agent nelle impostazioni del tuo progetto nel dashboard di back4app, trova l'ai agent dettaglia i tuoi requisiti di schema fornisci un prompt chiaro che delinei le collezioni e i campi di cui hai bisogno rivedi e conferma controlla lo schema proposto e conferma per applicarlo esempio di prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) questo metodo fa risparmiare tempo e garantisce che il tuo schema backend sia perfettamente allineato con le esigenze della tua app passo 3 – gestire i dati con l'app admin panoramica dell'app admin l'app admin di back4app offre un ambiente senza codice per gestire i tuoi dati backend con la sua interfaccia drag and drop, puoi facilmente eseguire operazioni come aggiungere, modificare e eliminare record attivare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e poi clicca su “abilita app admin ” configura il tuo account admin seguendo le istruzioni per stabilire le tue credenziali questo processo configurerà anche i ruoli (come b4aadminuser ) e altre configurazioni di sistema abilita app admin una volta abilitata, accedi all'app admin per gestire efficacemente i dati del tuo progetto dashboard dell'app admin come utilizzare l'app admin inserire nuovi record utilizza la funzione “aggiungi record” in una collezione (come articoli) per introdurre nuovi dati esaminare o modificare i record clicca su un record per visualizzarne i dettagli o modificare i suoi campi eliminare i record rimuovi voci di dati obsolete o non necessarie questa interfaccia intuitiva rende la gestione dei tuoi dati di backend semplice ed efficiente passo 4 – collegare la tua app svelte a back4app ora che il tuo backend è configurato, è tempo di collegare la tua applicazione svelte a back4app opzione a utilizzare il parse javascript sdk installa l'sdk usa npm o yarn per installare il parse javascript sdk npm install parse inizializza parse nella tua app svelte nel tuo file javascript principale (ad esempio, src/main js , inizializza parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // il codice di inizializzazione della tua app svelte segue implementa le funzioni crud crea un modulo (ad esempio, src/services/items js ) per gestire le operazioni crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("errore durante il recupero degli elementi ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("elemento creato con successo!"); } catch (error) { console error("errore durante la creazione dell'elemento ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("elemento aggiornato con successo!"); } catch (error) { console error("errore durante l'aggiornamento dell'elemento ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("elemento eliminato con successo!"); } catch (error) { console error("errore durante l'eliminazione dell'elemento ", error); } } opzione b utilizzo delle api rest/graphql se il parse sdk non è ideale per il tuo caso d'uso, puoi invocare direttamente gli endpoint rest o graphql di back4app ad esempio, per recuperare gli elementi tramite rest export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } integra queste chiamate api all'interno dei tuoi componenti svelte secondo necessità passo 5 – sicurezza del tuo backend utilizzo delle liste di controllo degli accessi (acl) migliora la sicurezza dei tuoi dati impostando acl sui tuoi oggetti ad esempio, per creare un elemento visibile solo al suo proprietario import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } impostazione dei permessi a livello di classe (clp) configura i clp direttamente nel tuo dashboard di back4app per limitare l'accesso in modo che solo gli utenti autenticati possano interagire con determinate collezioni passo 6 – implementazione dell'autenticazione utente in svelte impostazione degli account utente back4app sfrutta la collezione utente integrata di parse per gestire l'autenticazione nella tua app svelte, implementa funzioni di registrazione e accesso simili agli esempi qui sotto import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } questo approccio può essere esteso per gestire sessioni, reset delle password e ulteriori funzionalità di autenticazione passo 7 – distribuire la tua applicazione svelte back4app semplifica il processo di distribuzione puoi distribuire la tua app svelte utilizzando diversi metodi, inclusa la containerizzazione docker 7 1 compila la tua applicazione svelte compila la tua app esegui il comando di build di svelte, tipicamente npm run build rivedi la build assicurati che i file generati (di solito nella public o build cartella) includano tutte le risorse necessarie 7 2 esempio di struttura del progetto una tipica struttura di progetto svelte potrebbe apparire così basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 dockerizzare la tua app svelte se preferisci la distribuzione containerizzata, crea un dockerfile nella radice del tuo progetto \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 distribuzione tramite back4app web deployment collega il tuo repository github ospita il tuo progetto svelte su github imposta la distribuzione in back4app nel dashboard di back4app, scegli l'opzione web deployment , collega il tuo repository (ad esempio, basic crud app svelte ), e seleziona il tuo ramo di destinazione definisci le impostazioni di build specifica il tuo comando di build (come npm run build ) e indica la directory di output della build distribuisci la tua applicazione clicca su distribuisci e monitora i log fino a quando la tua app è attiva passo 8 – conclusione e miglioramenti futuri congratulazioni! hai costruito un'applicazione crud basata su svelte che si connette a back4app hai impostato un progetto chiamato basic crud app svelte , configurato collezioni per articoli e utenti, e gestito i tuoi dati tramite l'app di amministrazione back4app hai poi integrato il tuo frontend svelte utilizzando il parse javascript sdk (o rest/graphql) e aggiunto misure di sicurezza robuste cosa c'è dopo? espandi le funzionalità aggiungi funzionalità come ricerca avanzata, visualizzazioni dettagliate o aggiornamenti in tempo reale migliora la logica del backend sperimenta con funzioni cloud, integrazioni api di terze parti o controllo degli accessi basato sui ruoli approfondisci il tuo apprendimento esplora ulteriori tutorial e la documentazione di back4app https //www back4app com/docs per ottimizzare la tua app buon coding e divertiti a costruire la tua applicazione crud svelte!