Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

übersicht dieser leitfaden wird sie durch den aufbau einer voll funktionsfähigen crud (erstellen, lesen, aktualisieren und löschen) anwendung mit cycle js führen in diesem tutorial konfigurieren sie ein back4app projekt mit dem titel basic crud app cyclejs das als robustes backend für ihre anwendung dient sie werden lernen, ein skalierbares datenmodell zu entwerfen, ihre daten über die intuitive back4app admin app zu verwalten und ihr cycle js frontend mit back4app über rest/graphql aufrufe zu integrieren am ende werden sie eine produktionsbereite webanwendung haben, die in der lage ist, crud operationen sowie benutzerauthentifizierung und sichere datenverarbeitung durchzuführen wichtige erkenntnisse bauen sie ein funktionales crud system mit einem zuverlässigen backend sammeln sie praktische erfahrungen im entwerfen eines skalierbaren datenmodells nutzen sie ein drag and drop admin tool für nahtloses datenmanagement integrieren sie ein cycle js frontend mit back4app über rest/graphql lernen sie bereitstellungsstrategien, einschließlich docker containerisierung voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem aktiven projekt wenn sie hilfe benötigen, schauen sie sich erste schritte mit back4app https //www back4app com/docs/get started/new parse app an ein cycle js entwicklungssetup verwenden sie tools wie create cycle app https //github com/cyclejs community/create cycle app und stellen sie sicher, dass node js (version 14 oder höher) installiert ist vertrautheit mit javascript, cycle js und rest apis für eine auffrischung konsultieren sie die cycle js dokumentation https //cycle js org/ schritt 1 – projektinitialisierung erstellen eines neuen back4app projekts melden sie sich bei ihrem back4app konto an drücken sie die schaltfläche „neue app“ auf ihrem dashboard weisen sie den projektnamen zu basic crud app cyclejs und folgen sie den einrichtungshinweisen neues projekt erstellen nach der erstellung wird ihr projekt im dashboard sichtbar sein, bereit für die backend konfiguration und verwaltung schritt 2 – definieren ihres datenbankschemas strukturierung ihres datenmodells für diese crud anwendung werden sie mehrere sammlungen erstellen, um ihre daten zu verwalten im folgenden finden sie beispiel sammlungen mit wesentlichen feldern und datentypen 1\ artikel sammlung diese sammlung wird die details jedes artikels speichern feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der titel des artikels beschreibung zeichenfolge eine kurze zusammenfassung des artikels erstellt am datum der zeitstempel, wann der artikel hinzugefügt wurde aktualisiert am datum der zeitstempel für das letzte update 2\ benutzersammlung diese sammlung verwaltet benutzerdetails und authentifizierung feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge die eindeutige kennung des benutzers e mail zeichenfolge die e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort für sichere authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel für das letzte update sie können diese sammlungen manuell über das back4app dashboard definieren, indem sie neue klassen erstellen und die entsprechenden felder konfigurieren neue klasse erstellen um felder hinzuzufügen, wählen sie den datentyp aus, geben sie einen feldnamen an, setzen sie optional einen standardwert und markieren sie das feld als erforderlich, falls nötig spalte erstellen automatisierung der schemaerstellung mit dem back4app ai agenten der back4app ai agent vereinfacht die schemaerstellung, indem er ihr datenmodell basierend auf einem bereitgestellten prompt automatisch generiert dies gewährleistet ein konsistentes und effizientes datenbankdesign schritte zur nutzung des ai agenten greifen sie auf den ai agenten zu melden sie sich bei ihrem back4app dashboard an und wählen sie den ai agenten aus dem menü oder den projekteinstellungen detailieren sie ihre datenanforderungen geben sie einen umfassenden prompt ein, der die erforderlichen sammlungen und deren felder auflistet überprüfen und implementieren überprüfen sie das automatisch generierte 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) dieses feature spart nicht nur zeit, sondern sorgt auch für ein gut strukturiertes und optimiertes schema schritt 3 – aktivierung der admin app & verwaltung von crud operationen erkundung der admin app die back4app admin app bietet eine no code , drag and drop oberfläche für müheloses backend datenmanagement sie optimiert crud operationen für ihre sammlungen aktivierung der admin app öffnen sie das „mehr“ menü in ihrem back4app dashboard wählen sie „admin app“ und klicken sie dann auf „admin app aktivieren “ richten sie ihre admin anmeldeinformationen ein indem sie ihren ersten admin benutzer erstellen diese aktion wird auch die systemrollen initialisieren (z b b4aadminuser ) admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um mit der verwaltung ihrer sammlungen zu beginnen admin app dashboard durchführen von crud operationen über die admin app innerhalb der admin app können sie datensätze hinzufügen klicken sie auf die schaltfläche „datensatz hinzufügen“ in einer beliebigen sammlung (z b artikel), um neue einträge einzufügen datensätze anzeigen/ändern wählen sie einen vorhandenen datensatz aus, um details zu überprüfen oder felder zu ändern datensätze entfernen nutzen sie die löschoption, um unerwünschte einträge zu entfernen diese benutzerfreundliche oberfläche verbessert erheblich die verwaltung und administration ihrer daten schritt 4 – integration von cycle js mit back4app jetzt, da ihr backend über back4app betriebsbereit ist, ist es an der zeit, ihr cycle js frontend zu integrieren option nutzung von rest/graphql apis wir konzentrieren uns auf rest api aufrufe, um mit ihrem backend zu interagieren im folgenden finden sie ein beispiel für eine cycle js komponente, die elemente aus ihrer back4app datenbank abruft und anzeigt, indem sie cycles http treiber verwendet beispiel abrufen und anzeigen von elementen mit cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); dieser beispielcode zeigt, wie man cycle js verwendet, um eine http get anfrage zum abrufen von elementen durchzuführen und diese dynamisch darzustellen schritt 5 – sicherung ihres backends anwenden von zugriffskontrolllisten (acls) sichern sie ihre objekte, indem sie acls definieren zum beispiel, wenn sie ein privates element erstellen async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { 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(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } konfigurieren von klassenebenenberechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um sicherzustellen, dass nur authentifizierte benutzer auf sensible informationen zugreifen können schritt 6 – implementierung der benutzerauthentifizierung einrichten der kontoanmeldung und registrierung back4app verwendet eine benutzerklasse zur authentifizierung verwenden sie rest api aufrufe, um benutzeranmeldungen und registrierungen in ihrer cycle js anwendung zu verwalten im folgenden finden sie ein beispiel für die handhabung der benutzerregistrierung async function signupuser(userdata) { 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({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } sie können ähnliche muster für die benutzeranmeldung und sitzungsverwaltung replizieren schritt 7 – bereitstellung ihres cycle js frontends mit web bereitstellung die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihre cycle js anwendung mühelos über die integration mit ihrem github repository zu hosten 7 1 vorbereitung ihres produktions builds öffnen sie ihr projektverzeichnis in einem terminal führen sie den build befehl aus npm run build dies erstellt ein build verzeichnis mit optimierten statischen dateien bestätigen sie den build stellen sie sicher, dass der build ordner eine index html und verwandte asset verzeichnisse enthält 7 2 organisieren und hochladen ihres quellcodes ihr git repository sollte den gesamten quellcode der cycle js anwendung enthalten eine beispielverzeichnisstruktur basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md beispiel datei src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); in github committen ein git repository initialisieren (falls noch nicht geschehen) git init ihre dateien stagen git add ihr werk committen git commit m "erster commit für cycle js frontend" ein github repository erstellen (z b basic crud app cyclejs frontend ) ihr repository pushen git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 verknüpfung ihres repositories mit der webbereitstellung zugriff auf die webbereitstellung melden sie sich bei back4app an, navigieren sie zu ihrem projekt ( basic crud app cyclejs ) und wählen sie die webbereitstellungs funktion aus 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 ihr repository (z b basic crud app cyclejs frontend ) und den branch (typischerweise main ) 7 4 bereitstellungseinstellungen build befehl wenn ihr repository einen vorgefertigten build ordner nicht hat, geben sie einen build befehl an (z b npm run build ) ausgabeverzeichnis setzen sie dies auf build damit back4app weiß, wo die statischen dateien zu finden sind umgebungsvariablen fügen sie alle erforderlichen api schlüssel oder konfigurationsdetails hinzu 7 5 dockerisierung ihrer cycle js anwendung wenn sie sich für die docker bereitstellung entscheiden, fügen sie eine dockerfile zu ihrem repository hinzu \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files 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 bereitstellungsoption in ihrer webbereitstellungskonfiguration, wenn sie sich entscheiden, ihre app zu containerisieren 7 6 ihre anwendung starten ihre app bereitstellen klicken sie auf die bereitstellen schaltfläche, nachdem sie ihre einstellungen konfiguriert haben die bereitstellung überwachen back4app wird ihren code von github abrufen, die app (sofern konfiguriert) erstellen und bereitstellen zugriff auf ihre anwendung sobald die bereitstellung abgeschlossen ist, stellt back4app eine url für ihre live cycle js anwendung zur verfügung 7 7 ihre bereitstellung testen besuchen sie die bereitgestellte url öffnen sie die bereitgestellte url in ihrem browser funktionalität bestätigen stellen sie sicher, dass alle routen und assets ordnungsgemäß geladen werden bei bedarf debuggen verwenden sie die entwicklertools des browsers und überprüfen sie die bereitstellungsprotokolle von back4app, um probleme zu beheben schritt 8 – abschluss und zukünftige verbesserungen herzlichen glückwunsch! sie haben erfolgreich eine crud anwendung mit cycle js und back4app erstellt sie haben ein projekt mit dem titel basic crud app cyclejs , ihr datenbankschema für items und users definiert und ihre daten über die intuitive admin app verwaltet darüber hinaus haben sie ihr cycle js frontend mit ihrem backend über rest/graphql integriert und ihre daten mit geeigneten zugriffskontrollen gesichert nächste schritte erweitern sie ihr frontend fügen sie fortgeschrittenere ansichten, filter oder echtzeit updates hinzu integrieren sie zusätzliche backend funktionen erwägen sie, cloud funktionen, drittanbieter apis oder rollenbasierte zugriffskontrollen hinzuzufügen weiteres lernen erforschen sie die back4app dokumentation https //www back4app com/docs für zusätzliche einblicke in die leistungsoptimierung und benutzerdefinierte integrationen mit diesem leitfaden verfügen sie nun über die fähigkeiten, um ein skalierbares crud backend für ihre cycle js anwendung mit back4app zu erstellen viel spaß beim programmieren!