Déployer une application Ionic sur son Windows Phone

Chez SimplX, nous travaillons principalement avec les plateformes iOS & Android qui se partagent presque en intégralité le marché mondial à elles toutes seules. Au dernier trimestre 2016, la part de marché d’Android était de 81.7%, iOS 17.9%, laissant seulement 0.4% de part de marché pour les OS restants : Windows Phone, Blackberry (il est toujours en vie) et les autres.

Nous pensons à TOUS nos clients, c’est pourquoi nous nous sommes récemment intéressés à un build Windows Phone 8.1. Je vais tenter de résumer dans cet article, le retour d’expérience de ma douce transition vers le build pour cette plateforme, les problèmes que vous pourrez rencontrer et les solutions qui vont de pair.

Les pré-requis tout d’abord :

• PC équipé avec Windows (ici Windows 10)
• Installer Ionic (et Cordova), cf le guide suivant en anglais, nous utiliserons la V1 : ici
• Générer un projet Ionic (> ionic start myApp tabs) ou développer son propre projet from scratch

1ère Etape – Télécharger Microsoft VISUAL STUDIO

Premier problème qui se pose : la version de Visual Studio! L’erreur à ne pas faire est d’aller sur le site de Visual Studio https://www.visualstudio.com/fr/ et de cliquer sur Télécharger (Peu importe la distribution, la Community de base marchera très bien). En effet, cela vous emmène directement vers le téléchargement de la toute dernière version, i.e. 2017, qui est apparemment incompatible avec les projets générés par Ionic. Sachant qu’un Visual Studio est assez lourd à télécharger, mieux vaut ne pas perdre de temps et concentrez vous donc sur le téléchargement de Visual Studio 2015 (nous avons utilisé Community pour nos essais).

 

2ème Etape – Les packages à Installer

Les indispensables :

• Outils Windows 8.1 et Windows Phone 8.0/8.1 -> Le Windows Phone SDK, indispensable pour le build de l’application Windows Phone.
• Sous Développement multiplateforme, HTML/Javascript -> Ici c’est Visual Studio Tools pour Apache Cordova qui va s’installer, Ionic se reposant sur Cordova, ces outils sont indispensables pour vous permettre d’ouvrir, compiler et shipper un projet Ionic sous Visual Studio.

Ne pas prendre peur, une bonne 20aine de Go d’espace disque sont requis pour l’installation… :X

3ème Etape – Enregistrer son téléphone Windows Phone

Pouvoir tester sur un émulateur Windows Phone c’est bien (le process d’installation est complexe et la quantité d’espace disque requis est élevée, vous allez en effet avoir besoin d’installer et configurer Hyper-V), mais pouvoir tester sur un téléphone directement c’est mieux (et Miracle, cela ne nécessite aucune installation). L’inconvénient c’est que pour effectuer des tests sur les différentes versions de Windows Phone, il faudra un téléphone avec chacune de ces versions, l’émulateur prend alors tout son sens. Si vous êtes dans ce cas, alors je vous redirige vers le lien officiel suivant : ici, en bas de page vous avez le lien vers l’installation/configuration d’Hyper V.

Dans notre cas nous avions besoin d’une version pour Windows Phone 8.1 uniquement, et nous avions sous la main un téléphone Windows 8.1, nous pouvions donc oublier l’émulation. Cependant, il fallait que ce téléphone soit enregistré en tant que Developer Phone. Merci Windows pour cela, c’est un processus très simple, en grande partie grâce à l’outil fourni avec le SDK : Windows Phone Developer Registration. Recherchez et éxecutez PhoneReg.exe, vous pouvez aussi trouver cet outil dans son emplacement par défaut « C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Tools\Phone Registration\PhoneReg.exe« .

Connectez votre téléphone sur votre ordinateur via le cable usb, déverrouillez votre téléphone puis suivez le guide…

Votre environnement est maintenant prêt pour la construction de l’application et son installation dans le téléphone.

4ème Etape – Build du projet Ionic version ligne de commande (avec le CLI)

1. Ajout de la plateforme : Dans la documentation Ionic, on trouve la commande pour ajouter une plateforme de build à son projet d’application mobile. Cela regorge d’exemples à base de « ionic platform add android » ou encore « ionic platform add ios » … Mais RAS pour windows phone ?!! WTF me direz-vous ? Pour trouver, il faut en fait aller se pencher sur la documentation officielle de Cordova, et on y trouve la commande correspondante. ATTENTION : Intuitivement, et vous aurez certainement trouvé des exemples allant dans ce sens sur le net, vous aurez tendance à saisir la commande « ionic platform add windows » et cela va « marcher ». En effet, la plateforme windows est une plateforme valide, car c’est la plateforme utilisée pour builder sur Windows OS ( 8 ou 10), l’OS de vos ordinateurs. Et ne vous permettra en aucun cas de builder pour votre téléphone, une application Windows OS n’étant pas compatible avec Windows Phone (en tout cas pas pour l’instant). En cherchant donc sur la doc de Cordova, on trouve la plateforme wp8, et c’est bien celle-ci qui nous intéresse, exécutez donc la commande suivante : « ionic platform add wp8 »
2. Build (construction de l’application) : Une fois la « bonne » plateforme ajoutée au projet, la suite est plutôt intuitive. Exécutez  « ionic build wp8 ».
3. Run (déploiement et exécution sur téléphone) : Assurez vous que votre téléphone est toujours connecté via USB puis exécutez « ionic run wp8 » …. Et le miracle a (normalement) lieu, l’application est installée sur votre téléphone.

NOTE : Vous ne pouvez malheureusement installer que deux applications maximum en mode développeur. Il faut désinstaller les existantes pour pouvoir en installer de nouvelles. De toute façon, une fois testé sur votre téléphone, l’idée et de la valider et de la pousser sur le store de Microsoft et ainsi faire fi de cette limitation qui ne concerne que les applications installées directement sur le téléphone.

4ème Etape (bis) – Build du projet Ionic version IDE sous Visual Studio

Commençons tout de suite par l’erreur à ne pas commettre : Ouvrir le projet généré par Ionic.
En effet, en exécutant la commande ionic add plateform wp8, au sein de votre projet Ionic une nouvelle arborescence a été créée, mondossierprojet > plateforms > wp8.

Répertoire au sein duquel des fichiers projets visual studio ont été créés monprojet.sln ou encore monprojet.csproj. Le réflexe serait donc d’ouvrir le projet via ces fichiers et de travailler sur cette base. ERREUR.

La best practice, et surtout la seule pratique qui semble fonctionner, c’est de passer par la création d’un nouveau projet comme suit :

1. Sous Visual Studio, dans la barre de menu, cliquez sur Fichier puis Nouveau -> Projet à partir de code existant
2. Dans l’assistant, sous « Quel type de projet de projet voulez vous créer ? », choisissez Apache Cordova dans la liste déroulante. 
3. Cliquez sur Suivant
4. Choisir comme emplacement du fichier projet, le dossier racine du projet ionic : c:/monprojet,  comme emplacement et non pas le sous dossier c:/monprojet/platforms/wp8
5. Saisir un nom de projet
6. Cliquez sur Terminer

Le projet s’ouvre alors.

Builder et déployer sur le téléphone devient tout de suite plus simple (et fonctionnel) à partir d’un projet Cordova Visual Studio. Vous pouvez remarquer les deux listes déroulantes en haut de l’écran, l’une avec le choix de la configuration (Debug/Release) et l’autre avec le choix de la plateforme (Android, iOS, WP8, etc…). Sélectionnez donc Debug et Windows Phone 8 comme présenté sur l’écran ci-dessus. A droite du choix de la plateforme, une autre liste déroulante est présente pour le choix de l’environnement de l’exécution, nous choisissons ici Appareil (ou Device si vous êtes en VO), vous pouvez aussi choisir un des émulateurs présents mais il convient d’installer ces émulateurs et de configurer Hyper V comme précisé plus haut dans cet article.

Cliquez ensuite sur le bouton RUN (flèche verte), le build commence, l’application s’installe puis se lance sur votre téléphone (sous réserve bien sûr qu’il soit connecté en USB à votre ordinateur et enregistré comme Développeur phone).

Voilà, vous avez maintenant toutes les cartes en main pour travailler sur des projets Ionic avec Visual Studio et déployer non plus seulement sur Android et iOS mais aussi sur Windows Phone.

Dans un prochain article nous verrons comment builder pour Windows OS, et comment soumettre notre application sur le store Windows.