22 octobre 2015

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…

Introduction Apache cordova sous Visual Studio 2015

Depuis la version Visual Studio 2013 update 4 et plus officiellement depuis VS2015, l’IDE propose de créer de nouveaux projets avec Apache Cordova. Apache Cordova est depuis quelques années un acteur incontournable dans le monde de l’édition d’application mobile multiplateforme. Son intérêt réside dans le fait de n’utiliser que des technologies web (HTML5, Javascript et CSS) pour concevoir une application iOS, Android, Windows Phone, Windows… bref multiplateforme. Apache Cordova permet via son API un accès au device nativement, c’est à dire qu’il peut vous donner accès au GPS, à la caméra, au Gyro… ce que vous auriez du mal a faire via une app web mobile à travers un navigateur web classique. Au final on se retrouve avec une application sur les store (Google Play, app Store, Windows Phone store…) tout en ne connaissant ni ObjectiveC/Swift, C# ou Java, les langages dit « Natif ». Ce genre d’application est dit « Application Hybride ». C’est comme un pont entre application purement web et application purement Native. Enfin cela parait facile mais en faite ça ne l’est pas du tout. J’ai récemment assisté au mobile Monday, à Rennes. Nous avions 3 débatteurs autour des technos mobiles. Tous travaillant comme dev Senior/lead/archi, bref relativement calé pour parler du sujet. Les technos abordées était Cordova/Phonegap, Xamarin (nous y reviendrons plus tard) et le développement natif. Pour résumer la conférence : Le développement natif est long et couteux (ressources dev dans plusieurs technos), il est problématique pour livrer « en même temps » et plus lourd en maintenance. Mais il marche ! Et vite avec une UX adaptée. Le développement hybride est plus rapide, nécessite moins de ressources, livré « en même temps ou presque » mais le résultat peut être lent et pas top en UX (même interface, pas forcément adapté à l’OS est aux habitudes utilisateurs) Le développement Xamarin propose de partager 50% à 90% du code (C sharp). Le reste est essentiellement de l’UI, donc on doit adapter l’interface utilisateur suivant l’OS. Il existe aussi une option chez Xamarin, les Xamarin Forms qui sont un moyen d’aller encore plus vite pour générer des interfaces utilisateurs. Je testerai prochainement Xamarin et je vous en dirai plus. Pour démarrer, Visual Studio propose un projet Apache Cordova (en Javascript ou en TypeScript) Voici ce que VS2015 vous créer par défaut : Ce qui est nouveau pour un développeur Microsoft la section « Dépendances » : c’est l’équivalent du NuGet pour les fichiers web (JS/CSS) configuré avec bower.json et package.json (commande npm Node.js) Le dossier « merges » va concerner des spécificités par plateforme. Le dossier res (ressources) va essentiellement correspondre aux images de l’appli (icone, splashcree, image…) Le dossier www est le dossier de travail. Le fichier config.xml est un fichier important. Nous y reviendrons. On ne touche à rien, on compile… Normalement aucun problème jusque la. La suite se corse. Essayons maintenant de lancer un émulateur… Normalement l’émulateur Windows Phone 8.1 devrait fonctionner. Pour Android c’est plus compliqué mais ça peut aussi marcher suivant ce que vous avez installer avant. Quant à iOS… on va voir cela. Sinon vous avez Ripple, un emulateur qui tourne sur Chrome. Pour Android, vous avez accès à quelques raccourcis (menu haut, clic droit, cliquez sur « android ») dont le Android SDK Manager. Si vous travaillez déjà avec eclipse/Android studio, vous connaissez déjà cela. Mais assurez vous que le chemin SDK est le même pour vous évitez de télécharger deux fois la même chose. (outils – options – outils pour apache cordova – remplacement de variable d’environnement) Si vous voulez utiliser un émulateur, il va falloir choisir lequel et sous quel architecture (ARM, Intel, 35/64 bits), télécharger l’image correspondante et monter un émulateur avec l’Android Emulateur Manager AVD. Mais bon par chance VS2015 en install par défaut comme celui ci : J’utilise personnellement le VS Emulator 5″ KitKat. J’ai aussi un téléphone Android personnel que je branche en USB. Pour cela je sélectionne Appareil (ou device) dans cette liste. Il faut aussi installer les divers USB Google, dans Android SDK Manager tout en bas dans la section Extras, installer Google USB Driver. Ça y est on peut enfin afficher le résultat de notre application sur un émulateur ou un device Android ! Pour iOS, c’est plus compliqué si vous êtes sur Windows. Apple impose la compilation depuis un mac avec Xcode. Pour cela il existe un agent build iOS à installer sur votre Mac. Deux possibilités :  utiliser un mac à vous sur votre réseaux.  utiliser macinthecloud, une plateforme web qui vous donne accès à un mac virtuel sur le net moyennant qq $$. J’ai rapidement testé cette solution. Elle marche. Mais j’ai décidé d’acheter un mac. Notamment pour garder un accès permanent à mes certificats/clé privée…  Cette solution ne permet pas non plus de brancher un iPhone/Ipad en USB et tester sur device, car il faudrait le faire sur le Mac distant. On pourrait je pense le faire en compilant sur le mac et en rapatriant un ipa qu’on installerai depuis Itunes sur windows… bref la galère. Conclusion : Voila, on a vu ici comment réaliser chez vous une application hybride Apache Cordova avec Visual Studio 2015. Si on installe tout ce qu’on nous demande dès le départ, on peut compiler, émuler et déployer sur un device, sans taper une ligne de code. Je trouve que les avantages de Cordova sont très intéressants. Mais honnêtement ce n’est pas aussi simple. Même si VS2015 propose des outils pour debuger plus facilement, j’ai eu un peu de mal à m’y retrouver. De plus VS2015 propose des « adaptations » pour utiliser des outils tiers bien connus dans le monde autre que Microsoft, comme gulp, grunt, node.js, bower. On a un mélange de techno Microsoft et « reste du monde ». Ça va dans le bon sens, mais on ne sait pas trop où on va quand on débute avec. En fait Microsoft nous « mâche »‘ le travail, sauf que lorsqu’une erreur arrive, on est perdu. Si vous tentez par exemple de récupérer du code d’un dev non « Microsoft », vous allez vous retrouver avec des répertoires comme…