How to Build a Redwood.js Frontend and Connect It to a Backend?

in diesem tutorial werden sie eine to do liste anwendung mit redwood js erstellen und sie mit einem verwalteten backend auf back4app verbinden dieser praktische leitfaden führt sie durch jeden schritt – von der einrichtung ihres redwood js projekts bis zur integration von parse für die backend kommunikation – damit sie sich auf die erstellung einer dynamischen und responsiven benutzeroberfläche konzentrieren können redwood js wurde entwickelt, um die full stack entwicklung zu vereinfachen, indem es ein modernes, auf react basierendes frontend mit einer robusten backend architektur kombiniert in diesem tutorial werden sie back4app verwenden, um ihre backend dienste zu verwalten, sodass sie grundlegende crud operationen durchführen können, ohne sich um die verwaltung der serverinfrastruktur kümmern zu müssen wichtige erkenntnisse am ende dieses leitfadens werden sie in der lage sein ein modernes redwood js projekt mit branchenüblichen tools zu initialisieren ihr redwood js frontend mit einem back4app backend unter verwendung des parse javascript sdk zu verbinden crud operationen zu implementieren, um ihre to do liste zu verwalten ihre redwood js app zu containerisieren und sie über die back4app webbereitstellung bereitzustellen voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie folgendes haben node js und npm/yarn auf ihrem computer installiert überprüfen sie die installation mit node v und npm v oder yarn v grundkenntnisse in redwood js , einschließlich der projektstruktur, routing und komponenten vertrautheit mit react konzepten ist von vorteil ein back4app konto zur einrichtung und verwaltung ihrer backend dienste melden sie sich bei back4app https //www back4app com/ an, falls erforderlich mit diesen voraussetzungen sind sie bereit, ihr redwood js projekt einzurichten und es mit einem skalierbaren backend zu verbinden projektsetup beginnen sie mit der erstellung einer neuen redwood js anwendung öffnen sie ihr terminal und führen sie den folgenden befehl aus, wobei sie todo app durch den gewünschten projektnamen ersetzen yarn create redwood app todo app navigieren sie in ihr projektverzeichnis cd todo app installieren sie alle abhängigkeiten yarn install führen sie den entwicklungsserver aus, um zu überprüfen, ob ihr projekt korrekt eingerichtet ist yarn rw dev besuchen sie die im terminal angezeigte url, um zu bestätigen, dass ihre redwood js app läuft einrichten des todo backends auf back4app back4app bietet ein verwaltetes parse backend, das die datenverarbeitung für ihre anwendung vereinfacht in diesem abschnitt erstellen sie ein datenmodell, um aufgaben für ihre to do liste zu speichern erstellen ihrer backend anwendung melden sie sich bei ihrem back4app dashboard https //www back4app com/ an und klicken sie auf "erstellen sie eine neue app " benennen sie ihre anwendung (z b todoredwoodapp ) und wählen sie nodejs/parse als backend typ gehen sie zum "datenbank" > "browser" bereich, klicken sie auf "eine klasse erstellen" und wählen sie "benutzerdefiniert " benennen sie die klasse task und setzen sie die berechtigungen auf klassenebene so, dass öffentliches lesen und schreiben erlaubt ist (passen sie diese einstellungen später nach bedarf an) fügen sie die folgenden felder zur task klasse hinzu title (string) – der titel der aufgabe description (string) – einzelheiten zur aufgabe completed (boolean) – ob die aufgabe erledigt ist duedate (datum) – der fälligkeitstermin für die aufgabe klicken sie auf "speichern" um das schema abzuschließen integration von back4app mit redwood js um ihre redwood js app mit back4app zu verbinden, installieren sie das parse javascript sdk yarn add parse als nächstes konfigurieren sie parse, indem sie eine neue datei im web/src verzeichnis erstellen nennen sie sie parseclient js und fügen sie den folgenden code hinzu ersetzen sie 'your application id' und 'your javascript key' durch ihre anmeldeinformationen aus dem back4app dashboard (unter app einstellungen > sicherheit & schlüssel ) // web/src/parseclient js 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 diese konfiguration ermöglicht es ihnen, parse methoden von jeder redwood js komponente aus aufzurufen frontend mit redwood js erstellen nachdem ihr backend verbunden ist, ist es zeit, die to do listen oberfläche zu erstellen in redwood js werden seiten im web/src/pages verzeichnis abgelegt erstellen der todo seite erstellen sie einen neuen ordner mit dem namen todopage in web/src/pages und fügen sie eine datei mit dem namen todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx öffnen sie web/src/pages/todopage/todopage jsx und fügen sie den folgenden code hinzu // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) 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) } } const addtask = 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() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? 'completed' ''}`} \> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage routen konfigurieren um ihre todo seite zugänglich zu machen, öffnen sie die routes jsx datei, die sich in web/src/routes jsx befindet, und fügen sie eine neue route hinzu // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; globale stile hinzufügen um globale stile hinzuzufügen, fügen sie die folgenden css stile in die css datei mit dem namen index css im web/src ordner hinzu / web/src/index 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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; } } ihre redwood js app verfügt jetzt über eine funktionale to do listen oberfläche, die mit einem back4app backend interagiert containerisierung und bereitstellung ihrer redwood js app auf back4app die webbereitstellung von back4app bietet eine containerisierte umgebung, die die bereitstellung von apps vereinfacht in diesem abschnitt verpacken sie ihre redwood js app in einen docker container und stellen sie bereit vorbereitung ihrer app für die produktion zuerst bauen sie ihre redwood js app für die produktion yarn rw build web erstellen einer dockerfile um docker für ihr redwood js projekt einzurichten, müssen sie den docker einrichtungsbefehl in ihrem terminal ausführen yarn rw setup docker die einrichtungsbefehle führen mehrere aufgaben aus es werden vier dateien erstellt dockerfile, dockerignore, docker compose dev yml und docker compose prod yml es wird das @redwoodjs/api server paket zur api seite und das @redwoodjs/web server paket zur web seite hinzugefügt es wird die einstellung browser open in redwood toml aktualisiert wenn diese einstellung wahr bleibt, wird der entwicklungsserver beim ausführen von docker compose dev yml nicht mehr funktionieren der befehl stellt eine dockerfile bereit, die ihre redwood js anwendung erstellt und ein produktionsimage mit einer minimalen node js laufzeit vorbereitet sie können die dev compose datei mit folgendem befehl starten docker compose f /docker compose dev yml up öffnen sie http //localhost 8390 in ihrem browser, um zu überprüfen, ob ihre redwood js app korrekt ausgeführt wird bereitstellung über back4app web deployment 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 melden sie sich dann bei back4app web deployment https //www back4app com/containers an und folgen sie diesen schritten klicken sie auf "neue app erstellen" und geben sie die details ihres projekts ein wählen sie github repository und autorisieren sie back4app wählen sie ihr todo redwood repository wählen sie dockerfile bereitstellung und überprüfen sie die build einstellungen klicken sie auf "bereitstellen" um den bereitstellungsprozess zu starten nach der bereitstellung verwenden sie das back4app dashboard, um protokolle zu überwachen, builds zu verwalten und bei bedarf benutzerdefinierte domains einzurichten testen und debuggen ihrer anwendung stellen sie nach der bereitstellung sicher, dass ihre app wie erwartet funktioniert api konnektivität verwenden sie die entwicklertools des browsers, um zu überprüfen, ob api anfragen zum hinzufügen, umschalten und löschen von aufgaben erfolgreich sind datenpersistenz fügen sie aufgaben über die benutzeroberfläche hinzu und aktualisieren sie, um zu bestätigen, dass die aufgaben in der back4app datenbank bestehen bleiben crud operationen testen sie das umschalten und löschen von aufgaben, während sie auf fehler in der konsole oder den api protokollen achten randfälle überprüfen sie, ob eingabebestätigungen leere einreichungen verhindern best practices und optimierungstipps für eine sichere und effiziente anwendung sollten sie folgendes beachten api anfragen optimieren verwenden sie batch verarbeitung und holen sie nur die benötigten felder ab umgebungsvariablen sichern sie sensible anmeldeinformationen (anwendungs id und javascript schlüssel) mit umgebungsvariablen zugriffskontrolle implementieren sie dynamische acls, damit nur autorisierte benutzer daten ändern können cloud code lagern sie komplexe logik in den back4app cloud code aus, um leistung und sicherheit zu verbessern fazit sie haben nun eine vollständige to do listen anwendung mit redwood js erstellt, die mit einem back4app backend integriert ist dieses tutorial deckte alles von der projektinitialisierung und backend integration bis hin zur containerisierten bereitstellung ab während sie weiterentwickeln, sollten sie in betracht ziehen, funktionen wie fortgeschrittenes benutzermanagement, echtzeit updates und integrationen von drittanbietern hinzuzufügen für weitere informationen erkunden sie die back4app dokumentation https //www back4app com/docs und die ressourcen von redwood js