Wie man eine grundlegende CRUD-App mit Marionette.js erstellt: Eine Schritt-für-Schritt-Anleitung

einführung in diesem leitfaden lernen sie, wie sie eine vollständige crud anwendung (erstellen, lesen, aktualisieren, löschen) mit marionette js erstellen dieses tutorial zeigt ihnen, wie sie eine anwendung einrichten, die datenoperationen effizient verwaltet wir beginnen mit der einrichtung eines back4app projekts namens basic crud app marionettejs , das als leistungsstarker backend für ihre anwendung dient nachdem sie ihr projekt konfiguriert haben, entwerfen sie ein flexibles datenbankschema, indem sie sammlungen und felder definieren – entweder manuell oder mit unterstützung des back4app ai agenten dieser ansatz stellt sicher, dass ihr backend gut organisiert ist und crud operationen zuverlässig durchführen kann als nächstes verwenden sie die back4app admin app – eine drag and drop oberfläche – um ihre sammlungen mühelos zu verwalten, sodass sie erstellen , lesen , aktualisieren und löschen operationen mit leichtigkeit durchführen können schließlich integrieren sie ihr marionette js frontend mit back4app unter verwendung von rest/graphql (oder dem parse sdk, falls zutreffend), während sie sicherstellen, dass ihr backend mit fortschrittlichen zugriffskontrollen sicher bleibt am ende dieses tutorials haben sie eine produktionsbereite webanwendung, die crud operationen sowie benutzerauthentifizierung und sichere datenverwaltung unterstützt wichtige erkenntnisse erstellen sie crud anwendungen, die daten mit einem robusten backend effektiv verwalten gewinnen sie einblicke in die erstellung eines skalierbaren backends und dessen verbindung zu einem marionette js frontend lernen sie, eine no code management oberfläche (back4app admin app) zu verwenden, um datenoperationen zu vereinfachen verstehen sie bereitstellungstechniken, einschließlich docker containerisierung, um ihre anwendung schnell zu starten voraussetzungen bevor sie beginnen, stellen sie bitte sicher, dass sie folgendes haben ein back4app konto mit einem neuen projekt für anleitungen siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine marionette js entwicklungsumgebung sie können ein boilerplate oder starter kit für marionette js verwenden stellen sie sicher, dass node js (version 14 oder höher) installiert ist ein grundlegendes verständnis von javascript, marionette js und rest apis verweisen sie auf die marionette js dokumentation https //marionettejs com/docs/master/ für weitere details schritt 1 – projektsetup erstellen eines neuen back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ auf ihrem dashboard benennen sie ihr projekt basic crud app marionettejs und vervollständigen sie die eingabeaufforderungen neues projekt erstellen nachdem sie das projekt erstellt haben, wird es auf ihrem dashboard angezeigt und bildet die grundlage für die backend konfiguration und verwaltung schritt 2 – entwerfen ihres datenbankschemas gestaltung ihres datenmodells für diese crud app werden sie mehrere sammlungen definieren hier sind beispiele für sammlungen, die sie erstellen könnten, einschließlich der felder und datentypen, die ihre datenbank antreiben werden 1\ artikel sammlung diese sammlung enthält die details zu jedem artikel feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge name des artikels beschreibung zeichenfolge eine kurze zusammenfassung über den artikel erstellt am datum zeitstempel für die erstellung des elements aktualisiert am datum zeitstempel für das letzte update 2\ benutzersammlung diese sammlung speichert benutzeranmeldeinformationen und profildetails feld datentyp beschreibung 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 benutzerauthentifizierung erstellt am datum zeitstempel für die kontoerstellung aktualisiert am datum zeitstempel für das letzte kontoupdate sie können diese sammlungen manuell im back4app dashboard hinzufügen, indem sie für jede eine neue klasse erstellen und deren jeweilige felder definieren neue klasse erstellen sie können felder erstellen, indem sie einen datentyp auswählen, einen namen angeben, standardwerte festlegen und sie bei bedarf als erforderlich markieren spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht die schemaerstellung, indem er sammlungen und felder aus einem beschreibenden prompt generiert so verwenden sie den ai agenten starten sie den ai agenten greifen sie über ihr back4app dashboard menü oder die projekteinstellungen darauf zu beschreiben sie ihr datenmodell fügen sie einen detaillierten prompt ein, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und bestätigen überprüfen sie das vorgeschlagene schema und wenden sie es auf ihr projekt an beispiel prompt 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 spart zeit und sorgt für konsistenz in ihrem datenbankschema schritt 3 – aktivierung der admin app und durchführung von crud operationen übersicht über die admin app die back4app admin app bietet eine no code , drag and drop oberfläche zur verwaltung ihrer backend daten sie vereinfacht crud operationen wie das erstellen, lesen, aktualisieren und löschen von datensätzen aktivierung der admin app öffnen sie das menü „mehr“ 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, der auch standardrollen wie b4aadminuser konfiguriert admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre sammlungen zu verwalten admin app dashboard verwendung der admin app für crud aufgaben datensätze erstellen verwenden sie die schaltfläche „datensatz hinzufügen“, um neue einträge in eine sammlung einzufügen datensätze lesen/aktualisieren klicken sie auf einen datensatz, um dessen details anzuzeigen oder zu ändern datensätze löschen entfernen sie veraltete datensätze mit der löschoption diese intuitive benutzeroberfläche verbessert die benutzerinteraktion, indem sie das datenmanagement vereinfacht schritt 4 – verbindung von marionette js mit back4app nachdem ihr backend über die admin app konfiguriert und verwaltet wurde, besteht der nächste schritt darin, ihr marionette js frontend mit back4app zu integrieren option a verwendung des parse sdk (sofern zutreffend) installieren sie das parse sdk npm install parse initialisieren sie parse in ihrer marionette js anwendung erstellen sie eine konfigurationsdatei (z b app/parseconfig js ) // app/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; integrieren sie parse in eine marionette ansicht erstellen sie beispielsweise eine ansicht, um elemente abzurufen und darzustellen // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>artikel\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; 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; this render(); } catch (error) { console error("fehler beim abrufen der artikel ", error); } }, serializedata() { return { items this items }; } }); option b verwendung von rest oder graphql wenn das parse sdk keine option ist, können sie mit back4app über rest oder graphql aufrufe interagieren zum beispiel, um artikel über rest abzurufen // example rest call to retrieve items async function fetchitems() { 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); integrieren sie diese api aufrufe in ihre marionette js ansichten oder controller nach bedarf schritt 5 – sicherung ihres backends konfigurieren von zugriffssteuerlisten (acls) sichern sie ihre daten, indem sie acls auf objekten festlegen zum beispiel, um ein element zu erstellen, das nur für seinen besitzer zugänglich ist 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); // configure acl restrict access solely 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('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } festlegen von klassenebene berechtigungen (clps) im back4app dashboard konfigurieren sie clps für jede sammlung, um standardmäßige zugriffsregeln durchzusetzen, damit nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – benutzerauthentifizierung benutzerkonten erstellen back4app nutzt die benutzerklasse von parse zur verwaltung der authentifizierung in ihrer marionette js app verwalten sie die benutzerregistrierung und den login wie unten gezeigt // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); ein ähnliches muster kann für den login und die sitzungsverwaltung befolgt werden zusätzliche funktionen wie sozialer login oder passwortzurücksetzungen können über das back4app dashboard konfiguriert werden schritt 7 – bereitstellung ihres marionette js frontends mit webbereitstellung die webbereitstellungsfunktion von back4app ermöglicht es ihnen, ihr marionette js frontend nahtlos zu hosten, indem sie ihr github repository verknüpfen 7 1 – erstellen ihrer produktionsversion navigieren sie zu ihrem projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies generiert einen build ordner, der optimierte statische dateien (html, js, css, bilder) enthält bestätigen sie den build stellen sie sicher, dass der build ordner eine index html datei zusammen mit den erforderlichen assets enthält 7 2 – organisieren und hochladen ihres quellcodes ihr repository sollte den gesamten quellcode für ihr marionette js frontend enthalten eine beispielverzeichnisstruktur ist basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md beispielkonfigurationsdatei app/parseconfig js // app/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; beispielanwendungsdatei app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); commit zu github initialisiere ein git repository (falls noch nicht geschehen) git init stage deine dateien git add committe deine änderungen git commit m "erster commit für marionette js frontend" erstelle ein repository auf github (z b basic crud app marionettejs frontend ) push deinen code git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – integration ihres repositories mit der web bereitstellung zugriff auf web bereitstellung wählen sie in ihrem back4app dashboard ihr projekt (basic crud app marionettejs) aus und klicken sie auf web bereitstellung mit github verbinden befolgen sie die anweisungen, um ihr github konto zu verknüpfen, damit back4app auf ihr repository zugreifen kann repository und branch auswählen wählen sie das repository (z b basic crud app marionettejs frontend ) und den branch (z b main ) aus, der ihren code enthält 7 4 – konfiguration ihrer bereitstellung zusätzliche einstellungen angeben build befehl wenn ein vorgefertigter build ordner fehlt, legen sie den build befehl fest (z b npm run build ) back4app wird dies während der bereitstellung ausführen ausgabeverzeichnis geben sie build als den ordner an, der ihre statischen dateien enthält umgebungsvariablen geben sie alle erforderlichen umgebungsvariablen (wie api schlüssel) in den bereitstellungseinstellungen an 7 5 – dockerisierung ihrer marionette js anwendung wenn sie docker für die bereitstellung bevorzugen, containerisieren sie ihre anwendung, indem sie eine dockerfile in ihr repository einfügen \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] konfigurieren sie die webbereitstellung, um die docker option zu verwenden, wenn gewünscht 7 6 – bereitstellung ihrer anwendung klicken sie auf die schaltfläche bereitstellen schließen sie ihre bereitstellungseinstellungen ab und klicken sie auf bereitstellen überwachen sie den build back4app wird ihren github code abrufen, den build befehl ausführen und ihren container bereitstellen holen sie sich ihre url nach der bereitstellung wird back4app eine url bereitstellen, unter der ihre marionette js anwendung gehostet wird 7 7 – überprüfung ihrer bereitstellung besuchen sie die bereitgestellte url öffnen sie die bereitstellungs url in ihrem browser testen sie die anwendung stellen sie sicher, dass die anwendung korrekt geladen wird und dass alle funktionen (routen, assets) betriebsbereit sind fehlerbehebung bei bedarf verwenden sie die entwicklertools des browsers und überprüfen sie die bereitstellungsprotokolle auf back4app, falls probleme auftreten schritt 8 – fazit und nächste schritte gut gemacht! sie haben erfolgreich eine crud anwendung mit marionette js und back4app erstellt sie haben ein projekt mit dem namen basic crud app marionettejs , detaillierte datenbankkollektionen für artikel und benutzer erstellt und ihre daten über die admin app verwaltet sie haben auch ihr marionette js frontend mit ihrem backend verbunden und starke sicherheitsmaßnahmen implementiert zukünftige verbesserungen verfeinern sie ihr frontend fügen sie funktionen wie detailansichten, suchmöglichkeiten und echtzeit updates hinzu erweitern sie die backend funktionalität erwägen sie die integration von cloud funktionen, drittanbieter apis oder fortgeschrittenen rollenbasierten zugriffskontrollen weiteres lernen erforschen sie zusätzliche ressourcen in der back4app dokumentation https //www back4app com/docs für fortgeschrittene optimierungen und integrationen indem sie dieses tutorial befolgt haben, verfügen sie nun über das wissen, um eine robuste, skalierbare crud anwendung mit marionette js und back4app zu erstellen viel spaß beim programmieren!