Cordova : Comment créer votre première application mobile ?

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 :

• https://cordova.apache.org/docs/fr/6.x/guide/cli/index.html
• http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/