Applications mobiles

Comment développer son application mobile avec HTML, CSS et Javascript (jQuery) ?

Comment développer son application mobile avec HTML, CSS et Javascript (jQuery) ?

Apprendre le développement natif pour créer son appli mobile, est-ce nécessaire ?

Vous le savez sûrement, les applications mobiles pour iOS et Android sont développées avec des langages de programmation différents.

Apple utilise Objective C, ou Switch (nouveau langage se voulant plus simple à apprendre, mais dont certains se plaignent qu’il est trop « verbal »).

Google Android, quant à lui utilise le Java.

Autant vous dire que si vos connaissances en programmation se résument à : un peu de Javascript, de PHP et de jQuery, il vous coûtera pas mal de temps d’apprendre ces deux nouveaux langages pour créer votre toute première application. De plus, Objectif C et Java ne sont pas les langages de programmation les plus faciles à apprendre pour un jeune développeur.

En natif, il faut coder deux fois l’application. Une fois pour chaque OS mobile !

On comprend aisément pourquoi le développement d’applications mobiles est assez cher. Ou en tout cas pourquoi celui-ci dépasse le budget des petites entreprises, PME,…

Pas de problème, il est possible de développer une vraie application mobile uniquement grâce au HTML et au Javascript que vous connaissez déjà. C’est ce que proposent des sociétés telles que Easy App. Bien sûr, pour connecter l’application à une base de données Web, la maîtrise de PHP, MySQL et de la technologie Ajax est nécessaire également.

Les technologies pour développer son application mobile en HTML / Javascript

Tout repose sur la capacité d’iOS et Android à créer, au sein des applications mobiles classiques, ce qu’on appelle une WebView. Cela va inclure un site Web dans l’application sans faire appel au navigateur complet de votre périphérique mobile. En gros, le mini site Web sera ouvert comme une véritable application mobile.

Voici les différentes technologies notables pour s’aider dans cette tâche, il en existe d’autres.

Appcelerator Titanium

Appcelerator-Titanium

Appcelerator Titanium est un kit de construction de logiciels (framework open-source) destinés aux téléphones mobiles utilisant Android ou iOS2, distribué par Appcelerator Inc depuis décembre 2008. Il est l’un des nombreux framework pour applications mobiles basés sur des technologies web autorisant des développeurs web à utiliser leurs compétences pour créer des applications natives pour iPhone et Android. Appcelerator Titanium est souvent comparé à Adobe Air pour développer des applications de bureau pour Windows, Mac et Linux.

Normalement, des outils propriétaires et des compétences spécialisées sont requises pour développer des applications natives pour chaque plateforme.

Appcelerator Titanium inclut un outil basé-web, de cross-compilation qui demande un accès internet et un compte développeur. Cet outil peut déployer des applications stand-alone pour Mac, Windows, et Linux de n’importe laquelle de ces plateformes. Cela se réalise en envoyant les fichiers source à une machine propriétaire côté serveur qui renvoie alors les binaires. Un compilateur en ligne de commandes libre est aussi disponible mais n’est pas sujet aux mêmes exigences de réseau et de compte, mais il ne cross-compile pas. La compilation pour mobile est sujette à des exigences supplémentaires : Pour l’iPhone: Mac OS X et le SDK iPhone, et pour Android: le SDK Android et Mac, Windows ou Linux. La dernière version du cross-compilateur de Appcelerator Titanium a été compilé par lui-même !

En janvier 2010, Appcelerator a publié une liste de 554 développeurs Titanium montrant un réel intérêt envers l’iPad d’Apple. Appcelerator a aussi annoncé la compatibilité de Titanium et de l’Apple iPad et a confirmé qu’il existait des applications Titanium pour l’iPhone qui tournaient sur le simulateur d’iPad.

Appcelerator, Inc. offre aussi des services basé CLOUD pour l’emballage, le test et la distribution des applications logiciels développés avec la plateforme Titanium.

Appcelerator Titanium sur Wikipédia : https://fr.wikipedia.org/wiki/Appcelerator_Titanium

Site officiel : http://www.appcelerator.org/

jQuery Mobile

JQuery Mobile est un Framework d’interface optimisé pour les appareils mobiles tactiles. Son objectif est de permettre de rapidement développer des applications mobiles ou des applications web monopage en réponse à la grande diversité des Smartphones et tablettes sur le marché. Il est développé par l’équipe du projet JQuery. Le Framework jQuery Mobile est compatible avec d’autres Frameworks mobiles tels que PhoneGap.

jquery-mobile

jQuery Mobile sur Wikipédia : https://fr.wikipedia.org/wiki/JQuery_Mobile

Site officiel : http://jquerymobile.com

Sencha Touch

Sencha Touch est une interface utilisateur (UI) bibliothèque JavaScript, ou framework, construit spécifiquement pour le Web Mobile. Il peut être utilisé par les développeurs Web pour développer des interfaces utilisateur pour les applications Web mobiles qui ressemblent à des applications natives sur pour appareils mobiles. Il utilise entièrement les standards du web tels que HTML5, CSS3 et JavaScript. Sencha Touch vise à permettre aux développeurs de créer rapidement et facilement des applications mobiles basés HTML5 qui fonctionnent sur les appareils Android, iOS, Windows, Tizen et BlackBerry, et produit une expérience native-app-like à l’intérieur de navigateurs Web.

sencha-touch

Sencha Touch sur Wikipédia : https://en.wikipedia.org/wiki/Sencha_Touch

Site officiel : https://www.sencha.com/products/touch/

PhoneGap et Apache Cordova

Ces frameworks vont lire complètement votre application Web développée en HTML/JS ainsi que vos plugins pour les convertir automatiquement, pour vous, en Objective C et en Java afin de les rendre compatibles respectivement Android et iOS.

phonegap-cordova

Elle n’est pas belle la vie ?

Différence entre Apache Cordova et Adobe PhoneGap ?

Ces deux solutions sont identiques. Sauf que l’une est la release opensource originale, Apache Cordova, et l’autre est un fork, Adobe Phonegap, gratuite et opensource également.

Comme vous pourriez le faire en créant un fork d’Apache Cordova, Adobe et donc Phonegap, suit les mises à jour de Cordova et son évolution.

Même si Adobe développe de nombreux outils très utiles en parallèle de Cordova : Phonegap Desktop (pour vous aider à créer vos apps), Phonegap build (pour compiler vos apps), un site Web avec un repository de plugins (maintenant déprécié), pour l’instant, ces deux solutions sont identiques.

Adobe PhoneGap

adobe-phonegap

Adobe PhoneGap ou seulement PhoneGap est un framework destiné à faciliter la création d’applications mobiles pour différentes plateformes – Android, iOS, Windows Phone. Développé par Adobe Systems, il est basé sur Apache Cordova et distribué sous licence open-source. Les applications qui en résultent sont hybrides, ce qui signifie qu’elles ne sont ni vraiment natives, ni purement basées sur les langages HTML, CSS et JavaScript.

PhoneGap, Wikipédia : https://fr.wikipedia.org/wiki/Adobe_PhoneGap

PhoneGap, officiel : https://fr.wikipedia.org/wiki/Adobe_PhoneGap

Apache Cordova

apache-cordova

Apache Cordova ou plus anciennement Apache Callback ou PhoneGap, est un framework open-source développé par la Fondation Apache. Il permet de créer des applications pour différentes plateformes (Android, Firefox OS, iOS, Ubuntu, Windows 8…) en HTML, CSS et JavaScript. Les applications qui en résultent sont hybrides, ce qui signifie qu’elles ne sont ni vraiment natives, ni purement basées sur les langages HTML, CSS et JavaScript.

Apache Cordova, Wikipédia : https://fr.wikipedia.org/wiki/Apache_Cordova

Apache Cordova, officiel : https://cordova.apache.org/

Vous voyez, c’est pareil ! 🙂

Lequel choisir entre Apache Cordova et Phonegap ?

Personnellement je vous conseille de ne pas céder à la tentation d’utiliser Phonegap uniquement parce qu’il s’agit d’Adobe et qu’ils proposent une application de création d’applications Desktop ainsi qu’un builder en ligne.

Certes, avec Apache Cordova, vous devrez utiliser des lignes de commandes pour créer vos conteneurs d’applications, et vous devrez utiliser des lignes de commandes pour compiler vos applications Android, au lieu du builder tout fait de Phonegap. Mais d’un autre côté, utiliser les outils tout près d’Adobe vous rendent aussi dépendants d’eux.

La solution originale est Apache Cordova, et non Adobe PhoneGap !

Avec Cordova vous disposerez de la documentation originale, des dernières innovations plus rapidement, et peut-être même d’un meilleur support.

On voit que le repository de PhoneGap est maintenant déprécié. Cela peut laisser entrevoir un éventuel abandon du support de certains projets de PhoneGap. Qui sait ?

Si le builder PhoneGap tombe en panne, ou si l’application Desktop de PhoneGap est buggée, vous n’aurez de toute façon pas d’alternative que de repasser à Cordova !

Pour ma part, j’ai commencé par utiliser PhoneGap, et je le regrette. J’aurais gagné du temps en me formant dès le départ à Cordova tout simplement.

Ionic

Ionic est un framework crée en 2013 basé sur AngularJS et Apache Cordova. Il permet de créer un code multisupport en utilisant des outils Web comme HTML, CSS, Javascript, afin de générer des applications iOS, Android, Chrome.

ionic

Ionic sur Wikipédia : https://fr.wikipedia.org/wiki/Ionic_(framework)

Site officiel : http://ionicframework.com

Ionic is modeled off of standard native mobile development SDKs, bringing the UI standards of native apps together with the full power and flexibility of the open web. Ionic runs inside Cordova or Phonegap to deploy natively, or as a Progressive Web App. Develop once, deploy everywhere.

Quelques notions à prendre en compte en développement HTML / CSS mobile

Au-delà de l’apprentissage du code HTML, CSS, Javascript et éventuellement les standards de certains frameworks comme jQuery, il vous faudra aussi faire quelques efforts pour donner un aspect plus natif à votre application.

Par exemple, il sera utile d’utiliser la position CSS « fixed » pour l’affichage d’un menu supérieur. Un peu comme un fixed header en Web classique.

Il faudra bien vérifier que vous gérez bien les différentes tailles d’écrans. Par exemple, il existe du code HTML pour régler la taille de la police sur les périphériques mobiles.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

Vous devrez aussi charger vos contenus grâce à Ajax au lieu de recharger les pages complètement comme des pages Web, sinon, vous serez grillé direct !

Ce type d’astuces donneront un aspect plus « natif » à vos applications. Pensez-y ! Laissez parler le développeur qui est en vous.

Comment implémenter les fonctionnalités qui ne sont pas disponibles en Javascript ?

Très bonne question !

En effet, Javascript ne gère pas certaines fonctionnalités telles que les notifications mobiles PUSH, ou la récupération des coordonnées géographiques, ou encore la copie de documents sur la carte mémoire SD du périphérique mobile.

Pour tout cela, nos frameworks mettent à disposition des plugins qu’il suffit d’installer. Il s’agit souvent d’une ligne de code à ajouter à son fichier de configuration .xml, et d’une ligne de commande à taper dans son Terminal ou son Invite de commande. Vous aurez vite l’habitude d’ajouter des plugins à vos applications mobiles. Cela rendra vos développements presque aussi puissants que le développement natif Objective C ou Java.

Apprendre à développer en PhoneGap, Cordova, Ionic, etc.

Pour apprendre à développer grâce à PhoneGap, Cordova ou Ionic par exemple, je vous conseille les ressources suivantes :

  • Grafikart : il rend les choses très simples grâce à des tutos vidéos très bien faits.
  • Openclassrooms : regorge de cours sur tous les sujets dont vous auriez besoin.
  • Stackoverflow : si vous avez un bug, une question ou si ça coince quelque part (anglais).
  • Alsacreations : pour le design d’applications, CSS & co.
  • Le site et forum officiel du framework de votre choix, bien sûr.

Matériel informatique nécessaire pour développer son application mobile Android & iOS

Vous aurez obligatoirement besoin des choses suivantes :

  • Un périphérique mobile Android (OS dernière version de préférence) : àpd. ~100€.
  • Un périphérique mobile iOS (iPhone ou iPad, à jour) : àpd. ~300€ (ancienne édition).
  • Un ordinateur Mac récent (dernière version d’OS X, donc SSD, pas un vieux Mac) : àpd. ~1.400€.

Vous devrez absolument tester votre app sur périphérique réel.

Compiler son application mobile PhoneGap, Cordova ou Ionic ?

Sur iOS

Cela se fait via Xcode.

Il est impossible de compiler une application Apple iOS sur Windows. Il vous faudra donc un Mac pour faire tourner la dernière version d’XCode. Si vous avez un vieux Mac, vous devrez passer à l’Apple Center pour le booster à fond histoire de pouvoir faire tourner El Capitan, ou acheter un petit Mac 11′ par trop cher uniquement pour le dév Apple.

Sur Android

Pour compiler vos apps sur l’OS de Google, cela se fait par ligne de commandes.

Il vous faudra cependant d’abord installer cette armada :

  1. Java Development Kit (Java JDK)
  2. SDK Manager
  3. Apache Ant

Vous pouvez aussi faire les fainéants et tenter de compiler vos applications via le builder de PhoneGapbuild.phonegap.com. Ça fonctionne très bien. Peut-être même un peu trop. 😀

Prix developer licenses ?

À ne pas oublier, il vous faudra payer les licences développeur chez Apple et Google.

  • Licence Google, 25€ pour l’inscription.
  • Licence Apple, 99$ par an.

Budget pour commencer à développer ?

On calcule et on arrondit.

Approximativement, pour commencer à développer pour mobile, cela vous coûtera +- 2.000€.

Soumettre son application sur le store d’Apple iOS, AppStore, et Android, Google Play

Pour Google Play, c’est très simple. Il vous suffit de créer quelques captures d’écran, un descriptif, envoyer votre fichier .APK fraîchement compilé et quelques minutes plus tard, votre app est sur le magasin d’applications Android !

Pour l’AppStore, accrochez-vous. Vous aurez besoin de générer tout un tas de certificats pour Xcode, ainsi que d’innombrables icônes et flashscreens dans tout un tas de formats. Ensuite, l’envoi de l’application se fait par le biais d’Xcode connecté à iTunes Connect. C’est un peu galère. Une semaine après avoir soumis votre travail à Apple, vous recevrez le verdict. Pour faire court, apparaitre sur l’AppStore, ça se mérite. 😉

Vous savez maintenant comment développer vos propres applications mobiles grâce au HTML / JavaScript, sans devoir coder en Objective-C ou en Java ! 😉 

Photo du profil de Sebastien
Moi c'est Seb, je suis développeur full stack chez Kim Communication. J'adore le monde du Web, mais j'aime aussi beaucoup la nature. Marcher jusqu'à n'en plus pouvoir, ça aide à se vider la tête, et quand on développe comme moi, elle est bien pleine. Je passe, également, pas mal de temps à lire des news sur les derniers gadgets technologiques qui déboulent sur le marché.
1 commentaire
  1. j’ai déjà utilisé phone gap mais vous ma motivé pour utilisé Ionic mercii bcp très bon article à partager

    Reply
Réagissez !

Votre e-mail ne sera pas divulgué.Champs obligatoires *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Mot de passe perdu

Register