How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

übersicht in diesem leitfaden lernen sie, wie sie eine einfache crud anwendung (erstellen, lesen, aktualisieren, löschen) mit dem aurelia framework erstellen dieses tutorial erklärt, wie man eine anwendung erstellt, die in der lage ist, grundlegende datenoperationen durchzuführen, indem man aurelia mit back4app als backend service integriert zunächst richten sie ein back4app projekt mit dem titel basic crud app aurelia ein, das als robustes datenverwaltungssystem dient als nächstes skizzieren sie eine skalierbare datenbankstruktur, indem sie sammlungen und felder manuell definieren oder den back4app ai agenten nutzen, um zuverlässige datenoperationen sicherzustellen anschließend nutzen sie die back4app admin app, die eine drag and drop oberfläche bietet, um ihre daten mühelos zu verwalten schließlich verbinden sie ihr aurelia frontend mit back4app über rest/graphql aufrufe (oder das parse sdk, wo anwendbar) und sichern ihr backend mit detaillierter zugriffskontrolle am ende dieses tutorials haben sie eine produktionsbereite webanwendung mit vollständiger crud funktionalität, benutzerauthentifizierung und sicherer datenverarbeitung haupt erkenntnisse meistere den aufbau von crud anwendungen mit einem zuverlässigen backend service erwerbe praktische fähigkeiten zur gestaltung eines skalierbaren backends und dessen anbindung an ein aurelia frontend erkunde eine no code admin oberfläche (back4app admin app) für nahtlose datenoperationen lerne, wie du deine anwendung mit modernen techniken, einschließlich containerisierung, bereitstellst voraussetzungen bevor du beginnst, stelle sicher, dass du folgendes hast ein back4app konto mit einem aktiven projekt besuche erste schritte mit back4app https //www back4app com/docs/get started/new parse app wenn du anleitung benötigst ein aurelia entwicklungssetup verwende die aurelia cli oder ein ähnliches tool; stelle sicher, dass du node js (version 14 oder höher) installiert hast grundkenntnisse in javascript, aurelia und rest apis konsultiere die aurelia dokumentation https //aurelia io/docs für weitere details, falls erforderlich schritt 1 – einrichten deines projekts erstellen eines neuen back4app projekts melden sie sich bei ihrem back4app konto an drücken sie die schaltfläche „neue app“ auf ihrem dashboard geben sie den projektnamen ein basic crud app aurelia und schließen sie die einrichtungsschritte ab neues projekt erstellen nach der erstellung wird ihr projekt auf ihrem dashboard sichtbar sein, bereit für die backend konfiguration und datenverwaltung schritt 2 – entwerfen ihres datenbankschemas gestaltung des datenmodells für diese crud anwendung definieren sie mehrere sammlungen nachfolgend finden sie beispiele für die erforderlichen sammlungen sowie die felder und datentypen, die benötigt werden, um crud operationen effektiv zu unterstützen 1\ artikel sammlung feld datentyp einzelheiten id objekt id automatisch generierter primärschlüssel titel zeichenfolge name oder titel des elements beschreibung zeichenfolge eine kurze beschreibung des artikels erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel, wann der artikel zuletzt geändert wurde 2\ benutzersammlung feld datentyp einzelheiten id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge eindeutige e mail adresse zur kontobestätigung passwort hash zeichenfolge verschlüsseltes passwort zur benutzerauthentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel der letzten kontenaktualisierung sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie für jede eine neue klasse hinzufügen und die erforderlichen spalten definieren neue klasse erstellen richten sie ihre datenbankfelder einfach ein, indem sie den richtigen datentyp auswählen, feldnamen angeben, standardwerte festlegen und angeben, ob das feld obligatorisch ist spalte erstellen einsatz des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht die schemaerstellung, indem er ihnen ermöglicht, ihr datenmodell durch eingabeaufforderungen zu beschreiben dieses tool erstellt automatisch sammlungen und felder basierend auf ihren anforderungen schritte zur nutzung des ai agenten starten sie den ai agenten öffnen sie ihr back4app dashboard und suchen sie den ai agenten unter den projekteinstellungen beschreiben sie ihr schema geben sie eine detaillierte eingabeaufforderung ein, die die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen überprüfen sie die generierten schema vorschläge und wenden sie sie auf ihr projekt an beispielaufforderung create the following 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) diese methode beschleunigt den prozess der schemaerstellung und garantiert eine konsistente struktur für ihre anwendung schritt 3 – aktivierung der admin oberfläche & crud funktionalität erforschen der admin oberfläche die back4app admin app ist eine robuste no code lösung, die es ihnen ermöglicht, ihre backend daten über eine benutzerfreundliche drag and drop oberfläche zu verwalten dieses tool vereinfacht die ausführung von crud operationen aktivierung der admin app öffnen sie das 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 ihr erstes admin konto erstellen, das auch standardrollen festlegt (wie b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten zu verwalten admin app dashboard crud operationen mit der admin app durchführen innerhalb dieser schnittstelle können sie einträge erstellen verwenden sie die option „datensatz hinzufügen“ in einer sammlung (z b artikel), um neue daten hinzuzufügen einträge anzeigen/ändern klicken sie auf einen datensatz, um dessen details zu überprüfen oder änderungen vorzunehmen einträge entfernen wählen sie die löschoption, um daten zu entfernen, die nicht mehr benötigt werden diese schnittstelle optimiert ihre datenoperationen und verbessert das benutzererlebnis mit ihrem intuitiven design schritt 4 – verknüpfung von aurelia mit back4app nachdem ihr backend über die admin app konfiguriert und verwaltet wurde, ist es an der zeit, ihr aurelia frontend mit back4app zu verbinden nutzung von rest oder graphql sie können rest oder graphql apis verwenden zum beispiel, um elemente über rest abzurufen // example rest request to get items async function fetchitems() { 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('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integrieren sie diese api aufrufe nach bedarf in ihre aurelia komponenten schritt 5 – schutz ihres backends implementierung von zugriffskontrolllisten (acls) verbessern sie die sicherheit, indem sie acls ihren datenobjekten zuweisen zum beispiel, um ein privates element zu erstellen async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } festlegen von klassenberechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um standardmäßige sicherheitsregeln durchzusetzen, sodass nur authentifizierte oder autorisierte benutzer auf sensible informationen zugreifen können schritt 6 – verwaltung der benutzerauthentifizierung konfiguration von benutzerkonten back4app verwendet die benutzerklasse von parse zur handhabung der authentifizierung in ihrer aurelia app können sie die benutzerregistrierung und den login wie unten dargestellt verwalten // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } ein ähnliches muster kann für die anmeldung und sitzungsverwaltung implementiert werden zusätzliche funktionen wie die integration von sozialer anmeldung, e mail verifizierung und passwortzurücksetzung können über das back4app dashboard konfiguriert werden schritt 7 – bereitstellung ihres aurelia frontends über die webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre aurelia anwendung effizient zu hosten, indem sie code aus einem github repository bereitstellen in diesem abschnitt bereiten sie ihren produktionsbuild vor, committen ihren code zu github, verbinden ihr repository mit der webbereitstellung und stellen ihre website bereit 7 1 erstellen sie ihren produktionsbuild öffnen sie ihr projektverzeichnis im terminal führen sie den build befehl aus au build env production dieser befehl generiert einen dist ordner, der ihre optimierten statischen assets enthält bestätigen sie den build stellen sie sicher, dass der dist ordner eine index html und die notwendigen unterverzeichnisse für javascript, css und bilder enthält 7 2 organisieren und hochladen ihres projektcodes ihr github repository sollte alle quellcodedateien für ihr aurelia frontend enthalten eine beispielstruktur könnte so aussehen basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md beispieldateien src/parse config 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; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } this is an additional text in english ihr code auf github committen initialisieren sie git in ihrem projektordner (falls noch nicht geschehen) git init stagen sie ihre dateien git add committen sie ihre änderungen git commit m "erster commit des aurelia frontend quellcodes" erstellen sie ein repository auf github (z b basic crud app aurelia frontend ) pushen sie ihren code zu github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 verknüpfung ihres github repositories mit der webbereitstellung zugriff auf die webbereitstellung melden sie sich bei ihrem back4app dashboard an, navigieren sie zu ihrem projekt (basic crud app aurelia) und wählen sie die webbereitstellung option mit github verbinden befolgen sie die anweisungen, um ihr github konto zu integrieren und back4app zugriff auf ihr repository zu gewähren wählen sie ihr repository und ihren branch wählen sie das repository (z b basic crud app aurelia frontend ) und den branch (z b main ) aus, der ihren code enthält 7 4 bereitstellungskonfiguration legen sie die folgenden konfigurationsdetails fest build befehl wenn der dist ordner nicht vorab erstellt wurde, geben sie einen befehl an (z b au build env production ) an, den back4app ausführen soll ausgabeverzeichnis setzen sie dies auf dist damit back4app weiß, wo sich ihre statischen dateien befinden umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen (wie api schlüssel) in den konfigurationseinstellungen hinzu 7 5 containerisierung ihrer aurelia anwendung (docker) wenn sie die docker bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein, die ähnlich wie folgt aussieht \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurieren sie die docker bereitstellungsoption in der webbereitstellung entsprechend 7 6 bereitstellung ihrer anwendung drücken sie die bereitstellungstaste nach der konfiguration der bereitstellung klicken sie auf bereitstellen überwachen sie den build prozess back4app wird ihren code von github abrufen, den build befehl ausführen, falls erforderlich, und ihre anwendung in einem container bereitstellen rufen sie ihre url ab sobald die bereitstellung abgeschlossen ist, stellt back4app die url zur verfügung, unter der ihre aurelia anwendung gehostet wird 7 7 überprüfen sie ihre bereitstellung öffnen sie die bereitgestellte url besuchen sie die url in ihrem browser, um ihre live website zu sehen testen sie die anwendung stellen sie sicher, dass ihre anwendung korrekt geladen wird, die routen wie vorgesehen funktionieren und alle assets (css, javascript, bilder) bereitgestellt werden fehlerbehebung bei bedarf verwenden sie die entwicklertools des browsers, um probleme zu diagnostizieren, und überprüfen sie die bereitstellungsprotokolle von back4app, falls erforderlich schritt 8 – zusammenfassung und zukünftige richtungen herzlichen glückwunsch! sie haben erfolgreich eine vollständige crud anwendung mit aurelia und back4app erstellt sie haben ein projekt mit dem namen basic crud app aurelia , umfassende datenbankschemas für artikel und benutzer definiert und ihre daten mit der back4app admin app verwaltet sie haben auch ihr aurelia frontend mit dem backend integriert und robuste sicherheitsmaßnahmen implementiert nächste schritte verbessern sie ihre benutzeroberfläche erweitern sie ihre aurelia anwendung mit detailansichten, suchfunktionen und echtzeit datenaktualisierungen fügen sie erweiterte funktionen hinzu erwägen sie die integration von cloud funktionen, drittanbieter apis oder rollenbasierten berechtigungen weiter erkunden schauen sie sich die back4app dokumentation https //www back4app com/docs und zusätzliche aurelia ressourcen für umfassendere anleitungen zur optimierung und anpassung an viel spaß beim programmieren und viel erfolg auf ihrer entwicklungsreise!