Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Créer une application multiplateforme avec Ionic

Par Lucas MARTINI Publié le 01/05/2018 à 18:33:42 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Prérequis :

Pour suivre cet article de création d’application Ionic, vous devez impérativement avoir installé la dernière version de Ionic sur votre ordinateur. Vous pouvez également installer « cmder» afin de faciliter la saisie de lignes de commandes.

Si vous n’avez pas encore installé Ionic pas de panique, voici dessous un récapitulatif de l’installation :

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

1- Installez "cmder" à l’adresse suivante pour une prise en mains plus facile des lignes de commandes.

http://cmder.net/

2-NodeJS : Ce dernier est absolument indispensable pour pouvoir installer des packages à Ionic. Il va également vous permettre d’avoir NPM (Node Package Manager) ce dernier permettra a ionic d’installer des modules ainsi que des dépendances. Téléchargez-le en suivant le lien ci-dessous :

https://nodejs.org/en/

3-Une fois que tout est installé 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 grâce a la commande suivante :

npm install ionic cordova

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

Une fois la commande effectuée et l’installation terminées, vous pouvez essayer de taper la commande :

ionic

Si vous obtenez un résultat similaire à la capture d’écran ci-dessous c’est que l’installation de Ionic s’est déroulée avec succès.

Création de notre première application :

Maintenant que nous avons réussi l’installation de Ionic, nous pouvons désormais voir comment créer une application Ionic. Créer un dossier dans lequel vous allez pouvoir créer votre application. Une fois ce dossier créer, entrez dedans grâce à la commande :

cd <chemin du dossier>

Exemple :

Ensuite tapez la commande suivante pour créer votre application :

ionic start <nom de votre application>

Voici un exemple :

Ionic vous demande alors si vous désirez créer une application :

- tabs = application avec un simple bandeau

Exemple :

- blank = application vierge

- sidemenu = application avec un menu type slider

Exemple :

- Super = application contenant des pages préconstruites, et contenant des informations pour vous aider à construire facilement votre application

Exemple :

- conference = application style carnet de rendez-vous, calendrier …

Exemple :

- tutorial = application fournit avec toutes les documentations ionic pour permettre une meilleur compréhension pour la construction d’application.

- aws = application directement orienter vers un hub mobile aws.

Exemple :

Vous avez désormais tous les éléments nécessaires pour choisir l’application que vous désirez créer. Nous allons pour l’exemple choisir une application de type « sidemenu ». C’est une application au design plutôt moderne utilisant déjà quelques fonctionnalités connu et qui nous permettra de connaitre un peu plus en détail le contenu de nos applications et de nos pages.

Une fois que nous avons sélectionné « sidemenu », ionic nous propose si nous voulons intégrer cordova a notre projet d’application pour pouvoir faire de cette application une application native Ios et Android. Nous sélectionnons donc « Yes » .

L’initialisation de l’application se fais, et lors de l’installation on nous indique l’initialisation d’un git qui s’avère très utile afin de maintenir une sauvegarde viable de notre application.

Une fois l’initialisation de l’application terminée, vous pouvez vous rendre dans votre dossier et normalement un sou dossier a été créé portant le nom de votre application :

Vous pouvez alors double-cliquer dessus et vous obtiendrez ceci :

La phase de création est désormais terminée, nous allons maintenant voir comment l’application fonctionne, les différentes manipulations, ainsi que les commandes de bases essentielles au bon fonctionnement de l’application.

Faire fonctionner l’application pour la première fois :

Nous allons maintenant voir comment faire fonctionner notre application et comment obtenir un rendu de notre application en toute simplicité. Il suffit de vous rendre sur votre « cmder », vous devez ensuite vous rendre en ligne de commande dans le dossier fraichement créé de votre application :

Une fois que vous vous trouvez dans le dossier de votre application, vous n’avez plus qu’a taper la commande suivante afin d’obtenir un rendu de votre application :

ionic serve –lab

Exemple :

Une fenêtre de votre navigateur va s’ouvrir. Dans cette fenêtre vous y trouverez un émulateur. Cet émulateur vous permettra de tester en direct votre application :

Vous pouvez ensuite obtenir 3 émulateurs (IOS / Android / Windows) en cliquant sur « PLatforms » en haut à droite du navigateur comme ci-dessous :

Se familiariser avec la structure de Ionic :

Nous allons aborder ensemble la structure de notre dossier application. Nous allons voir ensemble les principaux dossiers ainsi que leur manipulation. Mon précédent article « Présentation et Utilisation de IONIC Framwork » présente déjà la structure des dossiers Ionic c’est pourquoi je ne reviendrai pas dessus dans cet article mais vous invite à le lire si ce n’est déjà fait, voici le lien vers ce dernier ci-dessous :

https://www.supinfo.com/articles/single/6828-presentation-utilisation-ionic-framwork

Maintenant que ce point a été clarifié, nous allons pouvoir continuer. Donc nous allons découvrir ensemble la structure de notre application Ionic. Comme je l’ai dit dans mon précédent article le dossier le plus important et le dossier « www », c’est ce dernier qui va contenir nos principaux éléments : dossier asset, css, js …

Mais dans cet article nous allons construire notre application. Car pour l’instant nous avons juste réussi à créer une nouvelle application avec la ligne de commande « start », nous avons réussi à tester notre application avec les différents émulateurs (Ios, Android, Windows) grâce à la ligne de commande « ionic serve ». Mais maintenant nous allons voir comment construire notre application afin que nous puissions la déployer et la tester en situation réelle sur de vrais périphériques.

Pour cela nous allons retourné sur le « cmder », nous allons nous placer dans le dossier de notre application et nous allons taper la commande suivante :

cordova platform add android

Exemple ci-dessous :

A quoi sert cette commande ?

Comme nous l’avons dit plus haut nous allons construire notre application, mais pour cela il nous faut créer une plateforme capable d’accueillir notre application. Cette commande va donc tout simplement nous servir à créer une plateforme (en l’occurrence Android dans notre exemple) qui va nous permettre grâce à notre package cordova de construire notre application. Sans cette plateforme nous ne pourrons malheureusement pas construire notre application.

Vous pouvez faire de même avec les autres plateformes en remplaçant « android » dans la commande par « ios » ou « windows ».

Attention :

Si toutefois lorsque vous tapez la commande précédente vous avez un message d’erreur concernant cordova, cala veut dire que ce dernier ne s’est pas correctement installé ou qu’il a besoin d’une mise à jour. Dans ce cas il vous suffit de taper la commande ci-dessous afin de l’installer si ce n’est déjà fait ou de le mettre à jour si ce dernier en a besoin :

npm install –g cordova

Exemple :

Une fois que cette commande a été tapée, vous pouvez aller dans votre dossier portant le nom de votre application et vous allez vous apercevoir qu’un nouveau dossier s’est créé. Ce dossier porte normalement le nom « platforms » :

Lorsque vous avez repérer ce dossier cliquez dessus, vous y verrai un sous dossier portant le nom « Android » qui correspond parfaitement à la plateforme que nous venons de créer.

Cliquez sur le dossier « Android », vous obtenez alors la structure de notre plateforme Android. C’est là que viendra se loger notre application une fois construite.

Nous allons maintenant construire notre application. Cela va nous permettre d’obtenir un paquet qui est une collection de fichiers que nous pourrons déployer sur nos périphériques.

Les paquets sont :

.apk = Android Package Kit, paquet qui représente une collection de fichiers créés pour les systèmes d’exploitation android.

.sln = Solution regroupant une collection de fichiers créés pour les systèmes d’exploitation Windows

xcodeproject = Projet xcode regroupant une collection de fichiers créés pour les systèmes d’exploitation Apple

Pour générer ces package il suffit simplement de taper la commande :

cordova build android

Cette commande est bien sûr applicable aux autres plateformes (Ios et Windows) en modifiant simplement dans la commande le mot « android » par « ios » ou « windows ».

Attention :

Si cette commande vous génère une erreur, cela est du au faite que vous ne possédez peut être pas android studio sur votre ordinateur ou dans le cas contraire que vous ne possédez pas les bons « JDK »

Dans ce cas vous pouvez télécharger :

- Android studio en suivant le lien ci-dessous :

https://developer.android.com/studio/

- Les JDK en suivant le lien ci-dessous :

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Une fois ces éléments installés, la commande s’exécutera et construira votre application. Pour vérifier que votre application s’est construire correctement, un dossier « build » a du apparaitre dans « application1/platforms/android ».

Ouvrez ensuite le sous dossier « build », puis le sous dossier « outputs » et enfin le sous dossier « apk ». Vous allez alors trouver un fichier portant le nom « android-debug.apk ». Ce dernier est tout simplement notre application. Vous pouvez alors le copier sur votre périphérique android afin de le tester directement ou vous pouvez l’ouvrir avec Android Studio, ce qui vous permettra de le tester avec différents émulateurs Android.

Concernant les autres plateformes (Ios et Android), le chemin menant au paquet créé ne sera pas le même :

Pour windows :

Pour windows rien de plus facile, après avoir lancé la commande de construction de l’application, cette dernière va vous générer plusieurs fichiers en « .sln ». Il y aura donc plusieurs solutions vous permettant de générées une application « desktop » (pour les ordinateurs), une application windows phone (pour les téléphones windows ) et il y aura une solution qui vous permettra de faire une application UWP (Universal Windows Application) permettant de déployer votre application sur tous les devises windows.

Pour Apple :

Concernant la plateforme apple lorsque que vous allait lancer la commande de construction de l’application, le projet généré lors de la construction se situera dans « application1/platforms/ios ». Le projet que vous devrez obligatoirement ouvrir avec xcode se nommera : <nomdel’application.xcodeproj>.

Concernant la construction d’une application Apple, cette dernière doit obligatoirement se faire sur MAC. La commande « cordova build ios » ne fonctionnera pas sur un ordinateur ayant Windows. Vous pourrait toutefois créer la plateforme mais pas construire l’application sur cette plateforme si vous êtes sur un ordinateur windows il vous faudra impérativement un mac pour effectuer cette dernière commande.

Récapitulatif des commandes indispensables :

Ci-dessous nous allons voir des commandes absolument essentielles pour le bon déroulement de notre application :

- Créer un projet d’application :

ionic start <nom de l’application>

- Ajout d’une nouvelle plateforme :

cordova platform add <android/windows/ios>

- Suppression d’une plateforme :

cordova platforn remove <android/windows/ios>

- Construire une application :

cordova build <android/windows/ios>

- Tester son application sur des émulateurs en serveur local :

ionic serve --lab

Conclusion :

Nous avons pu voir dans cet article, la création et le déploiement d’applications. Vous êtes désormais capable de créer votre propre application à partir de plusieurs modèle, de tester votre application, de la généré et de la déployer sur des périphériques externes. Mon prochain article portera sur la publication de nos applications Ionic sur les différents stores Apple, Windows et Android.

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