Wie man ein Sveltekit-Frontend erstellt und es mit einem Backend verbindet?

in diesem tutorial erstellen sie eine to do liste anwendung mit sveltekit und verbinden sie mit einem verwalteten backend service, der von back4app unterstützt wird dieser leitfaden ist für sie gedacht, wenn sie die grundlegenden crud (create, read, update, delete) operationen meistern und eine dynamische, responsive benutzeroberfläche mit sveltekit erstellen möchten am ende dieses tutorials wird ihre anwendung nahtlos mit einem backend interagieren, das die datenspeicherung, authentifizierung und mehr verwaltet die entwicklung einer full stack anwendung kann aufgrund der backend konfiguration und der datenbankverwaltung komplex sein um ihren arbeitsablauf zu vereinfachen, verwenden wir back4app – einen robusten backend as a service – damit sie sich auf die erstellung eines herausragenden sveltekit frontends konzentrieren können back4app bietet eine vollständig verwaltete nosql datenbank, authentifizierung, cloud code für benutzerdefinierte logik und sdks für eine reibungslose integration dies ermöglicht es ihnen, skalierbare anwendungen zu erstellen und bereitzustellen, ohne die serverinfrastruktur verwalten zu müssen wichtige erkenntnisse indem sie dieses tutorial befolgen, werden sie ein modernes sveltekit projekt mit vite initialisieren einen backend service integrieren, um die daten ihrer anwendung zu verwalten wesentliche crud operationen für eine dynamische to do liste implementieren ihre voll funktionsfähige anwendung mit containerisierten workflows auf back4app bereitstellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie node js und npm auf ihrem computer installiert haben überprüfen sie dies, indem sie node v und npm v ausführen grundkenntnisse in sveltekit , einschließlich routing, ladefunktionen und reaktiven variablen ein back4app konto zur verwaltung ihrer backend dienste melden sie sich bei back4app https //www back4app com/ an, falls sie dies noch nicht getan haben mit diesen voraussetzungen sind sie bereit, ihr projekt zu starten projektsetup beginnen sie mit der einrichtung ihrer lokalen entwicklungsumgebung und der initialisierung eines neuen sveltekit projekts stellen sie sicher, dass sie node js (lts version) installiert haben wenn nicht, laden sie es von nodejs org https //nodejs org/ herunter erstellen sie ihr sveltekit projekt, indem sie folgendes ausführen npx sv create todo app wählen sie bei der aufforderung die sveltekit optionen aus, die am besten zu ihrem projekt passen (z b skeleton projekt, typescript, falls gewünscht) navigieren sie in ihr projektverzeichnis cd todo app starten sie den entwicklungsserver, um die einrichtung zu überprüfen npm run dev ihre sveltekit app sollte jetzt in ihrem browser geöffnet werden mit dem frontend bereit, fahren sie fort, um ihr backend auf back4app zu erstellen erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse es umfasst eine nosql datenbank, authentifizierung, cloud code und automatisch generierte apis befolgen sie diese schritte, um ihr backend einzurichten melden sie sich an bei ihrem back4app dashboard https //www back4app com/ und klicken sie auf "eine neue app erstellen " benennen sie ihre app (zum beispiel, todoapp ) und wählen sie nodejs/parse als backend typ navigieren sie zu "datenbank" > "browser" , klicken sie auf "eine klasse erstellen" , und wählen sie "benutzerdefiniert" benennen sie die klasse task und konfigurieren sie sie für öffentlichen lese und schreibzugriff (sie können diese berechtigungen später verfeinern) fügen sie in der task klasse die folgenden felder hinzu titel (string) – der titel der aufgabe beschreibung (string) – einzelheiten zur aufgabe abgeschlossen (boolean) – status der aufgabenerledigung fälligkeitsdatum (datum) – der abgabetermin für die aufgabe klicken sie auf "speichern" um das schema zu erstellen integration von back4app mit sveltekit sie werden das parse javascript sdk verwenden, um ihre sveltekit app mit dem back4app backend zu verbinden installieren sie das parse sdk npm install parse konfigurieren sie das sdk, indem sie die src/app html bearbeiten oder ein spezielles modul erstellen (z b src/lib/parseclient js ) erstellen sie beispielsweise src/lib/parseclient js mit folgendem inhalt import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; sie können dieses modul jetzt in ihren sveltekit routen oder komponenten importieren, um mit back4app zu interagieren frontend entwicklung ihre sveltekit anwendung wird aus routen und komponenten bestehen, um aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen nutzen sie die dateibasierten routen von sveltekit und reaktive variablen für dynamische updates strukturierung ihrer komponenten erstellen sie einen src/lib/components ordner, um ihre komponenten zu organisieren mkdir p src/lib/components sie werden die folgenden komponenten erstellen taskform svelte – zum hinzufügen neuer aufgaben tasklist svelte – um die liste der aufgaben anzuzeigen taskitem svelte – um einzelne aufgaben darzustellen taskform svelte diese komponente rendert ein formular, das aufgabendetails erfasst und sie an back4app übermittelt \<script> import { createeventdispatcher } from 'svelte'; import parse from '$lib/parseclient'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('description', description); task set('completed', false); await task save(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte diese komponente stellt eine einzelne aufgabe dar, mit schaltflächen zum umschalten ihres abschlussstatus oder zum löschen der aufgabe \<script> import parse from '$lib/parseclient'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte diese komponente zeigt alle aufgaben an, indem sie über ein array iteriert und jede aufgabe mit der komponente taskitem rendert \<script> import taskitem from '$lib/components/taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} +page svelte (hauptroute) in deiner haupt sveltekit route (z b src/routes/+page svelte ), verwalte den zustand der aufgaben und integriere die komponenten \<script> import { onmount } from 'svelte'; import parse from '$lib/parseclient'; import taskform from '$lib/components/taskform svelte'; import tasklist from '$lib/components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> styling der anwendung erstellen sie ein globales stylesheet (z b src/app css ) um grundlegende stile hinzuzufügen container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importieren sie dieses stylesheet in ihre src/app html oder hauptlayout datei bereitstellung des frontends auf back4app web deployment back4app web deployment bietet eine containerisierte umgebung, um ihre sveltekit anwendung zu hosten vite für die produktion konfigurieren aktualisieren sie ihre vite config js falls erforderlich, um den basis pfad für eine containerisierte umgebung festzulegen import { sveltekit } from '@sveltejs/kit/vite'; import { defineconfig } from 'vite'; export default defineconfig({ plugins \[sveltekit()], base ' /', }); generieren sie den produktionsbuild npm run build erstellen einer dockerfile bevor sie ihren docker container lokal testen können, müssen sie adapter node installieren, das ihre seite für node js erstellt führen sie dazu den befehl in ihrem terminal aus npm i d @sveltejs/adapter node nach der installation des adapter node , öffnen sie die svelte config js datei und ersetzen sie den dortigen code durch den folgenden codeblock import adapter from '@sveltejs/adapter node'; / @type {import('@sveltejs/kit') config} / const config = { &#x9;kit { &#x9; // adapter auto only supports some environments, see https //svelte dev/docs/kit/adapter auto for a list &#x9; // if your environment is not supported, or you settled on a specific environment, switch out the adapter &#x9; // see https //svelte dev/docs/kit/adapters for more information about adapters &#x9; adapter adapter() &#x9;} }; export default config; erstellen sie jetzt eine dockerfile in ihrem projektstamm mit folgendem inhalt from node 22 alpine as builder workdir /app copy package json / run npm ci copy run npm run build run npm prune production from node 22 alpine workdir /app copy from=builder /app/build build/ copy from=builder /app/node modules node modules/ copy package json expose 3000 env node env=production cmd \[ "node", "build" ] testen des docker containers lokal bauen sie ihr docker image docker build t todo frontend führen sie den container aus docker run p 3000 3000 todo frontend öffnen sie http //localhost 3000 in ihrem browser, um zu überprüfen, ob ihre sveltekit app korrekt bereitgestellt wird bereitstellung auf back4app initialisieren sie ein git repository, fügen sie ihre projektdateien hinzu und committen sie git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main melde dich bei back4app web bereitstellung https //www back4app com/containers an klicke auf "neue app erstellen" , gib deinen projektnamen ein und wähle dein github repository aus autorisieren sie back4app und wählen sie dockerfile bereitstellung aus bestätige die build einstellungen und klicke auf "bereitstellen" , um den bereitstellungsprozess zu starten überwachung deiner bereitstellung nach der bereitstellung verwende das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die containerleistung und ressourcennutzung zu überwachen neubauten bei neuen commits auszulösen benutzerdefinierte domains zu konfigurieren, falls erforderlich greife auf deine live anwendung zu unter https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ testen und debuggen nach der bereitstellung bestätigen sie, dass ihr sveltekit frontend ordnungsgemäß mit dem back4app backend kommuniziert api verifizierung verwenden sie die entwicklertools ihres browsers (f12 → netzwerk), um api aufrufe zu überprüfen aufgabenoperationen fügen sie aufgaben über die benutzeroberfläche hinzu, schließen sie sie ab und löschen sie sie und überprüfen sie die aktualisierungen im back4app datenbankbrowser fehlerbehandlung überprüfen sie die konsolenprotokolle auf fehler und testen sie grenzfälle wie das einreichen leerer aufgaben leistungstest simulieren sie langsame netzwerkbedingungen mit browser tools, um die reaktionsfähigkeit zu bewerten best practices für die verwendung von back4app mit sveltekit um ihre anwendung zu optimieren effiziente anfragen verwenden sie batch operationen, wenn sie mehrere aufgaben bearbeiten const tasks = \[task1, task2, task3]; parse object saveall(tasks); optimierte abfragen nur notwendige felder abrufen query select('title', 'completed'); umweltmanagement sensible schlüssel in umgebungsvariablen speichern vite parse app id=your app id vite parse js key=your js key sicherheit verwenden sie acls, um den zugriff einzuschränken task setacl(new parse acl(parse user current())); backend entlastung nutzen sie cloud code für komplexe logik, um die api exposition zu reduzieren fazit sie haben nun eine vollständige to do listen anwendung erstellt, indem sie ein sveltekit frontend entwickelt, es mit dem backend von back4app integriert und es mit containerisierten workflows bereitgestellt haben dieses tutorial hat sie durch jeden schritt geführt – von der lokalen entwicklung bis zur cloud bereitstellung – und dabei eine reibungslose interaktion zwischen ihrer sveltekit benutzeroberfläche und den backend diensten sichergestellt blicken sie in die zukunft und denken sie an verbesserungen wie echtzeit updates, verbesserte authentifizierung und integrationen von drittanbietern für weiteres lernen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie die ressourcen der community