Accueil

Utiliser GitHub Desktop avec Claude Code

Vous codez avec l’assistance de l’IA. Elle apporte des modifications à vos fichiers. Parfois les modifications fonctionnent parfaitement. Parfois non. Le contrôle de version est comme un bouton d’annulation pour l’ensemble de votre projet. Chaque fois que vous enregistrez un instantané (appelé un “commit”), vous créez un point de restauration. Vous pouvez toujours revenir en arrière.

Lorsque vous combinez GitHub Desktop avec Claude Code, vous obtenez un développement à la vitesse de l’IA avec un contrôle de version professionnel.

Concepts Clés

Git suit chaque modification de vos fichiers sur votre ordinateur.

GitHub stocke votre code dans le cloud comme sauvegarde.

GitHub Desktop rend Git visuel - vous cliquez sur des boutons au lieu de taper des commandes.

Claude Code est un assistant de codage IA qui écrit du code, corrige des bugs et crée des commits pour vous.

Ce Que Vous Allez Faire

Créer une application de minuteur simple avec Claude Code et suivre toutes les modifications avec GitHub Desktop :

• Créer un projet et une application de minuteur
• Tester et corriger les erreurs
• Committer et pousser les modifications
• Abandonner les mauvaises modifications et réessayer
• Laisser Claude automatiser les commits

Ce Dont Vous Aurez Besoin

• Avoir terminé Installer Claude Code sur Windows ou Installer Claude Code sur Mac
• Avoir terminé Premiers Pas avec le Contrôle de Version
• 20 minutes

Étape 1 : Créer Votre Projet

• Ouvrez GitHub Desktop
• Cliquez sur File → New Repository
• Remplissez :
  • Name : test_claude
  • Description : A timer app built with Claude Code
  • Local Path : Cliquez sur Choose… et choisissez votre dossier Documents (par défaut, c’est un dossier GitHub à l’intérieur de Documents, donc modifiez-le)
  • Cochez “Initialize this repository with a README”
• Si GitHub Desktop indique que le dossier « appears to be a Git repository » (semble être un dépôt Git), c’est que vous avez déjà un dossier test_claude créé lors du tutoriel Git. Renommez cet ancien dossier (par exemple en test_claude_old) dans l’Explorateur de fichiers ou le Finder, puis réessayez
• Cliquez sur Create Repository
• Cliquez sur Publish repository en haut
• Cliquez sur Publish Repository

Vous avez maintenant un projet local et une sauvegarde cloud sur GitHub.

Étape 2 : Demander à Claude de Créer l’Application de Minuteur

• Ouvrez votre terminal : PowerShell sous Windows, Terminal sur Mac
• Naviguez vers votre projet :

  cd ~/Documents/test_claude
  

  Sous Windows, si vous voyez Cannot find path, votre dossier Documents est sauvegardé par OneDrive. Exécutez plutôt cd ~/OneDrive/Documents/test_claude

• Démarrez Claude Code :

  claude
  

• Copiez et collez toute cette demande (coller garde toutes les lignes ensemble ; appuyer sur Entrée l’enverrait trop tôt) :

  Crée une application de minuteur simple dans un seul fichier appelé timer.html.
  Elle doit avoir :
  - Un champ de saisie pour définir les minutes
  - Des boutons Démarrer et Arrêter
  - Un affichage montrant le temps restant au format MM:SS
  - Quand le minuteur atteint zéro, afficher « Le temps est écoulé ! »
  Garde ça simple, avec le CSS et le JavaScript directement dans le fichier.
  

Claude crée le fichier timer.html (prend 10-30 secondes).

Étape 3 : Tester le Minuteur

• Dans GitHub Desktop, cliquez sur Repository → Show in Finder/Explorer
• Double-cliquez sur timer.html pour l’ouvrir dans votre navigateur
• Essayez le minuteur :
  • Tapez 1 dans le champ de saisie
  • Cliquez sur Démarrer
  • Observez le compte à rebours

Si cela fonctionne : Passez à l’Étape 5.

Si quelque chose est cassé : Continuez à l’Étape 4.

Étape 4 : Corriger les Erreurs (Si Nécessaire)

• Ouvrez la console du navigateur (clic droit sur la page → Inspecter → onglet Console)
• Copiez tous les messages d’erreur en rouge
• Retournez à Claude Code dans votre terminal
• Collez l’erreur :

  Je vois cette erreur : [collez l'erreur]. Peux-tu la corriger ?
  

• Actualisez le navigateur (cliquez sur le bouton de rechargement ou clic droit → Actualiser) et testez à nouveau

Étape 5 : Examiner les Modifications

• Passez à GitHub Desktop
• Panneau de gauche : Affiche les fichiers modifiés (timer.html)
• Panneau de droite : Affiche le code (vert = ajouté)
• Lisez attentivement pour comprendre ce que Claude a créé

Examinez toujours le code généré par l’IA avant de committer.

Étape 6 : Committer Manuellement

• En bas à gauche, dans le champ Summary, tapez :

  Create initial timer app with start/stop functionality
  

• Cliquez sur le bouton bleu de commit en bas (son libellé ressemble à Commit 1 file to main)

Vous avez créé un point de sauvegarde !

Bons messages : “Create initial timer app”, “Fix start button” Mauvais messages : “changes”, “update”, “asdf”

Étape 7 : Pousser vers GitHub

• Cliquez sur le bouton Push origin en haut
• Vérifiez : Repository → View on GitHub pour voir votre code en ligne

Votre code est maintenant sauvegardé dans le cloud.

Étape 8 : Ajouter une Notification Sonore

• Dans le terminal Claude Code :

  Ajoute une notification sonore quand le minuteur atteint zéro. Utilise le
  bip intégré du navigateur ou crée une alerte audio simple.
  

• Testez : Actualisez le navigateur, réglez le minuteur sur 1 minute, cliquez sur Démarrer

Pour ce tutoriel : Faites semblant que le son ne fonctionne pas bien. Ne committez pas encore !

Étape 9 : Abandonner les Mauvaises Modifications

Parfois l’IA nous met sur la mauvaise voie, et nous devons recommencer depuis notre dernier commit (point de sauvegarde).

• Ouvrez GitHub Desktop
• Cliquez sur le menu Branch → Discard All Changes
• Cliquez sur Discard All Changes pour confirmer
• Actualisez le navigateur - le minuteur fonctionne sans le son !

Vous venez de jeter le code défectueux et de revenir à votre dernier point de sauvegarde.

Étape 10 : Recommencer depuis le Début

• Dans Claude Code :

  Ajoute une notification sonore quand le minuteur atteint zéro. Cette fois, utilise un
  élément audio HTML5 avec un simple bip généré par l'API Web Audio. Assure-toi
  de gérer correctement les restrictions de lecture automatique du navigateur.
  

• Testez immédiatement (actualisez le navigateur, réglez sur 1 minute, Démarrer)

Si cela fonctionne : Continuez à l’Étape 11.

Sinon : Collez l’erreur à Claude ou réessayez.

Étape 11 : Laisser Claude Committer et Pousser

• Dans Claude Code :

  Fais un commit et pousse mes modifications
  

Claude va vérifier les modifications, écrire un message de commit, committer et pousser (10-20 secondes).

Si Claude indique que le push a échoué (par exemple could not read Username, ou git n’est pas reconnu) : passez à GitHub Desktop. S’il affiche encore des fichiers modifiés, committez-les vous-même (comme à l’Étape 6). Cliquez ensuite sur Push origin en haut — GitHub Desktop est déjà connecté à GitHub.

Quand utiliser chaque méthode :

• Commits manuels : Lorsque vous apprenez ou voulez le contrôle
• Commits par Claude : Lorsque vous travaillez rapidement et voulez de bons messages

Étape 12 : Demander à Claude de Résumer les Modifications

• Dans Claude Code :

  Qu'est-ce que mon dernier commit a modifié ?
  

Claude explique vos modifications en langage simple.

Essayez : « Explique ce que fait le code audio » ou « Montre-moi les 5 derniers commits »

Étape 13 : Voir l’Historique

• Dans GitHub Desktop, cliquez sur l’onglet History

Vous verrez (le plus récent en haut) :

• Le commit de Claude pour la notification sonore (sa formulation variera)
• Create initial timer app with start/stop functionality
• Initial commit

Remarquez que la première tentative ratée pour le son n’est pas là - vous l’avez abandonnée ! Seul le code fonctionnel a été inclus dans vos commits.

Défis

• Son personnalisé : Téléchargez un .mp3 gratuit depuis freesound.org, placez-le dans votre dossier de projet, demandez à Claude de l’utiliser
• Minuteurs multiples : « Permets aux utilisateurs de créer et exécuter plusieurs minuteurs simultanément »
• Barre de progression : « Ajoute une barre de progression qui montre visuellement combien de temps il reste »

Rappelez-vous : Testez après chaque fonctionnalité, committez après chaque succès, abandonnez les échecs.

Consultez votre projet sur GitHub.com : Cliquez sur Repository → View on GitHub dans GitHub Desktop pour voir votre historique complet des commits et votre code en ligne.

Dépannage

“Authentication failed” : Dans GitHub Desktop, ouvrez File → Options → Accounts (Windows) ou GitHub Desktop → Settings → Accounts (Mac), puis déconnectez-vous et reconnectez-vous

Claude dit “not a git repository” : Assurez-vous d’être dans le bon dossier (cd ~/Documents/test_claude)

Le minuteur ne fonctionne pas : Ouvrez la console du navigateur (clic droit → Inspecter → Console), copiez les erreurs, collez-les à Claude

Besoin d’aide ? Documentation GitHub Desktop • Documentation Claude Code

Le Flux de Travail Complet

• Demandez à Claude de faire des modifications
• Testez dans le navigateur
• Si cela fonctionne → Examinez et committez
• Si cela échoue → Abandonnez et réessayez
• Poussez vers GitHub
• Répétez

Commits manuels quand vous voulez le contrôle. Commits Claude quand vous voulez la rapidité. Abandonnez sans crainte - ne committez que le code fonctionnel !

Prochaines Étapes

Essayez d’ajouter des fonctionnalités à votre minuteur :

Gains rapides :

• Boutons préréglés pour 5, 10, 15 minutes : « Ajoute trois boutons préréglés : “5 min”, “10 min” et “15 min” »
• Bouton pause : « Ajoute un bouton Pause/Reprendre qui bascule l’état du minuteur »
• Meilleur style : « Améliore le design visuel avec une palette de couleurs moderne »

Créé par Steven Ge le 7 décembre 2025.