Wie Erstellt Man Eine CRUD-App mit Angular?

einführung in diesem leitfaden führen wir sie durch den prozess der erstellung einer grundlegenden crud (create, read, update, delete) anwendung mit angular sie werden lernen, wie man eine anwendung entwickelt, die datenoperationen effizient verwaltet, indem man das robuste framework von angular nutzt um zu beginnen, erstellen und konfigurieren sie ein neues back4app projekt mit dem titel basic crud app angular , das als rückgrat ihrer backend datenverwaltung dient als nächstes entwerfen sie ein skalierbares datenbankmodell, indem sie detaillierte sammlungen und felder skizzieren – entweder manuell oder mit hilfe des back4app ai agenten dieser schritt stellt sicher, dass ihr system gut vorbereitet ist, um alle crud funktionalitäten zu bewältigen nachdem sie ihr schema eingerichtet haben, werden sie die back4app admin app erkunden, eine intuitive drag and drop oberfläche, um ihre sammlungen und datensätze einfach zu verwalten schließlich integrieren sie ihr angular frontend mit back4app unter verwendung von rest/graphql (oder dem parse sdk, wenn gewünscht) und implementieren gleichzeitig fortschrittliche sicherheitsmaßnahmen, um ihr backend zu schützen am ende dieses tutorials haben sie eine produktionsbereite angular anwendung erstellt, die über eine benutzerauthentifizierung und umfassende crud funktionen verfügt wichtige erkenntnisse meistern sie, wie man crud anwendungen erstellt, die daten effizient mit einem zuverlässigen backend verwalten erhalten sie praktische einblicke in die erstellung eines skalierbaren datenmodells und dessen verknüpfung mit einem angular frontend lernen sie, wie sie die benutzerfreundliche oberfläche der back4app admin app für eine mühelose datenverwaltung nutzen verstehen sie bereitstellungsstrategien, einschließlich docker containerisierung, um ihre angular app schnell zu starten voraussetzungen bevor sie beginnen, stellen sie bitte sicher, dass sie folgendes haben ein back4app konto mit einem neuen projekt setup brauchen sie hilfe? schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an eine angular entwicklungsumgebung installieren sie angular cli, indem sie npm install g @angular/cli ausführen und ein neues projekt mit ng new , erstellen stellen sie sicher, dass node js (version 14 oder höher) installiert ist ein grundlegendes verständnis von typescript, angular und rest apis für eine auffrischung besuchen sie die angular dokumentation https //angular io/docs schritt 1 – einrichten ihres projekts ein neues back4app projekt starten melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ in ihrem dashboard geben sie den projektnamen ein basic crud app angular und folgen sie den einrichtungshinweisen neues projekt erstellen sobald das projekt erstellt ist, wird es auf ihrem back4app dashboard angezeigt und bietet eine solide grundlage für ihre backend konfiguration schritt 2 – erstellen ihres datenbankschemas konstruktion ihres datenmodells für diese crud anwendung werden sie mehrere sammlungen definieren im folgenden finden sie beispiele für die sammlungen und deren felder, die die grundlage ihres datenbankschemas bilden diese sammlungen ermöglichen es der anwendung, wesentliche crud operationen durchzuführen 1 artikelsammlung diese sammlung speichert informationen zu jedem artikel feld datentyp einzelheiten id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstellt am datum zeitstempel, wann der artikel hinzugefügt wurde aktualisiert am datum zeitstempel für das letzte update 2 benutzersammlung diese sammlung enthält benutzeranmeldeinformationen und authentifizierungsdaten feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eine eindeutige kennung für den benutzer e mail zeichenfolge eine eindeutige e mail adresse passwort hash zeichenfolge sicher gehashte passwort für die authentifizierung erstellt am datum zeitstempel, der angibt, wann das konto erstellt wurde aktualisiert am datum zeitstempel des letzten updates sie können diese sammlungen manuell im back4app dashboard einrichten, indem sie eine neue klasse für jede erstellen und spalten hinzufügen, um die felder zu definieren neue klasse erstellen fügen sie spalten hinzu, indem sie einen datentyp auswählen, das feld benennen, einen standardwert festlegen und markieren, ob es erforderlich ist spalte erstellen nutzung des back4app ai agenten zur schemaeinrichtung der back4app ai agent ist ein vielseitiges tool, das in ihrem dashboard verfügbar ist und es ihnen ermöglicht, ihr datenbankschema automatisch basierend auf einem beschreibenden prompt zu generieren diese funktion spart zeit und stellt sicher, dass ihr backend perfekt auf crud operationen abgestimmt ist schritte zur nutzung des ai agenten öffnen sie den ai agenten melden sie sich bei ihrem back4app dashboard an und finden sie die option ai agent beschreiben sie ihr schema geben sie einen detaillierten prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen überprüfen sie nach der einreichung das generierte schema und wenden sie es auf ihr projekt an beispiel prompt create the following 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) dieser ki gestützte ansatz optimiert den prozess und sorgt für ein konsistentes, optimiertes schema schritt 3 – aktivierung der admin app & verwaltung von crud operationen ein blick auf die admin app die back4app admin app bietet eine no code , drag and drop oberfläche, mit der sie ihre backend daten mühelos verwalten können damit können sie ganz einfach crud operationen wie das hinzufügen, anzeigen, ändern und löschen von datensätzen durchführen aktivierung der admin app navigieren sie zum menü „mehr“ in ihrem back4app dashboard wählen sie „admin app“ und klicken sie auf „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein erstellen sie ihren ersten admin benutzer, der auch rollen konfiguriert (z b b4aadminuser ) und systemkollektionen admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre sammlungen und datensätze zu verwalten admin app dashboard nutzung der admin app für crud aufgaben innerhalb der admin app können sie neue datensätze hinzufügen klicken sie auf „datensatz hinzufügen“ in einer beliebigen sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen und bearbeiten wählen sie einen datensatz aus, um seine details zu sehen oder seine felder zu aktualisieren datensätze entfernen verwenden sie die löschoption, um veraltete datensätze zu entfernen diese intuitive benutzeroberfläche vereinfacht die verwaltung ihrer backend daten erheblich schritt 4 – verbinden sie ihr angular frontend mit back4app jetzt, da ihr backend vollständig eingerichtet und über die admin app verwaltet wird, ist es an der zeit, ihr angular frontend mit back4app zu verbinden option a integration des parse sdk mit angular installieren sie das parse sdk npm install parse richten sie parse in ihrem angular projekt ein erstellen sie eine konfigurationsdatei (z b src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // ersetzen sie dies durch ihre tatsächlichen back4app anmeldeinformationen parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } und in der html vorlage ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} option b nutzung von rest oder graphql wenn sie das parse sdk nicht verwenden möchten, können sie crud operationen über rest oder graphql ausführen zum beispiel, um artikel mit rest in angular abzurufen, erstellen sie eine dienstmethode wie diese // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } sie können diese api aufrufe nach bedarf in ihre angular komponenten integrieren schritt 5 – schutz ihres backends implementierung von zugriffskontrolllisten (acls) verbessern sie ihre datensicherheit, indem sie acls ihren objekten zuweisen zum beispiel, um ein element zu erstellen, das nur von seinem eigentümer zugänglich ist async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access 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 creating item ', error); } } konfigurieren von klassenebene berechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um standardzugriffsregeln festzulegen, damit nur authentifizierte oder autorisierte benutzer auf sensible daten zugreifen können schritt 6 – verwaltung der benutzerauthentifizierung erstellen und verwalten von benutzerkonten back4app nutzt die benutzerklasse von parse zur verwaltung der authentifizierung in ihrem angular projekt können sie die benutzerregistrierung und anmeldung wie folgt handhaben // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event 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('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } und die entsprechende html vorlage ( auth component html ) register register register register ein ähnlicher ansatz kann für die benutzeranmeldung und sitzungsverwaltung angewendet werden für funktionen wie soziale anmeldungen oder passwortzurücksetzungen passen sie ihre einstellungen im back4app dashboard an schritt 7 – bereitstellung ihres angular frontends die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihre angular anwendung zu hosten, indem sie den code direkt aus einem github repository bereitstellen in diesem abschnitt bereiten sie ihren produktionsbuild vor, committen ihren quellcode und integrieren ihr repository für die bereitstellung 7 1 erstellen ihrer produktionsversion öffnen sie ihr projektverzeichnis in einem terminal führen sie den befehl für den produktionsbuild aus ng build prod dieser befehl kompiliert ihre angular anwendung in einen optimierten dist/ ordner überprüfen sie den build stellen sie sicher, dass das dist/ verzeichnis die index html und alle notwendigen assets enthält 7 2 strukturierung und hochladen ihres quellcodes ihr repository sollte ihr gesamtes angular projekt enthalten eine typische dateistruktur könnte folgendermaßen aussehen basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md beispiel src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; beispiel src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } ihr code zu github committen initialisieren sie ein git repository in ihrem projektordner, falls sie dies noch nicht getan haben git init fügen sie ihre projektdateien hinzu git add committen sie ihre änderungen git commit m "erster commit für angular frontend" erstellen sie ein github repository zum beispiel nennen sie es basic crud app angular pushen sie ihren code zu github git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 verknüpfung ihres github repositorys mit der webbereitstellung zugriff auf die webbereitstellungsfunktion melden sie sich bei ihrem back4app dashboard an, wählen sie ihr projekt ( basic crud app angular ) und wählen sie webbereitstellung verbinden sie ihr github konto befolgen sie die anweisungen, um ihr github konto zu integrieren, damit back4app auf ihr repository zugreifen kann wählen sie ihr repository und branch wählen sie ihr repository (z b basic crud app angular ) und den branch (z b main ), der ihren code enthält 7 4 konfigurieren ihrer bereitstellungseinstellungen geben sie die erforderlichen konfigurationsdetails an build befehl wenn ihr repository keinen vorgefertigten dist/ ordner hat, geben sie den build befehl an (z b ng build prod ) ausgabeverzeichnis setzen sie das ausgabeverzeichnis auf dist/your project name damit back4app weiß, wo sich ihre statischen dateien befinden umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen (wie api schlüssel) in der bereitstellungskonfiguration hinzu 7 5 containerisierung ihrer angular anwendung mit docker wenn sie eine docker basierte bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein zum beispiel # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] fügen sie dieses dockerfile in ihr repository ein und wählen sie dann die docker bereitstellungsoption in den web bereitstellungseinstellungen von back4app 7 6 starten ihrer anwendung klicken sie auf die schaltfläche bereitstellen sobald ihre bereitstellungseinstellungen konfiguriert sind, klicken sie auf bereitstellen überwachen sie den bereitstellungsprozess back4app wird ihren code abrufen, den build befehl ausführen, falls erforderlich, und ihre angular app bereitstellen rufen sie ihre url ab nach einer erfolgreichen bereitstellung stellt back4app eine url zur verfügung, unter der ihre anwendung live ist 7 7 testen ihrer bereitgestellten anwendung besuchen sie die bereitgestellte url öffnen sie die url in ihrem browser funktionalität überprüfen stellen sie sicher, dass ihre angular app ordnungsgemäß geladen wird, alle routen wie erwartet funktionieren und die assets korrekt bereitgestellt werden fehlerbehebung bei bedarf verwenden sie die entwicklertools des browsers, um probleme zu identifizieren und zu beheben überprüfen sie die bereitstellungsprotokolle von back4app und ihre konfiguration, wenn probleme auftreten schritt 8 – abschluss und zukünftige richtungen herzlichen glückwunsch! sie haben erfolgreich eine grundlegende crud anwendung mit angular und back4app erstellt sie haben ein projekt mit dem namen basic crud app angular , umfassende datenbankkollektionen für artikel und benutzer entworfen und ihre daten mit der intuitiven admin app verwaltet zusätzlich haben sie ihr angular frontend mit ihrem backend verbunden und robuste sicherheitsmaßnahmen implementiert nächste schritte verbessern sie ihr frontend erweitern sie ihre angular anwendung um fortgeschrittene funktionen wie detaillierte artikelansichten, suchfunktionen und echtzeit updates funktionalität erweitern erwägen sie die integration zusätzlicher backend logik (wie cloud funktionen) oder die implementierung einer rollenbasierten zugriffskontrolle weitere ressourcen erkunden schauen sie sich die back4app dokumentation https //www back4app com/docs und andere angular ressourcen an, um ihr verständnis zu vertiefen mit diesem leitfaden sind sie nun in der lage, robuste, skalierbare crud backends für ihre angular anwendungen mit back4app zu erstellen viel spaß beim programmieren!