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

in diesem tutorial werden sie eine to do listen anwendung mit preact erstellen und sie mit einem robusten backend verbinden, das von back4app bereitgestellt wird dieser leitfaden ist perfekt für den einstieg, da er die grundlegenden crud (erstellen, lesen, aktualisieren, löschen) operationen abdeckt und sie durch die erstellung einer sauberen, funktionalen benutzeroberfläche führt am ende werden sie eine voll funktionsfähige app haben, die ihnen zeigt, wie sie ein verwaltetes backend integrieren, während sie preact für ein leichtgewichtiges und schnelles frontend verwenden der aufbau einer full stack anwendung kann komplex sein, insbesondere wenn es um die einrichtung des backends, die datenbankverwaltung, die authentifizierung und die bereitstellung geht um diese herausforderungen zu vereinfachen, verwenden wir back4app—eine skalierbare backend as a service (baas) lösung—damit sie sich auf die entwicklung ihres frontends konzentrieren können, während es das hosting, die datenbanken und die apis verwaltet back4app bietet umfassende backend dienste, einschließlich einer sofort einsatzbereiten datenbank, authentifizierung, cloud code für serverseitige logik und sdks für eine reibungslose integration es unterstützt auch containerisierte bereitstellungen, was es zu einer ausgezeichneten wahl für moderne full stack anwendungen macht mit diesen ressourcen 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 preact projekt mit vite zu initialisieren einen backend service zu integrieren, um die daten ihrer anwendung zu verwalten kern 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 node js von nodejs org https //nodejs org/ und überprüfen sie dies, indem sie node v und npm v in ihrem terminal ausführen grundkenntnisse in preact vertrautheit mit funktionalen komponenten, hooks (wie usestate und useeffect ), und jsx syntax wird erwartet wenn sie neu bei preact sind, sollten sie zunächst die grundlagen überprüfen 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 preact projekts mit vite für ein optimiertes entwicklungserlebnis bestätigen sie, dass node js (lts version) installiert ist falls erforderlich, laden sie es von nodejs org https //nodejs org/ überprüfen sie dies, indem sie folgendes ausführen node v npm v initialisieren sie ihr preact projekt mit vite führen sie den folgenden befehl in ihrem terminal aus (ersetzen sie todo app durch ihren bevorzugten projektnamen) npm create vite\@latest todo app template preact navigieren sie in ihr projektverzeichnis cd todo app installieren sie die erforderlichen abhängigkeiten npm install starten sie den entwicklungsserver, um ihre einrichtung zu überprüfen npm run dev ihre preact anwendung sollte jetzt lokal ausgeführt werden öffnen sie die bereitgestellte url in ihrem browser, um dies zu bestätigen als nächstes richten sie ihr backend auf back4app ein, um die datenspeicherung und api interaktionen zu verwalten erstellen des todo backends back4app bietet einen vollständig verwalteten backend service, der von parse , einer nosql datenbank, authentifizierung, cloud code und automatisch generierten apis direkt einsatzbereit ist dieser abschnitt führt sie durch die erstellung eines task datenmodells, um ihre to do elemente zu speichern und es mit ihrem preact frontend zu verbinden 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, todopreactapp ) und wählen sie nodejs/parse als backend typ sobald die app erstellt ist, 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 anpassen) fügen sie in der task klasse die folgenden felder hinzu titel (string) – der titel der aufgabe beschreibung (string) – einzelheiten 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 ihre schemaeinrichtung abzuschließen integration von back4app mit preact integrieren sie back4app in ihr preact 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 in ihrer src/main jsx , importieren und konfigurieren sie parse wie folgt import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) mit dem verbundenen backend sind sie bereit, die to do listen benutzeroberfläche in preact zu erstellen und crud operationen zu implementieren entwicklung des frontends mit preact jetzt, da ihr backend konfiguriert ist, erstellen sie die benutzeroberfläche für ihre to do listen anwendung mit preact sie werden komponenten erstellen, um aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während sie den zustand mit hooks verwalten organisieren ihrer komponenten ihre anwendung wird die folgenden wichtigen komponenten enthalten taskform jsx – verwaltet die hinzufügung neuer aufgaben tasklist jsx – zeigt alle aufgaben an und bietet steuerungen zum abschließen oder löschen taskitem jsx – stellt eine einzelne aufgabe dar mit aktionen zum umschalten des abschlusses oder zum entfernen der aufgabe erstellen sie einen components ordner im src und fügen sie diese dateien hinzu mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx zustandsverwaltung mit hooks verwenden sie die hooks von preact ( usestate und useeffect ) für das zustandsmanagement und nebeneffekte beginnen sie mit der einrichtung des zustands in app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; erstellen der aufgabenformular komponente in taskform jsx , erstellen sie ein kontrolliertes formular zum hinzufügen von aufgaben verwenden sie usestate um eingabewerte zu verwalten und daten an back4app zu übermitteln import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; anzeigen der aufgabenliste in tasklist jsx , rendere die liste der aufgaben, indem du durch das aufgaben array mappst und die taskitem komponente verwendest import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; erstellen der task item komponente in taskitem jsx , erstelle eine komponente, die es dir ermöglicht, eine aufgabe als abgeschlossen zu markieren oder sie zu löschen import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; styling deiner anwendung füge die folgenden stile in die index css datei im src ordner hinzu / container styling / 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 dieses css in ihre src/main jsx import " /index css"; abschluss der benutzeroberfläche ihre preact to do liste anwendung verfügt jetzt über ein dynamisches frontend, das mit back4app und benutzerdefiniertem styling integriert ist die app ermöglicht es ihnen, aufgaben hinzuzufügen, anzuzeigen, zu aktualisieren und zu löschen, während die effiziente kommunikation zwischen frontend und backend aufrechterhalten wird als nächstes werden sie ihre preact app 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 für die bereitstellung ihrer anwendungen mit docker basierten bereitstellungen können sie ihr preact frontend verpacken und mühelos bereitstellen vite für die produktion konfigurieren preact projekte, die mit vite erstellt wurden, laufen standardmäßig im entwicklungsmodus für die produktion erstellen sie eine statische version und bedienen sie sie mit einem leichten webserver wie nginx aktualisieren sie ihre vite config js um den richtigen basis pfad festzulegen import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); generieren sie produktionsbereite dateien npm run build erstellen einer dockerfile für ihre app erstellen sie eine dockerfile im stammverzeichnis, um ihren container zu definieren \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] testen des containers lokal bevor sie bereitstellen, bauen und testen sie ihren docker container lokal docker build t todo preact frontend führen sie den container aus docker run p 8080 80 todo preact frontend besuchen sie http //localhost 8080 in ihrem browser, um zu bestätigen, dass ihre app korrekt bereitgestellt wird 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, deployen sie mit back4app web deployment 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 das todo preact repository aus wählen sie dockerfile deployment und bestätigen sie die build einstellungen klicken sie auf "deploy" um den build prozess zu starten überwachung und verwaltung von deployments nach dem deployment verwenden sie das back4app dashboard, um protokolle zur fehlersuche anzuzeigen die leistung und ressourcennutzung des containers zu überwachen neudepoyments bei neuen commits auszulösen benutzerdefinierte domains zu konfigurieren, falls erforderlich testen und debuggen ihrer anwendung nach der bereitstellung testen sie ihre preact app gründlich api konnektivität überprüfen öffnen sie die entwicklertools ihres browsers (f12 → netzwerk), um api aufrufe während der aufgabenoperationen zu überwachen aufgaben hinzufügen und abrufen verwenden sie die benutzeroberfläche, um aufgaben hinzuzufügen, und aktualisieren sie dann die seite, um die persistenz im back4app datenbankbrowser zu überprüfen crud operationen testen stellen sie sicher, dass das markieren von aufgaben als abgeschlossen und das löschen korrekt im backend reflektiert werden umgang mit randfällen validieren sie formulareingaben und simulieren sie langsame netzwerkbedingungen mit entwicklertools wenn sie auf probleme stoßen, überprüfen sie die back4app protokolle oder ihre api konfiguration best practices für die nutzung von back4app diensten verbessern sie die leistung und sicherheit ihrer anwendung, indem sie diese best practices befolgen api aufrufe optimieren verwenden sie batch anfragen für mehrere operationen und wählen sie nur die notwendigen felder in ihren abfragen aus sensible daten sichern speichern sie anmeldeinformationen wie anwendungs id und javascript schlüssel in umgebungsvariablen mit vite erstellen sie eine env datei vite parse app id=your app id vite parse js key=your js key auto scaling aktivieren aktiviere das auto scaling in der back4app webbereitstellung, um hohen traffic zu verwalten sicherheit verbessern beschränke die berechtigungen auf klassenebene (clps), um datenänderungen zu steuern, und richte bei bedarf acls ein cloud code nutzen lagere komplexe logik in den cloud code aus, um die leistung zu verbessern und die api exposition zu reduzieren fazit du hast jetzt eine vollständige to do listen anwendung mit preact für das frontend und den robusten backend diensten von back4app erstellt dieses tutorial hat dich durch die initialisierung eines preact projekts, die integration des parse sdk und die bereitstellung deiner app mit containerisierten workflows auf back4app geführt während du weiterentwickelst, ziehe in betracht, funktionen wie erweiterte benutzerauthentifizierung, echtzeit updates und integrationen von drittanbietern hinzuzufügen für weitere details und unterstützung, siehe die back4app dokumentation https //www back4app com/docs