From 2b13070a98006bb149ea8ab6d16c02142bc14802 Mon Sep 17 00:00:00 2001 From: blavenie <benoit.lavenier@e-is.pro> Date: Thu, 26 Jan 2017 10:03:52 +0100 Subject: [PATCH] doc/tuto: add tuto for Android --- doc/fr/development_tutorial-01.md | 6 +- doc/fr/development_tutorial-02.md | 2 +- doc/fr/development_tutorial-03.md | 167 +++++++++++++++++++++++------- doc/fr/development_tutorial-04.md | 78 ++++++++++++++ 4 files changed, 213 insertions(+), 40 deletions(-) create mode 100644 doc/fr/development_tutorial-04.md diff --git a/doc/fr/development_tutorial-01.md b/doc/fr/development_tutorial-01.md index 21afb29d..57e5d66d 100644 --- a/doc/fr/development_tutorial-01.md +++ b/doc/fr/development_tutorial-01.md @@ -386,7 +386,9 @@ Découvrez le code en déroulant l'action pas à pas. > Utiliser les touches de `F9` à `F11`, pour rentrer dans une méthode (F11), avancer pas à pas (F10) ou jusqu'au prochain point d'arrêt (F9), etc. -Vous pouvez maintenant poursuivre avec les niveaux qui suivent. -Nous y verrons comment modifier un écran de Cesium. + +## 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 index b847b6b2..1af9e3ca 100644 --- a/doc/fr/development_tutorial-02.md +++ b/doc/fr/development_tutorial-02.md @@ -162,6 +162,6 @@ Autre modification que vous pouvez faire : la correction de la formule du DU (cf ## 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. +Vous pouvez maintenant poursuivre avec les niveaux qui suivent. Nous y verrons comment compiler et déployer Cesium sur Android, puis comment ajouter des graphiques dynamiques. [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 index cf0df65d..ad68c418 100644 --- a/doc/fr/development_tutorial-03.md +++ b/doc/fr/development_tutorial-03.md @@ -1,78 +1,171 @@ ## Introduction -Cet article est un tutoriel pour développer sur Cesium+, en utilisant les capacités de l'ES API portée par Duniter4j. +Cet article est un tutoriel pour développer sur Cesium, pour compiler et tester l'application sous Android. ## 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. +L'objectif ici est d'installer les outils de base pour compiler et vérifier son bon fonctionnement sous Android. Vous y réaliserez : </p> -Quand l'utilisateur cliquera sur le champ "dividende universel" de la page suivante : http://cesium.duniter.fr/#/app/currency/view/lg/ +- l'installation du `JDK` +- l'installation du logiciel `Android Studio` +- l'installation de l'émulateur `KVM` +- l'installation du `NDK Android` (optionnel - sera nécessaire plus tard) -### Récupérer le code (tag rml8) +### Installation des logiciels -Passez sur la branche du code #rml8 : https://github.com/duniter/cesium/tree/rml8 +#### Installer JDK -### Démarrer Cesium +Le JDK ou _Java Development Kit_ -Lancer Cesium : +Vous pouvez la télécharger sur le site [d'Oracle](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). + +<img src="https://forum.duniter.org/uploads/default/original/1X/fef4f4dfe7c2168cb27c9e7f5e399fd547ce774a.png" width="400"> + +En fonction de votre système d'exploitation, téléchargez correspondant. + +Installez ensuite le fichier normalement, en suivant les étapes guidées. + +#### Installer Android Studio + +Vous trouverez tous les fichiers à l'adresse [AndroidStudio-Downloads](https://developer.android.com/studio/index.html#downloads) + +Pour Windows télécharger le fichier sans SDK Android: + +<img src="https://forum.duniter.org/uploads/default/original/1X/3b8fa2f5c0465b13ae5ce74d49702e0c9f027866.png" width="690" height="237"> + +##### Sous Linux + +Il vous suffit de décompresser le fichier ZIP, d'ouvrir un terminal dans ce dossier et de taper la commande: +```bash +./bin/studio.sh +``` + +##### Sous Windows et Mac OS + +Installez l'exécutable que vous avez précédemment téléchargé. + +##### Toutes machines confondues + +A la fin de l'installation ou au premier lancement, Android Studio vous indiquera que vous ne possédez pas de SDK et vous proposera de l'installer : + +- Si vous l'avez déjà installé vous pouvez indiqué où il se trouve. +- Sinon installez la version qu'il vous propose. + + +#### Installer NDK (optionnel) + +> Le NDK est utilisé pour l'exécution de code sous C++, notamment la librairie de cryptographie NaCL. +> Cette étape est pour le moment optionnelle (pour les experts seulement). + +Vous pouvez le télécharger à l'adresse : [ce site](https://developer.android.com/ndk/downloads/index.html) + +Attention : n'installez pas la version 12 du NDK. Elle n'est pas encore stable. + +Encore une fois téléchargé la bonne version, décompressez le fichier à coté de votre SDK. + +Sous Android Studio allez dans le menu `File > Project Structure...` + +<img src="https://forum.duniter.org/uploads/default/original/1X/04e64b769cbd45b9d275cd5f81002a399a1a7684.png" width="300"> + +Une fenêtre comme celle-ci devrait s'ouvrir : + +<img src="https://forum.duniter.org/uploads/default/original/1X/ceb75301172038e75f5c43b328dd7febd7bedc7e.png" width="450"> + +Renseignez le chemin d'installation du NDK. + +#### Installer l'émulateur KVM (optionnel) + +Pour Linux / Debian uniquement : ```bash -cd cesium -ionic serve +sudo apt-get install kvm qemu-kvm libvirt-bin bridge-utils virt-manager +sudo groupadd libvirtd +sudo adduser `id -un` libvirtd ``` -### Démarrer le noeud ElasticSearch -Démarrer votre noeud ES : +##### En cas de problème... + +If you get this error : +``` +Cannot run program "/home/eis/android-sdks/build-tools/21.1.2/aapt": error=2, Aucun fichier ou dossier de ce type +``` +Installez deux librairies de compatibilité supplémentaires (solution provenant de [ce post](http://stackoverflow.com/questions/22701405/aapt-ioexception-error-2-no-such-file-or-directory-why-cant-i-build-my-grad)) : ```bash -cd duniter4j -mvn install -DskipTests -mvn install -Prun -pl duniter4j-elasticsearch +sudo apt-get install lib32stdc++6 lib32z1 ``` -### Ajout de la librairie D3.js -D3.js est une puissante librairie JS qui permet de faire de magnifiques graphiques. +## Niveau X: Lancement de l'application sous Android Studio + +### Configuration du projet + +Dans la ligne de commande (utilisée précédemment pour lancer `ionic serve`) lancer l'instalaltion du projet Cesium pour android : + +``` +ionic state restore +``` + +Normalement, cette commande devrait initialiser (entre autre) un répertoire `platforms/android`. -Vous pouvez utiliser `bower` pour installer la dépendance. -Puis ajouter la librairie dans la page principale de l'application : `www/index.html` +> Pour rappel: vérifier que votre ligne de commande est bien configurée : +> - Vous devez vous placer dans le répertoire de l'application : `cd cesium` +> - et fonctionner sous nodeJs v5 : `nvm use 5` (vérifier à l'aide de `node --version`) -### Gestion du controlleur +Lancez maintenant la compilation pour Android : -Editer le fichier `www/js/controllers.js`, et décommenter la ligne : -```json - (...) - 'cesium.currency-charts.controllers', - (...) ``` +ionic build android +``` + +Lancez maintenant Android Studio. Vous devriez arriver sur cette fenêtre: + +<img src="https://forum.duniter.org/uploads/default/original/1X/33266d44fdbfd6c8b44e46a3664edafacaf0a316.png" width="500"> + +Sélectionnez "Open an existing Android Studio project" et indiquez le dossier vers `cesium/platforms/android`. + +### Lancer l'application + +Pour pouvoir lancer un émulateur, on va devoir en créer un. + +Pour cela cliqué sur l'icone suivante : + +<img src="https://forum.duniter.org/uploads/default/original/1X/46e959d1e616e34972a41f4d120a1d4f5beb0955.png" width="690" height="42"> + +Une fenêtre va s'ouvrir et vous proposer de créer un "Virtual Device" suivez le logiciel. + +Si vous avez un téléphone Android vous pouvez le mettre en mode développeur et le brancher si vous souhaitez vois l'application sur votre téléphone. -Editez le fichier `www/js/controllers/currency-charts-controllers.js`. +Puis une fois l'émulateur de créer vous pouvez le bouton "Play" (<img src="https://forum.duniter.org/uploads/default/original/1X/70b2ce88a5e7aa5754f6a771cf5efed3c639a27b.png" width="46" height="44">) pour lancer l'application. +Vous pouvez aussi utiliser l'icone (<img src="https://forum.duniter.org/uploads/default/original/1X/b7c419b33a43f6a43c5b756074ee0c199072f7d1.png" width="40" height="44">) pour lancer l'application en mode debug. -A vous de jouer ! Il faut : +Android Studio vous demandera sur quel appareil vous souhaitez lancer l'application, sélectionner l'émulateur ou le téléphone et laissez faire. -- 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 +## Niveau XI: Lancement de l'application par `ionic` -Editez le template HTML, dans le fichier `www/templates/currency/charts/ud.html` +Vous pouvez maintenant utiliser directement l'outil `ionic` : -Regardez la documentation D3.js pour savoir comment faire la suite ! + - Soit pour lancer votre application sur une téléphone connecté : + ```bash + ionic run android + ``` -## La suite ? + - Soit pour la lancer sur une émulateur : + ```bash + ionic emulate android + ``` -Si vous avez réussi ce niveau, vous êtes vraiment un contributeur expert de Cesium ! +## La Suite ?! -Il ne vous reste qu'à publier le résultat ! ;) +Vous pouvez maintenant poursuivre avec les niveaux qui suivent. Nous y verrons comment ajouter des graphiques dynamiques à Cesium. -- sur le forum duniter, -- ou mieux via un `pull request` sur github. \ No newline at end of file +[Voir la suite ici >>](./development_tutorial-04.md) \ No newline at end of file diff --git a/doc/fr/development_tutorial-04.md b/doc/fr/development_tutorial-04.md new file mode 100644 index 00000000..cf0df65d --- /dev/null +++ b/doc/fr/development_tutorial-04.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 -- GitLab