Add RML8 tutorial

doc/fr/development_tutorial-01.md

+## Introduction
+
+Cet article est un tutoriel d'initiation au code source du logiciel Cesium. Celui-ci vous permettra, à travers une succession d'étapes, d'accéder à la maîtrise des outils et méthodes utilisés quotidiennement par les développeurs de Cesium pour créer et modifier le logiciel.
+
+A la fin de ce tutoriel, vous serez donc *capable de modifier le logiciel*. Et si le cœur vous en dit, vous pourrez même réaliser une modification et partager celle-ci avec le dépôt de code principal, afin que celle-ci soit officiellement intégrée et disponible aux utilisateurs !
+
+A vos claviers !
+
+## Niveau I : récupérer le code source
+
+Ce premier niveau consiste à créer *votre propre version* des sources du logiciel et de récupérer cette copie sur votre ordinateur. Vous y produirez : 
+
+* votre propre compte *GitHub*
+* votre propre version du logiciel, votre *fork*
+* une copie locale des fichiers de code source provenant de votre *fork*
+
+### Créez un compte GitHub
+
+> Si vous disposez déjà d'un compte GitHub, vous pouvez passer cette étape.
+
+Rendez-vous sur https://github.com (site en anglais). Renseigner les 3 champs proposés :
+
+* Nom d'utilisateur
+* E-mail
+* Mot de passe
+
+<img src="https://forum.duniter.org/uploads/default/original/1X/13ade346327b73bbf1acc97027af147eeb4e9089.png" width="346" height="325">
+
+Vous recevrez probablement un e-mail de confirmation qu'il vous faudra valider. Une fois cette étape passée, vous devriez disposer d'un compte GitHub .
+
+### Forkez le dépôt principal
+
+Rendez-vous à l'adresse https://github.com/duniter/cesium. Cliquez sur le bouton « Fork » en dans le coin supérieur droit de la page :
+
+<img src="https://forum.duniter.org/uploads/default/original/1X/3b9228c664520496d6a7e86e3f9c4c438f111914.png" width="388" height="98">
+
+### Installer Git
+
+L'installation de Git dépend de votre système d'exploitation. Suivez simplement les indications présentes sur : https://git-scm.com/
+
+### Cloner votre fork
+
+A ce stade, vous êtes en mesure de récupérer votre version du code source (votre *fork*), afin de pouvoir travailler dessus.
+
+#### Ouvrez Git en ligne de commande
+
+Pour récupérer le code source, lancez Git en mode console.
+
+* Sous Linux et MacOS, ouvrez tout simplement le Terminal
+* Sous Windows lancez le programme *Git Bash* :
+
+<img src="https://forum.duniter.org/uploads/default/original/1X/6fc638dc0a22d88da7e84dbf0371e69747767f78.png" width="432" height="80">
+
+#### Clonez votre fork, en ligne de commande
+
+Retournez sur la page web GitHub, puis trouvez le bouton « Clone or download » : 
+Cliquez dessus, vous pourrez alors copier l'URL de clonage en cliquant sur l'icône de valise.
+
+Vous n'avez plus qu'à retourner dans votre console Git et saisir : 
+
+    git clone <coller l'URL copiée>
+
+ce qui donne dans mon cas : 
+
+```
+git clone https://github.com/blavenie/cesium.git
+Cloning into 'cesium'...
+ (...)
+Checking connectivity... done.
+```
+
+Si vous êtes arrivés à un comportement similaire, **bravo**, vous posséder désormais le code source Cesium !
+ 
+## Niveau II : Compilation et lancement dans un navigateur
+
+Ce second niveau vise à obtenir les outils de base pour exécuter le code source, et vérifier son bon fonctionnement. Vous y réaliserez : 
+
+* l'installation du moteur d'exécution JavaScript *Node.js*
+* la vérification du bon fonctionnement du code source *via* le lancement de l'application, en mode web.
+
+Si l'application se lance, vous aurez dores et déjà un environnement entièrement **fonctionnel** !
+
+### Installer Node.js
+
+#### Sous Linux / MacOS
+
+Installer Node.js est devenu extrêmement simple pour ces OS : un outil vous permet d'installer la version de Node.js que vous souhaitez, en changer quand vous voulez et sans conflit avec une version précédente : il s'agit de [nvm](https://github.com/creationix/nvm).
+
+Vous pouvez installer nvm avec la commande suivante :
+
+```bash
+curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash
+```
+
+Fermez puis rouvrez votre terminal, comme indiqué. Puis, installez Node.js (choisissez la version 5) : 
+
+```bash
+nvm install 5
+```
+
+Vous aurez alors la dernière version de la branche 5.x de Node.js prête à l'emploi.
+
+##### Outils de compilation
+
+Installer les outils nécessaires pour la compilation.
+```bash
+sudo apt-get install build-essential
+```
+
+#### Sous Windows
+
+Pour Windows, téléchargez la version 5 disponible sur le site officiel de Node.js : https://nodejs.org
+
+Puis lancez l'installeur ainsi téléchargé.
+
+### Installer les modules Node.js de Cesium
+
+Cesium repose sur des librairies tierce pour fonctionner appelées *dépendances*, comme par exemple des librairies de compilation (gulp, bower, ionic).
+
+Le fait d'avoir cloné les sources n'est en réalité pas suffisant pour lancer l'application. Nous devons obtenir le code des dépendances pour obtenir ainsi l'ensemble du code exécutable du programme. Pour ce faire, retournez dans la console Git et déplacez-vous dans le répertoire cloné : 
+
+```bash
+cd cesium
+```
+
+Puis, lancez le téléchargement et l'installation des modules Cesium à l'aide de la commande : 
+
+```bash
+npm install -g bower gulp ionic cordova
+```
+Puis pour les dépendances non globales :
+```bash
+npm install
+```
+
+> Le processus d'installation peut prendre plusieurs minutes. En effet, il faut télécharger toutes les dépendances de Cesium et même en compiler certaines.
+
+Si tout s'est bien passé, vous devriez obtenir une fin d'arborescence dans la console, et l'invité de commande devrait vous avoir rendu la main : 
+
+```bash
+├── bower@1.7.9 
+├─┬ gulp@3.9.1 
+│ ├── archy@1.0.0 
+│ ├─┬ chalk@1.1.3 
+ (...)
+│ ├─┬ through2@0.5.1 
+│ │ ├── readable-stream@1.0.34 
+│ │ └── xtend@3.0.0 
+│ └─┬ vinyl@0.2.3 
+│   └── clone-stats@0.0.1 
+└── shelljs@0.3.0 
+
+
+npm WARN cesium@0.0.1 No repository field.
+npm WARN cesium@0.0.1 No license field.
+
+blavenie@~$
+```
+
+> Il se peut que vous obteniez des messages `npm WARN [...]`. Rien de grave : comme le nom du message l'indique, il s'agit simplement d'un avertissement non bloquant pour la suite des événements.
+
+Puis installer les dépendences via bower :
+```bash
+bower install
+```
+
+### Installer un IDE
+
+Pour développer sous NodeJS, vous pouvez utiliser l'IDE de votre choix :
+
+ * Par exemple Sublime Text (non libre) : https://www.sublimetext.com/
+ * Autre possibilité : WebStorm (non libre mais fonctionnement très avancé). cf Post de cgeek sur le développement de Duniter.
+
+### Installer Chrome et/ou Firefox
+
+Pour débugger plus facilement le javascript Cesium, il est plus facile Les navigateur Chrome
+
+## Niveau III : maîtriser les commandes usuelles
+
+Ce troisième niveau permet de découvrir les quelques (cinq) commandes que vous utiliserez tout le temps si vous développez Cesium. Vous y apprendrez : 
+
+* à configurer Cesium, notamment le noeud Duniter qu'il utilisera (par défaut);
+* à le lancer Cesium dans votre navigateur;
+
+### Configurer Cesium
+
+La configuration par défaut de notre environnement est visible dans le fichier : app/config.json
+
+```bash
+{
+          "default": {
+            "APP_CONFIG": {
+              "DUNITER_NODE": "cgeek.fr:9330",
+              "NEW_ISSUE_LINK": "https://github.com/duniter/cesium/issues/new?labels=bug",
+              "TIMEOUT": 4000,
+              "DEBUG": false,
+              "NATIVE_TRANSITION": false
+            }      
+          },
+          "duniter-fr": {
+            "APP_CONFIG": {
+              "DUNITER_NODE": "cgeek.fr:9330",
+              "NEW_ISSUE_LINK": "https://github.com/duniter/cesium/issues/new?labels=bug",
+              "TIMEOUT": 4000,
+              "DEBUG": false,
+              "NATIVE_TRANSITION": false
+            }       
+          },
+         (...)
+        "dev": {
+            "APP_CONFIG": {
+              "DUNITER_NODE": "localhost:9201",
+              "TIMEOUT": 4000,
+              "DEBUG": false,
+              "NATIVE_TRANSITION": true
+            }
+          }
+}
+```
+
+Nous utiliserons la configuration "dev", pour utiliser votre noeud Duniter.
+Pour activer cette configuration, lancez la commande :
+
+```bash
+ gulp default --env dev
+```
+
+```bash
+[17:32:34] Using gulpfile ~/git/duniter/cesium/gulpfile.js
+[17:32:34] Starting 'sass'...
+[17:32:34] Starting 'config'...
+[17:32:34] Building `www/js/config.js` for `dev` environment...
+[17:32:34] Finished 'config' after 71 ms
+[17:32:36] Finished 'sass' after 1.2 s
+[17:32:36] Starting 'default'...
+[17:32:36] Finished 'default' after 10 μs
+```
+
+Cesium est maintenant configuré pour utiliser votre noeud Duniter local.
+
+### Lancer Cesium (mode web)
+
+Moment fatidique ! Il ne vous reste plus qu'à lancer l'application (en mode web) pour savoir si tout s'est bien passé et que vous êtes prêts pour la suite.
+Lancez la commande suivante : 
+
+```bash
+ionic serve
+```
+
+Une fois terminée, la commande affiche : 
+
+```bash
+Running live reload server: http://localhost:35729
+Watching: 0=www/**/*, 1=!www/lib/**/*
+Running dev server:  http://localhost:8100
+Ionic server commands, enter:
+  restart or r to restart the client app from the root
+  goto or g and a url to have the app navigate to the given url
+  consolelogs or c to enable/disable console log output
+  serverlogs or s to enable/disable server log output
+  quit or q to shutdown the server and exit
+
+ionic $ 
+```
+Vous pouvez ouvrir un navigateur web à l'adresse suivante : http://localhost:8100 
+Vous verrez la page d'accueil de Cesium.
+
+### Documentation
+
+Cesium utilise le framework Ionic, qui a une bonne documentation : http://ionicframework.com.
+
+Consulter ce site pour en savoir plus.
+
+## Niveau IV : Se repérer dans le code 
+
+### Répérer les couches logicielles
+
+Ouvrir votre IDE, et ouvrir le projet Cesium.
+
+Chercher et répérer dans le code : 
+
+* les templates HTML qui porte les IHM : www/templates
+* les controllers (JS)  : www/js/controllers
+* les services (JS)  : www/js/services
+
+### Aller plus loin dans le code
+
+Cesium s'appuie sur AngularJS. D'excellentes documentations sont présentes sur le web.
+
+__Note :__ La version d'AngularJS utilisée est une 1.x : la 2.x change complètement l'approche du code... La suite nous dira si Cesium passera à la version 2.
+
+## Niveau V : Debuggage
+
+### Sous Chrome
+
+Ouvrir l'application dans Chrome à l'adresse http://localhost:8100
+
+Ouvrir la console de développeur : "Option > Plus d'outils > Outils de développement"
+
+Dans l'explorateur de fichier javascript : 
+ 
+ * Chercher et visualisé le fichier "js/controllers/wot-controllers.js"
+ * Chercher la méthode "certifyIdentity()"
+ * Placer un point d'arrêt.
+
+Dans l'application web : 
+
+ * Dans le menu de gauche, cliquer sur "Annuaire";
+ * Recherche un utilisateur;
+ * Cliquer sur l'utilisateur pour visualiser son identité
+ * Cliquer sur le bouton "Certifier"
+ * 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