Présentation de Ionic

Ionic est un framework reposant sur Cordova et qui a pour ambition de fournir au développeur les bases et l’outillage pour débuter rapidement et sereinement la création d’une application mobile multiplateforme.

Avec Cordova, les développeurs disposent d’un socle fiable et d’un écosystème imposant (utilitaires, documentation, exemples) pour développer des applications mobiles s’appuyant sur des technologies web. Néanmoins, lors de la création d’un projet Cordova, il reste à la charge du développeur de mettre en place tout un socle technique avant de commencer à créer le premier écran : framework JavaScript, style des éléments HTML de base, fonctions utilitaires et éléments récurrents (pop-up, message de confirmation, animation de chargement, etc.).

Ionic propose donc de mettre en place automatiquement une architecture de base, composée des éléments suivants :

Un framework JavaScript : AngularJS
Une feuille de style surchargeant les principaux éléments HTML (boutons, cases à cocher, champs de formulaire, etc.) avec pour but de les faire ressembler aux composants des applications natives Android et iOS
Des styles applicables à des conteneurs HTML pour gérer la spécificité de l’affichage sur mobile :...

Comparaison de Ionic et de ses challengers

Il est difficile de comparer Ionic à la concurrence : il existe effectivement de nombreuses initiatives visant à équiper le développeur Cordova d’outils et de composants lui permettant de gagner du temps tout en se rapprochant du visuel et de l’ergonomie des applications natives. Mais Ionic n’est pas qu’une feuille de style CSS adaptée au mobile, un ensemble de fonctions JavaScript ou d’outils permettant de générer une application plus efficacement : c’est un peu tout cela à la fois. C’est d’ailleurs l’un des gros avantages de Ionic : il offre une véritable boîte à outils faite d’un seul tenant au développeur Cordova qui n’a plus le besoin d’assembler diverses technologies entre elles pour arriver à ses fins.

Il est important de noter que les projets présentés dans ce chapitre reposent tous sur Cordova. L’objectif de tous ces frameworks n’est pas de se substituer à cette technologie qui fait la quasi-unanimité dans l’univers du développement d’applications multiplateformes du type webview, mais plutôt de venir se reposer sur celui-ci et d’enrichir la partie logicielle, inexistante lors de la création d’un projet Cordova.

La liste présentée ci-dessous est loin...

Installation de Ionic

1. Prérequis

Avant d’installer et de commencer à utiliser Ionic, il est impératif de procéder à l’installation de Cordova et d’en comprendre le fonctionnement, ainsi décrits au chapitre précédent.

À l’issue de l’installation de Cordova, les éléments suivants sont donc installés sur le poste de développement :

NodeJS
GIT
Cordova
Optionnel : une plateforme mobile (Android, iOS ou Windows)

2. Installation de la ligne de commande

Ionic a fait les mêmes choix technologiques que Cordova, à savoir reposer sur NodeJS pour ses utilitaires. L’installation de Ionic s’effectue donc par l’intermédiaire du gestionnaire de dépendances de NodeJS : NPM.

Dans un terminal, tapez la commande suivante :


npm install -g ionic

Cette commande peut mettre plusieurs minutes à s’exécuter en fonction des ressources du poste de développement et de la qualité de la connexion Internet.

Une fois l’exécution de la commande terminée, tapez la commande suivante pour vérifier la bonne installation de Ionic :


ionic --version

Si la commande renvoie un numéro de version (par exemple 2.1.4), alors Ionic est correctement installé et prêt à être utilisé.

Sur un système Linux ou OSX...

Apports de Ionic à Cordova

Ionic ne se contente pas de proposer un socle technique haut niveau pour développer la partie logicielle d’une application mobile mais vient également enrichir l’écosystème Cordova. En réalité, la majorité des commandes exécutées par Ionic reviennent à appeler la même commande avec Cordova. Par exemple, l’appel de la commande ionic run android va en réalité s’appuyer quasi intégralement sur la commande cordova run android. Il existe par contre des commandes complètement nouvelles ou au comportement redéfini qui vont permettre au développeur d’effectuer rapidement des opérations auparavant réalisées manuellement ou à l’aide d’outils externes, parfois longs à installer ou à maîtriser.

Les commandes citées ci-dessous seront réutilisées tout au long de cet ouvrage. Leur bonne compréhension est donc une des clés pour maîtriser Ionic.

1. Création du projet

La création d’un projet Cordova fait appel à la commande cordova create, là où la création d’un projet Ionic utilise la commande ionic start. Il est à noter qu’il est tout à fait possible de démarrer une commande Ionic dans un projet Cordova et une commande Cordova dans un projet Ionic. Néanmoins, lors de la création d’un projet, Ionic va mettre en place des fichiers supplémentaires qui vont lui permettre de gérer au mieux certains outils ou comportements qui n’existent pas avec Cordova : gestion des icônes, plugins et dépendances web. Il est donc fortement recommandé de créer un projet avec la commande ionic, et de ne plus utiliser que cette commande par la suite.

Consultez les détails de la commande ionic start en entrant la commande suivante :


ionic help start

La commande ionic start est mise en œuvre au chapitre Mise en place de l’application - Création de l’application.

2. Exécution de l’application sur un serveur web

La principale contrainte lors du développement d’un projet avec Cordova est qu’il est nécessaire de devoir redémarrer le serveur web (ou l’application mobile)...