Contexte du projet
Dans le cadre d’un projet de recherche et développement, nous avons été amenés à réaliser une application mobile qui vient compléter un site web déjà existant et qui contribue au partage des bonnes trouvailles du web. Les systèmes d’exploitation ciblés étaient Android et IOS, aussi bien sur smartphones que sur tablettes. Le temps imparti au développement de celle-ci était limité mais sans contrainte particulaire sur les technologies à utiliser.
Orientation technique
Notre choix technique c’est porté sur :
Apache Cordova
Apache Cordova est un Framework open-source développé par la Fondation Apache. Il permet de créer des applications mobiles cross-plateformes en HTML, CSS et JavaScript pour la plupart des OS du marché (Android, Amazon Fire OS, Bada, Blackberry10, Firefox OS, IOS, Ubuntu, Windows Phone 8, Windows 8, Tizen), tout en bénéficiant des fonctionnalités natives des appareils (localisation GPS, appareil photo, contacts, etc). Les applications qui en résultent sont dites « hybrides », ce qui signifie qu’elles ne sont pas vraiment natives, ni purement basées sur les langages HTML, CSS et Javascript.
L’adoption d’une plateforme hybride pour la conception de l’application mobile au détriment du développement natif s’est justifiée principalement pour des raisons de timing. En effet les développeurs affectés à cette tâche n’avaient que très peu d’expérience dans les langages de programmations spécifique à chaque plateformes mobiles (Objective-C, Java, C#, etc) et avec une deadline à respecter.
AngularJS
Développé par Google, AngularJS est un Framework JavaScript MVW (Model View Whatever) très puissant, riche en fonctionnalité, libre et open-source. Il est fondé sur l’extension du langage HTML par de nouvelles balises et attributs, ce qui va nous permettre de créer une application web. Il est basé sur le patron de conception MVC (Modèle, Vue, Contrôleur).
Voici quelques aspects d’AngularJs qui nous ont poussés à l’utiliser :
- Architecture du projet : le code est modulaire et structurer grâce notamment à un ensemble de vues conceptuels : Template, Directives, Model, Scope, Module, Injection de dépendance, …
- Data-binding bidirectionnel : les modèles et les vues se mettent à jour automatiquement dès lors qu’une modification sur un objet, auxquelles elles sont liées, survient.
- Directives : une directive permet de créer de nouveaux éléments (attributs HTML) que l’on va pouvoir utiliser directement dans nos vue. Cale permet de factoriser du code et de faciliter la ré-utilisabilité des composants. Autre aspect positif, nos vues ne contiennent que du HTML.
- Il existe une multitude de modules Angular disponible pouvant enrichir une application.
Angular Material
Angular Material est une librairie développer par Google et conçu pour les développeurs qui utilisent AngularJS. Ce projet fournit un ensemble de composants (menus, interfaces) et de fonctionnalités qui sont propre à une application mobile (exemple : le slide pour faire apparaître un menu, etc). Il est très facile à prendre en main et suffit amplement pour de petites applications.
Utilisation
Il existe une multitude de tutoriel sur comment développer en AngularJs ou Cordova, donc ce que je vous propose, c’est une petit récapitulatif sur les problèmes auxquels nous avons été confrontés tout au long du projet.
Dès le début du projet, nous avons été confrontés à un problème de taille : gérer l’ordre d’instanciation afin de ne charger les classes JavaScripts qu’après l’initialisation d’Apache Cordova.
Pour ce faire nous avons utilisé la librairie « RequireJs » (site officiel).
Au sein de notre application, nous avons créé un fichier « autoload.js » qui fait appel à la méthode « require() » qui comporte deux paramètres :
- le premier étant un tableau contenant la liste des fichiers à instancier (on y placera la déclaration de nos contrôleurs, services, directives, filtres, helpers, …)
- le second étant une fonction. C’est dans celle-ci qu’on va pouvoir déterminer les actions à mener. Dans notre car instancier Angular et la base de données seulement après que Cordova le soit.
On va pouvoir déterminer que Cordova a bien été initialisé grâce à la méthode :
Ce fichier « autoload.js » que l’on vient de créer doit bien évidement être charger sur la page HTML (fichier index.html), après avoir déclaré toutes les librairies nécessaires au bon fonctionnement de l’application (Cordova, AngularJs, Angular Material, jQuery, …).
Pendant la phase de développement, nous avons utilisé le simulateur de l’IDE (Telerik App Builder), mais lorsque nous déployer notre application sur un téléphone, le résultat obtenu ne correspondait pas du tout au rendu sur le simulateur. Et pour cause, la connexion à la base de données locale ne s’effectue pas de la même façon.
Pour gérer la connexion à la base de données sur un vrai appareil, nous utilisons le plugin Cordova: « sqlitePlugin ».
Ce qui permet de faire la différence avec le simulateur, c’est en se basant sur l’identifiant unique de l’appareil utilisé. En effet, chaque appareil à un identifiant qui lui est propre.
Voici un exemple de connexion à la base de données :
La dernière partie concerne l’intégration avec l’utilisation d’Angular Material. Il faut savoir que les toutes les versions d’Android ne sont malheureusement pas compatible, en effet seules les versions supérieurs ou égale à la 4.4 le sont. Il faudra utiliser d’autres librairies pour assurer la rétrocompatibilité des styles sur les anciennes plateformes.
Liens
Apache Cordova :
AngularJs :
Angular Material :
RequireJs :
