Comment construire un backend en utilisant Claude ?

le développement backend traditionnel nécessite souvent une programmation extensive, une gestion de l'infrastructure et des ressources de développement significatives cependant, tirer parti des plateformes modernes de backend as a service peut considérablement simplifier ce processus back4app simplifie ce processus en fournissant un ensemble complet d'outils conçus pour accélérer votre flux de travail un de ces outils est le protocole de contexte de modèle (mcp) de back4app , qui vous permet de construire un backend entier à partir d'un llm comme claude en utilisant uniquement un langage naturel dans ce tutoriel, vous apprendrez à construire le backend et l'interface utilisateur (ui) pour un suivi des dépenses personnelles en utilisant le serveur mcp de back4app via claude et à le déployer sur les conteneurs back4app points clés à retenir vous pouvez voir le suivi des dépenses personnelles en direct construit dans ce tutoriel en utilisant ce lien découvrez comment créer un backend sur back4app en quelques minutes en utilisant les invites de claude et le serveur mcp voyez les hooks de cloud code en action alors qu'ils sécurisent les écritures réservées aux propriétaires et maintiennent des résumés mensuels précis sans infrastructure supplémentaire apprenez à créer un frontend réactif qui se connecte à vos api parse via le sdk javascript, le tout généré par claude explorez le déploiement en un clic avec les conteneurs back4app, poussant votre dépôt github en production sans frais opérationnels conditions préalables pour suivre ce tutoriel, vous devez avoir les éléments suivants un compte back4app vous pouvez vous inscrire gratuitement si vous n'en avez pas claude desktop installé sur votre système connaissance de base des concepts de développement backend aperçu du projet suivi des dépenses personnelles vous allez construire un backend de suivi des dépenses que claude peut interroger et mettre à jour en temps réel votre suivi des dépenses peut enregistrer vos dépenses organisées par catégories et fournit des résumés mensuels et annuels de vos habitudes de dépenses le projet a 4 modèles de données utilisateurs ce tableau stocke les identifiants de compte et la limite de dépenses mensuelles pour chaque personne les champs incluent email, mot de passe, budget mensuel et horodatages dépense ce tableau enregistre chaque achat ici date, montant, catégorie et une description catégorie ce tableau stocke les étiquettes définies par l'utilisateur pour regrouper les dépenses les champs incluent id, user id, nom et horodatages résumé mensuels ce tableau met en cache les totaux pré aggrégés pour des vérifications rapides du tableau de bord et du budget les champs incluent user id , mois , total dépensé , et horodatages chaque fois que vous enregistrez une dépense, un beforesave déclencheur de cloud code trouve (ou crée) le résumé mensuel de ce mois et incrémente ses totaux tout en déduisant le montant de votre budget mensuel voici un diagramme de relation d'entité pour vous aider à visualiser le schéma maintenant que vous avez une idée générale de ce que vous allez construire, dans la section suivante, vous allez configurer le serveur mcp de back4app avec claude desktop et commencer à écrire des invites qui créeront l'application décrite dans cette section connexion de back4app et claude desktop pour connecter le serveur mcp de back4app à claude desktop, vous avez d'abord besoin d'une clé de compte back4app pour la récupérer, connectez vous à votre compte back4app et sur votre tableau de bord utilisateur, cliquez sur le menu déroulant de la barre de navigation et sélectionnez clés de compte sur la page des clés de compte , donnez un nom à votre clé de compte, copiez la clé générée et conservez la en toute sécurité ensuite, vous devez modifier le fichier de configuration de claude desktop pour inclure le serveur mcp de back4app par défaut, le fichier de configuration de claude desktop n'existe pas sur votre système vous pouvez créer le fichier de configuration en naviguant vers les paramètres de claude desktop sur votre système, en sélectionnant l'{ option développeur et en cliquant sur le bouton modifier la configuration , ou vous pouvez suivre ce guide cela créera un fichier de configuration à (si vous n'en avez pas déjà un) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …et affichera le fichier dans votre système de fichiers ouvrez le fichier de configuration avec n'importe quel éditeur de texte de votre choix et ajoutez la configuration ci dessous { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } remplacez \<account key> par votre clé de compte, enregistrez le fichier et redémarrez claude desktop si vous suivez ce tutoriel sur une machine windows, changez la valeur de la clé de commande en npx cmd avec ces configurations en place, vous êtes prêt à commencer à construire votre backend back4app avec le serveur mcp de back4app et claude desktop créer le backend avec claude desktop pour créer le backend du projet décrit précédemment, vous devez créer une nouvelle application sur back4app et, dans l'application, créer les tables de base de données appropriées vous pouvez y parvenir en utilisant claude desktop et un prompt votre prompt doit instruire claude de créer une nouvelle application nommée “suivi des dépenses personnelles”, de définir quatre classes mongodb ( user, category, expense et monthlysummary) avec les champs requis, les relations de pointeur, les valeurs par défaut et les contrôles d'accès, et d'incorporer des hooks cloud code qui mettent à jour les résumés mensuels chaque fois qu'une dépense change, bloquent les écritures non autorisées et empêchent les noms de catégories en double pour un utilisateur un exemple de prompt qui y parvient est fourni ci dessous 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 lorsque vous envoyez le prompt, vous recevrez une série de pop ups de claude demandant la permission d'effectuer des tâches spécifiques, telles que la création de l'application les pop ups offrent une occasion de revoir et d'autoriser chaque action potentiellement irréversible, comme la création d'une nouvelle application ou l'ajout de classes, garantissant que rien n'est déployé, facturé ou exposé sans votre consentement explicite ils agissent comme une protection contre les changements accidentels, garantissant que vous restez en contrôle de vos ressources back4app ensuite, implémentez l'authentification des utilisateurs dans votre application en donnant à claude une série d'instructions qui lui demandent d'ajouter des fonctions cloud d'inscription et de connexion basées sur des jetons, de supprimer l'accès public à la classe user, de conserver la lecture publique mais l'écriture réservée au propriétaire sur category, expense et monthlysummary, et de créer des gardes beforesave qui rejettent toute écriture lorsque la demande n'est pas authentifiée une liste d'exemples d'instructions pour chaque fonctionnalité est énumérée ci dessous s'inscrire 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 cette instruction crée le code cloud d'inscription se connecter 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 cette instruction crée une connexion correspondante pour le code cloud permissions au niveau de la classe update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary cette instruction garantit que seuls les propriétaires de la catégorie, des dépenses et du résumé mensuel peuvent les modifier l'exécution de ces instructions conclut toute votre logique backend dans la section suivante, vous générerez un frontend pour votre backend génération du frontend puisque claude a créé votre backend back4app, il se souvient à quoi ressemblent le schéma et les réponses en profitant de ce contexte, vous pouvez lui demander de créer une interface utilisateur qui correspond au schéma de l'application créée un exemple de prompt est fourni ci dessous 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 vous devriez obtenir une interface utilisateur complète copiez le code fourni dans un ide comme vs code et poussez le code sur github dans la section suivante, vous déploierez votre frontend sur les conteneurs back4app déploiement de votre application sur les conteneurs back4app les conteneurs back4app vous permettent de déployer vos applications facilement en utilisant un dockerfile et un dépôt github pour déployer votre application sur les conteneurs back4app, vous devez d'abord inclure un dockerfile dans votre dépôt vous pouvez demander à claude d'en générer un en utilisant l'invite ci dessous generate a docker file for the ui of my personal expense tracker ou vous pourriez utiliser le dockerfile fourni ci dessous \# 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;"] après avoir ajouté le dockerfile et l'avoir poussé sur github, accédez à votre tableau de bord des applications back4app, cliquez sur le tableau de bord déroulant, et sélectionnez l'option plateforme de déploiement web sur la page de déploiement, cliquez sur le bouton “déployer une application web” et donnez à back4app accès au dépôt que vous souhaitez déployer sélectionnez l'application que vous souhaitez déployer, remplissez les détails de déploiement, et cliquez sur le bouton déployer cliquer sur le bouton lance le processus de déploiement, et une fois terminé, vous obtiendrez une url en direct pour l'application vous pouvez consulter le suivi des dépenses personnelles en direct construit dans ce tutoriel en utilisant ce lien conclusion dans cet article, vous avez construit une application qui suit vos dépenses en utilisant le serveur back4app mcp et claude, puis vous l'avez déployée en utilisant les conteneurs back4app cela met en avant l'ensemble des outils de back4app qui vous permettent de construire des applications depuis l'idéation jusqu'au lancement avec un minimum de frais généraux comme prochaine étape, vous pouvez étendre le projet avec des fonctionnalités telles que des modèles de dépenses récurrentes, des importations csv ou des notifications push pour les dépassements de budget toutes ces améliorations s'intègrent naturellement dans le même flux de travail back4app définir de nouvelles classes ou des fonctions cloud avec claude, les sécuriser avec des hooks beforesave, et déployer des mises à jour via les conteneurs back4app cette approche vous permet d'améliorer votre application sans perturber les utilisateurs ou changer de fournisseur d'hébergement