Wie baue ich eine CRUD-App mit Astro?

übersicht in diesem leitfaden lernen sie, wie sie eine crud (erstellen, lesen, aktualisieren und löschen) webanwendung mit astro erstellen dieses tutorial führt sie durch die einrichtung eines back4app projekts – unserem robusten backend – und das entwerfen einer datenstruktur, die grundlegende operationen unterstützt wir werden dann ein astro frontend erstellen, das über rest/graphql apis mit back4app kommuniziert und so eine sichere und effiziente datenverwaltung gewährleistet am ende dieses leitfadens haben sie eine produktionsbereite webanwendung, die über eine benutzerauthentifizierung und eine sichere datenverarbeitung verfügt was sie lernen werden wie man eine crud anwendung mit astro und back4app strukturiert entwicklung eines skalierbaren backends mit benutzerdefinierten sammlungen verwendung einer drag and drop admin oberfläche für mühelose datenverwaltung integration ihres astro frontends mit back4app über rest oder graphql bereitstellung ihres astro projekts und containerisierung mit docker, falls erforderlich voraussetzungen bevor sie beginnen, bestätigen sie bitte, dass sie ein back4app konto mit einem neuen projekt, das bereit ist schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app für anleitungen an eine astro entwicklungsumgebung eingerichtet verwenden sie die offizielle astro dokumentation https //docs astro build um loszulegen stellen sie sicher, dass node js (version 14+) installiert ist grundlegende kenntnisse in javascript, astro und rest apis besuchen sie die astro dokumentation https //docs astro build wenn sie eine auffrischung benötigen schritt 1 – initialisierung ihres projekts ein neues back4app projekt starten melden sie sich bei ihrem back4app konto an klicken sie auf „neue app“ in ihrem dashboard benennen sie ihr projekt basic crud app astro und folgen sie den anweisungen, um die einrichtung abzuschließen neues projekt erstellen nach der erstellung wird ihr projekt auf ihrem back4app dashboard angezeigt – ihre grundlage für die backend konfiguration schritt 2 – gestaltung ihres datenbankschemas strukturierung ihres datenmodells für unsere crud anwendung definieren sie mehrere sammlungen im folgenden finden sie beispiel sammlungen mit feldern und typen, die ihnen helfen, ihr datenbankschema effektiv zu konfigurieren diese struktur unterstützt effiziente crud operationen 1\ artikel sammlung feld typ zweck id objekt id automatisch generierter primärschlüssel titel zeichenfolge name oder titel des elements beschreibung zeichenfolge eine kurze übersicht über den artikel erstellt am datum zeitstempel der erstellung aktualisiert am datum zeitstempel der letzten änderung 2\ benutzersammlung feld typ zweck id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort zur authentifizierung erstellt am datum wann das konto erstellt wurde aktualisiert am datum letzte aktualisierungszeit für das konto sie können diese sammlungen manuell in ihrem back4app dashboard konfigurieren, indem sie neue klassen erstellen und geeignete spalten hinzufügen neue klasse erstellen um ein feld hinzuzufügen, wählen sie einen datentyp aus, geben sie einen feldnamen an, definieren sie einen standardwert, falls erforderlich, und markieren sie, ob das feld erforderlich ist spalte erstellen nutzung des back4app ai agenten für die schemaeinrichtung der integrierte ai agent in back4app kann ihr schema automatisch generieren beschreiben sie ihre gewünschten sammlungen und felder in der ai agenten oberfläche, überprüfen sie seine empfehlungen und wenden sie diese auf ihr projekt an beispielaufforderung create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ 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) dieses tool beschleunigt die einrichtung und stellt sicher, dass ihr schema den anforderungen der anwendung entspricht schritt 3 – aktivierung der admin oberfläche & crud aktionen erkundung der admin oberfläche die back4app admin app ist ein no code tool, das eine visuelle oberfläche zur verwaltung ihrer backend daten bietet ihr drag and drop design ermöglicht es ihnen, crud operationen einfach durchzuführen aktivierung der admin oberfläche öffnen sie das menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie auf „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein , indem sie den ersten admin benutzer erstellen dies konfiguriert auch standardrollen (z b b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich in der admin app an, um ihre sammlungen zu verwalten admin app dashboard datenverwaltung mit der admin oberfläche in der admin app können sie datensätze hinzufügen klicken sie auf „datensatz hinzufügen“ in einer sammlung (wie artikel), um neue einträge zu erstellen datensätze anzeigen/bearbeiten klicken sie auf einen datensatz, um seine felder zu überprüfen oder zu ändern datensätze entfernen löschen sie mühelos veraltete einträge dieses tool vereinfacht crud operationen mit einer intuitiven benutzeroberfläche schritt 4 – astro mit back4app verbinden nachdem ihr backend konfiguriert ist, ist es zeit, ihr astro frontend zu integrieren nutzung von rest/graphql apis da astro ein statischer site generator ist, der für leistung optimiert ist, werden wir mit back4app über rest oder graphql apis interagieren dieser ansatz vermeidet die notwendigkeit des parse sdk beispiel abrufen von elementen über rest im folgenden finden sie ein beispiel für einen rest api aufruf innerhalb einer astro komponente // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> integrieren sie ähnliche api aufrufe zum erstellen, aktualisieren und löschen von datensätzen in ihren astro komponenten schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls auf objekte setzen zum beispiel, um ein element zu erstellen, das nur der eigentümer ändern kann async function createprivateitem(data, owner) { 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 data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } konfigurieren von klassenebene berechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um festzulegen, wer auf ihre daten zugreifen und sie ändern kann schritt 6 – hinzufügen der benutzer authentifizierung benutzerregistrierung und anmeldung einrichten back4app verwendet die benutzerklasse von parse für die authentifizierung erstellen sie in ihrem astro projekt komponenten für die benutzeranmeldung und registrierung, indem sie rest api aufrufe nutzen beispiel benutzerregistrierung // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event 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, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> sie können ähnliche komponenten für die benutzeranmeldung und sitzungsverwaltung erstellen schritt 7 – bereitstellung ihres astro frontends die web deployment funktion von back4app ermöglicht es ihnen, ihr astro projekt nahtlos zu hosten, indem sie ihr github repository verbinden 7 1 erstellen ihrer produktionsversion öffnen sie ein terminal in ihrem projektverzeichnis führen sie den build befehl aus npm run build dies generiert einen optimierten dist ordner mit ihren statischen assets überprüfen sie den build stellen sie sicher, dass der dist ordner eine index html zusammen mit anderen asset verzeichnissen enthält 7 2 organisieren ihres projekt repositorys ihr repository sollte den vollständigen astro quellcode enthalten eine beispielstruktur könnte sein basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md beispiel datei src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 code committen und zu github pushen ein git repository initialisieren (falls nicht geschehen) git init alle dateien hinzufügen git add ändern sie ihre änderungen git commit m "initial commit for astro frontend" ein repository auf github erstellen (z b basic crud app astro ) und pushen git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 verknüpfung von github mit der webbereitstellung von back4app zugriff auf die webbereitstellung melden sie sich bei ihrem back4app dashboard an, navigieren sie zu ihrem projekt ( basic crud app astro ) und wählen sie die webbereitstellung option verbinden sie ihr github konto befolgen sie die anweisungen, um back4app den zugriff auf ihr repository zu erlauben wählen sie ihr repository und ihren branch wählen sie das repository (z b basic crud app astro ) und den branch (typischerweise main ) 7 5 konfigurieren der bereitstellungseinstellungen build befehl geben sie den build befehl an (z b npm run build ), wenn ihr repository keine vorgefertigte ausgabe hat ausgabeverzeichnis setzen sie es auf dist damit back4app weiß, wo ihre statischen dateien zu finden sind umgebungsvariablen fügen sie alle erforderlichen variablen hinzu, wie z b api schlüssel 7 6 dockerisierung ihrer astro anwendung (optional) wenn sie containerisierte bereitstellungen bevorzugen, fügen sie eine dockerfile wie folgt hinzu \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integrieren sie die docker einstellungen in ihre webbereitstellungskonfiguration, wenn gewünscht 7 7 starten ihrer anwendung drücken sie die schaltfläche bereitstellen im abschnitt webbereitstellung überwachen sie den build prozess back4app wird ihren code abrufen, ihn erstellen und ihre anwendung bereitstellen erhalten sie ihre url sobald die bereitstellung abgeschlossen ist, stellt back4app eine url zur verfügung, unter der ihre website live ist schritt 8 – abschluss und zukünftige verbesserungen großartige arbeit! sie haben jetzt eine vollständige crud anwendung mit astro und back4app erstellt ihr projekt umfasst ein backend mit detaillierten sammlungen für artikel und benutzer sowie ein frontend, das alle crud operationen über rest/graphql apis durchführt nächste schritte frontend verbessern fügen sie funktionen wie detailansichten, suchmöglichkeiten und echtzeitbenachrichtigungen hinzu backend funktionalität erweitern erwägen sie die integration von cloud funktionen oder zusätzlichen api endpunkten für komplexere logik tiefer eintauchen erforschen sie weitere ressourcen in der back4app dokumentation https //www back4app com/docs und den astro dokumenten https //docs astro build für fortgeschrittene themen indem sie dieses tutorial befolgt haben, verfügen sie nun über das wissen, um eine robuste und skalierbare crud anwendung mit astro und back4app zu erstellen viel spaß beim programmieren und entdecken neuer möglichkeiten!