Conseils, services, ingénierie en informatique. Mise en place de solutions technologiques, et support, pour les entreprises.

Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

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 :

  1. -quand le fichier a été modifié
  2. -qu'est-ce qui a été modifié
  3. -pourquoi il a été modifié
  4. -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

 

git select components

 

Next

 

git windows command prompt

 

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 "Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."

 

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
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        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
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        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
commit 06abfaee6e88f041d1c2e83b96d053c8af71e803 (HEAD -> master)
Author: loic billet <Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.;
Date:   Wed Jul 26 19:32:55 2017 +0200

    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
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        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 <Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.;
Date:   Wed Jul 26 20:07:36 2017 +0200

    modification de index.html avec un h2

commit 7f72ee854f4a5898b81922d9be9532f8ee06b994
Author: loic billet <Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.;
Date:   Wed Jul 26 19:57:53 2017 +0200

    modification de index.html en couleur rouge

commit ba8d2857f7c73dd1097cc8fc86705af3eb07d7e1
Author: loic billet <Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.;
Date:   Wed Jul 26 19:52:58 2017 +0200

    modification de index.html

commit 06abfaee6e88f041d1c2e83b96d053c8af71e803
Author: loic billet <Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.;
Date:   Wed Jul 26 19:32:55 2017 +0200

    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
On branch nouvelle_branche
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        tour-eiffel-paris-france.jpg
        "ultingit.fr\357\200\276"

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 commit --message "ajout image git tour-eiffel-paris-france.jpg"
[master c073ed7] ajout image git tour-eiffel-paris-france.jpg
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 tour-eiffel-paris-france.jpg

 

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:

git merge branch master

 

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