Comment intégrer proprement Ionic à un projet Visual Studio

Sachez que j'ai passé pas mal de temps à essayer de faire fonctionner correctement Ionic. Et à l'heure où j'écris ces lignes je n'ai pas encore fini. Mais j'ai déjà pas mal avancé. Ionic recommande d'utiliser Visual Studio 2015 sous Windows. Je recommanderai d'abord de ne pas l'utiliser et de taper les lignes de commandes indiquées dans le guide getting started.

Alors comme un bon vieux développeur Microsoft, j'ai commencé direct avec Visual Studio 2015 et foncé tête baissé. La version 2015 propose d'installer directement les outils de développement mobile. Cocher tout.

Ne faites pas comme moi et prenez le temps de lire cette page du site Microsoft, on y retrouve pas mal d'info sur ce que fait l'installateur. Et notamment de quoi vous avez ABSOLUMENT besoin avant de commencer quoi que ce soit.

1) Java JDK. Microsoft vous propose de télécharger la version 7. J'avais pas fait attention au début, mais elle n'est plus du tout recommandé. Par la suite, installer vous même la version 8 et changer les paths dans visual studio.

2) Android SDK. Si vous avez comme moi déjà utilisé le SDK sous Android Studio, vous n'en avez pas besoin d'un autre car il va vous l'installer dans un autre répertoire. Vous allez avoir tout en double et devoir tout re-télécharger. Idem, modifier les paths dans VS2015 si besoin.

3) Apache Ant. J'ai pas l'habitude de Ant que j'eusse l'utilisé il y a fort longtemps...

4) Node.js. Au début, j'avais fait l'impasse dessus en me disant que c'était géré par VS2015...plus ou moins... on y reviendra.

Donc mon conseil, installer tout ce que vous demande VS2015. Puis si vous le souhaitez installer des versions/path Java/SDK plus propre par la suite.

Ionic de base avec VS2015

En mai 2015, Ionic annonce son partenariat avec Visual Studio 2015 par l'introduction des Ionics Templates. Article Blog ici.

Super, donc en téléchargeant Ionic Tabs Template (depuis ce lien ou depuis NuGet) on a un beau projet tout propre qui vient s'ajouter en plus d'Apache Cordova :

Allons y gaiement, créons notre premier projet Ionic Tab. C'est super, ça, marche et on a quelques lignes de code fortement intéressante, sur la construction de l'app, avec les controler, angular tout ça... (je précise que j'ai peu de connaissance avec Angular. On peut se débrouiller mais c'est recommandé de se pencher sur Angular un minimum).

Voila, alors pour le résultat, on a ceci :

Une petite appli qui ne fait que de l'affichage. Elle permet déjà de se familiariser avec Angular. Voici ce que contient le projet généré automatiquement par Ionic Tab Apps.

Je vous conseille d'examiner ce code pour ceux qui débutent avec Angular. Il est intéressant et instructif.

Il y a deux références dans index.html :

<script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.min.js"></script>

et

<link href="http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css" rel="stylesheet">

Je ne vois de référence bower ou d'installation npm.... La on a un souci.

Ce bundle est une concaténation de plusieurs fichiers , si on l'ouvre voila ce qui est écrit :

/*!
* ionic.bundle.js is a concatenation of:
* ionic.js, angular.js, angular-animate.js,
* angular-sanitize.js, angular-ui-router.js,
* and ionic-angular.js
*/

Le problème ici, c'est que nous ne gérons pas les dépendances de Ionic. Si celui ci évolue, il faudra recharger les scripts à la main. J'ai donc ajouté une référence Ionic dans le bower.json :

{
"name": "BlankCordovaApp4",
"dependencies": {
"ionic": "driftyco/ionic-bower#master"
}
}

Dans ce cas il faut recharger les dépendances, comme indiqué sur l'image ci dessus. Par défault, Bower va tout mettre dans un dossier bower_component à la racine (afficher les les fichiers, même ceux qui ne sont pas dans le projets). Le problème c'est qu'on n'y a pas accès à ce répertoire depuis www. Donc au lieu de tout copier à la main, on va le faire automatiquement en rajoutant à la racine un fichier .bowerrc qui contiendra ceci :

{
"directory": "www/lib"
}

Cliquer ensuite sur "Restaurer Packages" sur "Dépendances" et vous aurez un dossier lib dans www, tout beau tout chaud.

Et voila, on peut donc faire directement référence à nos lib Ionics depuis index.html :

<script src="lib/ionic/js/ionic.bundle.min.js"></script>
et

<link href="lib/ionic/css/ionic.min.css" rel="stylesheet" />

C'est quand même plus propre !

Installation de Ionic officielle

Ionic propose d'utiliser Visual Studio mais rien ne vous impose de le faire. Et je vous recommande de taper ces lignes au moins une fois. http://ionicframework.com/getting-started/

Il faut commencer par installer node.js (c'est par ici)

Ensuite, ouvrez une invite de commande en mode admin (sous win 10 : clic droit sur le logo windows, invite de commande (admin) ) et taper la commande suivante :

npm install -g cordova ionic

C'est probablement ce que l'installation de Visual Studio à fait pour vous installer les outils Apache Cordova. Sauf qu'ici on rajoute Ionic. L'installation prends un certain temps...

Voici 3 commandes qui permettent de s'assurer que vous avez bien ce qu'il faut, avec les bons path system :

node -v
cordova -v
ionic -v

(vérifiez aussi vos path en tapant : android, java, git, ant, je vous conseille ce site pour tout problème de path :

http://www.gajotres.net/building-a-native-mobile-app-with-cordova-and-ionic/)

Voila vous devriez avoir tout ce qu'il vous faut à ce stade. Déplacez vous dans votre répertoire de travail (pour moi E:\Temp\TestIonic\)

Et taper cette commande :

ionic start myApp sidemenu

Ionic va créer un répertoire "myApp" et construire votre application en téléchargeant tout ce qu'il faut pour vous.

Ici Ionic me demande si je veux créer un compte pour envoyer des Push de notification. Je réponds non. On verra cela plus tard.

Et voila, mon app est créée :

Le guide de ionic nous propose alors de lancer l'application sur un emulateur.

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

Comme je suis sur windows je vais le faire avec Android plutôt :

> ionic platform add android

puis build avec

>ionic build android

et enfin

>ionic emulate android

Et la j'ai un problème. (testé aussi en mode admin). Mon PC de bureau à plus de 5 ans. J'insiste pas. De toute manière l’émulateur android n'a pas une bonne réputation. Préférez Genymotion.

Si vous avez Genymotion, tapez plutôt ;

ionic run android

Passer sous Visual Studio. Créer un nouveau projet à partir d'un dossier Cordova :
Fichier - Nouveau - Projet à partir de code existant
Sélectionnez un projet Apache Cordova puis suivant
Charger l'emplacement du dossier myApp généré par Ionic (pour moi E:\Temp\TestIonic\myApp)
Donner un nom, par exemple "myApp" puis ok.

Voici ce que vous obtiendrez :

Remarquez que maintenant, on a des dépendances bien plus fournies.

Ça compile, et ça émule avec les émulateurs de VS2015 ce qui n'est pas rien !

Conclusion :

Vous avez plusieurs façon d'intégrer Ionic, à vous de trouver laquelle vous convient le mieux. Personnellement la version Tab de Ionic intégré à VS2015 ne me convient pas. La version Apache Cordova + bower manuel de Ionic sous VS2015 est une approche mais pas sur que ça fonctionne bien par la suite. De plus elle n'est pas vraiment compatible avec les outils Ionic.

Pour moi la meilleur approche est de créer le projet en ligne de commande avec Ionic. Ensuite de l'ouvrir avec VS2015 et d'en faire un projet/solution.

A lire aussi :