Ionic est un framework pour développement mobile pour application hybride.
Ionic permet aux développeurs d’application WEB de développer l’application mobile dans un langage qui leur est famillier comme le HTML, CSS ou Javascript.
Ionic se base sur d’autres framework comme Angular ou encore twitter bootstrap se qui permet vraiment au développeur de se concentrer sur la partie métier/fonctionnel.
Ionic à l’avantage que toutes les applications hybrides on, c’est à dire de s’abstraire des langages natifs des différents OS du marché ainsi vous aurez une application unique que ça soit pour une application mobile Android, Microsoft ou iOs.
Installation de Ionic
Avant d’installer Ionic, vous devez installer nodeJs.
Ensuite il faut vous rendre sur le site de ionic et créer un compte.
Puis installer Ionic avec la ligne de commande suivante
npm install -g ionic cordova
Ou suivre les instructions du site officiel pour plus de détails.
https://ionicframework.com/docs/intro/installation/
Ma 1ere application mobile avec Ionic
Je vous conseil de bien connaitre votre version de Ionic afin de rechercher de l’aide plus facilement que ça soit sur la doc officiel ou bien sur des sites d’entraide. Pour ce faire utiliser la ligne de commande
ionic -v
Ionic vous demandera surement vos identifiants et mot de passe lors de la creation de votre 1er projet, donc mémoriser les.
Pour la création d’un projet il faut utiliser la commande
ionic start
suivit de 2 paramêtres le nom du projet puis le type de template d’application, a savoir:
- tabs : Un layout composé de 3 tabs
- sidemenu: un layout avec un menu glissable sur le coté
- blank: Basique avec une page simple
- super: un projet avec plus de 14 pages
- tutorial: un starter complet pour prendre en main Ionic
Au final votre ligne de commande devrait ressembler à ca
ionic start MonAppMobile tutorial
il vous suffit après de vous rendre dans le dossier nouvellement créer (MonAppMobile) et d’exécuter la commande
ionic serve
, cela vous permettra d’exécuter votre application dans un navigateur web et de voir le résultat de vos modifications en temps réel.
Nous verrons dans la seconde partie l’architecture de Ionic et les fichiers à manipuler.