Merge branch 'master' of https://github.com/ikit/Sandbox

ikit · Sep 15, 2020 · bbaa98e · bbaa98e
2 parents 547bf36 + e1ed6c0
commit bbaa98e
Show file tree

Hide file tree

Showing 311 changed files with 128,670 additions and 0 deletions.
diff --git a/formations/ReacJs by Kumquats/0.1-api-dom/README.md b/formations/ReacJs by Kumquats/0.1-api-dom/README.md
@@ -0,0 +1,18 @@
+# TP - API DOM
+
+## Objectifs
+L'objectif de ce TP est de manipuler le DOM grâce aux méthodes fournies par le moteur JavaScript du navigateur. Ce TP vous permettra de créer un diaporama en modifiant le code html de la page uniquement en JavaScript.
+
+## Préparatifs
+- récupérer le dossier "demarrage" fourni
+
+## Instructions
+- l'ensemble du code sera à saisir dans la balise script ou dans un fichier externe
+- en JavaScript, modifier le DOM pour ajouter des liens autour de chaque span, chaque lien ayant comme attribut href, le texte qui se trouve dans le span
+- créer des images dans ces liens avec les mêmes url
+- supprimer les spans
+- ajouter un écouteur d'événement click sur le boutton pour déplacer le noeud contenant la première image à la fin de la liste (ce qui place automatiquement la 2e en première position)
+- afin de finaliser le slider, utiliser du css pour n'apercevoir que la première image
+
+## Pour aller plus loin
+- ajouter un défilement automatique toutes les 2 secondes
diff --git a/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/daryl.jpg b/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/daryl.jpg
diff --git a/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/glenn.jpg b/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/glenn.jpg
diff --git a/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/rick.jpg b/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/images/rick.jpg
diff --git a/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/index.html b/formations/ReacJs by Kumquats/0.1-api-dom/demarrage/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Manipulation du DOM</title>
+		<style>
+			#slideShow a { visibility: hidden; }
+			#slideShow a:first-child { visibility: visible!important; }
+		</style>
+
+	</head>
+	<body>
+		<div id="slideShow">
+			<span>images/rick.jpg</span>
+			<span>images/glenn.jpg</span>
+			<span>images/daryl.jpg</span>
+		</div>
+		<button id="nextButton">Image suivante !</button>
+		<script>
+			var s = document.getElementById("slideShow");
+			function addLink(elmt)
+			{
+				return "<a href=\"" + elmt + "\"><img src=\"" + elmt + "\"/></a>";
+			}
+
+			function moveItem()
+			{
+				var first = s.children[0];
+				s.removeChild(first);
+				s.appendChild(first);
+			}
+
+			for ( var i=0; i<s.children.length; i++)
+			{
+				var item = s.children[i];
+				item.outerHTML = addLink(item.innerHTML);
+			}
+
+			document.querySelector('#nextButton').addEventListener('click', moveItem);
+
+			var slideShowTimer = window.setInterval(moveItem, 2000);
+		</script>
+	</body>
+</html>
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/README.md b/formations/ReacJs by Kumquats/1.1-ui-framework/README.md
@@ -0,0 +1,62 @@
+# TP Framework UI ES6
+
+## Objectifs
+L'objectif de ce TP est de développer un mini framework UI capable de générer et d'afficher des composants d'interface graphique réutilisables. Ce sera l'occasion de mettre en oeuvre les nouvelles fonctions d'ECMAScript 6+ et notamment les classes et l'héritage.
+
+## Préparatifs
+*Vos développements devront toujours être testés en utilisant le protocole `http`, il faut pour cela utiliser un serveur web (ouvrir le fichier en double-cliquant dessus l'ouvrira dans le navigateur mais avec le protocole `file://` ce qui peut poser des problèmes de rendu).*
+
+- Installer un serveur apache/php (sur windows [Apachefriends xampp](https://www.apachefriends.org/fr/index.html) ou [wampserver](http://www.wampserver.com/))
+- Dans l'arborescence du serveur apache (dossier www ou htdocs) créer un sous-dossier pour ce TP, et y placer le contenu du dossier `demarrage` de ce TP
+- Installer [NodeJS](https://nodejs.org/en/) (version *"Current"*)
+- Dans le dossier du projet, installer [Babel](https://babeljs.io/docs/setup/#installation)
+	```bash
+	cd /chemin/vers/mon/dossier/
+	npm install --save-dev @babel/core @babel/cli
+	```
+- Installer le preset `env` qui permettra de transpiler les features ES2015+
+	```bash
+	npm install --save-dev @babel/preset-env
+	```
+- Puis créer un fichier `.babelrc` et configurer Babel avec le preset `env` :
+	```json
+	{
+		"presets": ["@babel/env"]
+	}
+	```
+	*NB : pour lancer la compilation, vous pourrez utiliser la commande suivante :*
+	```bash
+	.\node_modules\.bin\babel js -d build
+	```
+  	*Ou bien lancer la commande suivante qui tournera en tâche de fond et relancera la compilation dès que les fichiers js seront modifiés !*
+	```bash
+	.\node_modules\.bin\babel js -d build --verbose --watch --source-maps
+	```
+- Si ce n'est pas déjà le cas, je vous invite à vous familiariser avec les outils de développement du navigateur (Chrome de préférence) et notamment les onglets Console, Network et Sources et à les utiliser pendant les tps !
+
+## Instructions
+*Dans ce TP, le fichier index.html contient du code JavaScript qui utilise des classes qui n'existent pas, ce qui génère des erreurs dans la console.
+<br>Votre rôle sera de coder ces classes de manière à faire fonctionner le code du fichier html sans erreurs.
+<br>Bien entendu, le code JS du fichier html n'est pas modifiable !*
+
+**1. Créer une classe `Component` qui représentera un composant graphique générique**
+- Le constructeur de la classe `Component` doit prendre 3 paramètres:
+	+ **tagName** (string): Le nom du tag HTML
+	+ **attributes** (objet): Liste des attributs HTML du composant
+	+ **children** (array): Liste des enfant du composant. Peut contenir d'autres instances de `Component` ou de simples String
+- La classe devra implémenter les méthodes suivantes :
+	+ **render()** : Retourne le code HTML du composant sous forme de chaîne de caractère en fonction du **tagName**, des **attributes** et des **children**. Cette méthode doit s'appuyer sur les méthodes **renderAttributes** et **renderChildren()** décrites ci-dessous.
+	+ **renderAttributes()** : Retourne le code html des différents attributs html du composant.
+	+ **renderChildren()** : Retourne une chaîne de caractères qui correspond à la concaténation du code HTML de tous les composants enfants. Cette méthode va appeler de manière récursive la méthode `render()` des children du composant. Mais attention, comme indiqué au dessus, tous les enfants ne sont pas forcément des Components, il y a aussi de simples String
+
+**2. Créer une classe `Button` qui hérite de `Component`**
+- Le constructeur de la classe doit prendre 2 paramètres:
+	+ **text** : Texte à afficher dans le bouton
+	+ **attributes** : Attributs du bouton
+- Par défaut cette classe doit générer un 'button' HTML contenant le texte et les attributs définis dans le constructeur
+
+**3. Créer une classe `RoundedRedButton` qui hérite de `Button`**
+- Le constructeur de la classe doit prendre 2 paramètres:
+	+ **text** : Texte à afficher dans le bouton
+	+ **attributes** : Attributs du bouton
+- Par défaut cette classe doit afficher un `<button>` HTML contenant le texte et les attributs définis dans le constructeur **ET** possédant des coins arrondis, une couleur de texte blanche et une couleur de fond rouge
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/.babelrc b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/.babelrc
@@ -0,0 +1,3 @@
+ {
+ 	"presets": ["@babel/env"]
+ }
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/index.html b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>TP Framework UI</title>
+	<script type="text/javascript" src="build/ui-framework.js"></script>
+	<meta charset="utf-8">
+	<style type="text/css">
+		body {
+			font-family: Arial;
+		}
+	</style>
+</head>
+<body>
+	<h1>TP Framework UI</h1>
+
+	<div>
+		<h3>Test Component</h3>
+
+		<p>Si tout fonctionne bien, une div avec un h3 et un input text doit s'afficher.</p>
+		<div id="component-container">
+
+		</div>
+		<script>
+			var component = new Component( 'div', { style: "border: 1px solid black" }, [
+					new Component( 'h3', {}, [
+						'Test du ',
+						new Component( 'strong', { style: 'color: blue' }, [ 'framework' ] ),
+						' ui'
+					] ),
+					new Component( 'input', { type: 'text', value: 'Ca a l\'air de fonctionner correctement', style: 'width: 500px' } )
+				] );
+			document.getElementById( 'component-container' ).innerHTML = component.render();
+		</script>
+	</div>
+	<div>
+		<h3>Test Button</h3>
+
+		<p>Si tout fonctionne bien, le Button doit s'afficher ci-dessous.<p>
+		<div id="button-container">
+
+		</div>
+		<script>
+			var button = new Button( 'Ceci est un bouton' );
+			document.getElementById( 'button-container' ).innerHTML = button.render();
+		</script>
+	</div>
+	<div>
+		<h3>Test RoundedRedButton</h3>
+
+		<p>Si tout fonctionne bien, le RoundedRedButton doit s'afficher ci-dessous.<p>
+		<div id="rounded-red-button-container">
+
+		</div>
+		<script>
+			var roundedRedButton = new RoundedRedButton( 'Ceci est un bouton rouge arrondi' );
+			document.getElementById( 'rounded-red-button-container' ).innerHTML = roundedRedButton.render();
+		</script>
+	</div>
+</body>
+</html>
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/js/ui-framework.js b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/js/ui-framework.js
@@ -0,0 +1,62 @@
+// Coder les classe Component, Button et RoundedRedButton ici
+
+
+class Component
+{
+
+    constructor (tagName, attributes, children)
+    {
+        this.tagName = tagName;
+        this.attributes = attributes;
+        this.children = children;
+
+        console.log("Component?constructor");
+    }
+
+    render()
+    {
+        return `<${this.tagName}${this.renderAttributes()}>${this.renderChildren()}</${this.tagName}>`;
+    }
+
+    renderAttributes()
+    {
+        var result = "";
+        for ( var key in this.attributes)
+        {
+            result += ` ${key}="${this.attributes[key]}"`;
+        }
+        return result;
+    }
+
+    renderChildren()
+    {
+        var result = "";
+        if (this.children)
+        {
+            for ( var i=0; i<this.children.length; i++)
+            {
+                var item = this.children[i];
+                result += (typeof(item) == "string") ? item : this.children[i].render();
+            }
+        }
+        return result;
+    }
+}
+
+class Button extends Component
+{
+    constructor(text, attributes)
+    {
+        super('button', attributes, text);
+    }
+}
+
+class RoundedRedButton extends Button
+{
+    constructor(text, attributes)
+    {
+        //var params = (attributes) ? attributes : {};
+        //params.style = "border: none; border-radius: 5px; background-color:red; color: white;"
+        super(text, {style: "border: none; border-radius: 5px; background-color:red; color: white;", ...attributes});
+    }
+}
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/package-lock.json b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/package-lock.json
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/package.json b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "tp-uiframework-es6",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Kumquats",
+  "license": "ISC"
+}
diff --git a/formations/ReacJs by Kumquats/1.2-webpack-modules/README.md b/formations/ReacJs by Kumquats/1.2-webpack-modules/README.md
@@ -0,0 +1,58 @@
+# TP Mise en place d'un projet webpack
+
+## Objectifs
+
+L'objectif de ce TP est de mettre en place la base d'un projet utilisant le gestionnaire de modules [Webpack](https://webpack.js.org/). Ces fichiers serviront de base pour tous les TPs suivants !
+
+## Préparatifs
+- Créer un sous-dossier pour le TP dans votre arborescence web : par exemple `c:\wamp\www\1.2-modules-webpack`
+- Dans ce dossier, reproduire l'arborescence suivante :
+	```
+	src/
+	  ├─ js/
+	  └─ build/
+	```
+- Dans le dossier `src` initialiser le projet npm à l'aide de la commande :
+	```bash
+	npm init
+	```
+- Installer les paquets NPM suivants avec l'option --save-dev:
+    + [@babel/core](https://www.npmjs.com/package/@babel/core)
+    + [@babel/cli](https://www.npmjs.com/package/@babel/cli)
+    + [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env)
+    + [babel-loader](https://www.npmjs.com/package/babel-loader)
+    + [webpack](https://www.npmjs.com/package/webpack)
+    + [webpack-cli](https://www.npmjs.com/package/webpack-cli)
+- configurer Babel à l'aide d'un fichier `.babelrc` comme vu dans le précédent TP
+- ajouter un script dans le fichier `package.json` qui permettra de lancer plus facilement webpack :
+	```json
+	"scripts": {
+		"build": "webpack"
+	},
+	```
+
+
+## Instructions
+1. **Créer un fichier `src/webpack.config.js` et configurer webpack :**
+	- Définissez le fichier d'entrée à `./js/app.js`
+	- Configurez le fichier de sortie dans `build/app.bundle.js`, vous aurez pour cela besoin du module `path` dont vous trouverez un exemple d'utilisation dans la [documentation de webpack](https://webpack.js.org/concepts/#output)
+	- Faites en sorte que les fichiers `.js` soient compilés via `babel-loader` tout en excluant le dossier `node_modules`. L'exemple se trouve dans le support mais la documentation des différents loaders de webpack est [disponible ici](https://webpack.js.org/loaders/)
+2. **Créer un premier module `js/helloWorld.js` :**
+	- y placer une fonction **"helloWorld()"** qui affiche dans la console le message  '**Hello world !**'
+	- Penser à exportez la fonction pour la rendre disponible aux autres modules
+3. **Créer un fichier `js/app.js` :**
+    - Importer le module `helloWorld` créé précédemment
+    - Appeler la méthode retournée par ce module
+4. **Lancer la compilation avec webpack** <br>grâce à la commande "build" configurée dans le `package.json`
+	```bash
+	npm run build
+	```
+1. **Créer un fichier `src/index.html` :**
+	+ Y inclure une structure html de base
+    + Inclure le fichier `./build/app.bundle.js` dans la page
+	+ Tester la page `index.html` dans le navigateur et vérifier que la fonction helloWorld() affiche bien un message dans la console
+6. **Configurer webpack pour générer des fichiers source-maps** à l'aide de la clé de configuration "devtool" (cf. documentation : https://webpack.js.org/configuration/devtool/)
+7. **Passer du mode "production" (par défaut) au mode "development"** (cf. https://webpack.js.org/concepts/mode/) et constater la différence sur le fichier `app.bundle.js`
+
+## Pour aller plus loin
+- Adapter le tp précédent (ui-framework) en utilisant les modules
diff --git a/formations/ReacJs by Kumquats/1.2-webpack-modules/corrige-1.1-ui-framework/.babelrc b/formations/ReacJs by Kumquats/1.2-webpack-modules/corrige-1.1-ui-framework/.babelrc
@@ -0,0 +1,4 @@
+{
+	"presets": ["@babel/preset-env"],
+	"plugins": ["@babel/plugin-proposal-object-rest-spread"]
+}