doc/fr/development_tutorial.md → doc/fr/development_tutorial-01.md

@@ -312,3 +312,10 @@ Dans l'application web :
  * Vérifier que la console s'arrête sur le point d'arrêt.
 
 Pour découvrir le code, il est intéressant
+
+## La Suite ?!
+
+Vous pouvez maintenant poursuivre avec les niveaux qui suivent.
+Nous y verrons comment modifier un écran de Cesium.
+
+[Voir la suite ici >>](./development_tutorial-02.md)
\ No newline at end of file

doc/fr/development_tutorial-02.md

+## Présentation
+
+Cet article est le 2ème tutoriel d'initiation au code source du logiciel Cesium.
+
+Vous allez pouvoir comprendre le rôle des différentes couches logicielles,
+en les modifiant afin d'améliorer un écran de Cesium.
+
+## Prérequis
+
+### Connaitre les fonctionnalités
+
+Il nécessite que vous connaissiez déjà l'outil Cesium.
+Si ce n'est pas le cas, reportez vous à [la vidéo de présentation générale des fonctionnalités](https://www.youtube.com/watch?v=FQzGIzJf9Nw&list=PLr7acQJbh5rzgkXOrCws2bELR8TNRIuv0&index=6) (RML7) et à celle détaillant les nouveautés (RML8 - lien à venir)
+
+### Avoir atteint le niveau III : Mise en place de l'environnement
+
+Pour mettre en place votre environnement de développement, suivez le [1er tutoriel de mise en place de l'environnement](https://github.com/duniter/cesium/blob/master/doc/fr/development_tutorial.md) (au moins jusqu'au niveau III)
+
+## Niveau VI : Afficher un paramètre monétaire manquant
+
+__Objectif :__ Dans ce niveau, l'objectif est d'afficher dans la page [`Monnaie`](http://cesium.duniter.fr/#/app/currency/view/lg/) le paramètre monétaire `stepMax`.
+
+> Pour rappel, `stepMax` est la distance maximale entre un membre et un postulant, pour que ce dernier puisse rentrer dans la toile de confiance.
+
+### Modifier le template HTML
+
+Ouvrez le fichier de template `/www/templates/currency/tabs/view_parameters.html`.
+
+Ajouter un nouvel élément dans la liste des paramètres, c'est à dire un nouveau tag `<ion-item>`, sous le tag `<ion-list>` : 
+
+```html
+ <ion-list>
+
+   (...)
+
+   <ion-item class="item-icon-left">
+     <i class="icon ion-steam"></i>
+     <span translate>CURRENCY.VIEW.STEP_MAX</span>
+     <span class="badge badge-stable">{{stepMax}}</span>
+   </ion-item>
+
+ </ion-list>
+```
+
+Si vous rafraichissez la page `Monnaie` de votre navigateur, vous devriez observer la modification :
+
+<img src="https://forum.duniter.org/uploads/default/original/2X/1/19a637b1fa847aa5bbb18565737e9e5e28729221.jpg" width="431" height="97">
+
+### Internationliser un libellé
+
+La chaine `CURRENCY.VIEW.STEP_MAX` représente en réalité une **clef de message internationalisé**.
+Il nous faut maintenant ajouter la traduction de cette clef.
+
+> L'icone est configurée simplement par la classe CSS `ion-stream`. Pour connaitre les icones disponble, consultez  
+le site [ionicons.com](http://ionicons.com/)
+
+Ouvrez le fichier `www/i18n/locale-fr-FR.json` et identifiez l'élément `CURRENCY` puis `VIEW`.
+Ajouter la traduction pour notre nouvelle clef :
+
+```json
+  "CURRENCY": {
+   (...)
+
+  "VIEW": {
+    "TITLE": "Monnaie",
+    (...)
+    "SIG_WINDOW": "Maximum delay a certification can wait<br/>before being expired for non-writing.",
+    "STEP_MAX": "Distance maximale dans la toile de confiance<br/>entre chaque membre et un nouvel entrant"
+  }
+}
+```
+
+N'oubliez pas **d'ajouter une virgule** sur la ligne qui précéde...
+
+> Note : l'internationalisation de Cesium utilise le plugin AngularJS [angular-translate](https://github.com/angular-translate/angular-translate).
+> Suivant les cas, il est possible d'utiliser des tags HTML, comme ici le tag `<br/>`
+
+Refarichissez la page de votre navigateur : la clef a bien été traduite ! 
+
+<img src="https://forum.duniter.org/uploads/default/original/2X/6/6bd04622dd2eb59f6d716ae9e2f114276e4ca35a.jpg" width="690" height="116">
+
+Recommencez l'opération dans les **autres fichiers de traduction** présents dans `www/i18n` : 
+
+```
+    (...)
+    "STEP_MAX": "Maximum distance between<br/>each WoT member and a newcomer"
+   }  
+
+```
+
+### Ajouter d'une variable dynamique
+
+Il ne reste plus qu'à afficher dynamiquement la valeur de notre paramètre `stepMax`. Nous utiliserons les fonctions de `data-binding` que permet AngularJS.
+
+> Dans AngularJS, c'est un controlleur qui gère le remplissage des valeurs, typiquement à partir de données obtenues sur le réseau.
+
+Ouvrez le controlleur `CurrencyViewController` présent dans le fichier `www/js/controllers/currency-controllers.js`
+Ce controlleur fait déjà un appel à l'API Duniter [`/blockchain/parameters`](http://cgeek.fr:9330/blockchain/parameters).
+
+Identifiez la fonction `loadParameters()`.
+Modifiez le code de retour de l'appel `/blockchain/parameters`, pour stocker la valeur `stepMax` dans le `$scope` : 
+
+```
+function CurrencyViewController($scope, $q, $translate, $timeout, BMA, UIUtils, csSettings, csCurrency, csNetwork) {
+  // Ajout d'une propriété qui stockera la valeur de stepMax
+  // (On met ici la valeur par défaut)
+  $scope.stepMax = 0;
+  (...)
+
+  $scope.loadParameter = function() {
+    if (!$scope.node) {
+      return;
+    }
+    var M;
+    return $q.all([
+
+    // Appel de /blockchain/parameters sur le noeud Duniter
+        $scope.node.blockchain.parameters() 
+         .then(function(json){
+            $scope.currency = json.currency;
+            (...)
+            // Mise à jour dela valeur, à partir du résultat que renvoi le noeud Duniter
+            $scope.stepMax = json.stepMax;
+          }),
+          (...)
+```
+
+> L'objet '$scope' sert à manipuler des valeurs partagées entre le controlleur et le template.
+> La valeur que nous avons mise dans `$scope.stepMax` est affichée grâce à l'instruction `{{stepMax}}` que vous avez mise dans le template HTML.
+
+Votre navigateur doit maintenant afficher : 
+
+<img src="https://forum.duniter.org/uploads/default/original/2X/3/3df8cbd2133ea9e9a28855f4b50413846fdf292c.jpg" width="519" height="85">
+
+Bravo, vous savez maintenant afficher de nouvelle valeurs dans les écrans de Cesium !
+
+### Devenir contributeur officiel > faire `pull request`
+
+La modification que vous venez de faire correspond en réalité au [ticket gihub #209](https://github.com/duniter/cesium/issues/209).
+Pour lui adjoindre votre modification, et ainsi **devenir officiellement contributeur** de Cesium : 
+
+ * Faites un `git commit` pour valider votre code;
+ * Puis un `git push` pour envoyer sur votre repo GitHub.
+ * Dans github, connectez sur votre compte;
+ * Ouvrez votre dépot `Cesium`
+ * Cliquer sur `New pull request`, en indiquant dans le titre la référence au ticket : `#209`
+
+Votre contribution est maintenant visible par les développeurs de Cesium, qui pourront plus facilement intégrer votre code.
+
+### Pour aller plus loin : d'autres variables ?  (optionnel)
+
+Pour vous faire la main sur les modifications dans Cesium, vous pouvez ajouter d'autres paramètres manquants de la monnaie, notamment ceux qui concernent la Blockchain  : `xpercent`, `percentRot`, `blocksRot`...
+
+Vous trouverez leur définition dans la [documentation du protocole Duniter](https://github.com/duniter/duniter/blob/master/doc/Protocol.md#protocol-parameters).
+
+Astuce : pour séparer les différentes partie de l'écran, ajoutez un séparateur, c'est à dire un tag `<div>` avec la classe CSS `item item-divider` :
+
+```html
+  <div class="item item-divider">
+      <span translate>CURRENCY.VIEW.BLOCKCHAIN_DIVIDER</span>
+  </div>
+  <!-- paramètres relatifs à la blockchain -->
+```
+
+Autre modification que vous pouvez faire : la correction de la formule du DU (cf [ce ticket](https://github.com/duniter/cesium/issues/210)).
+
+## La Suite ?!
+
+Vous pouvez maintenant poursuivre avec les niveaux qui suivent. Nous y verrons comment déployer et tester Cesium sur un téléphone Android.
+
+[Voir la suite ici >>](./development_tutorial-03.md)
\ No newline at end of file

doc/fr/development_tutorial-03.md

+## Introduction
+
+Cet article est un tutoriel pour développer sur Cesium+, en utilisant les capacités de l'ES API portée par Duniter4j.
+
+## Prérequis
+
+Avant de faire ce tutoriel, vous devez : 
+ 
+ - Avoir suivi les tutoriels sur Cesium [jusqu'au niveau VII](./development_tutorial-02.md)
+ - Avoir suivi le tutoriel sur Duniter4j [jusqu'au niveau V](https://github.com/duniter/duniter4j/blob/master/doc/fr/development_tutorial.md).
+
+## Niveau IX
+
+### Objectif
+
+L'objectif ici est de réaliser un graphique représentant l'évolution de montant du dividende universel.
+
+Quand l'utilisateur cliquera sur le champ "dividende universel" de la page suivante : http://cesium.duniter.fr/#/app/currency/view/lg/  
+
+### Récupérer le code (tag rml8)
+
+Passez sur la branche du code #rml8  : https://github.com/duniter/cesium/tree/rml8
+
+### Démarrer Cesium
+
+Lancer Cesium : 
+
+```bash
+cd cesium
+ionic serve
+```
+### Démarrer le noeud ElasticSearch 
+
+Démarrer votre noeud ES :  
+
+```bash
+cd duniter4j
+mvn install -DskipTests
+mvn install -Prun -pl duniter4j-elasticsearch 
+```
+
+### Ajout de la librairie D3.js
+
+D3.js est une puissante librairie JS qui permet de faire de magnifiques graphiques.
+
+Vous pouvez utiliser `bower` pour installer la dépendance.
+Puis ajouter la librairie dans la page principale de l'application : `www/index.html` 
+
+### Gestion du controlleur 
+
+Editer le fichier `www/js/controllers.js`, et décommenter la ligne : 
+```json
+   (...)
+   'cesium.currency-charts.controllers',
+   (...)
+```
+
+Editez le fichier `www/js/controllers/currency-charts-controllers.js`.
+
+A vous de jouer ! Il faut : 
+
+- Remplir la requete POST vers le noeud ES sur l'index `/test_net/block/_search`; cf méthode `$scope.loadUds()';
+- Traiter le retour de la requête, pour la transformer dans le format attendu par D3.js.
+
+### Template
+
+Editez le template HTML, dans le fichier `www/templates/currency/charts/ud.html`
+
+Regardez la documentation D3.js pour savoir comment faire la suite !
+
+## La suite ?
+
+Si vous avez réussi ce niveau, vous êtes vraiment un contributeur expert de Cesium !
+
+Il ne vous reste qu'à publier le résultat ! ;) 
+
+- sur le forum duniter,
+- ou mieux via un `pull request` sur github.
\ No newline at end of file

www/i18n/locale-en.json

@@ -146,7 +146,8 @@
       "SIG_QTY_RULE": "Required certifications<br/>to become a member",
       "SIG_STOCK": "Maximal number of certifications<br/>sent by member",
       "SIG_PERIOD": "Minimum delay between 2 certifications<br/>of a same issuer.",
-      "SIG_WINDOW": "Maximum delay a certification can wait<br/>before being expired for non-writing."
+      "SIG_WINDOW": "Maximum delay a certification can wait<br/>before being expired for non-writing.",
+      "STEP_MAX": "Maximum distance between<br/>each WoT member and a newcomer"
     }
   },
   "PEER": {

www/i18n/locale-fr-FR.json

@@ -145,8 +145,9 @@
       "UD_RULE": "Dividende universel (formule)",
       "SIG_QTY_RULE": "Nombre de certifications requises<br/>pour devenir membre",
       "SIG_STOCK": "Nombre maximal de certifications émises<br/>par membre",
-      "SIG_PERIOD": "Délai minimal d'attente entre 2 certifications<br/>successives émises par une même personne.",
-      "SIG_WINDOW": "Délai maximal d'attente avant<br/>prise en compte d'une certification"
+      "SIG_PERIOD": "Délai minimal d'attente entre 2 certifications<br/>successives émises par une même personne",
+      "SIG_WINDOW": "Délai maximal d'attente avant<br/>prise en compte d'une certification",
+      "STEP_MAX": "Distance maximale dans la toile de confiance<br/>entre chaque membre et un nouvel entrant",
     }
   },
   "PEER": {

www/js/controllers/currency-charts-controllers.js

@@ -26,51 +26,34 @@ angular.module('cesium.currency-charts.controllers', ['cesium.services'])
 
 ;
 
-function CurrencyUdController($scope, BMA, $q) {
+function CurrencyUdController($scope, BMA, $q, csHttp) {
   'ngInject';
 
   $scope.$on('$ionicView.enter', function() {
       $scope.loadUds()
-      .then(function (dataXY) {
+      .then(function (res) {
         // TODO: plot
+        console.log(res);
       });
     });
 
   $scope.loadUds = function() {
-    return $q(function(resolve, reject) {
-      BMA.blockchain.stats.ud()
+    var request = {
+        query: {
+          /*TODO */
+        },
+        from: 0,
+        size: 10000,
+        sort: "number"
+        _source: ['number','dividend','medianTime']
+      };
+
+    var httpPost = csHttp.post('localhost', '9200', '/test_net/block/_search?pretty');
+    return httpPost(request)
     .then(function (res) {
-        if (res.result.blocks.length) {
-          var uds = [];
-          var blockRequests = [];
-          res.result.blocks.forEach(function(number) {
-            blockRequests.push(
-              BMA.blockchain.block({ block: number })
-              .then(function(block){
-                uds.push({
-                  number: block.number,
-                  dividend: block.dividend,
-                  medianTime: block.medianTime
-                });
-              })
-            );
-          });
-          $q.all(blockRequests)
-          .then(function() {
-            _.sortBy(uds, function(b){return b.number;});
-            var x = uds.reduce(function(values, block) {
-              return values.concat(block.medianTime);
-            }, []);
-            var y = uds.reduce(function(values, block) {
-              return values.concat(block.dividend);
-            }, []);
-            resolve({x: x, y: y});
-          });
-        }
-        else {
-          resolve([]);
-        }
-      });
+      console.log(res);
+      // TODO transform data into array (X, Y, etc.)
+      return res;
     });
   };
 

www/js/controllers/currency-controllers.js

@@ -109,6 +109,7 @@ function CurrencyViewController($scope, $q, $translate, $timeout, BMA, UIUtils,
   $scope.medianTime  = 0;
   $scope.difficulty  = 0;
   $scope.Nprev = 0;
+  $scope.stepMax = 0;
   $scope.screen = UIUtils.screen;
 
   $scope.$on('$ionicView.enter', function(e, state) {
@@ -192,6 +193,7 @@ function CurrencyViewController($scope, $q, $translate, $timeout, BMA, UIUtils,
           $scope.sigStock = json.sigStock;
           $scope.sigWindow = json.sigWindow;
           $scope.sigPeriod = json.sigPeriod;
+          $scope.stepMax = json.stepMax;
         }),
 
       // Get the current block informations

www/templates/currency/tabs/view_parameters.html

@@ -108,4 +108,10 @@
           <span translate>CURRENCY.VIEW.SIG_WINDOW</span>
           <span class="badge badge-stable">{{sigWindow | formatDuration}}</span>
         </ion-item>
+
+        <ion-item class="item-icon-left">
+          <i class="icon ion-steam"></i>
+          <span translate>CURRENCY.VIEW.STEP_MAX</span>
+          <span class="badge badge-stable">{{stepMax}}</span>
+        </ion-item>
     </ion-list>