Ricardo Do Vale

Tutoriels

Page Acceuil nouveau site Garderie Les P'tits Loups

Apprendre GitHub Desktop

Introduction

Bonjour et bienvenue dans cette formation consacrée à GitHub Desktop.

Alors qu’est-ce que GitHub Desktop ?

C’est une application vous permettant de travailler avec Git et GitHub sur votre ordinateur via une application vous permettant d’avoir ainsi une interface graphique plutôt que d’utiliser le terminal ou la console.

Et oui… tout le monde n’est pas un fan du tapage de code sur fond noir 😉.

Il existe d’autres applications du même type telles que GitKraken ou SourceTree

Attention Prérequis !

Cette formation n’abordera uniquement l’utilisation de GitHub Desktop. En aucun cas, celle-ci vous apprendra comment configurer et travailler avec Git et GitHub.

Pour cela, je vous conseille de suivre une formation dédiée, que vous trouverez sur internet. Toutefois, vous pouvez suivre la formation de Marc G Gauthier, auteur du cours sur Git et GitHub sur OpenClassrooms intitulé « Gérer son code avec Git et GitHub ».

L’application

Installation

Github Desktop existe pour Mac et Windows. Pour installer Github Desktop, commencez par vous rendre à l’adresse du site de GitHub Desktop.

Sur la page d’accueil vous pouvez voir un bouton Download avec la version et le système d’exploitation sur lequel vous travaillez (sélection automatique).

  1. Cliquez sur Download.
  2. Décompressez l’archive .zip.
  3. Placez l’application dans le répertoire Applications (Mac) ou suivez les étapes d’installation (Windows).
  4. Ouvrez l’application.
Fenêtre avec un aspect visuel sobre et clair.

Configuration

Lorsque vous ouvrez l’application, un affichage basique est présent. On passe alors par la configuration.

Attention !!!

Veuillez avoir pris note de vos paramètres git config. Il s’agit de votre pseudo et adresse e-mail que vous avez saisis lors de l’installation de Git.

Mac

  1. Allez sur Github Desktop à coté du menu Préférences.
    Une fenêtre s'affiche comme celle-ci.
  2. Préférences Général
    Préférences Compte
    Préférences Options
  3. Sous "Général", cochez la case "1" pour qu’a l’ouverture de GitHub Desktop le dernier repository de travail soit ouvert.
  4. Cochez la case "2" pour que chaque repository soit ouvert dans une fenêtre différente si vous le souhaitez.
  5. Sous "Acount", saisissez votre login GitHub dans le champ "3" et votre mot de passe dans le champ "4".
  6. Sous "Avancé", saisissez votre nom d’utilisateur Git dans le champ "5" puis l’adresse e-mail dans le champ "6".
  7. Cliquez sur le bouton "7" pour installer les outils de commande. Nous reviendrons dessus au chapitre des repositories.
  8. Cochez la case "8" si vous souhaitez envoyer un rapport au développeur en cas de bug de l’application.

Les outils de ligne de commande permettent d’intégrer dans vos repositories les lignes permettant d’accéder au repository que vous créez.

Windows

Données Git
  1. Cliquez sur l’icône en forme de roue dentée en haut à droite.
  2. Choisissez "options".
  3. Allez sur "Compte".
  4. Cliquez sur "Add Account".
  5. Saisissez votre nom d’utilisateur GitHub et le mot de passe. Si vous avez un compte "Entreprise", saisissez les données à cet endroit puis cliquez sur "Login".
Menu Paramètres
Choix du type de compte
Préférences Options
Données Git
  1. Cliquez sur l’icône de votre avatar en haut à droite.
  2. Choisissez "Settings".
  3. Cliquez sur "Email".
  4. Copiez l'adresse e-mail que vous avez choisi dans votre configuration Git locale.
  5. Retournez à GitHub Desktop puis cliquez sur l’icônedans l'angle supérieur droite puis allez à nouveau sur "Options".
  6. Sous configuration git, saisissez le nom de votre configuration Git ainsi que l’email.
Compléments d’options
  1. Account: Ajouter ou supprimer un compte GitHub ou GitHub Enterprise.
  2. Git config: Tapez les informations de votre configuration Git.
  3. Clone path: Spécifiez le répertoire par défaut pour les nouveaux "repositories".
  4. Default shell: Choisissez le shell Git que vous souhaitez utiliser avec GitHub Desktop.
  5. Privacy: Activez ou désactivez l'envoi de données d'utilisation anonymes au développeur.

Presentation de l'interface

Barre d'outils

  • Création / Ajout / Clone de repository.
  • Afficher / Masquer barre latérale.
  • Création de branche.
  • Choix de la branche.
  • Détails des Commit, à gauche, et historique à droite.

Barre latérale Gauche

  • Repository publié sur GitHub.
  • Repository d’un autre développeur (Fork).
  • Repository en local, une fois publié prendra l’icône publié sur GitHub.

Barre d'historique

Barre d'historique
  1. Effectuer un merge de la branche, ex: merge de la branche sur laquelle vous travaillez vers la branche "Master.
  2. Affiche uniquement l’historique de la branche sur laquelle vous êtes positionné.
  3. Ce bouton prend 2 possibilités, soit un nuage avec le mot "Publish" dans le cas où votre projet ou branche n’aurait pas été publiée, soit l’affichage de 2 flèches avec le mot "Sync" pour effectuer une synchronisation avec votre compte GitHub.
  4. Diagramme des branches disponibles de votre projet. Cliquez sur le ▼ à coté du nom de la branche pour pouvoir choisir.
  5. Branche sur laquelle vous travaillez.
  6. Point de Commit. Cliquez dessus pour afficher les détails dans la fenêtre en dessous. Les commit qui n’ont pas étés synchronisés avec votre compte GitHub apparaîtront sous forme de cercle. Il suffit donc de cliquer sur "Sync" pour que celui-ci apparaisse sous forme de point.
  7. Point de Merge. Cliquez dessus pour afficher les détails dans la fenêtre en dessous.
  8. Point de Merge. Cliquez dessus pour afficher les détails dans la fenêtre en dessous.

Fenêtre Principale

Liste d’historique
  1. Titre, date et nom du contributeur de l’événement. commit ou merge.
  2. Nombre de fichiers ayant subit des mo difications. Cliquez dessus pour voir la liste de ceux-ci.
  3. Liste des changements
  4. Informations sur le commit, merge ou pull Request.
  5. Nom du fichier modifié. Ceux-ci s’affichent les un sous les autres par défaut. Si vous cliquez sur le point "2" dans la "liste d’historique", vous pouvez les voir indépendant.
  6. Affichage des lignes contenant le code modifié, résultat initial ou supprimé en rouge clair. En rouge foncé, sont affichés les portions de code concernés.
  7. Tout comme précédent, cela affiche le code modifié, résultat final ou ajoutés.

Les Repositories

Ajouter un Repository

  1. Cliquez sur l’icône, puis choisissez "Add".
  2. Cliquez sur "Choise" et choisissez le dossier que vous voulez importer. Attention, le dossier doit être décompressé au préalable.
  3. Un nouveau repository apparaîtra sur la barre latérale en local avec cette icône.
  4. Vous verrez en haut une information contenant le nombre de changements non commités.
  5. Saisissez un nom de commit (ex: Commit init - Master) et une description puis cliquez sur "Commit to Master".
  6. Liste des changements
  7. Une fois le commit fait, cliquez sur le boutonen haut à droite.
  8. Une fenêtre apparaîtra. Saisissez alors les informations demandées, Nom du repository, description, choisissez le compte où vous souhaitez effectué ce dépôt (ex: compte personnel ou un compte de groupe auquel vous appartenez) et cliquez sur "Publish repository".
  9. Votre repository est alors publié et l’icôneapparait. Votre repository se trouve désormais sur GitHub.

Attention !!!

Veuillez avoir pris note de vos paramètres git config. Il s’agit de votre pseudo et adresse e-mail que vous avez saisis lors de l’installation de Git.

Créer un Repository

  1. Cliquez sur l’icône, puis choisissez "Create".
  2. Choisissez le dossier parent de votre repository.
  3. Tapez le nom de votre repository (ex: "site-ghithub-desktop", vous verrez pourquoi dans quelques minutes).
  4. Cliquez sur "Create Repository".
  5. Un nouveau repository apparaîtra sur la barre latérale en local avec cette icône.
  6. Une fois le repository créé, cliquez sur le bouton en haut à droite.
  7. Une fenêtre apparaîtra. Saisissez alors les informations demandées, Nom du repository, "site-ghithub-desktop".
  8. Tapez la description (ex: exercice github-desktop), choisissez le compte où vous souhaitez effectué ce dépôt (ex: compte personnel ou un compte de groupe auquel vous appartenez) et cliquez sur "Publish repository".
  9. Votre repository est alors publié et l’icôneapparait. Votre repository se trouve désormais sur GitHub.

info !!!

Lorsque nous avons configuré GitHub Desktop, sous "Avancés" nous avons installé les lignes de commande. Cette installation permet d’introduire les informations d’accès à votre repository via les outils comme la console ou le terminal que vous voyez lorsque vous cliquez sur le repository se trouvant sur votre compte GitHub.

Cloner un Repository

Cloner depuis son compte
  1. Cliquez sur l’icône, puis choisissez "Create".
  2. Une liste déroulante apparait.
  3. Choisissez le repository que vous souhaitez importer.
  4. Cliquez sur le bouton "Clone (non de votre repository)".
  5. Choisissez le dossier dans lequel vous désirez importer votre repository
  6. Votre repository se trouve désormais aussi sur votre ordinateur.

info !!!

La procédure ci-dessus est aussi valable pour les répositories dont vous faites partie en tant que contributeur.

Cloner un repository d’un autre utilisateur
  1. Sur la page du repository que vous souhaitez importer, commencez par cliquer sur.
  2. Cliquez sur le bouton.
  3. Cliquez sur "Open in Desktop" en bas à gauche du menu qui s’ouvre.
  4. L’application GitHub Desktop s’ouvre et une barre de progression apparait.
  5. Désormais, vous trouverez sur la barre latérale le repository avec l’icône.

Attention !!!

Veuillez ne pas oublier de cliquez sur "Fork" avant de les cloner sinon un message d’erreur apparaîtra dès que vous souhaiterez effectuer une synchronisation du projet avec votre compte.

Exercice pratique

Preparation

Ça vous dit un exercice pratique ?

Si vous lisez ces prochaines lignes je supposé que oui. C’est parfait!

Création d’un autre compte GitHub.

Cet exercice est utile pour les chapitres à venir. En effet, nous allons par la suite faire un "Fork" de ce projet vers notre compte principal, faire des changements et surtout, cela nous permettra, au final, de faire un "Pull Request".

Pour commencer, nous allons créer un autre compte utilisateur GitHub. Rassurez-vous, vous pourrez toujours le supprimer par la suite. En attendant, créez ce compte en utilisant "pseudodev". En gros, le même compte avec le même mot de passe mais le "dev"en plus.

Une fois fait, déconnectez-vous de votre compte standard et connectez-vous avec votre compte "dev".

  1. Créez un repository appelé "site-github-desktop", ou autre si vous voulez.
  2. Pour simplifier et avoir déjà un point de départ, commencez par importez un projet Bootstrap basique sur http://getbootstrap.com et choisissez "Download Bootstrap".
  3. Téléchargez le fichier "Bootstrap theme", renommé-le "index.html" et ajoutez-le au dossier Bootstrap que vous venez de télécharger.
  4. Je vous propose maintenant de reprendre notre repository que nous avions créé. Commencez par cliquer dessus, vous constaterez qu’il est vide. C’est très bien, nous allons y ajouter des fichiers.
  5. Copiez le contenu du dossier "Bootstrap" que vous aviez téléchargé et dans lequel vous aviez intégré le fichier de thème que vous aviez renommé "index.html" et collez-le dans le répertoire du repository "site-ghithub-desktop". Vous pouvez faire un clic droite sur le repository et choisissez d’ouvrir le dossier.
  6. Vérifiez les liens vers les fichiers css et js puis contrôlez votre page sur un navigateur. Pour plus de facilité, utilisez un CDN.

Les Commits

Créer un commit

  1. Sur la barre de menu, vous constaterez que dans la barre d’outils il est mentionné "17 Uncommitted Changes"
  2. Dans la fenêtre principale, dans la liste des changements, vous pourrez saisir votre premier commit en bas.
  3. Saisissez le titre de votre commit (ex: Commit init - Master) et une description (ex: Initialisation du projet). Je vous propose de faire un commit init avec le nom de la branche car cela sera plus facile à suivre sur le graphique de votre repository sur GitHub.
  4. Cliquez sur "Commit to Master".
  5. GitHub Desktop vous place alors sur "Historique" dans la barre d’outils, et vous verrez apparaitre un cercle bleu sur la "barre d’historique" ainsi que sur la "liste des changements".
  6. Si vous cliquez sur le chiffre à droite de la "Liste des commits" anciennement "Liste des changements", vous pourrez voir tous les fichiers indépendamment.
  7. Cliquez surafin de publier votre commit.
  8. Votre commit est alors publié et le bouton "Publish" est remplacé paret le cercle bleu se transforment point et disparait dans la "Liste des changements".
  9. Ça y est ! Vous avez fait votre premier commit avec GitHub Desktop. Rassurez-vous, c’est pas fini. Nous allons faire pleins de changements, mais avant, nous allons voir notre fichier "index.html" dans le navigateur.

    Si la mise en page n’est pas correcte, veillez contrôler que vous êtes bien sur le bon CDN. Regardez sur http://getbootstrap.com si vous voulez être sur d’avoir les bons CDN, et placés, au bon endroit.

  10. Créez un fichier "mes-styles.css" à l’intérieur de votre dossier CSS et liez le à votre fichier "index.html".
  11. Donner un titre à votre commit et une description puis cliquez sur "Commit to Master", mais ne cliquez pas sur le bouton.
  12. Changez encore le titre "h1" en y mettant "Mon essai" sans effectuer de commit pour l’instant.

Naviguer dans ses commit

Petite explication sur ce que vous voyez.

En haut sur la barre d’outils vous voyez le nombre de fichiers modifiés non commités. Ces informations disparaissent à chaque commit sauf si vous désélectionnez des fichier, dans la fenêtre principale à gauche en cliquant sur les petite coche à coté de ceux-ci.

Dans la fenêtre principale à gauche la liste des fichiers modifiés, à droite les lignes concernées et les changements effectués. En rouge se qui est supprimé et en vert ce qui est ajouté. Dans le cas d’une modification partielle, la couleur sera plus foncé sur l’élément modifié.

Dans la "barre d’historique", cliquez sur les points et cercles affichés et regardez la fenêtre principale. Vous voyez la liste des commits et à droite les changements apportés au code. Cliquez sur chacun d’eux et regardez ce qui se passe. Dans le commit init, vous voyez un chiffre avec une flèche, cliquez sur celle-ci, vous verrez alors la liste des fichiers modifiés. Pour ce qui est des points et cercles affichés sur la "Barre d’historique", les points représentent des commits publiés sur GitHub et les cercles sont ceux qui ne l’ont pas été. Vous pouvez maintenant cliquer sur.

Supprimer les modifications d’un commit

Imaginons que vous n’avez pas trouver pertinent le changement de votre "h1". Comment inverser le commit ? C’est simple.

  1. Cliquez sur le commit dont vous souhaitez annuler les changements, dans notre cas, annulons le changement effectué sur le "h1".
  2. À droite dans la fenêtre principale, vous verrez les informations de votre commit. Parcourez-les pour voir ce qu’elles représentent.
  3. Sur la ligne du bas, vous avez à droite une icône.
  4. Cliquez sur "Revert this commit".
  5. Vous verrez alors un nouveau commit apparaitre avec le nom du commit concerné précédé du mot "Revert".

Voilà! C’est fini… pour l’instant. Gardez-donc se projet au chaud pour le prochain chapitre.

Les Branches

Créer une branche

Restons sur notre cher petit site c’est un bon point de départ. Nous allons maintenant créer notre première branche que nous allons appeler "mise-en-page" ou nous allons simplement créer une mise en page HTML correcte en épurant la page.

Première Branche

  1. Cliquez sur le boutonpour créer une branche.
  2. Tapez le nom de la branche sans faire d’espace sinon vous aurez un message d’erreur.
  3. En dessous, choisissez la branche de départ pour votre travail. Dans notre cas, seul la master est disponible.
  4. Vous constaterez alors que le boutonc’est transformé à nouveau en.
  5. C’est normal. Vous avez créé une nouvelle base de travail, celle-ci et tous ces éléments ne sont pas encore sur GitHub.

  6. Vous êtes immédiatement placé sur votre nouvelle branche ou vous voyez alors son nom sur la barre d’outil au lieu de "Master", et sur la "Barre d’historique", vous voyez le cercle du présent en bleu traitillé placé en bas avec une fourche juste le précédent.
  7. Faite un "Commit init - mise-en-page" pour débuter et cliquez sur le bouton "Publish".
  8. Contrôlez que vous êtes bien sur la branche "Mise-en-page" et ouvrez la page "index.html" dans votre éditeur de texte.
  9. Commencez par supprimer quelques éléments de la page sans oublier de faire un commit après avoir supprimé un élément. Ex: Les labels, les badges, barres de progressions, le slider,… juste de quoi épurer un peu la page.
  10. Une fois fini, faites un commit avec un titre, à vous de choisir, soyez pertinent.
  11. Maintenant, déplacez le "well" en haut juste après le "jumbotron" et faites un autre commit.
  12. Une fois fait, enregistrez le fichier et "synchronisez" votre travail avec GitHub.

2ème branche

  1. Créez une nouvelle branche que vous appellerez "formulaire" en prenant la branche "Master" comme point de reference et puis publiez-la sans revenir en arrière. En effet, sur la "Barre d’historique" la branche "Master" est toujours affichée en tant que comparaison.
  2. Faites un commit init de la branche comme précédement.
  3. Faites un footer avec un petit formulaire, commitez-le et "synchronisez" avec votre compte GitHub.

Nabiguer dans les Branches

Afin de rendre se travail intéressant et pertinent, je vous propose maintenant de revenir sur votre compte GitHub principal. Lorsque vous changez de compte, le repository sur lequel nous avions travaillé reste toujours visible. Néanmoins veillez le supprimer de GitHub Desktop. Sachez que le dossier reste toujours sur votre disque local.

En le supprimant, nous simuleront ainsi le clone d’un projet que vous n’avez pas sur votre disque.

Branches clonées (Fork)

  1. Allez sur votre compte GitHub et cherchez le repository de votre compte "pseudodev".
  2. Cliques sur le boutonen haut à droite. Cela vous permettra de tirer le projet sir votre compte afin que vous puissiez contribuer à ce projet et avoir aussi les permissions.
  3. Choisissez le repertoire ou vous désirez le déposer.
  4. Vous trouverez maintenant ce repository avec une icône.
  5. Cliquez sur ce repository et parcourez ses branches et commits. Vous remarquerez ainsi que les branches faites sur le compte "dev" sont recopiées sans le "pseudo/" devant.
  6. Utilisez les boutons "Wiew Branch" pour voir les branches en détail.

Branches créées

  1. Commencez par créer une branche que vous nommerez "galerie" et prenez la branche "mise-en-page" comme point de départ.
  2. Faites un commit init comme précédemment et publiez-la.
  3. Téléchargez un sytème de galerie sur GitHub au format .zip et décompressez-le.
  4. Si vous ne savez pas lequel choisir, je vous suggère de prendre "mimcz/svgallery". Il contient déjà un dossier images et il est facile de le mettre en place.

  5. Copiez le dossier "images" à la racine du repository, puis faites déjà un commit.
  6. Allez ensuite dans le dossier "bundle" et copiez les fichiers CSS et JavaScript dans votre projet.
  7. Liez les 2 fichiers à votre page "index.html" et copiez le script d’initialisation tout en bas de la page avec l’identifiant "#gallery" situé juste avant la fermeture de la balise "body".
  8. Enregistrez tout, faites un dernier commit et regardez le résultat dans un navigateur.
  9. Si vous désirez faire un ou 2 petits commits supplémentaires en rapport avec la galerie, faites-donc et synchronisez tout.

Merger les Branches

Maintenant, nous allons aborder les "Merge" suivis d’un "Pull Request" au chapitre suivant.

  1. Pour commencer, placez-vous sur votre branche "mise-en-page".
  2. Aérez davantage la page, pour cela, supprimiez le superflu. Laissez uniquement la Top-Bar, le jumbotron et bien entendu, la galerie.
  3. Enregistrez votre travail, quittez votre éditeur te texte et fermez la fenêtre de votre navigateur.
  4. Cliquez sur le ▼ à coté du nom de la branche dans la "Barre d’historique" et choisissez "galerie".
  5. Vous verrez alors juste au dessus un bouton avec "Update from galerie". Cliquez dessus, un merge se fera important ainsi le contenu de "galerie" dans la branche "mise-en-page".

info !!!

N’hésitez pas à faire plusieurs branches et merges pour vous entrainer.

Partager son code

Effectuer un Pull Request

Maintenant nous allons partager notre code. Nous allons pour cela, merger tout notre travail sur la branche "Master" qui est la votre.

Attention !!!

Ne confondez pas vos branches avec celles des autres contributeurs. Celles qui appartient à un autre contributeur est précédé de son pseudo. Ex: dans mon cas, la master d’origine contiendra "Patacodev/Master".

  1. Pour commencer, placez-vous sur votre branche "Master".
  2. Faites des merges de vos branches sur votre "Master".
  3. Cliquez sur le bouton.
  4. Donnez un nom à votre "Pull Request".
  5. Choisissez vers quelle branche vous souhaitez effectuez votre "Pull Request". A droite il s’agit de votre branche et à gauche, une liste déroulante contenant la liste des branches du projet.
  6. Donnez une description dans la zone de texte dédiée à cet effet.
  7. Contrôlez que le symbole du "Pull Request" est vert. Si cela n’est pas le cas, regardez vers quelle branche vous effectuez votre requête pour voir si toutefois, vous vous seriez trompé de branche. Inutile de se faire un "Pull Request" à soit même.
  8. Cliquez sur le bouton "Send Pull Request".
  9. Un message de félicitations apparait avec un lien vous permettant d’accéder au "Pull Request".

Et voilà ! Votre collaborateur recevra un e-mail mentionnant un "Pull Request" et pourra ainsi le consulter, voire, le valider.

Attention !!!

La fenêtre de Pull Request n’est pas un tchat. Et oui… ça aurai été trop beau. Heureusement les bon vieux e-mails fonctionnent bien.

Nous voici donc au terme de cette formation. J’espère quelle vous aura été utile et vous souhaite tout de bon pour la suite de vos développements web.

A bientôt !