Comment ChatGPT m’a aidé à programmer une application Web, même si je n’y arrive pas du tout – Živě.cz

Il y a quelques mois, j’ai montré dans un article comment j’avais créé mes propres modules complémentaires de navigateur avec l’aide de ChatGPT. Cet article sera similaire. Prenez-le comme source d’inspiration pour voir comment vous pouvez utiliser ChatGPT avec seulement les bases de la programmation pour créer quelque chose que vous ne pourriez pas faire sans l’IA.

Python d’abord

Dernièrement, je m’amuse à tester des capteurs optiques de fréquence cardiaque dans des montres. Cependant, il n’est pas toujours facile d’obtenir un tableau avec les valeurs de fréquence cardiaque seconde par seconde à partir de la montre. Je dois passer par les chemins de synchronisation et de conversions diverses.

Comme maintenant lors du premier test de la montre Amazfit. J’ai synchronisé l’activité avec Strava et j’en ai enregistré le fichier TCX d’origine. Cela devrait être du XML simple, donc j’allais le charger… mais ce ne serait pas le cas. Tous les navigateurs et validateurs ont signalé une erreur.

J’ai donc jeté le fichier dans ChatuGPT 4 et ses capacités avancées d’analyse de données (anciennement appelées Code Interpreter). L’IA conçoit le code en Python, l’exécute elle-même avec le fichier donné – et, surtout, se débogue elle-même en cas de problème.

Regardez cette photo qui le montre parfaitement. Ci-dessus se trouve ma première entrée avec un fichier téléchargé et une demande de chargement.

ChatGPT a décrit ce qu’est le format TCX et comment l’utiliser. Il a préparé un code simple, l’a exécuté… et a constaté qu’il ne fonctionnait pas. Qu’il faudra modifier le XML pour pouvoir le charger. A défaut d’y parvenir une seconde fois, il a proposé un autre ajustement et a ensuite répertorié les cinq premières entrées du tableau.

J’ai ensuite écrit le code Python que ChatGPT utilisait pour charger. Je l’ai copié dans un fichier dans Jupyter Notebook, j’ai également parlé de la formulation du code pour l’exportation au format CSV et j’avais une procédure prête pour obtenir les données de la montre Amazfit dans le format nécessaire.

Je pourrais m’arrêter ici, ChatGPT m’a déjà beaucoup aidé. En un quart d’heure, j’avais prêt l’outil dont j’avais besoin.

Et maintenant je veux une application Web

Mais j’ai reçu une astuce selon laquelle je n’aurais pas réellement besoin d’exécuter cet outil à l’aide de blocs de code, mais qu’il s’agirait d’une simple application Web. Localement, j’ouvrirais la page HTML de l’application dans le navigateur, y chargerais le fichier TCX, puis copierais simplement les valeurs converties.

Je l’ai essayé et en quelques dizaines de minutes, il en avait fini avec sa mauvaise connaissance de JavaScript. Mais je dois admettre que cela a demandé un peu plus d’efforts. ChatGPT ne peut pas exécuter et déboguer JavaScript seul, comme il le peut avec Python. J’ai dû me déboguer avec les fichiers sur mon disque et lui décrire le comportement et les erreurs.

Malheureusement, mon intention de partager l’intégralité de la conversation ChatGPT avec vous afin que vous puissiez voir toutes mes instructions, son résultat et le processus de débogage n’a pas fonctionné. Maintenant, je sais que si le chat contient une image intégrée, la fonction de partage n’est pas disponible. Mais je vais essayer de le décrire brièvement.

Vous pouvez voir l’entrée initiale dans l’image précédente. Sachant que XML n’est pas un standard, je ne voulais pas laisser ChatGPT aller droit au but. Je lui ai d’abord demandé d’utiliser son Python pour découvrir ce qui n’allait pas avec le fichier et comment le réparer. Le même processus que celui que j’ai décrit dans l’introduction a eu lieu.

Par la suite, j’ai décrit à ChatGPT exactement ce que j’attendais de lui, comment l’application devait se comporter. Il a fait l’analyse et proposé une solution :

À l’étape suivante, l’IA a créé du code HTML de base et des fonctions javascript. J’ai également demandé comment je devrais travailler avec eux sur le disque. ChatGPT a expliqué que le HTML viendra dans un fichier, les JavaScript dans un autre.

J’ai créé les fichiers comme indiqué, ouvert le code HTML, téléchargé le fichier TCX et constaté que rien ne s’était passé. J’ai décrit le comportement et la console javascript vide. ChatGPT a suggéré de modifier le code pour afficher les statuts sur la console :

Après un autre run, j’ai découvert que j’avais, entre autres, dans la console Points de suivi trouvés : 0 et il m’est venu à l’esprit que ChatGPT a peut-être oublié qu’il ne s’agit pas de XML standard. Il n’a pas relié l’exercice d’introduction, alors qu’il était censé savoir comment le charger, avec la deuxième partie, avec l’application javascript. Mais il lui suffisait d’attirer son attention là-dessus, de se référer à l’introduction, et il lui proposa aussitôt le code modifié.

J’ai rechargé le fichier TCX… et tout a fonctionné. Mais le site était tellement basique, moche. Je voulais essayer de faire mieux.

Tout à l’heure, un sort est entré en jeu qui m’a finalement empêché de partager l’intégralité de la conversation. J’ai dessiné une image de ce à quoi je voulais que la page ressemble. J’ai téléchargé l’image sur ChatGPT et ajouté une description du comportement.

ChatGPT a conçu un nouveau contenu de fichier HTML, maintenant il était plein de styles CSS et de leurs définitions, j’ai également dû ajouter un autre morceau de code au fichier JavaScript. À l’étape suivante, j’ai demandé des ajustements mineurs de style en termes de taille de police et de couleurs.

Et voici le résultat, la page du navigateur après téléchargement et traitement de mon mauvais fichier TCX :

Je ne l’aurais pas donné sans l’IA

J’ai quelques bases de JavaScript, dans sa version Apps Script j’ai déjà créé quelques petites choses dans des feuilles de calcul Google. Cependant, je n’aurais certainement pas pu préparer cette candidature moi-même. Mais avec l’aide de ChatuGPT, j’ai un outil prêt en un rien de temps qui fait ce dont j’ai besoin et qui a l’air plutôt cool.

Je ne pourrais tout simplement pas faire cela sans l’IA. Je n’entrerais probablement pas dans ces détails ; et si je me décidais, cela me prendrait des jours plutôt que des dizaines de minutes.