Wie man ein Backend mit VS Code erstellt?

vs code ermöglicht es ihnen, externe tools, die über einen aktiven mcp server verfügen, ü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 eine blog plattform mit dem back4app mcp server über vs code erstellen und es auf back4app containern bereitstellen wichtige erkenntnisse erfahren sie, wie sie ein backend auf back4app mit vs code und einem 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 über back4app container bereit sie können den live blog, der in diesem tutorial erstellt wurde, über diesen link ansehen voraussetzungen um diesem tutorial zu folgen, benötigen sie folgendes ein back4app konto sie können sich kostenlos anmelden , wenn sie noch keins haben vs code auf ihrem system installiert grundlegende vertrautheit mit konzepten der backend entwicklung projektübersicht ein blog in diesem tutorial werden sie einen einfachen blog erstellen, der es ihnen ermöglicht, blogbeiträge zu erstellen, zu bearbeiten, anzuzeigen und zu löschen er unterstützt auch kommentare und verfolgt die anzahl der personen, die ihre blogbeiträge angesehen haben zusätzlich zur user tabelle, die standardmäßig auf back4app für die authentifizierung bereitgestellt wird, wird ihr blog drei weitere tabellen haben beiträge, kommentare und ansichten wenn ein benutzer in ihrem blog ein konto erstellt, erstellt back4app einen neuen datensatz in der user tabelle und gibt ein sicheres sitzungstoken aus, das sie bei nachfolgenden anfragen wiederverwenden können nur authentifizierte benutzer können dann beiträge veröffentlichen wenn ein blogbeitrag veröffentlicht wird, können sowohl authentifizierte als auch nicht authentifizierte benutzer die beiträge lesen; jedoch können nur authentifizierte benutzer kommentieren jedes mal, wenn ein blogbeitrag aus der back4app datenbank abgerufen wird, wird die anzahl der aufrufe erhöht; um möglichen missbrauch dieser funktion zur aufblähung der aufrufe zu verhindern, werden sie einige schutzmaßnahmen implementieren jetzt, da sie eine grobe vorstellung davon haben, was sie bauen werden, werden sie im nächsten abschnitt vscode mit dem back4app mcp server verbinden vscode mit dem back4app mcp server verbinden navigieren sie zur back4app website und klicken sie auf die neue app schaltfläche oben links auf der seite auf dem bildschirm „backend erstellen“ benennen sie ihre app und klicken sie auf die erstellen schaltfläche auf ihrer app übersichtsseite klicken sie auf die mcp setup schaltfläche im modal „wählen sie ihre ide“ klicken sie auf vs code und folgen sie den anweisungen auf dem bildschirm, um vscode automatisch mit dem back4app mcp server zu verbinden wenn sie die automatische installationsoption befolgt haben, müssen sie vs code auf ihrem computer neu starten, bevor sie fortfahren alternativ können sie den back4app mcp server manuell verbinden (was ihnen mehr kontrolle über die konfiguration gibt), indem sie das modal in den manuellen abschnitt wechseln nachdem sie die schritte im modal befolgt haben, um den back4app mcp server mit vscode zu verbinden, können sie die verbindung bestätigen, indem sie die suchleiste in ihrem vscode fenster anklicken und nach „>mcp server auflisten“ suchen, den befehl ausführen, und sie sollten eine liste der verfügbaren mcp server und deren aktuellen status (läuft/gestoppt) sehen jetzt, da sie den back4app mcp server mit vscode verbunden haben, werden sie im nächsten abschnitt die eingabeaufforderungen schreiben, die ihre gesamte anwendung erstellen backend ihres blogs erstellen um ihr backend mit vscode und github copilot zu erstellen, müssen sie zunächst den agentenmodus in github copilot aktivieren um den agentenmodus zu aktivieren, öffnen sie den github copilot chat, indem sie „ control + command + i” auf macos drücken, für windows drücken sie „ctrl + i“ auf der chat seite klicken sie auf das dropdown menü mit dem label „fragen“ und wählen den „agent“ modus aus geben sie github copilot als nächstes die folgende eingabeaufforderung oder eine ähnliche ein, um die für ihre app erforderlichen klassen zu erstellen erstellen sie ein backend namens „blogger“ beginnen sie mit der hinzufügung einer post klasse mit den folgenden feldern titel und inhalt als erforderliche strings, ein eindeutiger slug, eine optionale heroimage datei, die im back4app bucket gespeichert ist, ein autor pointer zur integrierten benutzerklasse, zähler für commentcount und viewcount (alle beginnen bei 0), ein status string, der auf entwurf oder veröffentlicht beschränkt ist, und ein publishedat datum, das automatisch gesetzt wird, wenn ein entwurf erstmals veröffentlicht wird erstellen sie als nächstes eine kommentar klasse, die den inhalts string, den autor pointer und den post pointer speichert fügen sie eine view klasse hinzu, die jede seitenansicht mit optionalem benutzer und erforderlichem post pointer aufzeichnet die obige eingabeaufforderung erstellt ein neues back4app backend namens „blogger“ und füllt es mit einer post , einer kommentar und einer view klasse sowie deren erforderlichen eigenschaften wenn sie diese eingabeaufforderung mit copilot ausführen, protokolliert es die schritte, die es in ihrem chatfenster ausführt, und fragt sie nach erlaubnis für jeden der schritte, die ihre daten verändern für die besten ergebnisse führen sie diese eingabeaufforderungen mit einem premium modell wie 03 mini oder claude sonnet 4 aus nachdem copilot die erforderlichen klassen erstellt hat, haben sie jetzt eine strukturierte möglichkeit, die daten ihres blogs zu speichern im nächsten abschnitt implementieren sie die authentifizierung für ihre app implementierung der authentifizierung die authentifizierungsanforderungen für ihre app sind einfach die benutzer müssen sich registrieren und anmelden, um blogbeiträge zu erstellen und kommentare zu blogbeiträgen abzugeben sie können jedoch blogbeiträge in ihrer app lesen, ohne authentifiziert zu sein sie können die authentifizierungsanforderungen für ihre app mit dem folgenden prompt implementieren fügen sie die benutzerauthentifizierung zu blogger hinzu, indem sie die integrierte benutzerklasse erweitern jedes konto muss einen `benutzernamen`, ein `passwort`, das mindestens einen acht zeichen langen, und eine `e mail` adresse angeben vor jedem speichern konvertiert cloud code die e mail in kleinbuchstaben, überprüft dann, ob kein anderes konto sie bereits verwendet; wenn die adresse bereits vergeben ist, wird das speichern abgelehnt der gleiche trigger erzwingt auch die regel zur passwortlänge stellen sie vier cloud funktionen für das frontend bereit \ signup akzeptiert einen benutzernamen, eine e mail und ein passwort es erstellt den 	benutzer, gibt den neuen datensatz zurück und enthält das sitzungstoken, sodass der aufrufer sofort authentifiziert ist \ login nimmt entweder einen benutzernamen oder eine e mail plus ein passwort und gibt bei erfolgreicher anmeldung das benutzerobjekt und das token zurück \ logout macht das aktuelle sitzungstoken ungültig der obige prompt fügt ihrer app die benutzerauthentifizierung hinzu die authentifizierungslogik ermöglicht es ihren benutzern, ein konto mit einer e mail, einem benutzernamen und einem passwort zu erstellen nach der registrierung wird der benutzer automatisch angemeldet, und wenn sich ein benutzer abmeldet, wird seine aktuelle sitzung ungültig nachdem copilot ihre authentifizierungslogik implementiert hat, haben ihre benutzer eine sichere möglichkeit, sich zu registrieren und anzumelden im nächsten abschnitt implementieren sie die erforderliche logik zum erstellen von beiträgen und kommentaren erstellen von beiträgen und kommentaren um die funktion zum erstellen von beiträgen und kommentaren zu implementieren, müssen sie zwei cloud funktionen und die unterstützenden hooks erstellen, die es authentifizierten benutzern ermöglichen, beiträge zu veröffentlichen und kommentare in einem nahtlosen ablauf hinzuzufügen beginnen sie damit, die unterstützenden hooks zu erstellen, indem sie copilot den folgenden prompt oder einen ähnlichen geben erweitern sie die blogger app, indem sie einen post beforesave hook hinzufügen, der jeden neuen beitragstitel in einen url freundlichen slug umwandelt (kleinbuchstaben, leerzeichen durch bindestriche ersetzt und symbole entfernt) und dann die post klasse überprüft, um sicherzustellen, dass der slug einzigartig ist wenn der beitrag erstellt wird, setzt der hook auch `status` auf `"published"` und zeichnet das aktuelle datum in `publishedat` auf fügen sie einen comment aftersave hook hinzu, der sofort nach dem speichern eines kommentars die `commentcount` des übergeordneten beitrags erhöht, sodass die gesamtzahl ohne zusätzliche abfragen genau bleibt die obige aufforderung implementiert überprüfungen/aktionen, die durchgeführt werden, bevor ein beitrag oder kommentar erstellt wird für beiträge wird ein eindeutiger slug unter verwendung des titels generiert, dann ändert sich der status auf veröffentlicht, und das aktuelle datum wird als veröffentlichungsdatum festgelegt für kommentare wird einfach die kommentaranzahl des verlinkten beitrags aktualisiert jetzt erstellen sie die cloud funktionen, die mit den oben genannten beforesave hooks verbunden sind, mit der folgenden aufforderung oder einer ähnlichen stellen sie zwei cloud funktionen für das frontend bereit die erste, createpost, akzeptiert `title`, `body` und ein optionales `heroimage`, erfordert, dass der aufrufer angemeldet ist, weist den aufrufer als `author` zu, fügt das bild hinzu, wenn es bereitgestellt wird, speichert den beitrag und gibt das gespeicherte objekt zurück die zweite, addcomment , erfordert eine authentifizierung, nimmt `postid` und `content`, bestätigt, dass der beitrag existiert, erstellt einen kommentar, der sowohl mit dem beitrag als auch mit dem aufrufer verknüpft ist, speichert ihn und gibt den neuen kommentar zurück um missbrauch zu verhindern, beschränken sie jeden authentifizierten benutzer auf fünf aufrufe zu createpost und fünfzehn aufrufe zu addcomment pro minute die obige aufforderung stellt zwei cloud code funktionen bereit, die es ihren benutzern ermöglichen, beiträge und kommentare zu erstellen es schützt auch ihre app vor missbrauch, indem es auf 5 beitragserstellungen und 15 kommentare pro minute beschränkt die hauptlogik, die mit der erstellung der beiträge und kommentare verbunden ist, wurde bereits in den zuvor erstellten beforesave hooks implementiert; diese stellt nur eine api für das frontend zur verfügung nachdem copilot die oben genannte logik implementiert hat, haben ihre benutzer die möglichkeit, beiträge zu erstellen und zu kommentieren im nächsten abschnitt werden sie die logik implementieren, die erforderlich ist, um diese kommentare und beiträge zu aktualisieren, sowie die logik, die erforderlich ist, um die aufrufe jedes blogbeitrags zu zählen aktualisierung von beiträgen, kommentaren und aufrufen um die funktionalität zu implementieren, die es benutzern ermöglicht, ihre beiträge zu bearbeiten, ihre eigenen kommentare zu überarbeiten und seitenaufrufe zu registrieren, benötigen sie zwei cloud funktionen updatepost, updatecomment und einen aftertrigger sie können die cloud funktion updatepost mit der folgenden aufforderung oder einer ähnlichen implementieren implementieren sie eine cloud funktion, updatepost, die erfordert, dass der aufrufer angemeldet ist und überprüft, dass der autor des beitrags mit request user übereinstimmt akzeptieren sie die objekt id des beitrags zusammen mit einem neuen titel, body oder einem ersatz heroimage ignorieren oder lehnen sie jeden versuch ab, ein statusfeld bereitzustellen; sobald ein beitrag veröffentlicht ist, kann sein status über diesen weg nicht mehr geändert werden nachdem sie den beitrag geladen und das eigentum bestätigt haben, wenden sie die zulässigen aktualisierungen an und speichern sie wenn sich der titel ändert, verlassen sie sich auf den vorhandenen post beforesave hook, um einen eindeutigen slug neu zu erstellen geben sie den aktualisierten beitrag an den aufrufer zurück die obige aufforderung erstellt eine funktion, die einen beitrag aktualisiert sie stellt sicher, dass die aktualisierung nur von dem benutzer durchgeführt werden kann, der den beitrag erstellt hat, und regeneriert den slug, wenn der titel geändert wird sie können die cloud funktion updatecomment mit dem folgenden oder einem ähnlichen prompt implementieren implementieren sie eine cloud funktion, updatecomment, die eine authentifizierung erfordert, nehmen sie die objectid des kommentars und den überarbeiteten inhalt an, holen sie den kommentar und bestätigen sie, dass der anrufer dessen autor ist wenden sie den neuen inhalt an und speichern sie; der comment aftersave hook lässt die commentcount automatisch unverändert, da der kommentar bereits existiert geben sie den bearbeiteten kommentar zurück der obige prompt erstellt eine funktion, die einen kommentar zu einem beitrag aktualisiert die aktualisierung kann nur vom ersteller des kommentars durchgeführt werden sie können die cloud funktion recordview mit dem folgenden oder einem ähnlichen prompt implementieren fügen sie einen afterfind trigger in der post klasse hinzu, sodass jedes mal, wenn das backend einen einzelnen beitrag über `objectid` zurückgibt, automatisch eine seitenansicht aufgezeichnet wird wenn die abfrage ein feed oder eine suche ist, die mehrere beiträge zurückgibt, verlässt der trigger ohne etwas zu tun holen sie sich innerhalb des triggers den beitrag von `request results\[0]`, erstellen sie ein neues view objekt, setzen sie seinen `post` zeiger auf diesen beitrag und, wenn verfügbar, setzen sie einen `viewer` zeiger auf `request user`, speichern sie die ansicht, rufen sie `post increment("viewcount")` auf, speichern sie den beitrag und geben sie `request results` zurück, um die ursprüngliche abfrage abzuschließen der obige prompt erstellt einen afterfind trigger in der post klasse immer wenn das backend einen einzelnen beitrag (abgerufen über seine objectid) zurückgibt, erstellt der trigger automatisch einen neuen view datensatz, der auf diesen beitrag (und den aktuellen benutzer, falls angemeldet) verweist und die viewcount des beitrags erhöht wenn die abfrage mehrere beiträge zurückgibt, tut der trigger nichts damit ist die funktionalität ihres blogs größtenteils abgeschlossen als nächstes implementieren sie die funktionalität, die es ihren benutzern ermöglicht, ihre beiträge zu löschen beiträge löschen um einen beitrag zu löschen, muss der benutzer derjenige sein, der ihn erstellt hat sobald ein beitrag gelöscht ist, werden alle zugehörigen inhalte (ansichten, kommentare) zusammen mit ihm gelöscht sie können die funktionalität zum löschen von beiträgen mit dem folgenden oder einem ähnlichen prompt implementieren erstellen sie eine deletepost cloud funktion, damit autoren ihre eigenen arbeiten entfernen können der anrufer muss angemeldet sein und die objectid des beitrags übergeben beginnen sie damit, den beitrag abzurufen und zu bestätigen, dass sein autor request user entspricht; wenn nicht, lehnen sie die anfrage ab nachdem das eigentum überprüft wurde, löschen sie den beitragsdatensatz, und entfernen sie alle zugehörigen kommentare und ansichten, deren post zeiger mit dem gelöschten beitrag übereinstimmt geben sie schließlich eine kurze erfolgsmeldung zusammen mit der anzahl der gelöschten datensätze zurück der obige prompt implementiert die erforderliche logik zum löschen von beiträgen mit diesen ergänzungen deckt ihr backend nun den gesamten lebenszyklus von inhalten ab, sodass autoren veröffentlichen, überarbeiten und löschen können, leser diskutieren können und genaue ansichtsstatistiken für jeden beitrag geführt werden im nächsten abschnitt werden sie eine benutzeroberfläche für ihre anwendung erstellen generierung ihres frontends sie können den kontext, den copilot beim erstellen ihres backends auf back4app hat, nutzen, um ihn 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 generieren sie ein minimales frontend, das dem schema entspricht und alle funktionen der blog anwendung auf meinem back4app konto implementiert und verbinden sie das frontend mit dem backend unter verwendung des javascript parse sdk mit dem obigen prompt oder einem ähnlichen wird copilot ein frontend generieren, das dem schema ihres backends entspricht und es mit ihrem backend verbindet führen sie die app mit den von copilot bereitgestellten anweisungen aus und nehmen sie alle gewünschten anpassungen vor jetzt, da ihr projekt abgeschlossen ist, werden sie es im nächsten abschnitt auf 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 generieren sie eine docker datei für die ui meiner blog anwendung oder sie könnten die unten bereitgestellte docker datei verwenden \# starten sie mit dem offiziellen leichten nginx alpine image from nginx\ alpine \# entfernen sie den standardinhalt run rm rf /usr/share/nginx/html/ \# kopieren sie ihre statische seite (html, css, assets) in den container copy /usr/share/nginx/html/ \# port 80 freigeben expose 80 \# starten sie nginx im vordergrund cmd \["nginx", " g", "daemon off;"] nachdem sie die docker datei hinzugefügt und auf github gepusht haben, navigieren sie zu ihrem back4app app dashboard, klicken sie auf das dashboard dropdown menü und wählen sie die web deployment platform option auf der bereitstellungsseite klicken sie auf die schaltfläche „webanwendung 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 blog, der in diesem tutorial erstellt wurde, über diesen link fazit in diesem artikel haben sie eine vollständige blogging plattform mit dem back4app mcp server und github copilot erstellt und sie dann mit back4app containers 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ächsten schritt können sie das projekt mit funktionen wie der integration von sozialen medien, automatisierten e mail benachrichtigungen für neue kommentare, erweiterten suchfunktionen oder analysen zum engagement von beiträgen und dem verhalten der leser erweitern all diese verbesserungen passen nahtlos in denselben back4app workflow entwerfen und definieren neuer klassen oder cloud funktionen mit github copilot, sie mit beforesave hooks sichern und updates über back4app containers bereitstellen dieser ansatz ermöglicht es ihnen, neue funktionen zu ihrem blog hinzuzufügen, ohne die benutzer zu stören