Wie man eine CRUD-Anwendung mit StencilJS baut? Ein umfassendes Tutorial

übersicht in diesem leitfaden lernen sie, wie sie eine grundlegende crud anwendung (erstellen, lesen, aktualisieren und löschen) mit stenciljs erstellen dieses tutorial führt sie durch den aufbau einer webanwendung, die grundlegende operationen zur effektiven datenverwaltung ausführt wir beginnen mit der erstellung eines back4app projekts mit dem namen basic crud app stenciljs , das als ihr robuster backend dienen wird anschließend entwerfen sie eine skalierbare datenbank, indem sie sammlungen und felder definieren – entweder manuell oder mit unterstützung des back4app ai agenten dieser schritt stellt sicher, dass ihre datenbank so konzipiert ist, dass sie alle crud operationen zuverlässig unterstützt als nächstes nutzen sie die back4app admin app, eine intuitive drag and drop oberfläche, um ihre sammlungen nahtlos zu verwalten dieses no code tool vereinfacht die handhabung von crud aktionen schließlich verbinden sie ihr stenciljs frontend über rest/graphql apis mit back4app während das parse sdk verfügbar ist, konzentrieren wir uns auf api integrationen, die perfekt zu stenciljs passen und sicherstellen, dass ihr backend durch fortschrittliche zugriffskontrollen geschützt bleibt am ende dieses tutorials haben sie eine produktionsbereite webanwendung, die grundlegende crud funktionen sowie benutzerauthentifizierung und robuste datenverwaltung unterstützt wesentliche erkenntnisse meistern sie den prozess des aufbaus von crud apps mit einem zuverlässigen backend system verstehen sie, wie man ein skalierbares backend entwirft und es mit einem stenciljs frontend verbindet lernen sie, ein no code admin tool (die back4app admin app) für effiziente datenoperationen zu verwenden entdecken sie bereitstellungsstrategien, einschließlich docker containerisierung, um ihre webanwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem aktiven projekt benötigen sie hilfe? schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an ein stenciljs entwicklungssetup verwenden sie die offizielle stenciljs dokumentation https //stenciljs com/docs/introduction um ihre umgebung einzurichten stellen sie sicher, dass node js (v14 oder höher) installiert ist grundkenntnisse in javascript, webkomponenten und rest apis frischen sie ihre kenntnisse über stenciljs konzepte https //stenciljs com/docs auf, falls erforderlich schritt 1 – starten sie ihr projekt ein neues back4app projekt starten melden sie sich bei ihrem back4app konto an wählen sie die option „neue app“ aus ihrem dashboard benennen sie ihr projekt basic crud app stenciljs und folgen sie den anweisungen auf dem bildschirm, um die einrichtung abzuschließen neues projekt erstellen sobald die einrichtung abgeschlossen ist, wird ihr projekt im dashboard sichtbar sein und eine solide grundlage für ihre backend konfiguration bieten schritt 2 – erstellen ihres datenbankschemas definieren des datenmodells für diese crud anwendung müssen sie mehrere sammlungen einrichten im folgenden finden sie beispiel sammlungen zusammen mit ihren feldern und datentypen, um ihnen zu helfen, ihre datenbank für effiziente crud operationen zu strukturieren 1\ sammlung artikel diese sammlung enthält details zu jedem artikel feld datentyp einzelheiten id objekt id automatisch generierter primärschlüssel titel zeichenfolge name oder titel des elements beschreibung zeichenfolge kurze beschreibung des artikels erstellt am datum zeitstempel, wann der artikel erstellt wurde aktualisiert am datum zeitstempel für das letzte update 2\ sammlung benutzer diese sammlung verwaltet benutzerprofile und authentifizierung feld datentyp einzelheiten id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge verschlüsseltes passwort zur authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte aktualisierungszeitstempel für das benutzerkonto sie können diese sammlungen manuell im back4app dashboard hinzufügen, indem sie eine neue klasse für jede erstellen und spalten mit den entsprechenden datentypen hinzufügen neue klasse erstellen befolgen sie die anweisungen, um einen datentyp auszuwählen, einen feldnamen anzugeben, standardwerte festzulegen und zu kennzeichnen, ob das feld obligatorisch ist spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent ist ein innovatives tool, das in ihrem dashboard verfügbar ist und die erstellung ihres datenbankschemas basierend auf einer einfachen eingabe automatisiert diese funktion beschleunigt die projekteinrichtung und stellt sicher, dass ihr schema mit den anforderungen ihrer anwendung übereinstimmt so nutzen sie den ai agenten zugriff auf den ai agenten öffnen sie ihr back4app dashboard und finden sie den ai agenten im menü oder unter den projekteinstellungen geben sie ihre schemaanforderungen ein geben sie eine detaillierte eingabe an, die die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen sobald der ai agent ihre eingabe verarbeitet hat, überprüfen sie die generierten schema vorschläge 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 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 stellt sicher, dass ihr schema sowohl konsistent als auch optimiert ist schritt 3 – aktivierung der admin app & crud funktionen einführung in die admin app die back4app admin app bietet eine no code oberfläche, die es einfach macht, backend daten zu verwalten ihr intuitives drag and drop system ermöglicht es ihnen, alle crud operationen – erstellen, lesen, aktualisieren und löschen – mit leichtigkeit durchzuführen aktivierung der admin app öffnen sie das „mehr“ menü auf 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 admin benutzer erstellen dieser prozess konfiguriert auch standardrollen wie b4aadminuser und systemkollektionen admin app aktivieren sobald aktiviert, melden sie sich bei der admin app an, um ihre daten zu verwalten admin app dashboard verwalten von crud aktionen über die admin app innerhalb dieser schnittstelle können sie datensätze hinzufügen klicken sie auf die option „datensatz hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen und bearbeiten wählen sie einen datensatz aus, um seine felder zu inspizieren oder zu ändern datensätze entfernen nutzen sie die löschfunktion, um veraltete datensätze zu entfernen dieses optimierte tool verbessert die benutzererfahrung, indem es die aufgaben der datenverwaltung vereinfacht schritt 4 – verknüpfung von stenciljs mit back4app nachdem ihr backend über die admin app konfiguriert und verwaltet wurde, besteht der nächste schritt darin, ihr stenciljs frontend mit back4app zu verbinden option a verwendung von rest oder graphql apis für stenciljs konzentrieren wir uns auf api integrationen, um die dinge einfach zu halten beispiel daten über rest abrufen // example rest api call to retrieve items 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(); console log('items retrieved ', data results); } catch (error) { console error('error retrieving items ', error); } }; fetchitems(); integrieren sie diese api aufrufe nach bedarf in ihre stenciljs komponenten option b verwendung des parse sdk (falls gewünscht) wenn sie das parse sdk verwenden möchten, können sie es weiterhin in ihr stenciljs projekt integrieren, da es sich um eine javascript bibliothek handelt unser beispiel hier konzentriert sich jedoch auf api aufrufe schritt 5 – stärkung ihres backends implementierung von zugriffskontrolllisten (acls) stellen sie die datensicherheit sicher, indem sie acls für ihre objekte festlegen 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); // define acl restrict read/write access to the owner 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 klassenebenenberechtigungen (clps) legen sie im back4app dashboard clps für jede sammlung fest, um sicherzustellen, dass nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – verwaltung der benutzerauthentifizierung einrichten von benutzerkonten back4app verwendet die benutzerklasse von parse zur verwaltung der authentifizierung implementieren sie in ihrem stenciljs projekt die benutzerregistrierung und den login wie folgt // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(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 registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } eine ähnliche struktur kann für die anmeldung und sitzungsverwaltung angewendet werden sie können auch funktionen wie soziale anmeldungen, e mail verifizierung und passwortzurücksetzungen direkt vom back4app dashboard aktivieren schritt 7 – starten ihres stenciljs frontends mit webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre stenciljs anwendung zu hosten, indem sie den code direkt aus einem github repository bereitstellen 7 1 erstellen ihres produktionsbundles öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies erzeugt einen www ordner, der optimierte statische assets enthält bestätigen sie den build stellen sie sicher, dass der www ordner eine index html zusammen mit den notwendigen css , js und bilddateien enthält 7 2 organisieren und hochladen ihres quellcodes ihr repository sollte alle quell dateien für ihre stenciljs anwendung umfassen eine beispielstruktur könnte so aussehen basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md beispiel quelldatei src/parseconfig ts // src/parseconfig ts 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; beispiel quelldatei src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { 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 fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } ihr code in github einpflegen initialisieren sie ein git repository in ihrem projektverzeichnis (falls noch nicht geschehen) git init staging ihrer dateien git add committen sie ihre änderungen git commit m "erster commit des stenciljs frontend codes" erstellen sie ein neues github repository nennen sie es etwas wie basic crud app stenciljs frontend pushen sie ihren code zu github git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 verbindung ihres repositories über web deployment zugriff auf web deployment melden sie sich bei ihrem back4app dashboard an, wählen sie ihr projekt ( basic crud app stenciljs ), und klicken sie auf den web deployment bereich github integrieren verbinden sie ihr github konto gemäß den bereitgestellten anweisungen dadurch kann back4app auf ihr repository zugreifen wählen sie das repository und den branch wählen sie ihr repository (z b basic crud app stenciljs frontend ) und wählen sie den entsprechenden branch (z b main ) 7 4 einrichten ihres deployments geben sie zusätzliche bereitstellungsdetails ein build befehl wenn ihr repository keinen vorgefertigten www ordner enthält, geben sie einen build befehl an (z b npm run build ) back4app wird dies während der bereitstellung ausführen ausgabeverzeichnis setzen sie das ausgabeverzeichnis auf www damit back4app weiß, wo ihre statischen dateien zu finden sind umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen (z b api schlüssel) in den bereitstellungseinstellungen hinzu 7 5 containerisierung ihres stenciljs projekts mit docker wenn sie docker für die bereitstellung bevorzugen, fügen sie eine dockerfile in ihr repository ein, die ähnlich ist wie \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] fügen sie diese datei in ihr repository ein und wählen sie die docker bereitstellung in back4app 7 6 bereitstellung ihrer anwendung bereitstellung initiieren klicken sie auf die bereitstellen schaltfläche, nachdem sie ihre einstellungen konfiguriert haben überwachen sie den build prozess back4app wird ihren code von github abrufen, den build befehl (falls festgelegt) ausführen und ihre containerisierte anwendung bereitstellen zugriff auf ihre anwendung sobald die bereitstellung abgeschlossen ist, stellt back4app eine url zur verfügung, unter der ihre stenciljs app live ist 7 7 validierung ihrer bereitstellung besuchen sie die url öffnen sie die bereitgestellte url in ihrem webbrowser funktionalität testen stellen sie sicher, dass die anwendung ordnungsgemäß geladen wird, die routen korrekt funktionieren und alle assets (css, js, bilder) ohne probleme bereitgestellt werden debuggen, falls erforderlich verwenden sie die entwicklertools des browsers, um fehler zu überprüfen überprüfen sie die back4app protokolle und verifizieren sie die github und build konfigurationen, falls probleme auftreten schritt 8 – zusammenfassung und zukünftige richtungen gut gemacht! sie haben erfolgreich eine vollständige crud anwendung mit stenciljs und back4app erstellt sie haben ein projekt mit dem titel basic crud app stenciljs , sammlungen für artikel und benutzer entworfen und die daten mit der admin app verwaltet zusätzlich haben sie ihr stenciljs frontend mit ihrem backend verbunden und robuste sicherheitsmaßnahmen implementiert nächste schritte verbessern sie das frontend erwägen sie, ihre stenciljs app mit erweiterten funktionen wie detaillierten artikelansichten, suchfunktionen und echtzeitbenachrichtigungen zu erweitern fügen sie weitere funktionen hinzu integrieren sie komplexe backend logik (z b cloud funktionen), integrationen von drittanbieter apis oder implementieren sie rollenbasierte berechtigungen vertiefen sie ihr wissen erforschen sie die back4app dokumentation https //www back4app com/docs und andere tutorials für weitere einblicke in die leistungsoptimierung und benutzerdefinierte integrationen indem sie dieses tutorial befolgt haben, haben sie die fähigkeiten erworben, um eine robuste