Archive de ‘Ionic’ Categorie

Ionic (Part 1) – Développement hybride pour mobile

jeudi, mai 24th, 2018

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.

Ionic rendu web

Nous verrons dans la seconde partie l’architecture de Ionic et les fichiers à manipuler.