Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Présentation et Utilisation de IONIC Framwork

Par Lucas MARTINI Publié le 26/04/2018 à 16:22:16 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Presentation de Ionic Framwork

Ionic est un Framework Open Source qui vous permettra de créer simplement et efficacement des applications multiplateformes. En effet grâce à Ionic il va vous être très facile de déployer une application sur IOS, Android et Windows (UWP). De nombreuses possibilités s’offrent à vous, vous allez pouvoir développer des applications web qui auront l’air d’application native grâce aux différents plugins « Cordova » et « Angular » que vous pourrez ajouter

Vous pourrez utiliser différentes fonctionnalités au sein de votre application comme l’appareil photo ainsi que les différents capteurs de votre smartphone. L’environnement Ionic est entièrement personnalisable que ce soit du simple splashscreen que vous pourrez modifier jusqu’aux transitions entre les onglets et les différents menus que vous pourrez intégrer.

Vous aurez également la possibilité de commencer une application de zéro (from scratch) ou directement télécharger un Template (thème) sur lequel vous pourrez ajuster et développer vos pages et votre style grâce aux nombreux thèmes payant et gratuit que vous pourrez trouver sur internet.

Les Avantages de Ionic :

Ionic est simple d’utilisation, ce dernier vous permettra de commencer la programmation d’application mobile Cross-Platform sans aucune notion particulière en programmation ou autres. L’avantage prédominant de ce dernier est le fait de n’avoir qu’à créer une seule fois l’application, ce qui fera d’elle une application dite universelle qui pourra être déployée sous différentes plateformes.

Nous pouvons considérer les applications Ionic comme des applications hybrides, car ces applications ont un double avantage (le côté natif et le côté Cross-Platform).

Grâce à Ionic vous pourrez également gérer les deux aspects essentiels lors d’un projet de développement qui sont :

- Le back-end (tous les éléments qui vont permettent de faire fonctionner l’application).

- Le font end (l’interface graphique).

De plus, Ionic possède une grande source de documentation disponible a tout moment, sans compter également sur la communauté des utilisateurs IONIC qui est un réel atout lorsque que vous être confronté à une impasse ou si vous avez une quelconque question. Voici le lien vers les documentations officielles :

https://ionicframework.com/docs/

En plus de ces nombreux avantages, ionic nous permet de tester en direct nos applications grâce à un émulateur en local. Grâce à une simple ligne de commande, nous pouvons émuler notre application sous les différentes plateformes qui sont toutes gérées par l’émulateur (Ios, Android, Windows). Cela procure non seulement un grand confort, mais aussi une grande efficacité lors de notre développement. Cela nous permet d'avoir un rendu en direct sur notre application.

A qui est destiné Ionic ?

Choisir de développer ses applications sur Ionic c’est faire le choix de la rapidité, de l’efficacité et d’un rendu visuel propre sans notions particulières dans le domaine du développement mobile.

Ionic est destiné aux personnes qui débutent dans le monde du développement mobile et qui souhaitent obtenir un rendu de type professionnel et ne voulant pas perdre de temps à créer des applications uniquement natives.

Les différents langages utilisés pour développer une application Ionic:

Lorsque nous allons créer un projet d’application Ionic, nous serons confrontés comme dit plus haut aux deux aspects de l’application (le front-end et le back-end).

Concernant le Front-end, les langages classiques utilisés sont HTML / CSS.

Et pour ce qui est du Back-end les langages utilisés se rapprocherons plus du TypeScipt, JavaScript et AngularJS.

Connaitre la Structure d’un projet Ionic :

Il est essentiel de connaitre la structure du projet sur lequel on travaille. La structure d’un projet Ionic est assez simple et explicite. Nous allons avoir dans notre projet plusieurs dossiers, mais nous allons pour l’instant nous intéressé au dossier « www » c’est ce dernier qui est le plus important et qui va contenir nos principaux éléments :

- « asset » : ce dernier va contenir tous nos images et autres qui seront affichés sur notre application.

- « css » : ce dossier contiendra toutes nos feuilles de styles

- « js » : dans ce dossier nous trouverons tous nos scripts

- « template » : Si votre projet s’est créé à partir d’un template, tous les éléments de ce templates seront présents dans ce dossier.

En revanche si vous décidez de partir d’un projet vierge (blank) vous pourrez ultérieurement créer vos propres dossiers afin de créer page par page vos propres dossiers vous permettant de gérer indépendamment vos pages.

Vous aurez alors un dossier « src » qui contiendra un sous-dossier « pages » dans lequel toutes vos pages seront référencées dans des sous-dossiers portant le nom de vos pages.

Vous pourrez vous rendre dans ces sous-dossiers, et vous aurez alors à disposition :

- Un fichier .html qui sera le contenu de votre page

- Un fichier .css qui sera le style de votre page

- Un fichier .ts qui sera le script de votre page si vous choisissez de développer le back-end en TypeScript.

Les différentes Versions de IONIC :

Lors de la créations d’un projet Ionic vous aurez tout intérêt à choisir la dernière version de Ionic. Tous simplement, car Ionic est un framwork ce qui veut dire que ce dernier se met constamment a jour en fonction des différentes versions des OS pour que la publication sur les stores prennent en compte les derniers périphériques sur le marché.

Vous avez surement dû voir sur le store Apple par exemple que certaines applications étaient retirées du marché, car elles n’étaient plus compatibles aux OS. Ce qui est assez logique, car au vu de l’évolution des différents OS les périphériques deviennent de plus en plus perfectionnés et il en va de soi que les applications en font de même.

Vous trouverez ci-dessous les différentes versions de Ionic avec les OS compatibles :

Ionic 1 (2014 a 2017)

Ionic V1 qui a la base a était développer pour les applications native et hybride. Le concept permettait de créer des applications mobiles plutôt que des sites Web mobiles. Ionic V1 était donc compatible jusqu’à IOS 7 + et android 4.1 et plus. À noté que l’apparition de Cordova s’est fait qu’à partir de la version 2.

Ionic 2

Ce dernier est apparu en 2016, Ionic V2 s’est plus tourné vers la création d’application native et hybride par le biais de Cordova. Ce qui a permis d’ajouter le principe d’application web en utilisant des iframe par exemple (simple appel de page web sur une application mobile, c’est un moyen pratique, simple et efficace) Ionic V2 étais compatible jusqu’à IOS 8+ , de plus Windows Universal Application a étai pris en compte et jusqu’à Android 4.4+.

Ionic 3

Ionic 3 intègre la version Angular 4.0.0 et TypeScript 2.1 et 2.2. Il est destiné aux OS non pris en compte par la V2 de IONIC, plus simplement il prend en compte tous les derniers OS sortis depuis 2017.

Installation de Ionic :

Pour commencer, nous allons installer tous les outils nécessaires au bon fonctionnement de votre application :

1 - Tout d’abord si vous ne l’avez pas déjà je vous conseille d’installer Cmder, ce dernier vous sera bien plus pratique que votre simple Invite de commande. Vous pouvez le télécharger avec le lien ci-dessous :

2 - NodeJS : Il vous faut absolument télécharger NodeJS si vous ne l’avez pas. Ionic s’appuie énormément sur ce package et plus précisément NPM (Node Package Manager) ce dernier permettra a ionic d’installer des modules ainsi que des dépendances, sans cela vous ne pourrez presque pas installer de paquet additionnel. Pour le télécharger rien de plus simple, il vous suffit de suivre le lien ci-dessous :

https://nodejs.org/en/

3 - La troisième étape consistera à se rendre sur votre cmder et de tapez la commande suivant afin d’installer ionic et cordova à partir de NPM :

$ npm install –g ionic cordova

Attention : si vous votre cmder vous indique qu’il ne reconnaît pas la commande « npm » cela signifie que votre plugin NodeJs est mal installé. Réitéré l’installation !

Conclusion

Vous en savez désormais un peu plus sur Ionic et son utilisation. Je vous invite à vous documentez davantage et à commencer des projets pour vous entrainer. D'autres articles sortiront afin de complémenter celui-là. Ils porteront sur la création et l'aboutissement d'un projet d'application avec Ionic, de sa création jusqu'à sa mise en ligne.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels