Développeur, ou plutôt créateur dans l’âme, j’ai bien tenté de créer une application Android par le passé, mais j’étais confronté à un problème classique, le standard de programmation qui est en JAVA pur, et ce n’est clairement pas un langage que je maîtrise …
J’ai tout de même tenté en installation Eclipse, l’outil de développement JAVA, et j’ai fait quelques pas avec, jusqu’à réussir en partie mon application, mais c’était très laborieux, et ma marge de manœuvre pour améliorer cette application était très restreinte …
J’ai donc laissé ce projet de coté quelques temps, avant de retomber dans l’envie de refaire cette application, et surtout en trouvant le moyen de coder l’ensemble dans des langages que je maîtrise bien plus, à savoir le HTML, le CSS, et le Javascript !
Et oui, pendant longtemps j’ai compris qu’il était impossible de créer une application Android, ou IOS, sans passer par des languages natifs, ou simplement du JAVA pur … les recherches google ne me donnait que peu de possibilité … jusqu’au jour où j’ai compris que l’on peut tout à fait le faire avec des langages web 😀
Le concept est alors un peu différent, et pas aussi optimisé que le JAVA lui même, mais il suffit largement pour bien des cas d’applications !
Il s’agit en fait de développer une “Webapp”, une application nativement pensée pour le web, mais qui sera encapsulé dans une “Webview” JAVA.
Enfin pour faire simple c’est comme si on développé un site web orienté mobile (en particulier pour les interactions et les formats d’écrans) mais que ce site web final est encapsulé dans une application JAVA ultra-basique, tout ceci grâce au projet OpenSource Phonegap Cordova !
Voilà maintenant que la possibilité est ouverte, voyons comment débuter dans la mise en place des outils nécessaire à la création d’une première application !
Comme je l’ai mentionné, on va ce tourner sur l’application OpenSource gratuite “Cordova“, issue du projet “Phonegap” (qui lui est la version payante).
1 > Installation de Cordova
Pour le fonctionnement, et tout simplement pour le téléchargement de Cordova, il nous faut un logiciel préalable, qui ce trouve être une framework JavaScript : NodeJS.
Celle ci va nous ouvrir la possibilité d’utiliser les premières lignes de commande nécessaire à l’installation de Cordova.
Rien de compliqué, il suffit de ce rendre sur le site officiel et de télécharger et installer la version recommandée (La LTS suffit) :
Une fois le logiciel installé sur votre Windows, vous pouvez passer à l’étape d’installation de Cordova.
Pour ce faire il faut ouvrir l’invite de commande, vous ouvrez le menu Windows, et dans la recherche vous écrivez simplement “cmd”
Pour lancer ce programme faite un clic droit dessus et sélectionner “Exécuter en tant qu’administrateur”.
La fenêtre de commande noir va s’ouvrir, et la première commande que l’on va écrire servira à bien vérifier que NodeJS à bien était installé.
node -v
Si une version apparaît, tel que “v8.9.2” pour moi par exemple, c’est que tout va bien on peut poursuivre en installant Cordova :
npm install cordova -g
Cette commande va lancer une installation complète de Cordova et va télécharger tout les fichiers requis, il faut donc laisser tourner un peu.
Une fois Cordova installé entièrement, on peut désormais créer des webapps avec celui ci. On va donc créer une première application de test afin de comprendre son fonctionnement et enchaîner avec Android Studio.
Avant de créer notre première application, on va déplacer notre dossier d’utilisation courant de notre fenêtre de commande dans un endroit plus approprié, on va ce rendre dans “mes documents” par exemple avec la commande suivante :
cd C:\Users\votrenomdutilisateur\Documents
On peut alors lancer la création d’une application sous Cordova ce fait en ligne de commande, avec cette commande :
cordova create nomdemonapplication
Qui renverra :
Creating a new cordova project.
Un nouveau dossier sera alors créé dans “mes documents”, il portera le nom de votre application “nomdemonapplication” et contiendra l’arborescence suivante :
A savoir que le dossier hooks contient des données de configuration de ton application Cordova.
Le dossier platforms contient lui les versions générées de tes applications, android, ios, et windows phone.
Le dossier plugins contient les plugins que l’on peut installer en supplément pour améliorer le fonctionnement des applications Cordova (comme la prise en charge de fonctionnalité mobile).
Et enfin, le plus important pour le développement de notre webapp, le dossier www, qui va donc contenir l’ensemble des fichiers HTML, CSS, et JavaScript à modifier pour créer notre application.
A noter aussi l’importance du fichier “config.xml” qui contient des données tel que le nom de l’application générée, sa version, le propriétaire, et autre. Il convient donc de l’adapter.
Par défaut Cordova génère une application basique qui renvoi sur une page de loading avec son logo, cette version de base est très bien et il suffit de la modifier directement pour créer sa propre webapp.
Vous pouvez d’ailleurs simplement lancer le fichier “index.html” du dossier www afin de voir le rendu tel quel de cette webapp.
2 > Installation de Android Studio et première compilation APK.
Avant de pouvoir importer notre projet Cordova sous Android Studio il nous faudra installer 2 logiciels de développement. Le Java SDK et le Android SDK. Ceci permettrons la compilation de Cordova de notre première APK et la génération des fichiers nécessaires à l’import sous Android Studio.
Pour le Java SDK, rendez vous sur le site http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html et télécharger la version adaptée à votre OS. Attention il faut bien télécharger le JDK et non pas le JSE.
Prévoyez dans les 200 mo pour ce fichier.
Quant au Android SDK figurez vous qu’il ce trouve dans Android Studio … ^^
Rendez vous sur le site officiel pour télécharger la dernière version du logiciel Android Studio, prévoyez dans les 700 mo.
https://developer.android.com/studio/index.html
Attention il faut penser à mettre à jour le SDK sous Android Studio pour s’épargner une erreur de ce type :
FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring root project 'android'. > You have not accepted the license agreements of the following SDK components: [Android SDK Platform 26]. Before building your project, you need to accept the license agreements and comp lete the installation of the missing components using the Android Studio SDK Man ager. Alternatively, to learn how to transfer the license agreements from one workstat ion to another, go to http://d.android.com/r/studio-ui/export-licenses.html * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED
Pour éviter celle ci, il faut lancer Android Studio, puis aller dans le menu en bas à droite et prendre le premier choix intitulé “SDK Manager“.
Il faut alors dans le volet latéral gauche et sélectionner “Appearance & Behavior” catégorie “System Settings” puis choix “Android SDK”
Dans cet espace il faudra simplement valider la mise à jour. Ceci lancera un téléchargement et validera votre accord à la licence du SDK Android.
Sans même chercher à en faire plus sur Android Studio, on peut passer à la compilation de notre projet Cordova qui au passage va générer un premier APK android.
Pour ce faire il faut retourner sous MSDoS, votre fenêtre de commande, et utiliser la commande suivante :
cd nomdemonapplication
pour ce rendre dans le dossier de notre application
puis
cordova platform add android
pour générer les fichiers relatifs à android dans le dossier “plateforms”
C:\Users\WolwX\Documents\nomdemonapplication>cordova platform add android Using cordova-fetch for cordova-android@~6.3.0 Adding android project... Creating Cordova project for the Android platform: Path: platforms\android Package: io.cordova.hellocordova Name: HelloCordova Activity: MainActivity Android target: android-26 Subproject Path: CordovaLib Android project created with cordova-android@6.3.0 Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the pro ject Installing "cordova-plugin-whitelist" for android This plugin is only applicable for versions of cordova-android gr eater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in. Adding cordova-plugin-whitelist to package.json Saved plugin info for "cordova-plugin-whitelist" to config.xml --save flag or autosave detected Saving android@~6.3.0 into config.xml file ... C:\Users\WolwX\Documents\nomdemonapplication>
Enfin les commandes suivantes permettant de nettoyer et compiler les fichiers nécessaires au bon import sous Android Studio :
cordova prepare
cordova build --debug
Commande qui va renvoyer ceci
C:\Users\WolwX\Documents\nomdemonapplication>cordova build --debug ANDROID_HOME=C:\Users\WolwX\AppData\Local\Android\sdk JAVA_HOME=C:\Program Files\java\jdk1.8.0_151 Starting a Gradle Daemon (subsequent builds will be faster) :wrapper BUILD SUCCESSFUL in 4s 1 actionable task: 1 executed Subproject Path: CordovaLib Starting a Gradle Daemon (subsequent builds will be faster) The Task.leftShift(Closure) method has been deprecated and is scheduled to be r moved in Gradle 5.0. Please use Task.doLast(Action) instead. at build_6fws7v77f2f5wivstqr9mptbz.run(C:\Users\WolwX\Documents\nomdemo application\platforms\android\build.gradle:141) The JavaCompile.setDependencyCacheDir() method has been deprecated and is sched led to be removed in Gradle 4.0. Incremental java compilation is an incubating feature. The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() inste d. :preBuild UP-TO-DATE :preDebugBuild UP-TO-DATE :checkDebugManifest :CordovaLib:preBuild UP-TO-DATE :CordovaLib:preDebugBuild UP-TO-DATE :CordovaLib:checkDebugManifest :CordovaLib:prepareDebugDependencies :CordovaLib:compileDebugAidl :CordovaLib:compileDebugNdk UP-TO-DATE :CordovaLib:compileLint :CordovaLib:copyDebugLint UP-TO-DATE :CordovaLib:mergeDebugShaders :CordovaLib:compileDebugShaders :CordovaLib:generateDebugAssets :CordovaLib:mergeDebugAssets :CordovaLib:mergeDebugProguardFiles :CordovaLib:packageDebugRenderscript UP-TO-DATE :CordovaLib:compileDebugRenderscript :CordovaLib:generateDebugResValues :CordovaLib:generateDebugResources :CordovaLib:packageDebugResources :CordovaLib:processDebugManifest :CordovaLib:generateDebugBuildConfig :CordovaLib:processDebugResources :CordovaLib:generateDebugSources :CordovaLib:incrementalDebugJavaCompilationSafeguard :CordovaLib:compileDebugJavaWithJavac :CordovaLib:compileDebugJavaWithJavac - is not incremental (e.g. outputs have c anged, no previous execution, etc.). Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. :CordovaLib:processDebugJavaRes UP-TO-DATE :CordovaLib:transformResourcesWithMergeJavaResForDebug :CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug :CordovaLib:mergeDebugJniLibFolders :CordovaLib:transformNative_libsWithMergeJniLibsForDebug :CordovaLib:transformNative_libsWithSyncJniLibsForDebug :CordovaLib:bundleDebug :prepareOrgApacheCordovaCordovaLib630DebugLibrary :prepareDebugDependencies :compileDebugAidl :compileDebugRenderscript :generateDebugBuildConfig :generateDebugResValues :generateDebugResources :mergeDebugResources :processDebugManifest :processDebugResources :generateDebugSources :incrementalDebugJavaCompilationSafeguard :compileDebugJavaWithJavac :compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no revious execution, etc.). :compileDebugNdk UP-TO-DATE :compileDebugSources :mergeDebugShaders :compileDebugShaders :generateDebugAssets :mergeDebugAssets :transformClassesWithDexForDebug :mergeDebugJniLibFolders :transformNative_libsWithMergeJniLibsForDebug :processDebugJavaRes UP-TO-DATE :transformResourcesWithMergeJavaResForDebug :validateSigningDebug :packageDebug :assembleDebug :cdvBuildDebug BUILD SUCCESSFUL Total time: 34.116 secs Built the following apk(s): C:/Users/WolwX/Documents/nomdemonapplication/platforms/android/build/ou puts/apk/android-debug.apk C:\Users\WolwX\Documents\nomdemonapplication>
Cette commande va générer un fichier APK au nom de android-debug.apk, disponible dans le dossier platforms/android/build/outputs/apk/, que vous pourrez d’hors et déjà tester, mais qui ne sera pas prêt pour l’important en Play Store.
3 > Import de notre projet Cordova dans Android Studio.
Pour importer un projet (avant dernier choix, “Import project (Gradle, Eclipse ADT, etc.)”), il faut simplement utiliser le menu d’import mais il ne faut pas prendre le dossier racine du projet. Il faut sélectionner le sous dossier platform/android de notre projet Cordova.
L’import s’éxécute alors avec une barre de chargement avant l’ouverture d’Android Studio en plein écran.
Arrivé à cette étape, Android Studio vous signale qu’il y à une différence entre la version Gradle (plugin Android) de votre projet (fournit par Cordova) et celle recommandée.
On peut valider tranquillement cette mise à jour recommandée.
Dans la partie inférieur d’Android Studio va alors s’ouvrir un log avec un listing d’erreur :
Error:Unable to resolve dependency for ':@debug/compileClasspath': Could not resolve project :CordovaLib. <a href="openFile:C:/Users/WolwX/Documents/nomdemonapplication/platforms/android/build.gradle">Open File</a><br><a href="Unable to resolve dependency for ':@debug/compileClasspath': Could not resolve project :CordovaLib.">Show Details</a>
Rappelée sur 5 fichiers différents.
Pour régler cette erreur voici comment procéder :
On ce rend sur l’édition du fichier build.gradle en cliquant sur “Gradle Scripts” dans le volet de gauche.
Puis on édite la ligne 254 en remplaçant ces 2 lignes
debugCompile(project(path: "CordovaLib", configuration: "debug")) releaseCompile(project(path: "CordovaLib", configuration: "release"))
par celle ci
implementation project(':CordovaLib')
Afin de valider notre changement et qu’Android Studio le prenne en compte en réglant nos erreurs on procède à un “Rebuild Project” dans le menu “Build”
“Gradle Build Running” apparaît en bas de l’écran et notre log d’erreur disparaît au profit de celui ci
Information:Gradle tasks [clean, :assembleDebug, :CordovaLib:assembleDebug]
On est donc prêt à coder tranquillement notre webapp avec Android Studio 😀
4 > Tester notre webapp, ou application classique, dans l’emulateur Android Studio.
Peut importe le stade de développement de notre application, bien souvent on veut voir le rendu, et pour une application mobile, le mieux est de consulter ce rendu dans un émulateur reproduisant les conditions d’un Smartphone.
Android Studio inclus un gestionnaire AVD (Android Virtual Device) qui permet de tester votre application, mais aussi de varier les plaisirs en configurant entièrement votre émulation par des réglages de type hardware tel qu’avec l’activation de boutons physique par exemple, ou même software tel que l’utilisation d’une version Android en particulier par exemple, et même choisir les spécificités écran de son émulateur tel que la taille de l’écran ou la résolution. Enfin cerise sur le gâteau, on peut aussi inclure un skin, changer l’apparence de l’émulateur.
De base le AVD inclus permet de partir sur des configurations tournant autour de Smartphone principalement Google, ou de périphériques génériques. Si vous voulez tester avec votre propre smartphone, Samsung ou d’une autre marque, il faudra trouver les modèles en téléchargement sur internet ou bien les créer vous même.
Au premier lancement vous n’avez aucun AVD configuré. Voyons comment créer votre premier émulateur Android.
Il faut ce rendre dans le menu “Tools” puis “Android” et sous menu “AVD Manager”
De là une fenêtre de gestion des émulateurs va s’ouvrir, elle sera vide et il faudra passer par le bouton “+ Create Virtual Device…” présent en bas à gauche de la fenêtre.
Dans la nouvelle fenêtre qui s’ouvre on peut alors sélectionner la catégorie de notre émulateur sur la gauche, et le modèle, soit basé sur un smartphone Google existant, soit sur un générique. On retrouve aussi les caractéristiques basiques de chaques éléments, tel que la taille de l’écran, la résolution et la densité.
Pour démarrer on peut sélectionner le “Nexus 5X” avec écran de 5.2″ et résolution de 1080×1920 car il est assez représentatif de la majorité des smartphones utilisés actuellement sur le marché.
En validant sur le bouton “Next” en bas à droite, on passe sur l’écran de choix de l’OS du smartphone, c’est à dire de la version Android qu’il utilisera.
Vous pouvez alors tout aussi bien utiliser la version “API 27” (le numéro peut varier en augmentant lorsque vous lirez le tuto) qui est la dernière version gérée par Android Studio, ou bien choisir plus exactement une version correspondant à une release officielle Android tel que Oreo ou Nougat.
A noter que si vous devez télécharger une de ces versions, il faudra avoir un peu de patience, le téléchargement étant assez lourd.
On confirme alors le tout sur le dernier écran.
Vous avez maintenant un émulateur prêt à fonctionner 🙂
Sachez que vous pouvez l’éditer, ou en rajouter des nouveaux à tout moment (comme vous voyez ici avec les 2 Samsung que j’ai en plus) à travers le menu “Tools” puis “Android” et sous menu “AVD Manager” qui vous renverra sur cette fenêtre.
Mais pour tester notre application dans cet émulateur, on va devoir passer par le menu “Run”
Celui ci va vous ouvrir une petite fenêtre avec pour seul choix “0. Edit Configurations…”
Une fenêtre “Run/Debug Configurations” s’ouvre alors, avec pour seul élément un volet gauche avec “Defaults” et des icônes au dessus.
Vous pouvez cliquer sur l’icône “+” afin de rajouter une configuration permettant l’émulation de notre application.
Dans le choix on valide “Android App” puis dans les réglages sur l’onglet “General” on change le module en “android“. On renomme enfin simplement, “Emulation” dans mon cas, et on valide, par le bouton “OK” en bas à droite, sans changer plus de réglages.
La fenêtre ce ferme, et désormais, notre menu “Run” permettra en premier choix, “Run ‘Emulation’“, l’utilisation de notre configuration d’émulation.
A noter que l’on retrouve un bouton d’accès rapide en haut à droite de Android Studio nommer “Emulation”.
Quand on choisira ce bouton ou ce menu “Run ‘Emulation’” une nouvelle fenêtre s’ouvrira. Celle ci nous permettant de choisir dans quel AVD procéder à l’émulation.
On peut alors simplement choisir notre Nexus 5X et après un temps de chargement on devrait enfin voir apparaître notre jolie émulateur avec au démarrage notre application qui ce lance !
5 > Exporter une version finale entièrement compatible Play Store avec Android Studio.
Arriver à ce niveau, on est presque prêt à conquérir le monde avec notre application !
Attention il est important de savoir que pour proposer votre application sur le Play Store, vous devrez avoir un compte “Google Developer” et que pour l’ouverture de celui ci Google réclame la somme de 25€ …
L’avantage c’est que cette somme est à versement unique, et que vous proposiez 1 application ou 500 le prix reste le même. Vous payez à l’ouverture seulement.
Quoi qu’il en soit, compte Google Dev ou pas, vous pouvez maintenant exporter votre APK avec Android Studio.
La méthode suivante vous permet d’être conforme aux normes les plus lourdes, et rend votre APK compatible Play Store donc, mais aussi pour un partage par site web, ou autre.
Si vous récupérez votre APK en dehors du Play Store, vous n’aurez alors pas de message d’avertissement de sécurité vous obligeant à autoriser les “sources inconnues” dans votre configuration smartphone.
Pour ce faire Android Studio permet de générer une “Clef” de sécurité qui vous servira à confirmer que vous êtes bien le créateur de cette application, mais qui servira aussi pour vos autres futures applications.
De plus la génération de votre APK par Android Studio vous permet d’éviter des problèmes tel que le mode debug à désactiver, l’expiration du Certificat de la Clef de sécurité, ou encore le soucis de Zipalign … Tout ces soucis que j’ai rencontré lors de l’export directement natif de Cordova …
xxxxxxxx