Workshop 1

Let's GIT started !

Installer Git et se faire un compte GitHub

Let's GIT it !

Installer Git

Téléchargez le en cliquant ici

Pour tous

Lorsque vous installez attention à indiquer votre éditeur de texte favori ou notepad en tant qu'éditeur au lieu de Vim. Sinon vous allez être perdus ^^'

⚠️ C'est à cette étape là qu'il faut changer VIM par votre éditeur de préférence

Pour windows

Vérifiez bien d'avoir Git Bash et Git CMD à la fin de l'installation. Ce sont deux émulateurs de terminal qui vous permettront d'utiliser Git. Nous utiliserons Git Bash de façon à ce que tout le monde ait un environnement similaire.

Se créer un compte sur GitHub

Maintenant créez-vous un compte sur GitHub. En utilisant votre compte ISEP vous pourrez bénéficier de toutes les fonctionnalités de GitHub.

Le terminal...

... et les lignes de commandes

Qu'est-ce que le terminal

Il y a très longtemps il n'y avait pas d'interface graphique sur les PC : pas de souris, pas d'image, pas de fond d'écran débile, ... À la place on donnait des commandes à l'ordinateur. Un peu comme indiquer le chemin à quelqu'un : aller droite, tourner 90 degrés, ... Sauf que l'ordinateur a sa propre syntaxe. On peut encore utiliser ces commandes sur tous les ordinateurs via un terminal. Sur Windows le Terminal se nomme Powershell.

Quelques commandes

pwd

Vous permet de savoir dans quel dossier vous vous situez

ls

Vous permet de connaitre les fichiers et les dossiers qui sont stockés où vous vous situez.

cd <chemin vers un dossier>

Grâce à cette commande vous pouvez vous déplacer d'un fichier à un autre

mkdir <nom de dossier>

Créer un dossier avec le nom inscrit

Vos premières commandes git

Vos premiers pas dans le monde des grands !

Git aussi a ses propres commandes

Pour Windows

Utilisez le programme Git Shell. Cela vous permettra d'utiliser les mêmes commandes que sur Linux ou Mac.

Configurons git

Git a besoin de connaître votre identité afin de permettre à vos collaborateurs de savoir par qui ont été réalisés des modifications données.

git config --global user.name "username"

Détermine le nom qui sera affiché pour vos versions.

git config --global user.email "[email protected]"

Détermine l'email qui sera affiché pour vos versions.

Gérer un projet

git init

Démarre un projet git à l'endroit où vous executez la commande.

Cela va créer un fichier caché nommé .git qui va permettre de stocker l'historique et d'autres informations.

git status

Vous permet de connaître le statut de chaque fichiers du projet.

git add <nom de fichier>

Permet d'ajouter le fichier indiqué à la staging area.

Vous pouvez aussi indiquer le nom d'un dossier pour ajouter tous les éléments contenus dans le dossier à la staging area. En particulier, il est possible d'utiliser le caractère . (point) pour ajouter tous les fichiers.

git commit -m "Message de commit"

Créer un nouveau commit (une sorte de nouvelle version à ajouter à l'historique). Le message de commit vous permettra de savoir à qui correspond une version.

git log

Affiche les derniers commits, leur identifiant, la date de création, le message de commit, ...

git checkout <identifiant du commit>

Permet de revenir à une autre version, un autre commit.

Exercice 1

Let's GIT it done !

Se rendre dans le dossier où nous souhaitons créer un projet (Documents par exemple)
Créer un dossier avec la commande mkdir
Se déplacer dans le dossier créé
Initialiser un répertoire git
Créer un fichier HTML
L'ajouter à la staging area
Créer un commit dont le nom sera: init
Modifier cette page pour représenter toute votre créativité
Créer un commit avec cette page
Revenir au commit précédent

Exercice 1 - Solutions

cd chemin/vers/le/dossier
mkdir "Mon Super Dossier"
cd "Mon Super Dossier"
git init
touch index.html
git add index.html
git commit -m "init"
Je n'ai malheuresement pas la capacité de refléter votre créativitité :'(
1. git add index.html
2. git commit -m "j'ai rendu mon site tout beau :o"
1. git log
2. Copiez l'identifiant du commit précédent
3. git checkout <identifiant précédemment copié>

Travailler en équipe

Commencez à partager vos projets avec vos amis !

git clone <url vers le répertoire>

Permet de clonner/copier le répertoire à partir d'un lien, par exemple un lien GitHub.

git pull

Récupère la dernière version disponnible sur l'origin.

git push

Envoie l'ensemble des commits réalisés vers l'origin. En génnéral on utilise pull avant push afin de pouvoir gérer d'éventuels conflits.

git fetch

Réalise à la fois git pull et git push. C'est ce qui est utilisé par défaut par l'utilisateur de texte Visual Studio Code

git remote -v

Liste l'ensemble des remote de ce projet que vous avez référencés auparavant. En particulier l'orgin (qui se définit tout seul lors du clone).

git remote set-url origin <url vers l'origin>

Vous permet de définit ou modifier l'origin. Cela vous seta très utile si vous voulez mettre en ligne un projet que vous avez débuté hors ligne.

Exercice 2

Let's GIT collaborative !

Contexte

Chaque équipe de développeurs a pour mission de réaliser un site web. Ils vont pour cela mettre en place un git et utiliser github.

Consignes

Le groupe va devoir choisir son « David » qui va initialiser un repo et l’héberger sur github. Le repo devra contenir au moins un « README » et n’aura pour l’instant qu’une branche (master par défaut), et un premier commit sur cette branche.
David devra ensuite ajouter Alice et Bob en tant que collaborateurs sur le projet.
Les collaborateurs récupèreront le projet depuis « origin » afin de créer leur propre remote (en faisant un git clone par exemple)

Workshop 2

It GIT's not better !

Les branches...

... du magnifique arbre de git !

Quand est-ce qu'on utilise une branche ?

Tout le temps ! À chaque fonctionnalités à développer on créer une branche, de façon à ce qu'il n'y ai pas deux personnes qui travaillent simultanément sur une branche. Ce dernier point est très important comme vu durant le workshop.
Par défaut vous travaillez sur la branche master. Vous pouver créer autant de branches que vous le souhaitez et ces branches peuvent être créés à partir de n'importe quelle branche.

Les commandes de base pour gérer les branches

git branch -a

Liste l'ensemble des branches

git branch <nom de la branche à créer>

Créer une branche

git checkout <nom d'une branche existante>

Permet de vous déplacer d'une branche à une autre

git checkout -b <nom de la branche à créer>

Créer une branche et vous y met

git merge <nom d'une branche>

Vous permet de créer
L'option --no-ff peut être utilisé pour éviter les fast-forward (cf. StackOverflow).

git branch -d <nom d'une branche>

Supprime la branche référencée. Une fois qu'une branche n'est plus utilisée il n'est pas nécessaire de la garder.

Les branches distantes

Quelques commandes qui pourrons vous sauver la vie

git push <remote> <branche>

Permet d'envoyer une branche vers un répertoire distant, comme origin.

git push <remote> --delete <branche>

Permet de supprimer une branche d'un répertoire distant

Les bonus

Pour vous aider à aller toujours plus loin, toujours plus haut, toujours plus fort !

git log --graph

Représente l'historique des logs sous forme de graph, ce qui permet de mieux voir les branches.

L'option --oneline peut être utilisée afin d'enlever les informations superflues qui nuiraient à la bonne lecture du graph.

git show <identifiant du commit>

Équivalent valent de diff mais directement avec le parent du commit

Exercice 1

Let's GIT collaborative !

Contexte

On souhaite réaliser la page de connexion d’un site en HTML mais on ne demande pas qu’elle soit fonctionnelle.
Le chargé de projet a mit en ligne les features suivantes :

Une entête avec un logo et le nom du site et un footer avec un lien vers des une page de CGU (prendre un lorem ipsum pour les CGU). (FT-01)
Un lien vers un formulaire d’inscription au site depuis la page de connexion et un formulaire d’inscription (adresse e-mail, pseudo, mot de passe). (FT-02)
Un formulaire de connexion sur la page de connexion (avec pseudo, mdp, validation de cgu champs obligatoires) et une redirection (lien HTML) vers une page d’accueil, qui contiendra un lien pour revenir à la page de connexion. (FT-03)

Consignes

On attribut à chaque développeur une feature. Elles sont indépendantes (c’est-à-dire qu’elle n’est pas parent d’une autre feature à ce stade du développement). Ils effectueront chacun au moins 2 commits avec des messages appropriés.
Chaque contributeur doit partir de la version 1.0 du projet qui comporte une page de connexion vide (avec le squelette d’une page html classique, prenant comme style un fichier main.css inconnu) , et un README.

Exercice 2

Let's GIT collaborative !

Contexte

La première phase de développement est terminée et on va regrouper le travail de tous les développeurs

Consignes

Toutes les branches de feature devront être mergées sur develop, l’ordre n’est a priori pas important tant que les branches de feature sont indépendantes entre-elles. L’information que les feature ont été traités sur des branches différentes devra apparaitre dans l’historique.
Résoudre les éventuels conflits en s’assurant d’inclure toutes les fonctionnalités qui étaient demandées dans l’exercice 2.
Tous les développeurs devront avoir à la fin un historique identique, qui comportera uniquement la branche master, une branche de release, et la branche develop avec toutes les features (les branches de features auront donc été supprimées).

BONUS : Merger develop sur master et mettre un tag qui correspond à la version 1.1 du site.