Wie man eine CRUD-Anwendung mit Redwood.js baut? A Step-by-Step Guide

übersicht in diesem leitfaden lernen sie, wie sie eine grundlegende crud anwendung (erstellen, lesen, aktualisieren, löschen) mit redwoodjs erstellen dieses tutorial führt sie durch den prozess der einrichtung ihres projekts mit back4app als backend service, der gestaltung eines robusten datenbankschemas und der integration mit einem redwoodjs frontend indem sie diese schritte befolgen, erstellen sie eine produktionsbereite anwendung, die daten effektiv verwaltet und moderne entwicklungstechniken anwendet wesentliche erkenntnisse meistern sie die erstellung einer crud anwendung, die daten effizient mit einem leistungsstarken backend service verarbeitet entdecken sie, wie sie eine skalierbare datenbank entwerfen und mit einer redwoodjs oberfläche kombinieren, um die benutzerinteraktion zu verbessern erforschen sie die verwendung eines no code drag and drop management tools—der back4app admin app—um crud operationen zu optimieren erlernen sie bereitstellungsstrategien, einschließlich containerisierung mit docker, um ihre webanwendung schnell zu starten voraussetzungen bevor sie beginnen, vergewissern sie sich, dass sie folgendes haben ein aktives back4app konto mit einem neuen projekt, das bereit ist wenn sie anleitung benötigen, schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an eine eingerichtete redwoodjs entwicklungsumgebung verwenden sie die redwoodjs cli, um ihre anwendung zu erstellen stellen sie sicher, dass node js (version 14 oder höher) installiert ist ein grundlegendes verständnis von javascript, redwoodjs und graphql für weitere details besuchen sie die redwoodjs dokumentation https //redwoodjs com/docs/introduction schritt 1 – ihr projekt initiieren ein neues back4app projekt starten melden sie sich bei ihrem back4app dashboard an wählen sie „neue app“ aus, um ein neues projekt zu beginnen benennen sie ihr projekt basic crud app redwoodjs und folgen sie den einrichtungsanweisungen neues projekt erstellen ihr projekt wird jetzt im dashboard angezeigt und legt die grundlage für ihre backend konfiguration und verwaltung schritt 2 – entwurf des datenbankschemas strukturierung ihres datenmodells für diese crud app werden sie mehrere sammlungen entwerfen im folgenden finden sie beispiele für zwei wesentliche sammlungen sowie die erforderlichen felder diese setups sind entscheidend für die ermöglichung zuverlässiger crud funktionalitäten 1\ sammlung artikel diese sammlung enthält details zu jedem artikel feld datentyp zweck id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der name oder titel des elements beschreibung zeichenfolge eine kurze zusammenfassung, die den artikel beschreibt erstellt am datum zeitstempel der erstellung des datensatzes aktualisiert am datum zeitstempel des letzten updates 2\ sammlung benutzer diese sammlung speichert benutzeranmeldeinformationen und details feld datentyp zweck id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort zur authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel des letzten updates sie können diese sammlungen direkt im back4app dashboard konfigurieren, indem sie neue klassen erstellen und geeignete spalten hinzufügen neue klasse erstellen definieren sie jedes feld, indem sie seinen typ auswählen, ihm einen namen geben und seinen standard oder erforderlichen status festlegen spalte erstellen einsatz des back4app ai agenten zur schemaerstellung der back4app ai agent, der von ihrem dashboard aus zugänglich ist, kann automatisch ihr datenbankschema basierend auf einem beschreibenden prompt generieren diese funktion beschleunigt die einrichtung eines konsistenten schemas für ihre anwendung erheblich so verwenden sie den ai agenten starten sie den ai agenten greifen sie über ihr back4app dashboard oder die projekteinstellungen auf den agenten zu detailieren sie ihr datenmodell geben sie einen umfassenden prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und implementieren überprüfen sie die generierten schema vorschläge und wenden sie sie auf ihr projekt an beispiel prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) die nutzung dieses ki gesteuerten ansatzes spart nicht nur zeit, sondern garantiert auch ein gut optimiertes und einheitliches schema schritt 3 – aktivierung der admin app & verwaltung von crud operationen einführung in die admin app die back4app admin app ist eine benutzerfreundliche, codefreie schnittstelle, die es ihnen ermöglicht, ihre backend daten mühelos zu verwalten die drag and drop funktionalität macht das durchführen von crud operationen – wie das hinzufügen, anzeigen, aktualisieren und löschen von datensätzen – zum kinderspiel so aktivieren sie die admin app gehen sie zum menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie dann auf „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein indem sie einen ersten admin benutzer erstellen, der auch rollen festlegt (z b b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich in der admin app an, um ihre daten zu verwalten admin app dashboard crud über die admin app durchführen innerhalb der admin app können sie neue datensätze hinzufügen verwenden sie die schaltfläche „datensatz hinzufügen“ in einer sammlung (z b artikel), um neue daten einzufügen datensätze anzeigen und ändern klicken sie auf einen datensatz, um die details zu sehen und aktualisierungen vorzunehmen datensätze entfernen wählen sie die löschoption, um daten zu entfernen, die nicht mehr benötigt werden diese intuitive schnittstelle vereinfacht die aufgaben der datenverwaltung erheblich schritt 4 – integration von redwoodjs mit back4app jetzt, da ihr backend eingerichtet und über die admin app verwaltbar ist, ist es an der zeit, ihr redwoodjs frontend mit back4app zu verbinden verwendung der graphql api integration redwoodjs ist um graphql herum aufgebaut, was es zu einer perfekten wahl für die integration mit back4app über api aufrufe macht anstatt das sdk zu verwenden, interagieren sie mit ihrem backend über graphql abfragen und mutationen einrichten ihres redwoodjs projekts erstellen sie eine neue redwoodjs anwendung yarn create redwood app basic crud app redwood navigieren sie zu ihrem projektverzeichnis cd basic crud app redwood konfigurieren sie ihre umgebungsvariablen in ihrer env datei fügen sie ihre back4app anmeldeinformationen hinzu back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com daten mit redwoodjs cells abrufen redwoodjs cells vereinfachen das abrufen von daten hier ist ein beispiel für eine cell, die elemente abruft // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; sie können ähnliche graphql abfragen und mutationen in ihren redwoodjs komponenten integrieren, um crud operationen durchzuführen schritt 5 – sicherung ihres backends implementierung der zugriffskontrolle schützen sie ihre daten, indem sie zugriffskontrolllisten (acls) direkt auf objekten festlegen wenn sie beispielsweise einen privaten artikel erstellen, können sie sicherstellen, dass nur der eigentümer lese /schreibrechte hat async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } konfigurieren von klassenebene berechtigungen im back4app dashboard die klassenebene berechtigungen (clps) für jede sammlung festlegen, um den zugriff auf authentifizierte benutzer oder spezifische rollen zu beschränken und sicherzustellen, dass ihre daten sicher bleiben schritt 6 – verwaltung der benutzerauthentifizierung einrichten der kontoverwaltung back4app nutzt ein robustes benutzersystem, das sie in redwoodjs für die benutzerauthentifizierung integrieren können in ihrer redwoodjs app verwalten sie benutzeranmeldungen und registrierungen über api aufrufe beispiel benutzerregistrierung // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; eine ähnliche methode kann für das einloggen und die verwaltung von benutzersitzungen angewendet werden schritt 7 – bereitstellung ihres redwoodjs frontends über webbereitstellung die webbereitstellungsfunktion von back4app macht das hosting ihres redwoodjs frontends nahtlos befolgen sie diese schritte, um ihren code in die produktion zu bringen 7 1 erstellen sie ihre produktionsversion öffnen sie ihren projektordner im terminal führen sie den build befehl aus yarn rw build dies wird einen web/dist ordner erstellen, der ihre optimierten statischen dateien enthält überprüfen sie die build ausgabe stellen sie sicher, dass der web/dist ordner eine index html zusammen mit allen notwendigen assets enthält 7 2 organisieren und committen sie ihren quellcode ihr repository sollte den vollständigen quellcode ihrer redwoodjs anwendung hosten eine typische struktur könnte sein basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json in github einpflegen git initialisieren (falls nötig) git init dateien zur stage hinzufügen git add code committen git commit m "erster commit für redwoodjs crud frontend" erstelle ein github repository (z b basic crud app redwood ) und pushe deinen code git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 integration mit der web bereitstellung zugriff auf die web bereitstellung über ihr back4app dashboard unter ihrem projekt (basic crud app redwood) verbinden sie ihr github konto falls sie dies noch nicht getan haben, indem sie den anweisungen folgen wählen sie ihr repository und branch (z b main ) mit ihrem redwoodjs code 7 4 bereitstellungsparameter festlegen build befehl geben sie yarn rw build an, wenn ihr repository keine vorgefertigte distribution enthält ausgabeverzeichnis konfigurieren sie das ausgabeverzeichnis als web/dist umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen hinzu, wie z b ihre back4app schlüssel 7 5 containerisierung mit docker wenn sie docker für die bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein zum beispiel \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 bereitstellung der anwendung drücken sie die schaltfläche bereitstellen in back4app, nachdem sie ihre konfiguration abgeschlossen haben überwachen sie den bereitstellungsprozess back4app wird ihren code abrufen, das projekt erstellen und es in einer containerisierten umgebung bereitstellen rufen sie ihre anwendungs url ab sobald die bereitstellung abgeschlossen ist, wird eine url bereitgestellt, unter der ihre redwoodjs anwendung gehostet wird 7 7 validieren sie ihre bereitstellung öffnen sie die bereitgestellte url in ihrem browser, um zu bestätigen, dass die seite geladen wird testen sie die anwendungsfunktionalität stellen sie sicher, dass alle seiten, routen und assets korrekt geladen werden fehlerbehebung falls erforderlich nutzen sie die entwicklertools des browsers und die bereitstellungsprotokolle von back4app für erforderliches debugging schritt 8 – abschließende gedanken und zukünftige richtungen herzlichen glückwunsch zum erstellen ihrer auf redwoodjs basierenden crud anwendung mit back4app! sie haben erfolgreich ein projekt mit dem titel basic crud app redwood , detaillierte datenbankkollektionen für artikel und benutzer erstellt und ein sauberes frontend mit robuster datenverwaltung und sicherheit integriert was kommt als nächstes? verfeinern sie ihr frontend verbessern sie ihre redwoodjs anwendung mit funktionen wie detaillierten artikelseiten, suchfunktionen und echtzeit updates integrieren sie erweiterte funktionen erwägen sie, serverlose funktionen, integrationen von drittanbietern oder komplexere zugriffskontrollen hinzuzufügen erforschen sie zusätzliche ressourcen tauchen sie tiefer ein in die back4app dokumentation https //www back4app com/docs und redwoodjs anleitungen https //redwoodjs com/docs für weitere verbesserungen indem sie dieses tutorial befolgt haben, verfügen sie nun über das wissen, um ein skalierbares crud backend zu entwickeln und es nahtlos mit einem modernen redwoodjs frontend unter verwendung von back4app zu integrieren genießen sie ihre programmierreise!