Ionic, c’est quoi?
Tout d’abord, pourquoi une application mobile ?
Une application mobile peut offrir à une compagnie plusieurs bénéfices. Un nouveau canal de communication permet de rejoindre sa clientèle d’une façon plus interactive. Un système d’alerte informe ses utilisateurs, assure la promotion de ses produits et services tout en fidélisant ses clients.
Toutefois, une application mobile n’est pas forcément nécessaire pour tout type de compagnie. Votre application mobile doit apporter une valeur ajoutée. Nul besoin d’une version minifiée de votre site web, il est déjà adaptatif, non ?
Application mobile de JFL42
Dans le cadre du festival d’humour de Toronto, JFL42, nous avons développé une application mobile optimisant l’expérience des visiteurs. Disponible sur Android et iOS, l’application mobile, permet de découvrir les artistes et spectacles, de se situer, de planifier et réserver une représentation, en plus de débloquer certains rabais grâce à un système de points. En bref, la ludification fait grandement partie de la valeur ajoutée de l’application mobile.
Plateforme et langage de développement
Pour développer une application mobile, il y a 2 grandes possibilités : natif ou hybride. Chaque option nécessite des connaissances et expertises bien distinctes.
Pour nous affranchir du développement natif beaucoup plus complexe que requièrent Android et iOS, nous avons opté pour l’hybride.
Le choix a ensuite été porté sur la plateforme Ionic. Elle offre non seulement une prise en main plutôt rapide et intuitive, mais elle s’occupe surtout de gérer les spécificités des plateformes mobiles. Ionic a donc facilité grandement le développement en créant un seul code source hybride, qui s’applique autant à iOS qu’Android.
Définition de Ionic.
Ionic est un cadre de développement (framework) HTML5 de source libre qui permet de concevoir des applications mobiles grâce aux technologies web HTML, CSS et JavaScript. Bâti sur le cadre AngularJS de Google, c’est du solide.
Facilité d’utilisation
Le premier atout d’Ionic est la possibilité de concevoir une application mobile sans devoir apprendre un nouveau langage comme Swift ou Objective C pour iOS, par exemple. En utilisant des composantes offertes par Ionic, qui génère ensuite un code hybride, on peut développer pour la plateforme désirée :. apk pour Android et. app pour iOS.
Ionic est d’ailleurs assez facile à prendre en main. La documentation en ligne fournit des exemples de l’ensemble des composantes disponibles tels que les carrousels, boutons d’actions, menus, popover (système de petits menus d’options) et plusieurs autres.
Grâce à l’implémentation native de SaaS, ajouter sa charte graphique à l’aide de variables se fait simplement.
Le système de grilles
Le système de grille d’Ionic s’appuie sur les principes de Twitter Bootstrap. Donc, si vous connaissez bien les 12 colonnes de Bootstrap, vous ne serez pas trop désorienté !
Les classes
Ionic ajoute des classes dans le HTML permettant au front-end de styliser pour la plateforme ciblée. Cette fonctionnalité intéressante nous permet donc de personnaliser certains éléments à iOS ou Android bien que la feuille de styles soit commune aux deux.
Un peu de code…
Sur iPhone, une classe « iOS » est lisible sur l’élément root « ion — app » de la structure HTML. Idem pour Android, la classe visible sera « md ». Cela permet d’obtenir le visuel souhaité pour chaque plateforme grâces aux classes spécifiées dans la feuille de styles.
Voici ci-dessous les classes générées par Ionic :
| Platform | Mode | Details |
| iOS | iOS | Viewing on an iphone, ipad, or ipod will use the iOS styles. |
| Android | md | Viewing on any android device will use the Material Design styles. |
| Windows | WP | Viewing on any windows device inside cordova or electron uses the Windows styles. |
Les composantes offertes
Grâce aux plug-ins Cordova intégrés, Ionic fournit à l’utilisateur la possibilité d’exploiter les fonctionnalités natives d’un mobile tel que la caméra, le répertoire des contacts, tout en offrant beaucoup de personnalisation.
Progressive Web Apps (PWA), l’application mobile du futur ?
On ne peut parler de développement d’application mobile sans réfléchir aux nouveaux projets et à ce que la technologie nous réserve.
Les PWA ou Progressive Web Apps désignent la prochaine tendance en développement mobile. Conçue par Google, la PWA est à mi-chemin entre un site web mobile et une application mobile.
Imaginez donc un site web mobile en mode plein écran accessible à partir d’une URL ou d’un raccourci sur l’accueil de votre téléphone mobile ou tablette. Avec l’apparence d’une application, cette plateforme offrira des notifications, ne demandera pas d’installation et sera même disponible en mode hors connexion ! L’accès à la caméra ou à la géolocalisation sera possible, tout en assurant une rapidité de chargement supérieure grâce au contenu mis en cache lors de la première visite.
Pensez à tout ça, sans les inconvénients des applications mobiles actuelles :
- Pas de téléchargement par l’utilisateur
- Pas de soumission à l’App Store ou au Google Play Store
- Moins lourd qu’une réelle application
- Plus rapide
- Mise à jour de façon transparente pour l’utilisateur
- Synchronisation en arrière-plan
Le seul bémol est que Safari ne supporte pas encore les PWA, mais ça ne saurait tarder. Opter pour une PWA permettra d’optimiser certains coûts de développement tout en offrant une solution qui à terme deviendra de plus en plus répandue.
PWA ou application mobile standard, pensez à la valeur ajoutée pour votre entreprise et faites-nous signe qu’on poursuive la réflexion ensemble.
