Présentation de Ionic Framework

Tech

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.

1 – Qu’est-ce que Ionic Framework ?

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.

2 – Et si on essayait de créer une application en 5 minutes?

2.1 – Le début

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.

2.2 – Et la suite…

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

2.3 – Et ça ressemble à quoi ?

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

Et là, on obtient une première application qui s’exécute en local sur notre machine.

Première application

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/

2.4 – Et Android dans tout ça?

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à!

Application Android

 3 – La suite…

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!

Tags : , ,

Développeuse informatique depuis plus de 15 ans, avec une prédilection pour le front-end, les trucs pour faire joli et les bonnes pratiques, dans les techno autour de Java et de la JVM voire du web. Passionnée d'informatique mais pas que...

Commentaires

  • 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.

  • Marion FELIX dit :

    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/ […]

  • Joris dit :

    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

  • guensima dit :

    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

  • royken dit :

    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

    • Stéphanie dit :

      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.

  • bvb dit :

    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

  • Laurent dit :

    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

  • Stéphanie dit :

    Bonjour,

    Je ne suis pas sur Paris, je suis à Brest, jolie ville portuaire 😉

    Cordialement,
    Stéphanie

  • Bamada dit :

    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.

  • nawfel dit :

    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

  • Ermal dit :

    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

    • Stéphanie dit :

      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.

  • Timothée dit :

    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

    • Stéphanie dit :

      Bonjour,

      Oui pas de souci. Vous pouvez m’envoyer un mail stephanie[point]moallic[at]gmail[point].com.

      @+

  • Marvis dit :

    Merci pour cet article très intéressant et bien rédigé !

  • Pierre-Yves dit :

    Bonjour,
    On peut utiliser un web service et faire de la géolocalisation avec ça ?
    Merci.

  • Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Nom*

    Email

    Website

    17 − sept =

    *

    Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

    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.

    Fermer