Wie man ein Backend mit Windsurf aufbaut?

die windsurf ide ermöglicht es ihnen, externe tools, die einen aktiven mcp server haben, über das mcp protokoll zu integrieren dies ermöglicht es ihnen, aufgaben auszuführen und daten aus diesen quellen zu lesen, ohne ihre ide zu verlassen, indem sie eingabeaufforderungen verwenden in diesem tutorial lernen sie, wie sie das backend und die benutzeroberfläche (ui) für einen terminplaner mit dem back4app mcp server über die windsurf ide erstellen und es in back4app containern bereitstellen wichtige erkenntnisse sie können den live persönlichen ausgaben tracker, der in diesem tutorial erstellt wurde, über diesen link ansehen erfahren sie, wie sie ein backend auf back4app mit windsurf und dem back4app mcp server erstellen erforschen sie, wie beziehungen zwischen klassen auf back4app modelliert werden erforschen sie, wie authentifizierung und rollenbasierte autorisierung von back4app mit ihren integrierten klassen implementiert werden stellen sie ihre app mit nur wenigen klicks in back4app containern bereit voraussetzungen um dieses tutorial zu folgen, benötigen sie folgendes ein back4app konto sie können sich kostenlos anmelden , wenn sie noch keins haben windsurf ide auf ihrem system installiert grundkenntnisse in backend entwicklungskonzepten projektübersicht terminplaner in diesem tutorial erstellen sie einen terminplaner, der zwei rollen unterstützt anbieter , die die von ihnen angebotenen dienstleistungen registrieren, und kunden , die diese dienstleistungen buchen anbieter definieren jede dienstleistung mit einem namen, einer dauer und einem preis kunden durchsuchen dann die verfügbaren dienstleistungen, wählen ein datum und eine uhrzeit aus und bestätigen eine buchung sobald gebucht, erscheint der termin sowohl im dashboard des anbieters als auch im dashboard des kunden, mit einem status, den sie nach bedarf aktualisieren oder stornieren können dieses projekt wird 4 klassen haben benutzer , rolle , termin , und dienst die benutzer und rollenklassen sind teil der integrierten klassen von back4app und werden für authentifizierung und zugriffskontrollen verwendet die dienstklasse wird die einzelheiten jedes angebots definieren, seinen namen, die dauer und den preis, damit anbieter auflisten können, was sie anbieten, und kunden die angebote durchsuchen können die termin klasse wird einen kunden und einen anbieter mit einem gewählten dienst zu bestimmten start und endzeitfeldern verknüpfen, den status verfolgen („ausstehend“, „bestätigt“, „storniert“) und objektbezogene acls verwenden, sodass nur der buchende kunde und sein anbieter jeden termin lesen oder ändern können hier ist ein entity relationship diagramm, um ihnen zu helfen, das schema zu visualisieren jetzt, da sie eine grobe vorstellung davon haben, was sie bauen werden, werden sie im nächsten abschnitt den back4app mcp server mit windsurf einrichten und beginnen, eingabeaufforderungen zu schreiben, die die in diesem abschnitt beschriebene app erstellen verbindung von back4app und windsurf sehen sie sich das folgende video für ein tutorial an, wie sie windsurf mit back4app verbinden um den back4app mcp server mit windsurf zu verbinden, benötigen sie zunächst einen back4app kontoinhaber um ihn abzurufen, melden sie sich bei ihrem back4app konto an und klicken sie auf ihrem benutzer dashboard auf das dropdown menü in der navigationsleiste und wählen sie account keys auf der account keys seite geben sie ihrem kontoinhaber einen namen, kopieren sie den generierten schlüssel und bewahren sie ihn sicher auf als nächstes öffnen sie windsurf und klicken auf das hammer symbol im cascade assistenten dies öffnet ein dropdown menü mit einer schaltfläche zum konfigurieren, klicken sie darauf die schaltfläche zum konfigurieren führt sie zur seite plugins verwalten klicken sie auf die schaltfläche „rohkonfiguration anzeigen“ und fügen sie das konfigurationsobjekt unten in die datei ein { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } ersetzen sie \<account key> durch ihren kontoschlüssel, speichern sie die datei und aktualisieren sie windsurf wenn sie dieses tutorial auf einem windows rechner befolgen, ändern sie den wert des befehls schlüssels in npx cmd erstellen des backends mit windsurf um das backend des terminplaners mit windsurf zu erstellen, müssen sie zunächst dem cascade assistenten einen prompt geben, der ihm sagt, dass er eine neue app mit dem von ihnen angegebenen namen sowie den erforderlichen datenbanktabellen erstellen soll sie können dies für den terminplaner mit dem folgenden prompt erreichen create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict dieser oben genannte prompt sagt windsurf, dass es ein backend „terminplaner“ erstellen soll, indem es zwei neue datenmodelle erstellt service und appointment, mit den entsprechenden beziehungen und feldern es implementiert auch einen serverseitigen beforesave hook auf appointment, der überlappende buchungen für denselben anbieter verhindert windsurf protokolliert alle anfragen, die es stellt, während es versucht, die aufgabe zu erfüllen, und sobald es die ausführung beendet hat, wird es eine zusammenfassung der aufgabe bereitstellen jetzt, da die app und datenbankklassen erstellt wurden, können sie als nächstes die authentifizierung für ihr backend implementieren implementierung von authentifizierung und autorisierung im backend für diese app müssen sie sicherstellen, dass benutzer sich sicher anmelden können und nur die dinge tun, die sie tun dürfen zum beispiel sollten nur benutzer, die sich als anbieter anmelden, in der lage sein, einen dienst aufzulisten, und nur ein anbieter, der einen dienst auflistet, sollte in der lage sein, den dienst zu aktualisieren sie können dies für den terminplaner mit dem folgenden prompt erreichen update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation der obige prompt weist windsurf an, die e mail/passwort anmeldung zu aktivieren, die rollen "anbieter" und "kunde" zu definieren und zuzuweisen, klassenebene berechtigungen durchzusetzen, sodass nur anbieter dienstleistungen verwalten, während authentifizierte benutzer termine verwalten, und objekt acls sowie einen beforesave hook auf termin anzuwenden, um den zugriff nur dem buchungskunden und anbieter zu gewähren und ihre rollen zu überprüfen jetzt, da sie die authentifizierung und die rollenbasierte autorisierung eingerichtet haben, können sie die erforderlichen crud endpunkte implementieren, damit die app funktioniert implementierung der crud funktionalität für dienste und termine ihre app muss es authentifizierten benutzern ermöglichen, dienste (anbieter) zu erstellen und termine für bereits erstellte dienste (kunden) zu buchen benutzer müssen auch in der lage sein, dienste und termine zu bearbeiten, zu löschen und anzuzeigen sie können dies für den terminplaner mit dem folgenden prompt erreichen add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response dieser prompt weist windsurf an, cloud code endpunkte für sowohl die service als auch die termin klassen zu generieren, die die funktionen erstellen, lesen, aktualisieren und löschen implementieren und dabei authentifizierung und rollenbasierte prüfungen durchsetzen, sodass nur anbieter dienste verwalten können und nur der buchende kunde oder der zugewiesene anbieter ihre termine verwalten kann generierung ihres frontends sie können den kontext, den windsurf aus der erstellung ihres backends auf back4app hat, nutzen, um es zu bitten, ein frontend zu erstellen, das dem schema und den anforderungen ihrer app entspricht sie können dies für den terminplaner mit dem folgenden prompt erreichen generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react mit dem obigen prompt oder einem ähnlichen wird windsurf ein frontend generieren, das dem schema ihres backends entspricht und es mit ihrem backend verbindet die projektdateien werden unter /\<user>/cascadeprojects/\<app name> gespeichert cd in die app und führen sie sie mit den im readme bereitgestellten anweisungen aus und nehmen sie alle gewünschten anpassungen vor jetzt ist ihr projekt abgeschlossen im nächsten abschnitt werden sie es in back4app containern bereitstellen bereitstellung ihrer app auf back4app containern back4app container ermöglichen es ihnen, ihre apps einfach mit einer docker datei und einem github repository bereitzustellen um ihre app auf back4app containern bereitzustellen, müssen sie zunächst eine docker datei in ihr repository einfügen sie können claude bitten, eine zu generieren, indem sie den folgenden prompt verwenden generate a docker file for the ui of my appointment scheduler oder sie könnten die unten bereitgestellte docker datei verwenden from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] nachdem sie die docker datei hinzugefügt und in github hochgeladen haben, navigieren sie zu ihrem back4app app dashboard, klicken sie auf das dashboard dropdown menü und wählen sie die web bereitstellungsplattform option auf der bereitstellungsseite klicken sie auf die schaltfläche „web app bereitstellen“ und geben sie back4app zugriff auf das repository, das sie bereitstellen möchten wählen sie die app aus, die sie bereitstellen möchten, füllen sie die bereitstellungsdetails aus und klicken sie auf die bereitstellen schaltfläche das klicken auf die schaltfläche startet den bereitstellungsprozess, und nachdem dieser abgeschlossen ist, erhalten sie eine live url zur app sie können den live persönlichen ausgaben tracker, der in diesem tutorial erstellt wurde, über diesen link fazit in diesem artikel haben sie einen terminplaner mit dem back4app mcp server und windsurf erstellt und ihn dann mit back4app containern bereitgestellt dies zeigt die vollständige suite von tools von back4app, mit denen sie von der ideenfindung bis zum start mit minimalem aufwand wechseln können als nächster schritt können sie das projekt mit funktionen wie kalender synchronisierung, automatischen e mail erinnerungen oder analysen zu buchungstrends erweitern all diese verbesserungen passen nahtlos in denselben back4app workflow neue klassen oder cloud funktionen mit windsurf entwerfen und definieren sie mit beforesave hooks sichern und updates über back4app container bereitstellen dieser ansatz ermöglicht es ihnen, neue funktionen zu ihrer app hinzuzufügen, ohne die benutzer zu stören