Aller au contenu principal

Séminaire

Objectifs​

  • Configurer un environnement de développement.
  • Utiliser un éditeur de code.
  • Utiliser un système de contrôle de version.
  • Utiliser le terminal.
  • Utiliser le Markdown.
  • Utiliser un gestionnaire de paquets.

Rendu​

Résumé du rendu à faire :

Travail pratique​

Les parties notées "Avancé" sont optionnelles et destinées aux personnes souhaitant aller plus loin.

Estimation​

  • Parcourir rapidement toutes les tâches pour estimer le temps nécessaire à leur réalisation.
  • Noter ses estimations quelque part (elles seront reprises par la suite).
TâcheTemps estiméTemps passéCommentaire
Mise en place1h1h
GitHub15m30mproblème la création du compte
............
Total2h30

Mise en place​

  • Créer un dossier pour le cours (par exemple un dossier inf5 dans un dossier hep) pour y mettre tous les projets du cours.
    • Le dossier ne doit pas être dans un répertoire synchronisé (OneDrive, iCloud, Google Drive, etc.) car Git et Node.js vont créer beaucoup de fichiers et cela peut causer des problèmes de synchronisation.
    • Par exemple, mettre dans le dossier utilisateur (home) :
      • macOS : /Users/username/inf5 (Finder > Aller > Home (shift + command + H) > Créer un dossier inf5)
      • Windows : C:\Users\username\inf5 (Explorateur de fichiers > Ce PC > Disque local (C:) > Utilisateurs > username > Créer un dossier inf5)
  • Windows : Installer Windows Terminal
  • Ouvrir un terminal.
    • macOS : Ouvrir ou quitter Terminal sur Mac
      • Chercher Terminal dans la barre de recherche (Cmd + Space).
    • Windows : Chercher Terminal dans le menu Démarrer (Win).
      • Utiliser PowerShell au lieu de CMD (Invite de commandes).
    • Pour exécuter une commande, écrire la commande puis Enter. Essayer les commandes suivantes :
      • ls pour lister les fichiers et répertoires du répertoire courant.
      • pwd pour afficher le chemin absolu du répertoire courant.
  • macOS : Installer Homebrew
    • /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    • Ne pas oublier de lancer les commandes indiquées à la fin de l'installation
  • Installer

GitHub​

  • Créer un compte sur GitHub.
    • Utiliser une adresse e-mail privée afin de réutiliser le compte après la formation.
    • Si le captcha est trop difficile, utiliser un autre réseau (données mobiles, VPN, …).
    • Indiquer son nom d'utilisateur GitHub sur Moodle.
  • Configurer Git
    • Sur un terminal
      • git config --global user.name "Prénom Nom"
        • Par exemple : git config --global user.name "jane Doe"
      • git config --global user.email "email@example.com"
        • Par exemple : git config --global user.email "jane.doe@etu.hepl.ch"
      • Windows : git config --global core.autocrlf true (Fins de ligne)
  • Se connecter à GitHub depuis le terminal
    • gh auth login
    • What account do you want to log into?
      • Choisir GitHub.com avec les flèches puis Enter.
    • What is your preferred protocol for Git operations on this host?
      • Choisir HTTPS.
    • Authenticate Git with your GitHub credentials?
      • Accepter en tapant sur Enter (Yes par défaut car en majuscule).
    • How would you like to authenticate GitHub CLI?
      • Choisir Login with a web browser.
    • Suivre les instructions affichées dans le terminal pour terminer l'authentification.
      • Pour copier dans le terminal, sélectionner le texte puis clic-droit.
  • Accepter le devoir sur GitHub Classroom.
    • Vérifier ses e-mails pour accepter d'être ajouté au devoir.
    • Demander d'être ajouté au dépôt GitHub si nécessaire (en cas de problème).
  • Cloner le dépôt GitHub sur sa machine.
    • Cliquer sur le bouton "Code".
    • Copier l'URL HTTPS du dépôt.
    • Ouvrir un terminal sur le dossier du cours.
      • macOS
        • Aller sur le dossier avec le Finder.
        • Clic-droit sur le dossier > Services > Nouveau terminal au dossier
      • Windows
        • Aller sur le dossier avec l'Explorateur de fichiers.
        • Clic-droit sur le dossier > Ouvrir dans le Terminal
    • Cloner le dépôt avec la commande git clone <URL>.
    • Aussi possible de cloner avec Visual Studio Code.

Visual Studio Code​

  • Ouvrir Visual Studio Code.
  • Depuis Visual Studio Code, ouvrir le dossier du dépôt Git cloné précédemment.
    • File > Open Folder... > Sélectionner le dossier du dépôt Git.
  • Installer l'extension Prettier - Code formatter :
    • Extensions (dans la barre latérale gauche) > Rechercher Prettier > Installer

Markdown​

Le Markdown est un langage de balisage léger. Il est utilisé pour formater du texte de manière simple et lisible. Les rapports à rendre pour le cours seront rédigés en Markdown.

  • Créer un fichier report.md dans le dépôt Git avec un contenu similaire à ci-dessous.
    • Modifier et compléter le contenu du tableau avec les tâches effectuées, le temps estimé et le temps passé.
    • Markdown Cheat Sheet
  • Pour visualiser le rendu d'un fichier Markdown sur Visual Studio Code :
    • Ctrl + Shift + V
  • Pour formater le fichier :
    • Alt/Option + Shift + F
./report.md
# Séminaire 01 - Environnement

- Date :
- Prénom :
- Nom :
- Numéro HEP :
- Pseudo GitHub :

## Estimation

| Tâche         | Temps estimé | Temps passé | Commentaire           |
| ------------- | ------------ | ----------- | --------------------- |
| Mise en place | 1h           | 1h          |                       |
| Installation  | 15m          | 30m         | problème avec Node.js |
| ...           | ...          | ...         | ...                   |
| Total         | 2h30         |             |                       |

Installation​

Installer ou vérifier les outils suivants :

  • Gestionnaire de paquets
    • macOS : Homebrew
      • Vérifier avec brew --version.
    • Windows : Chocolatey
      • winget install --id chocolatey.chocolatey --source winget (documentation)
      • Vérifier avec choco --version.
  • Un navigateur web parmi :
  • Git
    • Vérifier avec git --version.
  • Node.js
    • macOS : brew install node
    • Windows : choco install nodejs ou winget install -e --id OpenJS.NodeJS
    • Vérifier avec node -v.
    • Avancé : utiliser nvm pour gérer plusieurs versions sur la même machine.
  • DBeaver
    • macOS : brew install --cask dbeaver-community
    • Windows : choco install dbeaver
Conseils
  • Préférer les versions stables (LTS pour long term support) aux versions plus récentes (p. ex. Node.js).
    • Moins de bugs potentiels.
  • Préférer les versions officielles aux versions tierces (p. ex. Python au lieu de Anaconda).
    • Plus sûr de ce qui est installé.
  • Windows : Utiliser cmder comme terminal (disponible via Chocolatey).

Terminal​

Commandes de base​

Sans modification du système (safe) :

  • ls : lister les fichiers et répertoires du répertoire courant (ls pour list).
  • pwd : afficher le chemin absolu du répertoire courant (pwd pour print working directory).
  • cd : changer de répertoire (cd pour change directory).
    • cd chemin_relatif_ou_absolu pour changer de répertoire.
    • cd .. pour remonter d'un niveau.
  • clear : nettoyer l'affichage de l'historique.
  • history : afficher l'historique des commandes.
  • cat : afficher le contenu d'un fichier (cat pour concatenate).
    • cat nom_fichier pour afficher le contenu d'un fichier.
  • echo : afficher du texte dans le terminal.
    • echo 'texte' pour afficher du texte.
  • exit : fermer le terminal.

Avec modification du système (vérifier avant d'exécuter) :

  • touch : créer un fichier vide.
    • touch nom_fichier pour créer un fichier vide.
  • mkdir : créer un répertoire (mkdir pour make directory).
    • mkdir nom_repertoire pour créer un répertoire.
  • rm : supprimer un fichier ou un répertoire (rm pour remove).
    • rm nom_fichier pour supprimer un fichier.
    • rm -r nom_repertoire pour supprimer un répertoire et son contenu (r pour recursive).
  • cp : copier un fichier ou un répertoire (cp pour copy).
    • cp source destination pour copier un fichier.
    • cp -r source destination pour copier un répertoire et son contenu (r pour recursive).
  • mv : déplacer ou renommer un fichier ou un répertoire (mv pour move).
    • mv source destination pour déplacer ou renommer un fichier ou un répertoire.

Opérateurs de redirection :

  • > : rediriger la sortie standard vers un fichier en écrasant le contenu existant.
    • commande > fichier pour écrire la sortie de la commande dans le fichier.
  • >> : rediriger la sortie standard vers un fichier en ajoutant à la fin du fichier.
    • commande >> fichier pour ajouter la sortie de la commande à la fin du fichier.

Astuces​

  • La touche Tab permet l'auto-complétion des commandes et des noms de fichiers/répertoires pour éviter les fautes de frappe.
  • Les touches fléchées ← et → permettent d'éditer la commande actuelle.
  • Les touches fléchées ↑ et ↓ permettent de naviguer dans l'historique des commandes précédentes.
  • À tout moment, Ctrl + C permet d'annuler la commande en cours.

Exercices​

  1. Ouvrir un terminal sur Visual Studio Code.
    • View > Terminal
  2. Afficher Hello, World! dans le terminal.
  3. Vérifier le chemin du répertoire courant.
  4. Créer un répertoire terminal.
  5. Se déplacer dans le répertoire terminal.
  6. Vérifier que l'on est bien dans le répertoire terminal.
  7. Lister les fichiers et répertoires (il ne devrait rien y avoir).
  8. Créer un fichier hello.txt.
  9. Vérifier que le fichier hello.txt a bien été créé.
  10. Vérifier que le fichier est bien vide.
  11. Écrire 'Hello, World!' dans le fichier hello.txt.
  12. Vérifier le contenu du fichier hello.txt.
  13. Copier le fichier hello.txt vers hello-2.txt.
  14. Vérifier le contenu du fichier hello-2.txt.
  15. Ajouter une seconde ligne 'This is a test.' à la fin du fichier hello.txt.
  16. Vérifier le contenu du fichier hello.txt.
  17. Copier le fichier hello.txt vers hello-3.txt.
  18. Renommer le fichier hello-3.txt en hello-4.txt.
  19. Vérifier le contenu du fichier hello-4.txt.
  20. Supprimer le fichier hello-4.txt.
  21. Vérifier que le fichier hello-4.txt a bien été supprimé.

Éditeur de texte (avancé)​

Il est possible d'éditer des fichiers texte directement depuis le terminal avec des éditeurs de texte en ligne de commande :

  • vi
  • vim
    • vim bleu.txt pour ouvrir (ou créer) le fichier bleu.txt
    • Pour éditer, taper i
    • Pour enregistrer et quitter, taper Esc puis :wq puis Enter

Gitignore​

Le fichier .gitignore permet d'indiquer à Git quels sont les fichiers ou répertoires à ignorer.

  • Créer un fichier .gitignore à la racine du dépôt Git avec le contenu suivant :
# Ignorer les fichiers temporaires
*.tmp

# Ignorer les répertoires de dépendances de Node.js
node_modules/
  • Ajouter un fichier test.tmp et un répertoire node_modules avec un fichier test.js à l'intérieur.
  • Vérifier que les fichiers test.tmp et node_modules/test.js ne sont pas pris en compte par Git avec la commande git status.

Test​

L'automatisation des tests permet de vérifier que le code fonctionne correctement et de détecter les erreurs rapidement. C'est un code qui vérifie qu'un autre code fonctionne comme attendu.

  • Créer un fichier test.js à la racine du dépôt Git avec le contenu suivant :
./test.js
import test from "node:test";
import assert from "node:assert/strict";
import fs from "node:fs";

test("Existence des fichiers", () => {
  const existingFiles = [
    ".gitignore",
    "report.md",
    "test.js",
    "terminal/hello-2.txt",
    "terminal/hello.txt",
  ];
  existingFiles.forEach((file) => {
    assert.ok(fs.existsSync(file), `Le fichier ${file} doit exister.`);
  });

  const nonExistingFiles = ["terminal/hello-3.txt", "terminal/hello-4.txt"];
  nonExistingFiles.forEach((file) => {
    assert.ok(!fs.existsSync(file), `Le fichier ${file} ne doit pas exister.`);
  });
});
  • Exécuter les tests avec la commande node --test.
  • Vérifier que tous les tests passent.

Git​

  • Ajouter les fichiers au dépôt Git et pousser les changements sur GitHub.
    • En ligne de commande :
      • Revenir dans le répertoire du dépôt Git en utilisant cd.
      • Vérifier l'état du dépôt Git 
        git status
      • Ajouter les fichiers créés dans le "staging area" (zone de préparation) 
        git add --all
      • Vérifier que les fichiers ont bien été ajoutés 
        git status
      • Créer un commit avec un message 
        git commit -m "ajouter les exercices sur le terminal"
      • Envoyer le commit sur le dépôt distant 
        git push
    • Avec l'interface graphique de Visual Studio Code
  • Vérifier sur le site Web de GitHub que les fichiers ont bien été poussés.

Configuration​

  • Configurer l'ordinateur pour qu'il affiche les extensions des fichiers
    • macOS : Finder > Préférences > Avancé > Cocher "Afficher toutes les extensions de fichier"
    • Windows : Explorer > Affichage > Options > Modifier les options des dossiers et de recherche > Affichage > Décocher "Masquer les extensions des fichiers dont le type est connu"
  • Configurer l'ordinateur pour qu'il affiche les fichiers cachés
    • macOS : Finder > Cmd + Shift + .
    • Windows : Explorer > Affichage > Options > Modifier les options des dossiers et de recherche > Affichage > Cocher "Afficher les fichiers, dossiers et lecteurs cachés"

Visual Studio Code​

  • Configurer Prettier comme formateur par défaut :
    • (en bas à gauche) > Settings > Rechercher Default Formatter > Choisir Prettier
Configuration

Pour faciliter le développement :

  • Sauvegarde automatique
    • (en bas à gauche) > Settings > Rechercher Auto Save > Choisir afterDelay
  • Formatage automatique du code
    • (en bas à gauche) > Settings > Rechercher Format On Save > Activer
Raccourcis
  • Commenter/décommenter du code :
    • Sélectionner le code à commenter.
    • Ctrl + /
    • Répéter le raccourci pour décommenter.
  • Sélectionner plusieurs occurrences d'un texte :
    • Sélectionner du texte.
    • Ctrl + D
    • Répéter le raccourci pour sélectionner les occurrences suivantes.
    • Les modifications au clavier vont modifier toutes les occurrences en même temps jusqu'au prochain clic ou Esc.
  • Rechercher et remplacer :
    • Pour rechercher dans le fichier ouvert : Ctrl + F
    • Ajouter Shift pour rechercher dans tout le projet.
    • Cliquer sur pour remplacer.
Le raccourci unique

Un raccourci pour les gouverner tous. Un raccourci pour les trouver.

Ctrl + Shift + P permet de rechercher des commandes (ouvrir le rendu Markdown, formater le document, ouvrir le terminal, etc.)

(Ctrl + P sans le Shift pour ouvrir un fichier avec une recherche par nom.)

Raccourcis clavier​

Les raccourcis clavier sont des combinaisons de touches qui permettent d'effectuer des actions bien plus rapidement. Voici quelques raccourcis clavier utiles :

  • Ctrl + C : Copier (C pour Copy)
  • Ctrl + V : Coller (à droite de C)
  • Ctrl + X : Couper (à gauche de C)
  • Ctrl + Z : Annuler
  • Ctrl + S : Enregistrer (S pour Save)
  • Ctrl + A : Tout sélectionner (A pour All)
  • Ctrl + F : Rechercher (F pour Find)

Présentation​

  • Écrire une brève présentation de soi avec ses centres d'intérêt, ses compétences en informatique, pourquoi avoir choisi cette formation, etc.
  • Rendre la présentation au format PDF nommé presentation-prenom-nom.pdf (avec son prénom et nom, tout en minuscule, sans accent, sans espace avec des tirets) sur Moodle.

Rapport​

  • Compléter le fichier report.md avec les tâches effectuées et le temps passé.
  • Faire un commit et pousser les changements sur GitHub.
  • Vérifier que le rapport a bien été mis à jour sur GitHub.

Exercices supplémentaires​

Ressources supplémentaires​

Références​

Dernière mise à jour le