L’un des principaux arguments du battage médiatique autour de ChatGPT est qu’il peut être un outil de programmation efficace. L’idée est la suivante : vous décrivez ce que vous voulez en langage naturel ; le chatbot génère le code qui le fait. Mais quelle est la capacité réelle de ChatGPT à faire cela ?
Quel meilleur moyen de le savoir que de le mettre à l’épreuve ? Nous avons demandé à ChatGPT de créer une application web simple à partir de zéro. Voici le résultat de notre test et les étapes à suivre pour créer un site web à partir de zéro en utilisant ChatGPT.
Etape 1 : Générer le plan de votre application web
Tout comme vous le feriez pour construire une application web avec n’importe quel outil, vous devez établir le plan de votre application et les étapes nécessaires à sa construction avant de laisser ChatGPT s’en charger.
Pour notre première tâche, nous avons demandé à ChatGPT de développer une application de chat simple. Pour ce faire, nous avons décrit les exigences de notre application web, puis nous avons demandé au chatbot de détailler un plan de développement de l’application.
Après avoir utilisé l’invite ci-dessus, voici le résultat que nous avons obtenu :
Vous devez activer le plugin « Show Me » sur votre compte ChatGPT pour générer un organigramme comme le nôtre ci-dessus. Vous pouvez installer et utiliser les plugins ChatGPT en quelques étapes seulement, bien que vous ayez besoin d’un abonnement premium.
Sans le plugin, vous obtiendrez un plan textuel ou un organigramme en ASCII. Ce n’est pas grave. Même sans le plugin, ChatGPT devrait fournir un schéma clair de l’application comme dans l’exemple ci-dessous.
Étape 2 : Diviser le plan en petits modules
Maintenant que nous avons une vue d’ensemble, nous avons demandé à ChatGPT de nous aider à diviser l’application en composants plus petits que nous pouvons développer séparément et ensuite intégrer pour former l’application web complète. ChatGPT nous a suggéré de la diviser en trois composants :
- Module d’enregistrement
- Module de connexion
- Module de chat
Nous avions d’autres idées, mais l’objectif ici est de laisser ChatGPT prendre les commandes.
1. Construire le composant d’enregistrement
Nous nous sommes immédiatement lancés dans la construction du composant d’enregistrement. Nous avons demandé à ChatGPT d’élaborer un algorithme approprié. Nous sommes intervenus en spécifiant que nous n’avions besoin que du nom d’utilisateur, de l’email et de l’avatar de l’utilisateur pour l’enregistrement. Voici l’invite :
Et voici le résultat :
Ensuite, nous avons demandé à ChatGPT de construire le composant d’enregistrement.
Bien que nous n’ayons pas inclus le champ du mot de passe dans le processus d’enregistrement, ChatGPT a pris la bonne décision en l’incluant dans le code HTML généré. Nous avons copié le code sans aucune modification, et voici ce qu’il donne sur un navigateur.
Ensuite, nous avons demandé à ChatGPT de générer le script d’enregistrement PHP. Dans un premier temps, nous avons demandé à ChatGPT d’écrire un code PHP pour la logique côté serveur afin de gérer la soumission du formulaire. Bien que le script généré ait fonctionné correctement, il présentait de nombreuses vulnérabilités.
Il n’y avait pas de hachage de mot de passe, pas de gestion des erreurs, et il était sujet aux injections SQL – ChatGPT ne faisait que le strict minimum. Il a été relativement facile de remédier à cette situation. Nous avons simplement demandé à ChatGPT d' »identifier tout ce qui ne va pas dans le code que vous venez de générer, et d’utiliser les points identifiés pour optimiser le code ». Notre script d’enregistrement PHP était alors prêt à fonctionner.
La formulation de votre message-guide est importante. Vous devez être très clair et précis sur ce que vous voulez que ChatGPT fasse. Lorsque nous lui avons simplement demandé de » résoudre le problème avec ce code « , il n’a pas résolu la plupart des problèmes que nous souhaitions qu’il résolve. Pour plus de conseils sur la rédaction des messages-guides de ChatGPT, voici quelques endroits où apprendre à rédiger des messages-guides efficaces.
Ensuite, nous avons demandé à ChatGPT de « d’écrire un code SQL pour créer une base de données pour les données capturées dans le script PHP. » Voici le code SQL obtenu :
Et voici la table créée en exécutant le code SQL :
Une fois la base de données créée, nous avons essayé notre premier enregistrement, qui s’est déroulé sans aucune erreur.
2. Construction du composant de connexion
Le composant d’enregistrement étant terminé, nous nous sommes attaqués au composant de connexion. Étonnamment, il a été le plus facile à construire malgré la logique supplémentaire de la gestion des sessions.
Voici la page de connexion générée. On remarquera qu’elle utilise les mêmes options de couleur que la page d’enregistrement.
Après avoir créé un fichier « server.login.php » selon les instructions de ChatGPT et ajouté le script PHP généré, nous avons réussi notre première connexion sans aucune modification ou débogage.
3. Construire le composant Chat
La construction du composant de chat a été la dernière partie – et probablement la plus difficile – de notre petite expérience. Au début, nous avons simplement demandé à ChatGPT d’écrire le code du composant de discussion. Inutile de dire que ce fut un échec colossal. Pour les composants plus complexes de tout ce que vous voulez créer, vous devrez le diviser en composants plus petits et vous y attaquer l’un après l’autre.
Nous avons demandé à ChatGPT des suggestions pour diviser le composant de chat, et il nous a suggéré de créer trois pages :
- Chat.php
- Envoyer des messages.php
- Récupérer les messages.php
Lorsque ChatGPT suggère un nom de fichier, l’utilisation d’un nom différent dans votre projet peut involontairement causer des problèmes car le chatbot référencera le même nom dans tout le code qu’il crée dans le projet. Nous l’avons appris à nos dépens. Ne faites pas la même erreur.
Création de la page Chat.php
Pour commencer, nous avons donné à ChatGPT des instructions détaillées sur la façon dont nous voulions que l’interface de chat se présente.
Après avoir exécuté le code HTML généré, nous avions une interface de chat sans boîte de saisie de message. Pour résoudre ce problème, nous avons simplement demandé à ChatGPT de « réécrire le code pour inclure une boîte de saisie de message et un bouton d’envoi. » Voici à quoi ressemble le code généré sur un navigateur lors du deuxième essai.
Lorsque le code généré ne donne pas les résultats escomptés ou omet un composant important, il suffit de demander à ChatGPT de réécrire le dernier code. Dites-lui d’inclure le composant ou de faire ce qui n’a pas été fait dans le code initial. Voici quelques conseils sur l’utilisation de ChatGPT pour la programmation.
Création des pages « send-messages.php » et « Fetch-messages ».
Satisfaits de l’interface, nous sommes passés à la construction du script pour gérer la logique du chat. Pour pouvoir envoyer et récupérer des messages de la base de données, ChatGPT a souligné à juste titre que nous aurions besoin d’une table « messages ». Nous avons demandé au chatbot de créer un SQL pour la table « messages ».
Après avoir généré un code SQL, nous avons demandé au chatbot de générer un script PHP pour gérer la logique de messagerie.
ChatGPT a généré le script pour les pages « send-messages.php » et « fetch-messages.php ». En exécutant les deux scripts, nous avons finalement obtenu notre toute première erreur (ce qui était étrangement satisfaisant). Arriver aussi loin dans le projet sans déboguer une seule ligne de code semblait un peu trop beau pour être vrai, malgré sa relative simplicité.
Il s’avère que l’erreur a été causée par ChatGPT qui a introduit une vérification pour une variable de session non déclarée ($_SESSION[‘user_id’]) dans notre script. Nous pensons que c’est le résultat d’une pause assez longue dans le projet qui a fait que ChatGPT a oublié certains contextes et noms de variables utilisés dans le projet.
Lorsque vous utilisez ChatGPT pour construire une application, assurez-vous d’utiliser le même fil de discussion et essayez de compléter les composants connexes dès que possible. L’utilisation d’un nouveau fil de discussion ou une longue pause peut introduire des incohérences. ChatGPT a tendance à oublier certains détails du projet en cours (par exemple la palette de couleurs) si vous faites de longues pauses entre les sessions de codage.
Ceci dit, nous avons corrigé le bug et déployé le code. Nous nous sommes inscrits, connectés et avons essayé la fonction de chat. Bien que nous ayons pu envoyer des messages d’un utilisateur enregistré à un autre, la couleur et la disposition des bulles de message étaient un peu différentes. Cependant, pour une application qui a pris une heure et 23 minutes à réaliser, nous ne la jugerons pas trop sévèrement.
ChatGPT : Un excellent assistant de codage
ChatGPT est clairement un puissant assistant de codage. Le fait que le chatbot puisse produire un code impressionnant à partir d’instructions simples, et parfois peu claires, témoigne de ses prouesses en matière de codage.
Bien sûr, il a encore beaucoup de défauts. Le problème de la fenêtre contextuelle limitée et de sa capacité à relier la logique de plusieurs composants construits indépendamment est un problème majeur. Cependant, le chatbot peut vous aider à construire rapidement des applications web assez complexes si vous savez vous y prendre.
