Comment j’ai utilisé l’IA pour développer une application Web moderne

L’IA générative comme ChatGPT a inauguré une nouvelle ère du développement logiciel, une ère dans laquelle n’importe qui peut développer une application utile et moderne avec peu ou pas de compétences en codage. Dans cet article, je vais vous montrer comment j’ai utilisé l’IA pour développer un outil sur lequel je m’appuie désormais au quotidien.

Le problème que j’essayais de résoudre

Depuis la création de ChatGPT et d’autres modèles de langage d’IA, certains mots sont devenus étroitement associés au contenu généré par l’IA (l’une des nombreuses raisons pour lesquelles vous ne devriez pas utiliser ChatGPT pour écrire). Parmi les exemples, citons « delve », « tapestry » et « testament ». En tant qu’écrivain, j’ai toujours cru qu’il fallait utiliser le bon mot dans le bon contexte. Lorsqu’un mot convient et exprime exactement ce que je veux transmettre, j’ai le sentiment que je devrais pouvoir l’utiliser.

Malheureusement, beaucoup de mes clients ne voient pas les choses de la même façon. Ils se méfient de plus en plus du contenu qui pourrait sembler généré par l’IA. Comme je ne suis pas une IA (du moins, je ne le pense pas), je ne me souviens pas de tous les mots et expressions couramment utilisés par les modèles linguistiques de l’IA, il peut donc être difficile pour moi de les éviter.

C’est pourquoi j’ai décidé de créer un outil qui analyserait le texte fourni par rapport à une liste de mots et mettrait en évidence les mots et expressions potentiellement « à consonance IA ». Un outil comme celui-ci peut être développé en utilisant les trois technologies Web clés : HTML (structure le contenu d’une page Web), CSS (utilisé pour styliser le contenu d’une page Web) et JavaScript (transforme une page Web statique en une « application Web » qui fait ce que nous voulons qu’elle fasse).

Choisir la meilleure IA pour le développement d’applications Web

Un projet comme mon « AI Vocab Checker » est un candidat parfait pour le développement de logiciels assisté par l’IA, car les meilleurs modèles d’IA ont été formés sur des quantités massives de code et de documentation HTML, CSS et JavaScript, afin qu’ils puissent générer du code, fournir des conseils sur les meilleures pratiques, suggérer des implémentations efficaces et même aider à résoudre les problèmes qui pourraient survenir pendant le développement.

Les 3 meilleurs modèles de langages de grande taille (LLM) du classement LMSYS Chatbot Arena (GPT-4o, Claude 3.5 Sonnet et Gemini Advanced) peuvent gérer des tâches de développement Web avec une compétence impressionnante. Cependant, j’ai finalement choisi Claude 3.5 Sonnet pour ce projet.

Claude 3.5 Sonnet a été mon assistant de codage IA de choix en grande partie grâce à sa fonctionnalité « Projets », qui m’a permis de créer un espace de travail dédié uniquement au développement de mon application. Bien sûr, cela aide aussi que Sonnet surpasse ses concurrents dans les tâches de codage incluses dans le benchmark HumanEval .

Créer mon application Web avec Claude

J’ai commencé par créer un nouveau projet dans Claude pour l’AI Vocab Checker en sélectionnant l’ onglet Projets dans le volet de gauche (vous pouvez le révéler en passant le curseur de votre souris sur le logo Claude dans le coin supérieur gauche dans une discussion active) puis en cliquant sur le bouton Créer un projet .

Une fois cela fait, il me fallait décrire le problème à Claude. Voici la réponse que j’ai trouvée :

En règle générale, vous devez fournir une description détaillée de ce que vous souhaitez accomplir, puis la compléter avec autant de détails que possible. Tout ce que vous ne décrivez pas en détail sera laissé à l’interprétation de l’IA, qui peut ou non correspondre à votre vision.

Il a fallu un peu de temps à Claude pour générer le code, que j’ai ensuite collé dans un fichier index.html à l’aide de Visual Studio Code. J’ai ensuite pu simplement ouvrir le fichier index.html dans un navigateur Web, et voici la version initiale de l’application AI Vocab Checker que Claude a créée :

Comme vous pouvez le constater, Claude a réussi à créer une application fonctionnelle avec une seule invite, et l’application fait réellement ce qu’elle est censée faire ! Cependant, il y a quelques problèmes qui sont assez évidents après une inspection plus approfondie :

• Les deux premières zones de texte sont légèrement plus grandes que la zone de texte inférieure.
• Le nom de l’application est erroné (j’ai oublié de le préciser).
• L’application n’exploite pas l’espace horizontal disponible sur les appareils de bureau.
• Tous les mots sont surlignés de la même couleur (ce qui rend le résultat difficile à analyser).
• Il n’y a pas de statistiques d’utilisation pour les mots détectés.
• Claude n’a utilisé aucune bibliothèque ni aucun framework malgré les encouragements qu’il lui a adressés.

J’ai donc donné suite à cette invite :

Et voici le résultat :

C’est nettement mieux, et il n’a fallu qu’une seule invite supplémentaire. Claude a implémenté le framework Bootstrap pour obtenir un design moderne et réactif et la bibliothèque mark.js pour une meilleure mise en évidence. Impressionné par la façon dont leur inclusion a amélioré l’application, j’ai demandé à Claude quels autres frameworks ou bibliothèques nous pourrions utiliser, et l’IA a suggéré Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js et quelques autres.

Parmi les frameworks et bibliothèques suggérés, Chart.js m’a semblé le plus utile car il permet de créer des représentations visuelles de statistiques d’utilisation des mots, comme des graphiques à barres ou des graphiques à secteurs. J’ai demandé à Claude de l’implémenter, et je lui ai également demandé de remplacer le texte à analyser par le résultat pour améliorer l’expérience utilisateur. Après quelques ajustements mineurs et modifications de conception, voici ce que j’ai obtenu :

En ce qui concerne mes besoins personnels, cette version de mon AI Vocab Checker peut parfaitement les satisfaire, et il ne m’a fallu que 15 minutes pour le développer en utilisant mes compétences très limitées en développement Web que j’ai acquises au fil des ans sur divers sites Web de programmation gratuits.

Image de couverture et capture d’écran de David Morelo.