Wie baut man ein Backend mit Cursor auf?

moderne web und mobile projekte kommen oft am ersten hindernis zum stillstand eine idee in ein produktionsbereites backend umzuwandeln das manuelle entwerfen eines datenmodells, das schreiben von boilerplate crud logik, das bereitstellen von infrastruktur und das synchronisieren des frontends kann tage oder wochen wertvoller ingenieurzeit in anspruch nehmen dieses tutorial zeigt, wie die backend plattform von back4app, das model context platform (mcp) protokoll und cursors ki unterstützte ide zusammen diese reibung beseitigen indem sie die erstellung einer einfachen event management app durchlaufen, werden sie sehen, wie diese tools es ihnen ermöglichen, ein voll funktionsfähiges backend und ein passendes frontend zu erstellen, bereitzustellen und zu integrieren wichtige erkenntnisse erfahren sie, wie sie in minuten ein produktionsbereites backend auf back4app mit cursors ki agenten und dem mcp protokoll erstellen gewinnen sie einblicke in die durchsetzung einer sauberen rollenbasierten zugriffskontrolle mit einem wiederverwendbaren validateuserrole helfer, der die arbeitsabläufe von organisatoren und teilnehmern sauber trennt erfahren sie, wie sie ein responsives next js frontend generieren und verdrahten, das automatisch ihre back4app rest apis konsumiert erforschen sie die containerisierung und die bereitstellung mit einem klick mit back4app containern, um ihre vollständige event manager app von github in rekordzeit bereitzustellen projektübersicht in diesem tutorial werden sie eine einfache event manager app erstellen, die es benutzern ermöglicht, veranstaltungen zu erstellen, sich für interessante veranstaltungen zu registrieren, bevorstehende oder registrierte veranstaltungen anzuzeigen und ihre registrierungen bei bedarf zu stornieren sie werden das backend dieser app mit dem mcp tool von back4app erstellen das mcp tool ermöglicht große sprachmodelle (llms) https //en wikipedia org/wiki/large language model wie claude 4 sonett und ki agenten/ tools wie cursor, um nahtlos mit ihrem back4app backend zu interagieren mit mcp kann ihr ki code assistent apps erstellen, datenbanken verwalten (crud operationen, abfragen), cloud code bereitstellen, die benutzerauthentifizierung verwalten und mehr in ihren back4app projekten für dieses tutorial verwenden sie cursor , einen ki gestützten code editor, der große sprachmodelle integriert, um ihnen beim schreiben, refaktorisieren und verstehen von code in ihrer entwicklungsumgebung zu helfen mit cursor und mcp können sie backend aktionen mit natürlicher sprache anstoßen, was den entwicklungsprozess schneller und intuitiver macht projektsetup jetzt, da sie ein besseres verständnis dafür haben, was sie in diesem tutorial erreichen werden, legen sie los und richten sie ihre projektanforderungen ein, um ein backend mit cursor und mcp zu erstellen voraussetzungen um dieses tutorial abzuschließen, benötigen sie folgendes ein back4app konto sie können sich kostenlos anmelden https //www back4app com/signup , wenn sie noch keins haben cursor https //www cursor com/ auf ihrem entwicklungsrechner installiert grundkenntnisse in backend entwicklung node js v22 oder höher schritt 1 erstellen sie ein back4app projekt der erste schritt besteht darin, sich in ihr back4app konto einzuloggen und ein neues projekt mit dem namen „eventmanager “ schritt 2 erstellen sie einen kontoschlüssel sie müssen einen back4app kontoschlüssel generieren, um mcp in cursor einzurichten und dem mcp server zugriff auf ihr back4app konto zu gewähren gehen sie zu den kontoschlüssel einstellungen geben sie dort ihrem kontoschlüssel einen namen und generieren sie einen, indem sie auf die + schaltfläche klicken sie sollten jetzt ihren generierten kontoschlüssel zusammen mit dem ablaufdatum sehen schritt 3 konfigurieren sie mcp in cursor sehen sie sich dieses video an, um zu erfahren, wie sie cursor und back4app verbinden öffnen sie die cursor app und navigieren sie zu einstellungen > cursor einstellungen > mcp, wo sie eine seite finden, um mcp server in cursor ai zu konfigurieren klicken sie auf die „ neuen globalen mcp server hinzufügen “ schaltfläche, um eine mcp json datei zu erstellen sie werden ihre konfigurationen für mcp in dieser datei schreiben um den back4app mcp server in cursor zu konfigurieren, fügen sie die folgenden konfigurationen in mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } ersetzen sie jetzt \<account key> durch den gespeicherten back4app kontoschlüssel, den sie in schritt 3 generiert haben wenn sie dieses tutorial auf einem windows rechner befolgen, ändern sie den wert des command schlüssels in npx cmd mit diesen konfigurationen sind sie bereit, ihr back4app backend mit dem back4app mcp und cursor zu erstellen erstellen sie das backend mit cursor und back4app ihr event manager wird die folgenden funktionen haben; der benutzer kann ein neues ereignis erstellen der benutzer kann sich für ein ereignis registrieren zeigen sie eine liste von ereignissen an, für die ein benutzer registriert ist zeigen sie eine liste der bevorstehenden ereignisse eines benutzers an der benutzer kann die registrierung für ein ereignis stornieren um diese funktionen zu erfüllen, hier ist ein beispiel für ein datenbankschema öffnen sie den chat durch umschalten des ai panels, und wählen sie den agent modus aus, um änderungen an ihrer app vorzunehmen wählen sie außerdem ein bevorzugtes llm wie das neue claude 4 sonnet modell schreiben sie im chatfeld eine eingabeaufforderung, um das entworfene schema zu generieren ein beispiel für eine eingabeaufforderung, um dies zu erreichen, ist design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships sie müssen die anfrage zur nutzung der mcp tools genehmigen nach der genehmigung wird die anfrage ausgeführt sie sollten eine antwort erhalten, dass die datenbank erfolgreich erstellt wurde sie können den erfolg bestätigen, indem sie ihr app dashboard auf die neu erstellten klassen überprüfen jetzt, da sie ihr backend erstellt und die datenbanktabellen ihrer anwendung hinzugefügt haben, werden sie die anwendungslogik implementieren implementierung von benutzerfunktionen mit mcp in ihrer anwendungsbeschreibung sollte diese app verschiedenen benutzertypen ermöglichen, unterschiedliche aufgaben auszuführen, wie z b veranstaltungen zu erstellen und sich für diese zu registrieren hier definieren sie die funktionen, die zum umgang mit diesen funktionen entwickelt wurden implementierung von zugriffskontrollen die hauptnutzungsfunktion der app wird validateuserrole genannt diese funktion ist verantwortlich für die validierung, welche funktionen für welche benutzerrollen verfügbar sind sie können diese funktion mit dem folgenden prompt erstellen \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error gehen sie voran und bestätigen sie, dass utils js mit validateuserrole erstellt wurde benutzerfunktion erstellen um die benutzer erstellen funktion zu implementieren, müssen der benutzername , passwort , e mail, und rolle übergeben werden jeder kann die funktion aufrufen implementieren sie die logik zur erstellung eines benutzers mit dem folgenden prompt \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames sie sollten eine antwort erhalten, die angibt, dass die funktion erfolgreich erstellt wurde sie können jetzt neue benutzer für ihren event manager erstellen erstellen sie die veranstaltungsfunktion eine organisator rolle kann eine neue veranstaltung erstellen dazu wird die funktion ein neues veranstaltungsobjekt erstellen und validieren, dass ein benutzer mit der organisator rolle die funktion aufruft sie werden die zuvor erstellte hilfsfunktion verwenden, um diese validierung zu erreichen implementieren sie diese logik mit dem folgenden prompt create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed die funktion wird in der main js datei erstellt sie können einen einfachen test innerhalb von cursor mit dummy daten und dem aufruf der exponierten back4app rest api durchführen registrieren für die veranstaltungsfunktion damit ein benutzer sich für eine veranstaltung registrieren kann, muss er die teilnehmer rolle haben alle benutzer mit dieser rolle haben zugriff auf 3 funktionen die erste besteht darin, sich für erstellte veranstaltungen zu registrieren diese funktion erstellt ein neues registrierungsobjekt und setzt den registrierungsbooleschen wert für den benutzer auf true geben sie die folgende eingabeaufforderung oder eine ähnliche ein, um diese logik zu erreichen generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message als nächstes benötigen sie eine funktion, um alle veranstaltungen abzufragen, für die der benutzer registriert ist wir werden diese funktion listupcomingevents nennen erstellen sie diese funktion mit einer eingabeaufforderung wie dieser create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found bestätigen sie, dass die funktion erfolgreich in main js erstellt wurde, und ändern sie den code bei bedarf entweder manuell oder mithilfe von cursor eingabeaufforderungen beachten sie in dieser eingabeaufforderung, dass die funktionsparameter für den ai agenten von cursor nicht angegeben wurden dies zeigt, wie der agent mcp verwendet, um die parameter, die eine funktion benötigt, durch die untersuchung des datenbankschemas abzuleiten es ist jedoch immer eine gute praxis, so viel kontext wie nötig in ihren eingabeaufforderungen bereitzustellen funktion zur stornierung der registrierung die letzte funktion, um die anforderungen der app zu erfüllen, ist die funktion zur stornierung der registrierung um dies zu implementieren, wird die funktion die eventid und userid der ausgewählten veranstaltungsregistrierung abrufen und deren booleschen wert aktualisieren fügen sie die oben genannte logik zu ihrer backend anwendung hinzu, indem sie eine ähnliche eingabeaufforderung wie diese verwenden create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure sie können den gesamten von cursor und mcp erstellten code überprüfen und bei bedarf auf ihrem app dashboard → cloud code , wie im bild unten gezeigt mit diesen funktionen haben sie nun alle anforderungen für das backend ihrer event manager anwendung erfüllt erstellen sie ein frontend für ihr backend mit mcp unter verwendung von cursor jetzt, da ihr backend erfolgreich erstellt und bereitgestellt wurde, werden sie ein frontend ui für ihre app erstellen dieses ui wird ihr back4app backend über die rest api endpunkte von back4app nutzen um dies zu tun, wird mcp ihre backend schema metadaten abrufen, und cursor wird diese metadaten verwenden, um das ui ihrer anwendung mit der folgenden eingabespezifikation zu erstellen build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive dieser prompt zielt darauf ab, ein next js frontend in einem einzigen schritt zu erstellen sie können immer weitere änderungen anfordern, wenn sie mit der generierung von cursor nicht zufrieden sind stellen sie sicher, dass parse korrekt mit der anwendungs id und dem javascript schlüssel initialisiert wurde, falls cursor dies nicht korrekt behandelt diese variablen ermöglichen es ihnen, anfragen an die backend anwendung zu stellen das obige bild zeigt die next js anwendung, die mit einem einzigen befehl unter verwendung von cursor und back4app’s mcp generiert wurde setzen sie ihre anwendung in betrieb schließlich werden sie ihre full stack anwendung mit der webhosting funktion von back4apps bereitstellen um ihre next js anwendung bereitzustellen, erstellen sie eine dockerfile im stammverzeichnis ihres projekts und fügen sie den folgenden code ein \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] dieses dockerfile macht folgendes beginnt mit der offiziellen node js 14 laufzeit setzt das arbeitsverzeichnis auf /app kopiert package json und package lock json in das docker image und installiert abhängigkeiten kopiert den verbleibenden anwendungscode in das docker image baut die next js anwendung öffnet port 3000 für die anwendung definiert den befehl zum starten der anwendung sie benötigen auch eine dockerignore datei erstellen sie eine im stammverzeichnis ihres projekts und fügen sie diese befehle hinzu \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore führen sie nun den folgenden befehl in ihrem terminal aus, um das docker image zu erstellen und zu testen docker build t event manager frontend docker run p 3000 3000 event manager frontend sie finden ihr erstelltes docker image unter http //localhost 3000 wenn sie überprüft haben, dass ihre anwendung wie gewünscht funktioniert, ist es zeit, ihren code in ein github repository zu pushen und ihn über back4app bereitzustellen öffnen sie ihre event manager app auf ihrem back4app dashboard und navigieren sie zu webbereitstellung sobald sie dort sind, fahren sie fort, back4app die berechtigung zu erteilen, ihr kontorepository anzuzeigen, und wählen sie das repository aus, in das sie die frontend app gepusht haben, die sie bereitstellen möchten geben sie ihrem projekt einen namen (z b event manager) und klicken sie auf die „bereitstellen“ schaltfläche, die im obigen bild angezeigt wird, um ihre anwendung bereitzustellen wenn dies erfolgreich ist, sehen sie eine nachricht, dass die bereitstellung erfolgreich war sie können auf ihre bereitgestellte anwendung im web zugreifen, indem sie den link verwenden, den back4app auf dem bereitstellungsbildschirm unten bereitstellt herzlichen glückwunsch, sie haben ihre anwendung erfolgreich auf back4app bereitgestellt sie können das im rahmen dieses tutorials erstellte event manager projekt hier https //eventmanager3 3jqdnkfk b4a run/ besuchen fazit in diesem artikel haben sie eine backend event management app entworfen und bereitgestellt, die es benutzern ermöglicht, veranstaltungen entweder als organisatoren oder teilnehmer zu verwalten sie haben auch das frontend für ihre anwendung mit next js erstellt und cursor verwendet, um die entwicklung zu beschleunigen die kombination von cursors ki unterstützter entwicklerumgebung mit back4apps mcp schafft einen leistungsstarken entwicklungsworkflow, der die entwicklungszeit drastisch verkürzt und es einfacher macht, ihr back4app backend zu erstellen viel spaß beim programmieren!