Mise en œuvre de Git avec Gitlab L’objectif de cette activité est de vous familiariser avec l’utilisation du logiciel Git pour suivre/tracer les évolutions d’un mini-site web au cours de son développement. Dans cet mise en œuvre de Git, vous serez également amenés à utiliser la plateforme de développement collaborative GitLab de façon à stocker/diffuser sur internet les différentes versions de votre mini-site web. Mise en situation En parcourant les dépôts logiciels publics présents sur le site Framagit qui est une plateforme de développement collaborative (ou “forge logicielle”) basée sur le logiciel Gitlab , vous tombez sur un projet public auquel vous souhaiteriez contribuer. Ce projet est un mini-site web dont l’objectif est de vous informer de votre adresse IP publique (par exemple celle de votre box internet et non celle de votre ordinateur). Or, l’apparence actuelle du site web dans sa version actuelle est plus que minimaliste. Vous souhaiteriez donc l’améliorer et proposer à son auteur de publier votre nouvelle version. La procédure que vous allez suivre va donc consister à : “forker” (i.e. dupliquer) le dépôt logiciel original sur un nouveau dépôt hébergé sur Framagit “cloner” en local sur votre ordinateur le dépôt "forké" pour pouvoir travailler dessus apporter des modifications au projet puis les “commiter” (i.e. les enregistrer) au fur et à mesure de façon à disposer non seulement de plusieurs versions apportant chacune son lot d’améliorations mais également de versions intermédiaires sur lesquelles vous pourrez revenir en cas de fausse route lors du développement “pusher” (i.e. enregistrer sur le dépôt Framagit. Voir (→ voir git push ) votre dépôt local de façon à l’archiver et/ou le rendre accessible à d’autres développeurs proposer enfin un “merge request” à l’auteur original du site web afin qu’il intègre dans son dépôt Framagit la nouvelle version du projet que vous lui proposez. La mise en place d’un processus séquentiel de développement est plus communément appelé un “workflow” (flux de travail en français). Chacun peut définir son propre workflow mais celui décrit ci-dessus correspond à un workflow de duplication qui est pris en charge de base par Gitlab/Framagit et qui est bien adapté aux projets Open Source. Une explication plus détaillée de ce workflow est disponible sur Faire une pull request . Cet article vise une autre forge logicielle — Bitbucket — mais s’applique également à Framagit. Travail à faire 🖮 Travail n° 1 Installation/Configuration de Git L’activité est prévue pour un poste de travail Windows mais peut très bien se faire depuis un autre système d’exploitation. Seule la procédure d’installation de Git sera différente. Voir par exemple Installation de Git pour les détails d’installation sur divers systèmes d’exploitation. Téléchargez la dernière version de Git for Windows installer Après avoir lancé le programme d’installation, suivre les étapes de l’assistant d’installation. Les options par défaut sont assez adaptées à la plupart des utilisateurs. Ouvrez une invite de commande (ou Git Bash si, durant l’installation, vous avez choisi de ne pas utiliser Git à partir de l’invite de commande Windows). Exécutez les commandes suivantes pour configurer votre nom d’utilisateur et votre adresse e-mail Git, en remplaçant le nom d’utilisateur et le mail par les vôtres. Ces informations seront associées à tous les commits que vous créez : $ git config --global user.name "Luc Skywalker" $ git config --global user.email "luc.skywalker@alliance-rebelle.org" 🖮 Travail n° 2 “Fork” et “clonage” du dépôt d’origine Créer un compte sur Framagit et s’y connecter Un compte Framagit nécessite d’être approuvé avant de pouvoir s’y connecter et cette approbation peut nécessiter plusieurs jours. Rechercher le projet nommé “tuto-git” et le “forker” Ouvrir une console Git bash dans le répertoire de travail de votre choix “Cloner” ensuite en local depuis Git bash le dépôt d’origine avec la commande git clone suivie de l’adresse du dépôt “forké” (quelque chose du genre https://framagit.org/<votre-nom-d-utilisateur>/tuto-git.git). un répertoire tuto-git devrait désormais être présent dans votre répertoire de travail. Exemple $ git clone https://framagit.org/luc.skywalker/tuto-git.git Visualiser le fichier index.html présent dans le répertoire tuto-git dans un navigateur web et analyser le code source (index.html et js/ipify.js) pour comprendre son fonctionnement. Le script javascript utilise l’API Ipify pour récupérer l’adresse IPv4 publique de l’ordinateur. 🖮 Travail n° 3 Création d’une nouvelle branche Vous voulez créer un nouvel axe de développement dans le projet "`forké`" pour y apporter vos modifications Consulter Utiliser des branches ou Les branches avec Git pour vous familiariser avec le concept de “branche” de développement dans _Git Depuis la console Git bash, se positionner dans le répertoire du projet “cloné” $ cd tuto-git Créer une nouvelle branche dans votre dépôt que vous nommerez develop et s’y rendre avec la commande : $ git checkout -b "develop" 🖮 Travail n° 4 Évolution n°1 : Ajout d’un fichier de style Vouv voulez à présent améliorer l’apparence du site en le stylisant avec dess règles CSS. Créer un répertoire /css à la racine du site et y ajouter un fichier style.css Ajouter des règles CSS au fichier css/style.css et l’intégrer à la page HTML (→ <link rel="stylesheet" href="css/style.css">) de façon à obtenir un rendu équivalent à ce qui est proposé ci-dessous : Propositions de règles CSS : Fixer la couleur d’arrière plan du body Centrer le titre Arrondir les coins de la zone d’affichage de l’adresse IP et fixer sa couleur d’arrière plan Centrer l’adresse IP Inspecter les modifications relevées par Git $ git status Indexer les modifications apportées (passer sous contrôle de version le répertoire css/ et le fichier qu’il contient) $ git add css/ Faire un commit dans le dépôt Git local pour y stocker cette nouvelle version du site web $ git commit -m "Amélioration de l'affichage par ajout d'un fichier de style" Inspecter l’historique du dépôt avec $ git log Une vision graphique de cette historique est accessible depuis le menu Repository Visualize All Branch History de l’outil Git GUI 🖮 Travail n° 5 Évolution n°2 : Choix IPv4 / IPv6 Vous voulez maintenant faire évoluer le site de façon à ce que l’utilisateur puisse choisir le type d’adresse IP publique à afficher : l’IPv4 ou l’IPv6. Modifier les fichiers index.html et ipify.js de façon à offrir le choix à l’utilisateur de visualiser soit son adresse IPv4 publique soit son adresse IPv6 publique. Se référer à <select> pour se remémorer comment faire une liste déroulante en HTML Se référer à l’API Ipify pour savoir comment récupérer l’adresse IPv6. Dès que le site est opérationnel, indexer (→ git add) puis “commiter” (→ git commit) les modifications en veillant à rédiger un message de commit qui montre bien ce qui a évolué depuis la dernière version “Pusher” le dépôt local sur le dépôt Framagit avec la commande git push -u origin develop S’assurer sur l’interface web de Framagit que les modifications apportées sont bien présentes 🖮 Travail n° 6 Évolution n°3 : Essai nouveau design Vous voulez expérimenter un nouveau en utilisant le framework Bootstrap . Comme vous n’êtes pas certain d’adopter à terme ce design, vous décidez de recréer une branche de développement propre à cette nouvelle fonctionnalité (→ feature). Créer une nouvelle branche dans votre dépôt que vous nommerez feat-bootstrap Commencer dans cette nouvelle branche à faire évoluer votre mini-site web de façon à utiliser le framework Bootstrap et d’aboutir à un design semblable à ce qui est illustré ci-dessous : Indexer puis “Committer” les modifications dans la nouvelle branche dès que l’apparence du mini-site vous convient et qu’il est, bien entendu, opérationnel Supprimer le fichier css/style.css désormais inutile et “committer” sur la nouvelle branche “Merger” les 2 branches feat-bootstrap et develop (→ voir git merge ou Les branches avec Git Fusion (merge) ) et “tagger” avec un “Tag annoté” (→ voir git tag ) cette version avec le tag “version finale” “Pusher” cette version finale sur votre dépôt Framagit $ git push origin --tags (1) 1 option --tags nécessaire pour que le tag soit enregistré dans le dépôt distant Enfin, se rendre sur le dépôt d’origine (→ https://framagit.org/claude.defrance/tuto-git ) pour effectuer un “merge-request” — aussi appelé “pull-request” — (→ voir Creating merge requests ) de façon à demander à l’auteur du site d’origine d’intégrer vos modifications 🞄 🞄 🞄 🎯 Fiche de séquence Git