Wie man ein Backend mit Claude erstellt?
17 min
traditionelle backend entwicklung erfordert häufig umfangreiche programmierung, infrastrukturmanagement und erhebliche entwicklungsressourcen die nutzung moderner backend as a service plattformen kann diesen prozess jedoch erheblich vereinfachen back4app vereinfacht diesen prozess, indem es eine umfassende reihe von werkzeugen bereitstellt, die darauf ausgelegt sind, ihren arbeitsablauf zu beschleunigen eines dieser werkzeuge ist back4apps model context protocol (mcp) server , das es ihnen ermöglicht, ein komplettes backend von einem llm wie claude nur mit natürlicher sprache zu erstellen in diesem tutorial lernen sie, wie sie das backend und die benutzeroberfläche (ui) für einen persönlichen ausgaben tracker mit dem back4app mcp server über claude erstellen und auf 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 in wenigen minuten ein backend auf back4app mit claude prompts und dem mcp server erstellen sehen sie cloud code hooks in aktion, während sie nur eigentümer schreibzugriffe sichern und monatliche zusammenfassungen ohne zusätzliche infrastruktur genau halten lernen sie, wie sie ein responsives frontend erstellen, das über das javascript sdk mit ihren parse apis verbunden ist, alles generiert von claude entdecken sie die bereitstellung mit einem klick mit back4app containern, indem sie ihr github repo ohne betriebliche überlastung in die produktion bringen voraussetzungen um dieses tutorial zu folgen, benötigen sie folgendes ein back4app konto sie können sich kostenlos anmelden , wenn sie noch keins haben claude desktop auf ihrem system installiert grundlegende vertrautheit mit konzepten der backend entwicklung projektübersicht persönlicher ausgaben tracker sie werden ein backend zur ausgabenverfolgung erstellen, das claude in echtzeit abfragen und aktualisieren kann ihr ausgaben tracker kann ihre ausgaben nach kategorien organisiert aufzeichnen und bietet monatliche und jährliche zusammenfassungen ihrer ausgabengewohnheiten das projekt hat 4 datenmodelle benutzer diese tabelle speichert kontodaten und das monatliche gesamtausgabenlimit für jede person die felder umfassen e mail, passwort, monatliches budget und zeitstempel ausgabe diese tabelle speichert jeden kauf hier datum, betrag, kategoriezeiger und eine beschreibung kategorie diese tabelle speichert benutzerdefinierte bezeichnungen zum gruppieren von ausgaben die felder umfassen id, benutzer id, name und zeitstempel monatliche zusammenfassungen diese tabelle speichert voraggregierte gesamtsummen für schnelle dashboard und budgetprüfungen die felder umfassen benutzer id , monat , gesamt ausgaben , und zeitstempel jedes mal, wenn sie eine ausgabe aufzeichnen, findet ein beforesave cloud code trigger die (oder erstellt) die monatliche zusammenfassung für diesen monat und erhöht deren gesamtsummen und zieht den betrag von ihrem monatlichen budget ab 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 claude desktop einrichten und beginnen, eingabeaufforderungen zu schreiben, die die in diesem abschnitt beschriebene app erstellen verbindung von back4app und claude desktop um den back4app mcp server mit claude desktop zu verbinden, benötigen sie zunächst einen back4app kontenschlüssel 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 kontoschlüssel auf der account keys seite geben sie ihrem kontoschlüssel einen namen, kopieren sie den generierten schlüssel und speichern sie ihn sicher als nächstes müssen sie die claude desktop konfigurationsdatei ändern, um den back4app mcp server einzuschließen standardmäßig existiert die claude desktop konfigurationsdatei nicht auf ihrem system sie können die konfigurationsdatei erstellen, indem sie zu den claude desktop einstellungen auf ihrem system navigieren, die entwickler option auswählen und auf die konfiguration bearbeiten schaltfläche klicken, oder sie können diesem leitfaden folgen dies wird eine konfigurationsdatei an folgendem ort erstellen (falls sie noch keine haben) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …und zeigt die datei in ihrem dateisystem an öffnen sie die konfigurationsdatei mit einem texteditor ihrer wahl und fügen sie die folgende konfiguration hinzu { "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 starten sie den claude desktop neu wenn sie dieses tutorial auf einem windows rechner befolgen, ändern sie den wert des befehls schlüssels in npx cmd mit diesen konfigurationen sind sie bereit, ihr back4app backend mit dem back4app mcp server und claude desktop zu erstellen backend mit claude desktop erstellen um das backend des zuvor beschriebenen projekts zu erstellen, müssen sie eine neue app auf back4app erstellen und in der app die entsprechenden datenbanktabellen anlegen sie können dies mit claude desktop und einem prompt erreichen ihr prompt sollte claude anweisen, eine neue anwendung mit dem namen „persönlicher ausgaben tracker“ zu erstellen, vier mongodb klassen ( user, category, expense und monthlysummary) mit den erforderlichen feldern, zeigerbeziehungen, standardwerten und zugriffskontrollen zu definieren und cloud code hooks einzubetten, die monatliche zusammenfassungen aktualisieren, wann immer sich eine ausgabe ändert, unbefugte schreibvorgänge blockieren und doppelte kategorienamen für einen benutzer verhindern ein beispiel prompt, der dies erreicht, ist unten angegeben create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified wenn sie den prompt senden, erhalten sie eine reihe von pop ups von claude, die um erlaubnis bitten, bestimmte aufgaben auszuführen, wie z b die erstellung der app die pop ups bieten die möglichkeit, jede potenziell irreversible aktion zu überprüfen und zu genehmigen, wie z b die erstellung einer neuen app oder das hinzufügen von klassen, um sicherzustellen, dass nichts ohne ihre ausdrückliche zustimmung bereitgestellt, abgerechnet oder offengelegt wird sie fungieren als schutzmaßnahme gegen versehentliche änderungen und stellen sicher, dass sie die kontrolle über ihre back4app ressourcen behalten als nächstes implementieren sie die benutzerauthentifizierung in ihrer app, indem sie claude eine reihe von aufforderungen geben, die es anweisen, tokenbasierte anmeldungen und cloud funktionen für die anmeldung hinzuzufügen, den öffentlichen zugriff auf die user klasse zu entfernen, öffentlichen lesezugriff, aber nur schreibberechtigten zugriff für den eigentümer auf kategorie, ausgabe und monatsübersicht beizubehalten und beforesave wächter zu erstellen, die jeden schreibvorgang ablehnen, wenn die anfrage nicht authentifiziert ist eine liste von beispielaufforderungen für jede funktionalität ist unten aufgeführt anmelden update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token diese aufforderung erstellt den cloud code für die anmeldung einloggen update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success diese aufforderung erstellt ein entsprechendes login für den cloud code klassenebene berechtigungen update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary diese aufforderung stellt sicher, dass nur die eigentümer der kategorie, ausgabe und monatsübersicht diese ändern können die ausführung dieser aufforderungen schließt alle ihre backend logik ab im nächsten abschnitt werden sie ein frontend für ihr backend generieren frontend generieren da claude dein back4app backend erstellt hat, erinnert es sich daran, wie das schema und die antworten aussehen nutze diesen kontext, um es zu bitten, eine benutzeroberfläche zu erstellen, die dem schema der erstellten app entspricht ein beispielprompt ist unten angegeben generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk du solltest eine vollständige benutzeroberfläche erhalten kopiere den bereitgestellten code in eine ide wie vs code und lade den code auf github hoch im nächsten abschnitt wirst du dein frontend auf back4app containern bereitstellen bereitstellung deiner 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 die folgende eingabeaufforderung verwenden generate a docker file for the ui of my personal expense tracker oder sie könnten die unten bereitgestellte docker datei verwenden \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] 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 deployment platform 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 eine app erstellt, die ihre ausgaben mithilfe des back4app mcp servers und claude verfolgt, und sie dann mit back4app containern bereitgestellt dies zeigt die vollständige suite von tools von back4app, die es ihnen ermöglicht, apps von der idee bis zur markteinführung mit minimalem aufwand zu erstellen als nächsten schritt können sie das projekt mit funktionen wie wiederkehrenden ausgabenvorlagen, csv importen oder push benachrichtigungen für budgetüberschreitungen erweitern all diese verbesserungen passen nahtlos in denselben back4app workflow definieren sie neue klassen oder cloud funktionen mit claude, sichern sie sie mit beforesave hooks und rollen sie updates über back4app container aus dieser ansatz ermöglicht es ihnen, ihre app zu verbessern, ohne die benutzer zu stören oder den hosting anbieter zu wechseln