Je vais vous présenter Ionic Framework. Pourquoi, me direz-vous? Voilà, j’ai découvert ce framework lors du développement d’une idée que j’avais en tête depuis un moment et à laquelle je voulais donner vie. C’est ce que Ionic m’a permis de faire et je vais vous expliquer comment.
Ionic Framework est un mélange d’outils et de technos pour développer des applications mobiles hybrides rapidement et facilement. Il s’appuie sur AngularJS pour la partie application web du framework et sur Cordova pour la partie construction des applications natives. Ce framework open source permet de développer une application déployable sur plusieurs environnements tel qu’un site web ou une application mobile pour des systèmes tel que Android ou iOS ou Windows Phone…
Comment ai-je découvert Ionic Framework? Je discutais avec un ami de l’idée de développer une application mobile pour Android. Mais voilà, j’étais un peu gênée car la nouvelle version du SDK Android venait de sortir et il fallait revoir l’implémentation des nouvelles librairies. Je signalais ce point gênant à mon ami ainsi que l’inconvénient de devoir recoder une grosse partie de l’application si je voulais la déployer sur une autre plateforme. C’est là qu’il m’a parlé de Ionic Framework et des possibilités que celui-ci offrait: « Tu connais le HTML, le CSS, Javascript et tu commences à faire de l’AngularJS. Tu devrais vraiment essayer Ionic. Et en plus, je suis sûr que ça va te plaire! ».
Et c’est vrai. On trouve rapidement ses marques, lors du lancement des premières commandes, on génère un projet bien organisé où chaque élément est à sa place. On gagne en rapidité de développement, on voit les modifications appliquées automatiquement à la page exécutée.
Pour commencer, Ionic Framework s’appuie sur la plateforme NodeJS et plus précisément NPM (Node Package Manager) pour installer les nouveaux modules développés par la communauté et gérer les dépendances entre les modules, donc il vous faudra l’installer (si vous ne l’avez pas déjà fait). Ensuite, pour générer une application mobile hybride, il vous faut le SDK Java et le SDK Android (si on veut faire une application Android ou tout autre SDK pour la plateforme visée), qui serviront à la compilation et à la construction de l’application.
Ensuite, il suffit d’exécuter la commande suivante (en ligne de commande)
$ npm install -g ionic cordova
Sous Windows 7, la commande “npm” ne fonctionnera pas sans les variables d’environnement de système JAVA_HOME, ANDROID_HOME et NPM.
Sous linux, les variables d’environnement JAVA_HOME et ANDROID_HOME sont nécessaires.
Maintenant que l’on a un environnement de développement opérationnel, on va créer une application avec un menu sur le côté que l’on va appeler MySideMenuApp
Ensuite, pour créer un nouveau projet, on saisit la commande (sur Linux, il faudra peut-être précéder la commande de sudo pour exécuter celle-ci en tant que root) :
$ ionic start MySideMenuApp sidemenu
Dans Ionic Framework, on a 3 templates de disponibles : tabs (application avec des onglets, template par défaut), sidemenu (application avec un menu sur le côté) et blank (application vide)
Si vous avez exécuté la commande de création d’un projet en tant que root, n’oubliez pas de modifier les droits sur le répertoire nouvellement créé :
$ sudo chown user:group MySideMenuApp
Si on va dans le répertoire de l’application nouvellement créée, on a l’arborescence suivante :
–> ./MySideMenuApp
|–> ./hooks (pour la gestion des plateformes cibles)
|–> ./plugins (plugins à utiliser par l’application)
|–> ./scss (pour customiser le “look and feel” de Ionic)
|–> ./www
|–> ./css
|–> ./img
|–> ./js
|–> ./lib
|–> ./templates
|–> index.html
|–> .bowerrc
|–> .gitignore
|–> bower.json
|–> config.xml
|–> gulpfile.js
|–> ionic.project
|–> package.json
On peut maintenant, à partir du répertoire de l’application, lancer un serveur local de test à l’aide de la commande
$ ionic serve
Pour avoir la liste des différentes options disponibles pour ionic,
$ ionic -h
Une documentation plus complète sur le démarrage du développement à l’aide de Ionic Framework est disponible : http://ionicframework.com/docs/guide/
Pour pouvoir générer une application de type Android, il ne nous reste plus qu’à ajouter la plateforme avec la commande
$ ionic platform android
Maintenant, on a un répertoire ./platforms/android qui contient les sources de l’application Android.
Allez, on lance cette application:
$ ionic emulate
Cette action peut être un peu longue car l’émulateur Android est lancé, et celui-ci n’est pas connu pour sa rapidité… On peut aussi installer l’application directement sur le device sur lequel on veut faire le test (téléphone ou tablette), en le branchant directement sur le PC sur lequel on fait le développement et en activant le mode « developper » sur le device concerné. Sur les nouvelles versions d’Android, il faut cliquer 7 fois sur le numéro de version d’Android dans les paramètres du device.
Et voilà!
On trouve beaucoup d’avantages à utiliser Ionic Framework pour développer des applications mobiles et web. On développe une fois et on déploie sur plusieurs environnements. On s’appuie sur AngularJS, ce qui nous permet d’avoir un développement rapide et sur Cordova, qui nous permet d’accéder aux éléments du device comme le bluetooth ou l’accéléromètre. On peut déployer rapidement l’application sur un device connecté directement via la ligne de commande, ce qui est agréable lorsqu’on est en phase de développement et que l’on veut tester vite fait un petite partie de l’application sans devoir tout reconstruire. De plus, Ionic Framework va continuer d’intégrer les évolutions d’AngularJS, c’est-à-dire que les changements d’AngularJS 2 seront intégrés dans Ionic 2, ce qui laisse présager un bel avenir pour Ionic.
Le framework supporte l’intégration du SDK Android jusqu’à la version 4.0+, il ne supporte pas encore la version 5, et il est possible aussi que certaines fonctionnalités d’Android ne soient pas supportées totalement. Mais je trouve que l’on peut vraiment développer rapidement une application aussi bien web que mobile sans trop de difficultés d’intégration avec un bootstrap de base puissant et la possibilité de mettre en place une icone applicative et un splash screen.
J’adore faire du développement « hybride » avec Ionic Framework et je pense que je vais suivre de près les évolutions de celui-ci dans les mois à venir!
Super article. Ça donne vraiment envie d’essayer !
J’ai testé Ionic la semaine dernière en concevant une petite application et je trouve cela bien sympatique. C’est comme pour tout, tout dépend de ton besoin au départ mais pour des tests ou bien des petites applications, grâce à ses composants le framework est utile et il permet un gain de temps.
Super article, je vais tester ça bientôt, merci !
[…] Petite introduction à Ionic Framework, qui permet de développer des applications mobiles hybrides en HTML5. http://www.duchess-france.org/presentation-de-ionic-framework/ […]
Merci pour l’info et la diffusion de la revue de press!
Pour info la team Ionic propose d’utiliser Genymotion en lieu et place de l’émulateur Android par défaut.
et ils ont raison il est largement mieux.
http://ionicframework.com/docs/ionic-cli-faq/#genymotion
J’ai vraiment aimé votre tutoriel , mais j’ai une petite question , la je suis entraine de développer une application pour un événement , contient programme et hashtag par exemple plus le game , tout marche bien sauf , que le game et fait séparément , la question et est il possible d’intégrer ce projet sous le premier je veux le mettre dans le www
Bonjour je viens aussi de découvrir le framework ionic. Mais pour maîtriser le framework je me dis qu’il faudrait avoir un livre dessus ou un tutoriel pdf ou epub. Alors quelqu’un pourrait – il m’aidait en me donnant un lien pour avoir un doc gratuit ?
Merci pour ce super tuto
Je sais beaucoup de livres sur ce sujet sont en cours de rédaction et devraient paraître d’ici peu (1 est prévu pour juillet et 1 autre pour aout/septembre : Learning Ionic de Arvind Ravulavaru chez PACKT Publishing (juillet) et Ionic In Action de Jeremy Wilkes chez Manning (aout)). Par contre, à l’heure actuelle, ces livres en cours de rédaction sont en langue anglaise. Je n’ai pas vu de livre prévu en français. Sinon sur le net, on trouve pas mal de ressources, tutoriels et autres aides autour du développement ionic.
Bon article d’introduction a ionic.
Perso je l’utilise depuis plus d’un an pour réaliser des applis mobiles (et angularJS seul pour mes applis web), l’ensemble est globalement simple à mettre en place et le resultat est plutôt agréable à utiliser, juste un petit reproche sur la réactivité des applis pour les applications complexes sur android utilisant les anciennes version de webview. On peux asser facilement remplacer webview par crosswalk pour corriger ça.
Mon retour d’expérience est le suivant : très simple à mettre en place au début en suivant les tutos ionic (enfin plus exactement angularjs) tend par la suite pas mal de pièges qui mettent souvent les nerfs à l’épreuve. A ceci s’ajoute le problème de la documentation, elle est quasi inexistante et bien souvent abscons.
Les ouvrages sur le sujet seront bien utile mais l’apprentissage de se framework reste a mon sens un peu ardu.
Mais une fois qu’on a passer le cap c’est un vrai plaisir à utiliser.
Pour finir une petite image sur la courbe d’apprenstissage d’angularjs : http://a3.files.readwrite.com/image/upload/c_fit,cs_srgb,w_620/MTE5NDg0MDYyNzYzMjg4MDc5.png
Bonjour
etes vous sur paris?
j’ai un projet dont je vous parlerai bien pour avoir votre point de vue
Votre profil professionnel m’interresse beaucoup 🙂
Cordialement
Laurent
Bonjour,
Je ne suis pas sur Paris, je suis à Brest, jolie ville portuaire 😉
Cordialement,
Stéphanie
Utiliser angularjs simple vaut mieux qu utiliser ionic. Il y a des tonnes d exemples d utilisations angularjs alorsqu on peut rapidement être freiné avec ionic faute d exemples assez explicatifs.
Bonjour,
J’ai reussi a tout installer mes que doit on faire quand on veux ouvrir un template que j’ai acheter sur code canyon?
Merci en tout cas pour ce tuto
Bonjour,
je voulais savoir si vous savez comment le téléphone interprète l’application. Y a t’il un serveur qu’Ionic lance pour gérer l’application vue que ce n’est pas une application native et si oui comment il s’appelle.
Merci
Bonjour,
Je ne comprends pas très bien la question. Lorsqu’on installe l’application sur un téléphone ou une tablette, celle-ci est packagée pour fonctionner sur le device sélectionné, comme une application native. Ce n’est pas plus compliqué que ça.
Bonjour,
J’ai un projet d’appli et pourquoi pas le faire sous ionic.
Es-ce possible de vous contacter?
Je suis de Rennes. pas très loin de Brest
Merci d’avance
Bonjour,
Oui pas de souci. Vous pouvez m’envoyer un mail stephanie[point]moallic[at]gmail[point].com.
@+
Merci pour cet article très intéressant et bien rédigé !
Bonjour,
On peut utiliser un web service et faire de la géolocalisation avec ça ?
Merci.
En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations
Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.