How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

übersicht in diesem leitfaden lernen sie, eine crud anwendung (erstellen, lesen, aktualisieren und löschen) mit riot js zu erstellen wir werden durch die einrichtung eines back4app projekts—namens basic crud app riotjs —gehen, das als ihr backend dient, und es dann mit einem riot js frontend integrieren dieses tutorial behandelt alles, von der gestaltung ihres datenbankschemas und der verwaltung von daten mit der back4app admin app bis hin zur integration ihres frontends mit entweder dem sdk (falls zutreffend) oder rest/graphql api aufrufen am ende werden sie eine voll funktionsfähige, produktionsbereite webanwendung haben, die über eine benutzerauthentifizierung und eine sichere datenverarbeitung verfügt hauptvorteile meistern sie crud operationen mit einem skalierbaren backend system erhalten sie einblicke in die integration eines riot js frontends mit back4app nutzen sie die intuitive back4app admin app für mühelose datenverwaltung erlernen sie bereitstellungsstrategien, einschließlich docker containerisierung voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app für anleitungen ein entwicklungs setup für riot js sie können die riot cli verwenden oder riot über ein skript tag einfügen stellen sie sicher, dass node js (v14 oder höher) installiert ist grundkenntnisse in javascript, riot js und rest apis falls erforderlich, konsultieren sie die riot js dokumentation https //riot js org/ für zusätzliche einblicke schritt 1 – projektinitialisierung erstellen eines back4app projekts melden sie sich bei ihrem back4app konto an klicken sie auf „neue app“ auf ihrem dashboard benennen sie ihr projekt basic crud app riotjs und folgen sie den einrichtungsanweisungen neues projekt erstellen ihr projekt wird jetzt auf ihrem back4app dashboard angezeigt und dient als rückgrat für die daten ihrer anwendung schritt 2 – entwerfen ihres datenbankschemas gestaltung ihres datenmodells für unsere crud anwendung werden sie mehrere sammlungen definieren im folgenden finden sie beispiel sammlungen und felder, die ihnen helfen, ihre datenbank für effiziente crud operationen zu strukturieren 1\ artikel sammlung diese sammlung enthält details zu jedem artikel feld typ beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge artikelüberschrift beschreibung zeichenfolge kurze artikelbeschreibung erstellt am datum zeitstempel, wann der artikel hinzugefügt wurde aktualisiert am datum zeitstempel, wann der artikel geändert wurde 2\ benutzersammlung diese sammlung enthält benutzerdetails und authentifizierungsinformationen feld typ beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger benutzername e mail zeichenfolge eindeutige e mail adresse passwort hash zeichenfolge verschlüsseltes passwort erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte aktualisierung des kontos zeitstempel sie können diese sammlungen manuell im back4app dashboard konfigurieren, indem sie neue klassen erstellen und spalten definieren neue klasse erstellen sie können felder hinzufügen, indem sie einen datentyp auswählen, einen namen zuweisen, standardwerte festlegen und markieren, ob das feld obligatorisch ist spalte erstellen nutzung des back4app ai agenten zur schemaerstellung der back4app ai agent, der von ihrem dashboard aus zugänglich ist, kann ihr schema automatisch generieren, indem er einen detaillierten prompt verarbeitet, der ihre benötigten sammlungen und felder beschreibt verwendung des ai agenten öffnen sie den ai agenten finden sie ihn in ihren projekteinstellungen oder im menü geben sie ihr datenmodell ein fügen sie einen prompt ein, der ihre sammlungen und deren felder umreißt überprüfen und bestätigen validieren sie das 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 tool beschleunigt den prozess und sorgt für eine konsistente schemaeinrichtung schritt 3 – aktivierung der admin app & crud aktionen übersicht über die admin app die back4app admin app bietet eine no code drag and drop oberfläche für müheloses backend management, mit der sie crud operationen schnell ausführen können aktivierung der admin app öffnen sie das „mehr“ menü in ihrem back4app dashboard wählen sie „admin app“ und klicken sie auf „admin app aktivieren “ richten sie ihr admin konto ein indem sie den ersten admin benutzer erstellen, der auch standardrollen festlegt admin app aktivieren sobald aktiviert, melden sie sich in der admin app an, um ihre backend daten zu verwalten admin app dashboard crud operationen über die admin app durchführen innerhalb dieser schnittstelle können sie datensätze hinzufügen verwenden sie die schaltfläche „datensatz hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze bearbeiten klicken sie auf einen datensatz, um dessen details anzuzeigen und zu ändern datensätze entfernen löschen sie jeden datensatz, der nicht mehr erforderlich ist dieses tool optimiert ihren arbeitsablauf, indem es eine einfache schnittstelle zur verwaltung von daten bietet schritt 4 – verbindung von riot js mit back4app jetzt, da ihr backend eingerichtet ist, ist es an der zeit, ihr riot js frontend mit back4app zu verbinden option a verwendung des parse sdk installieren sie das parse sdk npm install parse initialisieren sie parse in ihrem riot js projekt erstellen sie eine datei (z b src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; verwenden sie parse in einem riot tag erstellen sie ein riot tag (z b items riot ), um elemente abzurufen und anzuzeigen items { item get("title") } — { item get("description") } option b verwendung von rest oder graphql apis wenn das parse sdk ungeeignet ist, führen sie crud operationen über api aufrufe aus zum beispiel, um elemente mit rest abzurufen // rest api example to get 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); integrieren sie diese api aufrufe in ihre riot js tags nach bedarf schritt 5 – schutz ihres backends konfigurieren von zugriffssteuerungslisten (acls) sichern sie ihre daten, indem sie acls für ihre objekte festlegen zum beispiel, um ein privates element zu erstellen 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); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } anpassen der klassenebene berechtigungen (clps) konfigurieren sie in ihrem back4app dashboard die clps für jede sammlung, um sicherzustellen, dass nur authentifizierte oder autorisierte benutzer auf sensible daten zugreifen schritt 6 – benutzerauthentifizierung konfigurieren von benutzerkonten riot js anwendungen können die benutzerregistrierung und anmeldung mit der integrierten parse benutzerklasse von back4app verwalten unten finden sie ein beispiel für ein riot tag zur benutzeranmeldung sign up eine ähnliche strategie kann für die anmeldung und sitzungsverwaltung angewendet werden zusätzliche funktionen wie soziale anmeldung, e mail verifizierung oder passwortwiederherstellung können in ihrem back4app dashboard eingerichtet werden schritt 7 – bereitstellung ihres riot js frontends die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihre riot js app zu hosten, indem sie ihr github repository verknüpfen befolgen sie diese schritte, um ihren produktionsbuild bereitzustellen 7 1 erstellen sie ihre produktionsdateien öffnen sie ihr projektverzeichnis in einem terminal führen sie ihren build befehl aus npm run build dies erstellt einen build ordner mit optimierten statischen dateien (html, js, css, bilder) bestätigen sie den build überprüfen sie, ob der build ordner eine index html und erforderliche asset verzeichnisse enthält 7 2 organisieren und pushen sie ihren code zu github ihr repository sollte den vollständigen riot js frontend quellcode enthalten eine typische struktur könnte sein basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md beispiel src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; beispiel src/app riot riot js crud app commit und push ihren code initialisieren sie ein git repo (falls nicht geschehen) git init fügen sie ihre dateien hinzu git add committen sie ihre änderungen git commit m "erster commit für das riot js frontend" erstellen sie ein github repository (z b basic crud app riotjs frontend ) und pushen sie ihren code git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 integrieren sie ihr github repo mit der back4app webbereitstellung webbereitstellung öffnen melden sie sich bei ihrem back4app dashboard an, wählen sie ihr projekt ( basic crud app riotjs ) und klicken sie auf webbereitstellung mit github verbinden befolgen sie die anweisungen, um ihr github konto und repository zu verknüpfen wählen sie ihr repo und branch wählen sie ihr repository (z b basic crud app riotjs frontend ) und den entsprechenden branch (wie main ) 7 4 bereitstellungskonfiguration build befehl wenn ihr repository einen vorgefertigten build ordner nicht hat, geben sie den build befehl an (z b npm run build ) back4app wird ihn ausführen ausgabeverzeichnis setzen sie dies auf build um anzugeben, wo sich ihre statischen dateien befinden umgebungsvariablen fügen sie alle erforderlichen variablen (wie api schlüssel) in ihre konfiguration ein 7 5 dockerisierung ihrer riot js app (optional) wenn sie eine containerisierte bereitstellung bevorzugen, fügen sie eine dockerfile zu ihrem projekt hinzu \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it 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 option in ihren webbereitstellungseinstellungen, wenn sie diesen weg wählen 7 6 starten sie ihre anwendung bereitstellen klicken sie auf die bereitstellen schaltfläche, nachdem sie ihre einstellungen konfiguriert haben überwachen sie den prozess back4app wird ihren code abrufen, den build befehl ausführen und ihre app in einem container bereitstellen holen sie sich ihre url sobald die bereitstellung abgeschlossen ist, stellt back4app eine url zur verfügung, unter der ihre riot js anwendung gehostet wird 7 7 validieren sie ihre bereitstellung besuchen sie die url öffnen sie die bereitgestellte url in ihrem browser testen sie die app bestätigen sie, dass alle routen und assets (css, javascript, bilder) korrekt funktionieren fehlerbehebung verwenden sie die entwicklertools des browsers und die back4app protokolle, wenn probleme auftreten schritt 8 – abschluss und zukünftige richtungen herzlichen glückwunsch! sie haben eine voll funktionsfähige crud app mit riot js und back4app erstellt sie haben ein projekt namens basic crud app riotjs , ein robustes datenbankschema für artikel und benutzer entworfen und ihre daten mit der admin app verwaltet sie haben ihr riot js frontend integriert und sicherheitsmaßnahmen wie acls implementiert nächste schritte frontend verbessern fügen sie funktionen wie detailansichten, suchmöglichkeiten und echtzeit updates hinzu funktionalität erweitern erforschen sie erweiterte backend operationen wie cloud funktionen oder integrieren sie drittanbieter apis ihr lernen vertiefen besuchen sie die back4app dokumentation https //www back4app com/docs und andere ressourcen, um ihre anwendung zu optimieren und zu erweitern mit diesen schritten haben sie nun das fachwissen, um skalierbare crud anwendungen mit riot js und back4app zu erstellen viel spaß beim programmieren!