Wie man eine CRUD-Anwendung mit Preact baut?

übersicht in diesem leitfaden entwickeln sie eine crud (erstellen, lesen, aktualisieren und löschen) anwendung mit preact wir werden sie durch den aufbau eines systems führen, das grundlegende datenoperationen verwaltet, von der initialisierung eines back4app projekts namens basic crud app preact bis hin zur mühelosen datenverwaltung dieses projekt bietet ein robustes backend und ein schlankes, minimalistisches frontend, das mit preact erstellt wurde wir beginnen mit der einrichtung eines neuen projekts auf back4app und erstellen dann ein effizientes datenbankschema – entweder manuell oder mit hilfe des back4app ai assistant dieses design unterstützt alle wesentlichen crud funktionalitäten als nächstes stellen wir die back4app admin app vor, eine drag and drop oberfläche, die die datenverwaltung vereinfacht sie können mit diesem tool schnell datensätze hinzufügen, ändern oder entfernen schließlich verbinden sie ihr preact frontend mit back4app über rest/graphql und stellen sicher, dass ihr backend mit fortschrittlichen zugriffsregeln gesichert ist am ende dieses tutorials haben sie eine produktionsbereite webanwendung mit benutzerauthentifizierung und robuster datenverwaltung – alles erstellt mit preact und betrieben von back4app haupt erkenntnisse meistern sie den aufbau von crud anwendungen, die daten effizient mit einem zuverlässigen backend verwalten lernen sie, ein skalierbares datenmodell zu entwerfen und es mit einem preact frontend für ein optimales benutzererlebnis zu integrieren entdecken sie, wie die drag and drop back4app admin app die erstellung, das lesen, das aktualisieren und das löschen von operationen vereinfacht verstehen sie bereitstellungsstrategien, einschließlich containerisierung mit docker, um ihre anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie bitte sicher, dass sie ein back4app konto und ein initiiertes projekt für anleitungen, schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an eine preact entwicklungsumgebung verwenden sie tools wie preact cli https //github com/preactjs/preact cli oder ähnliches, und stellen sie sicher, dass node js (v14 oder höher) installiert ist grundkenntnisse in javascript, preact und rest apis verweisen sie bei bedarf auf die preact dokumentation https //preactjs com/guide/v10/ schritt 1 – einrichten ihres projekts einrichten eines back4app projekts melden sie sich bei ihrem back4app konto an wählen sie die option „neue app“ auf ihrem dashboard benennen sie ihr projekt basic crud app preact und folgen sie den einrichtungshinweisen neues projekt erstellen nach der erstellung wird ihr projekt auf ihrem back4app dashboard sichtbar sein und die grundlage für die backend konfiguration legen schritt 2 – erstellung ihres datenbankschemas strukturierung ihres datenmodells für unsere crud app benötigen sie mehrere sammlungen nachfolgend finden sie beispiele, die die sammlungen und felder umreißen, die für die unterstützung von crud operationen erforderlich sind 1 artikel sammlung diese sammlung enthält details zu jedem artikel feld datentyp zweck id objekt id automatisch generierter primärschlüssel titel zeichenfolge der name des artikels beschreibung zeichenfolge eine kurze beschreibung des artikels erstellt am datum der erstellungszeitstempel aktualisiert am datum letzte aktualisierungszeitstempel 2 benutzersammlung dies enthält benutzeranmeldeinformationen und profildetails feld datentyp zweck id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge einzigartiger benutzername e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge gehashtes passwort zur authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte aktualisierung des kontos zeitstempel sie können diese sammlungen manuell über das back4app dashboard erstellen, indem sie für jede sammlung eine neue klasse hinzufügen und die entsprechenden felder definieren neue klasse erstellen sie können spalten hinzufügen, indem sie einen datentyp auswählen, die spalte benennen und standardwerte sowie erforderliche flags festlegen spalte erstellen verwendung des back4app ai assistenten zur schemaerstellung der ki assistent, der in back4app verfügbar ist, kann ihr schema automatisch basierend auf einem prompt generieren, der ihre sammlungen und felder beschreibt diese funktion beschleunigt die einrichtung und gewährleistet konsistenz schritte zur verwendung des ki assistenten öffnen sie den ki assistenten von ihrem back4app dashboard geben sie eine detaillierte beschreibung ihres datenmodells ein überprüfen sie die automatisch generierten sammlungen und felddefinitionen und wenden sie diese auf ihr projekt an beispiel prompt create these 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 schritt 3 – aktivierung der admin app und verwaltung von crud operationen einführung in die admin app die back4app admin app bietet eine no code oberfläche, um ihre backend daten mühelos zu verwalten die drag and drop funktionalität ermöglicht es ihnen, crud operationen ohne mühe durchzuführen aktivierung der admin app gehen sie zum menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie „admin app aktivieren “ richten sie ihren ersten admin benutzer ein, der auch rollen wie b4aadminuser und systemkollektionen konfiguriert admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten zu verwalten admin app dashboard durchführen von crud aktionen mit der admin app innerhalb der benutzeroberfläche können sie datensätze hinzufügen verwenden sie die option „datensatz hinzufügen“ in jeder sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen und bearbeiten wählen sie einen datensatz aus, um seine details zu sehen oder seine felder zu ändern datensätze entfernen löschen sie einträge, die nicht mehr benötigt werden dieses intuitive tool verbessert die benutzererfahrung, indem es das datenmanagement optimiert schritt 4 – verbinden sie ihr preact frontend mit back4app mit dem backend bereit ist es an der zeit, ihr preact frontend zu integrieren option a verwendung des parse sdk installieren sie das parse sdk npm install parse richten sie parse in ihrem preact projekt ein erstellen sie eine datei (z b src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integrieren sie parse in eine preact komponente erstellen sie beispielsweise eine komponente, um elemente abzurufen und anzuzeigen // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; option b nutzung von rest oder graphql wenn das parse sdk nicht praktikabel ist, verwenden sie rest oder graphql für crud operationen zum beispiel, um elemente über rest abzurufen // sample rest call to retrieve items const fetchitems = 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integrieren sie diese api aufrufe in ihre preact komponenten nach bedarf schritt 5 – verbesserung der backend sicherheit verwendung von zugriffskontrolllisten (acls) sichern sie ihre daten, indem sie acls ihren objekten zuweisen zum beispiel, um ein privates element zu erstellen async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } klassenebene berechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um den zugriff nur auf authentifizierte oder autorisierte benutzer zu beschränken schritt 6 – implementierung der benutzerauthentifizierung benutzerkonten konfigurieren back4app nutzt die benutzerklasse von parse zur verwaltung der authentifizierung in ihrer preact anwendung verwalten sie die benutzerregistrierung und den login wie folgt // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; eine ähnliche methode kann für den login und die verwaltung von sitzungen verwendet werden zusätzliche funktionen wie soziale authentifizierung und passwortwiederherstellung können über das back4app dashboard eingerichtet werden schritt 7 – starten sie ihr preact frontend mit der webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre preact anwendung zu hosten, indem sie ein github repository verknüpfen in diesem teil bereiten sie ihren produktionsbuild vor, committen ihren code, integrieren sich mit der webbereitstellung und stellen ihre website bereit 7 1 erstellen sie ihre produktionsdateien öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies generiert einen build ordner mit optimierten statischen assets (html, js, css, bilder) 3\ bestätigen sie, dass der build ordner eine index html datei und notwendige assets enthält 7 2 organisieren und committen sie ihren quellcode ihr repository sollte den vollständigen preact frontend quellcode enthalten eine beispielverzeichnisstruktur basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md beispiel dateien src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; ihren code zu github committen initialisieren sie ein git repository (falls noch nicht geschehen) git init stellen sie ihre quelldateien bereit git add übernehmen sie ihre änderungen git commit m "initial commit of preact frontend source code" erstellen sie ein neues github repository, zum beispiel, basic crud app preact frontend übertragen sie ihren code git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 verbinden sie ihr repository mit der webbereitstellung gehe zum abschnitt web deployment in deinem back4app dashboard, öffne dein projekt ( basic crud app preact ) und wähle web deployment verlinke dein github konto wie aufgefordert, damit back4app auf dein repository zugreifen kann wähle das repository (z b basic crud app preact frontend ) und wähle den entsprechenden branch (z b main ) 7 4 bereitstellungskonfiguration gib zusätzliche einstellungen an build befehl wenn ein vorgefertigter build ordner fehlt, setze den build befehl (z b npm run build ) back4app wird diesen befehl während der bereitstellung ausführen ausgabeverzeichnis definiere den ausgabeordner als build damit back4app die statischen dateien identifizieren kann umgebungsvariablen füge alle notwendigen api schlüssel oder einstellungen hinzu, die von deiner anwendung benötigt werden 7 5 containerisierung deiner preact anwendung mit docker wenn du docker bevorzugst, füge eine dockerfile in dein repository ein, ähnlich wie # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] wählen sie die docker bereitstellungsoption in ihren back4app webbereitstellungseinstellungen 7 6 bereitstellung ihrer anwendung klicken sie auf die bereitstellen schaltfläche, sobald die konfiguration abgeschlossen ist überwachen sie den build prozess, während back4app ihren code abruft, erstellt und ihre anwendung bereitstellt sobald der vorgang abgeschlossen ist, stellt back4app eine url bereit, unter der ihre anwendung gehostet wird 7 7 überprüfung ihrer bereitstellung besuchen sie die bereitgestellte url, um ihre live website zu sehen testen sie alle funktionen, um sicherzustellen, dass jede funktion, einschließlich routen und assets, korrekt geladen wird wenn probleme auftreten, überprüfen sie die konsolenprotokolle des browsers und die bereitstellungsprotokolle in back4app schritt 8 – zusammenfassung und zukünftige richtungen großartige arbeit! sie haben erfolgreich eine vollständige crud anwendung mit preact und back4app entwickelt sie haben ein projekt mit dem namen basic crud app preact , robuste datenbankkollektionen definiert und die admin app für eine effiziente datenverwaltung genutzt anschließend haben sie ihr preact frontend mit ihrem backend verbunden und strenge zugriffskontrollen implementiert was kommt als nächstes? verbessern sie ihre preact app mit zusätzlichen funktionen wie detailansichten, suchfunktionen und echtzeit updates integrieren sie fortgeschrittenere backend logik wie cloud funktionen oder integrationen von drittanbieter apis konsultieren sie die back4app dokumentation https //www back4app com/docs und andere ressourcen für tiefere einblicke in optimierung und benutzerdefinierte konfigurationen indem sie dieses tutorial befolgt haben, haben sie die fähigkeiten erworben, ein skalierbares, sicheres crud backend für ihre preact anwendungen mit back4app zu erstellen viel spaß beim programmieren und erkunden neuer funktionen!