Wie man eine grundlegende CRUD-App mit Marko erstellt? Ein Schritt-für-Schritt-Leitfaden

übersicht dieser leitfaden führt sie durch die erstellung einer vollständigen crud anwendung (erstellen, lesen, aktualisieren, löschen) mit marko und back4app in diesem tutorial richten sie ein projekt ein—namens basic crud app marko —auf back4app, entwerfen ein robustes datenbankschema und integrieren ihr marko frontend mit der api von back4app das tutorial erklärt auch, wie sie ihr backend sichern und ihre anwendung für den produktionsbetrieb bereitstellen was sie lernen werden wie man crud anwendungen konstruiert, die daten effizient mit einem zuverlässigen backend verwalten tipps zur gestaltung eines skalierbaren schemas und dessen verknüpfung mit einem marko basierten frontend nutzung der benutzerfreundlichen admin oberfläche von back4app zur mühelosen datenverwaltung bereitstellungsstrategien, einschließlich containerisierung mit docker, um ihre webanwendung zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto und ein neues projekt befolgen sie die anweisungen in erste schritte mit back4app https //www back4app com/docs/get started/new parse app falls erforderlich eine marko entwicklungsumgebung eingerichtet verwenden sie die marko cli oder ihre bevorzugte einrichtungsmethode stellen sie sicher, dass node js (v14 oder höher) installiert ist grundkenntnisse in javascript, marko und rest apis besuchen sie die marko dokumentation https //markojs com/docs/ für weitere details schritt 1 – einrichten ihres projekts ein neues back4app projekt starten melden sie sich bei ihrem back4app konto an wählen sie „neue app“ auf ihrem dashboard geben sie den projektnamen ein basic crud app marko und folgen sie den anweisungen auf dem bildschirm neues projekt erstellen ihr neues projekt wird jetzt auf ihrem back4app dashboard angezeigt und legt den grundstein für ihr backend schritt 2 – erstellung ihres datenbankschemas erstellung ihres datenmodells für diese crud app werden sie ein paar sammlungen erstellen unten finden sie beispiele für sammlungen mit vorgeschlagenen feldern, die ihnen helfen, ein praktisches datenbankschema zu entwerfen 1\ sammlung produkte diese sammlung enthält details zu jedem produkt feld typ einzelheiten id objekt id automatisch generierte primäre kennung name zeichenfolge der produktname details zeichenfolge eine kurze beschreibung des produkts erstellt am datum zeitstempel zur kennzeichnung der produktcreation aktualisiert am datum zeitstempel des letzten updates 2\ sammlung benutzer diese sammlung enthält benutzer und authentifizierungsdaten feld typ einzelheiten id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge ein einzigartiger name für den benutzer e mail zeichenfolge eine einzigartige e mail adresse passwort zeichenfolge eine gehashte version des passworts des benutzers erstellt am datum zeitstempel der erstellung des datensatzes aktualisiert am datum letzte änderungszeitstempel sie können diese sammlungen manuell im back4app dashboard definieren, indem sie eine neue klasse für jede sammlung erstellen und dann die entsprechenden spalten hinzufügen neue klasse erstellen sie können schnell felder hinzufügen, indem sie einen typ auswählen, ihre spalte benennen, standardwerte festlegen und sie bei bedarf als erforderlich markieren spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht das schema design, indem er sammlungs und felddefinitionen basierend auf ihrem prompt generiert diese funktion spart zeit und sorgt für konsistenz in ihrer datenbankeinrichtung so verwenden sie den ai agenten zugriff auf den ai agenten navigieren sie zu ihrem back4app dashboard und finden sie den ai agenten in ihren projekteinstellungen beschreiben sie ihr schema geben sie einen detaillierten prompt an, der die sammlungen und felder beschreibt, die sie benötigen überprüfen und implementieren überprüfen sie nach der generierung das vorgeschlagene schema und wenden sie die änderungen an beispiel prompt create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) dieser ansatz optimiert ihren schemaerstellungsprozess schritt 3 – aktivierung der admin oberfläche & crud funktionalität einführung in die admin oberfläche die back4app admin app ist eine no code oberfläche, die das datenmanagement mühelos macht ihre drag and drop funktionen ermöglichen es ihnen, datensätze einfach hinzuzufügen, zu ändern, anzuzeigen oder zu entfernen aktivierung der admin oberfläche gehe zum abschnitt „mehr“ in deinem back4app dashboard wähle „admin app“ und klicke dann auf „admin app aktivieren “ admin anmeldeinformationen einrichten erstelle dein erstes administratorkonto, das auch systemrollen wie b4aadminuser zuweist admin app aktivieren sobald aktiviert, melde dich bei der admin app an, um dein backend zu verwalten admin app dashboard verwalten von crud operationen über die admin oberfläche innerhalb der admin app kannst du neue einträge hinzufügen verwende die option „eintrag hinzufügen“ in einer sammlung (z b produkte) einträge anzeigen/ändern klicke auf einen eintrag, um dessen details zu überprüfen oder zu aktualisieren einträge entfernen nutze die löschfunktion, um veraltete einträge zu entfernen diese optimierte oberfläche verbessert die benutzererfahrung, indem sie die aufgaben zur datenverwaltung vereinfacht schritt 4 – marko mit back4app verbinden jetzt, da dein backend konfiguriert ist, ist es an der zeit, dein marko frontend mit back4app über die api zu integrieren option a verwendung der api du wirst rest api aufrufe verwenden, um crud operationen in deiner marko anwendung auszuführen beispiel daten über rest abrufen // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); dieser codeausschnitt zeigt, wie man produktdaten von back4app über einen rest api aufruf abruft schritt 5 – sicherung ihres backends zugriffssteuerungen konfigurieren verbessern sie die sicherheit, indem sie zugriffssteuerlisten (acls) auf ihre datensätze anwenden zum beispiel, um einen privaten produkteintrag zu erstellen async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } standardberechtigungen festlegen verwenden sie das back4app dashboard, um klassenebenenberechtigungen (clps) für jede sammlung zu konfigurieren, um sicherzustellen, dass nur autorisierte benutzer auf sensible daten zugreifen können schritt 6 – benutzer authentifizierung einrichten benutzerkonten erstellen back4app verwendet eine benutzerklasse zur authentifizierung implementieren sie in ihrer marko app die benutzerregistrierung und anmeldung wie folgt // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } dieser codeausschnitt demonstriert einen einfachen benutzerregistrierungsablauf mit rest aufrufen schritt 7 – bereitstellung ihres marko frontends die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihr marko projekt direkt aus einem github repository zu hosten 7 1 – erstellen ihrer produktionsversion öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies erzeugt ein build verzeichnis mit ihren optimierten statischen dateien bestätigen sie den build überprüfen sie, ob der build ordner eine index html und alle asset verzeichnisse enthält 7 2 – organisieren und hochladen ihres codes ihr repository sollte den vollständigen quellcode ihres marko projekts enthalten eine typische verzeichnisstruktur könnte folgendermaßen aussehen basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md beispiel src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } verpflichtung zu github git initialisieren (falls nötig) git init dateien stagen git add änderungen committen git commit m "initial commit for marko crud frontend" erstellen und in ihr github repository pushen zum beispiel, verwenden sie ein repository mit dem namen basic crud app marko frontend 7 3 – verknüpfung von github mit der webbereitstellung zugriff auf die webbereitstellung melden sie sich bei back4app an, gehen sie zu ihrem projekt (basic crud app marko) und öffnen sie den webbereitstellungs bereich verbinden sie ihr github konto befolgen sie die anweisungen, um ihr github konto zu verknüpfen wählen sie das repository und den branch wählen sie das repository (z b basic crud app marko frontend ) und den branch (z b main ) zur bereitstellung 7 4 – konfiguration der bereitstellung zusätzliche parameter festlegen build befehl wenn kein vorgefertigter build ordner vorhanden ist, legen sie einen build befehl fest (z b npm run build ) ausgabeverzeichnis geben sie build als ausgabeverzeichnis an umgebungsvariablen geben sie alle erforderlichen variablen ein (z b api schlüssel) 7 5 – containerisierung mit docker wenn sie docker bevorzugen, fügen sie eine dockerfile in ihr projekt repository ein \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build 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 bereitstellungseinstellungen die docker bereitstellungsoption 7 6 – bereitstellung ihrer anwendung drücken sie die schaltfläche bereitstellen back4app wird ihr repository abrufen, den build ausführen und ihre app bereitstellen überwachen sie den prozess beobachten sie die bereitstellungsprotokolle auf build oder laufzeitprobleme zugriff auf ihre website sobald die bereitstellung abgeschlossen ist, stellt back4app eine url für ihre gehostete marko anwendung bereit 7 7 – bestätigung ihrer bereitstellung öffnen sie die bereitgestellte url überprüfen sie, ob ihre anwendung korrekt geladen wird durch die app navigieren überprüfen sie, ob alle seiten geladen werden und die crud funktionalitäten wie erwartet funktionieren fehlerbehebung bei bedarf verwenden sie die entwicklertools des browsers und die back4app protokolle, um probleme zu beheben schritt 8 – abschließende gedanken und zukünftige verbesserungen großartige arbeit! sie haben jetzt eine voll funktionsfähige crud anwendung mit marko und back4app erstellt sie haben ein projekt namens basic crud app marko , detaillierte sammlungen für produkte und benutzer erstellt, daten über eine intuitive admin oberfläche verwaltet, ihr marko frontend mit rest apis integriert und ihr backend mit robusten kontrollen gesichert nächste schritte verbessern sie ihre benutzeroberfläche erwägen sie, erweiterte funktionen wie produktdetailseiten, suchfunktionen und live benachrichtigungen hinzuzufügen erweitern sie die backend funktionen überlegen sie, serverlose funktionen oder drittanbieter apis für zusätzliche funktionalität zu integrieren vertiefen sie ihr wissen verweisen sie auf die back4app dokumentation https //www back4app com/docs und zusätzliche tutorials für weitere einblicke in die leistungsoptimierung und benutzerdefinierte integrationen viel spaß beim programmieren mit marko und back4app!