Erstellung einer CRUD-Anwendung mit Qwik: Ein umfassendes Tutorial

übersicht in diesem leitfaden lernen sie, eine voll funktionsfähige crud (erstellen, lesen, aktualisieren, löschen) anwendung mit qwik zu erstellen wir werden wesentliche operationen zur verwaltung von daten demonstrieren, während sie ihre app mit back4app verbinden zunächst richten sie ein back4app projekt mit dem titel basic crud app qwik ein, das als backend für die datenverwaltung dient als nächstes konfigurieren sie eine skalierbare datenbank, indem sie sammlungen und felder definieren – entweder manuell oder mit hilfe des back4app ai agenten dies stellt sicher, dass ihr datenmodell optimiert ist, um crud aufgaben effizient zu bearbeiten sie werden dann die back4app admin app nutzen, eine benutzerfreundliche drag and drop oberfläche, um ihre sammlungen nahtlos zu verwalten dieses tool vereinfacht datenoperationen, indem es eine intuitive möglichkeit bietet, datensätze zu erstellen, zu aktualisieren und zu löschen schließlich integrieren sie ihr qwik frontend mit back4app unter verwendung von rest oder graphql apis sowie der implementierung robuster sicherheitskontrollen am ende dieses tutorials wird ihre produktionsbereite anwendung nicht nur crud operationen durchführen, sondern auch die benutzerauthentifizierung und den sicheren datenzugriff unterstützen wesentliche erkenntnisse meistern sie die kunst der entwicklung von crud anwendungen, die daten effektiv mit einem zuverlässigen backend verwalten entdecken sie methoden zur gestaltung eines anpassungsfähigen backends und zur integration mit einem qwik frontend für verbesserte benutzerinteraktivität erforschen sie die vorteile einer drag and drop admin oberfläche (back4app admin app), um crud funktionen zu optimieren erfahren sie mehr über bereitstellungsstrategien, einschließlich docker containerisierung, um ihre webanwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie bitte sicher, dass sie ein back4app konto mit einem neuen projekt setup besuchen sie erste schritte mit back4app https //www back4app com/docs/get started/new parse app für unterstützung eine qwik entwicklungsumgebung richten sie ihr projekt mit der qwik dokumentation https //qwik builder io/docs/getting started/ stellen sie sicher, dass sie node js (version 14 oder höher) installiert haben ein grundlegendes verständnis von javascript, qwik und rest apis konsultieren sie die qwik dokumentation https //qwik builder io/docs/ wenn sie eine auffrischung benötigen schritt 1 – projektinitialisierung ein neues back4app projekt einrichten melden sie sich bei ihrem back4app konto an klicken sie auf „neue app“ in ihrem dashboard geben sie den projektnamen ein basic crud app qwik und folgen sie den anweisungen, um ihr projekt zu erstellen neues projekt erstellen ihr neues projekt wird dann in ihrem dashboard angezeigt und bildet die backend grundlage für ihre anwendung schritt 2 – entwerfen ihres datenbankschemas gestaltung ihres datenmodells für diese crud app definieren sie mehrere sammlungen im folgenden finden sie beispiele, die die erforderlichen felder und typen umreißen, um ihnen zu helfen, ein effektives datenbankschema für die durchführung von crud operationen zu erstellen 1\ artikel sammlung diese sammlung enthält details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel titel zeichenfolge name des artikels beschreibung zeichenfolge kurze details zum artikel erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel des letzten updates 2\ benutzersammlung diese sammlung speichert benutzerdetails und authentifizierungsinformationen feld datentyp beschreibung id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort für die anmeldung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte aktualisierungszeitstempel für das benutzerkonto sie können diese sammlungen manuell über das back4app dashboard hinzufügen, indem sie neue klassen erstellen und jede spalte nach bedarf konfigurieren neue klasse erstellen fügen sie ganz einfach felder hinzu, indem sie den typ auswählen, einen namen angeben und standardwerte sowie einschränkungen konfigurieren spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent kann ihr schema automatisch basierend auf einem beschreibenden prompt generieren diese funktion beschleunigt die projekteinrichtung und gewährleistet konsistenz so bedienen sie den ai agenten zugriff auf den ai agenten finden sie ihn in ihrem back4app dashboard oder in den projekteinstellungen beschreiben sie ihr datenmodell geben sie einen prompt an, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und implementieren bewerten sie die generierten schema vorschläge und wenden sie sie 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 garantiert ein gut strukturiertes schema, das auf ihre anwendung zugeschnitten ist schritt 3 – aktivierung der admin app & verwaltung von crud operationen einführung in die admin app die back4app admin app bietet eine no code oberfläche zur verwaltung von backend daten ihre intuitive drag and drop funktionalität ermöglicht es ihnen, crud operationen ganz einfach durchzuführen so aktivieren sie die admin app greifen sie auf das menü „mehr“ von ihrem back4app dashboard zu wählen sie „admin app“ und klicken sie dann auf „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein indem sie einen admin benutzer erstellen, der automatisch rollen und systemkollektionen festlegt admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten mühelos zu verwalten admin app dashboard crud aktionen über die admin app durchführen datensätze hinzufügen verwenden sie die schaltfläche „datensatz hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen/bearbeiten klicken sie auf einen datensatz, um dessen details zu überprüfen oder aktualisierungen vorzunehmen datensätze entfernen nutzen sie die löschfunktion, um veraltete einträge zu entfernen dieses tool optimiert datenoperationen und sorgt für ein reibungsloses benutzererlebnis schritt 4 – qwik mit back4app verbinden jetzt, da ihr backend konfiguriert ist, ist es an der zeit, ihr qwik frontend mit back4app zu integrieren option verwendung von rest oder graphql apis wir werden rest api aufrufe verwenden, um mit back4app zu interagieren beispiel abrufen von artikeln über rest in qwik erstellen sie eine qwik komponente (z b src/components/itemslist tsx ) die elemente abruft und anzeigt // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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 push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; diese komponente verwendet die fetch api, um den rest endpunkt von back4app aufzurufen und die liste der elemente abzurufen für andere crud operationen (erstellen, aktualisieren, löschen) integrieren sie ähnliche rest aufrufe in ihre qwik komponenten schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) verbessern sie die datensicherheit, indem sie acls für ihre objekte festlegen zum beispiel, um den zugriff auf ein bestimmtes element einzuschränken async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, 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); } catch (error) { console error('error creating private item ', error); } } konfigurieren von klassenebenenberechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um standardmäßige zugriffsrichtlinien durchzusetzen, damit nur autorisierte benutzer mit sensiblen daten interagieren können schritt 6 – benutzerauthentifizierung einrichten von benutzerkonten back4app nutzt die benutzerklasse von parse zur verwaltung der authentifizierung implementieren sie in ihrer qwik app die benutzerregistrierung und anmeldung wie unten gezeigt beispiel anmeldekomponente in qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); ein ähnlicher ansatz kann auf die anmeldung und sitzungsverwaltung angewendet werden zusätzliche optionen wie soziale authentifizierung, e mail verifizierung und passwortwiederherstellung können über back4app konfiguriert werden schritt 7 – bereitstellung ihres qwik frontends über webbereitstellung der webbereitstellungsdienst von back4app ermöglicht nahtloses hosting ihres qwik frontends, indem ihr github repository verknüpft wird befolgen sie diese schritte, um ihre website bereitzustellen 7 1 erstellen sie ihren produktionsbuild öffnen sie ihren projektordner im terminal führen sie den build befehl aus npm run build dies generiert einen build ordner, der optimierte statische assets enthält bestätigen sie den build stellen sie sicher, dass der build ordner eine index html datei sowie zugehörige asset verzeichnisse enthält 7 2 organisieren und committen sie ihren code zu github ihr repository sollte den vollständigen quellcode für ihr qwik frontend enthalten eine typische struktur könnte sein basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md beispiel src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); ihr code einpflegen git initialisieren (falls noch nicht geschehen) git init ihre dateien vorbereiten git add änderungen committen git commit m "erster commit des qwik frontend codes" ein github repository erstellen zum beispiel, nennen sie es basic crud app qwik frontend ihr code zu github pushen git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 ihr repository mit der webbereitstellung verbinden zugriff auf die webbereitstellung melden sie sich bei ihrem back4app dashboard an, wählen sie ihr projekt (basic crud app qwik) und navigieren sie zum webbereitstellungs abschnitt mit github verlinken befolgen sie die anweisungen auf dem bildschirm, um ihr github konto zu verbinden repository und branch auswählen wählen sie ihr repository (z b basic crud app qwik frontend ) und den entsprechenden branch (z b main unhandled content type 7 4 bereitstellungskonfiguration zusätzliche einstellungen angeben build befehl wenn ein vorgefertigter build ordner nicht enthalten ist, legen sie den befehl fest (z b npm run build ) ausgabeverzeichnis definieren sie das ausgabeverzeichnis als build umgebungsvariablen fügen sie alle erforderlichen variablen wie api schlüssel ein 7 5 containerisierung ihrer qwik app mit docker (optional) wenn sie sich für docker entscheiden, fügen sie eine dockerfile ähnlich wie folgt hinzu \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] wählen sie dann die docker option in ihren webbereitstellungseinstellungen aus 7 6 bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen sobald die konfiguration abgeschlossen ist, klicken sie auf bereitstellen beobachten sie den build back4app wird ihren code abrufen, ihn erstellen und den container bereitstellen erhalten sie ihre url nach der bereitstellung wird eine url bereitgestellt, unter der ihre app gehostet wird 7 7 überprüfung ihrer bereitstellung besuchen sie die url öffnen sie den bereitgestellten link in ihrem browser testen sie die funktionalität überprüfen sie, ob alle routen und assets korrekt geladen werden debuggen sie bei bedarf verwenden sie die entwicklertools des browsers und die back4app protokolle, um probleme zu beheben schritt 8 – abschluss und zukünftige verbesserungen gut gemacht! sie haben erfolgreich eine vollwertige crud app mit qwik und back4app erstellt sie haben das projekt basic crud app qwik , ein detailliertes datenbankschema für artikel und benutzer erstellt und die daten mit der admin app verwaltet darüber hinaus haben sie ihr qwik frontend mit dem backend verbunden und starke sicherheitsmaßnahmen angewendet nächste schritte erweitern sie ihr frontend verbessern sie ihre qwik app mit funktionen wie detaillierten artikelansichten, suchfunktionen oder echtzeit updates fügen sie mehr funktionalität hinzu erwägen sie die integration fortgeschrittener backend logik, von drittanbietern bereitgestellter apis oder rollenbasierter zugriffskontrolle erforschen sie zusätzliche ressourcen verweisen sie auf die back4app dokumentation https //www back4app com/docs und weitere qwik tutorials für tiefere kenntnisse über leistungsverbesserungen und benutzerdefinierte integrationen indem sie dieses tutorial befolgt haben, verfügen sie nun über das wissen, um