Partage ton code source avec Git et Github

Introduction

Hey salut, bienvenue dans ce tutoriel sur Git et Github. Aujourd'hui, je vais t'expliquer comment partager ton code (ton projet) avec d'autres personnes en utilisant Git.

Pour commencer, je vais te mettre en situation, tu travailles sur un projet et tout va bien jusqu'à ce que tu rencontres un bug (ça arrive toujours), tu passes quelques jours dessus, tu fais le tour des forums et toujours aucune solution, tu rencontres alors une personne sur internet qui te demande de lui partager ton code source (si ce n'est pas un projet top secret bien sûr), comment tu fais dans ce cas? Disons que la personne qui veut t'aider se trouve en Guinée et toi au Maroc.

1. Tu copies ton projet sur un disque amovible, tu trouves une personne qui voyage pour la Guinée (s'il n'y a plus de confinement) ou un DHL et tu le lui envoie
2. Tu compresses ton projet, puis tu lui envoies un mail en espérant que le fichier compressé n'est pas très lourd

Ce sont deux possibilités pour partager ton code source. J'avoue que la première solution est plutôt hard, on va donc l'éviter. La deuxième solution peut marcher et est moins hard, mais je la trouve moins pratique et trop contraignante.

Comment faire alors, c'est là qu'intervient Git et Github.

Alors, Git?

Git est un système de gestion de version libre et open source conçu pour gérer tout type de projet, du plus petit au plus grand avec rapidité et efficacité. — Site de Git

Ceci est la définition donner sur le site de Git. Si c'est ta première fois, tu dois sûrement te demander ce qu'est un "Système de Gestion de Version"?

Pour faire simple, un système de gestion de version (SGV) va nous permettre de suivre l'évolution de notre code source, de savoir quel fichier a été modifié il y a 2 jours, qui est-ce qui a effectué ces modifications et pour qu'elles raisons. Le SGV va donc nous permettre de travailler à plusieurs sur un même projet tout en évitant les conflits entre les fichiers de notre projet.

Git étant un système de gestion de version, il va nous permettre de suivre l'évolution de notre code source, mais pour notre cas (partager ton code source pour obtenir de l'aide), il n'y a aucune utilité, ou du moins on ne l'a pas clairement spécifiée.

Comment est-ce que Git va donc pouvoir nous aider? On l'a dit le SGV (Git en l'occurrence) va nous permettre de travailler à plusieurs sur un même projet, ce qui veut donc dire que quand tu m'auras partager ton code source, on sera deux à travailler dessus, je vais de mon côté, sur mon ordinateur modifier ton code pour corriger le bug (ou en ajouter un nouveau) et te le renvoyer, de ton côté, tu verras les fichiers que j'ai modifier (grâce à Git), si le bug est corriger tu vas continuer, sinon tu pourras annuler toutes mes modifications (toujours grâce à Git) ou aussi rajouter d'autres bugs et me le renvoyer, je ferais de même et ainsi de suite et on pourra même trouver une troisième personne pour nous aider à corriger nos bugs ou en ajouter d'autres, tu as compris le principe.

Jusque-là je t'explique comment on pourra travailler ensemble une fois que tu m'auras partager ton code source, parce que ce n'est toujours pas le cas là. Alors comment faire pour que moi j'accède à ton code source? Il faut le mettre sur un serveur sur lequel on a tout les deux accès, ça peut être ton ordinateur, un serveur que tu prends chez OVH ou encore Github.

Et Github donc?

Github est un service d'hébergement basé sur le cloud qui permet d'héberger des dépôts Git.

Concrètement, Github est le serveur sur le quel nous allons déposés nos projets versionnés avec Git.

Pour répondre donc à la question comment faire pour que moi j'accède à ton code source, il faut le mettre sur Github, mais avant il faut d'abord versionner ton projet avec Git et nous allons voir comment.

Créer un dépôt Git

Un dépôt Git (repository) est tout simplement un projet versionné avec Git. Avant de créer un dépôt Git, il faut d'abord installer Git. Pour cela, rends toi sur la page téléchargements de Git et en fonction de ton OS, choisi l'installable qu'il te faut et installe le tout simplement. Une fois l'installation terminer, pour vérifier que tu l'installation est effective, ouvre un terminal et exécute la commande:

$ git --version

Tu dois alors avoir la version de Git installer comme ceci:

$ git --version
git version 2.25.1

J'ai actuellement la version 2.25.1 de Git, la version peut être différente chez toi.

Maintenant que nous avons installer Git, on peut créer notre premier dépôt Git.

Comme nous l'avons déjà dit, un dépôt Git, c'est un projet versionné avec Git. Il faut donc ouvrir un terminal et te rendre dans ton projet avec la commande cd:

$ cd /chemin/vers/ton/projet/

Je vais pour mon cas utiliser un projet qui s'appelle hello_git et qui contient juste trois fichiers:

Pour faire de ce projet un dépôt Git, c'est à dire donc le versionné avec Git, il faut exécuter la commande:

$ git init
Initialized empty Git repository in /home/orion/Documents/kaherecode/hello_git/.git/

Après avoir exécuter la commande, un message est afficher qui dit qu'un dépôt Git vide a été initialisé dans le dossier .git.

Sur le message, Git nous parle d'un dossier .git dans notre projet dans lequel un dépôt vide a été initialisé, Git a donc créer un dossier .git dans notre projet:

Quand je fais un ls -a pour afficher tout le contenu de mon projet, on peut bien voir le dossier .git. Mais c'est quoi ce dossier au juste?

Bon d'abord, il sert à dire que ce dossier est un dépôt Git et c'est dans ce dossier que Git va garder toutes les informations sur votre projet: l'historique des modifications, les branches, ... Nous n'allons pas nous attarder sur ce dossier, parce qu'on aura pratiquement pas besoin d'y toucher.

Maintenant que nous avons un dépôt Git, nous avons un début. Il faut ensuite dire à Git quels fichiers il doit traquer (suivre), il ne va pas le deviner au fait. Pour suivre un fichier, il faut utiliser la commande:

$ git add fichier1 fichier2 *.html

La commande git add prend donc un ensemble de fichier en paramètre, moi je veux juste ajouter trois fichiers, je vais donc faire:

$ git add index.html style.css app.js

Pour trois fichiers, ça va. Mais si tu as un projet Symfony ou Laravel par exemple, ça te fait beaucoup trop de fichier et tu ne pourras pas les lister un par un. Mais tu peux ajouter tout les fichiers du dossier courant en faisant:

$ git add .

Le problème avec cette commande pour un tout nouveau projet, c'est que tu risques de rajouter des fichiers qui ne doivent pas être suivi par Git, c'est le cas des fichiers qui contiennent les configurations avec des valeurs secrètes comme le mot de passe de ta base de données ou une clé d'API (fichier .env par exemple). Pour éviter cela, il faut donc rajouter un fichier qui s'appelle .gitignore.

Ignorer des fichiers avec .gitignore

Le fichier .gitignore est le fichier qui va nous permettre de dire à Git de ne pas suivre ces fichiers ou dossiers. Nous allons donc rajouter un fichier qui s'appelle .gitignore (oui le . fait partit du nom du fichier) à la racine du projet et définir les fichiers et dossiers à ignorer. Si tu utilises un framework comme Symfony ou Django ou peu importe, ce fichier y est sûrement défini.

.env
node_modules/

Dans le fichier .gitignore, je demande à Git d'ignorer le fichier .env et le dossier node_modules/. Tu peux retrouver les formats disponible sur le site de Git. Il faut ensuite suivre le fichier .gitignore avec:

$ git add .gitignore

Maintenant que nous avons ajouté les fichiers que nous voulons à Git, il est temps de faire un commit.

Faire un commit

Tu as maintenant initialiser un dépôt Git, modifier les fichiers que tu souhaites et tu les a ajouter à Git avec git add. Il faut ensuite enregistrer les changements que tu as effectuer, je ne parle pas là de faire un Ctrl+S dans ton éditeur, mais d'enregistrer tes changements avec Git, et pour cela il faut faire un commit.

Pour faire un commit, il faut utiliser la commande git commit:

$ git commit -m 'Premier commit'

J'utilise l'option -m pour spécifier le message du commit, avec Git, on ne peut pas faire un commit sans spécifier de message. Il faut donc dans ce message expliquer pourquoi tu as fais des changements. Ici j'utilise juste le message " Premier commit" pour dire ce que ça veut vraiment dire quoi: C'est notre premier commit (Yesssssssss!!!). Git nous montre ensuite les fichiers qui ont été modifiés, le nombre de lignes ajoutés et supprimés.

Jusque là, ton code est toujours sur ton ordinateur, moi je n'y ai pas encore accès, il faut donc le publier sur Github.

Créer un dépôt sur Github

Pour commencer connecte toi sur https://github.com, si tu n'as pas de compte, crées en un, c'est gratuit.

Clique ensuite sur le bouton avec l'icône du plus sur la barre de navigation avant ta photo de profil puis sur New repository. Tu arrives sur une page qui ressemble à ceci (avec un fond en blanc peut être):

Dans le champ Repository name, saisi le nom de ton projet (sans espace et pas de caractères accentués), moi je vais l'appeler hello-git comme mon projet en fait, la description n'est pas obligatoire, il faut ensuite choisir une portée pour ton projet:

• Public - tout le monde pourra voir ton projet (plus de 50 millions de personnes qui utilisent Github)
• Privé - tu contrôles qui peut voir ton projet en envoyant une invitation à chaque personne

Je vais dans mon cas créer un dépôt public avec le nom hello-git, clique ensuite sur le bouton Create repository pour valider la création du dépôt.

Une fois terminer, tu auras une interface comme ici qui te montre les premiers pas pour publier ton projet sur ce dépôt:

Pour commencer, il faut choisir le mode HTTPS, à moins que tu es déjà une clé SSH configurer sur ton ordinateur, pour cela, dans la section "Quick setup — if you've done this kind of thing before", clique sur HTTPS, juste en dessous du titre.

Ensuite, recherche la section ou il est écrit "...or push an existing repository from the command line", c'est la quatrième section en partant du haut, la deuxième en partant du bas, l'avant dernière section quoi.

Copie les lignes une par une puis tu les exécutes sur ton ordinateur, dans le dossier de ton dépôt Git:

$ git remote add origin https://github.com/kaherecode/hello-git.git

Cette ligne ajoute le dépôt qui se trouve sur le serveur https://github.com/kaherecode/hello-git.git comme étant notre dépôt distant et nous l'appelons origin. Ce lien est différent dans ton cas, il faut donc copier le lien qui t'a été donner par Github.

Puis la deuxième ligne:

$ git branch -M main

Cette ligne modifie la branche par défaut de master à main, et enfin la troisième ligne:

$ git push -u origin main

Cette ligne va permettre d'envoyer notre code à la source origin (https://github.com/kaherecode/hello-git.git) sur la branche main.

Dès que tu exécutes la commande, le terminal te demande tes identifiants Github avant de valider le push, rentre ton username (ou email), valide avec Entrer, puis saisi ton mot de passe (il est cacher, il ne va donc pas s'afficher) et valide avec Entrer, si tout est OK, tu as un message comme sur l'image ci-dessous qui dit que ton code a été publié avec succès:

Retourne sur le navigateur, sur la page du dépôt puis actualise la page et là biiimmmmmm, tu as ton projet en ligne.

C'est bon tu peux être fier de toi et même pousser un cri de joie si tu veux, moi je suis content que tu sois arriver à ce point. A partir de maintenant, tu peux copier le lien sur la barre d'url, me l'envoyer par message et moi je pourrais accéder à ton code, le cloner sur mon ordinateur et ajouter ma part de bugs (ou t'aider à corriger ton problème).

Cloner un dépôt Git

Quand tu m'enverras le lien de ton dépôt Git, je vais cloner ton dépôt sur mon ordinateur local, je vais donc télécharger le code source de ton projet sur mon ordinateur.

Pour cloner un dépôt, il nous faut l'url de ce dépôt et utiliser la commande git clone comme ceci:

$ git clone https://github.com/kaherecode/hello-git.git

Cette commande va créer un dossier hello-git dans mon dossier courant et y mettre tout les fichiers du projet hello-git. Alors tu l'as surement compris, le nom du dossier vient du nom du dépôt, si je veux cloner dans un dossier différent du nom du dépôt, il faut que je renseigne le nom du dossier comme ceci:

$ git clone https://github.com/kaherecode/hello-git.git mon-projet

Cette fois-ci, le dépôt hello-git sera cloné dans le dossier mon-projet. A partir de là, je vais pouvoir modifier le code, ajouter mes modifications puis faire un push.

Envoyer son code avec git push

Nous avons tout à l'heure pu envoyer notre code sur la source origin (https://github.com/kaherecode/hello-git.git) en utilisant la commande:

$ git push -u origin main

Et tu continueras à utiliser ce code pour publier ton code à une différence près, tu ne vas plus utiliser l'option -u. L'option -u (--set-upstream en format long) est utiliser pour la première fois pour demander à Git d'ajouter une référence à cette branche.

Pour envoyer ton code, il faut donc utiliser la commande git push comme ceci:

$ git push origin main

Le push consiste à juste envoyer ton code que tu as en local sur une source distante (Github, Serveur personnel, Gitlab, Bitbucket, ...).

Récupérer le code avec git pull

Alors maintenant que j'ai fini mes modifications et que j'ai push sur le dépôt Github, comment toi tu fais pour récupérer ces modifications? En faisant un git pull. Le pull permet d'aller chercher le code sur une branche (main) d'une source distante (origin) et le fusionne avec ton code en local. Le pull ressemble beaucoup au push, mais la direction dans laquelle le transfert des fichiers est effectués est opposée: dans le cas d'un push, les fichiers sont envoyés de ta machine vers la source distante, et le pull c'est de la source distante vers ta machine locale. La commande git pull pour récupérer le code d'une source origin sur la branche main est la suivante:

$ git pull origin main

S'il n'y a aucun conflit, c'est à dire que nous n'avons pas ensemble modifier une même partie du code (la même fonction par exemple), tout se passe sans problème, sinon Git va te le signaler et il va te revenir de mettre de l'ordre dans tout ça.

Workflow avec Git

J'aimerais terminer ce tutoriel qui est devenu super long (quoi tu ne l'as vraiment pas ressenti? j'avoue que moi si), en te présentant juste un workflow que tu vas tout le temps utiliser avec Git.

Quand tu as ton projet, tu vas commencer par modifier ton code, essai de coder une tâche spécifique comme gérer la connexion d'un utilisateur par exemple, cela te permettra de facilement trouver le message pour ton commit. Ensuite tu vas ajouter tes fichiers avec git add, tu ne vas pas le faire un par un parce que ça risque d'être compliqué, il faut donc dès le début mettre un fichier .gitignore pour exclure tout les fichiers et dossiers dont tu veux pas ajouter à Git, ainsi tu pourras faire un git add . pour ajouter tous les fichiers que tu as modifier. Puis tu feras un git commit, pour enregistrer tes modifications sur Git, le message doit expliquer ce que tu as fais dans ces modifications, avec un message "ajout de la fonctionnalité connexion avec email/mot de passe" par exemple, ce sera plus facile pour toi et les membres de ton équipe de comprendre ce qui a été fait dans ce commit. Puis tu vas refaire la même chose, modifier le code, ajouter les fichiers et faire un commit et quand tu auras fini ta journée de travail, tu vas faire un push pour envoyer tes modifications sur une source distante qui peut être Github ou le serveur de votre entreprise.

Voilà, j'espère que tu as maintenant les bases pour partager ton code source sur internet. Il y a encore plein de choses à apprendre avec Git et Github, on pourrait passer des soirées à en parler. Tu peux donc t'y mettre en commençant à versionner tes projets avec Git, c'est la seule façon pour toi de vraiment découvrir une bonne partie des possibilités de cet outil. N'hésite pas à nous rejoindre sur le chat discord de Kaherecode pour en discuter. À plus tard sur Kaherecode!