S’abonner
Tous les guides
Codex · Construire

Créer sa première application avec Codex

De l’idée à une petite application utilisable : cadrer, construire, ouvrir le résultat et vérifier que tout fonctionne.

Ce que tu vas obtenir

Une liste de tâches qui permet d’ajouter, terminer et supprimer une tâche, puis de retrouver ses données après un rechargement.

Avant de commencer

  • L’application ChatGPT pour ordinateur, avec l’espace Codex et ton compte connecté.
  • Un dossier vide, par exemple « mon-suivi ».
  • Les outils dont la solution a besoin. Dans notre essai, Python 3 a suffi pour le serveur local ; Codex indique ce qu’il faut installer selon la technologie choisie.

On prend un cas volontairement simple : une application pour suivre ses tâches. Tu peux remplacer cet exemple par un carnet de recettes ou un suivi de livres. Le principe reste le même : définir un petit résultat, le faire construire, puis l’essayer soi-même. Les prompts ci-dessous sont ceux que nous avons envoyés ; adapte-les à ton projet.

Nous avons suivi ce guide de bout en bout le 7 octobre 2026, dans l’application ChatGPT pour Mac (espace Codex, interface en français). Les captures montrent ce qui s’est réellement affiché. Les autres projets et deux passages liés à une configuration personnelle sont recadrés ou floutés ; rien n’a été redessiné. Ta version de l’application et les réponses de Codex peuvent différer.

Ouvrir le bon dossier

Crée un dossier vide sur ton ordinateur. Dans l’application, choisis Fichier › Ouvrir le dossier, puis sélectionne-le. La première fois, Codex demande Faire confiance à ce dossier ? : il pourra y lire, modifier et exécuter des fichiers. Accepte seulement pour un dossier que tu connais.

L’accueil affiche alors « Sur quoi allons-nous travailler dans mon-suivi ? ». Le nom du dossier apparaît aussi au-dessus de la zone de saisie. Juste en dessous, l’application indique le niveau d’accès donné à Codex : « Accès complet » sur nos captures. Pour un premier essai, choisis plutôt un mode qui te demande ton accord avant les actions sensibles.

Avant de construire quoi que ce soit, pose une question simple pour vérifier que Codex regarde au bon endroit.

Accueil de Codex : « Sur quoi allons-nous travailler dans mon-suivi ? », avec le dossier mon-suivi au-dessus de la zone de saisie.Agrandir
Le dossier « mon-suivi » est ouvert : son nom figure dans la question d’accueil et au-dessus de la zone de saisie.
À copier dans Codex
Indique le dossier dans lequel tu vas travailler et les fichiers qui existent déjà. Pour le moment, ne modifie rien.

Le bon résultatCodex donne le chemin du dossier, confirme qu’il est vide et précise qu’il n’a rien modifié. Si tu vois les fichiers d’un autre projet, change de dossier avant de poursuivre.

Décrire une première version utile

Commence par ce que la personne doit pouvoir faire. Ici, trois actions suffisent : ajouter une tâche, la terminer et la supprimer. Précise aussi ce qui doit survivre à un rechargement, et termine par « Ne code pas encore » pour obtenir d’abord une proposition.

Dans notre essai, Codex a proposé une page HTML, CSS et JavaScript sans dépendance. Il a suggéré d’enregistrer les tâches dans le localStorage du navigateur et découpé le travail en cinq étapes. Il a aussi signalé n’avoir modifié aucun fichier.

Ce stockage convient à un prototype personnel sur un seul appareil. Il ne synchronise rien et disparaît si l’on efface les données du navigateur. Pour un service partagé, il faudra un stockage serveur.

Réponse de Codex : solution en HTML, CSS et JavaScript avec localStorage, fonctions prévues et cinq étapes de réalisation.Agrandir
Codex répond par une solution, la liste des fonctions et cinq étapes, sans toucher aux fichiers.
À copier dans Codex
Je veux une petite application de suivi de tâches, en français. On doit pouvoir ajouter, terminer et supprimer une tâche. Les tâches restent après un rechargement sur le même navigateur. Interface lisible sur téléphone, utilisable au clavier. Pas de compte ni de synchronisation pour cette version. Propose une solution simple et les étapes de réalisation. Ne code pas encore.

Le bon résultatLe plan couvre les trois actions et la conservation des données. Fais préciser les choix que tu ne comprends pas avant de lancer la réalisation.

Faire construire une version complète

Une fois le plan compris, donne le feu vert. Demande une version qui fonctionne, les instructions pour la lancer et une vérification des comportements. Si Codex demande d’installer un outil ou d’obtenir un accès, lis la demande avant d’accepter.

Pendant le travail, Codex affiche ce qu’il fait et un compteur « En cours depuis ». Notre construction a pris environ cinq minutes. Codex a créé index.html, styles.css, app.js et un README, puis lancé un serveur local. Ce serveur apparaît dans le panneau Processus en arrière-plan, en haut à droite.

Le résumé final sépare ce qui a été vérifié de ce qui reste à vérifier. Lis surtout cette seconde partie : c’est ta liste d’essais.

Pour ce premier exercice, n’ajoute ni calendrier, ni notifications, ni connexion. Note ces idées pour plus tard.

Résumé de Codex : serveur lancé sur http://127.0.0.1:8000/, README, fichiers créés, éléments vérifiés et à vérifier.Agrandir
Le résumé donne l’adresse du serveur, le README, ce qui a été vérifié et ce qui reste à vérifier.
À copier dans Codex
Réalise la version proposée dans ce dossier. Garde le code simple et organisé. Vérifie les trois actions et le stockage après rechargement. Ajoute un README avec les commandes exactes pour installer et lancer l’application. Lance le serveur de développement et donne-moi son URL. Indique clairement ce que tu as testé et ce qui reste à vérifier.

Le bon résultatCodex donne une adresse locale (pour nous, http://127.0.0.1:8000/) et distingue les vérifications faites de celles qui restent. Si le serveur ne démarre pas, envoie le message d’erreur exact au lieu de demander une réécriture générale.

Ouvrir l’application et donner un retour précis

Sous le résumé, une carte Site web porte le nom de l’application. Un clic l’ouvre dans le navigateur intégré, à droite de la conversation. Ouvrir dans propose un autre navigateur. Tu peux aussi copier l’adresse dans ton navigateur habituel.

Regarde l’écran avant de juger les détails. Chez nous, le panneau étroit a révélé un vrai défaut : le bouton Ajouter passait sous le champ au lieu de rester à côté. Le retour envoyé nomme l’élément, décrit ce qu’on voit et donne le résultat attendu avec une largeur précise. « Ce n’est pas beau » n’aurait pas suffi.

Pour un défaut visuel, tu peux aussi joindre une capture d’écran. Ajoute toujours du texte pour le comportement qu’une image ne montre pas.

Retour sur le bouton Ajouter saisi dans Codex ; à droite, l’aperçu montre le bouton placé sous le champ.Agrandir
Le retour est rédigé dans la zone de saisie ; à droite, l’aperçu montre le bouton passé sous le champ. Un paragraphe lié à une configuration personnelle est flouté.
À copier dans Codex
Sur un écran étroit, le bouton Ajouter passe sous le champ au lieu de rester à côté (voir l’aperçu à droite). Garde le champ et le bouton sur la même ligne à 390 px. Ne change pas les trois actions existantes. Vérifie ensuite le rendu à 390 px et l’absence de défilement horizontal.

Le bon résultatCodex corrige la zone et rapporte sa vérification. Pour nous : champ et bouton alignés à 390 px, sans défilement horizontal, avec seulement la feuille de style modifiée. Recharge l’aperçu pour le constater toi-même.

Essayer les cas qui comptent

Fais toi-même ce parcours :

  1. Ajoute « Envoyer le devis ».
  2. Ajoute une seconde tâche et termine la première.
  3. Recharge la page : les deux tâches et leur état doivent rester.
  4. Supprime une tâche puis recharge de nouveau.
  5. Essaie une saisie vide et un titre très long.
  6. Utilise Tab puis Entrée pour vérifier le parcours au clavier.

Dans le navigateur intégré, le bouton de rechargement se trouve à gauche de l’adresse. Chez nous, les trois tâches ajoutées étaient toujours là après rechargement.

Le message « terminé » de Codex ne remplace pas ce passage dans l’interface. Si une action échoue, donne les étapes exactes et ce que tu attendais.

L’application Mes tâches dans le navigateur intégré : champ et bouton Ajouter sur une ligne, trois tâches après rechargement.Agrandir
Après correction et rechargement : le champ et le bouton tiennent sur une ligne, et les trois tâches sont toujours là.
À copier dans Codex
Vérifie ce parcours : ajouter deux tâches, terminer la première, recharger, supprimer la seconde puis recharger. Essaie aussi une saisie vide et un titre long. Pour chaque cas, rapporte le résultat observé. Corrige les échecs et rejoue les cas concernés.

Le bon résultatTu retrouves les données attendues après chaque rechargement. Si Codex n’a pas pu ouvrir un navigateur, fais le parcours toi-même : un test non exécuté n’est pas un test réussi.

Relire les fichiers et garder une version stable

Après chaque demande, Codex affiche une carte des fichiers modifiés, avec les lignes ajoutées et supprimées. Afficher les modifications ouvre le détail ; Annuler sert à revenir sur ces changements. Lis au moins les noms des fichiers : une correction d’affichage ne devrait toucher que le style.

Avant d’ajouter une fonctionnalité, conserve la version qui marche. Demande un commit local : il enregistre un état, mais ne met pas le site en ligne. Si le dossier n’utilise pas encore Git, Codex peut l’initialiser.

Le prochain objectif pourra être un filtre « à faire / terminées », avec le même cycle : demande précise, réalisation, essai.

Cartes de fin de tour : le site Mon suivi et six fichiers modifiés, avec les boutons Annuler et Afficher les modifications.Agrandir
Après la construction : la carte du site, puis la liste des fichiers modifiés, dont README.md, app.js et index.html.
À copier dans Codex
Résume dans le README les fichiers importants, la commande de lancement et les limites de cette version. Initialise Git si ce n’est pas déjà fait, puis prépare un commit local de la version vérifiée. Ne pousse rien et ne déploie pas l’application.

Le bon résultatTu sais relancer l’application et retrouver une version stable. Le déploiement, la synchronisation et les comptes restent des étapes distinctes.

À toi de jouer.

Avant de passer à la suite, vérifie ces points :

  • Je sais ouvrir et relancer l’application.
  • Les trois actions fonctionnent et les tâches restent après rechargement.
  • J’ai essayé un écran étroit et le clavier.
  • Je connais les limites du stockage local et j’ai gardé une version stable.
Revenir au début

Pour continuer

Capture réelle de Codex