RML8 / Contribuer à Cesium > Niveau VI

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

 <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.stepMax est 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 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.

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.

Voir la suite ici >>

Etapes de compilation iOS:

prérequis :
installer Xcode : https://developer.apple.com/xcode/
peut-être besoin d’installer une library de compilation/simulation (SDK) iOS.

installer nvm (curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash)
puis node v>=5 & npm
suivre l’install normale

pour lancer la compilation pour iOS, il faut ajouter la plateforme iOS (normalement déjà OK)
ionic platform add ios

puis compiler
ionic build ios
Cela va créer un projet XCode dans platforms/ios

il est possible de simuler l’exécution sur iOS en exécutant :
ionic emulate ios
ou depuis le projet Xcode

Le projet ayant été créé automatiquement, il peut-être nécéssaire de créer un utilisateur/développeur et de l’ajouter en tant que team developer pour signer l’application.

Depuis XCode, il est aussi possible de tester l’app sur iphone en en branchant un à l’ordi et en le selectionnant dans la liste des device.
Le fichier .app à distribuer est dans les sous dossiers de build.

1 « J'aime »

Merci beaucoup pour ce mode opératoire pour iOs.
j’ai copier les tuto Cesium dans le repo GitHub : https://github.com/duniter/cesium/tree/master/doc/fr

J’ajouterai d’ici peu ces éléments, qui nous permettront d’avoir une version pour iOs.

Bravo et merci pour cette contribution.

Argh je suis en train de m’arracher les cheveuxavec git pour corriger ma pull request :cry:
C’est ça aussi de s’habituer à utiliser Tortoise sous Windows au boulot, j’ai pas appris à utiliser les commandes git et diff en cli, j’ai du mal à voir quoi faire dans quel ordre (surtout que certains fichiers ont évolué entre temps dans le repo officiel)
Bon, ça sera pour plus tard, faudra que je reprenne les choses en main correctement après m’être documenté, je suis pas en état encore.
@kimamila si entre temps tu me refuses ma pull request je me vexerai pas :slight_smile: (mais si elle traîne je finirai bien par remettre ça d’équerre un jour d’ici la fin de l’année)

@gpsqueeek
Voici les commandes git en CLI qui j’utilise quotidiennement qui pourraient t’aider (à bien d’autres aussi) dans tes recherches :

  • git diff (–color-words=.) (–cached)
  • git status
  • git log (-3)
  • git add (-p) (fichier)
  • git commit (-m)
  • git stash (pop/apply)
  • git branch
  • git checkout -b < branch_name >
  • git merge < branch > (depuis une autre branche)
  • git remote add < name > < url >
  • git push (publish)

En effet, c’est une particularité de GitHub que je trouve particulièrement chiante (de plus quand l’on débute avec git).
Avec des fork GitHub, il faut forker de nouveau, supprimer l’ancien clone/fork et forker de nouveau.
Sinon, si tu exprimes le besoin, on peut te donner des droits dans l’organisation Duniter et tu pourra travailler dans des branches.
Ce qui est tellement plus pratique pour la fusion des révisions.

À noter qu’on peut faire sans branche mais en donnant les commandes pour ajouter un remote de type fetch sur le dépôt d’origine.

Ah, oui, c’est une bonne idée à laquelle j’avais pas pensée.

Hello

Merci pour vos conseils, je regarderai ça à tête reposée d’ici quelques… euh… jours / semaines, on verra :blush: