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

in diesem tutorial werden sie eine to do listen anwendung mit qwik erstellen und sie mit einem robusten backend, das von back4app betrieben wird, verbinden dieser leitfaden ist für entwickler gedacht, die die wiederherstellbarkeit und lazy loading fähigkeiten von qwik nutzen möchten, während sie wesentliche crud (create, read, update, delete) operationen mit einem verwalteten backend integrieren am ende werden sie eine voll funktionsfähige anwendung haben, die zeigt, wie man ein modernes qwik frontend mit den zuverlässigen backend diensten von back4app kombiniert der aufbau einer full stack anwendung kann herausfordernd sein, da er die einrichtung des backends, die datenbankverwaltung, die authentifizierung und die bereitstellung umfasst um diese aufgaben zu vereinfachen, verwenden wir back4app— eine skalierbare backend as a service (baas) lösung—damit sie sich auf den aufbau ihrer qwik app konzentrieren können, während es sich um hosting, datenbanken und apis kümmert back4app bietet eine umfassende suite von backend diensten, einschließlich einer sofort einsatzbereiten nosql datenbank, authentifizierung, cloud code für serverseitige logik und reibungslose sdk integrationen die unterstützung für containerisierte bereitstellungen macht es zu einer ausgezeichneten wahl für moderne full stack anwendungen mit diesen werkzeugen zur hand können sie anwendungen schnell entwickeln und bereitstellen, ohne die last der verwaltung von serverinfrastrukturen wichtige erkenntnisse durch das befolgen dieses tutorials werden sie lernen ein modernes qwik projekt zu initialisieren einen backend service zu integrieren, um die daten ihrer anwendung zu verwalten wesentliche crud operationen für eine interaktive benutzeroberfläche zu implementieren eine voll funktionsfähige to do liste anwendung mit containerisierten workflows auf back4app bereitzustellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben node js und npm installieren sie die neueste lts version von nodejs org https //nodejs org/ und überprüfen sie mit node v und npm v grundkenntnisse in qwik vertrautheit mit den komponenten von qwik, signalen (unter verwendung von usesignal ) und dem konzept der wiederaufnehmbarkeit wird empfohlen wenn sie neu bei qwik sind, lesen sie zuerst die dokumentation ein back4app konto melden sie sich bei back4app https //www back4app com/ an, um ihre backend services einzurichten und zu verwalten mit diesen voraussetzungen sind sie bereit, ihr projekt einzurichten und mit dem bau zu beginnen projektsetup beginnen sie mit der einrichtung ihrer lokalen entwicklungsumgebung und der initialisierung ihres qwik projekts bestätigen sie, dass node js (lts version) installiert ist node v npm v erstellen sie ein neues qwik projekt mit der qwik cli führen sie den folgenden befehl aus npm create qwik\@latest beantworten sie die eingabeaufforderungen, die die cli bereitstellt nennen sie das projekt todo app oder ersetzen sie es durch einen namen ihrer wahl wechseln sie in ihr projektverzeichnis cd todo app starten sie den entwicklungsserver, um ihre einrichtung zu überprüfen npm start ihre qwik app sollte jetzt lokal ausgeführt werden öffnen sie die bereitgestellte url in ihrem browser, um dies zu bestätigen als nächstes konfigurieren sie ihr backend auf back4app, um die datenspeicherung und api interaktionen zu verwalten erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse dieser service bietet eine nosql datenbank, authentifizierung, cloud code und automatisch generierte apis sofort dieser abschnitt führt sie durch die erstellung eines task datenmodells, um ihre to do elemente zu speichern und es mit ihrem qwik frontend zu verknüpfen einrichten ihrer backend anwendung melden sie sich an bei ihrem back4app dashboard https //www back4app com/ und klicken sie auf "erstellen sie eine neue app " benennen sie ihre anwendung (zum beispiel, todoqwikapp ) und wählen sie nodejs/parse als backend typ sobald erstellt, navigieren sie zu "datenbank" > "browser" klicken sie auf "eine klasse erstellen" und wählen sie "benutzerdefiniert" benennen sie die klasse task und setzen sie die klassenberechtigungen so, dass öffentliches lesen und schreiben erlaubt ist (sie können diese einstellungen später verfeinern) fügen sie in der task klasse die folgenden felder hinzu titel (string) – der titel der aufgabe beschreibung (string) – details zur aufgabe abgeschlossen (boolean) – gibt an, ob die aufgabe abgeschlossen ist fälligkeitsdatum (datum) – der abgabetermin für die aufgabe klicken sie auf "speichern" um ihr schema abzuschließen integration von back4app mit qwik integrieren sie back4app in ihr qwik projekt mit dem parse javascript sdk installieren sie das sdk über npm npm install parse konfigurieren sie das sdk, indem sie es mit ihrer anwendungs id und javascript schlüssel , initialisieren holen sie sich diese anmeldeinformationen von ihrem back4app dashboard unter app einstellungen > sicherheit & schlüssel erstellen sie eine konfigurationsdatei (zum beispiel, src/lib/parse js ) und fügen sie folgendes hinzu 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 diese konfiguration jetzt in ihren qwik komponenten und routen importieren, um mit ihrem backend zu interagieren entwicklung des frontends mit qwik jetzt, da ihr backend verbunden ist, erstellen sie die benutzeroberfläche für ihre to do listen anwendung mit qwik sie werden komponenten erstellen, um aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während sie den zustand mit qwik signalen verwalten organisieren ihrer komponenten ihre anwendung wird die folgenden wichtigen komponenten enthalten taskform tsx – eine komponente zum hinzufügen neuer aufgaben tasklist tsx – eine komponente zur anzeige aller aufgaben und zur bereitstellung von steuerungen zum markieren von aufgaben als abgeschlossen oder zum löschen taskitem tsx – eine komponente, die eine einzelne aufgabe darstellt, mit aktionen zum umschalten des abschlusses oder zum entfernen erstellen sie einen components ordner im src und fügen sie diese dateien hinzu mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx zustandsverwaltung mit qwik signalen nutzen sie qwik’s usesignal für reaktive zustandsverwaltung in ihrer hauptseite (zum beispiel, src/routes/index tsx ), richten sie den zustand und das datenabrufen wie folgt ein import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); erstellen der aufgabenformular komponente in src/components/taskform tsx , erstellen sie eine formular komponente, um aufgaben hinzuzufügen verwenden sie die reaktiven signale von qwik für die formulareingaben import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); erstellen der aufgabenliste und der elementkomponenten in src/components/tasklist tsx , rendern sie die liste der aufgaben import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); in src/components/taskitem tsx , erstellen sie eine komponente für einzelne aufgaben mit aktionen zum umschalten der fertigstellung oder zum löschen der aufgabe import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); styling your application create a src/global css file to add basic styling / src/global css / 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; } container p { font size 1rem; } 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 die globalen stile in ihre root datei (z b src/root tsx ) import " /global css"; abschluss der benutzeroberfläche ihre qwik to do liste anwendung verfügt jetzt über ein dynamisches frontend, das mit back4app und benutzerdefinierten stilen integriert ist die app ermöglicht es ihnen, aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während eine reibungslose kommunikation zwischen frontend und backend sichergestellt wird als nächstes werden sie ihre qwik anwendung mit der web deployment plattform von back4app bereitstellen bereitstellung des frontends auf back4app web deployment back4app web deployment bietet eine vollständig verwaltete, containerisierte umgebung zum hosten ihrer anwendungen mit docker basierten bereitstellungen können sie ihre qwik app verpacken und nahtlos bereitstellen fügen sie den express server adapter hinzu qwik ermöglicht es ihnen, bereitstellungsadapter für spezifische ziele zu konfigurieren wir werden den express adapter hinzufügen, um ihr projekt in der produktion bereitzustellen installieren sie den adapter npm run qwik add wählen sie dann adapter node js express server und bestätigen sie die installation dies aktualisiert ihre readme und fügt neue bereitstellungsskripte in ihrer package json hinzu aktualisieren sie das startskript öffnen sie package json und ändern sie das startskript in "start" "node server/entry express" optional können sie ein separates entwicklungsskript beibehalten, falls erforderlich dies stellt sicher, dass ihr projekt express verwendet, um den produktionsbuild bereitzustellen konfigurieren von qwik für die produktion erstellen sie ihre produktionsbereite qwik website mit npm run build erstellen eines dockerfiles für ihre app erstellen sie ein dockerfile im projektstamm, um ihre qwik anwendung zu containerisieren # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] pushen zu github und bereitstellung über back4app pushen sie ihr projekt zu github 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 dann bereitstellen mit back4app web bereitstellung melden sie sich bei back4app web deployment https //www back4app com/containers an klicken sie auf "neue app erstellen" , geben sie einen namen ein und wählen sie github repository aus autorisieren sie back4app, auf ihr repository zuzugreifen, und wählen sie ihr qwik projekt repo aus wählen sie dockerfile deployment und bestätigen sie die build einstellungen klicken sie auf "bereitstellen" um den build prozess zu starten überwachung und verwaltung von bereitstellungen nach der bereitstellung verwenden sie das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die leistung von containern und die ressourcennutzung zu überwachen neuinstallationen auszulösen, wenn neue commits gepusht werden benutzerdefinierte domains zu konfigurieren, falls erforderlich testen und debuggen ihrer anwendung sobald ihre qwik app bereitgestellt ist, testen sie sie gründlich api konnektivität überprüfen öffnen sie die entwicklertools ihres browsers (f12 → netzwerk), um api aufrufe während der aufgabenoperationen zu überprüfen aufgaben hinzufügen und abrufen verwenden sie die benutzeroberfläche, um aufgaben hinzuzufügen, und aktualisieren sie dann, um die datenpersistenz im back4app datenbankbrowser zu bestätigen crud operationen testen stellen sie sicher, dass das markieren von aufgaben als abgeschlossen und das löschen korrekt im backend reflektiert wird randfälle behandeln validieren sie die formulareingaben und simulieren sie langsame netzwerkbedingungen mit entwicklertools wenn probleme auftreten, überprüfen sie die back4app protokolle oder überprüfen sie ihre api konfiguration best practices für die nutzung von back4app diensten verbessern sie die leistung und sicherheit ihrer anwendung, indem sie api aufrufe optimieren verwenden sie batch anfragen für mehrere operationen und fragen sie nur die notwendigen felder ab sensible daten sichern speichern sie anmeldeinformationen wie anwendungs id und javascript schlüssel in umgebungsvariablen erstellen sie in qwik eine env datei vite parse app id=your app id vite parse js key=your js key auto scaling aktivieren aktivieren sie das auto scaling in der back4app webbereitstellung, um hohen traffic zu verwalten sicherheit verbessern beschränken sie die berechtigungen auf klassenebene (clps), um datenänderungen zu steuern, und richten sie bei bedarf acls ein cloud code nutzen lagern sie komplexe logik in den cloud code aus, um die leistung zu verbessern und die api exposition zu reduzieren fazit sie haben nun eine vollständige to do listenanwendung mit qwik für das frontend und den robusten backend diensten von back4app erstellt dieses tutorial hat sie durch die einrichtung eines qwik projekts, die integration des parse sdk und die bereitstellung ihrer website mit containerisierten workflows auf back4app geführt während sie weiterentwickeln, sollten sie in betracht ziehen, funktionen wie erweiterte benutzerauthentifizierung, echtzeit updates und integrationen von drittanbietern hinzuzufügen für weitere informationen und unterstützung verweisen sie auf die back4app dokumentation https //www back4app com/docs