Créez votre première application utile avec l'IA

Étape 1: Décrivez le problème avec vos propres mots

Faire les courses, presque tout le monde le fait, ce qui en fait un premier projet idéal. Nul besoin de comprendre la programmation pour savoir si une liste de courses fonctionne : vous saisissez pain, lait et œufs, vous voyez le total et vous cochez les articles au fur et à mesure de vos achats. Le résultat est un outil que vous pourrez vraiment utiliser dès cette semaine.

Avant d'ouvrir le moindre outil d'IA, complétez ces trois phrases sur papier ou dans une note. C'est la compétence de programmation la plus importante de tout le livre : transformer un souhait en règles concrètes.

1. J'ai besoin de noter… (par exemple : chaque article, la quantité nécessaire et le prix unitaire).
2. Je veux que le programme calcule… (par exemple : le prix de chaque ligne et le total de toutes les courses).
3. Je saurai que le programme fonctionne quand… (par exemple : deux articles à 25 € affichent 50 €, et cocher un article ne modifie pas le total).

Étape 2: Créez une première petite version

La première version tient dans un seul fichier qui s'ouvre dans votre navigateur web. Pas d'environnement de développement à installer, pas de serveur, pas de compte. Copiez le prompt ci-dessous tel quel dans votre assistant IA (Claude, ChatGPT ou un équivalent).

Aide-moi à créer ma première application simple. Je suis complètement débutant.

Crée une liste de courses dans un seul fichier nommé courses.html que je peux ouvrir dans mon navigateur web. Mets tous les styles et tout le JavaScript dans ce seul fichier, sans bibliothèque externe.

Je veux saisir le nom de l'article, la quantité et le prix d'un article. Un bouton ajoute l'article à la liste. Affiche le prix de chaque ligne et, en bas, le total de toutes les courses. Permets-moi de supprimer un article et de le marquer comme acheté. Marquer un article comme acheté ne doit pas modifier le total.

Refuse un nom vide, les nombres invalides, un prix négatif et une quantité inférieure ou égale à zéro. Accepte dans le prix aussi bien la virgule que le point décimal.

Explique d'abord brièvement le plan. Écris ensuite le code complet et les étapes exactes pour enregistrer et ouvrir le fichier. N'ajoute aucune autre fonctionnalité pour l'instant.

1. Copiez le code. Utilisez le bouton de copie dans la réponse de l'IA pour récupérer tout le code, de la première à la dernière ligne.
2. Enregistrez-le sous courses.html. Ouvrez un éditeur de texte brut (Notepad sous Windows, TextEdit en mode texte brut sur Mac), collez le code et enregistrez-le sous courses.html. Choisissez « Tous les fichiers » comme type de fichier, et non « Documents texte ».
3. Ouvrez-le dans le navigateur. Double-cliquez sur le fichier ou faites-le glisser dans une fenêtre du navigateur. Vous devez voir votre liste de courses, et non une page remplie de code.

Étape 3: Vérifiez que ce n'est pas qu'une jolie image

Une application qui a l'air correcte n'est pas forcément une application qui fonctionne. Parcourez ce tableau ligne par ligne et comparez ce que vous voyez avec le résultat correct. C'est votre premier vrai test.

Si une ligne échoue, ne corrigez pas encore le code à la main. Indiquez précisément à l'IA quelle ligne a échoué, ce que vous avez saisi et ce que vous avez vu à la place, et demandez-lui de corriger uniquement ce problème.

Étape 4: Faites vous-même une modification

Faites maintenant votre première modification sans que l'IA l'écrive à votre place. Demandez à l'IA : « Où se trouve le titre de l'application dans mon code ? » Elle vous indiquera une ligne qui ressemble à <h1>Liste de courses</h1>.

1. Trouvez le titre. Ouvrez courses.html dans votre éditeur de texte et trouvez la ligne indiquée par l'IA.
2. Modifiez le texte. Remplacez les mots entre <h1> et </h1> par votre propre titre, par exemple « Courses du samedi ». Ne supprimez pas les chevrons.
3. Enregistrez et actualisez. Enregistrez le fichier, revenez au navigateur et actualisez la page. Votre nouveau titre doit apparaître.

Demandez ensuite à l'IA de vous expliquer votre propre fichier en trois parties, en prenant votre code comme exemple. Vous verrez que toute application web repose sur les trois mêmes couches :

Étape 5: Apprenez une nouvelle compétence à l'application

Les vrais programmes grandissent par petites étapes. Ajoutez une seule nouvelle fonctionnalité, puis testez à nouveau. Envoyez à l'IA ce message de suivi dans la même conversation :

Ajoute un budget à ma liste de courses. Permets-moi de saisir le montant que je veux dépenser. Affiche ce qu'il reste. Si le total dépasse le budget, affiche un avertissement clair avec le montant du dépassement. Tout le reste doit continuer à fonctionner exactement comme avant, et montre-moi le fichier complet mis à jour.

Vous avez maintenant créé, lancé, testé et modifié une véritable application. Ce n'est pas toute la programmation, mais c'est la routine que vous répéterez dans chacune des leçons suivantes : décrire clairement, laisser l'IA générer, vérifier par rapport aux résultats attendus et modifier une seule chose à la fois.