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 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 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 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 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 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 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 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 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 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 oder sie könnten die unten bereitgestellte docker datei verwenden 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