Créer une application mobile avec Cordova
Dans un article précédent, je vous avais présenté l’application Sealed Space Timer qui m’a permis de découvrir AngularJS. Vu les cas d’usage, il serait bon d’avoir une version mobile et pourquoi pas une application mobile. L’idée est de réaliser un portage de notre site AngularJS/Bootstrap vers une application mobile. Nous allons découvrir ensemble comment créer une application mobile avec Cordova.
Cordova
Cordova est une framework de développement mobile qui permet de construire une application en utilisant JavaScript, HTML5, and CSS3 au lieu des APIs natives de la plateforme (iOS, Windows Phone, Android). Il est possible d’adresser les fonctionnalités de l’appareil (photo, contact, geolocalisation, …) à l’aide de plug-in qui font l’abstraction par rapport aux APIs natives. Les applications générées sont hybrides avec une partie qui englobe le HTML, CSS, JS et une autre partie – générée automatiquement par Cordova – qui s’occupe des spécificités liées à la plateforme.
Fonctionnement de Cordova (image de http://www.herewecom.fr (1))
Environnement
Au moment où j’écris cet article, mon environnement de développement consiste
- Windows 10 Enterprise Insider Preview: version Enterprise nécessaire pour Hyper-V;
- Visual Studio 2015 RC.
Il se peut que vous ne retrouviez pas exactement les mêmes comportements sur des environnements avec des versions plus classiques.
Porter un site web en application mobile
Au préalable, j’ai récupéré la dernière version du code source de SealedSpaceTimer depuis GitHub.
Lancer Visual Studio 2015 RC et créer un nouveau projet New Project > JavaScript > Apache Cordova Apps > Blank Windows Universal App (Apache Cordova)
Modèle de projet Cordova dans Visual Studio 2015
Note : en partant du modèle Application Vide (Apache Cordova), je ne parviens pas à tester l’application Windows10 alors que l’application Android fonctionne.
Copier le fichier bower.json dans le répertoire www.
Dans un invite de commande (PowerShell ou cmd), taper la ligne de commande suivante pour récupérer les dépendances.
bower installCopier les répertoires lang, scripts et views dans le répertoire www.
Remplacer le contenu du fichier index.html de la solution par celui du fichier de l’application.
Structure du répertoire www du projet Cordova dans Visual Studio 2015
Modifier les références vers les fichiers JavaScript, vu que l’arborescence a changé.
Ajouter les références vers les fichiers JavaScript spécifiques à Cordova
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>Voila, le portage technique est réalisé. Voyons le résultat.
Résultats du portage
Dans Visual, cliquer pour lancer l’émulation avec Android avec Ripple et après un moment d’attente, voila le résultat :
Emulation Android Ripple – portage direct (vertical)
Emulation Android Ripple – portage direct (horizontal)
De retour dans Visual, cliquer pour lancer l’émulation Windows Phone 10.0.1.0 et après un moment d’attente, voila le résultat :
Emulation Windows 10 – portage direct (horizontal)
Pour créer et tester le package sur iOS, il faut disposer d’une machine sous Mac OS X. Comme annoncé au début de l’article, je fais tourner un Windows 10 Enterprise donc pas d’émulation iOS.
Le modèle de projet utilisé pour porter l’application ne permet de déployer l’application sur un environnement 8.1. L’erreur ci-dessous attend les audacieux qui tenteraient la manipulation :
Erreur Impossible de déployer une application Windows 10 sur une cible Windows 8.1.
Conclusion
Vous en conviendrez le portage vers une application mobile avec Cordova se fait sans trop de heurt. Si d’un point de vue technique tout se passe bien, d’un point de vue expérience utilisateur il faut revoir la copie. La prochaine étape sera de rajouter des fonctionnalités utilisant les spécificités des appareils mobiles.
Références :