Wie man eine CRUD-Anwendung mit Deno baut?

übersicht dieser leitfaden zeigt, wie man eine einfache crud (erstellen, lesen, aktualisieren, löschen) anwendung mit deno erstellt wir werden back4app als unsere backend management plattform nutzen und es so konfigurieren, dass es als zuverlässige datenbanklösung fungiert, und wir werden den api ansatz verwenden, um mit unseren backend diensten zu interagieren in diesem tutorial werden sie ein back4app projekt mit dem namen basic crud app deno einrichten ihr datenbankschema mit sammlungen und feldern entwerfen und konfigurieren, die auf crud operationen zugeschnitten sind die back4app admin app nutzen, um ihre sammlungen über eine intuitive drag and drop oberfläche zu verwalten ihr deno frontend mit back4app über rest/graphql aufrufe verbinden ihr backend mit robusten zugriffskontrollmaßnahmen sichern am ende dieses leitfadens haben sie eine produktionsbereite webanwendung erstellt, die grundlegende datenoperationen und benutzerauthentifizierung unterstützt wesentliche erkenntnisse crud funktionalitäten meistern, um daten effizient zu verwalten erfahren, wie man ein skalierbares backend entwirft, das mit einem deno basierten frontend integriert ist die back4app admin app für nahtloses datenmanagement verwenden bereitstellungsstrategien entdecken, einschließlich containerisierung mit docker voraussetzungen bevor sie beginnen, stellen sie bitte sicher, dass sie ein back4app konto und ein initialisiertes projekt siehe erste schritte mit back4app https //www back4app com/docs/get started/new parse app falls erforderlich eine deno entwicklungsumgebung stellen sie sicher, dass deno installiert und aktualisiert ist (version 1 10+ wird empfohlen) vertrautheit mit javascript/typescript, deno und rest api konzepten konsultieren sie das deno handbuch https //deno land/manual für weitere informationen schritt 1 – initialisierung ihres projekts starten 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 deno und folgen sie den anweisungen auf dem bildschirm neues projekt erstellen nachdem das projekt erstellt wurde, wird es auf ihrem dashboard sichtbar sein und die grundlage für ihre backend konfiguration legen schritt 2 – entwerfen des datenbankschemas strukturierung ihres datenmodells für diese crud anwendung werden sie mehrere sammlungen definieren im folgenden finden sie beispiel sammlungen mit vorgeschlagenen feldern, um grundlegende operationen zu erleichtern 1\ sammlung artikel diese sammlung enthält details zu jedem artikel feld typ zweck id objekt id automatisch generierter primärschlüssel titel zeichenfolge name des artikels beschreibung zeichenfolge kurze zusammenfassung des artikels erstellt am datum zeitstempel, wann der artikel hinzugefügt wurde aktualisiert am datum zeitstempel für das letzte update 2\ sammlung benutzer diese sammlung speichert benutzerprofile und authentifizierungsdaten feld typ zweck id objekt id automatisch generierter primärschlüssel benutzername zeichenfolge eindeutiger identifikator für den benutzer e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge sicher gehashte passwort erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum letzte aktualisierungszeitstempel sie können diese sammlungen manuell im back4app dashboard erstellen, indem sie eine neue klasse für jede erstellen und spalten hinzufügen, um jedes feld zu definieren neue klasse erstellen sie können auch felder hinzufügen, indem sie ihren typ auswählen, ihnen namen geben, standardwerte festlegen und sie als erforderlich markieren spalte erstellen einsatz des back4app ai agenten zur schemaerstellung der back4app ai agent vereinfacht die schemaerstellung, indem sie eine beschreibende eingabeaufforderung eingeben, die dann automatisch die erforderlichen sammlungen und felder erstellt schritte zur nutzung des ai agenten zugriff auf den ai agenten öffnen sie ihr back4app dashboard und suchen sie die option ai agent geben sie ihre datenmodellbeschreibung ein geben sie eine detaillierte eingabeaufforderung an, in der sie ihre sammlungen und felder auflisten überprüfen und anwenden überprüfen sie die generierten schema vorschläge und implementieren sie sie in ihrem projekt beispielaufforderung create the following collections in my back4app application 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) dieser ansatz gewährleistet konsistenz und effizienz bei der einrichtung ihres backend schemas schritt 3 – aktivierung der admin oberfläche und crud funktionen überblick über die admin oberfläche die back4app admin app bietet eine no code oberfläche zur verwaltung ihrer backend daten ihr intuitives drag and drop design erleichtert die verwaltung von crud operationen aktivierung der admin app gehe zum menü „mehr“ auf deinem back4app dashboard wähle „admin app“ und klicke auf „admin app aktivieren “ richte deine admin anmeldeinformationen ein indem du einen initialen admin benutzer erstellst, der auch rollen konfiguriert (z b b4aadminuser ) und systemkollektionen admin app aktivieren sobald aktiviert, melde dich in der admin app an, um deine sammlungen mühelos zu verwalten admin app dashboard verwalten von crud operationen über die admin app in der admin app kannst du datensätze hinzufügen klicke auf „datensatz hinzufügen“ in einer beliebigen sammlung (z b artikel), um neue einträge zu erstellen datensätze anzeigen/bearbeiten wähle datensätze aus, um details zu überprüfen oder zu ändern datensätze entfernen lösche einträge, die nicht mehr benötigt werden dieses einfache tool vereinfacht den prozess der durchführung grundlegender datenoperationen schritt 4 – deno mit back4app verbinden mit deinem konfigurierten backend ist es zeit, dein deno frontend über rest oder graphql apis zu verbinden option verwendung von rest/graphql api aufrufen wir werden uns auf api aufrufe verlassen, um mit back4app zu interagieren beispiel daten über rest in deno abrufen erstellen sie ein modul (z b fetchitems ts ) mit dem folgenden code const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" 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 solche api aufrufe nach bedarf in ihre deno anwendung schritt 5 – stärkung ihrer backend sicherheit implementierung von zugriffskontrolllisten (acls) schützen sie ihre daten, indem sie acls jedem objekt zuweisen zum beispiel, um sicherzustellen, dass ein element privat ist async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } konfigurieren von klassenebenenberechtigungen (clps) passen sie im back4app dashboard die clps für jede sammlung an, um standardzugriffsrichtlinien festzulegen, die sicherstellen, dass nur authentifizierte oder autorisierte benutzer auf sensible daten zugreifen oder diese ändern können schritt 6 – verwaltung der benutzerauthentifizierung erstellen von benutzerkonten back4app verwendet die parse benutzerklasse zur authentifizierung verwenden sie in ihrer deno anwendung rest api aufrufe zur verwaltung der benutzerregistrierung und anmeldung beispiel benutzerregistrierung in deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key" }, body json stringify({ username, password, email }) }); const data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); dieser ansatz kann ähnlich auf die anmeldung und sitzungsverwaltung angewendet werden schritt 7 – bereitstellung ihres deno frontends mit web bereitstellung die web bereitstellungsfunktion von back4app ermöglicht es ihnen, ihr deno basiertes frontend zu hosten, indem sie den code direkt aus einem github repository bereitstellen 7 1 – erstellen ihrer produktionsversion öffnen sie ihr projektverzeichnis im terminal führen sie den build befehl aus zum beispiel, wenn sie einen bundler wie esbuild verwenden deno run allow read allow write build script ts bestätigen sie die build ausgabe stellen sie sicher, dass das ausgabeverzeichnis (z b dist ) die erforderlichen statischen dateien wie index html , gebündeltes javascript, css und bilder enthält 7 2 – organisieren und verwalten ihres codes ihr repository sollte alle quellcodedateien für ihr deno frontend enthalten eine beispielstruktur könnte so aussehen basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md beispieldatei deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; beispieldatei src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); ihr code zu github committen git initialisieren git init alle dateien stagen git add änderungen committen git commit m "erster commit für deno crud frontend" zu github pushen erstellen sie ein repository (z b basic crud app deno ) und pushen sie git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – verknüpfung von github mit der webbereitstellung von back4app melden sie sich bei back4app an und navigieren sie zu ihrem projekt klicken sie auf die funktion zur webbereitstellung verbinden sie ihr github konto und folgen sie den anweisungen wählen sie ihr repository und ihren branch (z b main ) aus, der ihren deno code enthält 7 4 – konfigurieren der bereitstellungseinstellungen spezifizieren build befehl wenn kein vorgefertigter dist ordner vorhanden ist, setzen sie den befehl (z b deno run allow read allow write build script ts ) ausgabeverzeichnis definieren sie den ausgabeordner, z b dist umgebungsvariablen fügen sie alle erforderlichen umgebungsvariablen hinzu (z b api schlüssel) 7 5 – dockerisierung ihrer deno anwendung um mit docker bereitzustellen, fügen sie eine dockerfile in ihr projekt ein \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] wählen sie die docker bereitstellungsoption in back4app, wenn sie containerisierung bevorzugen 7 6 – starten ihrer anwendung bereitstellung initiieren klicken sie auf die deploy schaltfläche in ihrem back4app dashboard überwachen sie den prozess back4app wird ihren code abrufen, die build schritte ausführen und ihre app bereitstellen zugriff auf ihre seite nach der bereitstellung wird eine url bereitgestellt, unter der ihre deno anwendung live ist 7 7 – bestätigung des bereitstellungserfolgs besuchen sie die bereitgestellte url öffnen sie die url in ihrem browser testen sie ihre anwendung stellen sie sicher, dass alle routen, statischen assets und api endpunkte korrekt funktionieren fehlerbehebung wenn probleme auftreten, konsultieren sie die bereitstellungsprotokolle und überprüfen sie ihre konfiguration schritt 8 – abschluss und zukünftige richtungen herzlichen glückwunsch! sie haben erfolgreich eine grundlegende crud anwendung mit deno und back4app als backend erstellt sie haben das projekt basic crud app deno , ihre datenbank strukturiert, daten über die admin app verwaltet, ihr deno frontend über api aufrufe verbunden und ihre daten mit acls und clps gesichert zukünftige verbesserungen frontend erweitern fügen sie funktionen wie detailansichten, suchfilter oder echtzeit updates hinzu erweiterte backend logik integrieren sie cloud funktionen oder zusätzliche api integrationen sicherheit vertiefen erforschen sie rollenbasierte zugriffe und weitere authentifizierungsmaßnahmen für weitere details überprüfen sie die back4app dokumentation https //www back4app com/docs und erkunden sie zusätzliche ressourcen viel spaß beim programmieren und beim erstellen ihrer skalierbaren deno crud anwendung!