Wie baut man eine CRUD-App mit JavaScript?

übersicht in diesem tutorial lernen sie, wie sie eine vollständige crud anwendung (erstellen, lesen, aktualisieren, löschen) mit javascript erstellen wir werden back4app nutzen, um ihre backend daten mühelos zu verwalten dieser leitfaden behandelt die wesentlichen crud operationen, von der konfiguration eines back4app projekts bis zur integration ihrer javascript anwendung mit dem parse javascript sdk oder der rest api zunächst richten sie ein projekt auf back4app mit dem titel basic crud app javascript , das eine robuste backend lösung bietet anschließend definieren sie ihr datenschema – entweder manuell oder mit hilfe des ki agenten von back4app – um den anforderungen ihrer anwendung gerecht zu werden als nächstes verwalten sie ihr backend über die benutzerfreundliche back4app admin app, die es ihnen ermöglicht, datenoperationen über eine einfache drag and drop oberfläche durchzuführen schließlich verbinden sie ihre javascript anwendung mit back4app und implementieren eine sichere benutzerauthentifizierung sowie grundlegende crud funktionalitäten am ende dieses leitfadens haben sie eine produktionsbereite javascript anwendung erstellt, die alle grundlegenden crud operationen mit sicherem zugriffskontrolle durchführen kann wichtige punkte, die sie sich merken sollten meistern sie, wie man eine auf javascript basierende crud app mit einem skalierbaren backend entwickelt verstehen sie, wie sie ihr backend strukturieren und es nahtlos mit ihrem javascript code integrieren lernen sie, die admin app von back4app für einfache datenmanipulation und crud operationen zu nutzen erforschen sie bereitstellungsoptionen, einschließlich containerisierung mit docker, um ihre javascript anwendung zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem konfigurierten projekt brauchen sie hilfe? besuchen sie erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine javascript entwicklungsumgebung sie können visual studio code oder einen anderen bevorzugten editor zusammen mit node js (version 14 oder höher) verwenden grundkenntnisse in javascript, modernen frameworks und rest apis verweisen sie auf die javascript dokumentation https //developer mozilla org/en us/docs/web/javascript falls nötig schritt 1 – initialisierung ihres projekts einrichten eines neuen back4app projekts 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 javascript und schließen sie den einrichtungsprozess ab neues projekt erstellen sobald das projekt erstellt ist, erscheint es auf ihrem dashboard und legt die grundlage für ihre backend konfiguration schritt 2 – erstellung ihres datenschemas entwurf von datenstrukturen für unsere crud app werden wir zwei hauptklassen (sammlungen) auf back4app einrichten diese klassen und ihre felder sind entscheidend für die durchführung der erforderlichen crud operationen 1\ die artikel sammlung diese sammlung speichert details zu jedem artikel feld typ einzelheiten id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der name des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstelltam datum zeitstempel der erstellung des elements aktualisiertam datum zeitstempel des letzten updates 2\ die benutzer sammlung diese sammlung verwaltet benutzeranmeldeinformationen und authentifizierungsdetails feld typ einzelheiten id objekt id automatisch generierte eindeutige id benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passworthash zeichenfolge gehashtes passwort für sichere authentifizierung erstelltam datum zeitstempel der kontoerstellung aktualisiertam datum letzte aktualisierung des kontos zeitstempel sie können diese klassen und ihre felder direkt im back4app dashboard erstellen neue klasse erstellen sie können spalten hinzufügen, indem sie einen typ auswählen, das feld benennen, standardwerte zuweisen und pflichtoptionen festlegen spalte erstellen verwendung des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht die erstellung von schemata, indem er ihr datenmodell basierend auf ihrer beschreibung automatisch generiert diese funktion beschleunigt die projekteinrichtung und stellt sicher, dass ihr schema mit ihren crud anforderungen übereinstimmt so nutzen sie den ai agenten öffnen sie den ai agenten melden sie sich bei ihrem back4app dashboard an und finden sie den ai agenten in den projekteinstellungen beschreiben sie ihr schema geben sie eine detaillierte beschreibung der benötigten sammlungen und felder ein überprüfen und bestätigen nach der verarbeitung zeigt der ai agent ein vorgeschlagenes schema an überprüfen und bestätigen sie, um es anzuwenden beispielbeschreibung create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) dieser ki unterstützte ansatz spart zeit und garantiert ein gut strukturiertes datenmodell für ihre app schritt 3 – aktivierung der admin app und durchführung von crud operationen überblick über die admin app die back4app admin app bietet eine codefreie schnittstelle für effizientes backend datenmanagement mit ihren intuitiven drag and drop funktionen können sie mühelos crud operationen wie das hinzufügen, anzeigen, ändern und löschen von datensätzen durchführen aktivierung der admin app gehen sie zum abschnitt “mehr” in ihrem back4app dashboard wählen sie “admin app” und klicken sie auf “admin app aktivieren ” konfigurieren sie ihre admin anmeldeinformationen indem sie das anfängliche admin konto einrichten dies legt auch rollen wie b4aadminuser und systemklassen fest admin app aktivieren nach der aktivierung melden sie sich in der admin app an, um die daten ihrer anwendung zu verwalten admin app dashboard verwaltung von crud operationen über die admin app innerhalb der admin app können sie datensätze einfügen verwenden sie die option „datensatz hinzufügen“, um neue einträge in einer sammlung wie artikel datensätze anzeigen und bearbeiten klicken sie auf einen datensatz, um details anzuzeigen oder felder zu ändern datensätze löschen entfernen sie alle datensätze, die nicht mehr benötigt werden diese einfache benutzeroberfläche optimiert das datenmanagement und verbessert die benutzerfreundlichkeit insgesamt schritt 4 – verbinden sie ihre javascript app mit back4app nachdem das backend eingerichtet ist, besteht der nächste schritt darin, ihre javascript anwendung mit back4app zu integrieren option a verwendung des parse javascript sdk fügen sie das parse sdk hinzu wenn sie npm verwenden, installieren sie das sdk, indem sie folgendes ausführen npm install parse initialisieren sie parse in ihrer anwendung erstellen sie eine initialisierungsdatei (z b parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 3\ implement crud functions for example, create a module to handle item operations ```javascript // itemsservice js import parse from 'parse'; export const getitems = async () => { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); return \[]; } }; export const createitem = async (title, description) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item created successfully "); } catch (error) { console error("error creating item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; option b verwendung von rest oder graphql wenn sie das parse sdk nicht verwenden möchten, können sie über rest aufrufe mit back4app interagieren zum beispiel, um artikel über rest abzurufen import fetch from 'node fetch'; export const fetchitemsrest = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', 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); } catch (error) { console error("error fetching items via rest ", error); } }; integrieren sie diese api aufrufe nach bedarf in ihre javascript module schritt 5 – schutz ihres backends zugriffskontrollen konfigurieren stellen sie sicher, dass ihre daten sicher sind, indem sie zugriffskontrolllisten (acls) einrichten zum beispiel, um ein element zu erstellen, das nur von seinem ersteller zugänglich ist import parse from 'parse'; export const createprivateitem = async (title, description, user) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(user, true); acl setwriteaccess(user, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item created successfully "); } catch (error) { console error("error creating private item ", error); } }; anpassen der klassenebene berechtigungen (clps) legen sie standardzugriffsregeln für ihre sammlungen über das back4app dashboard fest, um sicherzustellen, dass nur authentifizierte benutzer auf sensible daten zugreifen können schritt 6 – implementierung der benutzerauthentifizierung einrichten von benutzerkonten back4app verwendet die integrierte parse benutzerklasse zur handhabung der authentifizierung in ihrer javascript anwendung verwalten sie die benutzerregistrierung und den login wie folgt import parse from 'parse'; export const signupuser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("error during sign up ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login failed ", error); } }; diese methode kann für sitzungsmanagement, passwortwiederherstellung und mehr erweitert werden schritt 7 – bereitstellung ihrer javascript anwendung back4app vereinfacht die bereitstellung sie können ihre javascript app mit methoden wie docker containerisierung bereitstellen 7 1 erstellen ihrer anwendung bündeln sie ihre anwendung verwenden sie ihr build tool (wie webpack oder einen ähnlichen bundler), um ihren code zu kompilieren überprüfen sie den build stellen sie sicher, dass ihre gebündelten dateien alle notwendigen module und assets enthalten 7 2 organisieren ihrer projektstruktur eine typische javascript projektstruktur könnte folgendermaßen aussehen basic crud app javascript/ \| src/ \| | index js \| | parseconfig js \| | services/ \| | itemsservice js \| | authservice js \| public/ \| | index html \| package json \| readme md beispiel parseconfig js // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 7 3 dockerisieren ihrer javascript app wenn sie sich für containerisierung entscheiden, fügen sie eine dockerfile in ihrem projektstamm hinzu \# use an official node js runtime as the base image from node 14 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# define the command to run your application cmd \["npm", "start"] 7 4 bereitstellung über back4app web deployment verbinden sie ihr github repository stellen sie sicher, dass ihr javascript projekt auf github gehostet wird konfigurieren sie die bereitstellungseinstellungen verwenden sie im back4app dashboard die web deployment option, um ihr repository zu verknüpfen (z b basic crud app javascript ) und wählen sie den gewünschten branch aus setzen sie build und ausgabebefehle geben sie ihren build befehl an (z b npm run build ) und das ausgabeverzeichnis bereitstellen klicken sie auf bereitstellen und beobachten sie die protokolle, bis ihre anwendung live geht schritt 8 – abschließende gedanken und zukünftige verbesserungen herzlichen glückwunsch! sie haben erfolgreich eine auf javascript basierende crud anwendung entwickelt, die mit back4app integriert ist sie haben ein projekt namens basic crud app javascript , strukturiert ihre items und users sammlungen und verwaltet ihr backend mit der back4app admin app zusätzlich haben sie ihre javascript anwendung über das parse sdk (oder rest api) verbunden und robuste sicherheitsmaßnahmen implementiert was als nächstes zu erkunden ist funktionalität verbessern erwägen sie, funktionen wie suchfilter, detailansichten oder echtzeitdatenaktualisierungen hinzuzufügen backend funktionen erweitern schauen sie sich cloud funktionen, die integration von drittanbieter apis oder die implementierung fortschrittlicher rollenbasierter zugriffskontrollen an ihre expertise vertiefen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie zusätzliche tutorials, um ihre app weiter zu optimieren viel spaß beim programmieren und genießen sie den aufbau ihrer fortschrittlichen javascript crud anwendung!