Aller au contenu principal

Cours

Objectifs​

  • Définir un IDE.
  • Comprendre le contrôle de version Git.
  • Comprendre le système de fichiers.
  • Comprendre l'utilisation de Markdown.
  • Comprendre l'utilisation d'un gestionnaire de paquets.

Présentation​

Environnement

Programmation Web et bases de données

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/mdn-url-all.png

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://extraterm.org/selection_mode2.gif

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 :

  • Jupyter ?

    • Pour des rapports interactifs ≠ développement de logiciels

Navigateur Web

https://upload.wikimedia.org/wikipedia/commons/5/59/StatCounter-browser-ww-yearly-2009-2025.png

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.bitsofco.de/image/css-if.webp

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.velcdn.com/images%2Fseob%2Fpost%2F0953cbb2-f2e9-44bb-98ae-aa583e5de14b%2Fgitcommit.gif

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

Commits locaux

  • 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

  • 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/figures/git-cmdline/git-remote.png

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)

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://upload.wikimedia.org/wikipedia/commons/d/d6/Lorem_Ipsum_-_WYSIWYG_en_Latex_-_tekst_als_paden.svg

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.

Références​

Dernière mise à jour le