Building a Basic CRUD Application with Lit?

übersicht in diesem leitfaden erstellen sie eine voll funktionsfähige crud (erstellen, lesen, aktualisieren, löschen) anwendung mit lit wir werden demonstrieren, wie man daten dynamisch verwaltet, indem wir eine anwendung erstellen, die diese wesentlichen operationen durchführt zunächst richten sie ein back4app projekt mit dem namen basic crud app lit ein, das als ihr robuster backend dient nachdem sie ihr projekt eingerichtet haben, entwerfen sie ein flexibles datenbankschema, indem sie sammlungen und felder entweder manuell oder mit hilfe des back4app ai agenten definieren dieser schritt ist entscheidend, um sicherzustellen, dass ihr system crud operationen zuverlässig verarbeitet als nächstes nutzen sie die back4app admin app – eine benutzerfreundliche drag and drop oberfläche – um ihre sammlungen effizient zu verwalten schließlich integrieren sie ihr lit frontend mit back4app unter verwendung von rest/graphql, um sicherzustellen, dass ihr backend mit angemessenen zugriffskontrollen sicher bleibt am ende dieses tutorials haben sie eine produktionsbereite webanwendung, die nicht nur grundlegende crud funktionen ausführt, sondern auch benutzerauthentifizierung und sichere datenverarbeitung umfasst wichtige punkte meistern sie die entwicklung von crud anwendungen, die daten mit einem zuverlässigen backend effektiv verwalten lernen sie, eine skalierbare datenbank zu entwerfen und nahtlos mit einem lit basierten frontend zu integrieren nutzen sie ein drag and drop admin tool (die back4app admin app), um crud operationen zu vereinfachen verstehen sie bereitstellungsstrategien, einschließlich containerisierung mit docker, um ihre webanwendung effizient zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt für unterstützung siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine lit entwicklungsumgebung richten sie ihr projekt mit ihrem bevorzugten starter kit ein und stellen sie sicher, dass node js (v14 oder höher) installiert ist grundkenntnisse in javascript, lit und rest apis konsultieren sie die lit dokumentation https //lit dev/docs/ bei bedarf schritt 1 – initialisierung ihres projekts ein neues back4app projekt einrichten 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 lit und folgen sie den anweisungen, um es zu erstellen neues projekt erstellen sobald ihr projekt erstellt ist, wird es auf dem dashboard angezeigt und bietet ihnen die grundlage für die backend konfiguration und das projektmanagement schritt 2 – erstellen ihres datenbankschemas konstruktion ihres datenmodells für diese crud anwendung definieren sie mehrere sammlungen im folgenden finden sie beispiel sammlungen mit vorgeschlagenen feldern und datentypen, die ihnen helfen werden, ein effektives schema einzurichten, das crud operationen verarbeiten kann 1\ artikelsammlung feld datentyp einzelheiten id objekt id automatisch generierter primärschlüssel titel zeichenfolge name des artikels beschreibung zeichenfolge kurze details zum artikel 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 die eindeutige e mail adresse des benutzers passwort hash zeichenfolge gehashtes passwort für sichere authentifizierung erstellt am datum zeitstempel für die kontoerstellung aktualisiert am datum zeitstempel für das letzte kontoupdate sie können diese sammlungen manuell über das back4app dashboard hinzufügen, indem sie neue klassen erstellen und die entsprechenden spalten definieren neue klasse erstellen wählen sie für jedes feld einfach einen datentyp aus, weisen sie einen namen zu, legen sie einen standardwert fest, falls erforderlich, und geben sie an, ob es obligatorisch ist spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent, der von ihrem dashboard aus verfügbar ist, kann automatisch ihr schema basierend auf einem beschreibenden prompt generieren diese funktion optimiert das projektmanagement, indem sie konsistenz in ihrer backend einrichtung gewährleistet so verwenden sie den ai agenten starten sie den ai agenten navigieren sie zum ai agenten von ihrem back4app dashboard oder innerhalb der projekteinstellungen beschreiben sie ihr datenmodell fügen sie einen umfassenden prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und anwenden überprüfen sie die generierten vorschläge und bestätigen sie diese, um ihr projekt zu aktualisieren beispiel prompt create the following collections in my back4app application 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 dieser ki funktion spart wertvolle zeit und sorgt dafür, dass ihre datenbank optimal strukturiert ist schritt 3 – aktivierung der admin app & crud funktionalitäten einführung in die admin app die back4app admin app bietet eine no code oberfläche für müheloses backend datenmanagement ihre intuitive drag and drop funktionalität ermöglicht es ihnen, crud operationen – erstellen, lesen, aktualisieren und löschen von datensätzen – mit leichtigkeit auszuführen so aktivieren sie die admin app greifen sie auf den abschnitt “mehr” in ihrem back4app dashboard zu wählen sie “admin app” und klicken sie auf “admin app aktivieren ” richten sie ihre admin anmeldeinformationen ein indem sie einen ersten admin benutzer erstellen, der rollen konfiguriert (wie 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 crud operationen über die admin app durchführen in der admin app können sie einträge erstellen klicken sie auf die schaltfläche „eintrag hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze lesen/ändern klicken sie auf einen datensatz, um dessen details zu überprüfen oder seine felder zu ändern datensätze entfernen verwenden sie die löschfunktion, um einträge zu entfernen, die nicht mehr benötigt werden diese einfache benutzeroberfläche verbessert das benutzererlebnis erheblich, indem sie die datenverwaltung optimiert schritt 4 – verbindung von lit mit back4app jetzt, da ihr backend konfiguriert und verwaltet ist, ist es an der zeit, ihr lit frontend mit back4app zu integrieren option a verwendung des parse sdk (wenn zutreffend) installieren sie das parse sdk npm install parse richten sie parse in ihrer lit app ein erstellen sie eine konfigurationsdatei (z b src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // fügen sie hier ihre back4app anmeldeinformationen ein parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implementieren sie parse in einer lit komponente erstellen sie eine lit komponente, die elemente abruft und anzeigt // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { 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("fehler beim abrufen der elemente ", error); } } render() { return html` \<h2>elemente\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; option b verwendung von rest oder graphql wenn das parse sdk für ihr projekt nicht geeignet ist, führen sie crud operationen mit rest oder graphql durch zum beispiel, um elemente über rest abzurufen // example rest request to get 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 fetching items ', error); } }; fetchitems(); integrieren sie diese api aufrufe nach bedarf in ihre lit komponenten schritt 5 – ihren backend schützen implementierung von zugriffssteuerungslisten (acls) sichern sie ihre objekte, indem sie acls festlegen zum beispiel, um ein privates element zu erstellen async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } konfigurieren von klassenebenenberechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um die standardmäßigen zugriffsregeln durchzusetzen dies stellt sicher, dass nur authentifizierte oder autorisierte benutzer auf sensible informationen zugreifen können schritt 6 – implementierung der benutzerauthentifizierung benutzerkonten erstellen back4app nutzt die benutzerklasse von parse zur verwaltung der authentifizierung implementieren sie in ihrer lit anwendung die benutzerregistrierung und den login wie unten gezeigt // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e 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) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; sie können ebenfalls den login und das sitzungsmanagement implementieren zusätzliche funktionen wie soziale authentifizierung, e mail verifizierung und passwortzurücksetzungen können über das back4app dashboard eingerichtet werden schritt 7 – bereitstellung ihres lit frontends über webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihre lit anwendung zu hosten, indem sie code aus einem github repository bereitstellen befolgen sie diese schritte, um ihren produktionsbuild vorzubereiten, ihren code auf github zu pushen und ihre website bereitzustellen 7 1 erstellen ihres produktionsbuilds öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies erstellt einen build ordner, der optimierte statische assets enthält überprüfen sie den build bestätigen sie, dass der build ordner eine index html datei sowie die erforderlichen unterverzeichnisse enthält 7 2 organisieren und hochladen ihres codes ihr github repository sollte den vollständigen quellcode für ihr lit frontend enthalten eine typische projektstruktur könnte folgendermaßen aussehen basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md beispielkonfigurationsdatei src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; beispiel hauptanwendungsdatei src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); 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("failed to load 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); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; code zu github pushen initialisieren sie git in ihrem projektverzeichnis git init fügen sie alle ihre dateien hinzu git add committen sie ihre änderungen git commit m "initial lit frontend commit" erstellen sie ein neues repository auf github (z b basic crud app lit frontend ) pushen sie ihren code git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 verbindung ihres github repositorys mit der back4app webbereitstellung zugriff auf die webbereitstellung melden sie sich bei ihrem back4app dashboard an, wählen sie ihr projekt (basic crud app lit) und wählen sie die webbereitstellung option verknüpfen sie ihr github konto befolgen sie die anweisungen, um ihr github konto zu verbinden, damit back4app auf ihr repository zugreifen kann wählen sie ihr repository und ihren branch wählen sie das repository (z b basic crud app lit frontend ) und den branch (z b main ) aus, der ihren lit code enthält 7 4 konfigurieren der bereitstellungseinstellungen geben sie ihre build einstellungen an build befehl wenn ein vorgefertigter build ordner fehlt, verwenden sie einen befehl wie npm run build back4app wird diesen befehl während der bereitstellung ausführen ausgabeverzeichnis setzen sie dies auf build damit back4app ihre statischen dateien finden kann umgebungsvariablen fügen sie alle erforderlichen api schlüssel oder andere umgebungsspezifische werte hinzu 7 5 containerisierung ihrer lit anwendung mit docker wenn sie docker bevorzugen, fügen sie eine dockerfile in ihr repository ein \# use a lightweight node image for building the 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 remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] wählen sie in ihren back4app bereitstellungseinstellungen die docker bereitstellungsoption, um ihre app zu containerisieren 7 6 starten ihrer anwendung initiieren sie die bereitstellung klicken sie auf die bereitstellen schaltfläche, nachdem sie ihre einstellungen abgeschlossen haben überwachen sie den prozess back4app wird ihren github code abrufen, den build befehl ausführen und ihren container bereitstellen holen sie sich ihre live url sobald die bereitstellung abgeschlossen ist, wird eine url bereitgestellt, unter der ihre lit anwendung gehostet wird 7 7 validierung ihrer bereitstellung besuchen sie die url öffnen sie den bereitgestellten link in ihrem browser testen sie die funktionalität stellen sie sicher, dass die anwendung ordnungsgemäß geladen wird, die navigation funktioniert und alle assets korrekt bereitgestellt werden debuggen sie bei bedarf verwenden sie die entwicklertools des browsers, um probleme zu untersuchen wenn probleme auftreten, überprüfen sie die bereitstellungsprotokolle in back4app schritt 8 – abschließende gedanken und zukünftige verbesserungen großartige arbeit! sie haben erfolgreich eine grundlegende crud anwendung mit lit und back4app entwickelt sie haben ein projekt namens basic crud app lit , ein detailliertes datenbankschema für artikel und benutzer definiert und ihre daten mit der admin app verwaltet darüber hinaus haben sie ihr lit frontend mit dem backend integriert und robuste sicherheitsmaßnahmen implementiert nächste schritte verbessern sie ihr frontend fügen sie funktionen wie detaillierte artikelseiten, suchfunktionen und echtzeit updates hinzu erweitern sie die backend funktionen integrieren sie erweiterte funktionen wie cloud funktionen, externe api dienste oder rollenbasierte zugriffskontrollen erforschen sie weitere ressourcen besuchen sie die back4app dokumentation https //www back4app com/docs und andere tutorials für tiefere einblicke in leistung und anpassung indem sie diesem leitfaden folgen, verfügen sie nun über die fähigkeiten, ein skalierbares, sicheres crud backend für ihre lit anwendung mit back4app zu erstellen viel spaß beim programmieren und bleiben sie innovativ!