Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Android ou iOS.
Présentation de Cordova
Pour coder une application mobile, on peut le faire de deux manières :
- Soit développer en langage natif du mobile,
- Soit créer une application hybride qui sera ensuite portée sur chaque plateforme.
Dans le premier cas, cela oblige à connaître le langage des différentes plateformes (Android, iOS et Windows Mobile).
C’est pour le second cas de figure qu’intervient Cordova/PhoneGap.
Cordova et PhoneGap
Apache Cordova est un framework de développement mobile open-source. Il permet d’utiliser les technologies Web courantes telles que HTML5, CSS3 et JavaScript pour développer des applications multiplateformes, évitant ainsi l’utilisation des langages natifs. Les applications s’exécutent dans des wrappers ciblés pour chaque plate-forme.
PhoneGap permet de développer des applications hybrides, d’utiliser des émulateurs (Desktop et Mobile), d’utiliser des API permettant l’accès aux capteurs du mobile, aux données ainsi qu’à l’état du réseau et de les porter sur chaque plateforme mobile grâce à PhoneGap Build.
Installer l’environnement
SDK Android et iOS
L’installation des SDK pour Android et iOS s’est grandement facilité depuis quelques mois car il suffit d’installer un environnement de développement intégré (EDI) contenant tout le nécessaire pour développer une application pour mobile. Ces EDI mis à disposition gratuitement se nomment :
- Android Studio pour Android (élémentaire mon cher) ;
- xCode pour iOS (téléchargeable gratuitement depuis le store Apple).
Node.js
Node.js permet de disposer de la commande npm permettant d’installer des paquets ou des applications en ligne de commande.
Pour installer node.js, rendez-vous à cette adresse : https://nodejs.org/en/
Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :
$ node -v
Ici, j’obtiens la version de node.js que je viens d’installer : 5.7.0
Cordova
Ouvrir un terminal et utiliser la ligne de commande :
$ sudo npm install –g cordova
Remarque : sur OS X et Linux, sudo permet de lancer une commande avec les droits maximum (root). Sur Windows, vous n’avez pas besoin de faire précéder la commande npm de sudo.
Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :
$ cordova -v
Ici, j’obtiens la version de node.js que je viens d’installer : 6.1.1
PhoneGap Desktop
Ouvrir un terminal et utiliser la ligne de commande
$ sudo npm install –g phongap@latest
Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :
$ phonegap -v
Ici, j’obtiens la version de node.js que je viens d’installer : 6.2.0
PhoneGap Developer
Installer PhoneGap sur votre mobile. Il existe une version pour chaque plateforme. Vous la trouverez dans votre AppStore favoris.
Créer l’application
Création d’un projet vide
Nous allons créer un projet vide toujours dans l’invite de commande.
Déplacez-vous à l’endroit où vous souhaitez créer le projet de votre application.
Par exemple si vous voulez travailler sur le bureau, utilisez :
$ cd Desktop
Puis
$ cordova create MyApp
MyApp étant le nom de l’application que vous souhaitez créer.
Ajouter des plateformes
Ajouter des plates-formes signifie que vous aller ajouter la possibilité de construire une application pour le système d’exploitation mobile de votre choix (Android, iOS, BlackBerry ou Windows phone). Mais avant cela vous devez vous assurer de disposer de chaque SDK associé à la plate-forme cible. Par exemple pour iOS, vous devez disposer du SDK iOS.
Toutes les commandes suivantes doivent être exécutées dans le répertoire du projet.
Comme je dispose du SDK Android sur mon Mac, je vais ajouter la plateforme Android. Voici une capture de mon Terminal :
Mac-mini-de-Claude:Desktop claude$ cd MyApp
Mac-mini-de-Claude:MyApp claude$ cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: io.cordova.hellocordova
Name: HelloCordova
Activity: MainActivity
Android target: android-23
Android project created with cordova-android@5.1.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
Voici les commandes à lancer suivant la plateforme de votre choix :
$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
Démarrer PhoneGap Desktop
PhoneGap est un emulateur qui vous permet de dialoguer avec votre mobile et de visualiser en temps réel l’application que vous êtes en train de concevoir. Vous pouvez télécharger PhoneGap Desktop depuis cette adresse :
http://phonegap.com/products/#desktop-app-section
Installer l’application
Lancer l’application PhoneGap et ouvrez votre projet d’application mobile.
Démarrer PhoneGap Mobile
Lancer PhoneGap sur votre mobile et connectez l’application à l’adresse communiquée par l’application de votre ordinateur.
Si besoin saisir http://192.168.0.16:3000 puis Connect pour lancer l’émulateur.
Voici l’application. Vous pouvez maintenant apporter les modifications dans votre code et voir en direct le résultat sur votre mobile.
Tout se passe dans le dossier nommé « www » où vous trouverez les fichiers HTML, CSS et Javascript.
Générer l’application pour les plateformes
Une fois que votre application est développée et prête à être diffusée, vous devez transformer votre application hybride en application utilisable sur Android, iOS et Windows Mobile. Là aussi deux solutions s’offrent à vous pour une application Android :
- Importer le projet dans Android Studio ;
- Utiliser les services PhoneGap Build.
Importer le projet dans Android Studio
Lancer Android Studio et importer le projet créer via Cordova.
Depuis Android Studio, vous allez pouvoir générer votre application que vous pourrez distribuer par la suite via Google Play.
Utiliser les services PhoneGap Build
Pour ce faire rendez-vous sur le site PhoneGap Build pour générer le format de chaque plateforme mobile. Évidemment, vous pouvez très bien ne vouloir que l’application Android mais pas iOS. Aucun, problème c’est vous qui décidez 😉
Aller plus loin
J’espère que ce billet avec les étapes pour développer votre application mobile avec PhoneGap vous sera utile. N’hésitez-pas à commenter cet article…
Sources :
