Introduction : Pourquoi apprendre React et Next.js avec Cursor.ai ?
Dans le monde du développement web, React et Next.js sont devenus des outils incontournables pour créer des applications modernes et performantes. Mais apprendre ces technologies peut être intimidant, surtout pour les développeurs débutants. C’est là que Cursor.ai, un agent d’intelligence artificielle conçu pour assister les développeurs, entre en jeu.
L'idée centrale de mon projet était de développer un site web répertoriant des "Monstrucs", des objets du quotidien avec une vie propre et une fonction détournée de leur usage premier. C’est une parodie de Pokémon, mais en remplaçant les créatures fantastiques par des objets animés et un peu absurdes.
Étant donné la nature parodique du projet, je souhaitais également intégrer une ambiance rétro, inspirée des jeux vidéo, en particulier pour les menus et la navigation.
Le site est très simple :
Une page d’accueil, dans un style rétro et rappelant fortement les menus “start” des jeux vidéo. avec une option permettant d’accéder à la collection des “Monstrucs”.
Une page “Collection”, permettant de lister les différentes créatures sous forme de “grille de cartes”, dont la face avant montre l’image et la description de la créature, et la face arrière indique ses détails plus précis (rareté et fiche de statistiques par exemple).
Objectifs en tant que développeur :
En tant que développeur principalement habitué à Angular, je souhaitais profiter de ce projet pour atteindre plusieurs objectifs d'apprentissage :
- Me familiariser avec la librairie React et le framework Next.js.
- Approfondir ma compréhension des concepts fondamentaux de React, tels que la description de l'interface utilisateur, la gestion du flux de données entre les composants et la gestion de l'interactivité.
- Améliorer mes compétences en structuration de code pour faciliter la lisibilité et la maintenance.
- Apprendre à gérer la navigation entre les pages dans Next.js.
- Et, bien sûr, explorer les capacités de l'outil Cursor.ai et de son agent basé sur Claude-3.7-sonnet.
Mes attentes vis-à-vis de Cursor.ai étaient assez précises :
- Obtenir un code source bien organisé et structuré.
- Pouvoir maintenir une codebase simple à comprendre et à déboguer.
- Observer le processus de génération de code par l'agent IA et analyser les risques potentiels associés à cet outil.
Premiers pas avec Cursor.ai : Mise en place du projet
Installation et configuration
Le projet a démarré de zéro, avec une demande simple : générer un template de projet basique en utilisant Next.js. L’agent IA a immédiatement détecté que Node.js n’était pas installé sur la machine, une étape essentielle pour commencer. Une fois cette lacune corrigée, Cursor.ai a pu poursuivre la configuration du projet.
Bien que l’agent ait proposé de nombreuses interactions pour des commandes simples, comme celles que l’on peut exécuter directement dans un terminal, la base du projet était enfin en place. Cette étape a mis en lumière un premier constat : l’IA peut être utile pour les débutants, mais certaines tâches restent plus rapides à effectuer manuellement.
Par la suite, j'ai voulu explorer les capacités de génération de code de Cursor.ai en lui fournissant une image de référence pour la page d'accueil. J'ai demandé à l'IA de créer une page dans le même style que l'image. Cette fois-ci, le résultat a été beaucoup plus convaincant. L'IA a intégré des effets visuels que je ne connaissais pas, démontrant ainsi sa capacité à proposer des solutions créatives et à enrichir le code avec des éléments inattendus.
Création de la page d’accueil : Génération de code et personnalisation
Un début générique
La première tâche confiée à Cursor.ai était de créer une page d’accueil avec un background, un titre affiché en grand, et un bouton permettant d’accéder à une collection. L’agent a fourni un code fonctionnel mais très générique, regroupé dans un seul fichier. Cela ne me convenait pas, je souhaitais un bouton réutilisable sous forme de composant. Cependant, cette exigence n’avait pas été explicitement mentionnée.
Amélioration grâce à une image
Par la suite, j'ai voulu explorer les capacités de génération de code de Cursor.ai en lui fournissant cette image comme référence pour la page d'accueil.
J'ai demandé à l'IA de créer une page dans le même style que l'image. Cette fois-ci, le résultat de l’agent IA a été beaucoup plus convaincant, avec des effets visuels auxquels je n'aurais pas pensé initialement. Cette interaction démontre la créativité de l’IA dans ses suggestions, ainsi que sa capacité à enrichir le code avec des éléments inattendus. C’est aussi particulièrement intéressant de voir sa capacité multimodale, avec une image et une description notamment.
La page de liste : Structuration des données et composants
Génération des données
Pour développer la page affichant la liste des Monstrucs, j'ai adopté une approche différente. Au lieu de commencer directement par la création des composants d'affichage, j'ai choisi de générer d'abord les données qui seraient utilisées pour alimenter ces composants.
J'ai demandé à Cursor.ai de créer une base de données fictive contenant 20 "Monstrucs". Pour chaque Monstruc, j'ai spécifié les informations suivantes :
- Un nom original
- Un lien vers une image du Monstruc
- Une description fantastique et parodique.
- Une liste de caractéristiques chiffrées (PV, attaque, défense, vitesse)
- Deux types, choisis parmi une liste que j'avais définie. Afin d'éviter les types classiques (feu, eau, glace, etc.), j'ai inclus des types plus originaux et humoristiques tels que "plastique", "irrégulier" et "horrifique".
- Un indice de rareté
Afin de fournir à l'IA un exemple concret et de garantir une certaine cohérence dans les données générées, je lui ai fourni un exemple de Monstruc que j'avais créé manuellement. Cet exemple comprenait une description fantastique et parodique de l'objet, ainsi qu'un nom amusant. Ci-dessous l’exemple utilisé :
{
id: uuidv4(), // Correspond à un identifiant généré aléatoirement
name: 'Barbulle',
types: ['feu', 'plastique'],
description: 'Un barbecue qui a la particularité de pulvériser des bulles enflammées sur quiconque ne pose pas de viande de qualité sur son grill.',
image: '/images/monstrucs/Barbulle.jpg',
stats: {
hp: 85,
attack: 70,
defense: 45,
speed: 30
},
rarity: 'rare'
},
L'IA a généré la base de données de manière globalement satisfaisante. Cependant, j'ai été surpris par un élément inattendu : l'IA a décidé de générer une fonction qui randomise les caractéristiques des Monstrucs à chaque fois que la page était rafraîchie !
Cette initiative, bien qu'intéressante, ne correspondait pas à mes objectifs. Par souci de simplicité et pour simuler plus fidèlement une base de données, je souhaitais que les données soient statiques et ne changent pas à chaque chargement de la page. J'ai donc demandé à l'IA de modifier le code pour que les caractéristiques des Monstrucs restent fixes.
Un premier composant, une étiquette de type :
Après avoir généré les données, j'ai commencé à créer les composants React qui permettraient de les afficher.
J'ai débuté par un composant simple, que j'ai appelé typeBadge. Ce composant avait pour but d'afficher le ou les types d'un Monstruc sous forme de badge coloré. Il serait utilisé à la fois sur les cartes de description des Monstrucs et potentiellement dans un système de filtrage.
La création de ce composant n'a pas posé de problème particulier à Cursor.ai. L'IA a généré un composant simple et efficace, avec des propriétés pertinentes pour afficher les types. Elle s'est appuyée sur la liste des types que je lui avais fournie pour créer le composant correspondant.
Création de la carte d’identité des Monstrucs
Un concept original
Avant de générer le code, j'ai demandé à Cursor.ai de me proposer une approche pour afficher ces informations. L'IA a suggéré une approche classique, consistant à afficher une version succincte des informations sur la carte et à afficher les détails complets au clic.
Cependant, j'avais une idée plus originale en tête. Je souhaitais que les cartes puissent se "retourner" pour afficher différentes informations :
- Sur la face avant : le nom, la photo, le type et la rareté.
- Sur la face arrière : le nom, la description et les caractéristiques de combat.
Bien que Cursor.ai ait compris le concept, un bug subtil empêchait la carte de se retourner correctement. La face avant apparaissait inversée au lieu de révéler la face arrière
Après quelques recherches, j'ai découvert que le problème était dû à une propriété CSS (backface-visibility) qui était initialement définie sur hidden. Cette propriété empêchait l'affichage de la face arrière de la carte.
Plutôt que de corriger le bug directement dans le code, j'ai choisi de donner une nouvelle chance à l'IA. Je lui ai demandé de se concentrer spécifiquement sur la propriété backface-visibility et de mettre en place la logique nécessaire pour qu'elle soit modifiée dynamiquement lors du clic sur la carte.
Cette fois-ci, l'IA a réussi à résoudre le problème sans difficulté.
Restructuration du code : Vers une architecture plus propre
Problèmes identifiés
À ce stade, j’ai observé plusieurs problèmes dans la codebase :
- Le composant typeBadge que j'avais créé précédemment n'avait pas été utilisé pour afficher les types sur les cartes de Monstrucs. L'IA avait généré du code redondant directement dans le fichier de la carte.
- Le composant "carte" était devenu trop volumineux et complexe. Par exemple, la liste des caractéristiques du Monstruc était implémentée avec du code dupliqué, alors qu'elle aurait pu être extraite dans un composant spécifique.
- Les composants n’étaient pas organisés dans des dossiers spécifiques, rendant l’architecture confuse.
- Étant donné que l'IA utilisait Tailwind CSS, certaines propriétés CSS qui ne pouvaient pas être générées automatiquement avaient été placées dans un fichier globals.css, alors qu'elles n'étaient utilisées que par un seul composant.
Solutions mises en place
Pour corriger ces problèmes, j’ai demandé à l’IA de :
- Placer tous les nouveaux composants générés dans un dossier components/[nom_composant].
- Regrouper les propriétés CSS spécifiques à un composant dans un fichier CSS séparé.
- Conserver uniquement les fichiers correspondant aux pages dans le dossier app de Next.js, afin de ne pas mélanger les composants et les pages. En effet, Next.js utilise l'arborescence des fichiers du dossier app pour définir les routes de l'application.
Cette opération de restructuration s'est avérée beaucoup trop complexe et fastidieuse pour l'IA. L'agent devait effectuer de nombreux appels et avait du mal à déplacer correctement les fichiers. J'ai donc choisi d'effectuer cette tâche manuellement.
Quand l'IA perd le fil de l'histoire
Après avoir restructuré la codebase, j'ai tenté d'ajouter de nouvelles fonctionnalités au projet. Malheureusement, je me suis heurté à un problème majeur : l'agent IA semblait avoir une représentation différente de l'architecture du projet en mémoire.
En conséquence, l'IA n'arrivait plus à se repérer dans la codebase ni à modifier le code correctement. Ses modifications étaient souvent erronées ou incohérentes avec la structure du projet.
Face à cette difficulté, j'ai décidé d'interrompre le développement pour le moment. Je prévois de reprendre ce projet ultérieurement et j'ai déjà quelques idées pour les prochaines itérations.
Leçons tirées et bonnes pratiques pour utiliser Cursor.ai
Stratégies pour guider l’IA
- Avant de générer du code, demander des suggestions d’approche et valider celle-ci.
- Fournir des indications claires sur les composants à intégrer dans chaque page.
- Définir la structure du projet et ses conventions dès le début.
Critique et validation humaine
L’IA a tendance à produire du code volumineux, parfois redondant. Il est essentiel de relire, critiquer et améliorer le code généré pour garantir sa qualité.
Utilisation des règles Cursor
Cursor.ai permet de définir des .cursorRules pour guider l’agent dans le respect des conventions du projet. Ces règles peuvent inclure des directives sur la structure, le nommage et les bonnes pratiques.
Conclusion : Apprendre en codant avec l’aide de l’IA
Ce projet a démontré que Cursor.ai peut être un outil puissant pour les développeurs, mais nécessite une supervision humaine attentive. En apprenant à critiquer et améliorer le code généré, j’ai acquis une meilleure compréhension des bases de React et Next.js. Cette expérience montre que l’IA peut être un allié précieux pour apprendre en codant, à condition de l’utiliser avec discernement.
