PhoneGap, création d’applis mobiles multi-plateforme
PhoneGap est un framework open source pour créer des applis mobiles multi-plateforme avec les technologies traditionnelles du web : HTML, CSS, JavaScript.
Les applications mobiles créées à l’aide des technologies web sont sont appelées applications hybrides (c.-à-d. mélangeant web et technologies natives).
Créer une appli mobile : le parcours du combattant
/xmedia/doc/full/multi-apps.png" />
© vincentuonis - Fotolia.com
Créer une application mobile pour plusieurs plateformes (iOS, Android, Windows Phone…) est un défi technique.
Chaque système d’exploitation réclame une technologie spécifique :
- Objective-C/Swift pour iOS
- Java pour Android
- Langages de la gamme .NET pour Windows Phone
- ...
Au-delà du langage de programmation, chaque plateforme propose un framework, notamment pour l’interface utilisateur.
Les technologies propres à chaque environnement sont appelées natives.
Maîtriser un environnement est déjà complexe. Alors trouver l’oiseau rare qui va être capable de jongler avec deux ou trois…
Créer une application mobile pour plusieurs plateformes nécessite un sérieux investissement et n’est pas à la portée de toutes les bourses des clients ou des prestataires.
Si vous faites face à ce problème pour vous ou un de vos clients, et que vous êtes déjà aguerris au développement web, PhoneGap peut être une solution pour vous.
Cet article n’aborde pas les sujets du design et des tests. Mais là encore la création d’applications multi-plateforme peut aussi se révéler ardue dans ces domaines.
Le fonctionnement de PhoneGap
PhoneGap fournit une API JavaScript multi-plateforme pour accéder aux fonctions des appareils (ex. appareil photo, GPS, carnet des contacts…).
Par exemple, pour faire vibrer l’appareil pendant 3 secondes :
navigator.vibrate(3000);
C’est aussi bien qu’un bon vieux <blink>
Cette API est disponible de la même façon pour chaque plateforme (à quelques exceptions près). Depuis la version 3.0 de PhoneGap, elle est disponible sous la forme de plugins (appelés Core Plugins) que vous êtes libres d’intégrer ou non à vos applications. Pour les plus courageux, vous pourrez étendre l’API du noyau grâce à vos propres plugins PhoneGap. (Il en existe déjà déjà pas mal, pour gérer les achats InApp ou les notifications par exemple.)
Une fois le développement fini, PhoneGap vous permet de compiler le code HTML, CSS, JavaScript pour chaque plateforme. Vous pourrez ensuite distribuer les applications dans les différents app stores (Apple App Store, Google Play, Windows Phone Store…).
Le développement frontend pour PhoneGap
Le développement frontend d’une application PhoneGap est très proche de celui d’une web app. On développera des applications “page unique” en s’aidant de frameworks JavaScript comme jQuery Mobile, BackboneJS, AngularJS, Bootstrap…
Un des sujets importants est de créer une interface utilisateur crédible, c.-à-d. perçue et reconnue par les utilisateurs comme celle d’une application mobile. Il faudra à la fois qu’elle s’intègre bien au système d’exploitation et qu’elle soit performante (pensez aux animations notamment).
Une tendance est de vouloir imiter à tout prix une interface native, cela peut se révéler difficile et contre-productif. Vous pouvez tout à fait créer des interfaces cohérentes et efficaces sans pour autant vous astreindre à une imitation parfaite des applications natives. Jouez avec les contraintes ! D’excellents frameworks (comme Ionic, HammerJS ou VelocityJS) peuvent vous y aider.
Le code HTML, CSS, JavaScript est-il vraiment compilé ?
La réponse est non car votre code ne sera pas converti en code natif. Le code HTML, CSS, JavaScript reste tel quel et l’application PhoneGap utilise le navigateur web de l’appareil (webview) pour l’interpréter : Safari pour iOS, le stock browser (basé sur Chromium) pour Android, Internet Explorer Mobile pour Windows Phone...
Donc, lorsque vous développez une application PhoneGap, c’est le support de ces navigateurs mobiles dont vous devez tenir compte. Par exemple, pendant longtemps la position:fixed n’était pas disponible sur Safari iOS.
© cowlabstudio.com/phonegapitalia
La performance
Même si d’importants progrès ont été faits ces 2 dernières années, le principal problème est celui de la performance.
Les moteurs de rendu et d’interprétation JavaScript ne sont pas aussi performants que du code natif. C’est d’autant plus vrai que jusqu’à récemment, les navigateurs utilisés par des applications tierces (webviews) étaient moins performants que le navigateur proposé aux utilisateurs.
Si la performance sous iOS a toujours été relativement bonne, celle d’Android a tendance à engendrer de nouvelles insultes chez les développeurs. Heureusement, il semble que Google ait pris le taureau par les cornes cette année (2014) pour réduire la fragmentation des appareils Android et améliorer la performance des webviews (grâce notamment à l’utilisation de Chrome mobile).
Une bonne stratégie est de viser les versions 4+ d’Android lorsque c’est possible et d’être prudent avec les animations gourmandes.
Un site web en tant qu’application ?
Il est tout à fait possible de déployer des applications mobiles qui ne font qu’appeler un site web adapté au mobile. Ce site pourra utiliser l’API PhoneGap pour accéder à l’appareil. Un avantage est de pouvoir mettre à jour l’application sans repasser par la case app store.
Pendant longtemps, les applications se contentant d’encapsuler un site web étaient rejetées par Apple. Ce n’est plus le cas à présent.
Mais peut-on encore parler d’applications mobiles ?
Par exemple, une des caractéristiques des applications est de pouvoir s'accommoder de la disponibilité (très variable) du réseau. C’est pour le moment relativement complexe avec une web app et encore moins avec un site web mobile traditionnel.
Il est donc recommandé de développer des applications JavaScript installées en local et utilisant des services web pour intéragir avec le serveur.
Mais il peut être utile de pouvoir rafraîchir certaines parties de vos applications (ex. mentions légales) sans avoir à mettre à jour l’application dans les app stores.
PhoneGap est-il open source ?
La réponse est "ça dépend". PhoneGap ne l'est pas en tant que tel, mais depuis fin 2011, le nom du projet open source PhoneGap est Cordova. C’est un projet de la fondation Apache.
Le nom PhoneGap est utilisé par Adobe (qui a racheté Nitobi, la société à l’origine du projet). Adobe développe notamment le service en ligne PhoneGap Build qui permet de compiler des applications dans le cloud.
PhoneGap et HTML 5
L’API JavaScript de PhoneGap recoupe celle du HTML 5. C’est par exemple le cas de la détection de la disponibilité du réseau. Les développeurs de PhoneGap font d’ailleurs attention à respecter la même syntaxe. Dans le futur on peut espérer que le support de HTML 5 soit complet et que toutes les applications puissent être développées avec (un peu comme le préfigure déjà FirefoxOS). En attendant, PhoneGap permet déjà de profiter de pas mal de fonctionnalités du HTML 5 dans vos applications.
Conclusion
PhoneGap est une solution solide de développement d’applications mobiles hybrides. Elle ne cesse de s’améliorer et sa communauté grandit. Elle m’a permis de réaliser des projets d’applications mobiles multi-plateforme moins coûteux.
Néanmoins, ce n’est pas une solution prête à l’emploi et il faut prévoir un temps d’apprentissage au début tant sur l’utilisation de PhoneGap lui-même que sur le développement frontend dans ce nouveau contexte.
Ce n’est pas non plus une solution qui va être adaptée à tous les types d’applications mobiles. Elle l’est surtout pour des applications simples dont le coût d’un développement natif est prohibitif.
Petit à petit, au fur et à mesure des mises à jour, le champ d’application de PhoneGap va s’étendre.
Si cet article a éveillé votre curiosité, et que vous voulez mieux vous rendre compte de ce qu’est le développement d’une application PhoneGap, je vous recommande les tutoriels du site Grafikart.
Commentaires
J'ai justement en ce moment 2, 3 projets pro qui nécessitent l'utilisation de Phonegap. J'ai vraiment été étonné par la simplicité de mise en œuvre. C'est vraiment un chouette outils qui étends encore plus loin les possibilités du développement front end. J'espère vraiment qu'ils vont résoudre les quelques soucis de performance qu'on puisse espérer utiliser Phonegap sur des app un peu plus complexe.
Bref je conseil à tout l'monde d'essayer !
Et merci pour l'article.
Egalement pour approfondir un peu le sujet, un petit bijou Intel pour le dev mobile html5 multi plateforme: Intel XDK
https://software.intel.com/fr-fr/html5/tools
Il utilise également des fonctionnalités de Phonegap.
A voir absolument.
Aussi, la plateforme Open Source de Convertigo qui utilise PhoneGap comme moteur de présentation pour sa Plateforme de Mobilité pour Entreprise.
http://www.convertigo.com
L'intérêt par rapport a PhoneGap tout seul est toute la partie back end qui permet de créer rapidement des services sur les données de l'entreprise afin d'être utilisés par les clients mobiles.
@wulkanman Effectivement le backend est très important :-) Il y a d'ailleurs pas mal de BaaS (Backend as a Service) qui essaient de tirer leur épingle du jeu. Pour ma part, j'utilise WordPress qui se révèle être un excellent backend pour les applis mobiles (avec un peu de travail bien sûr).
Bonjour,
Est-ce que quelqu'un sait si les applications produites avec PhoneGap sont accessibles avec les lecteurs d'écran natifs des smartphones, i.e. VoiceOver sur iOS et Talkback sur Android ?
Y a-t-il moyen de tester gratuitement ?
Si non, pour iOS, de quelles licenses développeur etc. faut-il s'acquitter ?
En même temps, je soupçonne plusieurs applications que j'utilise déjà d'avoir été développées avec PhoneGap, et donc à priori ça serait donc accessible. Les indices qui tendent à me le faire croire n'ont rien à voir avec l'accessibilité: pub google comme sur le web, liens vers du script php, les « en cours... » qui on tendance à apparaître très souvent exactement de la même manière sur beaucoup d'apps... Comment savoir ?
Merci à celui qui répondra à ces questions
@QuentinC : bonjour, je ne suis pas capable de complétement vous répondre. Néanmoins, nous avons testé nos développements auprès d'amis aveugles et je peux vous confirmer que les lecteurs d'écrans des smartphones arrivent à lire le contenu. Il nous a semblé qu'il fallait respecter les règles d'accessibilité des contenus web. Par ailleur Adobe s'est intéressé au sujet : http://blogs.adobe.com/accessibility/2014/03/... Les licences à acquérir auprès d'Apple sont les mêmes que pour un développement natif.
@BenjaminL : Absolument !, Wordpress est un très bon back-end orienté contenu, mais Il faut distinguer les applications mobiles qui sont orientées présentation de contenu par rapport à celles qui sont orientée applications transactionnelles (prise de commandes, gestion bancaire, déclaration d'activité, pose de congés etc ..) dans ce dernier cas un MBaaS sera plus approprié pour s'interfacer avec les APIs des applications métier concernées.
@wulkanman : Ah ! Bien vu - je suis très orienté médias :-) (Même si j'ai vu des trucs bluffant avec WooCommerce et Buddypress.)
@BenjaminL:
[quote]Il nous a semblé qu'il fallait respecter les règles d'accessibilité
des contenus web.[/quote]
Étant non-voyant moi-même, ça va bien entendu de soi.
Votre lien vers adobe n'est pas valable: 404. Pouvez-vous le corriger ou le reposter ? Merci.
@Quentin : lien modifié (un ptit point qui traînait en fin de ligne) ;)
@QuentinC : Désolé pour le lien (et merci à @6l20). Je me suis mal exprimé : ce que je voulais dire était que faire de l'accessibilité dans une appli PhoneGap est semblable à faire de l'accessibilité sur le web. Mais ce n'est qu'une partie si j'en crois l'article du site Adobe.
Aurais-tu des exemples d'applications développées avec PhoneGap ou à tous les moins ce que tu considères comme la limite fonctionnelle avant de passer à du dev natif ?
@Ruben, cette adresse présente de nombreux exemples : http://phonegap.com/app/
.
Pour essayer de répondre à ta question (pas facile) :
Limite 1 : la perf. sur les anciens tél. (ex. Android 2x)
Limite 2 : des interfaces avec de très nombreuses animations (malgré des frameworks comme Ionic)
Limite 3 : des fonctionnalités non couvertes par des plugins PhoneGap bien maintenus (ex. reconnaissance faciale, temps réel, 3D...).
En fait, on peut toujours y arriver mais on quitte alors le domaine de l'industriel dans celui du militantisme technique ;-) Pour moi, le gain des applications hybrides vient du fait qu'une appli de base (ex. news) réalisée avec une techno native et trop cher.
bonjour
L’utilisation d’API network information n’est pas supporter par tous les navigateurs web, dans ce cas il faut faire quoi pour avoir les configurations de réseau ??
Est-il possible de développer une application mobile multiplateforme afin de recouper toutes les informations réseau?
je vous remercie d'avance
bonjour
L’utilisation d’API network information n’est pas supporter par tous les navigateurs web, dans ce cas il faut faire quoi pour avoir les configurations de réseau ??
Est-il possible de développer une application mobile multiplateforme afin de recouper toutes les informations réseau?
je vous remercie d'avance
Bonjour,
J'ai une Petite Question, Si J'aimerais Développer une APP Mobile qui va :
- Lire les SMS
- Envoyer des SMS
- Envoyer des requêtes USSD et lire la réponse
- Lire les paramètres de la carte SIM (Imei, ....)
Je peux Evoluer avec PhoneGap&Cordova ou alors vous me suggérer du Natif ?
Merci