Compare revisions

 * 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

## 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

## 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

      "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": {

      "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": {

;

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;

    });

  };

  $scope.medianTime  = 0;

  $scope.difficulty  = 0;

  $scope.Nprev = 0;

  $scope.stepMax = 0;

  $scope.screen = UIUtils.screen;

  $scope.$on('$ionicView.enter', function(e, state) {

          $scope.sigStock = json.sigStock;

          $scope.sigWindow = json.sigWindow;

          $scope.sigPeriod = json.sigPeriod;

          $scope.stepMax = json.stepMax;

        }),

      // Get the current block informations

          <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>