Wie man eine CRUD-Anwendung mit Remix erstellt?

übersicht in diesem leitfaden lernen sie, wie sie eine crud anwendung (erstellen, lesen, aktualisieren, löschen) mit remix js erstellen wir werden back4app als unseren backend service verwenden, um die datenspeicherung nahtlos zu verwalten dieser leitfaden behandelt die einrichtung eines back4app projekts, das entwerfen eines dynamischen datenschemas und das einrichten von crud operationen in ihrer remix js anwendung zunächst richten sie ein back4app projekt ein, das wir basic crud app remix , nennen werden, und bieten einen skalierbaren, nicht relationalen datenspeicher sie erstellen dann ein datenmodell, indem sie sammlungen und felder manuell über das back4app dashboard einrichten oder sogar den integrierten ki agenten für eine automatisierte einrichtung verwenden als nächstes erkunden sie die back4app admin app—eine benutzerfreundliche oberfläche, die es ihnen ermöglicht, ihre daten einfach mit drag and drop operationen zu verwalten schließlich verbinden sie ihre remix js anwendung über rest api aufrufe mit back4app, um sicherzustellen, dass ihre crud funktionalitäten sowie die benutzerauthentifizierung robust und sicher sind am ende dieses tutorials werden sie eine produktionsbereite remix js anwendung haben, die in der lage ist, grundlegende crud operationen durchzuführen und eine sichere benutzerverwaltung zu bieten was sie lernen werden wie man eine crud app mit remix js und einem zuverlässigen backend erstellt best practices für die strukturierung ihres backends und die integration mit einem remix js frontend wie man die back4app admin app verwendet, um datenverwaltungsaufgaben zu vereinfachen techniken zum bereitstellen ihrer remix js anwendung, einschließlich containerisierung mit docker voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem neuen projekt, das bereit ist brauchen sie hilfe? besuchen sie erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine funktionierende entwicklungsumgebung für remix js sie können jeden modernen code editor wie vs code verwenden node js (version 14 oder höher) sollte installiert sein grundkenntnisse in javascript, react und restful apis für eine auffrischung, schauen sie sich die remix dokumentation https //remix run/docs an schritt 1 – einrichten ihres projekts starten eines neuen back4app projekts melden sie sich bei ihrem back4app konto an drücken sie die schaltfläche „neue app“ auf ihrem dashboard benennen sie ihr projekt basic crud app remix und folgen sie den schritten, um den erstellungsprozess abzuschließen neues projekt erstellen sobald ihr projekt bereit ist, wird es auf ihrem dashboard angezeigt und bildet die grundlage für ihr backend schritt 2 – erstellen ihres datenmodells datenstrukturen erstellen für diese crud anwendung definieren sie mehrere sammlungen in back4app nachfolgend finden sie beispiele für die hauptsammlungen und felder, die ihre crud funktionalitäten unterstützen 1\ artikel sammlung diese sammlung wird details zu jedem artikel speichern feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge der name oder titel des elements beschreibung zeichenfolge eine kurze zusammenfassung, die den artikel beschreibt erstelltam datum zeitstempel, wann der artikel hinzugefügt wurde aktualisiertam datum zeitstempel für die letzte änderung 2\ benutzersammlung diese sammlung verwaltet benutzeranmeldeinformationen und authentifizierungsinformationen feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger benutzername für den benutzer e mail zeichenfolge eindeutige e mail adresse des benutzers passworthash zeichenfolge gehashtes passwort für sichere authentifizierung erstelltam datum zeitstempel für die erstellung des kontos aktualisiertam datum zeitstempel für wann das konto aktualisiert wurde sie können diese sammlungen erstellen und felder direkt vom back4app dashboard hinzufügen neue klasse erstellen um ein neues feld hinzuzufügen, wählen sie einfach einen datentyp aus, geben sie den feldnamen ein und legen sie die standardwerte oder erforderlichen optionen nach bedarf fest spalte erstellen verwendung des back4app ai agenten zur schema generierung der in back4app integrierte ki agent kann ihr schema basierend auf ihrer beschreibung automatisch generieren und so die anfängliche einrichtung optimieren so verwenden sie den ki agenten zugriff auf den ki agenten melden sie sich bei ihrem back4app dashboard an und finden sie den ki agenten in den projekteinstellungen beschreiben sie ihr datenmodell geben sie eine detaillierte erklärung der sammlungen und felder an, die sie benötigen überprüfen und bestätigen der ki agent wird ein vorgeschlagenes schema präsentieren überprüfen sie die details und bestätigen sie die einrichtung beispielaufforderung 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) diese ki unterstützte methode beschleunigt den prozess und stellt sicher, dass ihr schema perfekt auf die bedürfnisse ihrer app zugeschnitten ist schritt 3 – aktivierung der admin app & verwaltung von crud operationen übersicht über die admin app die back4app admin app bietet eine no code oberfläche, die das backend datenmanagement vereinfacht ihre drag and drop funktionen machen crud operationen – wie das hinzufügen, bearbeiten und löschen von datensätzen – intuitiver aktivierung der admin app gehe zum menü „mehr“ in deinem back4app dashboard wähle „admin app“ und klicke auf „admin app aktivieren “ richte dein admin konto ein indem du deine anmeldedaten eingibst dies wird auch rollen konfigurieren (z b b4aadminuser ) und systemklassen admin app aktivieren nach der aktivierung melde dich in der admin app an, um deine daten einfach zu verwalten admin app dashboard durchführung von crud aufgaben über die admin app innerhalb der admin app kannst du neue datensätze einfügen verwende die schaltfläche „datensatz hinzufügen“ innerhalb einer sammlung (z b artikel), um neue einträge zu erstellen datensätze inspizieren und ändern klicke auf einen beliebigen datensatz, um seine details zu sehen und änderungen vorzunehmen datensätze löschen entferne alle datensätze, die nicht mehr benötigt werden diese intuitive oberfläche verbessert dein datenmanagement erlebnis erheblich schritt 4 – verbindung ihrer remix js anwendung mit back4app jetzt, da ihr backend eingerichtet ist, ist es an der zeit, ihre remix js app mit back4app zu integrieren verwendung von rest api aufrufen in remix js da das parse sdk normalerweise nicht mit remix js verwendet wird, führen sie crud operationen über rest api anfragen durch 1\ einrichten ihres remix js projekts wenn sie es noch nicht getan haben, erstellen sie ein neues remix projekt npx create remix\@latest befolgen sie die eingabeaufforderungen, um ihr bereitstellungsziel auszuwählen 2\ api anfragen von remix aus durchführen erstellen sie api routen dateien im app/routes verzeichnis, um crud operationen zu verarbeiten zum beispiel könnten sie eine datei namens items server js haben, die funktionen zum abrufen, erstellen, aktualisieren und löschen von elementen enthält beispiel abrufen von elementen // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { 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(); return json(data); } ebenso können sie post , put und delete routen erstellen, um die erstellung, aktualisierungen und löschungen von elementen zu verarbeiten 3\ verbindung von ui komponenten in ihren remix komponenten können sie hooks wie useloaderdata verwenden, um daten abzurufen und fetch api oder aktionsfunktionen zu verwenden, um daten an back4app zurückzusenden zum beispiel in ihrer react komponente // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } integrieren sie ähnliche api aufrufe für update und löschoperationen in ihren remix aktionen schritt 5 – sicherung ihres backends implementierung von zugriffskontrolllisten (acls) stärken sie die datensicherheit, indem sie acls für ihre objekte festlegen zum beispiel, um ein element zu erstellen, das nur von seinem ersteller zugänglich ist // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { 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", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } klassenebene berechtigungen (clps) passen sie die clps in ihrem back4app dashboard an, um standard sicherheitsrichtlinien durchzusetzen, die sicherstellen, dass nur authentifizierte benutzer auf bestimmte sammlungen zugreifen können schritt 6 – hinzufügen der benutzer authentifizierung benutzermanagement konfigurieren back4app nutzt die integrierte benutzerklasse von parse zur verwaltung der authentifizierung in ihrer remix anwendung verwalten sie die benutzerregistrierung und den login über api aufrufe beispiel benutzerregistrierungsendpunkt // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); 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, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } implementieren sie ähnliche endpunkte für login, sitzungsverwaltung und passwortzurücksetzungen schritt 7 – bereitstellung ihrer remix js anwendung back4app unterstützt eine nahtlose bereitstellung sie können ihre remix js app mit verschiedenen strategien bereitstellen, einschließlich docker 7 1 erstellen ihrer remix js anwendung kompilieren und bündeln verwenden sie ihren paketmanager und build skripte (z b über npm run build ) um ihre app zu kompilieren überprüfen sie die ausgabe stellen sie sicher, dass ihre build ausgabe alle notwendigen dateien enthält 7 2 beispiel für die projektstruktur ein typisches remix js projekt könnte folgendermaßen aussehen basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 erstellen ihrer remix js anwendung 7 3 dockerisierung ihrer anwendung wenn sie sich für die containerisierung entscheiden, fügen sie eine dockerfile in das stammverzeichnis ihres projekts ein \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 bereitstellung über back4app web bereitstellung verbinden sie ihr repository hosten sie ihren remix js quellcode auf github konfigurieren sie die bereitstellung wählen sie in ihrem back4app dashboard die web bereitstellung funktion, verlinken sie ihr repository (z b basic crud app remix ) und wählen sie den richtigen branch setzen sie build und ausgabebefehle geben sie ihren build befehl an (wie npm run build ) und das ausgabeverzeichnis bereitstellung ihrer app klicken sie auf bereitstellen und überwachen sie die protokolle, bis ihre app live ist schritt 8 – zusammenfassung und zukünftige richtungen gut gemacht! sie haben jetzt eine crud anwendung mit remix js erstellt, die mit back4app integriert ist in diesem leitfaden haben sie ein projekt namens basic crud app remix , definiert sammlungen für artikel und benutzer und verwaltet daten über die back4app admin app sie haben dann ihre remix js app über rest api aufrufe mit back4app verbunden und sichere benutzerauthentifizierung sowie datenschutzmaßnahmen implementiert nächste schritte verbessern sie ihre anwendung erwägen sie, weitere funktionen wie eine suchfunktion, detaillierte artikelansichten oder echtzeit updates hinzuzufügen erweitern sie die backend funktionen schauen sie sich cloud funktionen, externe api integrationen oder fortgeschrittenere zugriffskontrollen an weiter lernen besuchen sie die back4app dokumentation https //www back4app com/docs und erkunden sie weitere remix js tutorials, um ihre app weiter zu optimieren viel spaß beim programmieren und alles gute auf ihrer remix js reise!