Cet Post.tutoriel est destiné au personne voulant comprendre et commencer avec le Framework à la mode pour mobile, Ionic Framework.
Qu'est-ce que Ionic ?
Ionic est tout simplement un framework de développement qui vous permettra de créer des applications hybrid en HTML5, CSS, Javascript. Un des avantages non négligeable, vous pouvez développer votre application et tester le rendu directement depuis votre navigateur (oui pour ça en effet, il n'y a pas forcement besoin de Ionic uniquement de Cordova). M'enfin reprenons, comme vous devez le savoir, Ionic est un framework front-end avec des airs de Bootstrap (le fonctionnement premier ressemble à celui de bootstrap).
En quelques lignes de commande (3 même) vous pouvez créer une application multiplateforme qui a du style, rend extrêmement bien et surtout fonctionnelle. Nous allons voir comment nous y prendre pour la faire.
Ce qu'il faut savoir
Ionic est développé avec Angular (depuis peu il supporte même la version 2 d'AngularJS). Concernant la mise en forme, il utilise par défaut CSS et SASS mais vous pouvez aussi utiliser LESS en l'installant.
Par conséquent, si vous souhaitez vous lancer dans le développement d'application mobile avec Ionic il vous faudra au préalable connaître les langages de programmation suivants :
- l'HTML(5),
- le CSS,
- le JavaScript.
- Le model MVC est un atout considérable pour l'utilisation d'Angular.
(Je ne connaissais absolument pas Angular quand j'ai débuté avec Ionic et pourtant je n'ai pas eu trop de mal à l'utiliser).
Installation de Ionic
Avant toute chose, il faut que vous ayez NodeJS d'installé sur votre ordinateur, sinon ça ne sera malheureusement pas possible.
Donc, pour installer Ionic vous devez au préalable lancer l'invite de commande Node.js et entrer cette commande pour installer Apache Cordova (sautez cette étape si vous l'avez déjà)
$ npm install -g cordova
Puis, installer Ionic avec cette ligne de commande :
$ npm install -g ionic
Voilà... l'installation de Ionic est faite, maintenant vous allez pouvoir créer votre première application en utilisant le framework. Mais, par défaut avec Ionic vous avez 3 choix de template :
- Blank : Une application vierge sans navigation ni tabs.
- Tabs : Une application avec menu "onglet", affiché sur le footer (fixed).
- SideMenu : Une application avec un menu gauche qui s'affiche au clique ou au geste.
En générale je commence toujours mes projets en utilisant le SideMenu du coup on va utiliser celui-ci pour créer notre application.
Création de l'application
Nous voilà dans le vif du sujet ! créons notre première application :
On commence par créer un dossier "Mes Apps" dans le répertoire que vous souhaitez et ensuite entrer dans le dossier en ligne de commande (personnellement je l'ai mis dans mes documents).
Donc :
$ cd C:\Users\Shinix\Documents\Mes Apps $ ionic start MaSuperApp sidemenu
Remplacez ici "MaSuperApp" par le nom que vous souhaitez donner à votre application.
Ensuite, et bien voilà on a déjà créé notre application et on va pouvoir la voir en action depuis notre navigateur :
$ cd MaSuperApp $ ionic serve
Si vous souhaitez arrêter la visualisation sur le navigateur faites : CTRL+C sur l'invite de commande puis "o"
Mais n'allons pas trop vite, maintenant que votre application est mise en place il va falloir ajouter une ou plusieurs plateforme. Donc pour Android :
$ ionic platform add android
et pour iOS remplacez "android" par "ios", tout simplement.
Si vous souhaitez compiler votre application et la tester directement sur votre appareil (Android seulement) il vous suffit d'executer la commande suivante :
$ ionic build android
Voilà, vous n'avez plus qu'à envoyer l'application sur votre téléphone et l'installer.
C'est pas beau tout ça :-)
Conclusion
Dans ce mini-tuto on a vu l'utilisation de base du Framework Ionic, dans un autre Post.je ferai peut-être l'installation de plugins, l'utilisation de NgCordova ou encore la publication et l'émulation d'une application, mais je ne trouvais pas utile de l'intégrer à cet Post.puisque ça n'a pas réellement de lien avec la découverte et la première utilisation.
