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

übersicht in diesem leitfaden erstellen sie eine einfache crud (erstellen, lesen, aktualisieren, löschen) anwendung mit sveltekit wir werden demonstrieren, wie man standarddatenoperationen durchführt und das backend ihrer webanwendung mit back4app verwaltet das tutorial beginnt mit der einrichtung eines back4app projekts mit dem titel basic crud app sveltekit , das als ihr robustes backend dient sie werden dann ein anpassbares datenbankschema entwerfen, indem sie sammlungen und felder manuell erstellen oder den back4app ai agenten nutzen dies stellt sicher, dass ihr datenmodell für effiziente crud operationen optimiert ist als nächstes verwenden sie die back4app admin app—ein no code drag and drop tool—um ihre sammlungen zu verwalten und ihren datenverwaltungsprozess zu optimieren schließlich integrieren sie ihr sveltekit frontend mit back4app über rest apis fortgeschrittene sicherheitsmaßnahmen, wie zugriffskontrollen, werden ebenfalls konfiguriert, um ihr backend zu schützen am ende dieses tutorials haben sie eine produktionsbereite webanwendung, die crud operationen sowie benutzerauthentifizierung und dynamische datenaktualisierungen unterstützt hauptpunkte meistern sie die erstellung von crud anwendungen, die daten mit einem zuverlässigen backend effektiv verwalten verstehen sie, wie man eine skalierbare datenbank strukturiert und sie mit einem sveltekit frontend verbindet lernen sie, wie sie ein visuelles admin tool (back4app admin app) nutzen, um datenoperationen nahtlos durchzuführen erforschen sie bereitstellungsstrategien, einschließlich docker containerisierung, um ihre anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt, das bereit ist siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app für anleitungen eine sveltekit entwicklungsumgebung installieren sie sveltekit gemäß der offiziellen dokumentation https //kit svelte dev/docs ein grundlegendes verständnis von javascript, sveltekit und rest apis schauen sie sich die sveltekit dokumentation https //kit svelte dev/docs für weitere details an schritt 1 – projektinitialisierung einrichten eines neuen back4app projekts melden sie sich bei ihrem back4app dashboard an klicken sie auf die schaltfläche „neue app“ auf ihrem dashboard geben sie den projektnamen ein basic crud app sveltekit und folgen sie den anweisungen auf dem bildschirm, um ihr projekt zu erstellen neues projekt erstellen nach der erstellung erscheint ihr neues projekt auf ihrem dashboard und bietet eine stabile plattform für die backend konfiguration schritt 2 – erstellen des datenbankschemas formulierung ihres datenmodells für unsere crud app müssen wir mehrere sammlungen erstellen hier sind beispiele, die die erforderlichen sammlungen und deren felder skizzieren, um ihr datenbankschema für crud operationen einzurichten 1\ artikelsammlung diese sammlung enthält details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel titel zeichenfolge titel des artikels beschreibung zeichenfolge kurze übersicht über den artikel erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel für das letzte update 2\ benutzersammlung diese sammlung speichert benutzeranmeldeinformationen und profildetails feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge eindeutige benutzer e mail adresse passwort hash zeichenfolge verschlüsseltes passwort zur authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel für das letzte profil update sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie für jede eine neue klasse einrichten und die entsprechenden spalten hinzufügen neue klasse erstellen definieren sie jedes feld, indem sie den entsprechenden datentyp auswählen, es benennen, standardwerte festlegen und es bei bedarf als erforderlich markieren spalte erstellen automatisierung der schemaerstellung mit dem back4app ai agenten der back4app ai agent vereinfacht den schemaeinrichtungsprozess direkt von ihrem dashboard aus durch die eingabe eines prompts, der ihre sammlungen und felder beschreibt, können sie ihre datenbankstruktur automatisch generieren so verwenden sie den ai agenten zugriff auf den ai agenten öffnen sie ihr back4app dashboard und navigieren sie zum ai agenten in ihren projekteinstellungen beschreiben sie ihr modell fügen sie einen detaillierten prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen überprüfen sie nach der einreichung die generierten sammlungen und felddefinitionen und wenden sie diese auf ihr projekt an beispiel 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) dieser ansatz spart zeit und stellt sicher, dass ihr schema sowohl konsistent als auch optimiert ist schritt 3 – aktivierung der admin app & ausführung von crud operationen einführung in die admin app die back4app admin app bietet eine visuelle schnittstelle, um ihr backend mühelos zu verwalten mit ihren drag and drop funktionen wird die durchführung von crud operationen einfach aktivierung der admin app gehe zum abschnitt “mehr” in deinem back4app dashboard wähle “admin app” und klicke dann auf “admin app aktivieren ” admin anmeldeinformationen einrichten erstelle einen ersten admin benutzer, um rollen festzulegen (z b b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melde dich in der admin app an, um deine daten zu verwalten admin app dashboard verwalten von crud operationen mit der admin app innerhalb der admin app kannst du datensätze hinzufügen klicke auf die schaltfläche “datensatz hinzufügen” in einer beliebigen sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen und bearbeiten wähle einen datensatz aus, um seine details zu sehen oder seine felder zu ändern datensätze entfernen verwende die löschoption, um einträge zu entfernen, die nicht mehr benötigt werden diese intuitive benutzeroberfläche optimiert deinen datenverwaltungsprozess erheblich schritt 4 – verbindung von sveltekit mit back4app nachdem dein backend über die admin app konfiguriert ist, ist es an der zeit, dein sveltekit frontend mit back4app zu verbinden nutzung von rest apis in sveltekit du wirst crud operationen mit rest api aufrufen durchführen daten abrufen beispiel erstellen sie einen sveltekit endpunkt oder eine komponente, die elemente von back4app abruft \<! 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> integrieren sie ähnliche api aufrufe in ihre sveltekit komponenten für erstellungs , aktualisierungs und löschvorgänge schritt 5 – sicherung ihres backends konfigurieren von zugriffssteuerlisten (acls) schützen sie ihre daten, indem sie acls für jedes objekt festlegen zum beispiel, um ein privates element zu erstellen 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); } festlegen von klassenberechtigungen (clps) konfigurieren sie im back4app dashboard clps für jede sammlung, damit nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – implementierung der benutzerauthentifizierung verwalten von benutzerkonten back4app verwendet die benutzerklasse von parse zur authentifizierung richten sie in ihrer sveltekit app registrierungs und anmeldeformulare ein, die über rest api aufrufe mit back4app interagieren beispiel benutzerregistrierung \<! 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> eine ähnliche methode kann für die benutzeranmeldung und sitzungsverwaltung implementiert werden schritt 7 – bereitstellung ihres sveltekit frontends die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihr sveltekit frontend zu hosten, indem sie es mit einem github repository verknüpfen in diesem abschnitt wird erläutert, wie sie ihre produktionsdateien erstellen, ihren quellcode pushen und ihre website bereitstellen 7 1 erstellen eines produktions builds öffnen sie ihr terminal im projektverzeichnis führen sie den build befehl aus npm run build dies generiert einen build (oder output ) ordner mit optimierten statischen assets überprüfen sie den build stellen sie sicher, dass der build ordner eine index html und alle notwendigen asset verzeichnisse enthält 7 2 strukturierung und hochladen ihres codes ihr repository sollte den vollständigen sveltekit quellcode enthalten eine typische struktur könnte so aussehen basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md beispiel api datei 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; }; verpflichtung zu github git initialisieren (falls nicht geschehen) git init fügen sie ihre dateien hinzu git add committen sie ihre änderungen git commit m "erster commit für sveltekit frontend" erstellen sie ein github repository nennen sie es zum beispiel basic crud app sveltekit pushen sie ihren code git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 verknüpfung ihres github repos mit der webbereitstellung öffnen sie die webbereitstellung melden sie sich bei back4app an, navigieren sie zu ihrem projekt (basic crud app sveltekit) und wählen sie die webbereitstellung option verbinden sie sich mit github befolgen sie die anweisungen, um ihr github konto zu verknüpfen, damit back4app auf ihr repository zugreifen kann wählen sie ihr repository und ihren branch wählen sie ihr sveltekit repo (z b basic crud app sveltekit ) und den branch, der ihren code enthält (normalerweise main ) 7 4 einrichten ihrer bereitstellung geben sie diese zusätzlichen einstellungen an build befehl wenn es keinen vorgefertigten ordner gibt, setzen sie den befehl (z b npm run build ) ausgabeverzeichnis geben sie den ordner an (typischerweise build oder output ) der ihre statischen dateien enthält umgebungsvariablen fügen sie alle erforderlichen variablen wie api schlüssel hinzu 7 5 dockerisierung ihrer sveltekit anwendung wenn docker ihre wahl für die bereitstellung ist, fügen sie eine dockerfile in ihr repository ein \# 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;"] konfigurieren sie die webbereitstellung, um docker zu verwenden, wenn gewünscht 7 6 bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen sobald die konfiguration abgeschlossen ist, drücken sie die bereitstellen schaltfläche überwachung der bereitstellung back4app wird ihren code abrufen, den build ausführen und ihre app in einem container bereitstellen holen sie sich ihre url nach erfolgreicher bereitstellung stellt back4app eine url für ihre gehostete sveltekit app zur verfügung 7 7 validierung ihrer bereitstellung besuchen sie die url öffnen sie die bereitgestellte url in ihrem browser funktionalität testen bestätigen sie, dass ihre app korrekt geladen wird, die routen funktionieren und alle assets ordnungsgemäß bereitgestellt werden debuggen, falls erforderlich verwenden sie die entwicklertools des browsers, um fehler zu inspizieren, und überprüfen sie die back4app protokolle zur fehlersuche schritt 8 – zusammenfassung und zukünftige richtungen herzlichen glückwunsch zum erstellen einer vollständigen crud anwendung mit sveltekit und back4app! sie haben ein projekt namens basic crud app sveltekit , detaillierte sammlungen für artikel und benutzer erstellt und ihr backend über die admin app verwaltet darüber hinaus haben sie ihr sveltekit frontend über rest apis integriert und strenge zugriffskontrollen angewendet zukünftige verbesserungen erweitern sie ihr frontend verbessern sie ihre sveltekit app mit detaillierten ansichten, suchfunktionen und echtzeitbenachrichtigungen fügen sie erweiterte funktionen hinzu implementieren sie serverseitige logik (z b cloud funktionen), integrieren sie drittanbieter apis oder aktivieren sie rollenbasierte berechtigungen vertiefen sie ihr wissen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie weitere tutorials zur leistungsverbesserung und benutzerdefinierten integrationen dieses tutorial hat sie mit den fähigkeiten ausgestattet, die erforderlich sind, um ein skalierbares crud backend für ihre sveltekit anwendung mit back4app zu erstellen viel spaß beim programmieren und frohes bauen!