1. Gestion de projet et documentation#

1.1 Introduction#

La documentation m’offre une perspective générale sur l’avancement de mon travail. Avoir accès aux documents des étudiants des années précédentes est également crucial, car cela permet de trouver des solutions à différents problèmes rencontrés durant le projet et d’y puiser de l’inspiration.

Dans cette section, je vais revenir sur les différentes étapes du module 1 ainsi que les difficultés techniques rencontrées avec mon PC.

Le premier module vise à développer un site web tout en se familiarisant avec le logiciel de gestion de version “Git”. Dans ce module, ainsi que dans les suivants, les étapes suivies pour atteindre les objectifs seront documentées.

1.2 Initiation à GIT#

La première étape consiste à installer git et à le configurer sur son ordinateur.

Il faut donc commencer par installer git via ce lien. Personnellement, ayant un windows, j’ai tout simplement cliqué sur Download for Windows (encadré en rouge dans l’image ci-dessous).

Cela lancera le téléchargement d’un fichier .exe sur l’ordinateur qu’il faudra par la suite ouvrir et suivre les consignes jusqu’à arriver à install et cliquer dessus.

Par la suite, pour configurer le git, il suffit d’écrire sur son terminal git config --global user.name "your_username" suivi de git config --global user.email "your_email_address@example.com" comme présenté sur la capture d’écran ci-dessous. Git Bash peut être un terminal fonctionnel.

1.2.1 Génération de clés SSH#

GitLab utilise le protocole SSH pour assurer la sécurité des échanges entre nos fichiers locaux et le serveur distant. Ce système repose sur deux clés : une clé publique, qui peut être partagée, et une clé privée, que vous devez garder secrète.

Pour générer ces clés, lancez un terminal et entrez : ssh-keygen. Les clés seront créées et sauvegardées sur votre ordinateur, généralement dans un dossier caché. Vous pouvez accepter l’emplacement par défaut ou spécifier un autre chemin. Il est recommandé de ne pas ajouter de mot de passe pour éviter d’être sollicité à chaque opération Git.

Ensuite, copiez la clé publique (fichier .pub) et rendez-vous dans les paramètres SSH de votre profil GitLab. Collez la clé dans l’onglet “Clé SSH” et validez.

1.2.2 Copie du Repository#

Avant de commencer à modifier votre projet, il est primordial de cloner votre projet. Pour ce faire, allez sur votre site web gitlab et clonez votre projet comme présenté sur la capture d’écran suivante :

1.2.2.1 Problème de clonage#

Personnellement, lors du clonage avec ssh, un problème est survenu. Lorsque j’ouvre le terminal à l’endroit où je veux cloner mon projet et que j’écris la commande pour cloner, le clonage semble fonctionner, car ce qu’il y a sur l’image suivante apparait :

Cependant, le clonage ne s’exécute jamais, il reste constamment en chargement.

Pour régler ce problème, j’ai dû cloner la clé https à la place de la ssh, le problème avec cette clé est qu’à chaque tentative de push,… il est demandé de se connecter, cependant, à l’aide du logiciel Intellij, ces étapes sont réalisables assez rapidement. Il est possible d’installer Intellij via ce lien.

1.2.3 Commandes git#

Un dernier point important à prendre en considération avant de commencer la documentation est la liste des commandes git primordiales à connaitre. Effectivement, par exemple, lorsque des modifications vont être adoptées de manière locale, il va falloir commit ces modifications, ensuite les add et finalement les push. Cela peut paraître incompréhensible à première vue, cependant à force de les exécuter, on s’y habitue et cela devient naturel. Voici un lien vers la sheet officielle des commandes git.

Dans les images ci-dessous, j’ai mis en couleur les commandes qu’il est indispensable de connaître pour une utilisation assez basique de git.

1.3 Modification du git#

À présent que le git est installé et configuré, il est possible de commencer la partie la plus amusante, la modification du git !

1.3.1 Markdown#

Un fichier Markdown est un fichier texte utilisant une syntaxe simple pour formater du contenu. Il permet d’ajouter facilement des éléments tels que des titres, des listes, ou des liens tout en restant lisible dans sa forme brute. Ce format est souvent utilisé pour créer des documentations ou des fichiers README, et peut être converti en HTML ou d’autres formats.

Ce sont donc ces fichiers de types .md qui vont être modifié afin de servir de documentation.

1.3.2 Syntaxe MD#

Dans les fichiers .md, il est possible de jouer sur la structure du texte. En effet, par exemple pour écrire des titres/sous-titres,… il suffit d’ajouter des hashtags # au début de la ligne, pour écrire en gras, il faut écrire le mot entre deux astérix,…

Voici la sheet contenant les éléments principaux de syntaxes pouvant être modifiés : MDsheet

1.3.2.1 Importation des fichiers#

Des liens, images, vidéos,… peuvent également être ajoutés dans les fichiers MD.

Afin d’importer des fichiers, il est important dans un premier temps de placer ceux-ci dans le dossier adéquat. Effectivement, supposons que nous voulons importer une image, il faut tout d’abord l’ajouter dans un sous-dossier du dossier prénom.nom cloné sur son ordinateur. Par exemple, personnellement, dans le dossier images j’ai ajouté un dossier par module et j’y place les images que je veux ajouter sur mon site.

Par la suite, afin d’ajouter cette image dans notre fichier markdown, il est possible d’utiliser la syntaxe suivante : ![NomImageAuChoix](images/module1/nomIMAGE.jpg). Cet exemple ajouterait une image nommée nomIMAGE.jpg se trouvant dans le sous-dossier module 1 du dossier images. Entre crochet, il est possible d’écrire le nom de l’image que l’on souhaite afficher si l’image ne s’affiche pas. N’oubliez pas le !, effectivement, afin d’envoyer des liens cliquables, voici ce qu’il faut écrire dans le fichier markdown : [Nom Apparaissant dans le texte](Lien_WEB).

1.3.3 Sauver les modifications#

Après avoir modifié son fichier, il est indispensable “d’en informer” le git si l’on veut que ces modifications soient mises à jour. Si les modifications sont faites directement dans l’IDE global du git, il suffit de commit en cliquant sur Source Control présent sur la gauche, y insérer un message de commit et cliquer sur le bouton commit and push. Cela va automatiquement push votre dernière version sur le git.

Si vous avez cloné le git de manière locale (conseillé de le cloner ainsi) sur votre ordinateur et que vous modifiez sur Visual Studio, Intellij ou autre, lorsqu’une modification dans le fichier .md est effectuée, il sera indispensable dans un premier temps de git add, suivi d’un git commit-m “” en complétant le message du commit entre les apostrophes et enfin git push. Cela enverra vos modifications locales au git global. Voici l’enchainement typique de ces commandes :

Cependant, il n’est pas nécessaire d’effectuer ces commandes dans un terminal, effectivement, par exemple, Intellij que j’utilise permet de réaliser cela de manière assez simple.

Premièrement, Intellij possède une interface assez intuitive et simple d’utilisation, comme nous pouvons constater sur l’image ci-dessous. Nous pouvons prévisualiser à quoi ressemble le module en direct de nos modifications.

De plus, après avoir effectué les modifications voulues, il est possible de commit (et push) les modifications sur le git sans passer par le terminal. Il suffit de cliquer sur commit présent du côté gauche de l’éditeur, sélectionner les fichiers modifiés que l’on souhaite commit et cliquer sur Commit and Push. (Sans oublier d’écrire un message du commit pour s’y retrouver plus facilement plus tard)

Personnellement, ayant dû cloner mon projet en mode https avant validation du push, Intellij me demande d’écrire un Token. Ce dernier peut être obtenu sur le site Gitlab. En allant sur les paramètres de profil, une section Access tokens est présente.

Il faut cliquer dessus, ajouter un Token et le copier-coller sur Intellij. Personnellement, afin que le token soit toujours valide, je n’ai pas défini de durée particulière à ce dernier.

1.3.4 Gestion des images et de l’espace de stockage#

Il est important de comprendre que Markdown a pour fonction de gérer du texte principalement, il faut donc être vigilant lors d’ajouts d’images.

La taille des images doit être faible, effectivement, le site créé peut très rapidement devenir assez lourd et difficile à lancer.

1.3.4.1 Format#

Pour ce faire, premièrement, il faut essayer de s’assurer que les images soient sous format jpg et non png,… Si l’image n’a pas le format voulu, il est assez simple de la convertir avec des converters accessibles assez facilement sur le net. Par exemple, si une image png peut simplement et gratuitement être convertie en jpg via ce lien.

1.3.4.2 Compression#

Afin de réduire la taille des images, il existe énorméments de logiciels comme TinyPNG, compress.io ou GIMP,… il y a beaucoup de manière d’optimiser la taille que prendra l’image. L’une d’elle, assez simple, que j’ai vu chez Virginie Louckx est tout simplement d’utiliser Paint. Effectivement, nous pouvons contrôler le nombre de pixels de l’image.

Par exemple, en ouvrant une image avec paint et en cliquant sur redimensionner, il est possible de modifier le nombre de pixels utilisés pour l’image. Voici un exemple pour l’image de ma page de présentation :

En faisant passer le nombre de pixels verticaux de 2048 à 400 et en gardant les mêmes proportions, on peut apercevoir que l’image a été réduite par rapport à la fenêtre de redimensionnement (photo ci-dessous).

Si l’on vérifie la taille en ko de l’image, nous pouvons constater qu’elle est passée de 139 Ko à 35 Ko et qu’avec cette simple manipulation, elle a donc rétrécie de quatre fois sa taille initiale dans le stockage.