Projets d’étudiants en sciences et en ingénierie
Convient aux utilisateurs ayant des bases en programmation. Grâce aux services API et au développement d’applications full stack, comprenez en profondeur l’application pratique des outils d’IA dans le développement logiciel et maîtrisez les meilleures pratiques du développement de niveau entreprise.
Projet 1 : Développement du service API
Aperçu du projet
Analyse du choix technique : pourquoi choisir cette combinaison d’outils ?
Cursor Agent : conception d'architecture et génération de code
- • Génération de la structure du projet: l’Agent peut comprendre les exigences et générer automatiquement une structure de projet cohérente
- • Conception d’architecture: aide à concevoir l’architecture, notamment les routes API, le middleware, la gestion des erreurs, etc.
- • Génération de code: Générer le code complet des opérations CRUD à partir de la description des besoins
- • Bonnes pratiques: appliquer automatiquement les principes de conception RESTful, les modèles de gestion d’erreurs, etc.
GitHub Copilot : complétion de code en temps réel
- • Complétion de code : Saisissez un nom de fonction ou un commentaire pour compléter automatiquement l’implémentation du code
- • Compréhension du contexte : comprendre le contexte du code actuel et fournir des recommandations pertinentes
- • Itération rapide: Réduire l’écriture de code dupliqué et accélérer le développement
- • Prise en charge multilingue: Prend en charge plusieurs langages de programmation et frameworks
Continue.dev : revue de code et optimisation
- • Revue de code: utiliser des modèles locaux pour examiner la qualité du code et détecter les problèmes potentiels
- • Optimisation des performances: identifier les goulots d’étranglement de performance et proposer des suggestions d’optimisation
- • Audit de sécurité: Vérifier les vulnérabilités de sécurité et fournir des recommandations de correction
- • Déploiement privé: Le code n’est pas téléversé vers le cloud, ce qui protège la vie privée
Synergie des outils : Cursor Agent est responsable de l’architecture globale et de la génération de logique complexe, Copilot est responsable de la complétion de code au quotidien et des itérations rapides, et Continue.dev est responsable de l’assurance qualité du code. Cette combinaison permet un processus de développement complet, de la conception à l’implémentation puis à l’optimisation, garantissant à la fois la vitesse de développement et la qualité du code.
Étapes détaillées
Étape 1 : analyse des besoins et conception de l’API (1 à 2 heures)
1. Clarifier les exigences de l’API : gestion des utilisateurs, CRUD des données, authentification et autorisation
2. Utilisez Cursor Agent pour concevoir la structure de l’API :
- POST /api/users (créer un utilisateur)
- GET /api/users (récupérer la liste des utilisateurs, prend en charge la pagination et le filtrage)
- GET /api/users/:id (récupérer un utilisateur unique)
- PUT /api/users/:id (mettre à jour l’utilisateur)
- DELETE /api/users/:id (supprimer l’utilisateur)
- POST /api/auth/login (connexion utilisateur)
- POST /api/auth/register (inscription de l’utilisateur)
Utiliser JWT pour l’authentification et mettre en œuvre le contrôle des permissions RBAC"
3. Cursor génère la documentation de conception de l'API et la structure de routage
4. Définir les modèles de données (User, Role, etc.)
Étape 2 : utiliser Cursor Agent pour générer la structure du projet (1 heure)
1. Créez un nouveau projet dans Cursor et choisissez une pile technologique (par exemple Node.js + Express)
2. Utilisez le mode Agent pour indiquer vos besoins à Cursor :
- Structure du projet (routes, controllers, models, middleware)
- Configuration de la base de données (utilisation de Prisma ORM)
- Configuration des variables d’environnement
- Middleware de gestion des erreurs
- Middleware de journalisation
- Middleware d’authentification (JWT)"
3. Cursor génère la structure complète du projet et le code de base
4. Vérifier la structure générée et l’ajuster si nécessaire
Étape 3 : utiliser Copilot pour accélérer le développement (3 à 4 heures)
1. Utiliser Copilot pour compléter le code des opérations CRUD :
- • Saisissez la signature de la fonction, et Copilot complète automatiquement l’implémentation
- • Décrire les besoins dans les commentaires d’entrée, et Copilot génère le code
- • Utiliser Copilot pour générer la logique de validation des données
- • Utiliser Copilot pour générer du code de gestion des erreurs
2. Mettre en œuvre les fonctions d’authentification et d’autorisation :
- • Génération et vérification des jetons JWT
- • Chiffrement des mots de passe (bcrypt)
- • Middleware de vérification des autorisations
3. Ajouter la validation des données (avec Joi ou Zod)
4. Implémenter les fonctionnalités de pagination et de filtrage
Étape 4 : utiliser Continue.dev pour la revue de code (1 heure)
1. Configurer Continue.dev et se connecter au modèle local (Ollama)
2. Utiliser Continue.dev pour relire le code :
- • Vérifier la qualité du code et les meilleures pratiques
- • Identifier les problèmes de performance potentiels
- • Vérifier les vulnérabilités de sécurité
- • Fournir des recommandations d’optimisation
3. Optimiser le code en fonction des résultats de la revue
4. S’assurer que le code est conforme aux normes de l’équipe
Étape 5 : Test et déploiement (2 heures)
1. Rédigez des tests unitaires (avec Jest)
2. Rédiger des tests d’intégration (tester les points de terminaison de l’API)
3. Utilisez Postman ou Thunder Client pour tester l’API
4. Déployer sur une plateforme cloud (comme Railway, Render, Vercel)
5. Configurer les workflows CI/CD (GitHub Actions)
Exemples de code clés
Contrôleur utilisateur (généré par Cursor Agent)
// controllers/userController.js
const User = require('../models/User')
const { validationResult } = require('express-validator')
exports.createUser = async (req, res) => {
try {
const errors = validationResult(req)
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() })
}
const { name, email, password, role } = req.body
// Vérifier si l'e-mail existe déjà
const existingUser = await User.findOne({ email })
if (existingUser) {
return res.status(400).json({ error: 'Email already exists' })
}
// Créer l'utilisateur
const user = await User.create({
name,
email,
password: await bcrypt.hash(password, 10),
role: role || 'user'
})
res.status(201).json({
id: user.id,
name: user.name,
email: user.email,
role: user.role
})
} catch (error) {
res.status(500).json({ error: error.message })
}
}Middleware d'authentification (complétion Copilot)
// middleware/auth.js
const jwt = require('jsonwebtoken')
const authenticate = (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1]
if (!token) {
return res.status(401).json({ error: 'No token provided' })
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET)
req.user = decoded
next()
} catch (error) {
res.status(401).json({ error: 'Invalid token' })
}
}
const authorize = (...roles) => {
return (req, res, next) => {
if (!req.user) {
return res.status(401).json({ error: 'Unauthorized' })
}
if (!roles.includes(req.user.role)) {
return res.status(403).json({ error: 'Forbidden' })
}
next()
}
}
module.exports = { authenticate, authorize }Problèmes courants et solutions
Problème 1 : La conception de l’API n’est pas conforme aux principes RESTful
Solution : utilisez Cursor Agent pour repenser la structure de l’API, en vous référant aux meilleures pratiques RESTful. Assurez-vous d’utiliser les bonnes méthodes HTTP (GET, POST, PUT, DELETE) et les bons codes d’état.
Problème 2 : la gestion des erreurs n’est pas unifiée
Solution : créez un middleware de gestion des erreurs unifié, utilisez Continue.dev pour examiner le code de gestion des erreurs et assurez-vous que toutes les erreurs sont renvoyées dans un format standard.
Problème 3 : problème de performance (requêtes de base de données lentes)
Solution : utiliser Continue.dev pour analyser les goulets d'étranglement des performances, ajouter des index de base de données, utiliser l'optimisation des requêtes et mettre en place des mécanismes de cache.
Problème 4 : problèmes de sécurité (injection SQL, XSS)
Solution : utilisez des requêtes paramétrées, la validation et la sanitisation des entrées, et utilisez Continue.dev pour l’audit de sécurité.
Liste de contrôle du projet
Projet 2 : développement d’une application full-stack
Aperçu du projet
Analyse des choix techniques : pourquoi choisir bolt.new + Cursor + Fabric ?
bolt.new : développement full-stack dans le navigateur
- • Technologie WebContainers: Exécutez Node.js dans le navigateur, sans environnement local requis
- • Aperçu instantané: les modifications du code prennent effet immédiatement, voyez le résultat en temps réel
- • Prototypage rapide: Construire une application frontend complète en quelques minutes
- • Facile à collaborer：Collaborez au développement simplement en partageant un lien
- • Déploiement en un clic: déployer directement sur des plateformes comme Vercel
Cursor : développement d’API backend
- • Développement d'API: utiliser le mode Agent pour générer rapidement des API backend
- • Intégration de base de données：Intégrer des frameworks ORM tels que Prisma et TypeORM
- • Système d’authentification: Mettre en œuvre des mécanismes d’authentification tels que JWT et OAuth
- • Logique métier: Gérer une logique métier complexe et la validation des données
Fabric : optimisation de la qualité du code
- • Revue de code：Utiliser Patterns pour vérifier la qualité du code
- • Optimisation des performances: identifier et optimiser les goulets d’étranglement des performances
- • Bonnes pratiques：Appliquer les meilleures pratiques du secteur et les modèles de conception
- • Refactorisation du code : Refactoriser le code pour améliorer la maintenabilité
Synergie des outils: bolt.new est chargé de créer rapidement l’interface utilisateur front-end et les interactions de base, Cursor est chargé de développer les API back-end et la logique métier, et Fabric est chargé d’optimiser la qualité et les performances du code. Cette combinaison permet un développement front-end et back-end découplé, garantissant à la fois la vitesse de développement et la qualité du code, ce qui convient aux projets full-stack de taille moyenne à grande.
Étapes détaillées
Étape 1 : utiliser bolt.new pour créer rapidement le front-end (3 à 4 heures)
1. Visitez bolt.new et créez un nouveau projet
2. Utilisez l’assistant IA pour décrire les besoins frontend :
- Page de connexion/inscription
- Page de liste des tâches (affiche toutes les tâches)
- Page de détails de la tâche
- Formulaire de création/modification de tâche
- Page des paramètres utilisateur
Utiliser Next.js + TypeScript + Tailwind CSS, prendre en charge le thème sombre"
3. bolt.new génère un code frontend complet
4. Ajuster le style et les interactions de l’UI, et ajouter des effets d’animation
5. Mettre en œuvre la gestion d’état (en utilisant Zustand ou Context API)
Étape 2 : Développer l’API backend avec Cursor (4 à 5 heures)
1. Créer un projet back-end dans Cursor (Node.js + Express)
2. Utilisez le mode Agent pour générer la structure de l'API :
- API d’authentification utilisateur (inscription, connexion, rafraîchissement du jeton)
- API CRUD des tâches
- API de filtrage et de recherche des tâches
- API des paramètres utilisateur
Utilisation de Prisma ORM, de la base de données PostgreSQL, de l’authentification JWT"
3. Implémenter les modèles de base de données et les relations
4. Implémenter les points de terminaison de l’API et la logique métier
5. Ajouter la validation des données et la gestion des erreurs
Étape 3 : intégration front-end et back-end (2 à 3 heures)
1. Configurer le client API (en utilisant axios ou fetch)
2. Implémenter la fonction d'appel d'API :
- • API liées à l'authentification des utilisateurs
- • API CRUD des tâches
- • Gestion des erreurs et logique de nouvelle tentative
- • Mécanisme d'actualisation des jetons
3. Connecter le front-end et le back-end, tester les appels API
4. Gérer les états de chargement et les états d’erreur
5. Mettre en œuvre des mises à jour optimistes et un retour en arrière en cas d'erreur
Étape 4 : utiliser Fabric pour optimiser la qualité du code (2 à 3 heures)
1. Examiner le code à l’aide des Patterns de Fabric :
- • Code qualityPattern
- • Modèle d’optimisation des performances
- • Modèle d’audit de sécurité
- • Modèles de meilleures pratiques
2. Optimiser le code selon les suggestions de Fabric
3. Refactoriser le code dupliqué et extraire les composants communs
4. Optimiser les requêtes de base de données et ajouter des index
5. Mettre en place un mécanisme de cache (Redis)
Étape 5 : tests d’intégration et déploiement (1 à 2 heures)
1. Rédiger des tests de bout en bout (avec Playwright ou Cypress)
2. Tester les fonctionnalités d’intégration front-end et back-end
3. Déployer le frontend sur Vercel
4. Déployer le backend sur Railway ou Render
5. Configurer les variables d’environnement et la connexion à la base de données
6. Tester les fonctionnalités de l’environnement de production
Problèmes courants et solutions
Problème 1 : échec de la communication entre le front-end et le back-end (erreur CORS)
Solution : configurez le middleware CORS dans le backend pour autoriser l’accès depuis le domaine du frontend. Vérifiez que la configuration de l’URL de l’API est correcte.
Problème 2 : problème de synchronisation d’état (l’état du frontend est incohérent avec celui du backend)
Solution : implémentez des mises à jour optimistes et des annulations en cas d’erreur, en utilisant React Query ou SWR pour gérer l’état du serveur.
Problème 3 : la configuration du déploiement est complexe
Solution : utiliser des variables d’environnement pour gérer la configuration, utiliser Docker pour conteneuriser le déploiement et utiliser CI/CD pour automatiser le processus de déploiement.
Liste de contrôle du projet
Résultats d’apprentissage
À la fin de ce chapitre, vous pourrez :
- 1Maîtriser les meilleures pratiques de développement d'API et être capable de concevoir des API conformes aux conventions RESTful
- 2Comprendre le processus complet du développement full-stack et être capable de mener de manière autonome un projet avec front-end et back-end séparés
- 3Capable d’utiliser plusieurs outils de manière coordonnée, en tirant parti de la synergie des combinaisons d’outils
- 4Maîtriser les méthodes d’assurance qualité du code et être capable d’utiliser des outils pour la revue et l’optimisation du code
- 5Avoir la capacité de résoudre des problèmes concrets et de traiter des questions complexes telles que l’intégration front-end/back-end et le déploiement