Wie erstelle ich eine CRUD-Anwendung mit Svelte?

übersicht in diesem tutorial lernen sie, wie sie eine vollständige crud (erstellen, lesen, aktualisieren, löschen) app mit svelte erstellen wir werden back4app als unsere backend plattform nutzen, die eine robuste low code backend lösung bietet, um die daten ihrer app zu verwalten dieser leitfaden erklärt, wie sie ein back4app projekt einrichten, ein vielseitiges datenschema entwerfen und crud operationen innerhalb einer svelte anwendung implementieren zunächst erstellen sie ein back4app projekt mit dem titel basic crud app svelte dieses projekt bildet die grundlage ihrer backend einrichtung, in der sie ihr datenschema entweder manuell oder mit hilfe des integrierten ki agenten von back4app definieren als nächstes erkunden sie die back4app admin app – eine benutzerfreundliche oberfläche für die datenverwaltung – die es ihnen ermöglicht, crud operationen einfach durchzuführen schließlich verbinden sie ihre svelte anwendung mit back4app, indem sie entweder das parse javascript sdk oder direkte rest/graphql api aufrufe verwenden und dabei eine sichere datenverarbeitung gewährleisten am ende dieses tutorials haben sie eine voll funktionsfähige svelte anwendung, die grundlegende crud aufgaben zusammen mit einer sicheren benutzerauthentifizierung ausführt was sie lernen werden wie man eine svelte basierte crud anwendung mit einem flexiblen backend einrichtet methoden zur organisation ihres backends und zur verbindung mit ihrer svelte app wie man die back4app admin app für nahtlose datenoperationen nutzt strategien zur bereitstellung ihrer svelte anwendung, einschließlich docker containerisierung voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem aktiven projekt brauchen sie hilfe? besuchen sie back4app erste schritte https //www back4app com/docs/get started/new parse app für anleitungen ein svelte entwicklungssetup sie können einen code editor wie vscode verwenden und sicherstellen, dass node js installiert ist grundlegende vertrautheit mit svelte, javascript und rest apis überprüfen sie die svelte dokumentation https //svelte dev/docs falls nötig schritt 1 – einrichten ihres projekts starten eines neuen back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ auf ihrem dashboard benennen sie ihr projekt basic crud app svelte und folgen sie den anweisungen auf dem bildschirm, um die einrichtung abzuschließen neues projekt erstellen nachdem sie ihr projekt erstellt haben, sehen sie es auf ihrem dashboard, das als grundlage für die konfiguration ihres backends dient schritt 2 – erstellen des datenschemas strukturierung ihrer daten für diese crud anwendung müssen sie einige sammlungen in ihrem back4app projekt definieren im folgenden finden sie beispiele für die wichtigsten sammlungen und felder, die erforderlich sind, um ihre svelte crud operationen zu unterstützen 1\ artikel sammlung diese sammlung speichert informationen für jeden artikel feld typ einzelheiten id objekt id automatisch generierte eindeutige kennung titel zeichenfolge name oder titel des elements beschreibung zeichenfolge kurze beschreibung des artikels erstelltam datum zeitstempel, wann der artikel erstellt wurde aktualisiertam datum zeitstempel für das letzte update des elements 2\ benutzersammlung diese sammlung verwaltet benutzeranmeldeinformationen und authentifizierungsdetails feld typ einzelheiten id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger benutzername für jeden benutzer e mail zeichenfolge e mail adresse des benutzers passworthash zeichenfolge verschlüsseltes passwort zur authentifizierung erstelltam datum zeitstempel der kontoerstellung aktualisiertam datum zeitstempel für das letzte kontoupdate sie können diese sammlungen erstellen und felder direkt von ihrem back4app dashboard aus definieren neue klasse erstellen sie können felder hinzufügen, indem sie den entsprechenden typ auswählen, das feld benennen, standardwerte festlegen und es als erforderlich markieren spalte erstellen verwendung des back4app ai agenten zur schnellen schema generierung der integrierte ai agent in back4app kann ihr datenschema automatisch basierend auf einer einfachen beschreibung einrichten dieses tool optimiert den einrichtungsprozess und stellt sicher, dass ihr schema für crud operationen optimiert ist so nutzen sie den ai agenten öffnen sie den ki agenten in ihren projekteinstellungen im back4app dashboard finden sie den ki agenten detailieren sie ihre schema anforderungen geben sie eine klare aufforderung an, die die sammlungen und felder umreißt, die sie benötigen überprüfen und bestätigen überprüfen sie das vorgeschlagene schema und bestätigen sie, um es anzuwenden beispielaufforderung 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) diese methode spart zeit und stellt sicher, dass ihr backend schema perfekt auf die bedürfnisse ihrer app abgestimmt ist schritt 3 – datenverwaltung mit der admin app übersicht über die admin app die back4app admin app bietet eine no code umgebung zur verwaltung ihrer backend daten mit ihrer drag and drop oberfläche können sie ganz einfach operationen wie das hinzufügen, bearbeiten und löschen von datensätzen durchführen aktivierung der admin app gehen sie zum menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie dann auf „admin app aktivieren “ richten sie ihr administratorkonto ein indem sie den anweisungen folgen, um ihre anmeldeinformationen festzulegen dieser prozess wird auch rollen (wie b4aadminuser ) und andere systemkonfigurationen einrichten admin app aktivieren sobald aktiviert, melden sie sich bei der admin app an, um die daten ihres projekts effektiv zu verwalten admin app dashboard so verwenden sie die admin app neue datensätze einfügen verwenden sie die funktion „datensatz hinzufügen“ in einer sammlung (wie artikel), um neue daten einzuführen datensätze überprüfen oder bearbeiten klicken sie auf einen datensatz, um dessen details anzuzeigen oder seine felder zu ändern datensätze löschen entfernen sie veraltete oder unnötige dateneinträge diese intuitive benutzeroberfläche macht die verwaltung ihrer backend daten einfach und effizient schritt 4 – verbinden sie ihre svelte app mit back4app jetzt, da ihr backend eingerichtet ist, ist es zeit, ihre svelte anwendung mit back4app zu verknüpfen option a verwendung des parse javascript sdk installieren sie das sdk verwenden sie npm oder yarn, um das parse javascript sdk zu installieren npm install parse initialisieren sie parse in ihrer svelte app in ihrer haupt javascript datei (z b src/main js ) initialisieren sie parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // ihr svelte app initialisierungscode folgt implementieren sie crud funktionen erstellen sie ein modul (zum beispiel, src/services/items js ), um crud operationen zu verwalten // 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("fehler beim abrufen der elemente ", 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("element erfolgreich erstellt!"); } catch (error) { console error("fehler beim erstellen des elements ", 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("element erfolgreich aktualisiert!"); } catch (error) { console error("fehler beim aktualisieren des elements ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("element erfolgreich gelöscht!"); } catch (error) { console error("fehler beim löschen des elements ", error); } } option b verwendung von rest/graphql apis wenn das parse sdk für ihren anwendungsfall nicht ideal ist, können sie direkt die rest oder graphql endpunkte von back4app aufrufen zum beispiel, um elemente über rest abzurufen 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 \[]; } } integrieren sie diese api aufrufe nach bedarf in ihre svelte komponenten schritt 5 – sicherung ihres backends verwendung von zugriffskontrolllisten (acls) verbessern sie die sicherheit ihrer daten, indem sie acls für ihre objekte einrichten zum beispiel, um ein element zu erstellen, das nur für seinen besitzer sichtbar ist 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); } } einrichten von klassenebenenberechtigungen (clps) konfigurieren sie clps direkt in ihrem back4app dashboard, um den zugriff so einzuschränken, dass nur authentifizierte benutzer mit bestimmten sammlungen interagieren können schritt 6 – implementierung der benutzerauthentifizierung in svelte einrichten von benutzerkonten back4app nutzt die integrierte benutzerkollektion von parse zur verwaltung der authentifizierung implementieren sie in ihrer svelte app registrierungs und anmeldefunktionen ähnlich den folgenden beispielen 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); } } dieser ansatz kann erweitert werden, um sitzungen, passwortzurücksetzungen und zusätzliche authentifizierungsfunktionen zu verwalten schritt 7 – bereitstellung ihrer svelte anwendung back4app vereinfacht den bereitstellungsprozess sie können ihre svelte app mit mehreren methoden bereitstellen, einschließlich docker containerisierung 7 1 erstellen sie ihre svelte anwendung kompilieren sie ihre app führen sie ihren svelte befehl zum erstellen aus, typischerweise npm run build überprüfen sie den build stellen sie sicher, dass die generierten dateien (normalerweise im public oder build ordner) alle notwendigen assets enthalten 7 2 beispiel für die projektstruktur eine typische svelte projektstruktur könnte folgendermaßen aussehen 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 dockerisierung ihrer svelte app wenn sie eine containerisierte bereitstellung bevorzugen, erstellen sie eine dockerfile im stammverzeichnis ihres projekts \# 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 bereitstellung über back4app web deployment verknüpfen sie ihr github repository hosten sie ihr svelte projekt auf github einrichtung der bereitstellung in back4app wählen sie im back4app dashboard die web bereitstellung option, verbinden sie ihr repository (z b basic crud app svelte ), und wählen sie ihren zielbranch aus build einstellungen definieren geben sie ihren build befehl an (wie npm run build ) und verweisen sie auf das verzeichnis für die build ausgabe ihre anwendung bereitstellen klicken sie auf bereitstellen und überwachen sie die protokolle, bis ihre app live ist schritt 8 – zusammenfassung und zukünftige verbesserungen herzlichen glückwunsch! sie haben eine auf svelte basierende crud anwendung erstellt, die mit back4app verbunden ist sie haben ein projekt namens basic crud app svelte , konfiguriert sammlungen für elemente und benutzer und verwalteten ihre daten über die back4app admin app sie haben dann ihr svelte frontend mit dem parse javascript sdk (oder rest/graphql) integriert und robuste sicherheitsmaßnahmen hinzugefügt was kommt als nächstes? funktionalität erweitern fügen sie funktionen wie erweiterte suche, detaillierte ansichten oder echtzeit updates hinzu backend logik verbessern experimentieren sie mit cloud funktionen, integrationen von drittanbieter apis oder rollenbasiertem zugriff ihr lernen vertiefen erforschen sie weitere tutorials und die back4app dokumentation https //www back4app com/docs zur optimierung ihrer app viel spaß beim programmieren und beim erstellen ihrer svelte crud anwendung!