Git & Github for beginners
Depuis 2014 j'utilise Git et Github pour gérer mes projets de développement d'applications mobiles smartphones
Sur les dernières pages, on utilisait la version on-line SAAS, aujourd'hui on va revenir aux bases et installer GIT sur notre PC serveur en local
En 3 ans j'ai vu quelques évolutions, c'est l'occasion de faire le point.
Pour créer des applications en équipe il est impératif de maitriser GIT. Voici un petit tutorial à suivre pour être au top!
Les curieux que vous êtes avez sûrement entendu parler de Github, un réseau social un peu différent de Facebook où ça parle de code. Github est basé sur git, un utilitaire développé par le créateur de Linux, et qui joue un rôle central dans tout projet de développement : celui de système de gestion des versions. Maîtriser git, c'est adopter une bonne pratique de développement qui changera à jamais votre vision de l'Informatique.
En 2h, nous allons installer git, créer un premier dépôt, et nous initier à la manipulation de versions de fichiers. Nous verrons ensuite le système de branches et introduirons la notion de flux de travail. Une fois les bases acquises, nous créerons un compte Github, et commencerons à collaborer. Pour finir, nous utiliserons le service Github Pages pour déployer notre premier site Internet via git !
OBJECTIFS
• Prendre en main git
• Collaborer avec d'autres développeurs grâce à git
• S'initier à la contribution Open-Source sur Github
• Héberger son site statique personnel sur Github Pages
PRÉ-REQUIS
Venir avec son ordinateur et un éditeur de texte (SublimeText). Si vous avez Windows, installez git.
Si vous avez déjà tapé une commande dans un terminal, c'est mieux mais ce n'est pas obligatoire !
On passe beaucoup de temps à modifier des fichiers, le sauvegarder, les remodifier, on est une génération qui travaille beaucoup avec les ordinateurs. Du coup il faut gérer ce workflow de fichiers. On va avoir un fichier avec plein de modifications dans le temps. On se retrouve avec plein de fichiers partout, on se les envoie par emails, il y en a partout: on a besoin d'un outil qui permet de tracker les modifications, savoir qui a fait les modifications, etc.
On veu donc savoir :
- -quand le fichier a été modifié
- -qu'est-ce qui a été modifié
- -pourquoi il a été modifié
- -qui a fait la modfication
Git, pour faire du versionning
Google doc, Dropbox font ça, SVN aussi, mais Git c'est mieux et c'est gratuit!
Installation de Git. Download for Windows 64 bits par exemple, Git-2.13.3-64-bit.exe
Next
Next
Use Open SSL library Next
Checkout windows Style, commit Unix-style line endings, Next
Use MinTTY, Next
Enable file system caching, Next
Enable Git Credential manage, Next
Voilà, Git est installé
Une question? Posez-la ici
3 commandes à taper au début
git --version
git version 2.13.3.windows.1
-> GIT est bien installé!
git config --global user.name "loic billet" (remplacer par son prénom nom)
git config --global user.email "Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo."
Comme ça on va pouvoir savoir qui a effectué les modifications et comuniquer à l'équipe
Dans le terminal, on va créer un dossier
Physiquement je suis au niveau du repertoire "home" de git, je vais taper "mkdir" comme make directory pour créer un repertoire
"cd nouveau projet" pour entrer dans ce projet
Je vais créer un fichier
"touch index.html" pour les utilisateurs de mac
ou "notepad.html" pour les utilisateurs de Windows
On peut lancer aussi git bash pour avoir l'environnement GIT
MINGW64 ~/nouveau_projet
Voilà, on a un nouveau répertoire avec un fichier indes.html à l'intérieur
On va implementer la gestion du versionning avec "git init" pour qu'il commence à versionner le repertoire
Initialized empty Git repository in C:/Users/iloveparis/nouveau_projet/.git/
Pour vérifier que Git a bien versionné les fichiers:
GIT status
|
$ git status Initial commit Untracked files: index.html nothing added to commit but untracked files present (use "git add" to track) |
On va demander à GIT d'ajouter le fichier index.htm dans le versionning
Un commit c'est comme une photographie
Je demande à GIT de prendre en compte ce fichier et je vais faire ensuite un commit
git add index.html
GIT status
|
$ git status Initial commit Changes to be committed: new file: index.html |
En développement, tout est fichier texte. Git se moque du langage, que ce soit du C, du C++, du C#, du JAVA, du JAVASCRIPT, de l'Objective-C, Ruby, ... Git prendra en charge le langage
Quand je commit git enregistre que j'ai modifié le fichier avec le pourquoi que j'ai mis dans le message:
Je prends le snapshot, la photographie de mon état:
git commit --message "rajout du fichier index"
| $ git commit --message "rajout du fichier index" [master (root-commit) 06abfae] rajout du fichier index 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html |
1 fichier a changé, logique.
Un commit ne prend en compte que les modifications qui ont été faite après l'ancien commit
Git prend un ensemble de photos successive et enregistre tout en versionnant.
Pour voir l'état:
git log
|
$ git log rajout du fichier index |
J'édite le fichier index.html avec notepad, notepad++, sublimetext ou atome..
Je vais créer une page htm qui dit bonjour. Je commence à taper:
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
dans mon navigateur j'obtiens ceci:
Bonjour tout le monde!
Je vais ajouter "bonjour tout le monde" encadré par des balises <h1>
J'ouvremon index.html dans un navigateur et je vois bien ma page web
Je vais voir ce qui se passe avec git:
git status
"modified: index.html"
je vois que index.html a été modifié, MAIS Git n'a pas pris en compte la modification
git add index.html
git commit --message "modification de index.html"
| $ git commit --message "modification de index.html" [master ba8d285] modification de index.html 1 file changed, 10 insertions(+) |
Je modifie le index.html pour ajouter un peu de couleur avec un style="color: red" dans le h1
dans mon navigateur j'obtiens ceci:
Bonjour tout le monde!
git status
|
$ git status modified: index.html |
Je vois que le index.html a été modifié
Je veux savoir ce qui a été modifié, je tape:
git diff
| $ git diff diff --git a/index.html b/index.html index 04f062d..1e3499d 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,6 @@ <title></title> </head> <body> - <h1>Bonjour tout le monde!</h1< + <h1 style="color: red" >Bonjour tout le monde!</h1< </body> </html> \ No newline at end of file |
Je vois sur "+" que le h1 a été modifié par rapport à "-" son état d'avant
J'accepte la validation
git add index.html
$ git commit --message "modification de index.html en couleur rouge"
| $ git commit --message "modification de index.html en couleur rouge" [master 7f72ee8] modification de index.html en couleur rouge 1 file changed, 1 insertion(+), 1 deletion(-) |
git status
| $ git status On branch master nothing to commit, working tree clean |
Je veux me rappeler des modifications qui ont été faites sur ce fichier
git log
Je selectionne la clé qui m'interesse et je la colle, ce qui veut dire:
Git donne moi la différence entre maintenant et ce commit:
| $ git diff ba8d2857f7c73dd1097cc8fc86705af3eb07d7e1 diff --git a/index.html b/index.html index 04f062d..1e3499d 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,6 @@ <title></title> </head> <body> - <h1>Bonjour tout le monde!</h1< + <h1 style="color: red" >Bonjour tout le monde!</h1< </body> </html> \ No newline at end of file |
Je rajoute un petit paragraphe dans mon fichier html
idem
git add index.html
$ git commit --message "modification de index.html avec un h2"
dans mon navigateur j'obtiens ceci:
Bonjour tout le monde!
bienvenue
Ah oui au fait, avec Github Desktop tout se fait en graphique pour ceux qui sont allergiques à la ligne de commande.
git log
|
Author: loic billet <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.; modification de index.html avec un h2 commit 7f72ee854f4a5898b81922d9be9532f8ee06b994 modification de index.html en couleur rouge commit ba8d2857f7c73dd1097cc8fc86705af3eb07d7e1 modification de index.html commit 06abfaee6e88f041d1c2e83b96d053c8af71e803 rajout du fichier index |
Là on était sur la branche "master"
Quand on travaille en équipe chacun va créer sa branche. On va pouvoir choisir quelle branche intégrer ou pas.
Une fonctionnalité = une branche
Pour les développeurs Aginle, une user storie = une branche.
Je pars de là où je suis, je diverge, je vais faire toutes les modifications possibles, et rien ne va appraitre sur la branche pricipale . Exemple, je crée une nouvelle branche pour créer un sous titre <h2>Bienvenue</h2>
Pour créer une nouvelle branche, c'est très simple:
git branch nouvelle_branche
Où est-ce que je suis? Montre moi toutes les branches
git branch
| $ git branch * master nouvelle_branche |
Je veux passer sur la nouvelle branche:
git checkout nouvelle_branche
Je vais rajouter une petite image dans mon index.html
<img src="/tour-eiffel-paris-france.jpg">
Mon code devient:
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1 style="color: red" >Bonjour tout le monde!</h1> <h2>bienvenue!</h2> <img src="/tour-eiffel-paris-france.jpg"> </body> </html> |
Mon navigateur affiche maintenant
Bonjour tout le monde!
bienvenue!
<Photo de la tour Eiffel>
git status
|
$ git status modified: index.html Untracked files: tour-eiffel-paris-france.jpg no changes added to commit (use "git add" and/or "git commit -a") |
|
$ git add tour-eiffel-paris-france.jpg iloveparis@eiffel69 MINGW64 ~/nouveau_projet (nouvelle_branche) |
git checkout master
Pour revenir dans la branche master
La branche master n'a pas été modifiée. C'est la branche nouvelle_branche qui a été modifiée.
On ne peut pas retourner dans le master tant qu'on n'a pas commité.
git add index.html
git add tour-eiffel-paris-france.jpg
$ git commit --message "ajout image git tour-eiffel-paris-france.jpg"
Ne pas changer de branche tant qu'on n'a pas commité: on part avec un git status propre. On ne finit pas sa journée de travail avec des modifications qui n'ont pas été commitées.
Je vois que les modifications que j'ai fait dans "nouvelle_branche" n'ont pas eu d'impact dans "master"
Git a donc 2 photos différentes, 2 branches différentes, dans lesquelles il y a 2 versions.
Maintenant que je sais que ma photo est bien, l'intéret est de réunir les 2 branches. On va "merger".
Je vais retourner dans ma granche master, en commitant en prennant les modifications des 2 branches
git checkout master
Quelle est la différence entre la master et la nouvelle branche?
git diff nouvelle_branche
Git, merge moi cette branche
git merge --no-ff nouvelle_branche
Git a fait un commit et il les a placé dans "master"
Je retourne sur ma page web, j'ai bien les changements de "nouvelle_branche" qui se sont répercutés dans la branche "master"
Et voilà sur mon navigateur:
Comme "nouvelle_branche" et "master" sont identiques, je dois supprimer la branche "nouvelle_branche"
git branch -D nouvelle_branche
Deleted branch nouvelle_branche (was d15844e).
git branch
Elel a disparu
git branch feature
git checkout feature
git diff
git add
git checkout master
non mais le client ne veut pas de la nouvelle fonctionnalité finalement, je vais laisser tomber la branche feature
git branch -d feature
etes-vous sur? Si oui git branch -D feature
git branch -D feature
Git a supprimé la branche feature et tous les commits de "feature" ont été supprimés.
Voilà, nous savons maintenant gérer des montées de version en local, créer des branches, les commiter, les supprimer. C'est la base de Git.
Git vers GitHUB, Gitlab, Bitbucket ?!
Pour l'instant j'ai travaillé seul, je vais devoir maitenant travailler en équipe pour que chacun implémente une feature dans une branche
En 2008, 3 ans après Git en 2003, GitHUB voit le jour, en ligne, et permet de travailler à plusieurs
Aller sur github.com et créer un identifiant.
Se créer un porfil avec l'adresse email que l'on a renseigné au début
Bitbucket et Gitlab sont 2 autres sites identiques, mais concurrents
On va créer un repository "remote"
Si besoin, installer une clé SSH qui permet de lier ce que l'on a en local avec ce qu'il y a à distance.
Une clé SSH par compte.
Paramétrer le ssh en local:
je me connecte ensuite à github, je donne e nom à ce nouveau repository "nouveau_projet"
L'open source est privilégié sur Github.
Public= gratuit, privé = payant
remote add origin https://github.com/nouveauprojet
origin est le nom du repertoire en ligne
git push origin
On synchronise ce qu'il a en local avec le site distant
1 développeur travaille sur une feature = 1 branche
Github permet de partager du code entre développeurs
Je peux joindre un projet open source, créer une branche, travailler sur la branche, et commiter pour apporter ma pière à l'édifice du projet.
Les étoiles sont comme les likes facebook
onglet "fork" permet de prendre le code et de le copier sur son ordinateur (pour essayer de faire des modifications).
Ensuite les commit, ce sont les gens qui ont fait des modifications et mergé.
"issues" = problèmes que l'on rencontre
"branchs" = nombre de branches ouvertes, c'est à dire que si 32 modifications sont en cours par 32
"pull request" = enregistrer mes modifications dans la branche SVP
L'idee c'est d'etre sur ma branche master
je cree une branche new_feature
je rajoute une modification, la ville Paris
git diff
un mot a été jouté
git add index.html
git commit --message "rajoute de la ville"
git push origin new_feature
je pousse ma branche new_feature sur mon repository online
en ligne, je vois une nouvelle branche new_feature qui est apparue
Par rapport à Git, Github compare les lignes de codes et surligne pour montrer la modification
Je créé une pull request pour merger la branche dans le master
git push orgin master
Si des modifs ont été faites en ligne, je vais les tirer, c'est l'inverse du push
git pull origin master
git sweep = suppression de toutes les branches qui ont été mergées, pour que tout soit propre
Et voilà!
Liens intéréssants
https://fr.slideshare.net/HubSpot/git-101-git-and-github-for-beginners