update website

This commit is contained in:
ramzouillee 2026-02-13 09:14:38 +01:00
parent 97554712f1
commit 58ef7b5c4a
33 changed files with 2241 additions and 7730 deletions

View File

@ -1,30 +0,0 @@
# Premier cours de DevOps
---
## Le Garage Numérique
Un compte **Garages** servira en gros :
- au **Git du garage** ;
- un **Discord-like : Element** ;
- le **Nextcloud du garage**.
---
## Création du compte Garage
Création du compte, le mien c'est **ramzouille**.
---
## Installation de lapplication **Element**
Installation et configuration de **Element**.
---
## Présentation des projets **Open Source**
Introduction à la philosophie **Open Source**.
---

View File

@ -1,15 +0,0 @@
# Deuxieme cours de DevOps
---
## Premiere note dans le Git
- Une **note par cours** pour résumer en gros la journée, le tout en **Markdown**.
---
## Présentation a l'oral
Un oral sur le hardware réseau qui se trouve dans nos PC comme la carte WIFI, Bluetooth ou encore le port Ethernet
---

View File

@ -1,17 +0,0 @@
# Troisieme cours de DevOps
---
## Debian sur le mac
- Installation de debian sur le mac, il n'y avait qu'a suivre les commandes sur ce wiki et une seule commande shell : [The Banana port of debian](https://wiki.debian.org/InstallingDebianOn/Apple/M1#The_Bananas_port)
---
## Debut de gameshell
- Jeu pour apprendre le shell
---
## Clone du git de la note sur le debian

View File

@ -1,15 +0,0 @@
# Quatrième cours de DevOps
---
## Installation d'une VM
- Sur le debian, on a installé une VM d'un debian (debian-ception) via kvm
---
## Gameshell pt.2
- J'ai avancé sur gameshell et suis arrivé vers les niveaux 30
---

View File

@ -1,15 +0,0 @@
# Sixième cours de DevOps
---
## Grabber pt.2
- On continue le grabber
---
## Instal. debian n.195
- J'installe debian sur un troisième mac, cette fois-ci un intel, je deviens un expert en la matière
---

View File

@ -1,107 +0,0 @@
<img src="https://media1.tenor.com/m/Aus6dg9v1FMAAAAC/bassem-regard.gif" alt="bassem sous degradé gros crane perdu">
*mon big ass qui fait sudo rm -rf / sans réfléchir*
# Commandes *sh pour les idiots (28/11/25)
## Cheatsheet de plein de commandes
> Depuis le début, beaucoup de commandes on été utilisées, du coup je note ici les commandes utilisées depuis le début et a quoi elles servent en gros
### Commandes de base
1. **sudo** : lance une commande avec les superdroits, peut manipuler tout le pc avec en gros
```bash
sudo [commande]
```
2. **ls** : liste les fichiers d'un dossier
```bash
# -a pour afficher les fichiers cachés / -l pour afficher en liste avec plus d'infos
ls [options] [fichier|dir]
```
3. **cd** : changer de dossier
```bash
# ~ pour aller au répertoire home / .. pour revenir en arriere
cd [dir]
```
4. **pwd** : affiche le répertoire actuel
```bash
pwd
```
5. **touch** : affiche le contenu d'un fichier
```bash
touch [fichier]
```
6. **nano** : éditeur de texte
```bash
nano [fichier]
```
7. **mkdir** : supprime ce qu'on lui donne
```bash
mkdir [options] [fichier|dir]
```
8. **rm** : supprime ce qu'on lui donne
```bash
# -r pour supprimer un dossier et son contenu (recursive) (`rmdir` le fait aussi)
# -f force la commande
rm [options] [fichier|dir]
```
9. **cp** : copie...
```bash
cp [options] [source] [destination]
```
10. **mv** : ...et déplace
```bash
mv [options] [source] [destination]
```
### Les caractères d'associations
`|` (le pipe) -> prend le résultat de la commande de gauche et le donne à celle de droite
*exemple : liste tout un répertoire, mais n'affiche que les résultats qui sont "feur"*
```bash
ls -la | grep "feur"
```
`>` et `>>`
- envoie le résultat d'une commande dans un fichier texte
- `>` écrase le fichier / `>>` ajoute à la fin sans effacer
- ex: `echo "coucou" > fichier.txt`
### Permissions et Utilisateurs
`chmod [droits] [fichier]`
- change les permissions d'un fichier (qui peut lire/écrire/exécuter)
- `chmod +x [fichier]` rend un script exécutable (très important)
- `chmod 777 [fichier]` donne tous les droits à tout le monde (dangereux mais ça dépanne)
`chown [user]:[groupe] [fichier]`
- change le propriétaire du fichier (si t'as copié un truc en sudo et que tu peux plus le toucher)
### Lecture et recherche dans les fichiers
`cat [fichier]`
- affiche tout le contenu d'un fichier d'un coup dans le terminal
- utile pour les petits fichiers, sinon ça inonde l'écran
`less [fichier]`
- affiche le contenu page par page (on peut scroller)
- appuyer sur `q` pour quitter
`head [fichier]` / `tail [fichier]`
- affiche juste le début (`head`) ou la fin (`tail`) d'un fichier
- `tail -f [fichier]` hyper utile pour voir les logs en direct (ça attend les nouvelles lignes)
`grep [mot] [fichier]`
- cherche un mot ou une phrase spécifique dans un fichier (le ctrl+f du terminal)
- -r pour chercher dans tous les dossiers (recursive) / -i pour ignorer les majuscules

View File

@ -1,69 +0,0 @@
<img src="https://media1.tenor.com/m/Ra7ao_kzzHAAAAAC/stop-stop-it.gif" alt="kirk zehef pcq t'as pas commit">
*completement zehef pcq t'as pas git push*
# Git pour les neuilles (12/12/25)
## Créer un git
### -> Si le projet existe deja
- On clone le projet au sein d'un dossier, celui-ci sera dans son dossier de travail. ->
`git clone (url du projet git)`
### -> Sinon créer le projet
- Crée le projet git à partir de ce dossier. ->
`git init (dossier de travail)`
## Ignorer des fichiers/dossiers
- Ajouter des interdictions dans .gitignore
`echo gbvenv/ >> .gitignore` <- on indique via un echo qui écrira dans le fichier .gitignore qu'on ne veut pas push le dossier "gbvenv" ici, un fichier on ne mettera pas le slash (logique en amont)
## Une fois que de fichiers sont dispos, empaqueter !
> Pour envoyer un projet git, c'est comme envoyer un colis à la poste, d'abord, on met nos affaires dans le colis
_Plusieures possibilités ☝_
- Ajoute TOUS les fichiers du dossier via l'option -A ou --all ->
`git add -A`
- Ajoute SEULEMENT les modifications et suppressions (donc pas de nouveaux fichiers) ->
`git add -u`
## Etiqueter le paquet
> Ensuite, on rempli l'étiquette du colis et on la colle au colis
- On écrit une note recap courte du commit sur le git ->
`git commit -m "(message du commit)"`
## Déposer le colis
> Enfin pour push, c'est a dire déposer le colis au bureau de poste pour l'envoi, on fait :
- On envoie le paquet de l'origine à la branche souhaitée dans le git ->
`git push -u origin (branche souhaitée)`
!!! info
-u veut dire [ce que dit la doc en gros](https://git-scm.com/docs/git-push/fr#git-push---set-upstream)
### -> SI ERREUR
> Dans le cas ou un fichier/dossier a été supprimé autre part avant de push nos modifs
- Merge de force les deux branches pour ne faire qu'une branche
`git config pull.rebase false`
## Utiliser deux branches différentes
> Dans le cas ou l'on veut travailler avec une seconde branche
- Pour switch de branche de travail ->
`git checkout (branche souhaitée)`
- Pour merge en ecrasant la branche souhaitée ⬇️
```bash
git merge -s ours main
git checkout main
git merge (branche à merge)
```

View File

@ -1,34 +0,0 @@
<img src="https://media1.tenor.com/m/3cMVlmowJxIAAAAd/t-kleouf.gif" alt="tk completement sous frozen">
*7alouf ouvre grabber apres 9h brainrot tsunami*
# pip et environnements virtuels pour les caca (16/01/26)
## Python et ses environnements virtuels
- En python, on peut travailler dans des "sandboxes" ou toutes les libraires installées resteront contenues dedans
> Utile de créer donc un environnement pour chaque projet afin de en pas perturber d'autres projets avec des milliers de packages inutiles en gros
`python3 -m venv gbvenv` <- permet de créer un environnement (venv crée l'environnement "gbvenv")
`source gbvenv/bin/activate` <- lance cet environnement pour travailler dedans
- En parlant de packages, parlons de ✨pip✨
> pip est le packages manager de python, en l'appelant, on peut installer des packages comme uvicorn par exemple, utile pour grabber
`pip install --upgrade pip` <- update les packages
`python -m pip install ***` <- installe le package qu'on notera a la place des ***
`pip freeze >> requirements.txt` <- commande super utile pour partager les dependances necessaires pour faire fonctionner son projet sur un autre environnement
`deactivate` <- désactive l'environnement virtuel
## Script de roi qui automatise le process
- J'ai codé un script qui automatise ce process avec une seule commande :
`bash <(curl -fsSL https://raw.githubusercontent.com/buchtioof/venv-setup/main/venvsetup.sh)`
> Pour en apprendre plus : [le git du projet](https://github.com/buchtioof/venv-setup)

View File

@ -1,72 +0,0 @@
<img src="https://media1.tenor.com/m/EeiKHgyVQR8AAAAC/silencio.gif" alt="tuto ytb sql">
*florian quand je lui demande de l'aide*
# SQL pour les tung tung tung sahur (22/01/26)
## Modèle MVC
> Le modèle MVC est une façon de concevoir un projet logiciel, en gros on sépare celui-ci en trois grandes parties distinctes séparant la logique de la vue et rend le travail plus facile.
<img src="https://developer.mozilla.org/en-US/docs/Glossary/MVC/model-view-controller-light-blue.png" alt="Modèle MVC par MDN" width="200px">
Modèle MVC en prenant celui de grabber par exemple :
- Model = Base De Donnée (ex: EMPLOYEES, COMPUTERS)
- View = Tableau de bord, Site
- Controller = Cerveau qui dirige les deux parties Model et View (ex: app.py)
## TUTO : COMMENT CR2ER UNE BDD SQL FACILEMENT EN 2 MINUTES (SUPER FACILE)
### Structure d'une Base De Données
*celle de grabber pour l'exemple*
```
BDD (Etape 1) - grabberman
├── TABLES (Etape 2) - COMPUTERS
│ ├── Colonne (Etape 3) - PcId, entier/clé primaire
│ │ └── Donnée (Etape 4)
│ ├── Colonne (Etape 3) - Hostname, chaîne de charactère
│ └── Colonne (Etape 3) - MacAddress, chaîne de charactère
└── TABLES (Etape 2) - EMPLOYEES
├── Colonne (Etape 3) - UserId, entier/clé primaire
├── Colonne (Etape 3) - Username, chaîne de charactère
└── Colonne (Etape 3) - PcId, clé secondaire
```
### Etape 1 : Créer une BDD
`sqlite3 grabberman.db` <- Commande qui crée une DB qu'on appellera ici "grabberman"
### Etape 2 : Créer une table
```sql
CREATE TABLE "COMPUTERS"
(
PcId INTEGER PRIMARY KEY AUTOINCREMENT,
Hostname VARCHAR(50) NOT NULL,
MacAddress VARCHAR(50)
);
```
!!! note
Ici on crée une table dans laquelle on stockera des données (des PC que l'on grab par exemple)
### Etape 3 : Ajouter des données dans une table
`INSERT into COMPUTERS (Hostname, MacAddress) VALUES ('mypc', '1B:12:F0:FL:94');`
!!! note
Pour ajouter une donnée dans une tableau, on **INSERE** dans le **TABLEAU** donné les **VALEURS** dans les **Colonnes**
### Etape 4 : Créer un autre tableau avec une clé liée (foreign key)
```sql
CREATE TABLE "EMPLOYEES"
(
UserId INTEGER PRIMARY KEY AUTOINCREMENT,
Username VARCHAR(50) NOT NULL,
FOREIGN KEY (PcId) REFERENCES COMPUTERS(PcId)
);
```
!!! note
On recommence comme à l'étape 2, en ajoutant une clé étrangère **foreign key**, qui lie une clé extérieure, **PcId** ici, dans notre second Tableau

View File

@ -1,12 +1,10 @@
<img src="https://media1.tenor.com/m/ZTT94KgxLEUAAAAd/bassem-rire.gif" alt="tk completement sous frozen"> <img src="https://media1.tenor.com/m/tgpcw1FKR2MAAAAd/peter-griffin-family-guy.gif" alt="tk completement sous frozen">
*avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois* *avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois*
# Bienvenue dans mes notes de devops # Bienvenue dans mes notes de devops
## Structure ## Structure
-> cheatsheets (Notes sur les outils dev du quotidien)
-> cours (Notes sur les cours) -> cours (Notes sur les cours)
-> projects (Notes sur des nouveaux projets) -> projects (Notes sur des nouveaux projets)

View File

@ -1,31 +0,0 @@
<img src="https://media1.tenor.com/m/-P-WHkN0ZZUAAAAd/asda.gif" alt="drake (moi) t'aidant avec mes notes remplies de bonne volontés" width="300" height="200">
# C koi linux ? (30/10/25)
!!! warning
Page en travaux, doit être finie avec toutes les informations que j'ai sur Linux en général
## Arborescence type sur UNIX
- On découvre l'arborescence des fichiers sur un Linux
```
/ # Racine du disque
├── /bin/ # Contient les commandes de base
├── /boot/ # Fichiers de demarrage
├── /dev/ # Tout ce qui est lié aux périphériques
├── /etc/ # Fichiers de configuration
├── /home/ # Répertoires utilisateurs
├── /lib/ # Bibliothèques logicielles
├── /mnt/ # Point de montage pour les systèmes de fichier temporaires
├── /media/ # Point de montage pour les disques temporaires
├── /opt/ # Logiciels optionnels, la ou on installera des programmes maison
├── /root/ # Répertoire du user root
├── /var/ # Variable, contient des logs, ect...
├── /usr/ # Contient sensiblement la même chose que la racine mais sans être utile au fonctionnement du système
├── /srv/ # Services hébergés sur le systèmes (FTP, HTTP, ect...)
├── /run/ # Emplacement mémoire des programmes
└── /tmp/ # Temporaire
```
[source de l'arbo.](https://fr.wikipedia.org/wiki/Filesystem_Hierarchy_Standard#Arborescence_des_r%C3%A9pertoires)

View File

@ -1,7 +0,0 @@
# Javascript en gros
## Sommaire
- [Cours 1 : ](javascript/2026-01-30.md)
- [Cours 2 : Asynchrone et Manip de fichiers](javascript/2026-02-06.md)
- [Cours 3 : fetch des APIs et serveur HTTP](javascript/2026-02-09.md)

View File

@ -1 +1,6 @@
# Javascript en gros pt.1 (30/01/26) ---
tags:
- Javascript
---
# Javascript (30/01/26)

View File

@ -1,19 +1,23 @@
---
tags:
- JavaScript
- Node.JS
---
<img src="https://pbs.twimg.com/media/HAbMrGzWMAAbh5p?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"> <img src="https://pbs.twimg.com/media/HAbMrGzWMAAbh5p?format=jpg&name=medium" alt="tasty crousty goumin 67 doro">
# JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26) # Asynchrone et promesses (06/02/26)
!!! info !!! info
Avant de manipuler des fichiers, il faut comprendre le fonctionnement des modules qui s'en occuperont, **l'asynchrone**. Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module *file system dit "fs"* (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme *fs*, **l'asynchrone**.
## Asynchrone et promesses (promise) ## C'est quoi Asynchrone ?
### C'est quoi Asynchrone ?
Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis. Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.
*Rien de mieux qu'un exemple concret et gourmand en amont !* *Rien de mieux qu'un exemple concret et gourmand en amont et en aval.*
#### 1. SANS Asynchrone ### 1. SANS Asynchrone
1. Tu commandes un Tasty Crousty. 1. Tu commandes un Tasty Crousty.
2. Ce neuille de caissier part en cuisine. 2. Ce neuille de caissier part en cuisine.
@ -27,7 +31,7 @@ Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mai
--- ---
#### 2. AVEC Asynchrone ### 2. AVEC Asynchrone
1. Tu commandes un Tasty Crouspy. 1. Tu commandes un Tasty Crouspy.
2. La caissière crie en cuisine "Un Crousty piquant sucré supplément poulet !". 2. La caissière crie en cuisine "Un Crousty piquant sucré supplément poulet !".
@ -35,11 +39,12 @@ Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mai
4. Puis elle passe **directement** au client suivant. 4. Puis elle passe **directement** au client suivant.
5. Toi, tu vas t'asseoir et tu attends. 5. Toi, tu vas t'asseoir et tu attends.
### Mais c'est quoi cette promesse ? (Promise) ## Mais c'est quoi cette promesse ? (Promise)
☝️🤓 Node.js fonctionne sur un principe de **thread unique** (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois. !!! note
☝️🤓 Node.js fonctionne sur un principe de **thread unique** (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.
> Pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de **Promesses**. Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de **Promesses**.
Dans notre exemple, **la Promise, c'est le bipeur.** Dans notre exemple, **la Promise, c'est le bipeur.**
@ -51,9 +56,9 @@ Une Promise a toujours **3 états possibles**, et seulement 3 :
2. **Succès (Resolved) :** Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée). 2. **Succès (Resolved) :** Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).
3. **Échec (Rejected) :** Le manager arrive et te dit *"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir"*. La promesse est rompue (il y a une erreur). 3. **Échec (Rejected) :** Le manager arrive et te dit *"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir"*. La promesse est rompue (il y a une erreur).
### Exemples async et await ## Exemples async et await
#### Exemple d'un async (exo du TP 2 de JS) ### Exemple d'un async (exo du TP 2 de JS)
```javascript ```javascript
files.forEach((fileName) => { files.forEach((fileName) => {
@ -66,7 +71,7 @@ files.forEach((fileName) => {
* **`fs.readFile`** : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans `content`. * **`fs.readFile`** : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans `content`.
* **La Promise** : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans `content` * **La Promise** : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans `content`
#### Exemple concret await (exo du TP 2 de JS) ### Exemple concret await (exo du TP 2 de JS)
On peut également demander spécifiquement d'attendre le retour d'une promesse avec `await` On peut également demander spécifiquement d'attendre le retour d'une promesse avec `await`

View File

@ -1,6 +1,12 @@
---
tags:
- JavaScript
- Node.JS
---
<img src="https://pbs.twimg.com/media/HAtgMOZXUAAH0kD?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"> <img src="https://pbs.twimg.com/media/HAtgMOZXUAAH0kD?format=jpg&name=medium" alt="tasty crousty goumin 67 doro">
# JS en gros pt.3 : fetch des APIs et serveur HTTP (09/02/26) # fetch des APIs et serveur HTTP (09/02/26)
## Fetch et APIs ## Fetch et APIs

View File

@ -1,51 +1,29 @@
# Grabber pt.1 (05/12/25) ---
Ce script a pour but de récupérer automatiquement les informations matérielles (CPU, RAM, Stockage) et logicielles (OS, Kernel, Environnement de bureau) de la machine. Il formate ensuite ces données et les enregistre dans un fichier `summary.txt` situé dans le dossier `/opt/grabber`. tags:
- Projets
- Bash
- Docs
---
<img src="https://github.com/buchtioof/grabber/blob/main/assets/logo.png?raw=true">
# Grabber docs
## Commandes et explications ## But du projet
Grabber est un hub admin pour fetch les données hardware d'un parc informatique via un script qui fetch les ordinateurs (d'abord sur linux, plus tard intégration d'autres OS), lie les ordinateurs a des utilisateurs (ex. employés pour administration en entreprise) et de check d'un coup d'oeil les updates disponibles + état du software
### 1. Variables et chemins ## Fonctionnement
Pour fonctionner, grabber a plusieures tâches réparties par différents éléments dans le projet :
-> Cerveau : Coordonne les différentes tâches du programme comme lancer le serveur admin, fetch les données d'un ordinateur dans une BDD (grabber.sh)
-> Corps : Serveur admin python qui affichera les données stockées dans une BDD type sqlite
`DIR=/opt/grabber` ## Technologies
- Définit le répertoire de travail principal pour le script.
`SUM="$DIR/summary.txt"` - Bash -> Script qui fetch et lance la console admin
- Définit le chemin absolu du fichier de sortie où les informations seront écrites. - Python
- uvicorn -> pour host le site admin en local
### 2. Récupération Hardware (Matériel) ## Avancement
`lscpu -eMODELNAME | tail -n1` - [ ] Script bash
- Affiche les détails du CPU et isole la dernière ligne pour obtenir uniquement le nom du modèle. * [x] Fetch le hardware
* [ ] Uninstaller
`sudo dmidecode -t processor | grep ID` - [ ] Interface admin web (wip)
- Utilise l'outil `dmidecode` (nécessite les privilèges root) pour extraire l'identifiant unique du processeur.
`lsmem | grep 'Mémoire partagée'`
- Récupère la taille de la mémoire vive (RAM) disponible sur le système.
`lsblk -dnb`
- Liste les périphériques de blocs (disques) sans afficher les partitions, en excluant les boucles (`loop`) et le boot, pour calculer le stockage total.
`numfmt --to iec $STOCKAGE_TOTAL`
- Convertit la taille totale du stockage (calculée en octets) vers un format lisible par l'humain (ex: 500G, 1T).
### 3. Récupération Software (Logiciel)
`lsb_release -a`
- Affiche les informations spécifiques à la distribution Linux installée (Description, Release).
`uname -a`
- Récupère l'architecture du système (ex: x86_64).
`uname -r`
- Affiche la version actuelle du noyau (Kernel) Linux.
### 4. Fonctions d'écriture (Logique)
`echo "[HARDWARE]" > $SUM`
- Initialise le fichier de résumé en écrivant l'en-tête. Le signe `>` écrase tout contenu précédent pour repartir à zéro.
`echo "VAR = $VAR" >> $SUM`
- Ajoute les lignes d'informations (CPU, RAM, OS, etc.) à la suite du fichier. Le signe `>>` permet d'ajouter du texte sans effacer ce qui existe déjà.
`hardware` et `software`
- Appelle les deux fonctions définies précédemment pour exécuter la collecte et l'écriture des données.

View File

@ -1,11 +1,17 @@
<img src="https://media1.tenor.com/m/BOJCfc2aShMAAAAd/teboun-abdelmadjid-tebboune.gif" alt="boss dangereux criminel"> ---
tags:
- Projets
- Docs
---
<img src="https://media1.tenor.com/m/ZTT94KgxLEUAAAAd/bassem-rire.gif" alt="boss dangereux criminel">
*celui qui pete fort dans la classe jv te grabber* *celui qui pete fort dans la classe jv te grabber*
# Site de notes avec Zensical (23/01/26) # Docs et notes avec Zensical
!!! note !!! note
Pendant la création de cette note j'ai immigré mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs. Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.
## Pourquoi faire ? ## Pourquoi faire ?

View File

@ -3,6 +3,8 @@ repo_name: buchtioof/notes
repo_url: https://github.com/buchtioof/notes repo_url: https://github.com/buchtioof/notes
theme: theme:
features:
- navigation.instant
palette: palette:
# Palette toggle for automatic mode # Palette toggle for automatic mode
- media: "(prefers-color-scheme)" - media: "(prefers-color-scheme)"
@ -48,25 +50,29 @@ extra_css:
nav: nav:
- Accueil: index.md - Accueil: index.md
- Cheatsheets:
- cheatsheets/2025-11-28.md
- cheatsheets/2025-12-12.md
- cheatsheets/2026-01-16.md
- cheatsheets/2026-01-22.md
- Cours: - Cours:
- learn/2025-10-30.md - 🔌 DevOps:
- learn/javascript.md - learn/devops/2025-10-30.md
- learn/devops/2025-11-28.md
- learn/devops/2025-12-12.md
- learn/devops/2026-01-16.md
- learn/devops/2026-01-22.md
- ☕ Javascript:
- learn/javascript/2026-01-30.md
- learn/javascript/2026-02-06.md
- learn/javascript/2026-02-09.md
- Projets: - Projets:
- projects/2025-12-05.md - projects/2025-12-05.md
- projects/2026-01-23.md - projects/2026-01-23.md
- Liens cools: links.md - Liens cools: links.md
markdown_extensions: markdown_extensions:
- tables - tables
- admonition - admonition
- pymdownx.details - pymdownx.details
- pymdownx.superfences - pymdownx.superfences
- pymdownx.tasklist:
custom_checkbox: true
- attr_list - attr_list
- pymdownx.emoji: - pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji emoji_index: !!python/name:material.extensions.emoji.twemoji

View File

@ -347,7 +347,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets Cours
@ -363,7 +363,54 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
🔌 DevOps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
🔌 DevOps
</label> </label>
@ -376,7 +423,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="/cheatsheets/2025-11-28/" class="md-nav__link"> <a href="/learn/devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="/learn/devops/2025-11-28/" class="md-nav__link">
@ -404,7 +479,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="/cheatsheets/2025-12-12/" class="md-nav__link"> <a href="/learn/devops/2025-12-12/" class="md-nav__link">
@ -432,7 +507,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="/cheatsheets/2026-01-16/" class="md-nav__link"> <a href="/learn/devops/2026-01-16/" class="md-nav__link">
@ -460,7 +535,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="/cheatsheets/2026-01-22/" class="md-nav__link"> <a href="/learn/devops/2026-01-22/" class="md-nav__link">
@ -487,6 +562,153 @@
</li> </li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="/learn/javascript/2026-01-30/" class="md-nav__link">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="/learn/javascript/2026-02-06/" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="/learn/javascript/2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -513,7 +735,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -529,116 +751,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="/learn/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="/learn/javascript/" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -659,7 +771,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -687,7 +799,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -804,7 +916,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"/","features":[],"search":"/assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"/","features":["navigation.instant"],"search":"/assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="/assets/javascripts/bundle.36a64b72.min.js"></script> <script src="/assets/javascripts/bundle.36a64b72.min.js"></script>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -10,7 +10,7 @@
<link rel="next" href="cheatsheets/2025-11-28/"> <link rel="next" href="learn/devops/2025-10-30/">
@ -413,7 +413,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets Cours
@ -429,7 +429,54 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
🔌 DevOps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
🔌 DevOps
</label> </label>
@ -442,7 +489,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="cheatsheets/2025-11-28/" class="md-nav__link"> <a href="learn/devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="learn/devops/2025-11-28/" class="md-nav__link">
@ -470,7 +545,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="cheatsheets/2025-12-12/" class="md-nav__link"> <a href="learn/devops/2025-12-12/" class="md-nav__link">
@ -498,7 +573,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="cheatsheets/2026-01-16/" class="md-nav__link"> <a href="learn/devops/2026-01-16/" class="md-nav__link">
@ -526,7 +601,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="cheatsheets/2026-01-22/" class="md-nav__link"> <a href="learn/devops/2026-01-22/" class="md-nav__link">
@ -553,6 +628,153 @@
</li> </li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="learn/javascript/2026-01-30/" class="md-nav__link">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="learn/javascript/2026-02-06/" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="learn/javascript/2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -579,7 +801,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -595,116 +817,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="learn/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="learn/javascript/" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -725,7 +837,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -753,7 +865,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -857,11 +969,10 @@
<p><img src="https://media1.tenor.com/m/ZTT94KgxLEUAAAAd/bassem-rire.gif" alt="tk completement sous frozen"> <p><img src="https://media1.tenor.com/m/tgpcw1FKR2MAAAAd/peter-griffin-family-guy.gif" alt="tk completement sous frozen">
<em>avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois</em></p> <em>avant le 28/11 y'a rien a gratter, j'installais linux pour la 9387e fois</em></p>
<h1 id="bienvenue-dans-mes-notes-de-devops">Bienvenue dans mes notes de devops</h1> <h1 id="bienvenue-dans-mes-notes-de-devops">Bienvenue dans mes notes de devops</h1>
<h2 id="structure">Structure</h2> <h2 id="structure">Structure</h2>
<p>-&gt; cheatsheets (Notes sur les outils dev du quotidien)</p>
<p>-&gt; cours (Notes sur les cours)</p> <p>-&gt; cours (Notes sur les cours)</p>
<p>-&gt; projects (Notes sur des nouveaux projets) </p> <p>-&gt; projects (Notes sur des nouveaux projets) </p>
<p>-&gt; liens cools (mes sites favoris)</p> <p>-&gt; liens cools (mes sites favoris)</p>
@ -917,7 +1028,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":".","features":[],"search":"assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":".","features":["navigation.instant"],"search":"assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="assets/javascripts/bundle.36a64b72.min.js"></script> <script src="assets/javascripts/bundle.36a64b72.min.js"></script>

File diff suppressed because one or more lines are too long

View File

@ -9,6 +9,10 @@
<link rel="prev" href="../../devops/2026-01-22/">
<link rel="next" href="../2026-02-06/">
@ -19,7 +23,7 @@
<title>Javascript en gros pt.1 (30/01/26) - Les incroyables notes de devops</title> <title>Javascript (30/01/26) - Les incroyables notes de devops</title>
@ -142,7 +146,7 @@
<div data-md-component="skip"> <div data-md-component="skip">
<a href="#javascript-en-gros-pt1-300126" class="md-skip"> <a href="#javascript-300126" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -178,7 +182,7 @@
<div class="md-header__topic" data-md-component="header-topic"> <div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis"> <span class="md-ellipsis">
Javascript en gros pt.1 (30/01/26) Javascript (30/01/26)
</span> </span>
</div> </div>
@ -331,6 +335,55 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Cours
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -342,17 +395,17 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets 🔌 DevOps
@ -363,12 +416,12 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2"> <label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets 🔌 DevOps
</label> </label>
@ -381,7 +434,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../../devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../devops/2025-11-28/" class="md-nav__link">
@ -409,7 +490,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../../devops/2025-12-12/" class="md-nav__link">
@ -437,7 +518,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../../devops/2026-01-16/" class="md-nav__link">
@ -465,7 +546,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../../devops/2026-01-22/" class="md-nav__link">
@ -492,6 +573,165 @@
</li> </li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" checked>
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../2026-02-06/" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -518,7 +758,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -534,116 +774,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -664,7 +794,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -692,7 +822,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -777,7 +907,19 @@
<h1 id="javascript-en-gros-pt1-300126">Javascript en gros pt.1 (30/01/26)</h1> <h1 id="javascript-300126">Javascript (30/01/26)</h1>
<nav class="md-tags" >
<span class="md-tag">Javascript</span>
</nav>
@ -786,6 +928,8 @@
@ -830,7 +974,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":[],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":["navigation.instant"],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script>

View File

@ -9,6 +9,10 @@
<link rel="prev" href="../2026-01-30/">
<link rel="next" href="../2026-02-09/">
@ -19,7 +23,7 @@
<title>JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26) - Les incroyables notes de devops</title> <title>Asynchrone et promesses (06/02/26) - Les incroyables notes de devops</title>
@ -142,7 +146,7 @@
<div data-md-component="skip"> <div data-md-component="skip">
<a href="#js-en-gros-pt2-asynchrone-et-promesses-manip-de-fichiers-060226" class="md-skip"> <a href="#asynchrone-et-promesses-060226" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -178,7 +182,7 @@
<div class="md-header__topic" data-md-component="header-topic"> <div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis"> <span class="md-ellipsis">
JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26) Asynchrone et promesses (06/02/26)
</span> </span>
</div> </div>
@ -331,6 +335,55 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Cours
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -342,17 +395,17 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets 🔌 DevOps
@ -363,12 +416,12 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2"> <label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets 🔌 DevOps
</label> </label>
@ -381,7 +434,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../../devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../devops/2025-11-28/" class="md-nav__link">
@ -409,7 +490,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../../devops/2025-12-12/" class="md-nav__link">
@ -437,7 +518,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../../devops/2026-01-16/" class="md-nav__link">
@ -465,7 +546,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../../devops/2026-01-22/" class="md-nav__link">
@ -492,6 +573,292 @@
</li> </li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" checked>
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../2026-01-30/" class="md-nav__link">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#cest-quoi-asynchrone" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi Asynchrone ?
</span>
</a>
<nav class="md-nav" aria-label="C&#x27;est quoi Asynchrone ?">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-sans-asynchrone" class="md-nav__link">
<span class="md-ellipsis">
1. SANS Asynchrone
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-avec-asynchrone" class="md-nav__link">
<span class="md-ellipsis">
2. AVEC Asynchrone
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mais-cest-quoi-cette-promesse-promise" class="md-nav__link">
<span class="md-ellipsis">
Mais c'est quoi cette promesse ? (Promise)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#exemples-async-et-await" class="md-nav__link">
<span class="md-ellipsis">
Exemples async et await
</span>
</a>
<nav class="md-nav" aria-label="Exemples async et await">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#exemple-dun-async-exo-du-tp-2-de-js" class="md-nav__link">
<span class="md-ellipsis">
Exemple d'un async (exo du TP 2 de JS)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#exemple-concret-await-exo-du-tp-2-de-js" class="md-nav__link">
<span class="md-ellipsis">
Exemple concret await (exo du TP 2 de JS)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -518,7 +885,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -534,116 +901,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -664,7 +921,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -692,7 +949,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -768,18 +1025,6 @@
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#asynchrone-et-promesses-promise" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (promise)
</span>
</a>
<nav class="md-nav" aria-label="Asynchrone et promesses (promise)">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#cest-quoi-asynchrone" class="md-nav__link"> <a href="#cest-quoi-asynchrone" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
@ -817,8 +1062,8 @@
</nav> </nav>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#mais-cest-quoi-cette-promesse-promise" class="md-nav__link"> <a href="#mais-cest-quoi-cette-promesse-promise" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
@ -828,8 +1073,8 @@
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#exemples-async-et-await" class="md-nav__link"> <a href="#exemples-async-et-await" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
@ -866,11 +1111,6 @@
</ul> </ul>
</nav> </nav>
</li>
</ul>
</nav>
</li> </li>
</ul> </ul>
@ -892,16 +1132,15 @@
<p><img src="https://pbs.twimg.com/media/HAbMrGzWMAAbh5p?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"></p> <p><img src="https://pbs.twimg.com/media/HAbMrGzWMAAbh5p?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"></p>
<h1 id="js-en-gros-pt2-asynchrone-et-promesses-manip-de-fichiers-060226">JS en gros pt.2 : Asynchrone et promesses, Manip de fichiers (06/02/26)</h1> <h1 id="asynchrone-et-promesses-060226">Asynchrone et promesses (06/02/26)</h1>
<div class="admonition info"> <div class="admonition info">
<p class="admonition-title">Info</p> <p class="admonition-title">Info</p>
<p>Avant de manipuler des fichiers, il faut comprendre le fonctionnement des modules qui s'en occuperont, <strong>l'asynchrone</strong>. </p> <p>Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module <em>file system dit "fs"</em> (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme <em>fs</em>, <strong>l'asynchrone</strong>. </p>
</div> </div>
<h2 id="asynchrone-et-promesses-promise">Asynchrone et promesses (promise)</h2> <h2 id="cest-quoi-asynchrone">C'est quoi Asynchrone ?</h2>
<h3 id="cest-quoi-asynchrone">C'est quoi Asynchrone ?</h3>
<p>Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.</p> <p>Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.</p>
<p><em>Rien de mieux qu'un exemple concret et gourmand en amont !</em></p> <p><em>Rien de mieux qu'un exemple concret et gourmand en amont et en aval.</em></p>
<h4 id="1-sans-asynchrone">1. SANS Asynchrone</h4> <h3 id="1-sans-asynchrone">1. SANS Asynchrone</h3>
<ol> <ol>
<li>Tu commandes un Tasty Crousty.</li> <li>Tu commandes un Tasty Crousty.</li>
<li>Ce neuille de caissier part en cuisine.</li> <li>Ce neuille de caissier part en cuisine.</li>
@ -913,7 +1152,7 @@
</ol> </ol>
<p><strong>Résultat :</strong> La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.</p> <p><strong>Résultat :</strong> La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.</p>
<hr /> <hr />
<h4 id="2-avec-asynchrone">2. AVEC Asynchrone</h4> <h3 id="2-avec-asynchrone">2. AVEC Asynchrone</h3>
<ol> <ol>
<li>Tu commandes un Tasty Crouspy.</li> <li>Tu commandes un Tasty Crouspy.</li>
<li>La caissière crie en cuisine "Un Crousty piquant sucré supplément poulet !".</li> <li>La caissière crie en cuisine "Un Crousty piquant sucré supplément poulet !".</li>
@ -921,11 +1160,12 @@
<li>Puis elle passe <strong>directement</strong> au client suivant.</li> <li>Puis elle passe <strong>directement</strong> au client suivant.</li>
<li>Toi, tu vas t'asseoir et tu attends.</li> <li>Toi, tu vas t'asseoir et tu attends.</li>
</ol> </ol>
<h3 id="mais-cest-quoi-cette-promesse-promise">Mais c'est quoi cette promesse ? (Promise)</h3> <h2 id="mais-cest-quoi-cette-promesse-promise">Mais c'est quoi cette promesse ? (Promise)</h2>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>☝️🤓 Node.js fonctionne sur un principe de <strong>thread unique</strong> (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.</p> <p>☝️🤓 Node.js fonctionne sur un principe de <strong>thread unique</strong> (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.</p>
<blockquote> <p>Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de <strong>Promesses</strong>.</p>
<p>Pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de <strong>Promesses</strong>.</p> </div>
</blockquote>
<p>Dans notre exemple, <strong>la Promise, c'est le bipeur.</strong></p> <p>Dans notre exemple, <strong>la Promise, c'est le bipeur.</strong></p>
<p>Ce boîtier est une promesse. Le restaurant te dit : <em>"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau."</em></p> <p>Ce boîtier est une promesse. Le restaurant te dit : <em>"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau."</em></p>
<p>Une Promise a toujours <strong>3 états possibles</strong>, et seulement 3 :</p> <p>Une Promise a toujours <strong>3 états possibles</strong>, et seulement 3 :</p>
@ -934,8 +1174,8 @@
<li><strong>Succès (Resolved) :</strong> Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).</li> <li><strong>Succès (Resolved) :</strong> Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).</li>
<li><strong>Échec (Rejected) :</strong> Le manager arrive et te dit <em>"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir"</em>. La promesse est rompue (il y a une erreur).</li> <li><strong>Échec (Rejected) :</strong> Le manager arrive et te dit <em>"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir"</em>. La promesse est rompue (il y a une erreur).</li>
</ol> </ol>
<h3 id="exemples-async-et-await">Exemples async et await</h3> <h2 id="exemples-async-et-await">Exemples async et await</h2>
<h4 id="exemple-dun-async-exo-du-tp-2-de-js">Exemple d'un async (exo du TP 2 de JS)</h4> <h3 id="exemple-dun-async-exo-du-tp-2-de-js">Exemple d'un async (exo du TP 2 de JS)</h3>
<div class="highlight"><pre><span></span><code><span class="nx">files</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">fileName</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <div class="highlight"><pre><span></span><code><span class="nx">files</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">fileName</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">fs</span><span class="p">.</span><span class="nx">readFile</span><span class="p">(</span><span class="nx">fileName</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;utf8&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">content</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">fs</span><span class="p">.</span><span class="nx">readFile</span><span class="p">(</span><span class="nx">fileName</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;utf8&#39;</span><span class="p">).</span><span class="nx">then</span><span class="p">((</span><span class="nx">content</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="p">...</span> <span class="w"> </span><span class="p">...</span>
@ -946,7 +1186,7 @@
<li><strong><code>fs.readFile</code></strong> : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans <code>content</code>.</li> <li><strong><code>fs.readFile</code></strong> : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans <code>content</code>.</li>
<li><strong>La Promise</strong> : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans <code>content</code></li> <li><strong>La Promise</strong> : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans <code>content</code></li>
</ul> </ul>
<h4 id="exemple-concret-await-exo-du-tp-2-de-js">Exemple concret await (exo du TP 2 de JS)</h4> <h3 id="exemple-concret-await-exo-du-tp-2-de-js">Exemple concret await (exo du TP 2 de JS)</h3>
<p>On peut également demander spécifiquement d'attendre le retour d'une promesse avec <code>await</code></p> <p>On peut également demander spécifiquement d'attendre le retour d'une promesse avec <code>await</code></p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">stats</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fs</span><span class="p">.</span><span class="nx">stat</span><span class="p">(</span><span class="nx">filename</span><span class="p">);</span> <div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">stats</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fs</span><span class="p">.</span><span class="nx">stat</span><span class="p">(</span><span class="nx">filename</span><span class="p">);</span>
</code></pre></div> </code></pre></div>
@ -957,6 +1197,23 @@
</ul> </ul>
<nav class="md-tags" >
<span class="md-tag">JavaScript</span>
<span class="md-tag">Node.JS</span>
</nav>
@ -965,6 +1222,10 @@
@ -1007,7 +1268,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":[],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":["navigation.instant"],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script>

View File

@ -9,6 +9,10 @@
<link rel="prev" href="../2026-02-06/">
<link rel="next" href="../../../projects/2025-12-05/">
@ -19,7 +23,7 @@
<title>JS en gros pt.3 : fetch des APIs et serveur HTTP (09/02/26) - Les incroyables notes de devops</title> <title>fetch des APIs et serveur HTTP (09/02/26) - Les incroyables notes de devops</title>
@ -142,7 +146,7 @@
<div data-md-component="skip"> <div data-md-component="skip">
<a href="#js-en-gros-pt3-fetch-des-apis-et-serveur-http-090226" class="md-skip"> <a href="#fetch-des-apis-et-serveur-http-090226" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -178,7 +182,7 @@
<div class="md-header__topic" data-md-component="header-topic"> <div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis"> <span class="md-ellipsis">
JS en gros pt.3 : fetch des APIs et serveur HTTP (09/02/26) fetch des APIs et serveur HTTP (09/02/26)
</span> </span>
</div> </div>
@ -331,6 +335,55 @@
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Cours
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -342,17 +395,17 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets 🔌 DevOps
@ -363,12 +416,12 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2"> <label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets 🔌 DevOps
</label> </label>
@ -381,7 +434,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../../devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../devops/2025-11-28/" class="md-nav__link">
@ -409,7 +490,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../../devops/2025-12-12/" class="md-nav__link">
@ -437,7 +518,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../../devops/2026-01-16/" class="md-nav__link">
@ -465,7 +546,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../../devops/2026-01-22/" class="md-nav__link">
@ -492,6 +573,264 @@
</li> </li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" checked>
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../2026-01-30/" class="md-nav__link">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../2026-02-06/" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#fetch-et-apis" class="md-nav__link">
<span class="md-ellipsis">
Fetch et APIs
</span>
</a>
<nav class="md-nav" aria-label="Fetch et APIs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#fetch-le-coursier" class="md-nav__link">
<span class="md-ellipsis">
fetch() (Le coursier)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#json-le-traducteur" class="md-nav__link">
<span class="md-ellipsis">
json() (Le traducteur)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#exemple-du-tp" class="md-nav__link">
<span class="md-ellipsis">
Exemple du TP
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#serveur-http" class="md-nav__link">
<span class="md-ellipsis">
Serveur HTTP
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -518,7 +857,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -534,116 +873,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -664,7 +893,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -692,7 +921,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -847,7 +1076,7 @@
<p><img src="https://pbs.twimg.com/media/HAtgMOZXUAAH0kD?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"></p> <p><img src="https://pbs.twimg.com/media/HAtgMOZXUAAH0kD?format=jpg&name=medium" alt="tasty crousty goumin 67 doro"></p>
<h1 id="js-en-gros-pt3-fetch-des-apis-et-serveur-http-090226">JS en gros pt.3 : fetch des APIs et serveur HTTP (09/02/26)</h1> <h1 id="fetch-des-apis-et-serveur-http-090226">fetch des APIs et serveur HTTP (09/02/26)</h1>
<h2 id="fetch-et-apis">Fetch et APIs</h2> <h2 id="fetch-et-apis">Fetch et APIs</h2>
<p>Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.</p> <p>Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.</p>
<p>Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : <code>fetch()</code></p> <p>Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : <code>fetch()</code></p>
@ -889,6 +1118,23 @@
<h2 id="serveur-http">Serveur HTTP</h2> <h2 id="serveur-http">Serveur HTTP</h2>
<nav class="md-tags" >
<span class="md-tag">JavaScript</span>
<span class="md-tag">Node.JS</span>
</nav>
@ -897,6 +1143,10 @@
@ -939,7 +1189,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":[],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":["navigation.instant"],"search":"../../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../../../assets/javascripts/bundle.36a64b72.min.js"></script>

File diff suppressed because one or more lines are too long

View File

@ -354,7 +354,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets Cours
@ -370,7 +370,54 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
🔌 DevOps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
🔌 DevOps
</label> </label>
@ -383,7 +430,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../learn/devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../learn/devops/2025-11-28/" class="md-nav__link">
@ -411,7 +486,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../learn/devops/2025-12-12/" class="md-nav__link">
@ -439,7 +514,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../learn/devops/2026-01-16/" class="md-nav__link">
@ -467,7 +542,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../learn/devops/2026-01-22/" class="md-nav__link">
@ -494,6 +569,153 @@
</li> </li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis">
☕ Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
☕ Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../learn/javascript/2026-01-30/" class="md-nav__link">
<span class="md-ellipsis">
Javascript (30/01/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../learn/javascript/2026-02-06/" class="md-nav__link">
<span class="md-ellipsis">
Asynchrone et promesses (06/02/26)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../learn/javascript/2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
@ -520,7 +742,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours Projets
@ -536,116 +758,6 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../learn/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C koi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../learn/javascript/" class="md-nav__link">
<span class="md-ellipsis">
Javascript en gros
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Projets
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Projets Projets
@ -666,7 +778,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -694,7 +806,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -935,7 +1047,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"..","features":[],"search":"../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"..","features":["navigation.instant"],"search":"../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../assets/javascripts/bundle.36a64b72.min.js"></script>

View File

@ -9,7 +9,7 @@
<link rel="prev" href="../../learn/javascript/"> <link rel="prev" href="../../learn/javascript/2026-02-09/">
<link rel="next" href="../2026-01-23/"> <link rel="next" href="../2026-01-23/">
@ -23,7 +23,7 @@
<title>Grabber pt.1 (05/12/25) - Les incroyables notes de devops</title> <title>Grabber docs - Les incroyables notes de devops</title>
@ -146,7 +146,7 @@
<div data-md-component="skip"> <div data-md-component="skip">
<a href="#grabber-pt1-051225" class="md-skip"> <a href="#grabber-docs" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -182,7 +182,7 @@
<div class="md-header__topic" data-md-component="header-topic"> <div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
</span> </span>
</div> </div>
@ -356,7 +356,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets Cours
@ -372,7 +372,54 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
🔌 DevOps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
🔌 DevOps
</label> </label>
@ -385,7 +432,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../../learn/devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../learn/devops/2025-11-28/" class="md-nav__link">
@ -413,7 +488,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../../learn/devops/2025-12-12/" class="md-nav__link">
@ -441,7 +516,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../../learn/devops/2026-01-16/" class="md-nav__link">
@ -469,7 +544,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../../learn/devops/2026-01-22/" class="md-nav__link">
@ -496,9 +571,10 @@
</li> </li>
@ -512,17 +588,17 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> <label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours ☕ Javascript
@ -533,12 +609,12 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3"> <label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours ☕ Javascript
</label> </label>
@ -551,14 +627,14 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../learn/2025-10-30/" class="md-nav__link"> <a href="../../learn/javascript/2026-01-30/" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
C koi linux ? (30/10/25) Javascript (30/01/26)
@ -579,14 +655,14 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../learn/javascript/" class="md-nav__link"> <a href="../../learn/javascript/2026-02-06/" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
Javascript en gros Asynchrone et promesses (06/02/26)
@ -600,6 +676,42 @@
<li class="md-nav__item">
<a href="../../learn/javascript/2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul> </ul>
</nav> </nav>
@ -624,10 +736,10 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0"> <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
@ -645,8 +757,8 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true"> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4"> <label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
@ -679,7 +791,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -697,7 +809,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -724,64 +836,47 @@
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#commandes-et-explications" class="md-nav__link"> <a href="#but-du-projet" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
Commandes et explications But du projet
</span>
</a>
<nav class="md-nav" aria-label="Commandes et explications">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-variables-et-chemins" class="md-nav__link">
<span class="md-ellipsis">
1. Variables et chemins
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#2-recuperation-hardware-materiel" class="md-nav__link"> <a href="#fonctionnement" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
2. Récupération Hardware (Matériel) Fonctionnement
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#3-recuperation-software-logiciel" class="md-nav__link"> <a href="#technologies" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
3. Récupération Software (Logiciel) Technologies
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#4-fonctions-decriture-logique" class="md-nav__link"> <a href="#avancement" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
4. Fonctions d'écriture (Logique) Avancement
</span> </span>
</a> </a>
</li>
</ul>
</nav>
</li> </li>
</ul> </ul>
@ -807,7 +902,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -883,64 +978,47 @@
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#commandes-et-explications" class="md-nav__link"> <a href="#but-du-projet" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
Commandes et explications But du projet
</span>
</a>
<nav class="md-nav" aria-label="Commandes et explications">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-variables-et-chemins" class="md-nav__link">
<span class="md-ellipsis">
1. Variables et chemins
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#2-recuperation-hardware-materiel" class="md-nav__link"> <a href="#fonctionnement" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
2. Récupération Hardware (Matériel) Fonctionnement
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#3-recuperation-software-logiciel" class="md-nav__link"> <a href="#technologies" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
3. Récupération Software (Logiciel) Technologies
</span> </span>
</a> </a>
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#4-fonctions-decriture-logique" class="md-nav__link"> <a href="#avancement" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
4. Fonctions d'écriture (Logique) Avancement
</span> </span>
</a> </a>
</li>
</ul>
</nav>
</li> </li>
</ul> </ul>
@ -961,39 +1039,57 @@
<h1 id="grabber-pt1-051225">Grabber pt.1 (05/12/25)</h1> <p><img src="https://github.com/buchtioof/grabber/blob/main/assets/logo.png?raw=true"></p>
<p>Ce script a pour but de récupérer automatiquement les informations matérielles (CPU, RAM, Stockage) et logicielles (OS, Kernel, Environnement de bureau) de la machine. Il formate ensuite ces données et les enregistre dans un fichier <code>summary.txt</code> situé dans le dossier <code>/opt/grabber</code>.</p> <h1 id="grabber-docs">Grabber docs</h1>
<h2 id="commandes-et-explications">Commandes et explications</h2> <h2 id="but-du-projet">But du projet</h2>
<h3 id="1-variables-et-chemins">1. Variables et chemins</h3> <p>Grabber est un hub admin pour fetch les données hardware d'un parc informatique via un script qui fetch les ordinateurs (d'abord sur linux, plus tard intégration d'autres OS), lie les ordinateurs a des utilisateurs (ex. employés pour administration en entreprise) et de check d'un coup d'oeil les updates disponibles + état du software</p>
<p><code>DIR=/opt/grabber</code> <h2 id="fonctionnement">Fonctionnement</h2>
- Définit le répertoire de travail principal pour le script.</p> <p>Pour fonctionner, grabber a plusieures tâches réparties par différents éléments dans le projet :
<p><code>SUM="$DIR/summary.txt"</code> -&gt; Cerveau : Coordonne les différentes tâches du programme comme lancer le serveur admin, fetch les données d'un ordinateur dans une BDD (grabber.sh)
- Définit le chemin absolu du fichier de sortie où les informations seront écrites.</p> -&gt; Corps : Serveur admin python qui affichera les données stockées dans une BDD type sqlite</p>
<h3 id="2-recuperation-hardware-materiel">2. Récupération Hardware (Matériel)</h3> <h2 id="technologies">Technologies</h2>
<p><code>lscpu -eMODELNAME | tail -n1</code> <ul>
- Affiche les détails du CPU et isole la dernière ligne pour obtenir uniquement le nom du modèle.</p> <li>Bash -&gt; Script qui fetch et lance la console admin</li>
<p><code>sudo dmidecode -t processor | grep ID</code> <li>Python<ul>
- Utilise l'outil <code>dmidecode</code> (nécessite les privilèges root) pour extraire l'identifiant unique du processeur.</p> <li>uvicorn -&gt; pour host le site admin en local</li>
<p><code>lsmem | grep 'Mémoire partagée'</code> </ul>
- Récupère la taille de la mémoire vive (RAM) disponible sur le système.</p> </li>
<p><code>lsblk -dnb</code> </ul>
- Liste les périphériques de blocs (disques) sans afficher les partitions, en excluant les boucles (<code>loop</code>) et le boot, pour calculer le stockage total.</p> <h2 id="avancement">Avancement</h2>
<p><code>numfmt --to iec $STOCKAGE_TOTAL</code> <ul class="task-list">
- Convertit la taille totale du stockage (calculée en octets) vers un format lisible par l'humain (ex: 500G, 1T).</p> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Script bash<ul class="task-list">
<h3 id="3-recuperation-software-logiciel">3. Récupération Software (Logiciel)</h3> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Fetch le hardware</li>
<p><code>lsb_release -a</code> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Uninstaller</li>
- Affiche les informations spécifiques à la distribution Linux installée (Description, Release).</p> </ul>
<p><code>uname -a</code> </li>
- Récupère l'architecture du système (ex: x86_64).</p> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled/><span class="task-list-indicator"></span></label> Interface admin web (wip)</li>
<p><code>uname -r</code> </ul>
- Affiche la version actuelle du noyau (Kernel) Linux.</p>
<h3 id="4-fonctions-decriture-logique">4. Fonctions d'écriture (Logique)</h3>
<p><code>echo "[HARDWARE]" &gt; $SUM</code> <nav class="md-tags" >
- Initialise le fichier de résumé en écrivant l'en-tête. Le signe <code>&gt;</code> écrase tout contenu précédent pour repartir à zéro.</p>
<p><code>echo "VAR = $VAR" &gt;&gt; $SUM</code>
- Ajoute les lignes d'informations (CPU, RAM, OS, etc.) à la suite du fichier. Le signe <code>&gt;&gt;</code> permet d'ajouter du texte sans effacer ce qui existe déjà.</p>
<p><code>hardware</code> et <code>software</code>
- Appelle les deux fonctions définies précédemment pour exécuter la collecte et l'écriture des données.</p>
<span class="md-tag">Projets</span>
<span class="md-tag">Bash</span>
<span class="md-tag">Docs</span>
</nav>
@ -1002,6 +1098,8 @@
@ -1046,7 +1144,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"../..","features":[],"search":"../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"../..","features":["navigation.instant"],"search":"../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../../assets/javascripts/bundle.36a64b72.min.js"></script>

View File

@ -23,7 +23,7 @@
<title>Site de notes avec Zensical (23/01/26) - Les incroyables notes de devops</title> <title>Docs et notes avec Zensical - Les incroyables notes de devops</title>
@ -146,7 +146,7 @@
<div data-md-component="skip"> <div data-md-component="skip">
<a href="#site-de-notes-avec-zensical-230126" class="md-skip"> <a href="#docs-et-notes-avec-zensical" class="md-skip">
Skip to content Skip to content
</a> </a>
@ -182,7 +182,7 @@
<div class="md-header__topic" data-md-component="header-topic"> <div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
</span> </span>
</div> </div>
@ -356,7 +356,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Cheatsheets Cours
@ -372,7 +372,54 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cheatsheets Cours
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
🔌 DevOps
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
🔌 DevOps
</label> </label>
@ -385,7 +432,35 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2025-11-28/" class="md-nav__link"> <a href="../../learn/devops/2025-10-30/" class="md-nav__link">
<span class="md-ellipsis">
C'est quoi linux ? (30/10/25)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../learn/devops/2025-11-28/" class="md-nav__link">
@ -413,7 +488,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2025-12-12/" class="md-nav__link"> <a href="../../learn/devops/2025-12-12/" class="md-nav__link">
@ -441,7 +516,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2026-01-16/" class="md-nav__link"> <a href="../../learn/devops/2026-01-16/" class="md-nav__link">
@ -469,7 +544,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../cheatsheets/2026-01-22/" class="md-nav__link"> <a href="../../learn/devops/2026-01-22/" class="md-nav__link">
@ -496,9 +571,10 @@
</li> </li>
@ -512,17 +588,17 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> <label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-ellipsis"> <span class="md-ellipsis">
Cours ☕ Javascript
@ -533,12 +609,12 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3"> <label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
Cours ☕ Javascript
</label> </label>
@ -551,14 +627,14 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../learn/2025-10-30/" class="md-nav__link"> <a href="../../learn/javascript/2026-01-30/" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
C koi linux ? (30/10/25) Javascript (30/01/26)
@ -579,14 +655,14 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="../../learn/javascript/" class="md-nav__link"> <a href="../../learn/javascript/2026-02-06/" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
Javascript en gros Asynchrone et promesses (06/02/26)
@ -600,6 +676,42 @@
<li class="md-nav__item">
<a href="../../learn/javascript/2026-02-09/" class="md-nav__link">
<span class="md-ellipsis">
fetch des APIs et serveur HTTP (09/02/26)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul> </ul>
</nav> </nav>
@ -624,10 +736,10 @@
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0"> <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
@ -645,8 +757,8 @@
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
</label> </label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true"> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4"> <label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span> <span class="md-nav__icon md-icon"></span>
@ -670,7 +782,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Grabber pt.1 (05/12/25) Grabber docs
@ -707,7 +819,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -725,7 +837,7 @@
<span class="md-ellipsis"> <span class="md-ellipsis">
Site de notes avec Zensical (23/01/26) Docs et notes avec Zensical
@ -905,12 +1017,12 @@
<p><img src="https://media1.tenor.com/m/BOJCfc2aShMAAAAd/teboun-abdelmadjid-tebboune.gif" alt="boss dangereux criminel"> <p><img src="https://media1.tenor.com/m/ZTT94KgxLEUAAAAd/bassem-rire.gif" alt="boss dangereux criminel">
<em>celui qui pete fort dans la classe jv te grabber</em></p> <em>celui qui pete fort dans la classe jv te grabber</em></p>
<h1 id="site-de-notes-avec-zensical-230126">Site de notes avec Zensical (23/01/26)</h1> <h1 id="docs-et-notes-avec-zensical">Docs et notes avec Zensical</h1>
<div class="admonition note"> <div class="admonition note">
<p class="admonition-title">Note</p> <p class="admonition-title">Note</p>
<p>Pendant la création de cette note j'ai immigré mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.</p> <p>Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.</p>
</div> </div>
<h2 id="pourquoi-faire">Pourquoi faire ?</h2> <h2 id="pourquoi-faire">Pourquoi faire ?</h2>
<ul> <ul>
@ -930,6 +1042,23 @@
<p><a href="https://zensical.org/docs/publish-your-site/">Docs pour host sur Github</a></p> <p><a href="https://zensical.org/docs/publish-your-site/">Docs pour host sur Github</a></p>
<nav class="md-tags" >
<span class="md-tag">Projets</span>
<span class="md-tag">Docs</span>
</nav>
@ -938,6 +1067,10 @@
@ -980,7 +1113,7 @@
<script id="__config" type="application/json">{"annotate":null,"base":"../..","features":[],"search":"../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script> <script id="__config" type="application/json">{"annotate":null,"base":"../..","features":["navigation.instant"],"search":"../../assets/javascripts/workers/search.e2d2d235.min.js","tags":null,"translations":{"clipboard.copied":"Copied to clipboard","clipboard.copy":"Copy to clipboard","search.result.more.one":"1 more on this page","search.result.more.other":"# more on this page","search.result.none":"No matching documents","search.result.one":"1 matching document","search.result.other":"# matching documents","search.result.placeholder":"Type to start searching","search.result.term.missing":"Missing","select.version":"Select version"},"version":null}</script>
<script src="../../assets/javascripts/bundle.36a64b72.min.js"></script> <script src="../../assets/javascripts/bundle.36a64b72.min.js"></script>

File diff suppressed because one or more lines are too long