1. Gestion de projet et documentation#
Ce module vise plusieurs objectifs qui sont énumérés ci-dessous.
Objectifs :
- Travailler sur un tutoriel git
- Utiliser git afin de remplir son site personnel
- Tester et appliquer les principes de « project management » tout au long des cours
- Documenter notre chemin d’apprentissage pour ce module
- S’auto-évaluer
J’aimerais tout d’abord remercier Thibault qui m’a énormément aidé pour ce premier module. En effet je n’ai jamais vraiment codé de ma vie, et Thibault, qui est en informatique, m’a guidé à distance.
Je vais essayer de détailler les étapes par lesquelles je suis passé (avec lui) afin d’arriver à remplir mon site personnel.
Modification du site personnel#
Pour modifier son site personnel et que celui-ci soit à jour sur GitLab il faut d’abord passer par quelques étapes afin de pouvoir faire les modifications depuis son ordinateur, en ayant une copie locale des fichiers et ensuite les envoyer sur GitLab via le terminal de son ordinateur. Je vais détailler les étapes par lesquelles je suis passé pour arriver à modifier mon site personnel et faire ma documentation.
1. Association d’une clé SSH#
Une clé SSH permet de sécuriser la connexion entre mon ordinateur et le site GitLab dans notre cas. Ceci permet de coder de manière locale sur notre ordinateur, et ensuite, via le terminal de l’ordinateur, mettre en ligne les codes effectués.
Pour associer cette clé, il faut aller sur le site web GitLab, aller sur son profil et ensuite dans Edit profil. Il faut ensuite sélectionner l’onglet SSH Keys.
J’ai créé la clé SSH sur le terminal de mon ordinateur en rentrant cette ligne de code ssh-keygen -t rsa -b 4096 -C "adresse mail" où entre les guillemets il faut rentrer son adresse mail avec laquelle on a créé notre compte GitLab et ensuite appuyer sur Enter.
Il faudra choisir un endroit où stocker cette clé sur son ordinateur, si on appuye sur Enter, normalement elle sera stockée sur le bureau par défaut.
Ensuite il est demandé un passphrase pour sécuriser la clé SSH, mais je n’en ai pas choisi et ai juste appuyé sur Enter.
On va ensuite récupérer notre clé SSH sur notre terminal en utilisant pbcopy < ~/.ssh/id_rsa.pub qui va copier notre clé publique. On va ensuite aller sur GitLab dans l’onglet SSH Keys ouvert plus tôt et coller notre clé dans l’espace Key que l’on peut voir ci-dessous:
Ensuite on remplit le titre, comme par exemple « FABLab Key Macbook » et on clique sur Add key.
Pour vérifier si cela marche bien on peut retourner dans le terminal de l’ordinateur et taper ssh -T git@gitlab.com.
Si ça marche, nous recevons un message de bienvenue !
2. Clonage du repository#
Pour cloner le repository, il faut installer git sur son ordinateur. Normalement en mettant dans le terminal git --version il nous donne la version de git si c’est déjà installé, si ce n’est pas déjà installé l’ordinateur proposera de l’installer.
Il faut ensuite aller sur son repo GitLab, en allant dans l’onglet Student et ensuite en cliquant sur son nom. On arrive sur la page ci-dessous :
On va cliquer sur le rectangle bleu avec Code écrit dedans. On peut ensuite cliquer sur clone with ssh key et on copiera un URL.
Pour le stocker j’ai créé un dossier sur mon bureau MA2 dans lequel il y a un sous-dossier PHYS-F317 dans lequel j’ai stocké mon dossier git pour ce cours que j’ai appelé felix.wallenborn.
Dans le terminal on fera la commande ls qui permet de lister les éléments qu’il y a dans un dossier. Pour ensuite rentrer dans un dossier on utilisera la commande cd. Avec ces manipulations je vise d’arriver dans le dossier où je veux stocker ces informations. Par exemple, le chemin pour arriver à mon dossier felix.wallenborn est le suivant: cd MA2/PHYS-F317/felix.wallenborn
Une fois ces étapes effectuées, il va falloir ouvrir un IDE (une application de codage) pour pouvoir modifier le code. J’ai personnellement téléchargé VSCode. J’explique comment l’installer dans l’onglet Fabzero modules - Logiciels nécessaires.
Une fois que VSCode est ouvert, il va falloir cliquer sur Open Folder et aller dans le dossier où on a stocké nos informations, celui qui s’appelle felix.wallenborn. Une fois sélectionné, il faut l’ouvrir et on obtient quelque chose comme ci-dessous :
3. Codage du site personnel#
Pour modifier son site personnel, on va donc sur VSCode, et on ouvre l’onglet docs. On aura plusieurs propositions, et pour modifier son site perso on clique sur l’onglet index.md, tandis que pour modifier son site pour chaque module on clique sur module0X.md, où X représente le numéro du module concerné.
Lorsque les modifications sont effectuées, on n’oublie pas de faire ctrl + S pour sauver sur l’application VSCode.
Il faut ensuite faire quelques commandes sur le terminal de l’ordinateur.
On commence par taper git status qui indiquera quels onglets ont été modifiés sur l’application VSCode.
Ensuite il faut faire git add . qui permet d’ajouter des fichiers, comme des photos par exemple. Il est conseillé de le faire à chaque fois avant de push (on reviendra sur ce terme dans quelques lignes).
Une fois que c’est fait, il faut faire git commit -m «message» où entre les guillemets on met le message que l’on désire pour décrire la modification qui a été faite.
La dernière étape est le git push qui permet de mettre en ligne toutes les modifications qui ont été faites localement sur l’ordinateur.
Attention a bien faire attention d’être dans le bon dossier (felix.wallenborn dans mon cas) avant de push les informations !
4. Mkdocs#
Mkdocs est un outil très utile pour coder et voir le résultat du code instantanément dans un onglet sur un serveur internet.
Pour l’installer vous pouvez suivre ce tutoriel.
Jonas m’a bien aidé pour l’installer sur mon ordinateur et il explique très bien ça sur son site.
Une fois mkdocs installé, il faut ouvrir (avec les commandes ls et cd), dans le terminal de l’ordinateur, le dossier dans lequel on a copié le repository. Pour ma part, c’est dans le dossier felix.wallenborn (voir plus haut).
Une fois que nous sommes dans le dossier, il faut lancer la commande mkdocs serve et le terminal répondra par le lien d’un site. Il faut le copier coller dans un serveur internet et vous aurez le rendu en direct de votre code sur ce serveur.
5. Compression et importation d’images#
Concernant les images, il faut faire attention à leur taille avant de les importer sur site et qu’elles ne soient pas trop volumineuses. Il faut donc les compresser.
Dans un premier temps j’ai téléchargé Gimp, qui est une application sur MacOS. C’est un outil qui permet de faire un tas de choses comme rogner, retoucher, etc. et est facile d’utilisation pour baisser la qualité d’une image. Dans un second temps j’ai découvert comment compresser et changer le format via mon ordinateur directement. J’explique les 2:
GIMP#
Voici les étapes à suivre:
- Ouvrir Gimp
Une fois que c’est fait, il faut aller dans Fichiers et cliquer sur Ouvrir. Ensuite il faut sélectionner l’image à modifier.
- Réduire la qualité d’une image ainsi que sa résolution
Pour réduire la qualité de l’image, il faut aller dans Image et ensuite cliquer sur Echelle et taille de l’image.
Ensuite les réglages de la qualité de l’image s’ouvrent:
Il faut ensuite baisser le nombre de pixels.
Sur l’application Gimp, les images s’enregistrent sous le format Gimp, il faut donc cliquer sur Fichiers et ensuite sur Exporter sous. Cela mettra l’image en format png.
Sur Mac#
Cliquez sur n’importe quelle image et celle-ci s’ouvrira dans le logiciel Aperçu intégré à Mac. Cliquez dans la barre sur Outils et cliquez sur Ajustez la taille.
Vous aurez ensuite la possibilité de modifier la taille de votre image en enregistrant les modifications.
Pour modifier la qualité et le format de l’image, il faut cliquer dans la barre sur Fichiers et ensuite sur Exporter
Pour baisser la qualité de l’image il suffit de bouger la jauge, et cliquer sur le format (ici PNG) pour le modifier.
Concernant la taille des images, réduire la taille en pixels de ces dernières permet de réduire leurs poids. Généralement je choisis une taille d’image variant de 600 à 900 pixels pour le côté le plus grand de l’image car j’ai remarqué que c’était une taille propice au site personnel.
Pour l’importation d’images sur VS Code, il suffit de les glisser avec la souris dans un dossier images dans votre fichier docs. Il faut ensuite faire la commande !["titre de l'image"]("chemin de l'image"). Voici un exemple de chemin d’image sur mon blog: images/Photo_identité - copie-min.jpg
6. Importation de vidéos#
En ce qui concerne les vidéos, il faut les mettre sur le format mp4. Etant donné que je suis sur macOS, et que je transfère mes vidéos depuis mon iPhone via Airdrop, mes vidéos se mettent automatiquement sous le format mov. J’ai d’abord essayé de télécharger FFmpeg, afin de modifier les vidéos directement avec mon terminal. Cette solution me paraissait pratique, mais j’ai eu un problème avec la formule à mettre dans le terminal pour modifier ma vidéo. J’ai donc décidé de télécharger Cisdem Video Converter et d’en utiliser la version gratuite pour le moment. C’est d’ailleurs sur le site de Cisdem que j’avais trouvé l’alternative du FFmpeg, et également une autre alternative qui suggérait d’utiliser iMovie, mais cette méthode me semblait fastidieuse pour pas grand chose.
Pour utiliser Cisdem Video Converter, il suffit d’appuyer sur Settings et sélectionner le format de sortie en tant que mp4. Ensuite il faut appuyer sur start en bas à droite et une nouvelle vidéo sous le bon format sera créé!
7. Documentation#
Concernant la documentation pour ce cours tout au long de ce quadrimestre, la méthode que je compte utiliser est assez floue. Mon objectif est de prendre note de tout ce qui est possible sur le moment même ou juste après pour le retranscrire par après. Je ne pense pas être très bon pour faire une documentation claire, précise et continue, mais je compte justement sur ce cours pour m’améliorer dans ce domaine.
J’ai décidé de faire une conclusion sur la documentation juste avant de rendre ma documentation personnelle:
Tout d’abord, j’ai trouvé cet exercice de documentation très instructif. Cela demande de prendre note et les mettre au plus vite sur notre site personnel. Cette méthode pousse à un travail continu, ce qui est quelque chose avec lequel j’ai toujours eu un peu de mal mais dans le cadre de ce cours ça m’a permis de ne jamais me sentir débordé car j’essayais de compléter ma documentation le plus vite possible après chaque cours, et c’est un sentiment très agréable.
Concernant les outils, je trouve GitLab (et VS Code dans mon cas) assez facile(s) d’utilisation, même si j’ai trouvé ça tout de même compliqué de me les approprier dans un premier temps. Heureusement qu’il y avait des informaticiens dans la classe qui ont pu m’aider. Je pense ne pas avoir tout compris à GitLab encore et il faudrait que je continue à travailler dessus pour vraiment me familiariser avec. Je trouve tout de même le format assez sympa, surtout lorsque je travaillais avec mkdocs, car je pouvais voir un résultat direct de mon travail. J’aime beaucoup la volonté de tout mettre en Open Source, je pense que cela est très important car j’ai toujours été un peu contre les brevets ou ce genre de choses et je trouve que les sciences debraient être un commun!
Ensuite, je dois avouer que j’ai quand même eu du mal à savoir à quel point documenter ce que je faisais, à savoir jusqu’où aller dans le détail. J’ai essayé de rendre tout ça accessible en partageant également des liens qui permettaient de peauffiner mes explications. Je me demandais s’il y avait une forme de structure/méthodologie pour la documentation en règle générale car j’ai quand même eu le sentiment d’être très libre à ce niveau là et de pouvoir structurer les choses et les dire de la manière que je désirais. Cela offrait une grande liberté mais quelque peu déstabilisante par moment.
J’ai également rencontré un autre problème avec l’utilisation des “issues” sur gitlab. J’ai tendance à faire des TO DO listes à la main car je trouve ça beaucoup plus pratique, et j’ai donc très peu checker la partie “issues” sur gitlab, jusqu’à ce que je me souvienne que c’était important pour le cours pour signaler son avancement et regarder les checklists, même si globalement je n’en ai pas eu besoin pour avancer en continu dans ma documentation et trouver les assignments sur le site FabZero.