RML8 / Contribuer à Cesium > Niveau VII et VIII (Android)

Présentation

Cet article est le 3ème tutoriel d’inititation pour contribuer à Cesium.
Vous allez y apprendre à déployer et tester Cesium sur téléphone Android.

A vos téléphones !

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 VII : Installation des outils de développement Android

Ce niveau vise à obtenir les outils de base pour exécuter le code source, et vérifier son bon fonctionnement. Vous y réaliserez :

  • l’installation du JDK;
  • l’installation du logiciel Android Studio;
  • configurer un lanceur : l’émulateur Android et/ou un téléphone Android.

Installer JDK

Le JDK ou Java Development Kit

Vous pouvez la télécharger sur le site d’Oracle.

À vous de télécharger le bon fichier en fonction de votre OS.

Il ne vous reste plus qu’à l’installer normalement.

Installer Android Studio

Vous trouverez toute les sources a cette adresse AndroidStudio-Downloads

Pour Windows télécharger le fichier sans SDK Android:

Sous Linux

Il vous suffit de décompresser le fichier ZIP, d’ouvrir un terminal dans ce dossier et de taper la commande:

./bin/studio.sh

Sous Windows et Mac OS

Il vous suffit d’installer l’exécutable que vous venez de télécharger.

Toutes machines confondues

A la fin de l’installation ou au premier lancement, Andorid Studio vous indiqueras que vous ne possédez pas de SDK et vous proposera de l’installer. Si vous l’avez déjà installé vous pouvez indiqué ou il se trouve.Sinon installer la version qu’il vous propose.

Configuration du lanceur

Vous pouvez choisir de lancer Cesium :

  • Via l’émulateur intégré à Android Studio;
  • ou bien directement sur votre téléphone.

(ou les deux !)

Configurer un émulateur Android

Pour configurez un émulateur, ouvrez Android Studio.

Cliquez sur l’icone suivante :

La fenêtre qui s’ouvre vous propose de créer une Virtual Device.

Suivez le étapes de l’assistant, en choissant le modèle que vous voulez simuler. Choissiez plutôt un modèle récent, car Cesium à parfois de mauvais affichage sur des versions d’Android plus anciennes.

Configurer un téléphone Android

Si vous voulez executer Cesiumdirectement sur votre téléphone, vous dvez au préalable le configurer en mode développeur.

Suivant la version d’Android :

  • Android 2.3: Settings> Applications> Development> USB Debugging
  • Android 4.0 : Settings> Developer Options> USB Debugging
  • Android 4.1 : Settings> Developer Options> USB Debugging
  • Android 4.2 et + :
    • Allez dans Settings
    • Cliquez rapidement, et plein de fois sur About phone (à propos)
    • Le mode développeur finit par s’activer.
      Si cela ne fonctionne pas, consultez cette vidéo

Branchez votre téléphone à votre ordinateur, par prise USB.

Niveau VIII : Lancer l’application sur Android

Lancement sur émulateur

Positionnez-vous dans le projet Cesium, puis executer la commande Ionic suivante :

 cd cesium 
 ionic emulate android

Lancement sur téléphone

Positionnez-vous dans le projet Cesium, puis executer la commande Ionic suivante :

 cd cesium 
 ionic run android

Si un téléphone est bien branché, l’application va être compilée, puis déployée.
La commande devrait se terminer ainsi :

(...)
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 6.884 secs
Built the following apk(s): 
        /home/blavenie/git/cesium/platforms/android/build/outputs/apk/android-debug.apk
ANDROID_HOME=/opt/android-sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
No target specified, deploying to device '32337EEC6F1600EC'.
Skipping build...
Built the following apk(s): 
        /home/user1/git/cesium/platforms/android/build/outputs/apk/android-debug.apk
Using apk: /home/user1/git/cesium/platforms/android/build/outputs/apk/android-debug.apk
Package name: fr.duniter.cesium
LAUNCH SUCCESS

Lancement par Android Studio

Une fois l’un ou l’autre des lancements précédents a été fait (ionic emulate ou ionic run), vous pouvez ouvrir le projet directement dans Android Studio. Ionic a en effet tout déjà configuré pour vous !

Ouvrez Android Studio.

Choisir File > New... > Import Project... (ou directement Import Project... dans l’assistant de démarrage).

Sélectionnez le dossier cesium/plateforms/android, puis cliquez sur le bouton OK.

Android Studio va charger le projet, puis compiler le code.

Lancez l’application :

  • soit en mode normal, en cliquant sur “Run” (ou via le raccourcis clavier Maj + F10);
  • soit en mode mode débug, en cliquant sur l’icone (ou via le raccourcis clavier Maj + F9).

Choisissez ensuite l’appareil sur lequel lancer l’application (émulateur ou téléphone).

Une console de log doit s’ouvrir :

Vous y retrouverez tous les logs utilisés dans le code (via console.log() ou console.debug()).
Vous ne pourrez pas débugger le Javascript : cela vous sera donc fortement utile !

La Suite ?

La prochaine étape consiste à installer et configurer un noeud ElasticSearch Duniter4j, pour activer les fonctionnalités de Cesium+ (profils, messages privées, etc.).

Voir la suite >>

J’ai des soucis quand j’essaie de faire le cordova platform add android (a priori nécessaire avant de pouvoir faire ionic run android) :
Running command: /home/youpeek/workspace/rml8/cesium/hooks/after_prepare/uglify.js /home/youpeek/workspace/rml8/cesium
module.js:327
throw err;
^

Error: Cannot find module '/home/youpeek/workspace/rml8/cesium/node_modules/cordova-uglify/node_modules/uglify-js’
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/home/youpeek/workspace/rml8/cesium/hooks/after_prepare/uglify.js:11:16)
at Module._compile (module.js:409:26)
at Object.Module._extensions…js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
Error: Hook failed with error code 1: /home/youpeek/workspace/rml8/cesium/hooks/after_prepare/uglify.js

J’ai tenté un npm install -g cordova-uglify et un npm install -g uglify-js mais ça n’a pas aidé… Des tuyaux ?

Merci d’avance !

Sqk

npm install dans le dossier cordova-uglify du module node !

Nickel, le platform add est passé, merci ! Je testerai tout ça après le Capitole…

1 Like