docDévelopper des applications mobiles universelles avec le
download 
Plainte Transcription
Développer des applications mobiles universelles avec le
Développer des applications mobiles universelles avec le framework Cordova et Visual Studio 2013 Hugues MEUNIER Il est possible de développer des applications mobiles universelles pour à peu près tous les périphériques du marché grâce à Visual Studio 2013 Update 3 ou Visual Studio 2015 RC. Les différentes versions gratuites de VS 2013 ou VS2015 suffisent pour cela. A l’heure actuelle, vous pouvez, à partir du même code source, générer : Un package xap compatible Windows Phone 8.0 Un package appx compatible Windows Phone 8.1 Un package appx compatible Windows 8.0 ou 8.1 Un package apk compatible Android (à partir des versions 2 d’Android) Un package ipa compatible ios (ceci nécessite d’avoir un MacOS sur le réseau ou un compte sur une offre Coud de MacOS pour la réalisation du build de l’ipa) Je vais vous présenter dans cet article la procédure pour développer des Apps avec Visual Studio Update 3 pour Windows Phone, Android et Windows 8 et éventuellement IOS si vous avez un MacOS sous la main. Cordova mais c’est quoi au juste ? Apache Cordova est un framework qui s’intègre dans les principaux AGL de développement (Eclipse et Visual Studio) et qui permet de développer des applications mobiles hybrides à destination d’à peu près tous les périphériques du marché (smartphones et tablettes). Il existe une implémentation commerciale de Cordova par Adobe : PhoneGap. Depuis l’Update 3 de Visual Studio 2013, Cordova a été intégré dans Visual Studio 2013 pour permettre de développer des applications pour les OS mobiles autres que Windows Phone. Si je souhaite utiliser Eclipse … Suivez ce tutoriel. Pour la mise en place dans Visual Studio 2013 Il faut installer Visual Tools for Apache Cordova et c’est ici : http://www.microsoft.com/enus/download/details.aspx?id=42675 Pour la mise en place danss Visual Studio 2015 C’est une option dans l’installation de Visual Studio 2015 : Et maintenant ? Il faut juste cliquer sur « Fichier » puis « Nouveau projet » et choisir Apache Cordova Apps : Si vous exécutez cette application (touche F5), alors elle s’exécute par défaut dans Ripple (Android) qui est un émulateur intégré dans Chrome ; ce qui donne : Si vous voulez exécuter une Apps Windows 8(8.1) avec cordova… Par défaut ça ne fonctionne pas ! Rassurez-vous il y a une solution car le certificat de signature du code fourni par défaut par Microsoft a expiré il y a quelques mois (ça ne s’invente pas). Du coup pour faire fonctionner l’Apps, il faut aller chercher ce certificat ici, le copier dans res/native/windows/CordovaApp_TemporaryKey.pfx Si votre application comporte des appels à des services externes ou contient des champs de saisie, elle ne va pas fonctionner sous Windows 8(8.1) pour raisons de sécurité… Rassurez-vous encore il y a un contournement : il faut télécharger ce fichier javascript winstore-jscompat.js et le copier dans le répertoire scripts de votre Apps et l’appeler dans la rubrique <head> de votre page html. Il est important que l’appel <script src="scripts/winstore-jscompat.js"></script> soit le dernier des appels sinon cela ne fonctionnera pas. Si vous voulez utiliser JQuery Mobile avec Cordova… Ce n’est plus très à la mode par rapport à AngularJS mais très efficace car cela vous donne accès à des objets très utiles et très facilement. Donc en fonction de l’Apps que vous voulez développer, Jquery mobile s’avèrera préférable (c’est mon point de vue). Si vous voulez utiliser JQuery Mobile sur une Apps Windows 8, pas de problème mais vous ne pourrez pas utiliser la version CDN, il faudra télécharger les fichiers et les inclure dans votre solution. Les appels css et js à prévoir sont : <head> <meta charset="utf-8" /> <title>JoursFeries</title> <!-- JoursFeries references --> <link href="css/index.css" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script src="scripts/jquery-2.0.2.min.js"></script> <script src="scripts/jquery.mobile-1.4.5.min.js"></script> <script src="scripts/winstore-jscompat.js"></script> </head> J’ai ajouté le meta viewport pour m’assurer que l’interface s’affichera correctement sur n’importe quel périphérique (smartphone, tablette ou laptop). Les appels Cordova sont, eux, laissés dans le body de la page : <body> <!-- Cordova reference, this is added to your app when it's built. --> <script src="cordova.js"></script> <script src="scripts/platformOverrides.js"></script> <script src="scripts/index.js"></script> … Ensuite, il ne vous reste plus qu’à écrire votre code JQuery : <div data-role="page" id="page1"> <div data-role="navbar"> <ul> <li><a href="#page1" persist"></a></li> <li><a href="#page2" <li><a href="#page3" <li><a href="#page4" <li><a href="#page5" id="titrePage11" class="ui-btn-active ui-stateid="titrePage21"></a></li> id="titrePage31"></a></li> id="titrePage41"></a></li> id="titrePage51">Autre</a></li> </ul> </div> <div data-role="main" class="ui-content" id="home"> <p> <b>Fêtes de l'année:</b> Et voilà ! Les icônes, les écrans de démarrage : Il faut fournir toutes les images et icônes pour tous les OS et toutes les résolutions gérées… Ce qui représente un gros travail. C’est ici : res/icons et res/screen Si vous voulez des détails sur les différents formats, c’est ici ! http://docs.phonegap.com/en/4.0.0/config_ref_images.md.html Générer ses packages : Pour générer ses packages, il faut choisir chaque OS cible et choisir le menu « Générer » puis « Déployer la solution ». Les packages Android (apk) et Windows Phone 8 (xap) sont dans le dossier du projet/bin/release. Pour Android, il faut compiler obligatoirement en release. Les étapes pour pouvoir générer les packages Android : créer un keystore avec la commande signtool (keytool -genkey -v -keystore my-releasekey.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000). Ouvrir le fichier res\native\android\ant.properties , et saisir les informations sur le keystore et l’alias du certificate. Générer le projet Pour un package Windows Phone 8 (xap), il faut le signer avec son certificate Symantec. Générer un package pour IOS sans avoir de MACOS !!! Deux solutions : - Soit s’inscrire sur le site build phonegap qui permet de générer son package à partir d’un projet Phonegap (Cordova c’est pareil) : https://build.phonegap.com/ Souscrire une offre Mac In The Cloud : http://www.macincloud.com/ A quoi s’attendre dans le futur ? Les dernières annonces de Microsoft sont alléchantes sur le sujet et mixent les universal Apps, les dockers et les nano servers pour parvenir au saint Graal qui est : un code unique pour tous les périphériques (du PC jusqu’à l’objet connecté en passant par les smartphones) mais vous pourrez vous rendre compte que le niveau d’abstraction Avec Cordova est impressionnant et parfaitement utilisable.
