Environnement

Objectifs

• Utiliser un éditeur de code.
• Utiliser un système de contrôle de version.
• Utiliser le terminal.
• Utiliser le Markdown.

Cours

Environnement

Divers

Système de fichiers

• Arborescence de répertoires (dossiers) et de fichiers.

• Un répertoire peut contenir des fichiers et d'autres répertoires.

• Répertoire racine : /

Chemin absolu

• Chemin absolu d'un fichier ou d'un répertoire.

• /home/alice/image.png

• /home/bob/

• Identification unique d'un fichier ou d'un répertoire dans le système de fichiers.

Chemin relatif

• Répertoire de travail (courant) (working directory).

• Chemin relatif : par rapport au répertoire courant (/home/alice/)

• ./documents/ (. : répertoire courant) ou documents/

• ../bob/image.jpg (.. : répertoire parent)

• ../../tmp/texte.txt

Chemin dans l'URL

https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Protocole : quel langage ?

• Nom de domaine : quelle machine ?

• Port : quelle application ? (80 pour HTTP, 443 pour HTTPS)

• Chemin : quel fichier ?

• Paramètres : quelles données ?

• Fragment : quelle section du fichier ? (pas envoyé au serveur)

Terminal

https://wiki-tech.io/Linux/D%C3%A9butant/Terminal

GUI vs CLI

• Interfaces pour interagir avec l'ordinateur.

• Graphical User Interface (GUI)

  • Quoi ? Souris et clavier

  • Comment ? Clics et déplacements

  • Où ? Explorateur de fichiers

• Command Line Interface (CLI)

  • Quoi ? Clavier uniquement

  • Comment ? Commandes textuelles

  • Où ? Terminal

Terminal

• Programme permettant d'exécuter des commandes.

• Commandes possibles :

  • Afficher le chemin du répertoire courant : pwd

  • Lister le contenu d'un répertoire : ls

  • Naviguer dans les répertoires : cd

  • Créer et supprimer des fichiers et répertoires : touch, mkdir, rm

  • Copier et déplacer des fichiers : cp, mv

  • Installer des logiciels : apt, brew, choco

  • Exécuter des programmes : node, python

• Shell : programme qui interprète les commandes.

  • Exemples: bash, zsh, PowerShell, cmd

IDE

• Integrated Development Environment (Environnement de développement intégré)

• Éditeur de texte avec des fonctionnalités supplémentaires.

• Facilite l'édition et le débogage du code.

• Exemples populaires :

  • Visual Studio Code ou VSCodium : Open source et gratuit

  • IntelliJ IDEA ou autres IDE de JetBrains (WebStorm, PyCharm, …) : Payant (sauf étudiant), mais meilleur refactoring et autocomplétion

  • Xcode : pour les applications sur Apple.

  • Cursor : basé sur l'IA.

• Jupyter ?

  • Pour des rapports interactifs ≠ développement de logiciels

• Stack Overflow 2025 Developer Survey

Navigateur Web

https://gs.statcounter.com/browser-market-share#yearly-2009-2025

Moteur de rendu web

• Permet de calculer le rendu des pages HTML, CSS, …

• Principaux moteurs :

  • Blink : Chromium, Google Chrome, Microsoft Edge, Brave, …

  • Gecko : Mozilla Firefox

  • Webkit : Safari

  • Trident : Internet Explorer

• Chaque moteur interprète le code différemment, pas toujours le même rendu.

• Vérifier la compatibilité, par exemple sur Can I use.

Can I use

https://caniuse.com/css-if

Système de contrôle de version

• Version control system (VCS ou logiciel de gestion de versions).

• Conserve le code source avec son historique.

• Permet de collaborer à plusieurs sur le même code.

• Le plus populaire : Git

Git

• L'historique est une suite de sauvegardes appelé commits.

• Chaque commit contient les différences de chaque ligne par rapport au précédent (parent).

• Chaque commit est identifié par un hash (p. ex. bdc8480f2511131447c786586be773173114b9eb), les premiers caractères suffisent (bdc8480).

• Les branches et tags sont des raccourcis vers un commit.

• Les branches sont des pointeurs mobiles : on se trouve toujours sur une branche, et on ajoute un commit à cette branche.

• HEAD indique toujours le commit courant.

Commits et branche

https://velog.io/@seob/TIL-visualized-git-commands

Commits locaux

https://third-bit.com/py-rse/git-cmdline.html

• Lors d'une sauvegarde des changements d'un fichier, ils ne sont pas pris en compte par Git.

• git add sélectionne les modifications à ajouter dans le staging area

• git commit crée un commit du contenu de la staging area.

• Le commit est ajouté à la branche courante en local.

Dépôt distant

https://velog.io/@seob/TIL-git-remotes

• Vue d'un dépôt distant (remote repository) : souvent préfixé par origin/* (ici o/*)

• git fetch : récupère les commits du dépôt distant sans les intégrer dans la branche courante.

• git pull : récupère les commits du dépôt distant et les fusionne dans la branche courante.

• git push : envoie les commits locaux vers le dépôt distant.

Commandes Git

https://third-bit.com/py-rse/git-cmdline.html

Git hébergé

• Un hébergeur Git stocke les dépôts Git et fournit une interface web pour les gérer.

• Permet de collaborer à plusieurs sur le dépôt distant.

• GitHub : le plus populaire, beaucoup de projet open source dessus, racheté par Microsoft en 2018.

• GitLab : open source, avec une version auto-hébergeable.

• Bitbucket : plus orienté entreprise, par Atlassian.

Markdown

• Langage de balisage léger pour formater du texte.

• Syntaxe simple pour les titres, listes, liens, images, …

• Utilisé pour les fichiers README, générer du HTML, …

# Titre de niveau 1
## Titre de niveau 2
Texte en **gras** et en *italique*.
- Item 1
- Item 2
[Wikipédia](https://www.wikipedia.org)
![Image](https://example.com/image.png)

• Markdown Cheat Sheet : référence rapide pour la syntaxe.

• StackEdit : un éditeur en ligne (parmi d'autres).

WYSIWYG

• What You See Is What You Get (Ce que vous voyez est ce que vous obtenez).

• Éditeurs qui affichent le rendu final pendant l'édition.

• Code → Compilation → Rendu final

https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_-_WYSIWYG_en_Latex_-_tekst_als_paden.svg

Gestionnaire de paquets

• Package manager (gestionnaire de paquets)

• Logiciel qui facilite l'installation, la mise à jour et la gestion des logiciels.

• Mobile :

  • Android : Google Play Store, F-Droid, …

  • iOS : App Store

• Desktop (CLI) :

  • macOS : Homebrew, MacPorts, …

  • Windows : Chocolatey, Scoop, …

  • Linux : APT (Advanced Packaging Tool), Pacman, …

• Langages de programmation :

  • JavaScript : npm, pnpm, yarn, …

  • Python : pip, Poetry, Conda, …

  • Java : Maven, Gradle, …

npm

• Installer un paquet : npm install typescript

• Désinstaller un paquet : npm uninstall typescript

• Mettre à jour un paquet : npm update typescript

• Lister les paquets installés : npm ls

• Afficher les commandes disponibles : npm help

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Exercices

Mise en place

• Créer un dossier pour le cours (par exemple ocinf dans le dossier Documents) pour y mettre tous les projets du cours.

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, …).
• Accepter l'invitation dans la Classroom 50.
• 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"
• 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 Classroom 50.
• 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.
    • Aller sur le dossier avec le Finder.
    • Clic-droit sur le dossier > Services > Nouveau terminal au dossier
  • 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.
  • 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

# Environnement

- Date :
- Prénom :
- Nom :
- Pseudo GitHub :

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
    • Stage and commit
    • Sync with the server
• 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
  • Finder > Préférences > Avancé > Cocher "Afficher toutes les extensions de fichier"
• Configurer l'ordinateur pour qu'il affiche les fichiers cachés
  • Finder > Cmd + Shift + .

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 option, 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 Teams.

Rapport

• Faire un commit et pousser les changements sur GitHub.
• Vérifier que le rapport a bien été mis à jour sur GitHub.

Exercices supplémentaires

• Jeu sur les raccourcis clavier
• Jeu sur les commandes du terminal :
  • bashcrawl
    • Sélectionner "Terminal" comme interface.
    • Lire les instructions dans le terminal pour commencer.
  • The Command Line Murders
    • Sélectionner "Terminal" comme interface.
    • cat instructions pour commencer.
  • Command Challenge
• Exercices sur Markdown
• Apprendre le Git Branching
• Le Terminal sous macOS

Ressources supplémentaires

• Cours express sur la ligne de commande
• Ignorer des fichiers avec Git
• Simulateur de terminal
• Disposable Root Servers (bloqué sur le réseau de l'école)

Références

• https://devopschops.com/blog/games-for-learning-linux/