Méthode de travail avec Git, GitHub et Gitkraken

Dans cet article, je vous propose une méthode pour versionner votre code à l’aide de Git, GitHub et Gitkraken. Le but sera de n’utiliser aucune commande de Git et de structurer votre développement pour gagner en efficacité et réduire les erreurs de manipulation.

Préparation de l’environnement GitHub

La première étape se passe au niveau de GitHub. Il vous faut déjà vous créer un compte si vous n’en avez pas !

Nous allons donc créer un nouveau repository

Si vous n’avez pas de version payante de Gitkraken, il vous faudra laisser le repository en public.

Le readme.md vous permettra d’une part d’expliquer le projet et d’autre part de donner les consignes d’installation.

Après validation, le projet est ainsi créé avec la branche principale main.

Installation de Gitkraken

Gitkraken est un client git permettant de réaliser toutes les actions de git sans passer par les lignes de commandes. Il permet d’avoir un rendu visuel des différentes branches.

Vous pouvez le récupérer à cette adresse :

https://www.gitkraken.com/download

Une fois l’application installée, il faudra vous connecter dessus. Je vous conseille d’établir la connexion avec Github

L’avantage de procéder ainsi est qu’une relation sera présente entre GitHub et Gitkraken. En appuyant sur le bouton, vous allez être redirigé vers votre navigateur

Il vous faut appuyer sur le bouton continue authorization et le message suivant s’affichera. il peut également vous demander votre mot de passe GitHub.

Maintenant que cette étape (à ne faire qu’une fois) est réalisée, nous allons pouvoir cloner notre repository GitHub en appuyant sur le bouton Clone a repo.

Récupération du repository GitHub

L’interface suivante est découpée en 3 parties. Dans la première, on sélectionne Clone, à partir de GitHub.com. Et enfin, on défini le répertoire local qui accueillera notre repository (Where to clone to) et on sélectionne dans la liste le repository à cloner (Repository to clone). Et on clone le repo!

A ce niveau, j’ai le repository distant et le repository en local de synchronisé.

D’ailleurs, le fait que le repository soit synchonisé est visible sur la partie centrale, au niveau de la branche main, vous avez 2 icônes. 1 icône représentant l’ordinateur signifie que la branche main est bien en local et l’autre icône représentant votre gravatar correspond au fait que la branche est présente sur GitHub.

Création de la branche Dev

La méthode que je vous propose est donc le feature branching. Je vais créer une branche par feature, par fonctionnalité ou étape de notre projet.

Pour faciliter l’utilisation de Git je vais vous imposer quelques règles :

• Ne jamais faire de commit sur la branche main qui correspond à la partie stable de notre projet, c’est à dire l’application ou le site web en production
• Créer une branche dev qui sera la branche à partir de laquelle nous allons tirer nos branche feature
• Ne jamais faire de commit sur cette nouvelle branche dev
• N’avoir qu’une seule branche feature active à la fois
• Merger une branche feature si et seulement si la fonctionnalité est totalement développée et vérifiée soit à partir de validator comme le w3c soit à partir de tests unitaires et fonctionnels

Donc je vais commencer par créer la branche dev soit la branche de développement tirée à partir de main.

Faire un clic droit dans la partie centrale sur main et cliquer dans le menu contextuel sur create branch here et la nommer dev.

Comme on le constate sur l’illustration, la branche dev n’et présente qu’en local. Nous allons donc l’envoyer sur GitHub en faisant un clic droit dessus et en appuyant sur push et en validant avec submit.

Sur Gitkraken, je peux contrôler visuellement que les deux premières branches sont sur le repository local et distant.

Utilisation du feature branching

Je vais maintenant créer la première branche de feature qui généralement se nomme structure dans mes projets. En effet, c’est la branche où je plante le décor de mon projet. Par exemple, pour des projet sous Symfony, je procède à l’installation de Symfony dans ce répertoire et je fais les premiers paramétrages globaux comme l’ajout du .gitignore. Dans notre exemple, je vais juste faire une création d’un fichier index.html avec la structure html, installer SASS et faire le paramétrage du package.json. Je traiterais SASS dans un autre article.

Dans cette exemple, je vais aussi utiliser le fichier .gitignore. Le but de se fichier est d’exclure des fichiers et répertoires des commit.

J’ai créé mes fichiers pour préparer mon projet, ma structure est finalisée et je n’ai pas d’erreur au w3v html validator

Je complète mon fichier readme.md au fur et à mesure

Maintenant, je vais ajouter l’ensemble de ces fichiers dans la branche structure en faisant un commit à partir de Gitkraken.

Si je regarde Gitkraken de plus près, j’ai une zone qui s’est affiché au dessus de ma branche structure.

Si je clique sur //WIP, une fenêtre s’affiche sur la droite :

Cette fenêtre se compose de 3 zones :

• La zone du haut présente les fichiers que vous allez pouvoir commiter. Vous pouvez soit tous les commiter en une fois en appuyant sur le bouton stage all changes soit sélectionner les fichiers que vous voulez.
• la zone staged files (0) affiche les fichiers présents dans le commit
• et enfin la zone commit message avec le nom du commit et sa description

Dès que j’appuie sur le bouton Commit changes to 8 files, j’ai le commit qui apparait en local

Et je push mon commit pour qu’il soit sur GitHub

Ma première Pull Request sur GitHub (PR)

Maintenant que j’ai terminé ma branche structure, je vais effectuer une Pull Request (PR) à partir de GitHub. Dans le langage Git, je vais faire un merge de la branche structure vers la branche dev.

Donc à partir de GitHub, je clique sur le l’onglet Pull Requests puis sur le bouton New Pull Request.

kjh

Je vais comparer la branche structure à la branche dev et appuyer sur Create pull request.

Maintenant, j’appuie sur Merge pull request.

Ensuite on confirme en appuyant sur Confirm Merge.

Sur Gitkraken, je me positionne sur la branche dev en double cliquant dessus.

et nous allons faire un pull rebase. L’option rebase se trouve au niveau de la liste des pull.

Et au final, j’obtient avoir un graphique identique à l’image ci-dessous

Conclusion

En conclusion, a chaque fois que vous allez tirer une branche de dev, elle contiendra toutes les branches précédentes. Vous allez pouvoir ainsi ajouter des features ou des sections de pages.

Une fois toutes les features réalisées, il faudra faire une dernière pull request de la branche dev vers la branche main.