Présentation
Cet article est le 2ème tutoriel d’initiation au code source du logiciel 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 (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 (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 le paramètre monétaire stepMax.
Pour rappel,
stepMaxest 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> :
<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 :
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
Ouvrez le fichier www/i18n/locale-fr-FR.json et identifiez l’élément CURRENCY puis VIEW.
Ajouter la traduction pour notre nouvelle clef :
"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.
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 !
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.
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.stepMaxest affichée grâce à l’instruction{{stepMax}}que vous avez mise dans le template HTML.
Votre navigateur doit maintenant afficher :
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.
Pour lui adjoindre votre modification, et ainsi devenir officiellement contributeur de Cesium :
- Faites un
git commitpour valider votre code; - Puis un
git pushpour 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.
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 :
<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).
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.
(mais si elle traîne je finirai bien par remettre ça d’équerre un jour d’ici la fin de l’année)