diff --git a/doc/fr/cesium-pre-16-002-developpement_sous_Cesium-2016-11-18.odp b/doc/fr/cesium-pre-16-002-developpement_sous_Cesium-2016-11-18.odp new file mode 100644 index 0000000000000000000000000000000000000000..675e1b08a85618a9e87e3b8f1ed9b3ac58a35e83 Binary files /dev/null and b/doc/fr/cesium-pre-16-002-developpement_sous_Cesium-2016-11-18.odp differ diff --git a/doc/fr/development_tutorial.md b/doc/fr/development_tutorial-01.md similarity index 97% rename from doc/fr/development_tutorial.md rename to doc/fr/development_tutorial-01.md index 69db440749b6a158078e81950f013afbe06c648a..30b38697a9acbe965960db0301b05ab296b4b46d 100644 --- a/doc/fr/development_tutorial.md +++ b/doc/fr/development_tutorial-01.md @@ -311,4 +311,11 @@ Dans l'application web : * 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 \ No newline at end of file +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 diff --git a/doc/fr/development_tutorial-02.md b/doc/fr/development_tutorial-02.md new file mode 100644 index 0000000000000000000000000000000000000000..ebe59b3905e35ffccd60d2e606f63127596e97be --- /dev/null +++ b/doc/fr/development_tutorial-02.md @@ -0,0 +1,171 @@ +## 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 diff --git a/doc/fr/development_tutorial-03.md b/doc/fr/development_tutorial-03.md new file mode 100644 index 0000000000000000000000000000000000000000..cf0df65dd3e6018052da189d9e8a86bcb1cebda7 --- /dev/null +++ b/doc/fr/development_tutorial-03.md @@ -0,0 +1,78 @@ +## 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