La plateforme ionic, c’est quoi ?

Avec la plateforme Ionic, nous pouvons développer des applications mobile pour Android et iOS, des applications web progressives et/ou des applications de bureau. Et ces applications ne vont avoir qu’une seule et même code source.

De plus, avec ionic, nous n’utiliserons que les langages du web à savoir HTML, CSS et Javascript.

Une première approche sur ionic peut être vu ici.

Nous allons voir ici :

• Le PWA (Progressive Web App) ;
• La plateforme ionic.

Le Progressive Web App ou PWA

C’est quoi le PWA ? Eh bien, le PWA est comme une application web standard qui ressemble et se comporte comme une application mobile quand on l’exécute sur un appareil mobile.

Avant de rentrer en détail dans les PWA, nous tenons à préciser ici que si on développe une application en ionic, la migration d’une application Android vers PWA ou vers les autres plateformes (comme iOS) ne nécessite presque aucune modification dans le code source. De plus, il faut garder à l’esprit qu’il y a des fonctionnalités natives qui ne sont pas disponible avec le PWA. Ainsi, il faut utiliser des plugins pour accéder à ces foctionnalités natives par exemple au caméra.

Les avantages du PWA

La première avantage du PWA est sa rapidité, et la meilleur partie est sa fonctionnalité offline.

La seconde avantage est qu’il n’est pas publié sur aucune plateforme de distribution comme Google Play Store ou AppStore. Il est disponible en ligne comme un site web.

La troisième avantage est qu’il ressemble et se comporte comme une application mobile.

Nous verrons par la suite comment ionic utilise le PWA dans sa plateforme pour fournir une application mobile.

La plateforme ionic plus en détails

Ayant vu ces petites définitions, voyons maintenant plus en détail de quoi retourne la plateforme. Comment est-il structuré ?

Tout d’abord, ionic est un ensemble de composant web. En plus de cela, le thème ionic fournit plusieurs widgets qui sont facile à intégrer dans son application. Et derrière ces composants web, nous avons les technologies web (HTML, CSS et Javascript).

Dans notre application, en plus de ce qui est déjà existant, nous pouvons ajouter nos propre éléments HTML. Ces éléments vont fournir des fonctionnalités spécifiques et supplémentaires à l’application. Et à partir des éléments que nous avons mentionné précédemment, nous aurons l’interface utilisateur qui est affiché sur l’appareil mobile. Et cela quelque soit le type d’appareil mobile qui va exécuter l’application.

En effet, c’est ionic qui va adapter automatiquement les codes qui vont être générés pour chaque appareil mobile que l’on ait choisi. Le développeur ne fera que le développement des fonctionnalités et rien d’autre. Et c’est le framework ionic qui va gérer la majorité des complexités dans le fait de faire fonctionner le même code sur plusieurs appareils.

Capacitor

Maintenant, nous allons voir capacitor. C’est quoi capacitor ? Tout d’abord, c’est le framework ionic lui-même qui gère capacitor. Ensuite, le front end de l’application ionic va interagir avec capacitor. Et capacitor va donner au front end les technologies ou les supports pour construire un PWA avec des fonctionnalités additionnels pour pouvoir utiliser les fonctionnalités des appareils mobiles comme :

• l’appareil photo ;
• la géolocalisation ;
• etc…

Et c’est capacitor qui va gérer tout celà.

De ce fait, nous pouvons passer d’une application web standard en application mobile native grâce à l’utilisation du plugins capacitor.

Nous tenons toutefois à mentionner ici qu’il existe un autre plugins que nous pouvons utiliser pour interagir avec les appareils mobile. C’est cordova.

Mais nous allons seulement parler de capacitor car il permet d’avoir une plus grande accessibilité au PWA.

Et enfin, avec capacitor, nous aurons une application mobile native.

Ionic CLI

En un mot, ionic CLI va utilise plusieurs frameworks pour construire une application. Avec ionic CLI, nous allons construire notre application avec les frameworks Javascript comme Angular, React ou VueJS. De ce fait, dérrière ionic CLI, si on décide de choisir comme framework Javascript Angular, Angular CLI sera aussi utilisé.

Alors, ionic CLI va nous aider à :

• créer un projet ionic,
• gérer ce projet ionic,
• utiliser capacitor pour convertir notre projet en application mobile native.

En d’autres termes, ionic CLI va nous permettre de nous aider à construire notre workflow toute entière de notre application mobile.

Et pour les développeurs, nous avec ionic CLI, nous aurons la possibilité d’avoir le « live reload ».

Le service cloud d’ionic

Le service cloud d’ionic que l’on appelle aussi ionic Appflow permet de publier rapidement les modifications faites sur les applications sur les différents stores respectifs.