Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

übersicht dieser leitfaden zeigt ihnen, wie sie eine voll funktionsfähige crud (erstellen, lesen, aktualisieren, löschen) anwendung mit inferno js erstellen sie werden lernen, wie man grundlegende datenoperationen durch die entwicklung eines crud systems behandelt, das informationen effizient manipuliert und aktualisiert unsere backend grundlage wird von back4app unterstützt, wo sie ein projekt mit dem namen basic crud app infernojs einrichten, um ihre daten nahtlos zu verwalten zuerst richten sie ihr back4app projekt ein und entwerfen ein skalierbares datenbankschema, indem sie klassen und felder definieren – entweder manuell oder mit dem back4app ai assistant dieser prozess stellt sicher, dass ihre datenstrukturen robust genug für alle crud aufgaben sind danach nutzen sie die back4app admin oberfläche, ein no code drag and drop tool, das die datenverwaltung einfach macht schließlich verbinden sie ihr inferno js frontend mit back4app, entweder über das sdk (wenn es zu ihrer einrichtung passt) oder über api aufrufe, während sie strenge zugriffskontrollen zur sicherheit anwenden am ende dieses tutorials haben sie eine produktionsreife webanwendung mit benutzerauthentifizierung, dynamischer datenverarbeitung und einer responsiven benutzeroberfläche kern erkenntnisse meistere crud funktionalitäten mit einem robusten backend auf back4app verstehe, wie man ein skalierbares datenbankschema entwirft und es mit deinem inferno js frontend integriert erkunde ein visuelles verwaltungstool, um mühelos erstellungs , lese , aktualisierungs und löschoperationen auszuführen lerne bereitstellungsstrategien, einschließlich containerisierung mit docker anforderungen ein back4app konto und ein neu erstelltes projekt wenn du anleitung benötigst, schau dir erste schritte mit back4app https //www back4app com/docs/get started/new parse app an ein inferno js entwicklungssetup verwende dein bevorzugtes inferno startprojekt oder boilerplate bestätige, dass node js (version 14 oder neuer) installiert ist ein grundlegendes verständnis von javascript, inferno js und rest api prinzipien für weitere details konsultiere die inferno dokumentation https //infernojs org/docs/introduction bevor du einsteigst, stelle bitte sicher, dass du schritt 1 – initialisierung ihres projekts starten eines neuen back4app projekts 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 infernojs und folgen sie den anweisungen auf dem bildschirm, um die erstellung abzuschließen neues projekt erstellen nach der erstellung erscheint ihr projekt in ihrem dashboard und bietet eine solide backend plattform für ihre app schritt 2 – gestaltung des datenbankschemas definition ihres datenmodells für diese crud anwendung werden sie mehrere klassen erstellen nachfolgend finden sie beispiele für zwei wesentliche klassen mit ihren feldern, die eingerichtet sind, um crud operationen zu unterstützen 1\ die artikelklasse feld typ einzelheiten id objekt id automatisch generierter primärschlüssel titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze erklärung des artikels erstellt am datum zeitstempel, der markiert, wann das element erstellt wurde aktualisiert am datum zeitstempel für das letzte update 2\ die benutzerklasse feld typ 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 verschlüsseltes passwort für sichere authentifizierung erstellt am datum zeitstempel für die kontoerstellung aktualisiert am datum zeitstempel für das letzte kontoupdate erstellen sie diese klassen manuell im back4app dashboard, indem sie „neue klasse“ auswählen und die erforderlichen spalten hinzufügen neue klasse erstellen sie können jedes feld definieren, indem sie einen datentyp auswählen, einen namen angeben und standardwerte oder anforderungen festlegen spalte erstellen nutzung des back4app ai assistenten für die schemaeinrichtung der back4app ai assistent vereinfacht die erstellung von schemata, indem er klassen basierend auf ihren beschreibungen automatisch generiert so verwenden sie den ai assistenten zugriff auf den ai assistenten melden sie sich bei ihrem back4app dashboard an und suchen sie den ai assistenten in den einstellungen beschreiben sie ihr datenmodell geben sie eine umfassende beschreibung der klassen und felder ein, die sie benötigen überprüfen und implementieren der assistent wird klassendefinitionen vorschlagen bestätigen und wenden sie diese einstellungen an beispielaufforderung create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) die verwendung des ai assistenten vereinfacht ihre einrichtung und sorgt für konsistenz und effizienz schritt 3 – aktivierung der admin oberfläche & crud funktionen einführung in die admin oberfläche die back4app admin oberfläche ist ein leistungsstarkes no code tool, das ein drag and drop erlebnis für die verwaltung ihres backends bietet sie ermöglicht es ihnen, crud operationen mühelos auszuführen aktivierung der admin oberfläche gehe zum abschnitt “mehr” in deinem back4app dashboard klicke auf “admin app” und dann auf “admin app aktivieren ” richte dein admin konto ein indem du deinen ersten admin benutzer erstellst dieser prozess konfiguriert automatisch rollen und essentielle systemklassen admin app aktivieren nach der aktivierung melde dich bei der admin oberfläche an, um deine daten zu verwalten admin app dashboard crud über die admin oberfläche durchführen innerhalb der admin oberfläche kannst du einträge erstellen verwenden sie die option „datensatz hinzufügen“ innerhalb einer klasse (wie artikel), um neue daten einzufügen einträge lesen/ändern klicken sie auf einen datensatz, um dessen details anzuzeigen oder zu aktualisieren einträge entfernen nutzen sie die löschfunktion, um unerwünschte datensätze zu entfernen diese schnittstelle verbessert die benutzerfreundlichkeit erheblich, indem sie alle crud aufgaben vereinfacht schritt 4 – verbindung von inferno js mit back4app mit ihrem backend, das über die admin oberfläche konfiguriert ist, ist es zeit, ihr inferno js frontend zu integrieren option a verwendung des parse sdk installieren sie das parse sdk npm install parse initialisieren sie parse in ihrer inferno app 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 inferno komponente erstellen sie beispielsweise eine komponente, um elemente abzurufen und aufzulisten // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("fehler beim laden der elemente ", err); } } render() { return ( \<div> \<h2>elemente\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; option b verwendung von rest oder graphql apis wenn das parse sdk für ihr szenario nicht ideal ist, können sie crud aktionen über rest oder graphql ausführen zum beispiel, um elemente mit rest abzurufen // 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 (err) { console error('error fetching items ', err); } }; fetchitems(); binden sie diese api aufrufe nach bedarf in ihre inferno komponenten ein schritt 5 – stärkung ihres backends implementierung von zugriffskontrolllisten (acls) stellen sie die datensicherheit sicher, indem sie acls zuweisen zum beispiel, um ein privates element zu erstellen async function createprivateitem(itemdata, owner) { 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(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } konfigurieren von klassenebenenberechtigungen (clps) passen sie in ihrem back4app dashboard die clps für jede klasse an, um standardzugriffsrichtlinien durchzusetzen, damit nur autorisierte benutzer mit sensiblen daten interagieren können schritt 6 – verwaltung der benutzerauthentifizierung einrichten von benutzerkonten back4app verwendet die benutzerklasse (über parse) zur handhabung der authentifizierung implementieren sie in ihrer inferno js app registrierungs und anmeldefunktionen, wie unten dargestellt // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } eine ähnliche strategie gilt für die anmeldung und sitzungsverwaltung zusätzliche funktionen wie soziale authentifizierung, e mail verifizierung und passwortwiederherstellung können im back4app dashboard eingerichtet werden schritt 7 – bereitstellung ihres inferno js frontends die web bereitstellungsoption von back4app ermöglicht es ihnen, ihr inferno js frontend mühelos zu hosten, indem sie ihr github repository verknüpfen 7 1 für die produktion bauen öffnen sie ihr projektverzeichnis in einem terminal führen sie den befehl für den produktionsbuild aus npm run build dieser befehl kompiliert ihre anwendung in einen build ordner, der optimierte statische assets enthält bestätigen sie den build überprüfen sie, ob der build ordner eine index html datei und andere asset ordner enthält 7 2 organisation und hochladen ihres codes ihr repository sollte den vollständigen quellcode ihres inferno js frontends enthalten eine beispielverzeichnisstruktur basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md beispieldateien src/parseconfig js // src/parseconfig 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 // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; code auf github hochladen git in deinem projektordner initialisieren git init stage deine dateien git add commit deine änderungen git commit m "erster commit für inferno js frontend" erstelle ein github repository nenne es basic crud app infernojs frontend push dein projekt git remote add origin https //github com/dein benutzername/basic crud app infernojs frontend git git push u origin main 7 3 verbindung von github mit der web bereitstellung von back4app gehe zu web bereitstellung melde dich bei back4app an, wähle dein projekt ( basic crud app infernojs ), und klicke auf die web bereitstellung funktion integriere mit github folge den anweisungen, um dein github konto zu verknüpfen, damit back4app auf dein repository zugreifen kann wähle dein repository und branch wähle das repository (z b basic crud app infernojs frontend ) und den branch (typischerweise main ), der deinen code enthält 7 4 bereitstellungseinstellungen geben sie zusätzliche konfigurationen ein build befehl wenn ihr repository einen vorgebauten build ordner nicht hat, geben sie einen befehl wie npm run build , an back4app wird dies während der bereitstellung ausführen ausgabeverzeichnis setzen sie die ausgabe auf build , damit back4app weiß, wo sich ihre statischen dateien befinden umgebungsvariablen fügen sie alle erforderlichen variablen (wie api schlüssel) in den konfigurationseinstellungen hinzu 7 5 dockerisierung ihrer anwendung wenn sie sich für die containerisierung entscheiden, fügen sie eine dockerfile in ihr repository ein, die ähnlich ist wie \# use an official node image for the build stage 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 files 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 die docker bereitstellung in back4app, wenn sie diese methode wählen 7 6 starten ihrer anwendung klicken sie auf bereitstellen sobald alle einstellungen konfiguriert sind, drücken sie die bereitstellen taste beobachten sie den build back4app wird ihren code abrufen, ihr projekt erstellen und es in einem container bereitstellen zugriff auf ihre app nach der bereitstellung stellt back4app eine url zur verfügung, unter der ihre inferno js app live ist 7 7 bestätigung der bereitstellung besuchen sie die bereitgestellte url öffnen sie die url in ihrem browser funktionalität testen stellen sie sicher, dass die app lädt, alle routen korrekt funktionieren und die assets (css, js, bilder) wie erwartet angezeigt werden fehlerbehebung verwenden sie die entwicklertools, um nach fehlern zu suchen wenn probleme auftreten, überprüfen sie die back4app protokolle und verifizieren sie die github einstellungen schritt 8 – abschluss und zukünftige richtungen herzlichen glückwunsch! sie haben eine vollständige crud anwendung mit inferno js und back4app erstellt sie haben das projekt basic crud app infernojs , ihre datenklassen entworfen und die intuitive admin oberfläche für die datenverwaltung genutzt ihr frontend ist jetzt verbunden und mit robusten zugriffskontrollen gesichert nächste schritte verbessern sie die benutzeroberfläche erweitern sie ihre inferno js app mit detaillierten ansichten, suchfunktionen und live benachrichtigungen fügen sie weitere funktionen hinzu erwägen sie die implementierung zusätzlicher backend funktionen (wie cloud code), die integration von drittanbieter apis oder die einführung von rollenbasiertem zugriff weiter erkunden tauchen sie ein in die back4app dokumentation https //www back4app com/docs und zusätzliche tutorials zur leistungsoptimierung und benutzerdefinierten integrationen viel spaß beim programmieren und viel erfolg bei ihren zukünftigen projekten!