Comment construire un backend avec VS Code ?

vs code vous permet d'intégrer des outils externes qui ont un serveur mcp actif grâce au 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 une plateforme de blog en utilisant le serveur mcp back4app via vs code et à le déployer sur des conteneurs back4app principaux enseignements apprenez à construire un backend sur back4app en utilisant vs code et un serveur mcp 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 vous pouvez voir le blog en direct construit dans ce tutoriel en utilisant ce lien prérequis 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 vs code installé sur votre système connaissance de base des concepts de développement backend aperçu du projet un blog dans ce tutoriel, vous allez créer un blog simple qui vous permet de créer, modifier, consulter et supprimer des articles de blog il prend également en charge les commentaires et suit le nombre de personnes qui ont consulté vos articles de blog en plus de la user table fournie par défaut sur back4app pour l'authentification, votre blog aura trois autres tables articles, commentaires et vues lorsqu'un utilisateur de votre blog crée un compte, back4app crée un nouvel enregistrement dans la user table et émet un jeton de session sécurisé que vous pouvez réutiliser lors des demandes suivantes seuls les utilisateurs authentifiés peuvent alors publier des articles lorsqu'un article de blog est publié, les utilisateurs authentifiés et non authentifiés peuvent lire les articles ; cependant, seuls les utilisateurs authentifiés peuvent commenter chaque fois qu'un article de blog est récupéré depuis la base de données back4app, le compteur de vues est incrémenté ; pour éviter tout abus possible de cette fonctionnalité pour gonfler les vues, vous mettrez en place des garde fous autour de cela maintenant que vous avez une idée générale de ce que vous allez construire, dans la section suivante, vous allez connecter vscode au serveur mcp de back4app connexion de vscode au serveur mcp de back4app accédez au site web de back4app et cliquez sur le nouvelle application bouton en haut à gauche de la page sur l'écran “construire un backend”, nommez votre application et cliquez sur le créer bouton sur la page de présentation de votre application, cliquez sur le configuration mcp bouton sur la fenêtre modale “sélectionnez votre ide”, cliquez sur vs code et suivez les instructions affichées à l'écran pour connecter automatiquement vscode au serveur mcp de back4app si vous avez suivi l'option d'installation automatique, vous devez redémarrer vs code sur votre machine avant de continuer alternativement, vous pouvez connecter le serveur mcp de back4app manuellement (ce qui vous donne plus de contrôle sur la configuration) en passant la fenêtre modale à la section manuelle après avoir suivi les étapes décrites dans la fenêtre modale pour connecter le serveur mcp de back4app à vscode, vous pouvez confirmer la connexion en cliquant sur la barre de recherche dans votre fenêtre vscode et en recherchant “>mcp lister les serveurs”, exécutez la commande, et vous devriez voir une liste des serveurs mcp disponibles et leur état actuel (en cours/arrêté) maintenant que vous avez connecté le serveur back4app mcp à vscode, dans la section suivante, vous écrirez les invites qui construiront votre application entière construire le backend de votre blog pour créer votre backend en utilisant vscode et github copilot, vous devez d'abord activer le mode agent sur github copilot pour activer le mode agent, ouvrez le chat github copilot en appuyant sur “ control + command + i” sur macos, pour windows, appuyez sur “ctrl + i” sur la page de chat, cliquez sur le menu déroulant avec l'étiquette “demander” et sélectionnez le mode “agent” ensuite, fournissez à github copilot l'invite ci dessous ou une invite similaire pour créer les classes requises pour votre application l'invite ci dessus crée un nouveau backend back4app appelé “blogger” et le remplit avec une classe post, une classe comment et une classe view ainsi que leurs propriétés requises lorsque vous exécutez cette invite avec copilot, il enregistrera les étapes qu'il suit dans votre fenêtre de chat et vous demandera la permission à chacune des étapes qui modifient vos données pour de meilleurs résultats, exécutez ces invites avec un modèle premium comme 03 mini ou claude sonnet 4 après que copilot ait créé les classes requises, vous avez maintenant un moyen structuré de stocker les données de votre blog dans la section suivante, vous allez mettre en œuvre l'authentification pour votre application mise en œuvre de l'authentification les exigences d'authentification pour votre application sont simples, vous devez que les utilisateurs s'inscrivent et se connectent afin de créer des articles de blog et de commenter des articles de blog cependant, ils peuvent lire des articles de blog sur votre application sans être authentifiés vous pouvez mettre en œuvre les exigences d'authentification pour votre application en utilisant l'invite ci dessous l'invite ci dessus ajoute l'authentification des utilisateurs à votre application la logique d'authentification permet à vos utilisateurs de créer un compte en utilisant un email, un nom d'utilisateur et un mot de passe après s'être inscrit, l'utilisateur est automatiquement connecté, et lorsqu'un utilisateur se déconnecte, sa session actuelle est invalidée après que copilot ait mis en œuvre votre logique d'authentification, vos utilisateurs disposeront d'un moyen sécurisé de s'inscrire et de se connecter dans la section suivante, vous allez mettre en œuvre la logique requise pour créer des articles et des commentaires création d'articles et de commentaires pour mettre en œuvre la fonctionnalité de création d'articles et de commentaires, vous devez créer deux fonctions cloud et les hooks de support qui permettent aux utilisateurs authentifiés de publier des articles et d'ajouter des commentaires dans un flux rationalisé commencez par créer les hooks de support en fournissant à copilot l'invite ci dessous ou similaire l'invite ci dessus implémente des vérifications/actions effectuées avant qu'un post ou un commentaire ne soit créé pour les posts, un slug unique est généré à partir de son titre, puis le statut change en publié, et la date actuelle est définie comme date de publication pour les commentaires, le post auquel il est lié met simplement à jour son nombre de commentaires maintenant, créez les fonctions cloud associées aux hooks beforesave ci dessus en utilisant l'invite ci dessous ou similaire l'invite ci dessus expose deux fonctions de code cloud qui permettent à vos utilisateurs de créer des posts et des commentaires elle protège également votre application contre les abus en limitant à 5 créations de posts et 15 commentaires par minute la logique principale associée à la création des posts et des commentaires a déjà été mise en œuvre dans les hooks beforesave créés dans l'invite précédente ; celle ci expose simplement une api pour que le frontend puisse l'utiliser après que copilot ait mis en œuvre la logique ci dessus, vos utilisateurs auront un moyen de créer et de commenter des posts dans la section suivante, vous mettrez en œuvre la logique requise pour mettre à jour ces commentaires et posts, ainsi que la logique requise pour compter les vues sur chaque article de blog mise à jour des posts, commentaires et vues pour mettre en œuvre la fonctionnalité qui permet aux utilisateurs de modifier leurs posts, de réviser leurs propres commentaires, et d'enregistrer les vues de page, vous avez besoin de deux fonctions cloud updatepost, updatecomment, et un aftertrigger vous pouvez mettre en œuvre la fonction cloud updatepost en utilisant l'invite ci dessous ou similaire l'invite ci dessus crée une fonction qui met à jour un post elle garantit que la mise à jour ne peut être effectuée que par l'utilisateur qui a créé le post et régénère le slug si le titre est modifié vous pouvez implémenter la fonction cloud updatecomment en utilisant l'invite ci dessous ou similaire l'invite ci dessus crée une fonction qui met à jour le commentaire d'un post la mise à jour ne peut être effectuée que par le créateur du commentaire vous pouvez implémenter la fonction cloud recordview en utilisant l'invite ci dessous ou similaire l'invite ci dessus crée un déclencheur afterfind sur la classe post chaque fois que le backend retourne un seul post (récupéré par son objectid), le déclencheur crée automatiquement un nouvel enregistrement de vue qui pointe vers ce post (et l'utilisateur actuel, s'il est connecté) et incrémente le viewcount du post si la requête retourne plusieurs posts, le déclencheur ne fait rien avec cela, la plupart des fonctionnalités de votre blog sont complètes ensuite, vous allez implémenter la fonctionnalité qui permet à vos utilisateurs de supprimer leurs posts suppression de posts pour supprimer un post, un utilisateur doit être celui qui l'a créé une fois qu'un post est supprimé, tout son contenu associé (vues, commentaires) est supprimé avec lui vous pouvez implémenter la fonctionnalité pour supprimer des posts en utilisant l'invite ci dessous ou similaire l'invite ci dessus implémente la logique requise pour supprimer des posts avec ces ajouts, votre backend couvre désormais l'ensemble du cycle de vie du contenu, permettant aux auteurs de publier, réviser et supprimer, permettant aux lecteurs de discuter, et maintenant des statistiques de vues précises pour chaque post dans la section suivante, vous allez générer une interface utilisateur pour votre application génération de votre frontend vous pouvez tirer parti du contexte que copilot a en créant 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 en utilisant l'invite ci dessus ou similaire, copilot générera un frontend qui correspond au schéma de votre backend et le connectera à votre backend exécutez l'application en utilisant les instructions fournies par copilot et apportez les ajustements que vous souhaitez maintenant que 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 ou vous pourriez utiliser le dockerfile fourni ci dessous 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 déployer bouton cliquer sur le bouton lance le processus de déploiement, et une fois terminé, vous obtiendrez une url en direct vers l'application vous pouvez voir le blog en direct construit dans ce tutoriel en utilisant ce lien conclusion dans cet article, vous avez construit une plateforme de blogging complète en utilisant le serveur back4app mcp et github copilot, puis l'avez déployée avec les conteneurs back4app cela met en avant l'ensemble des outils de back4app qui vous permettent 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 l'intégration des réseaux sociaux, des notifications par e mail automatisées pour les nouveaux commentaires, une fonctionnalité de recherche avancée, ou des analyses sur l'engagement des publications et le comportement des lecteurs 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 github copilot, les sécuriser avec des hooks beforesave, et déployer des mises à jour via les conteneurs back4app cette approche vous permet d'ajouter de nouvelles fonctionnalités à votre blog sans perturber les utilisateurs