Comment utiliser Git ?

Programmer, c’est dur. Vous avez beaucoup de code réparti dans nombreux fichiers, ce qui rend compliqué le suivi de tout ce que vous faites. Et c’est encore plus difficile si vous collaborez avec d’autres personnes !

C’est pourquoi Git a été lancé en 2005 et est maintenant utilisé par des millions de programmeurs à travers le monde. C’est un système de gestion de versions en code ouvert. C’est le genre d’outil qui, une fois adopté, vous fait vous demander comment vous avez pu travailler sans !

Dans ce projet, nous allons créer un programme simple pour récupérer la température actuelle à Montréal et utiliser Git pour le versionner à chaque étape.

Notez que je vais vous montrer comment utiliser Git dans le terminal. Je pense que c’est important pour comprendre comment cet outil fonctionne. Mais la prochaine leçon sera plus visuel grâce à l’interface de GitHub.

Installation

Tout d’abord, vous devez installer Git. Les étapes peuvent varier selon votre système d’exploitation. Suivez les étapes correspondantes sur le site officiel de Git.

Initialisation

Une fois Git installé, créez un nouveau dossier et ouvrez-le avec VS Code.

Si vous cliquez sur Source Control dans la barre latérale gauche, vous verrez qu’il n’y a pas de dépôt Git dans ce projet.

Pour initialiser un nouveau dépôt Git, exécutez cette commande dans le terminal : git init.

Votre projet utilise maintenant Git ! Mais il n’y a rien dedans pour l’instant.

Tout ce que vous sauvegardez avec Git sera stocké dans un dossier caché .git dans votre projet.

Nouveaux fichiers

Créons un nouveau fichier main.ts et allons chercher les données météo les plus récentes à Montréal depuis l’API du Service météorologique du Canada.

Cette API retourne les données au format XML. Nous les affichons dans le terminal.

const response = await fetch(
  "https://dd.weather.gc.ca/observations/swob-ml/latest/CWTQ-AUTO-minute-swob.xml",
);
const xml = await response.text();
 
console.log(xml)

Vous pouvez maintenant voir votre nouveau fichier sous Changes. Sa couleur est aussi passée au vert et un U est affiché à côté, ce qui signifie Untracked. Vous pouvez également voir un 1 dans la barre latérale gauche, à côté du bouton Source Control, indiquant qu’un fichier a été modifié.

Git vous informe qu’il s’agit d’un nouveau fichier — il ne l’a jamais vu auparavant et ne le suit pas encore.

Juste pour vérifier que le code fonctionne, vous pouvez exécuter deno -A main.ts. Vous devriez voir les données XML affichées dans le terminal.

Suivi et enregistrement

Git ne sauvegarde pas automatiquement votre travail. Vous devez lui indiquer quand sauvegarder votre projet. Pour enregistrer vos modifications, vous devez les valider (commit). Chaque commit possède un identifiant (généré par Git) et un message que vous devez fournir.

Faire un commit se fait en deux étapes :

• D’abord, vous suivez les fichiers (nouveaux fichiers, fichiers supprimés)
• Ensuite, vous validez avec un message

Faisons-le. Pour suivre tous les fichiers du projet, exécutez dans votre terminal : git add -A

Puis validez avec cette commande, encore une fois dans votre terminal : git commit -m "Fetching XML data"

L’option -m indique à Git que vous fournissez un message, que vous écrivez juste après entre guillemets.

Et voilà ! Vous pouvez maintenant voir votre commit dans la section Graph.

Mise à jour des fichiers

Nous avons des données XML, ce qui n’est pas très pratique. Il serait préférable d’avoir des données au format JSON.

Installons la librairie fast-xml-parser depuis NPM pour convertir nos données.

Dans votre terminal, exécutez : deno add npm:fast-xml-parser

Puis mettez à jour votre fichier main.ts.

import { XMLParser } from "fast-xml-parser";
 
const response = await fetch(
  "https://dd.weather.gc.ca/observations/swob-ml/latest/CWTQ-AUTO-minute-swob.xml",
);
const xml = await response.text();
const json = new XMLParser({ ignoreAttributes: false }).parse(xml);
 
console.log(json);

Vous verrez maintenant d’autres changements. Comme nous avons installé une librairie, Deno a créé les fichiers deno.json et deno.lock. Ils sont en vert et non suivis.

Mais main.ts est en jaune avec un M à côté. Cela signifie que Git indique que ce fichier a été modifié.

Vous pouvez exécuter deno -A main.ts juste pour vous assurer que le code fonctionne.

Vous pouvez vérifier les changements ligne par ligne dans le fichier. À côté des numéros de ligne, vous verrez des barres colorées :

• Vert signifie que la ligne est nouvelle
• Bleu signifie que la ligne a été modifiée
• Rouge signifie que des lignes ont été supprimées

Si vous cliquez sur les barres, vous verrez les détails. Les ajouts sont affichés en vert, les suppressions en rouge. Si vous souhaitez revenir à la version précédente, cliquez sur la flèche de retour.

Vous pouvez également voir toutes les différences dans l’onglet Source Control. Cliquez sur main.ts pour afficher le Working Tree.

Par exemple, ici, on voit clairement que nous utilisons une nouvelle librairie (lignes vertes à droite) et que nous avons supprimé console.log(xml) (en rouge à gauche).

Si vous souhaitez revenir à une version précédente du fichier, vous pouvez aussi cliquer sur la flèche de retour sous Changes.

Faisons un commit de ces changements :

• Exécutez git add -A
• Puis git commit -m "XML to JSON"

Vous pouvez maintenant voir votre deuxième commit dans le Graph. Et si vous cliquez dessus, vous pouvez voir tous les changements effectués par rapport au commit précédent.

N’oubliez pas de faire défiler pour voir les modifications dans deno.json, deno.lock et main.ts.

Annuler un commit

L’une des fonctionnalités les plus puissantes de Git est la possibilité de revenir facilement à un commit précédent.

Par exemple, créons une erreur dans notre code. Essayons d’analyser la réponse du fetch comme du JSON au lieu de texte dans main.ts.

import { XMLParser } from "fast-xml-parser";
 
const response = await fetch(
  "https://dd.weather.gc.ca/observations/swob-ml/latest/CWTQ-AUTO-minute-swob.xml",
);
const xml = await response.json();
const json = new XMLParser({ ignoreAttributes: false }).parse(xml);
 
console.log(json);

Faisons un commit de cette modification avant de la tester 😱 :

• git add -A
• git commit -m "Parsing response as JSON"

Et ensuite, testons notre nouveau code avec deno -A main.ts.

Oh non ! Ça plante ! Et nous avons déjà validé ! Comment revenir en arrière ?

Bien sûr, vous pouvez toujours vérifier les changements et corriger le code manuellement. Mais si vous travaillez sur un gros projet, ce n’est pas toujours réaliste. À la place, vous pouvez utiliser la commande git revert avec l’identifiant du commit.

Pour récupérer un identifiant de commit, faites un clic droit sur le commit et cliquez sur Copy Commit ID. Ici, le commit que nous voulons annuler est le plus récent.

Commencez ensuite à taper git revert dans le terminal, collez l’identifiant du commit (n’oubliez pas l’espace entre revert et l’ID du commit), puis exécutez la commande !

Ce que vous voyez dans votre terminal est un éditeur de texte. Les lignes au-dessus de la section # représentent le message de commit proposé.

Pour accepter le message proposé, tapez simplement :q dans le terminal et appuyez sur Entrée pour confirmer et quitter l’éditeur de texte du terminal. Vous pouvez aussi cliquer sur le gros bouton bleu Commit.

Vous verrez maintenant un quatrième commit, indiquant que vous avez annulé le précédent ! Pour un vrai retour en arrière, vous pouvez aussi utiliser git reset, mais revert est plus sûr et garde une trace de tout — y compris de l’annulation !

Maintenant, si vous exécutez deno -A main.ts, tout fonctionne comme avant notre stupide erreur.

Branches

Un autre concept important dans Git est celui des branches.

Par défaut, un dépôt a une branche main. Vous pouvez voir votre branche en bas à gauche dans VS Code, ainsi qu’à côté de vos commits. Jusqu’ici, nous avons travaillé sur main.

En général, on essaie (😅) de garder main propre et on travaille dans des branches séparées.

Par exemple, disons que nous voulons maintenant extraire la date et la température à partir des données récupérées pour Montréal. On pourrait créer une nouvelle branche pour ajouter ce code au projet.

Ajouter une branche

Pour créer une nouvelle branche nommée temperature, exécutez : git checkout -b temperature

La commande checkout indique à Git que vous voulez changer de branche. L’option -b suivie de temperature lui dit de créer une nouvelle branche temperature avant de s’y positionner. Comme vous êtes sur main, la branche sera créée à partir de main. Le code sera exactement le même sur les deux branches au départ.

Pour voir la liste de toutes les branches, exécutez git branch. Celle avec un * devant est celle sur laquelle vous êtes actuellement.

Travailler dans une branche

Nous pouvons maintenant mettre à jour notre code dans main.ts. Les données sont un JSON profondément imbriqué, mais récupérer resultTime et temperature est simple.

Si vous exécutez deno -A main.ts, vous devriez voir la température affichée dans le terminal.

import { XMLParser } from "fast-xml-parser";
 
const response = await fetch(
  "https://dd.weather.gc.ca/observations/swob-ml/latest/CWTQ-AUTO-minute-swob.xml",
);
const xml = await response.text();
const json = new XMLParser({ ignoreAttributes: false }).parse(xml);
 
const observation =
  json["om:ObservationCollection"]["om:member"]["om:Observation"];
 
const resultTime =
  observation["om:resultTime"]["gml:TimeInstant"]["gml:timePosition"];
console.log(resultTime);
 
const elements = observation["om:result"]["elements"]["element"];
type element = {
  "@_name": string;
  "@_value": string;
};
const temp = elements
  .find((d: element) => d["@_name"] === "air_temp")["@_value"];
console.log(temp);

Faisons un commit de cette mise à jour :

• git add -A
• git commit -m "Extracting temp and time"

Ce commit a été fait sur la branche temperature. La branche main, elle, n’a pas été modifiée. Pour revenir à la branche main, utilisez git checkout main.

Comme vous pouvez le constater, notre nouveau code n’est pas là ! Si jamais nous avons introduit une erreur ou un bug dans la branche temperature, nous savons que main ne l’a pas.

C’est pour cela que les branches sont si pratiques : vous pouvez travailler en toute confiance dessus. Vous pouvez tester et casser des choses sans craindre de perdre vos avancées. Elles sont à l’abri ! Les branches sont aussi très utiles quand plusieurs personnes collaborent. Chacun peut travailler sur sa propre fonctionnalité dans sa propre branche.

Fusionner des branches

Disons maintenant que nous sommes satisfaits du nouveau code dans la branche temperature. Nous voulons l’intégrer à la branche main.

Pour cela, nous devons fusionner les branches.

Assurez-vous d’être sur la branche main (git checkout main), puis exécutez git merge temperature. Cette commande va fusionner la branche temperature dans main.

Et voilà, le nouveau code est sur main ! Et vous pouvez voir le commit que nous avons fait dans temperature. L’historique a été fusionné.

Supprimer une branche

Nous n’avons plus besoin de la branche temperature. Supprimons-la avec la commande : git branch -d temperature

Comme vous pouvez le voir, la syntaxe est la même que pour créer une branche, sauf que l’option est -d au lieu de -b. Faites attention ! 😬

Maintenant, si vous exécutez git branch, vous ne verrez plus temperature.

Supprimer Git

Si, pour une raison quelconque, vous devez supprimer Git d’un projet, vous devez supprimer le dossier caché .git.

Vous pouvez le faire depuis votre explorateur de fichiers.

Ou depuis votre terminal avec cette commande : rm -fr .git

Mais vous devez être extrêmement prudent en l’utilisant. Cette commande supprime tout de manière récursive. Elle pourrait effacer l’intégralité de votre ordinateur. Assurez-vous d’être dans votre projet et vérifiez bien ce que vous tapez.

Conclusion

Félicitations ! Vous avez appris les commandes Git les plus importantes :

• git init pour démarrer un nouveau dépôt Git
• git add -A pour suivre les fichiers
• git commit -m "Un message" pour enregistrer le projet
• git revert commitID pour annuler un commit
• git branch -b ma-nouvelle-branche pour créer une nouvelle branche
• git checkout ma-nouvelle-branche pour changer de branche
• git merge ma-nouvelle-branche pour fusionner des branches
• git branch -d ma-nouvelle-branche pour supprimer une branche

Ces huit commandes couvrent 95 % de vos besoins quotidiens.

Bien sûr, notre exemple ici était assez simple. Les choses peuvent devenir plus complexes quand plusieurs personnes travaillent en même temps sur différentes branches, et des conflits peuvent survenir. Mais cela devrait suffire pour bien démarrer votre aventure avec Git !

Au fait, Git fonctionne très bien avec tous les fichiers texte, mais vous pouvez aussi suivre des images, des vidéos, et bien plus encore !

Et un dernier conseil : faites des commits fréquents et partez toujours du principe que vos messages sont publics. On ne sait jamais quand on devra demander de l’aide à un collègue ! Et si vous travaillez sur un projet en code ouvert… eh bien, tout le monde verra vos commits ! 😅

Git, c’est super, mais jusqu’à présent, tout reste sur notre ordinateur. Dans la prochaine leçon, nous parlerons de GitHub, qui permet de stocker votre code dans le cloud, gratuitement !