Skip to content
Snippets Groups Projects
Select Git revision
  • 06f02cf37b75732a04f2d616c84f7752009789f5
  • master default protected
  • traduccio_barbara
  • Catalan-translation
  • feature/cesium_plus_pod_2
  • feature/add_pubkey_icon
  • feature/startup_node_selection
  • develop
  • feature/android_api_19
  • Vivakvo/cesium-patch-8
  • gitlab_migration_1
  • dev
  • rml8
  • v1.6.12
  • v1.6.11
  • v1.6.10
  • v1.6.9
  • v1.6.8
  • v1.6.7
  • v1.6.6
  • v1.6.5
  • v1.6.4
  • v1.6.3
  • v1.6.2
  • v1.6.2-alpha
  • v1.6.1
  • v1.6.0
  • v1.5.12
  • v1.5.11
  • v1.5.10
  • v1.5.9
  • v1.5.8
  • v1.5.7
33 results

development_tutorial-02.md

Blame
  • Forked from clients / Cesium-grp / Cesium
    1679 commits behind the upstream repository.

    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

    Avant de faire ce tutoriel, vous devez :

    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/items_parameters.html.

    Ajouter un nouvel élément dans la liste des paramètres, c'est à dire un nouveau tag <ion-item>, en dessous les autres tag du même nom :

       (...)
    
       <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>

    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 !

    Niveau VII : Publier vos modifications

    Objectif : Devenir contributeur officiel, en publiant votre code !

    Faire un 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.

    Note : Depuis les RML7, ce ticket a été fermé. Vous pouvez donc continuer ce niveau, en ajoutant d'autres variables manquantes (cf paragraphe suivant), puis publier vos modifications : la démarche du pull request reste la même.

    Niveau VIII : Modification libre

    Objectif : A vous maintenant d'ajouter les informations manquantes, et qui semblent intéressantes.

    Ajouter de nouvelles variables

    Pour vous faire la main sur les modifications dans Cesium, vous pouvez ajouter d'autres paramètres manquants de la monnaie. Par exemple, parmi 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 -->

    La Suite ?!

    Vous pouvez maintenant poursuivre avec les niveaux qui suivent. Nous y verrons comment compiler et déployer Cesium sur Android, puis comment ajouter un plugin, et même ajouter un graphique dynamique !

    Voir la suite ici >>