Wie man eine CRUD-Anwendung mit TypeScript entwickelt?

übersicht in diesem leitfaden lernen sie, wie sie eine crud (create, read, update, delete) anwendung mit typescript erstellen wir werden back4app als backend plattform nutzen, um die datenverwaltung einfach zu gestalten dieser leitfaden behandelt die einrichtung eines back4app projekts, das modellieren ihrer daten und die integration von crud funktionalität in eine typescript anwendung zunächst erstellen sie ein projekt auf back4app mit dem namen basic crud app typescript , das eine flexible nosql speicherlösung bietet sie werden ihre datenstruktur entwerfen, indem sie klassen und felder entweder manuell oder mit hilfe des ki agenten von back4app definieren als nächstes verwenden sie die back4app admin app für das backend management über eine benutzerfreundliche oberfläche, die datenoperationen vereinfacht schließlich verbinden sie ihre typescript anwendung mit back4app unter verwendung des parse javascript sdk, um sicheren zugriff und authentifizierung zu gewährleisten am ende dieses tutorials haben sie eine voll funktionsfähige typescript anwendung, die in der lage ist, grundlegende crud aufgaben zu bewältigen, einschließlich benutzerauthentifizierung und datenmanagement was sie lernen werden wie man eine auf typescript basierende crud anwendung mit einem nosql backend erstellt methoden zur gestaltung eines skalierbaren backends, das mit einem typescript frontend integriert ist wie man die admin app von back4app nutzt, um ihre daten mühelos zu verwalten strategien für die bereitstellung, einschließlich docker containerisierung, um ihre typescript app reibungslos zu starten voraussetzungen bevor sie beginnen, stellen sie sicher, dass sie ein back4app konto mit einem konfigurierten projekt brauchen sie hilfe? besuchen sie erste schritte mit back4app https //www back4app com/docs/get started/new parse app eine typescript entwicklungsumgebung verwenden sie einen editor wie visual studio code und stellen sie sicher, dass sie node js installiert haben grundkenntnisse in typescript, objektorientierter programmierung und restful apis falls erforderlich, beziehen sie sich auf die typescript dokumentation https //www typescriptlang org/docs/ schritt 1 – projektinitialisierung ein neues back4app projekt einrichten melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ in ihrem dashboard geben sie den projektnamen ein basic crud app typescript und folgen sie den schritten, um die projekterstellung abzuschließen neues projekt erstellen nachdem das projekt eingerichtet ist, wird es auf ihrem dashboard angezeigt und dient als grundlage für ihr backend schritt 2 – erstellung des datenschemas definition ihrer datenstrukturen für diese anwendung werden sie ein paar sammlungen (klassen) auf back4app erstellen unten sind beispiele für wesentliche klassen mit feldern, die crud operationen erleichtern 1\ artikel sammlung feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung titel zeichenfolge name oder titel des elements beschreibung zeichenfolge eine kurze beschreibung des artikels erstelltam datum zeitstempel, wann der artikel erstellt wurde aktualisiertam datum zeitstempel für das letzte update 2\ benutzersammlung feld datentyp beschreibung id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger name für den benutzer e mail zeichenfolge einzigartige e mail adresse passworthash zeichenfolge sicher gehashtes passwort für die anmeldung erstelltam datum zeitstempel der kontoerstellung aktualisiertam datum zeitstempel für das letzte kontoupdate sie können diese sammlungen und felder manuell im back4app dashboard erstellen neue klasse erstellen beim hinzufügen von feldern wählen sie den datentyp, benennen das feld, setzen einen standardwert, falls erforderlich, und geben an, ob es obligatorisch ist spalte erstellen verwendung des back4app ai agenten zur schema konfiguration der integrierte ki agent in back4app kann automatisch ihr datenschema aus einer beschreibung generieren dies vereinfacht die einrichtung und stellt sicher, dass ihr modell bereit für crud operationen ist so verwenden sie den ki agenten öffnen sie den ki agenten melden sie sich bei ihrem back4app dashboard an und suchen sie den ki agenten in ihren projekteinstellungen beschreiben sie ihr schema geben sie eine detaillierte beschreibung der sammlungen und felder an, die sie benötigen überprüfen und bestätigen der ki agent wird ein schema vorschlagen überprüfen sie es und bestätigen sie, um die änderungen anzuwenden 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 spart zeit und garantiert ein gut strukturiertes schema schritt 3 – verwendung der admin app für crud operationen übersicht über die admin app die back4app admin app bietet eine no code oberfläche, die das verwalten ihrer backend daten einfach macht die drag and drop funktionen ermöglichen es ihnen, crud operationen – wie das hinzufügen, lesen, aktualisieren und löschen von datensätzen – ohne mühe durchzuführen aktivierung der admin app gehen sie zum menü “mehr” auf ihrem back4app dashboard wählen sie “admin app” und klicken sie auf “admin app aktivieren ” richten sie ihre admin anmeldeinformationen ein indem sie ein erstes admin konto erstellen, das auch rollen wie b4aadminuser und systemklassen definiert admin app aktivieren nach der aktivierung melden sie sich bei der admin app an, um ihre daten zu verwalten admin app dashboard verwalten von crud operationen mit der admin app innerhalb der admin app können sie datensätze einfügen verwenden sie die funktion „datensatz hinzufügen“ in jeder sammlung (z b artikel), um neue daten einzugeben überprüfen und bearbeiten klicken sie auf einen datensatz, um details anzuzeigen oder felder zu ändern datensätze löschen entfernen sie einträge, die nicht mehr benötigt werden diese intuitive benutzeroberfläche verbessert das datenmanagement, indem sie routineaufgaben vereinfacht schritt 4 – verbinden sie ihre typescript app mit back4app mit ihrem backend bereit ist der nächste schritt, ihre typescript anwendung mit back4app zu verknüpfen option a verwendung des parse javascript sdk installieren sie das parse javascript sdk verwenden sie npm, führen sie aus npm install parse initialisieren sie parse in ihrer typescript anwendung erstellen sie eine konfigurationsdatei (z b parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } option b nutzung von rest oder graphql wenn sie das parse sdk nicht verwenden möchten, können sie crud operationen über rest durchführen zum beispiel, um elemente über rest abzurufen import fetch from 'node fetch'; export async function getitemsviarest() { try { 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(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } integrieren sie diese api aufrufe nach bedarf in ihre typescript module schritt 5 – sicherstellung der backend sicherheit einrichten von zugriffskontrolllisten (acls) sichern sie ihre daten, indem sie acls auf ihre objekte anwenden zum beispiel, um ein element zu erstellen, auf das nur sein besitzer zugreifen kann import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } verwalten von klassenberechtigungen (clps) passen sie die clps über das back4app dashboard an, um zugriffsrestriktionen durchzusetzen, sodass nur authentifizierte benutzer mit bestimmten sammlungen interagieren können schritt 6 – implementierung der benutzerauthentifizierung verwalten von benutzerkonten back4app nutzt die integrierte benutzerklasse von parse zur handhabung der authentifizierung implementieren sie in ihrer typescript anwendung die benutzerregistrierung und den login wie folgt import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } dieser ansatz kann auf sitzungsmanagement, passwortzurücksetzungen und andere authentifizierungsfunktionen ausgeweitet werden schritt 7 – bereitstellung ihrer typescript anwendung back4app vereinfacht den bereitstellungsprozess sie können ihre typescript anwendung mit methoden wie docker containerisierung bereitstellen 7 1 erstellen ihrer typescript app kompilieren und bündeln verwenden sie ihr build tool (wie webpack oder tsc), um ihre anwendung zu kompilieren und zu bündeln zum beispiel, um mit tsc zu kompilieren tsc bestätigen sie die ausgabe stellen sie sicher, dass die generierten dateien alle notwendigen assets und module enthalten 7 2 organisieren ihrer projektstruktur ein typisches typescript projekt könnte so aussehen basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md beispiel parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 dockerisieren ihrer typescript anwendung wenn sie containerisierung wählen, fügen sie eine dockerfile zu ihrem projektstamm hinzu \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 bereitstellung über back4app web deployment verknüpfen sie ihr github repository stellen sie sicher, dass ihr typescript projekt auf github gehostet wird bereitstellungseinstellungen einrichten verwenden sie im back4app dashboard die web deployment option, um ihr repository zu verbinden (z b basic crud app typescript ) und wählen sie den entsprechenden branch aus bau und ausgabebefehle definieren geben sie den build befehl an (wie npm run build ) und geben sie das ausgabeverzeichnis an ihre anwendung bereitstellen klicken sie auf bereitstellen und verfolgen sie die protokolle, bis ihre anwendung live ist schritt 8 – abschließende gedanken und zukünftige verbesserungen herzlichen glückwunsch! sie haben erfolgreich eine auf typescript basierende crud anwendung erstellt, die mit back4app integriert ist sie haben ein projekt mit dem namen basic crud app typescript , sammlungen für artikel und benutzer entworfen und ihre daten mit der back4app admin app verwaltet zusätzlich haben sie ihre typescript app über das parse javascript sdk (oder rest/graphql) verbunden und robuste sicherheitsmaßnahmen implementiert was kommt als nächstes? erweitern sie ihre anwendung integrieren sie zusätzliche funktionen wie erweiterte filterung, detaillierte artikelansichten oder echtzeit datenaktualisierungen verbessern sie die backend funktionen erforschen sie cloud funktionen, integrieren sie drittanbieter apis oder implementieren sie rollenbasierte berechtigungen weiteres lernen besuchen sie die back4app dokumentation https //www back4app com/docs und sehen sie sich zusätzliche anleitungen an, um ihre anwendung zu optimieren viel spaß beim programmieren und genießen sie den aufbau ihrer typescript crud anwendung!