Découvrir ionic 5

Comprendre les applications mobiles

Sur le marché des applications mobile, il existe deux grands concurrents : Apple et Google. Et il est important de souligner que chacun d’eux possède ses propres capacités et défauts, mais aussi, son propre système d’exploitation et langage informatique. D’une part, Apple possède iOS et utilise les langages Objective-C ou Swift. D’autre part Google possède Android et ses applications sont codées en Java ou Kotlin. 

En d’autres termes, cela signifie que si je veux créer une application sur ces deux plateformes, il me faudra la coder en deux langages informatiques différents. Les applications mobiles codées dans les langages propres aux systèmes d’exploitation sont appelées des applications mobiles « natives ». Mais cela engendre plusieurs inconvénients. Cela demande deux fois plus de travail, de maintenance et de budget. C’est pour cela que les développeurs se sont penchés sur une solution multi plateformes. Et à partir de 2010, apparaissent des frameworks permettant de créer des applications multi plateformes avec une seule base de code. 

Ces frameworks se basent sur les langages web HTML, CCS et JavaScript. De plus ces frameworks se chargent pour nous d’adapter notre code pour les différents systèmes d’exploitation. C’est ce qu’on appelle les applications mobiles « hybrides ». Ionic est un framework qui nous permet de faire des applications mobiles hybrides avec du langage informatique web.

Le framework ionic 5

Définition d’ionic

Ionic est un framework libre d’utilisation qui permet de créer des applications mobiles iOS et Android et de les envoyer sur les App Stores avec une seule base de code unique. Il a été créé en 2013 et a suivi plusieurs évolutions au fur et à mesure des années. Nous sommes actuellement à la version 5 et il est aujourd’hui l’un des meilleurs frameworks open source au monde pour la création d’applications mobiles hybrides qu’on appelle également applications mobiles « multi plateformes ». 

Les anciennes versions d’Ionic se basaient sur le framework Angular, mais la version 5 a su s’adapter au framework populaire du moment et vous avez à présent la possibilité de construire votre application Ionic avec la technologie que vous préférez, que ce soit Angular, React.js ou Vue.js. De ce fait, nous allons pouvoir choisir une de ces technologies comme base de code pour créer l’application mobile avec Ionic. 

Les fonctionnalités d’ionic

Mais Ionic, ce n’est pas que ça. En effet, le framework donne accès à une large liste de bibliothèque de composants pour mobiles afin de permettre de créer des interfaces vraiment sympathiques. Il a aussi été conçu pour fonctionner rapidement sur tous les derniers appareils mobiles. Il donne également accès à des fonctionnalités natives comme la caméra, la géolocalisation ou Bluetooth. 

Et Ionic, est également une communauté. Il y a actuellement plus de cinq millions d’utilisateurs dans le monde. Ionic est vraiment un framework très riche, agréable et facile à utiliser. Afin de pouvoir faire de l’ionic, il est de nécessaire de définir les prérequis. En premier lieu, il faut avoir de bonnes connaissances en HTML, CSS et JavaScript. Ensuite, il faut avoir au moins un niveau basique du framework Angular. Il n’est pas nécessaire d’être un pro d’Angular, mais il faut savoir au moins comment travailler avec des composants et ce qu’est Angular CLI. Des connaissances en SCSS seront également utiles, mais cela n’est pas indispensable.

Installer ionic 5 avec le CDN

Sur le site officiel d’ionic, on peut trouver toutes les informations relatives au framework ionic.

Pour installer ionic, nous avons plusieurs moyens de le faire. Par contre, l’avantage du CDN est de pouvoir faire des tests rapide et il est possible d’utiliser tous les composants de base de Ionic sans avoir à installer Angular ou tout autre framework. On peut l’avoir à partir de l’adresse : https://ionicframework.com/docs/intro/cdn.

Et à l’intérieur de l’adresse ci-dessus, nous avons les codes suivants :

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />