Différences

Ci-dessous, les différences entre deux révisions de la page.

--- progrem [2019/06/01 10:50] – bigMax
+++ progrem [2019/06/18 06:56] (Version actuelle) – bigMax
@@ Ligne 9: / Ligne 9: @@
   * La "tuyauterie" nécessaire à produire la sortie ne devrait pas apparaitre dans le Progrem. Il faut donc fournir une API au progrem qui permet de mettre en valeur l'algorithmie du Progrem. On peut envisager de fournir une API "localisé" pour traduire le Progrem en français, espagnol, ...
   * L'exécution du Progrem pourrait être effectué étape par étape comme avec un debugger pour améliorer la compréhension du lecteur. Cela nécessite la définition d'un formalisme qui permet à tous les Progrems de pouvoir être visualisé dans un tel cadre.
 ===== Un progrem qui déssine =====
 Un progrem qui dessine dessinerait des images fixes ou animées. Le dessin produit serait "responsive" : la taille du dessin est configurable.
+Je propose que le dessin soit constitué d'une grille de pixel. La fonction principale du Progrem serait de colorier chaque case une par une. La fonction est pure : elle reçoit les coordonnées d'une case et elle détermine la couleur de la case.
 ===== Le code d'un Progrem =====
 On se concentre sur l'algorithme principal, pas sur les api js. On soigne la compréhension de l'algorithme. On cache si possible le code inutile pour la transmission de l'intuition de ce que fait le code.
-<code js>
+Un premier progrem qui déssine le coeur déEugene Beutem est doté d'une fonction de coloriage comme celle-ci:
-function construireNouveauPixel(colonne, ligne, animation) {
+<code js>
-  imageIndex = animation.getImageIndex()
+function colorerProgrem ( colonne, ligne, contexte ) {
-  imagePrecedente = animation.getImagePrecedente()
+  var x = colonne * contexte.resolutionCartesienneEnX + contexte.decallageCartesienEnX;
+  var y = ligne * contexte.resolutionCartesienneEnY + contexte.decallageCartesienEnY;
-  si ( condition(ligne, colonne, animation) ) {
+  var equationEugenePartieGauche = Math.pow(Math.pow(x, 2) + Math.pow(y, 2) - 1, 3);
-    pixel = new Pixel(rose)
+  var equationEugenePartieDroite = Math.pow(x, 2) * Math.pow(y, 3);
-  } sinon {
+  var equationEugeneDifference = equationEugenePartieGauche - equationEugenePartieDroite;
-    pixel = new Pixel(bleu)
+  var couleur;
+  if ( equationEugeneDifference < 0 ) {
+    couleur = 'rgb(255, 102, 153)';
+  } else {
+    couleur = 'rgb(135, 206, 235)';
   }
-  return pixel;
+  return couleur;
-}
-for image i {
-  clearImage()
-  for ligne l {
-    ligne = image[l]
-    for colonne c {
-      si ( condition(c, l, i) ) {
-        pixel = ligne[c]
-        pixel.couleur = rose
-      }
-      paintPixel(pixel)
-    }
-    paintLigne(ligne)
-  }
-  paintImage(image)
 }
 </code>
+===== Mettre en avant le code du Progrem =====
+  * Colorer
+  * Surligner
+  * Souligner
+  * Encadrer
+  * Mettre en gras
+Stratégie :
+  * Attribuer une couleur aux variables à leur rencontre.
+  * Historiser dans une pile les affectations de variables.
+  * Colorer les blocks de code éxecutés (if / then / else)
+  * Mettre en exergue l'instruction en cours d'execution avec une flèche / encadré / surligné.
+  * Encadrer la case en cours de coloriage.
+  * Indiquer les index des lignes et colonnes.
+  * Historiser dans une pile les commentaires ou bien afficher dans une bulle les commentaires.
+  * Ajouter un bouton play / pause / next step.
+  * Ajouter une commande à "glissiere" pour choisir la vitesse de défilement du code (par ligne de code, par pixel, par ligne, par frame).
+  * Ajouter une commande à "glissiere" pour choisir le temps entre les étapes.
+  * Permettre la rédaction de Progrem en live dans un éditeur de texte.
 ===== Coder un lecteur de progrem en typescript =====
-Nous utiliserons npm (sudo apt install npm)
+Nous utiliserons le gestionnaire de paquet npm (sudo apt install npm).
+Nous délaigerons la compilation du typescript et la fabrication du bundle javascript à webpack
-Initialisation du projet
+==== Initialisation du projet ====
 <code>
 cd progrem-veiwer
 npm init
-npm i typescript --save-dev
+npm install webpack webpack-cli --save-dev
+npm install typescript ts-loader --save-dev
 ./node_modules/.bin/tsc --init
 </code>
-On peut customiser un peu la configuration de typescript pour generer les sourcemaps (ce sont les fichiers qui permettent de débugger), et changer le repertoire où est généré le code javascript en modifiant le fichier tsconfig.json et en spécifiant ces élements de configuration :
+Il faut ensuite configurer webpack en ajoutant à la racine du projet le fichier //webpack.config.js// suivant :
+<code>
+const path = require('path');
+module.exports = {
+  entry: './src/index.ts',
+  devtool: 'inline-source-map',
+  watch: true,
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ]
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  }
+};
+</code>
+Webpack se chargera alors de lire notre point d'entrée ./src/index.ts pour compiler tout le code typescript. Il placera alors tous les fichiers javascript dans le repertoire ./dist/.
+Il faut alors modifier le fichier package.json pour indiquer que l'on va déléguer le build à webpack en ajoutant le script "build" :
 <code>
-    "outDir": "dist",
+"scripts": {
-    "sourceMap": true,
+    "build": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+},
 </code>
-Enfin on peut démarrer le compilateur de typescript en mode "watch" pour générer le code à la volé en lançant la commande :
+Il ne nous reste alors plus qu'à lancer le build avec la commande :
+<code>
+npm run buil
+</code>
+Webpack restera alors démarré pour compiler et packager les sources du projet.
+==== Ajout du framework de test unitaire jasmine ====
+<code>
+npm install --save-dev jasmine-core jasmine @types/jasmine jasmine-ts
+./node_modules/.bin/jasmine init
+./node_modules/.bin/jasmine examples
+</code>
+avec un fichier jasmine.json comme suit:
+<code>
+{
+  "spec_files": [
+    "**/*[sS]pec.ts"
+  ],
+  "helpers": [
+    "helpers/**/*.ts"
+  ],
+  "stopSpecOnExpectationFailure": false,
+  "random": true
+}
+</code>
+et un fichier package.json dont le script test est définit ainsi :
+<code>
+"test": "jasmine-ts"
+</code>
+On peut alors lancer les test unitaires avec la commande :
 <code>
-./node_modules/.bin/tsc -w
+npm test
 </code>