De la page HTML vers l’application

Pour transformer votre application HTML en une application pour mobile, il faut tout d’abord créer un projet Cordova.

$ cordova create MonApplication
Creating a new cordova project.
$ cd MonApplication
$ ls
config.xml package.json plugins www
hooks platforms res
$ ls www
css img index.html js

Dans le répertoire www vous devrez remplacer le fichier index.html par le fichier index.html de votre application et placer tous les scripts et styles nécessaires à votre application dans les répertoires js et css.

Note

Dans votre fichier index.html les références à vos fichiers de styles et scripts JavaScript devront être des références relatives à ces deux sous-dossiers. Par exemple <script src=js/monscript.js>. En particulier, si vous voulez que votre application puisse s’exécuter sans nécessité une connexion réseau, il vous faudra placer dans le répertoire js les librairies Jquery et Jquery Mobile et dans le répertoire css le fichier de style nécessaire à Jquery Mobile. Ainsi votre fichier index.html devrait contenir les directives suvantes (en fonction des versions des librairies que vous utiliserez) :

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

Il faut ensuite indiquer à Cordova pour quelles plateformes vous souhaitez obtenir une application. Par exemple pour obtenir une application pour Android et iOS, il faudra exécuter

$ cordova platform add android
$ cordova platform add ios

Note

Le SDK d’Android doit être présent sur votre machine afin que Cordova puisse produire une application au format apk. De même le kit de développement d’iOS doit être disponible sur votre machine pour produire une application au format ipa. Le SDK d’Android est librement téléchargeable sur le site Android Developer aussi bien pour Linux, Windows que MacOS. On peut donc à partir de ces trois OS obtenir une application au format apk. Les applications au format ipa ne peuvent être obtenues qu’à partir d’un ordinateur fonctionnant sous MacOS.

Supposons que votre application nécessite la prise de photos via l’appareil intégré à votre mobile. Il va falloir rajouter le plugin camera à votre projet afin de pouvoir accéder via JavaScript à ce matériel.

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

Une fois votre mobile relié en USB à votre ordinateur, la création, le chargement et l’exécution de l’application se fait en exécutant :

$ cordova run android

ou bien

$ cordova run iOS