Publier une application Ionic (Cordova) pour Windows Store

Lors de la réalisation d’une application mobile, j’ai été confronté au problème de la publication sur le Windows Store. Autant la publication Google Play et App Store est bien décrite un peu partout sur la toile autant il y’a un manque pour la publication Windows Store. Il faut dire qu’avec une part de marché avoisinant les 2%, la publication d’application Windows mobile n’est pas celle qui vient naturellement à l’esprit.

Vous trouverez dans mon article des similitudes avec le très bon article de la société Simplx sur le déploiement d’une application Ionic pour Windows

Mon environnement est :

  • PC sous Windows 10 64 bits
  • Ionic Js version 1 *
  • Mobile Lumia 640 Windows 10

* Une application IonicJs version 1 sera une application de type « WP8 » (windows phone 8) tandis qu’une application IonicJs version 2 sera une application « UAP » (Universal App Platform)

Pré-requis

Vous aurez besoin :

Compte Microsoft

Pour créer un compte Microsoft Developper, c’est par ici que ça se passe : https://developer.microsoft.com

Le coût du compte est fixé à environ 19€ (pas de renouvellement). Pour Comparaison chez Apple c’est environ 99€ par an et chez Google c’est environ 25€ sans abonnement.

Installation de Visual Studio

Il faut le savoir d’avance, mais c’est Visual Studio 2015 qu’il faudra installer. La Community Edition est totalement gratuite et suffisante pour faire le travail. Vous pouvez la télécharger ici.

Lors de l’installation choisissez :

  • Microsoft Web Developer Tools
  • Windows 8.1 and Windows Phone 8.0/8.1 Tools
  • HTML/Javascript(Apache Cordova)

si tôt installé, pensez à virer Hyper-V (qui a été installé pour pouvoir lancer l’application dans un simulateur) dans les ajouts/suppressions de programmes

 

 

Déblocage Téléphone

Pour pouvoir exécuter une application WP8 sur vote mobile (en 8.1 ou 10) il faut le débloquer à l’aide de l’outil « Phone Registration », lancez le programme « C:\ProgramFiles (x86)\Microsoft SDKs\Windows Phone\v8.1\Tools\Phone Registration\PhoneReg.exe ». Une fenêtre de login  apparaîtra, saisissez votre compte Microsoft Developper.

 

Une fois votre mobile « débloqué » pour le développement, il doit apparaître dans l’interface de votre compte développeur Microsoft :

 

Création du projet Ionic

Je vais commencer par le commencement : création d’une application IonicJs que dont le nom sera « Mon application » et son Id sera « fr.mondomaine.app ».

Configurer le config.xml :

  • Spécifiez un ID
  • Spécifiez la version
  • Spécifiez le nom 
  • Spécifiez la description

Petit aparté sur le choix de l’ID, si comme pour un de mes projets votre ID contient un tiret (fr.mon-domaine.app par exemple) sachez que :

  • ça ne posera pas de problème pour IOS
  • ça posera problème pour Google Play, l’ID risque d’être renommée « fr.mon_domaine.app »
  • ça posera problème pour Windows Store qui ne supporte ni tiret ni underscore

 

Compilation & Run

Compilation

La compilation se fait en toute simplicité. Tout d’abord quand on saisi « ionic platform » on voit que la plaftorme « windows » est recommandée tandis que « wp8 » est dépréciée :

Si comme moi vous êtes tenté de faire une application « windows » vous aurez des erreurs lors de la compilation de ce type :

Cela veut concrètement dire que la compilation attend des fichiers TypeScript et non Javascript …. et TypeScript c’est IonicJs version2

Donc il faut créer la plateforme ainsi :

Puis ensuite compiler :

Vous vous retrouverez alors avec un beau fichier « xap » qu’il faudra soumettre sur le Store

Run

Avant de publier l’application, il est important de la tester en condition réelle sur votre mobile déverrouillé. Lancez l’application sur votre Smartphone avec l’usuel commande :

Profitez que l’application soit lancée pour prendre des Screenshots (Bouton Power + Volume haut en même temps)

Publication

La publication d’une application est quasiment identique quelque soit le store : On signe le build grâce à un certificat, on envoi le build sur le store en question, on renseigne les informations de l’application (description, Screenshots …) et on soumet pour vérification.

Certificat

La signature de l’application n’est pas chose aisée. Voici les actions à réaliser.

Créer le certificat en exécutant la commande « makecert.exe » située dans « C:\Program Files (x86)\Windows Kits\8.1\bin\x86\ »

Mettez bien votre ID (config.xml) dans la directive -n « CN=id.de.mon.app ». L’explication des paramètres est présente ici pour info.

A la validation de la commande vous serez invité à saisir le mot de passe de votre certificat (le mot de passe sera : P@ssw0rd)

Cette commande aura pour effet de créer 2 fichiers :

  • monapp.fr.pvk (Clef privée)
  • monapp.fr.cer (Certificat / Clef publique)

 

Créer le fichier de signature PFX (compilation de la clef publique + privée) en exécutant la commande « pvk2pfx.exe » située dans « C:\Program Files (x86)\Windows Kits\8.1\bin\x86\ »

  • On re-spécifie un mot de passe pour le fichier psx (il peut être différent que le précédent, j’ai conservé le même dans mon exemple)

Désormais on se trouve avec un 3ème fichier : monapp.fr.pfx qui sera utilisé pour signer l’application.

La signature est réalisée grace à l’outil « signtool.exe » située lui aussi dans « C:\Program Files (x86)\Windows Kits\8.1\bin\x86\« 

Soumission

Maintenant qu’on a une application signé, il faut la déposer depuis le compte Microsoft Developper.  Et là il va y avoir une belle subtilité (j’ai écrit à Microsoft pour qu’elle soit corrigée)

 

Une fois connecté il faut « Créer une nouvelle Application » … attention il faut que le nom corresponde en tout point à ce qui est écrit dans la balise <name> du fichier config.xml (« Mon Application » dans mon exemple) :

Il faut ensuite naturellement cliquer sur « Create Submission ». Il y’aura différentes catégorie à renseigner que je vous laisse découvrir mais c’est du classique (tarif, pays, évaluation de l’age etc.)

Pour envoyer la Build signée il faut se rendre dans « Package » et là vous aurez une belle erreur AngularJs et impossible de Glisser/Déposer le Build, ni de cliquer sur « Recherchez vos fichiers » :

Je vous donne la subtilité : Il faut modifier votre URL en mettent « en-us » à la place de « fr-fr » : https://developer.microsoft.com/en-us/dashboard/apps/XXXXXXXXXXXXXXX/submissions/00000000000000000/Packages

Et la magie opère :

 

Vous pouvez maintenant uploader votre fichier xap, Microsoft détectera automatiquement qu’il s’agit d’une application pour « Windows 10 Mobile ».

Une fois que tous les curseur sont au vert, vous pouvez déclencher la soumission et …. patientez le retour de validation de la part de Microsoft :

 

 

 

A suivre :

A propos de l'auteur :  Fabien Lierville

Chef de projet en Ingénierie Informatique Industrielle avec une expérience significative de 17 années. Gestion de projet à dominante pharmaceutique avec le respect de méthode qualité (GAMP V5).
Véritable passionné d’informatique depuis l’Amstrad cpc 6128 ;)

Laisser un commentaire

Une réponse à “Publier une application Ionic (Cordova) pour Windows Store