Comment construire un backend en utilisant un curseur ?

les projets web et mobiles modernes rencontrent souvent un obstacle dès le départ transformer une idée en un backend prêt pour la production architecturer manuellement un modèle de données, écrire une logique crud standard, déployer une infrastructure, puis maintenir le frontend synchronisé peut prendre des jours ou des semaines de temps d'ingénierie précieux ce tutoriel démontre comment la plateforme backend de back4app, le protocole model context platform (mcp), et l'ide assisté par ia de cursor éliminent ensemble cette friction en parcourant la création d'une simple application de gestion d'événements, vous verrez comment ces outils vous permettent de créer, déployer et intégrer un backend entièrement fonctionnel et un frontend correspondant principaux enseignements découvrez comment créer un backend prêt pour la production sur back4app en quelques minutes en utilisant l'agent ia de cursor et le protocole mcp obtenez des informations sur l'application d'un contrôle d'accès basé sur des rôles propre avec un helper validateuserrole réutilisable qui sépare clairement les flux de travail des organisateurs et des participants apprenez à générer et à connecter un frontend next js réactif qui consomme automatiquement vos api rest back4app explorez la conteneurisation et le déploiement en un clic avec les conteneurs back4app pour déployer votre application de gestion d'événements full stack depuis github en un temps record aperçu du projet dans ce tutoriel, vous allez construire une simple application de gestion d'événements qui permet aux utilisateurs de créer des événements, de s'inscrire à ceux qui les intéressent, de voir les événements à venir ou auxquels ils sont inscrits, et d'annuler leurs inscriptions si nécessaire vous construirez le backend de cette application en utilisant l'outil mcp de back4app l'outil mcp permet de grands modèles de langage (llms) https //en wikipedia org/wiki/large language model comme claude 4 sonnet et des agents/outils d'ia comme cursor pour interagir de manière transparente avec votre backend back4app avec mcp, votre assistant de code ia peut créer des applications, gérer des bases de données (opérations crud, requêtes), déployer du code cloud, gérer l'authentification des utilisateurs, et plus encore sur vos projets back4app pour ce tutoriel, vous utiliserez cursor , un éditeur de code alimenté par l'ia qui intègre de grands modèles de langage pour vous aider à écrire, refactoriser et comprendre le code dans votre environnement de développement avec cursor et mcp, vous pouvez déclencher des actions backend en utilisant un langage naturel, rendant le processus de développement plus rapide et plus intuitif configuration du projet maintenant que vous avez une meilleure compréhension de ce que vous allez réaliser dans ce tutoriel, allez y et configurez les exigences de votre projet pour construire un backend avec cursor et mcp prérequis pour compléter ce tutoriel, vous aurez besoin des éléments suivants un compte back4app vous pouvez vous inscrire gratuitement https //www back4app com/signup si vous n'en avez pas cursor https //www cursor com/ installé sur votre machine de développement une familiarité de base avec les concepts de développement backend node js v22 ou supérieur étape 1 créer un projet back4app la première étape consiste à vous connecter à votre compte back4app et à créer un nouveau projet nommé “eventmanager ” étape 2 créer une clé de compte vous devez générer une clé de compte back4app pour configurer mcp à l'intérieur de cursor et accorder l'accès du serveur mcp à votre compte back4app allez dans les paramètres de vos clés de compte une fois là, donnez un nom à votre clé de compte et générez en une en cliquant sur le + bouton vous devriez maintenant voir votre clé de compte générée ainsi que sa date d'expiration étape 3 configurer mcp à l'intérieur de cursor regardez cette vidéo pour apprendre à connecter cursor et back4app ouvrez l'application cursor et allez à paramètres > paramètres de cursor > mcp, où vous trouverez une page pour configurer les serveurs mcp dans cursor ai cliquez sur le “ ajouter un nouveau serveur mcp global ” bouton pour créer un mcp json fichier vous écrirez vos configurations pour mcp à l'intérieur de ce fichier pour configurer le serveur mcp back4app dans cursor, collez les configurations suivantes à l'intérieur de mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } remplacez maintenant \<account key> par la clé de compte back4app que vous avez enregistrée à l'étape 3 si vous suivez ce tutoriel sur une machine windows, changez la valeur de la clé command en npx cmd avec ces configurations en place, vous êtes prêt à commencer à construire votre backend back4app avec le mcp back4app et cursor construire le backend avec cursor et back4app votre gestionnaire d'événements aura les fonctionnalités suivantes ; l'utilisateur peut créer un nouvel événement l'utilisateur peut s'inscrire à un événement afficher une liste des événements auxquels un utilisateur est inscrit afficher une liste des événements à venir d'un utilisateur l'utilisateur peut annuler son inscription à un événement pour satisfaire ces fonctionnalités, voici un exemple de schéma de base de données ouvrez le chat en basculant le panneau ai, et procédez à sélectionner le mode agent pour apporter des modifications à votre application de plus, sélectionnez un llm préféré tel que le nouveau modèle claude 4 sonnet dans la boîte de chat, écrivez une invite pour générer le schéma conçu un exemple d'invite pour y parvenir est design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships vous devrez approuver la demande d'utilisation des outils du mcp une fois approuvée, la demande s'exécutera vous devriez recevoir une réponse indiquant que la base de données a été créée avec succès vous pouvez confirmer le succès en vérifiant votre application tableau de bord pour les nouvelles classes créées maintenant que vous avez créé votre backend et ajouté les tables de base de données de votre application, vous allez implémenter la logique de l'application implémentation des fonctionnalités utilisateur avec le mcp dans la description de votre application, cette application doit permettre à différents types d'utilisateurs d'effectuer différentes tâches, telles que créer des événements et s'y inscrire ici, vous définirez les fonctions conçues pour gérer ces fonctionnalités implémentation des contrôles d'accès la fonction utilitaire principale de l'application s'appellera validateuserrole cette fonction est responsable de la validation des fonctionnalités disponibles pour chaque rôle d'utilisateur vous pouvez créer cette fonction avec l'invite suivante \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error allez y et confirmez que utils js a été créé avec validateuserrole créer une fonctionnalité utilisateur pour implémenter la fonctionnalité créer un utilisateur , le nom d'utilisateur , le mot de passe , l' email, et le rôle doivent être passés n'importe qui peut appeler la fonction implémentez la logique de création d'utilisateur en utilisant l'invite ci dessous \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames vous devriez recevoir une réponse indiquant que la fonction a été créée avec succès vous pouvez maintenant créer de nouveaux utilisateurs pour votre gestionnaire d'événements créer une fonctionnalité d'événement un organisateur peut créer un nouvel événement pour ce faire, la fonction créera un nouvel objet événement et validera qu'un utilisateur avec le rôle organisateur appelle la fonction vous utiliserez la fonction utilitaire précédemment créée pour réaliser cette validation implémentez cette logique en utilisant l'invite ci dessous create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed la fonction sera créée à l'intérieur du fichier main js vous pouvez effectuer un simple test à l'intérieur de cursor en utilisant des données fictives et en appelant l'api rest exposée de back4app inscrivez vous à la fonctionnalité d'événement pour qu'un utilisateur s'inscrive à un événement, il doit avoir le rôle d'attendee tous les utilisateurs ayant ce rôle ont accès à 3 fonctionnalités la première est de s'inscrire aux événements créés cette fonction crée un nouvel objet d'inscription et définit la valeur booléenne d'inscription sur true pour l'utilisateur alimentez l'invite suivante ou une similaire pour atteindre cette logique generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message ensuite, vous avez besoin d'une fonction pour interroger tous les événements pour lesquels l'utilisateur est inscrit nous appellerons cette fonction listupcomingevents créez cette fonction avec une invite comme celle ci create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found confirmez que la fonction est créée avec succès dans main js et modifiez le code soit manuellement, soit en utilisant des invites de curseur si nécessaire remarquez dans cette invite, les paramètres de la fonction n'ont pas été spécifiés pour l'agent ai de cursor cela démontre comment l'agent utilise mcp pour déduire les paramètres qu'une fonction nécessite en examinant le schéma de la base de données cependant, il est toujours bon de fournir autant de contexte que nécessaire dans vos invites fonction d'annulation d'inscription la dernière fonctionnalité pour satisfaire les exigences de l'application est la fonction d'annulation d'inscription pour l'implémenter, la fonction récupérera l' eventid et userid de l'événement sélectionné et mettra à jour sa valeur booléenne ajoutez la logique ci dessus à votre application backend en utilisant une invite similaire à celle ci create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure vous pouvez examiner tout le code créé par cursor et mcp et le modifier si nécessaire sur votre tableau de bord de l'application → code cloud , comme indiqué dans l'image ci dessous avec ces fonctionnalités, vous avez maintenant satisfait à toutes les exigences pour le backend de votre application gestionnaire d'événements construisez un frontend pour votre backend avec mcp en utilisant cursor maintenant que votre backend a été construit et déployé avec succès vous allez créer une interface utilisateur frontend pour votre application cette interface utilisera votre backend back4app en utilisant les points de terminaison api rest de back4app pour ce faire, le mcp récupérera les métadonnées de votre schéma backend, et cursor utilisera ces métadonnées pour construire l'interface utilisateur de votre application avec la spécification de prompt suivante build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive cette invite vise à structurer un frontend next js en une seule étape vous pouvez toujours demander d'autres modifications si vous n'êtes pas satisfait de la génération de cursor assurez vous que parse a été correctement initialisé avec l'id d'application et la clé javascript au cas où cursor ne parviendrait pas à gérer cela ces variables vous permettent de faire des requêtes à l'application backend l'image ci dessus montre l'application next js générée avec une seule commande en utilisant cursor et la mcp de back4app déployez votre application enfin, vous déploierez votre application full stack en utilisant la fonctionnalité d'hébergement web de back4apps pour déployer votre application next js, créez un dockerfile dans le répertoire racine de votre projet et collez le code suivant à l'intérieur \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] ce dockerfile fait ce qui suit commence à partir de l'environnement d'exécution node js 14 officiel définit le répertoire de travail sur /app copie package json et package lock json dans l'image docker et installe les dépendances copie le reste du code de l'application dans l'image docker construit l'application next js expose le port 3000 pour l'application définit la commande pour démarrer l'application vous aurez également besoin d'un dockerignore fichier créez en un dans le répertoire racine de votre projet et ajoutez ces commandes \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore maintenant, exécutez la commande suivante dans votre terminal pour construire et tester l'image docker docker build t event manager frontend docker run p 3000 3000 event manager frontend vous trouverez votre image docker construite sur http //localhost 3000 si vous avez vérifié que votre application fonctionne comme prévu, il est temps de pousser votre code vers un dépôt github et de le déployer via back4app ouvrez votre application event manager sur votre tableau de bord back4app et naviguez vers déploiement web une fois là, procédez à accorder à back4app l'autorisation de voir votre dépôt de compte et sélectionnez le dépôt où vous avez poussé l'application frontend que vous souhaitez déployer attribuez un nom à votre projet (par exemple, event manager) et cliquez sur le “déployer” bouton montré dans l'image ci dessus pour déployer votre application si cela réussit, vous verrez un message de déploiement prêt vous pouvez accéder à votre application déployée sur le web en naviguant vers le lien fourni par back4app sur l'écran de déploiement ci dessous félicitations, vous avez déployé avec succès votre application sur back4app vous pouvez visiter le projet event manager construit dans ce tutoriel ici https //eventmanager3 3jqdnkfk b4a run/ conclusion dans cet article, vous avez conçu et déployé une application de gestion d'événements backend qui permet aux utilisateurs de gérer des événements en tant qu'organisateurs ou participants vous avez également construit le frontend de votre application avec next js, en utilisant cursor pour accélérer le développement associer l'environnement de développement amélioré par l'ia de cursor avec le mcp de back4app crée un flux de travail de développement puissant qui réduit considérablement le temps de développement et facilite la construction de votre backend back4app bon codage !