Comment construire un backend avec Windsurf ?

l'ide windsurf vous permet d'intégrer des outils externes qui ont un serveur mcp actif via le protocole mcp cela vous permet d'exécuter des tâches et de lire des données de ces sources sans quitter votre ide en utilisant des invites dans ce tutoriel, vous apprendrez à construire le backend et l'interface utilisateur (ui) pour un planificateur de rendez vous en utilisant le serveur mcp de back4app via l'ide windsurf et à le déployer sur des 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 apprenez à construire un backend sur back4app en utilisant windsurf et le serveur mcp de back4app explorez comment les relations sont modélisées entre les classes sur back4app explorez comment l'authentification et l'autorisation basée sur les rôles sont mises en œuvre par back4app en utilisant leurs classes intégrées déployez votre application en quelques clics en utilisant des conteneurs back4app prérequis pour suivre ce tutoriel, vous devez avoir ce qui suit un compte back4app vous pouvez vous inscrire gratuitement si vous n'en avez pas windsurf ide installé sur votre système connaissance de base des concepts de développement backend aperçu du projet planificateur de rendez vous dans ce tutoriel, vous allez créer un planificateur de rendez vous qui prend en charge deux rôles les fournisseurs qui enregistrent les services qu'ils offrent et les clients qui réservent ces services les fournisseurs définissent chaque service avec un nom, une durée et un prix les clients parcourent ensuite les services disponibles, choisissent une date et une heure, et confirment une réservation une fois réservé, le rendez vous apparaît dans les tableaux de bord du fournisseur et du client, avec un statut que vous pouvez mettre à jour ou annuler si nécessaire ce projet aura 4 classes utilisateur , rôle , rendez vous , et service les classes utilisateur et rôle font partie des classes intégrées de back4app et seront utilisées pour l'authentification et les contrôles d'accès la classe service définira les détails de chaque offre, son nom, sa durée et son prix, afin que les fournisseurs puissent lister ce qu'ils offrent et que les clients puissent parcourir les offres la classe rendez vous reliera un client et un fournisseur à un service choisi aux champs starttime et endtime spécifiques, suivra son statut (“en attente”, “confirmé”, “annulé”), et utilisera des acl au niveau des objets afin que seul le client ayant réservé et son fournisseur puissent lire ou modifier chaque rendez vous 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 windsurf et commencer à écrire des invites qui créeront l'application décrite dans cette section connexion entre back4app et windsurf regardez la vidéo ci dessous pour un tutoriel sur la façon de connecter windsurf à back4app pour connecter le serveur back4app mcp à windsurf, 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 dans la barre de navigation et sélectionnez clés de compte sur la page clés de compte , donnez un nom à votre clé de compte, copiez la clé générée et conservez la en sécurité ensuite, ouvrez windsurf et cliquez sur l'icône du marteau dans l'assistant cascade cela ouvre un menu déroulant avec un bouton de configuration, cliquez dessus le bouton de configuration vous amène à la page gérer les plugins cliquez sur le bouton « voir la configuration brute » et collez l'objet de configuration ci dessous dans le fichier { "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 rafraîchissez windsurf si vous suivez ce tutoriel sur une machine windows, changez la valeur de la clé de commande en npx cmd créer le backend avec windsurf pour créer le backend du planificateur de rendez vous avec windsurf, vous devez d'abord fournir à l'assistant cascade une invite qui lui indique de créer une nouvelle application avec le nom que vous avez spécifié, ainsi que les tables de base de données requises vous pouvez y parvenir pour le planificateur de rendez vous en utilisant l'invite ci dessous create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict cette invite indique à windsurf de créer un backend « planificateur de rendez vous » en créant deux nouveaux modèles de données service et appointment, avec les relations et champs appropriés il implémente également un hook beforesave côté serveur sur appointment qui empêche toute réservation qui se chevauche pour le même provider windsurf enregistre toutes les demandes qu'il fait alors qu'il essaie d'accomplir la tâche, et dès qu'il termine l'exécution, il fournira un résumé de la tâche maintenant que les classes d'application et de base de données ont été créées, vous pouvez ensuite mettre en œuvre l'authentification pour votre backend mise en œuvre de l'authentification et de l'autorisation sur le backend pour cette application, vous devez vous assurer que les utilisateurs peuvent se connecter en toute sécurité et ne faire que les choses qu'ils devraient pouvoir faire par exemple, seuls les utilisateurs qui s'inscrivent en tant que fournisseurs devraient pouvoir lister un service, et seul un fournisseur qui liste un service devrait pouvoir mettre à jour le service vous pouvez réaliser cela pour le planificateur de rendez vous en utilisant l'invite ci dessous update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation cette invite ci dessus demande à windsurf d'activer l'inscription et la connexion par email/mot de passe, de définir et d'assigner les rôles "fournisseur" et "client", d'appliquer des autorisations au niveau de la classe afin que seuls les fournisseurs gèrent les services tandis que les utilisateurs authentifiés gèrent les rendez vous, et d'appliquer des acl d'objet ainsi qu'un hook beforesave sur le rendez vous pour accorder l'accès uniquement au client de réservation et au fournisseur et vérifier leurs rôles maintenant que vous avez mis en place l'authentification et l'autorisation basée sur les rôles, vous pouvez mettre en œuvre les points de terminaison crud nécessaires au bon fonctionnement de l'application implémentation de la fonctionnalité crud pour les services et les rendez vous votre application doit permettre aux utilisateurs authentifiés de créer des services (fournisseurs) et de réserver des rendez vous sur des services déjà créés (clients) les utilisateurs doivent également pouvoir modifier, supprimer et consulter les services et les rendez vous vous pouvez réaliser cela pour le planificateur de rendez vous en utilisant l'invite ci dessous add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response cette invite demande à windsurf de générer des points de terminaison cloud code pour les classes service et rendez vous, en implémentant des opérations de création, de lecture, de mise à jour et de suppression tout en appliquant des vérifications d'authentification et basées sur les rôles afin que seuls les fournisseurs puissent gérer les services et que seul le client réservant ou le fournisseur assigné puisse gérer ses rendez vous génération de votre frontend vous pouvez tirer parti du contexte que windsurf a de la création de votre backend sur back4app pour lui demander de créer un frontend qui correspond au schéma et aux exigences de votre application vous pouvez réaliser cela pour le planificateur de rendez vous en utilisant l'invite ci dessous generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react en utilisant l'invite ci dessus ou similaire, windsurf générera un frontend qui correspond au schéma de votre backend et le connectera à votre backend les fichiers du projet sont stockés sous /\<user>/cascadeprojects/\<app name> cd dans l'application et exécutez la en utilisant les instructions fournies dans le readme, et apportez les ajustements que vous souhaitez maintenant, votre projet est complet dans la section suivante, vous le déploierez sur les conteneurs back4app déployer 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 appointment scheduler ou vous pouvez utiliser le dockerfile fourni ci dessous from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] après avoir ajouté le dockerfile et l'avoir poussé sur github, accédez au tableau de bord de vos 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 déployer bouton 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 un planificateur de rendez vous en utilisant le serveur back4app mcp et windsurf, puis vous l'avez déployé avec back4app containers cela met en avant l'ensemble complet d'outils de back4app qui vous permet de passer de l'idéation au lancement avec un minimum de frais généraux comme prochaine étape, vous pouvez étendre le projet avec des fonctionnalités telles que la synchronisation de calendrier, des rappels par e mail automatisés ou des analyses sur les tendances de réservation toutes ces améliorations s'intègrent naturellement dans le même flux de travail back4app concevoir et définir de nouvelles classes ou fonctions cloud avec windsurf les sécuriser avec des hooks beforesave et déployer des mises à jour via back4app containers cette approche vous permet d'ajouter de nouvelles fonctionnalités à votre application sans perturber les utilisateurs