Dveloppement des Applications Sous WINDOWS PHONE 7

Mmoire de travail de fin dtudes en vue de lobtention du Diplme de Supinfo

SGHIR OMAR SUPINFO Bruxelles

Remerciement

Je tiens remercier dans un premier temps Monsieur Julien Saumande et Madame Juliette Versmessen pour avoir accept ma candidature pour ce stage Je remercie galement mon maitre du stage M.Remi Despelchin, ainsi que M.Clment Gheeraert et M.Khamzat SALIKHOV pour leurs prcieuses aides et conseils en cas de besoin. Je remercie aussi le chef de projet M.Alexandre Huynh de mavoir donn lopportunit de dcouvrir Windows Phone 7. Mes remerciements vont galement toute lquipe de Phoceis pour leur accueil, et sympathie. Et enfin je remercie Supinfo pour la qualit de ses tudes et ces magnifiques trois annes passes dans leurs tablissement, ainsi que de mavoir donn lopportunit dacqurir plusieurs expriences dans diffrents pays (la France, la Belgique et le Maroc)

Rsum

Mon travail durant ses six mois de stage sest port sur la connaissance et la familiarisation avec lenvironnement du Windows Phone 7,ainsi que la ralisation de 3 applications majeures : 1-Application Phoceis : une application qui permet la commercialisation des
produits de l'entreprise (Vision, Restouch ).

2-Application de test Vision : Une application de test qui permet aux clients de voir les statistiques de visite de leurs applications comme par exemple (My auchan), sous forme dun graphe simplifi. 3-Application de test MyAuchan : Une application qui se compose en 2 parties, une partie back office qui permet tout simplement de convertir et dcortiquer un fichier PDF volumineux en plusieurs images en diffrentes formats , et dune autre partie Front office permettant au client daccder aux promotions du mois du magasin Auchan de leurs choix.

Abstract

My work during this six-month of internship was focused on the knowledge and the familiarity with the environment of Windows Phone 7, as well as the realization of three major applications: 1-Phoceis Application: An application that allows the marketing of the company (Vision, Restouch ...). 2- Application Vision test: A test application that allows customers to see the statistics of their visitors on their applications such as (My Auchan), in the form of a simplified graph. 3-MyAuchan Test Application: An application that is composed by two parts, a back office that allows you to simply peel and convert a large PDF file into multiple images in different formats, and another part for Front office that allows customers to access monthly into the promotions of Auchan store of their choice.

Table des Matires

REMERCIMENTS .1 RESUME ..2 ABSTRACT 3 TABLES DES MATIERES 4 TABLE DE FIGURES 5 CHAPITRE 1 : INTRODUCTION 8 1.1 INTRODUCTION ...8 1.2 MOTIVATION ET DECISIONS.9 1.3 PRESENTATION DE LENTREPRISE..11 1.3.1 Description .11 1.3.2 Partenariats technologiques 12 1.3.3 Prix et Accrditations .12 1.3.4 Distribution & VAD ..12 1.3.5 Application B to B..13 1.3.6 Restauration 13 1.3.7 Collectivits & Transports ..13 1.3.8 Les ralisations de lentreprise.14 1.3.9 Organigramme 15 1.3.10 Lagence Phoceis.15 1.4 DIAGNOSTIC STRATEGIQUE DE LENTREPRISE .16 1.4.1 Interne ........16 1.4.1.1 Forces de lentreprise......16 1.4.1.2 Faiblesses de lentreprise...... 16 1.4.2 Externe ........//17 1.4.2.1 Opportunits de lentreprise...... ..17 1.4.2.2 Menaces de lentreprise......18 1.4.3 Conclusion .......... 18 1.5 PRESENTATIONS DES APPLICATIONS EXISTANTES ..19 CHAPITRE 2 : METHODES SOLUTIONS .20 2.1 PROBLEMATIQUE 20 2.2 WINDOWS PHONE 21 2.3 LE CHOIX DE LA PLATEFORME DUTILISATION ;22 2.3.1 Smartphone.22 2.3.2 MICROSOFT VISUAL STUDIO 201023 2.3.3 Silverlight ..23 2.3.4 Liaison de donnes 24
4

2.3.5 XAML24 2.3.6 Microsoft Expression Blend25 2.3.7 Asp.net26 2.3.8 Xml.26 2.3.9 Json.27 2.4 CONCEPTION DES APPLICATIONS...28 2.5 LAPPLICATION Phoceis29 2.5.1 Schma de conception 29 2.5.2 Les fonctionnalits de Windows phone 730 2.5.3 Le choix des pages et des interfaces ...32 2.5.4 LAPI Rest de Twitter 34 2.5.5 Mthode dextraction de donnes dun http en utilisant WebClient34 2.6 LAPPLICATION VISION TEST.38 2.6.1 Schma de conception .38 2.6.2 Le concept de srialisation ..39 2.6.3 Outils de srialisation/de-srialisation..43 2.6.4 De-srialisation du flux Json43 2.6.5 Mthode daffichage de donnes dans un graph..45 2.7 PARTIE DU BACKOFFICE MYAuchan.48 2.7.1 Schma de conception.49 2.7.2 GhostScript.50 2.7.3 Mthode dautomatisation de LAPI de GhostScript.50 2.7.3 Utilisation de la librairie 51 2.8 MyAuchan TEST FRONTOFFICE..51 2.8.1 Schma de conception52 2.8.2 Mthode daffichage de donnes sur lcran..53 2.8.3 Mthode de zoom sur lcran.54 CHAPITRE 3 : RESULTATS 58 3.1 Prsentation des rsultats sur lapplication Phoceis..60 3.1.1 Ecran daccueil60 3.1.2 Les crans du contenu.61 3.1.3 Fil dactualits 62 3.1.4 Autres Pages ..63 3.2 Prsentation des rsultats sur lapplication Vision Test.64 3.2.1 Affichage des donnes du flux Json sur une listPicker64 3.2.2 Affichage de donnes sur le Quick Charts..65 3.3 Prsentation du rsultat sur la partie Backoffice de MyAuchan65 3.4 Prsentation des rsultats sur lapplication Front Office MyAuchan Test.68 3.4.1 Le rsultat de lutilisation de la listbox avec du databing...68 3.4.2 Le rsultat de lutilisation de la mthode Zoom-In 69

CHAPITRE 4 : CONCLUSION ET PERSPECTIVES 70 4.1 Conclusion.70 4.2 Perspectives ..70 RFRENCES ...71

TABLES DE FIGURES

Figure 1 : partenariats Figure 2 : Distribution & VAD Figure 3 : applications B to B Figure 4 : Restauration Figure 5 : Collectivits et transports Figure 6 : ralisations de lentreprise Figure 7 : organigramme Figure 8 : Phoceis sur map Figure 9 : extrait du code XAML Figure 10 : Exemple de lexpression Blend Figure 11 : extrait du code XML Figure 11 : extrait du code Json Figure 13 :code en xml pour la comparaison avec le format Json Figure 14 : Schma de conception des applications Figure 15 : Schma de conception de lapplication Phoceis Figure 16 : type de page WP7 Figure 17 : boite outils Figure 18 : schma de conception de lapplication vision Figure 19 : listpicker Figure 20 : Schma de conception de lapplication myAuchan back offic Figure 21 : schma de conception de lapplication myAuchan front office Figure 22 :Ecran daccueil Phoceis Figure 23 :Contrle pivot contenant le contenu des pages Figure 24 : page fil dactualits Figure 25 :page map Figure 26 :affichage du flux json dans la listpicker Figure 27 : page de paraphe Figure 28 : Rsultat dune partie du back Office MyAuchan Figure 29 :Rsultat de donnes afficher sur une listbox Figure 30 : la page Zoom-in

CHAPITRE 1 : INTRODUCTION

1.1 Introduction Ma formation, en tant qutudiant ingnieur en Master 2 en systmes dinformation Supinfo, me cite le devoir deffectuer un stage de fin dtude dune dure de 6 mois, ce stage est conu comme un processus rel dans une fonction oprationnelle afin de me confronter avec des environnements de systmes dinformations professionnels, bass sur des technologies modernes. Le choix de Phoceis, SSII (socit de services en ingnierie informatique) de valeur reconnue, s'est rvl bien fond. Il ma bien t donn tous les moyens matriels et prodigu tous les conseils pour parfaire ce stage de fin dtude dans les meilleures conditions. Ce mmoire comportera 4 parties majeures prsentes comme suit : Dans un premier temps, nous entamerons ce mmoire par une prsentation de lentreprise ainsi que ces principales caractristiques et une analyse globale de lentreprise par le biais de la mthode SWOT. Nous nous emploierons ensuite prsenter la partie qui concerne les mthodes et solutions utilises. Pour ensuite prsenter la totalit des projets sous windows phone 7. Nous passerons par la suite une prsentation des rsultats. Et enfin nous clturerons par une conclusion qui renvois sur les aspects ajouts lentreprise. En ce moment lge davoir une empreinte en ligne est ncessaire, mais ayant une empreinte mobile cest l o l'industrie a une tendance suivre. Rapidement, les Smartphones ont devenu comme une ncessit pour les utilisateurs et les entreprises sont en mesure de cette grande rvolution technologique qui a touch un nombre norme de consommateurs. Et grce cette rvolution ils sont devenus capable d'atteindre tout le monde travers leurs applications Smartphone.

Une application Smartphone peut tre une excellente faon de garder les gens jour sur lensemble de lentreprise. Avez-vous besoin d'obtenir une annonce spciale vos clients? Assurez-vous de mettre ici toutes les informations sur votre application Smartphone ainsi que de votre site web conventionnel. L'application Smartphone donne aux utilisateurs la possibilit d'obtenir les informations relatives de votre entreprise d'une autre manire, quand ils nauront pas le temps de se connecter un ordinateur. Grce ses applications ils seront maintenant capables dtre accessible 24 heures par jour travers tous les Smartphones.
.

Depuis un moment Phoceis sest attaqu la conception et la ralisation des applications Mobiles sur toutes les plateformes (IOS de apple,Android,et Windows Phone), car lavenir de la technologie se base sur ce grand phnomne.

1.2 MOTIVATIONS ET DECISIONS Motivations Depuis toujours je mintresse tous ce qui est technologies de Microsoft. Grce mes tudes Supinfo jai eu le plaisir de profiter de ses conventions avec Microsoft, o jai pu dcouvrir et travailler plusieurs reprises avec son environnement de travail, et laide des stages que jai effectu jai pu approfondir mes connaissances et les dvelopper en comptences en matire de dveloppement de cet environnement. Ce stage au sein de Phoceis ma donn lopportunit de dcouvrir et de travailler avec une nouvelle technologies de la famille Microsoft Windows Phone 7 ,une technologies qui a vu le jour rcemment et qui ne cesse de se dvelopper et se propager dans le march une vitesse de la lumire , grce mes connaissances en langage de programmation C# qui fait partie de la famille
9

Microsoft et ma grande motivation la dcouverte de nouvelles technologies ,cela ma permis facilement de me familiariser avec ce nouveau environnement et de se plong dans le monde du dveloppement sous WP7 ainsi dapprofondir mes connaissances pour ce produit, et cela ma pouss mme prendre la grande dcision de ma carrire et de me spcialis dans lunivers du dveloppement du Windows Phone. Dcisions Tous les designs de lentreprise sont raliss par le directeur artistique. Toutefois, comme expliqu dans la premire partie de ce mmoire, les applications internes ne sont actuellement pas la priorit de Phoceis. C'est pourquoi, le design est dt tre ralis par mes soins. Le graphisme n'tant pas mon point fort, j'ai d prendre le temps ncessaire pour raliser un travail de qualit. Ce ft une exprience enrichissante, notamment sur le fait de penser l'utilisateur et l'utilisation qu'il a d'une application. Il aurait t possible de reprendre le design des applications existantes, toutefois, d'un point de vue ergonomique, il aurait t peu judicieux de prsenter une application non adapte pour l'utilisateur, qui a l'habitude de sa plate-forme. Cela aurait t une faute d'ergonomie et une faute d'image vis vis dune entreprise spcialise dans le dveloppement d'application mobile. Les applications Vison test et le Front office de MyAuchan test tait de mes propositions pour lentreprise, jai voulu mapprofondir beaucoup plus dans le monde de Windows Phone, faire face ses difficults et dapprendre le maximum possible de ses fonctionnalits, cest pour cela jai propos ces deux applications et qui tait accept et approuv bras ouvert par mon chef de projet.

10

1.3 Prsentation de lentreprise

1.3.1 Description Cre en 2002, la socit Phoceis sest trs vite impose comme un acteur influent dans le dveloppement de logiciel et la cration de site internet. En 2007, forte de son exprience web, la socit Phoceis se spcialise dans le dveloppement dapplications mobiles dans les domaines du commerce, du transport, de la grande distribution, des loisirs et de la sant. Phoceis a su acqurir des rfrences prestigieuses en crant les applications mobiles dAuchan, Transpole, Beneteau ou encore But. Son savoir-faire se situe dans : le commerce mobile les tablettes en point de vente le catalogue interactif l'analytics mobile : M-CRM la stratgie mobile la fidlit mobile le self-scanning la solution & expertise NFC le paiement mobile le commerce connect

11

1.3.2Partenariats technologiques

Figure 1 : partenariats

1.3.3 Prix et accrditations Laurate du prix PICOM en 2011 Socit agre Crdits Impts Recherches pour les annes : 2012- 2013

1.3.4 Distribution & VAD Catalogue interactif Applications M-Commerce Coupons go-localiss

Figure 2 : Distribution & VAD

12

1.3.5 Application B to B Prsentation dun produit Conception dun devis

Figure 3 : applications B to B

1.3.6 Restauration Dmatrialisation de menus sur tablette Rservation de table

Figure 4 : Restauration

1.3.7 Collectivits & Transports Guidage multimodal Horaire en temps rel Plan et ralit augmente

Figure 5 : Collectivits et transports

13

1.3.8 Les ralisations de lentreprise

Figure 6 : ralisations de lentreprise

14

1.3.9 Organigramme

Figure 7 : organigramme

1.3.10 Lagence phoceis Lagence Phoceis ou jai effectu mon mmoire de fin dtudes est situ 54 rue Christophe Colomb 59800 Lille

15

(Source : maps.google.fr) Figure 8 : Phoceis sur map

1.4 Diagnostic stratgique de lentreprise Loin de moi l'ide de me positionner en spcialiste de ce genre d'exercice aprs quelques modules de gestion d'entreprise et de management Supinfo. De plus, je n'ai pas lil expert qu'un professionnel de cette branche de mtier pourrait avoir et plusieurs informations ont pu m'chapper ou tre incompltes. Toutefois, afin de correctement prsenter une entreprise, il me semble important de la replacer dans un contexte en l'analysant quelque soit sa profession. C'est donc de mon il dingnieur en informatique - qu'en utilisant la mthode SWOT, je souhaite vous prsenter ce diagnostic stratgique sans doute assez sommaire de Phoceis. 1.4.1. Interne 1.4.1.1. Force de l'entreprise Au niveau de l'quipe, l'entente et l'ambiance est trs bonne. Bien que l'open-space soit parfois un peu agit, le srieux et le travail est de mise en toute circonstance. L'quipe est enthousiaste, passionne et dynamique. Chacun met jour ses comptences techniques afin d'tre la pointe au niveau technologique et apport un plus l'entreprise. De fait, Phoceis est une entreprise innovante et la pointe dans des secteurs nouveaux tel que la dmocratisation de l'utilisation du NFC sur smartphone, dans le self-scanning, dans le couponning et de manire plus tendue dans le commerce mobile et les solutions novatrices. L'quipe fait preuve de beaucoup de crativit et dveloppe un grand nombre d'ides intressantes pour lentreprise; notamment au sein du ple recherche et du dveloppement. 1.4.1.2. Faiblesse de l'entreprise Sans doute la partie la plus difficile et dlicate raliser de cette mthode de diagnostic, principalement quand on fait partie de l'entreprise sur laquelle ce diagnostic est effectu. Ces points ne doivent pas tre peru comme la remise
16

en question des comptences de qui que ce soit ou d'une critique ngative de l'entreprise, mais comme des points qu'il est possible d'amliorer en interne. Du ct de l'image et de la communication, bien que l'entreprise se soit dote d'une quipe de qualit, les projets internes ne sont pas assez mis en valeur et pas assez soign. Par exemple le site web actuel peut tre revu au niveau ergonomique afin de mieux accder aux informations de l'entreprise et valoriser son travail, incorporer les dernires technologies telles que HTML5 et CSS3 pour un rendu visuel plus dynamique et moderne, inclure une version web mobile ou tre responsive afin d'tre correctement visible sur toutes plateformes. Du ct commercial, bien que la plateforme Android conquire le march des smartphones de faon impressionnante ( Android dpasse iOS, GNT, 22 Mai 2012 ), la stratgie commerciale ne suit pas encore Phoceis. En effet, actuellement, Phoceis vend davantage de solution iOS. Peut-tre que davantage d'tude de march devraient tre effectues et suivies et/ou que les solutions Android soient prsentes de manire diffrente aux diffrents clients. Du ct interne, bien que des ides intressantes d'organisation soient nonces par l'quipe, ces dernires ne sont peu, voire pas respectes. La productivit pourrait tre amliore avec une centralisation des projets, des bibliothques et documentations connues de chaque dveloppeur et de la mise en place d'un framework commun l'entreprise sur chaque plateforme. Un framework aliment, enrichi, par l'quipe. Toujours dans le cadre de l'amlioration et de suivi de la productivit, un circuit de suivi et de validation de projet peut tre mise en place. 1.4.2. Externe 1.4.2.1. Opportunits de l'entreprise
Politique : La politique de relance conomique base sur la recherche et

l'innovation ( Extrait de l'article : la reprise par l'innovation, Observateur OCDE, Juin 2009 ) est un des thmes majeur de la campagne du Parti Socialiste en France lors des dernires lections prsidentielles. Des fonds d'investissement devraient tre mis au service des socits innovantes, principalement dans le domaine des nergies renouvelables et cologique, mais galement dans tout autre domaine des nouvelles technologies.
17

Si les promesses lectorales sont maintenues, Phoceis pourrait alors dvelopper davantage son ple de recherche et dveloppement. L'arrive du NFC et l'explosion prvue en 2013, notamment pour le paiement mobile, mais aussi pour diverses applications. ( Extrait de l'article : Deloitte annonce l'explosion des tablettes et la fin de l'internet illimit, La tribune, 07 Fvrier 2012 ) Relations pour les solutions internes. Possibilit de partenariat technique notamment avec : SES, Toshiba, etc. Relation avec ses clients actuels : Auchan, But, Transpole et bien d'autre. Des socits qui investissent dans le secteur afin de se doter de stratgie mobile performante. 1.4.2.2. Menaces de l'entreprise Les menaces proviennent d'une concurrence de plus en plus rude, sur la mtropole Lilloise diverses entreprises avec des moyens financiers peut tre plus consquent que Phoceis telles que : Ikomobi : PME fonde en 2009, son secteur d'activit est identique celui de Phoceis. Keyneosoft : PME d'une trentaine d'employ offrant des solutions interactives et de cross-canal. 1.4.3. Conclusion Les lments de rponse que l'on peut apporter ce diagnostic stratgique sont : Mise en avant des solutions et des produits, se doter d'une vitrine de qualit prsenter. tre minutieux et mettre l'accent sur les dtails des produits internes, ainsi que fortement communiquer sur ces derniers. Il est essentiel de se placer en professionnel face au client et d'apporter diffrentes tudes pour lui conseiller les solutions technologiques les plus adaptes sa demande et au public vis. Les tudes de march sont parfois coteuses. C'est pourquoi, il est souvent conseill aux PME de prendre des stagiaires de diffrentes coles de commerce afin de faire ces tudes puis de
18

les publier avant de pouvoir investir auprs d'entreprises spcialises dans ce domaine d'activit. Prise en compte des remarques au niveau ergonomique d'une application en fonction des plateformes. Le client est roi, mais doit bien comprendre que l'entreprise est spcialise dans le dveloppement d'application. L'image de l'entreprise se retrouve dans les solutions qu'elle a produites. Afin de vraiment reflter ce ct entreprise spcialise, le respect des guidelines est essentiel. Le ple artistique a les comptences pour adapter la volont du client l'ergonomie ncessaire chaque plate-forme, il serait dommage de ne pas mettre assez l'accent sur ce domaine de comptence auprs des clients. Mise en place de solution d'organisation interne et d'optimisation de la productivit, de gestion de projet. Mise en place d'un schma d'organisation d'un projet, framework, convention de nommage de fichier, convention de code et indentation pour les reprises des projets ou les projets demandant plusieurs dveloppeurs. Certes, ceci est une solution purement thorique et la mise en place de ce genre d'organisation prend du temps au dbut. Toutefois, il acclre grandement la productivit et la vision des marges qu'il est possible de faire sur les solutions proposes.

1.5 Prsentation des Applications Existantes Phoceis : cest une application sous Android et IOS elle reprsente lentreprise dans ses aspects commercial et technologiques, en offrant la possibilit de connaitre lentreprise Phoceis, pouvoir la contacter directement via un Smartphone, connaitre ses clients et ses solutions proposes, ainsi que de pouvoir tlcharger ses solutions directement par le tlphone, par le biais de lApple Store pour les applications IOS et Android market pour les applications sous Android. My Auchan, une application pour une multitude de services Dmatrialisation de lintgralit des catalogues de promotions Consultation et slection des offres disponibles en fonction des magasins de rfrence Cration dalertes produits Numrisation des images, des codes-barres et des QR codes

19

Phoceis Vision Une solution innovante permettant danalyser, de superviser, de dynamiser la vie de votre application mobile. Son SDK est multiplateforme il vous permet dintgrer sa solution sur : Android et IOS. La solution permet en un clic, de grer votre application mobile pour connatre: Le nombre de tlchargements et de lancements Le temps de session La localisation de vos utilisateurs Le taux de rebond Analyse de parcours client Audience de votre application

CHAPITRE 2 : METHODES SOLUTIONS

2.1 Problmatique La problmatique se consiste se plonger dans lunivers de Windows phone, connaitre ses fonctionnalits et de rpondre sur un certain nombre de questions pour la bonne ralisation de ces applications. Les questions peuvent tre poses dune sorte trait chaque projet part entire : Question sur lapplication Phoceis : Comment raliser une application Phoceis partir de lexistant (sous ios &Android), avec ladaptation ergonomique et fonctionnelle sur Windows Phone ? Question concernant Vision test : Comment raliser une application permettant de visualiser les statistiques de nombres de visites dune tierce application? Question sur le Front Office MyAuchan test : Comment pouvoir afficher les promotions du mois du magasin Auchan sur un Smartphone ? Question sur le Back Office MyAuchan : Comment pouvoir convertir un fichier Pdf en Images en diffrentes formats ?
20

2.2 Windows Phone Windows Phone est un systme d'exploitation mobile dvelopp par Microsoft pour succder Windows Mobile, sa prcdente plateforme logicielle qui a t renomme pour l'occasion en Windows Phone Classique. Contrairement au systme qu'il remplace, Windows Phone 7 est principalement destin au grand public plutt qu'au march des entreprises. Il a t lanc le 21 octobre 2010 en Europe, Singapour, en Australie et en Nouvelle-Zlande, le 8 novembre 2010 aux tats-Unis et au Canada, puis le 24 novembre 2010 au Mexique, et enfin un lancement en Asie en 2011. Selon Microsoft, le dveloppement du systme d'exploitation est parti d'une feuille blanche, et s'est termin entre fin aot et dbut septembre 2010 avec notamment la disponibilit du kit de dveloppement final et la diffusion d'un kit de prsentation aux constructeurs. Contrairement Windows Mobile, l'interface homme-machine de Windows Phone 7 repose nativement sur l'utilisation d'un cran tactile multipoints. Avec Windows Phone 7, Microsoft propose une interface utilisateur prcdemment dnomme Metro, trs diffrente de ce que l'on peut avoir l'habitude avec IOS, Bada ou Android. Cette interface avait dj t intgre dans le baladeur numrique de Microsoft, le Zune HD5. Le systme d'exploitation est disponible en cinq langues : anglais, allemand, espagnol, franais et italien. La dernire mise jour majeure nomme Mango, sortie le 27 septembre 2011, tend le nombre de langues supportes 25. Windows Phone Marketplace, la boutique en ligne de Microsoft ddie au tlchargement des applications pour Windows Phone 7, est disponible dans 17 pays.
(Source : Wikipedia fournit une explication dtaille sur WP : http://fr.wikipedia.org/wiki/Windows_Phone)

21

2.3Le choix de La plateforme dutilisation 2.3.1 SmartPhone Un Smartphone (tlphone intelligent) ou ordiphone ,est un tlphone portable diffrent des PDA et autres tlphones portables classiques par sa multifonctionnalits tel que la messagerie client ,navigateur web, GPS, synchronisation avec lordinateur et ses fonctionnalits dorganisation comme lagenda carnet dadresse ou bien ses fonctionnalits multimdia. Le systme dexploitation Windows Phone 7 a t choisi pour mon projet. Ce systme est disponible depuis octobre 2010 et il offre : un mulateur Windows Phone 7, lEDI Visual Studio 2010 pour Windows Phone , la plateforme de dveloppement Silverlight pour Windows Phone, le framework XNA 4.0 Game Studio CTP (destin au dveloppement de jeux, il na pas t utilis pour ce projet). Le fait que soit livr un ensemble doutils complets et faciles installer a contribu au choix de la plate-forme Windows Phone 7. De plus, on a choisi Silverlight car il permet de migrer facilement le prototype Smartphone vers un site web. Le systme dexploitation (Windows Phone 7) : le choix de Windows phone est fait grce la force de frappe du gant Microsoft, son arrive sur le march des Smartphones a fait un grand bruit, grce sa facilit dutilisation, ses interfaces innovantes, attractives dnomm Metro, au-del grce sa compatibilit avec Silverlight, et son langage bas soit sur C# ou Vb.net, permet facilement nimporte quel dveloppeur .net de se reprer facilement dans son univers, et de lintgrer rapidement, et cest mon cas.

22

Pour mon projet jai utilis Visual Studio 2010 version finale avec les cls de Phoceis et en installant le du SDK de Windows Phone 7.1 compatible avec la version finale de Visual studio 2010 SP1 tlchargeable sur le site de Microsoft gratuitement:http://www.microsoft.com/enus/download/details.aspx?id=27570 et qui contient plusieurs lments tels que : Windows Phone Emulator Silverlight 4 SDK et DRT Windows Phone SDK 7.1 - Extensions pour XNA Game Studio 4.0 Kit de dveloppement logiciel (SDK) Microsoft Expression Blend pour WP7 Client WCF Data Services pour Windows Phone Kit de dveloppement logiciel (SDK) Microsoft Advertising pour WP
(Veuillez trouver la liste globale du contenu du SDK sur le site de Microsoft)

2.3.2 Microsoft Visual Studio 2010: est un IDE simple prendre en main et complet qui intgre de plus un outil ddition graphique pour simplifier la phase de design des interfaces des diffrents types dapplications (Web, Windows, WP7...). On y retrouve les outils habituels des IDE volus, permettant un dbogage simple des applications, et un dveloppement rapide, avec Windows phone 7 a lui sert dun outil de dveloppement qui lui permet de crer des applications Silverlight, de les tester soit sur un mulateur ou sur un Smartphone sous WP7.

2.3.3 Silverlight Est un plugin pour navigateur Web multiplateforme, permettant de crer des applications riches sur le Web. Silverlight pour Windows Phone Toolkit fournit la communaut des dveloppeurs WP de nouveaux composants, fonctionnalits et moyens efficaces pour aider la forme du dveloppement de produits. Le Toolkit comprend du code open source, des chantillons, des documentations, et du design de soutien pour la plateforme Windows Phone

23

destines des Smartphones, des plugins Silverlight de navigation et des fonctionnalits pour la liaison de donnes (data binding)

2.3.4 La liaison de donnes Fournit un moyen simple aux applications Silverlight pour afficher et interagir avec les donnes. L'affichage des donnes est spar de la gestion des donnes. Une connexion, ou liaison, entre l'interface utilisateur et un objet de donnes permet aux donnes de circuler entre les deux. Quand une liaison est tablie et les donnes changs, les lments d'interface utilisateur qui sont lis aux donnes peuvent reflter les changements automatiquement. De mme, les modifications apportes par l'utilisateur dans un lment d'interface peuvent tre rpercutes dans l'objet de donnes. Par exemple, si l'utilisateur modifie la valeur dans une zone de texte, la valeur sous-jacente des donnes est automatiquement mise jour pour reflter ce changement. (Une explication dtaill est donne sur la section MSDN de Microsoft : http://msdn.microsoft.com/enus/library/cc278072%28v=vs.95%29.aspx) 2.3.5 XAML (eXtensible Application Markup Language) est un langage dclaratif dvelopp pour les besoins des systmes d'exploitation de Microsoft, et qui permet la description de donnes structures, Ce langage bas sur le langage XML, il facilite le travail du dveloppeur et permet d'crire une application client Windows aussi aisment qu'une application web ou Windows Phone. L'ide est en effet de spar le graphique du code, cest--dire le design dune application et lautre ct dveloppement (par exemple : C#)

24

Figure 9 : extrait du code XAML

2.3.6 Microsoft Expression Blend : Est un produit Microsoft qui sert dun outil de conception dinterface utilisateur qui se charge principalement de la partie graphique des applications pour le web, Windows phone (), Expression Blend est bas principalement sur le langage de balisage XAML pour WPF et Silverlight.

(Source : http://blogs.msdn.com/b/synergist/archive/2010/03/29/new-york-times-silverlight-kit-updated-forwindows-phone-7-series.aspx) Figure 10 : Exemple de lexpression Blend

25

2.3.7 ASP.NET ASP.NET est un ensemble de technologies de programmation web cr par Microsoft. Les programmeurs peuvent utiliser ASP.NET pour crer des sites webs dynamiques, des applications web ou des web services XML. La technologie est accessible grce l'installation d'un serveur web compatible ASP (IIS) ou l'intrieur de Visual Web Developer Express Edition.(wikipedia) 2.3.8 XML Le XML (Extensible Markup Language, langage de balisage extensible ) est un langage informatique de balisage gnrique. Cette syntaxe est dite extensible car elle permet de dfinir diffrents espaces de noms, c'est--dire des langages avec chacun leur vocabulaire et leur grammaire, comme XHTML, XSLT, RSS Elle est reconnaissable par son usage des chevrons (< >) encadrant les balises. L'objectif initial est de faciliter l'change automatis de contenus complexes (arbres, texte riche) entre systmes d'informations htrognes (interoprabilit). (Wikipdia) Exemple dune partie dun fichier en XML :

Figure 11 : extrait du code XML

26

2.3.9 JSON JSON (JavaScript Object Notation) est un format de donnes textuel, gnrique, driv de la notation des objets du langage ECMAScript. Il permet de reprsenter de linformation structure. Cr par Douglas Crockford.(Wikipedia) Structure dun document Json Un document JSON ne comprend que deux lments structurels :

des ensembles de paires nom / valeur ; des listes ordonnes de valeurs.

Ces mmes lments reprsentent 3 types de donnes :

des objets ; des tableaux ; des valeurs gnriques de type tableau, objet, boolen, nombre, chane ou null.

Voici un exemple dun document en Json

Figure 12 : extrait du code json

27

Prsentation du mme exemple en XML

Figure 13 :code en xml pour la comparaison avec le format Json

Lavantage dun fichier en Json cest quil consomme moins de ressources ,ce qui le rend plus performant et plus rapide 2.4 Conception des applications La structure du projet se dcompose sous 4 grand thmes principaux, qui se schmatise sous forme de 3 applications majeures (Phoceis ,Vision, MyAuchan) lies entre elles par le biais de lapplication Phoceis, qui permet de les tlcharger via un Market place ,et une autre partie back office de lapplication MyAuchan qui complte et communique avec cette dernire. Voici un schma qui rsume la problmatique :

Figure 14 : Schma de conception de toutes les applications

28

Pour simplifier le travail je vais traiter chaque partie sparment. 2.5 Lapplication Phoceis L'objectif : - L'adaptation ergonomique et fonctionnelle sur Windows phone - Vitrine de l'entreprise - Commercialisation des produits de l'entreprise : Vision, MyAuchan Le but : Le but de la cration de cette application est de permettre aux clients de connaitre la nature de lentreprise Phoceis, ce quelle offre comme produits, ainsi que de suivre lvolution de lentreprise, en temps rel. Pour cela, lors de la cration de lapplication Phoceis, jai veill lui donner cet aspect attractive, permettant dattirer lattention des clients, ainsi de leurs permettre suivre en temps rel les flux de messages diffus par lentreprise sur un lien social tel que twitter, et de leurs permettre feuilleter en dtails le contenu des produits proposs par lentreprise. 2.5.1 Schma de conception

Figure 15 : Schma de conception de lapplication Phoceis

29

Pour le dveloppement de lapplication Phoceis faut avoir un certain nombre de connaissance de lenvironnement Windows Phone et de ce quil offre comme fonctionnalits, pour cela on va tudier les fonctionnalits de Windows Phone 7. 2.5.2 Les fonctionnalits de Windows Phone 7 LIDE Visual studio pour Windows Phone, offre 5 types de pages de base pour le dveloppement des applications WP7:

Figure 16 : type de page WP7

Les pages en mode portrait et paysage: se prsentent comme pages de bases vierges ou lon peut ajouter tout sorte de contenu (listbox, bouton ) grce une boite outils existante dans lIDE, la diffrence entre ces deux types de pages ,cest le format de leur prsentation ,comme leurs noms lindique, une page est en mode portait ( la verticale ) et lautre en mode paysage ( lhorizontale). Les pages panorama et pivot : se prsentent comme des outils idale pour construire une page principale dune application (WP7). Ces pages permettent de fournir diffrents niveaux et de se dplacer dune page lautre afin de donner plus de possibilits une seule page. Cependant pour comprendre ces pages, faut comprendre en premier leurs fonctionnalits afin de les utiliser pleinement.

30

Pivot : la page de pivot est similaire l'utilisation des onglets sur d'autres plateformes. Il vous permet essentiellement de fournir plusieurs vues dans une seule page. L'utilisateur peut facilement naviguer entre ces vues en faisant glisser vers la gauche ou la droite. Il s'agit d'une interface utilisateur trs naturel et utile pour les applications bases sur les donnes. Les diffrentes vues sont une faon trs naturelle pour permettre l'utilisateur de filtrer les donnes ou afficher des listes similaires, ce qui fait sens pour les applications de donnes intensives. La dclaration du contrle pivot se fait de la sorte :

Et on peut ajouter plusieurs pivots mais on essayant de ne pas dpasser le nombre de 5 pivots pour une meilleur performance et navigation. Panorama : La page Panorama est un peu similaire la page Pivot, mais Panorama Items ne sont pas lis la largeur de l'cran. Le contrle Panorama vous permet de crer une interface utilisateur qui utilise le style de tabulation horizontale, mais peut tre beaucoup plus flexible et plus immersive. Le contrle Panorama est souvent configur pour utiliser une image de fond, qui dfile une vitesse lgrement diffrente de premier plan produisant un effet 2d. On peut dclarer une page pivot de la sorte :

Contrle utilisateur : Les contrles utilisateur peuvent contenir des contrles, des ressources, des chronologies d'animation, exactement comme une application. La seule diffrence rside dans le fait que lobjet racine est un lment UserControl et non une Fentre ou une Page.(source msdn)

31

Boite outils : (toolbox) contiens les icones des contrles et des lments quon peut ajouter notre interface WP7 (elle contiens des lments tel que :listbox, zone de texte ,image ,vido ). Chaque icne dans la bote outils peut tre dplace vers une vue de conception ou coll dans un diteur de code dans l'environnement de dveloppement intgr Visual Studio (IDE).

Figure 17 : boite outils

2.5.3 Le choix des pages et des interfaces LEcran daccueil Cest lcran principale de lapplication, o on peut dire aussi cest limage de lapplication du point de vue marketing, cet cran va donner une vue globale sur l'ensemble de l'application avec des liens rapides vers certaines fonctionnalits. Animation avec prsentation de certains savoir faire de Phoceis. Afin de pouvoir modliser une page daccueil adapt aux besoins de lapplication en lui permettant en mme temps de garder lergonomie des applications Windows phone, jai choisi la page en mode portrait vierge comme dpart, afin que je puisse construire un nouveau design adapt et attractive pour amliorer limage de marque de lentreprise.
32

Les Ecrans du contenu: Pour le choix des crans du contenu jai pris le contrle pivot car il ma permis de regrouper tous les crans contenant les pages : Fil dactualits, Clients, Agence, et Solutions en une seule page avec diffrentes vues o on peut facilement naviguer entre ces vues en faisant glisser vers la gauche ou la droite. Le choix de ce contrle est fait afin de pouvoir diminu la taille de lapplication ce qui entraine bien videment une facilit dans le dfilement des crans, une grande flexibilit et rapidit dans lensemble de fonctionnement, ainsi quune rduction globale de la taille de lapplication, car le contrleur pivot ma permis de rduire 4 pages en une seule page. Mthode appliqu pour laffichage Fil dactualits : La page fil dactualits permet aux utilisateurs de suivre le flux des messages de lentreprise diffus en temps rel. Twitter est sans aucun doute l'un des exemples les plus rcents et russis de rseaux sociaux pour apparatre sur le World Wide Web. Pour pourvoir afficher le fil dactualits de lentreprise via Twitter, il faut comprendre un certains nombres de fonctionnalits. Pour cela Twitter fournit une API permettant aux dveloppeurs de fournir leurs utilisateurs d'accder aux diffrentes fonctionnalits que le site Twitter offre. Cette partie va permettre de connaitre les bases de l'utilisation de LAPI Rest de Twitter.

33

2.5.4 LAPI Rest de Twitter : Twitter n'est pas seulement un outil utile dans l'espace des mdias sociaux, il offre galement aux dveloppeurs une gamme complte de services afin de permettre l'automatisation de la fonctionnalit Twitter. L'un de ces services (et peut-tre le plus populaire) est l'API REST. REST est un acronyme pour Representational State Transfer. L'explication complte de tout ce que comporte une dfinition approprie REST est en dehors du champ de lapplication, mais par ailleurs il est disponible sur developerWorks de IBM .Pour le cas trait ici, il suffit d'indiquer que REST permet aux dveloppeurs d'accder aux informations et ressources l'aide d'une simple invocation HTTP. Pensons REST de cette faon: on peut obtenir des donnes spcifiques un domaine en pointant simplement l'URL d'un emplacement spcifique. Pour nos buts ici, c'est vraiment tout ce qu'il est. On peut aussi penser qu'il s'agit d'un service Web simplifie. Les donnes contenant les informations sont sous forme dun URL,avec une extension .xml ou .json 2.5.5 Mthode dextraction de donnes dun http en utilisant WebClient: Lorsquon crit une application, peu importe la plateforme quon utilise, la plupart du temps on a besoin daccder une source de donnes qui est souvent situ distance. Cela est surtout vrai lorsque lapplication s'excute sur un appareil mobile qui est connect l'Internet parce quon a souvent besoin dappeler un serveur d'application qui fournit certains types de donnes afficher sur l'cran de l'appareil. Silverlight pour Windows Phone fournit des outils de rseautage, pour accder des ressources distantes. Peu importe la ressource quon veut y accder.

34

Il y a un large ventail d'outils, chacun sa particularit qui le rend propre certain sorte de scnario et qui donne un contrle sur ce qui se passe sous le capot lorsque vous passez un appel vers le rseau. Dans cette partie je vais parler de loutil le plus simple le WebClient WebClient : Le service WebClient est un outil largement adopte qui fusionne la simplicit et la flexibilit, et il est habituellement le meilleur choix pour la plupart des besoins de mise en rseau. Il est construit sur le HttpWebRequest qui est probablement l'outil de plus bas niveau, mais son but de rendre le rseau plus simple, supprimant le besoin de faire face la demande et rponse de bas niveau. Pour cette raison, le service WebClient ne peut pas tre utilis lorsquon veut accder aux fonctionnalits du protocole HTTP de base, mais la plupart du temps, il est plus que suffisant. Une fois que vous avez cr une instance de classe WebClient, vous devez tre conscient qu'il ne peut tre utilis et rutilis plusieurs fois pour passer des appels de rseau multiples, mais il ne prend pas en charge les appels simultans, il faut donc russir attendre la fin de l'appel prcdent avant de commencer un autre. Si vous avez besoin de placer deux de multiples appels simultans, vous devez crer une instance diffrente, une pour chacun.

35

La classe WebClient fournit un certain nombre de faons pour faire appel une ressource http. Si on analyse les mthodes on va trouver les lments suivants: DownloadStringAsync : Fournit la faon la plus simple pour tlcharger une ressource de chane partir du rseau, comme une page HTML, un flux RSS ou ATOM, un fichier XML simple et ainsi de suite. UploadStringAsync : Il peut tre utilis pour envoyer des chanes un serveur et il peut galement spcifier la mthode utiliser pour effectuer l'appel. C'est probablement la faon la plus simple de faire des appels une ressource REST. OpenWriteAsync & OpenReadAsync : ces deux mthodes permettent d'envoyer et de recevoir des ressources de binaires / partir du serveur. L'utilisation est un peu plus complexe que les autres mthodes, mais une fois l'appel termin, vous pouvez accder un flux binaire, et vous pouvez lire ou crire directement.

A ct de chaque mthode il y a des objets qui rvlent un schma commun, vous devez utiliser lorsque vous appelez le rseau en utilisant WebClient. Utilisation de la DownloadStringAsync titre d'exemple, vous pouvez dcouvrir un vnement DownloadStringCompleted, un dlgu DownloadStringCompletedEventHandler et le rapport EventArgs classe DownloadStringCompletedEventArgs. C'est parce que le service WebClient expose un modle asynchrone qui est dclench par un vnement au lieu de rappel moteur. D'un point de vue ce qui rend plus simple la classe, mais d'un autre point de vue ce qui complique l'utilisation de la classe parce que le modle d'vnement rendent difficile de traiter l'appel en un seul point: Voici

36

l'exemple commun pour clarifier les choses :

public void GetFeed() { WebClient client = new WebClient(); client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted); client.DownloadStringAsync(new Uri("http://www.something...xml ")); } void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { string data = e.Result; // faite quelque chose avec le feed ici }

Pour laffichage du fil dactualits de lentreprise via Twitter,lutilisation de WebClient va nous permettre de lire le Flux de donnes provenant de LAPI de Twitter et qui est sous forme dun lien dune extension .XML . Lecture de lAPI de Twitter :

Entrer lintrieur de lapi et extraire les donnes

37

La listTweet ici, est une listbox qui permet de lie linterface utilisateur un objet de donnes, on aura comme rsultat une page contenant les tweet de lentreprise, avec leurs image (ImageSource) , le texte(Message) ,et le nom Phoceis comme (UserName).

2.6 Lapplication Vision Test Objectif : - Elaboration dune application permettant de superviser la vie de votre application. - Faciliter la lecture de lvolution dune application But : Le but est de crer une application qui permet un utilisateur de suivre lvolution de son application, en se basant sur le nombre de visite de son application mobile, le nombre de tlchargement et de lancements, le temps de session ,tout en facilitant la lecture de ses donnes par un graph simplifi interprtable par nimporte quel utilisateur. 2.6.1 Shchma de conception

Figure 18 : schma de conception de lapplication vision

38

Lapplication Vision se prsente comme une succession de pages : La premire page permet lutilisateur de sauthentifier, si lutilisateur russi sauthentifier il passe la page suivante, sinon un message saffiche en lui signalant quune erreur est survenu lors de lauthentification. la deuxime page permet lutilisateur de choisir lapplication quil lui correspond ainsi que la priode approprie, dans cette partie lapplication rcupre les donnes dun lien Json pour linstant on peut dire que json rserve des donnes quelconques, ces donnes reprsente le nom de diffrentes applications ( florajet, MyAuchan, Phoceis),et partir de cette page on construit notre choix pour le graph quil va tre afficher par la suite . La troisime et la dernire page nous permet dextraire les donnes du lien Json et les Afficher dans le graph. Pour permettre dextraire ces donnes de json ,nous nous trouvons dans lobligation de comprendre le concept de serializing/deserializing. 2.6.2 Le concept de serializing/deserializing Introduction au phnomne La srialisation est un processus de conversion d'un objet en un flux de donnes de sorte qu'il peut tre facilement transmissible via le rseau ou peut tre poursuivie dans un emplacement de stockage persistant. Cet emplacement de stockage peut tre un fichier physique, base de donnes ou le cache ASP.NET. La srialisation est la technologie qui permet un objet d'tre converti en un flux linaire des donnes qui peuvent tre facilement transmis travers les frontires des processus et des machines. Ce flux de donnes doit tre dans un format qui peut tre compris par les deux extrmits d'un canal de communication pour que l'objet puisse tre srialis et reconstruit facilement. L'avantage de la srialisation est la capacit de transmettre des donnes sur le rseau dans un format multi-plateforme compatible, ainsi que de l'enregistrer dans un support de stockage persistant ou non persistant dans un format non propritaire. La srialisation est utilis par les services Web
39

Remoting, SOAP pour transmettre des donnes entre un serveur et un client. De-srialisation est l'inverse, c'est le processus de reconstruction de l'objet mme plus tard. La technologie d'accs distant de. NET utilise la srialisation pour passer des objets par valeur d'un domaine d'application l'autre. Le principal avantage de la srialisation est la capacit d'un objet srialiser dans un persistant ou un support de stockage non persistant et de reconstruire le mme objet si ncessaire, un moment ultrieur par la d-srialisation de l'objet. Remoting et Web Services dpendent fortement de la srialisation et d-srialisation. Avantages et inconvnients de la srialisation Voici les principaux avantages de la srialisation: Faciliter le transport d'un objet travers un rseau Crer un clone d'un objet

Le principal inconvnient de srialisation peut tre attribu la surcharge des ressources ( la fois le processeur et les priphriques IO) qui est impliqu dans la srialisation et d-srialisation des donnes et les problmes de latence qui sont impliqus pour la transmission des donnes sur le rseau. En outre, la srialisation est assez lent. En outre, la srialisation XML est prcaire, consomme beaucoup d'espace sur le disque et il fonctionne sur les membres du public et les classes publiques et non sur les cours privs ou internes. Par consquent, il oblige le dveloppeur permettre la classe pour tre accessible par le monde extrieur.

40

Les types de la srialisation La srialisation peut tre des types suivants: Srialisation binaire Srialisation Soap Srialisation XML ou Json Ce qui nous intresse cest le troisime type la srialisation XML/JSON mais tout de mme je donne une brve dfinition de chacune de ces types. Srialisation Binaire Srialisation binaire est un mcanisme qui crit les donnes vers le flux de sortie de telle sorte qu'il peut tre utilis pour reconstruire l'objet automatiquement. Le terme binaire dont son nom indique que l'information qui est ncessaire pour crer une copie binaire exacte de l'objet est enregistre sur le support de stockage. Une diffrence notable entre la srialisation binaire et la srialisation XML est que srialisation binaire prserve l'identit exemple, alors que la srialisation XML ne fonctionne pas. En d'autres termes, la srialisation binaire de l'tat de l'objet entier est enregistr contrairement que dans la srialisation XML seule une partie des donnes de l'objet est enregistr. La srialisation binaire peut grer des graphes avec de multiples rfrences du mme objet. Par contre la srialisation XML transforme chaque rfrence un objet unique. Srialisation SOAP Le protocole SOAP est idal pour la communication entre les applications qui utilisent des architectures htrognes. Le principal avantage de la srialisation SOAP est la portabilit. Le SoapFormatter srialise des objets dans des messages SOAP ou analyse des messages SOAP et des extraits dobjets srialiss du message.

41

Srialisation XML/Json Selon MSDN, la srialisation XML ou Json convertit (srialise) les champs publics et les proprits d'un objet ou des paramtres et retourne valeurs de mthodes, dans un flux XML/Json conforme un schma XML/Json spcifique du langage de son langage de dfinition. Les Rsultats de srialisation XML/Json sont des classes fortement types avec des proprits et champs publics qui sont convertis en un format srie (dans ce cas, XML/Json) pour le stockage ou le transport. Parce que XML ou Json sont des standards ouvert, les flux XML/Json peuvent tre traites par n'importe quelle application, quelle que soit la plate-forme. 2.6.3 Outils de Srialisation Il y a plusieurs outils qui permettent de faire la srialisation et la dsrialisation tel que des librairies intgr dans lIDE visual studio(Json.net ,ou des libraires tierces comme exemple le NewtonSoft . NewtonSoft NewtonSoft et un outil open source qui permet de faire de la srialisation et la d-srialisation comme les autres outils, mais il se distingue des autres par :

Srialiseur JSON Flexible pour la conversion entre les objets .NET et JSON LINQ to JSON pour lire et crire manuellement le JSON Haute performance, plus rapide que le srialiseur . NET intgr Ecrire retrait, facile lire JSON Convertit le JSON ou partir dun XML ()

42

On peut facilement intgrer la librairie Newtonsoft dans lide visual studio, en linstallant via le lien suivant (http://nuget.org/packages/newtonsoft.json) Et on faisant un appel rapide de la librairie dans lIDE

2.6.4 De-srialisation du flux Json Le flux qui contient les donnes dont on a besoin se trouve sur le rseau et il est srialis en Json https://vision.phoceis.com/webServices/getStats.ashx? . Ce lien tout seule ne permet de voir aucune donne ,il faut le complter et pour cela on prend le login que lutilisateur a saisi au dbut et le mot de passe qui lui correspond ainsi en ajoutant laction que lutilisateur veut appliquer ,et qui est la liste des applications dans ce cas Aprs la construction de lURL on obtient le rsultat suivant : https://vision.phoceis.com/webServices/getStats.ashx?login=admin@test.fr& mdp=123456&action=listapplications pour pouvoir d-srialiser ce flux de donnes par NewtonSoft il faut tout dabord le lire, et pour cela on va utiliser comme expliquer auparavant la mthode WebClient qui nous permet de faire appel une ressource http ,et plus prcisment dans le DownloadStringAsync :

43

A lintrieur du lien on trouve des donnes srialis en langage json de la sorte :

Ces donnes sont sous forme dun tableau, pour pouvoir les ds-srialiser, il faut dclarer des objets qui vont les recevoir. Pour cela on va crer deux objet de type String qui vont recevoir le nom et le appGuid sur le flux Json. On garde les mme noms pour ne pas faire de confusion. La Calsse ListApplication va les accueillir :

44

La d-srialisation va se faire par le biais de NewtonSoft : JsonConvert

Le listPicker et tout simplement une sorte dune liste droulante qui vas occuper nos donnes, exemple dun listpicker

Figure 19 :listpicker

2.6.5 Mthode dAffichage de donnes dans un Graph Pour pouvoir afficher des donnes dans un graph faut tout dabord les lire puis les extraire, les stocker et enfin les afficher. La lecture se fait de la mme faon quon a vu auparavant, cest--dire un flux de donnes sur un rseau srialiser en Json, donc on fait une d-srialisation normal du flux qui se prsente dans ce cas sous forme dun tableau de donnes label et value

45

Afin dafficher ces donnes sur un graph, il fallait trouver un graph open source permettant de faire cette action. Aprs beaucoup de recherche jai tomb sur le meilleur outil gratuit qui ma permis davoir le rsultat souhait. Cet outil sappelle Quick Charts de AmCharts.

Quick Charts de Amchart Amcharts est une librairie payante qui permet de crer et personnalis des charts des graphs (), cette librairie offre aussi des versions gratuites mais avec des limitations, loutil Quick Charts se prsente comme lun de ses fonctionnalits open source. Qhick Charts est: facile utiliser, rapide, et il est dun faible encombrement. Cest le petit frre de amCharts Bundle. Il a moins de fonctionnalits, mais se concentre sur ce qui est important pour la majorit des utilisateurs.

Principales caractristiques: Facilit d'utilisation : Le site de Amcharts offre une documentation avec des exemples qui facilite aux dveloppeurs la comprhension de lutilisation de loutil et leurs API est trs facile matriser. vitesse : Absence de fonctionnalits rarement utilises. Faible encombrement : La version actuelle fait seulement 54kb non compress, et en sous sa forme compress elle fait seulement 19kb! Ceci est particulirement important dans Silverlight, o tous les octets comptent. Prise en charge de types de graphiques essentiels : Quick Charts en charge les charts de ligne, colonne, espace et Pie.

46

Axes automatiques et grilles : les Charts de sries recalcule automatiquement et rorganise les axes et les rseaux bass sur les charts de tailles. Prise en charge de la liaison de donnes : Comme tout autre WPF, Silverlight et Windows phone contrles liables, les Quick charts peuvent tre lies nimporte quels donnes en implmentant l'interface IEnumberable. Le tactile et loptimisation des petits crans sur Windows Phone : La version Windows Phone est optimise pour la manipulation tactile et les petits crans des appareils tlphoniques. Gratuit, sans marque & Open Source :Quick Charts sont absolument gratuits. Il n'y a pas de lien dos de marque, ou quelque chose comme a. Et le code source est disponible sous trs permissive licence Ms-PL. Utilisation : Afin de pouvoir utilis loutil quick charts ,il faut tout dabord le tlcharger du site officiel de Amcharts http://wpf.amcharts.com/download#wp . Lajouter sur lIde visual studio ,et puis faire un appel la librairie via la page Xaml dans lespace dclaration des librairies :

Afin de pourvoir Afficher les donnes lu (d-srialiser) par newtonsoft ,il faut dclarer le graph quand va utiliser et faire un databinding sur les donnes. Code Xaml :

47

Pour notre cas jai choisi un graphe normal de type linaire comme sa dclaration lindique (SerialChart) , je lai nomm Chart1 jai fait un Binding des donnes comme source du graph, et enfin jai affect les Valeurs (value) sur laxe des Y sous sa dclaration (ValueMemberPath) et les (key) pour les axes des X sous dclaration (CategoryValueMemberPath). Extrait du code qui permet de faire laffectation des donnes au graph

2.7 Une partie du BackOffice MyAuchan Objectif : -Convertir des fichiers PDFs en images en diffrentes formats Le but Etant donn de la raret des outils de conversion de fichiers pdfs en images, et tant donn de la ncessit de cet outil pour pourvoir convertir des fichiers volumineux contentant les promotions du mois de Auchan en images en diffrentes formats (hd,normal ,full hd et miniature) ,je me suis trouv dans lobligation de crer une application me permettant de faire ce travail au lieu de se servir dune tierce application payante

48

2.7.1 schma de Conception

Figure 20 : Schma de conception de lapplication myAuchan back office

Le schma ci-dessus explique le fonctionnement de cette partie du Back Office Le concept est de pouvoir donn un fichier PDF comme lment dentr, ce fichier peut contenir plusieurs pages (60 pages comme exemple), et de fournir la sortie plusieurs images de diffrentes tailles (sd,mm,Hd, et FHD). Le problme ici se rsout sur lincapacit deffectuer ce travail uniquement avec les ressources que Visual Studio offre, donc pour rsoudre ce problme, il faut absolument utiliser une librairie tierce permettant de faire laffaire. Aprs plusieurs recherches sur internet, jai trouv que peu de ressources concernant ce sujet, et le peu de ressources qui se sont offert ma dipostion se sont prsentes comme des librairies payantes. Lune des peu de solutions proposs en open source se rsidait sur lutilisation dune librairie nomm GhostScript ,et qui marche plus particulirement par des lignes de commandes. Donc la seule solution ici et de construire une librairie qui permet dutiliser les ressources du GhostScript, en automatisant ses lignes de commandes.

49

2.7.2 Ghostscript : GPL Ghostscript est une suite logicielle permettant le traitement des formats de fichiers PostScript et PDF. C'est un logiciel libre distribu sous licence GNU GPL. (Wikipdia) Ghoscript fournit des librairies pour pouvoir utilis ses fonctionnalits le nom librairies et gsdll32.dll pour les ordinateurs ou serveurs sous 32 bits,et le gsdll64.dll pour les 64 bits. 2.7.3 Automatisation de lAPI de GhostScript Pour pouvoir effectuer cette conversion, il faut passer plusieurs commandes l'interprteur du Ghostscript. Il faut convertir une chane Unicode en une chane ANSI null pour Ghostscript. Le rsultat est stock dans un tableau d'octets. Les paramtres que nous allons fournir la bibliothque sont les mmes et dans le mme ordre que nous devrions donner la ligne de commande. Ainsi, en cas toute tentative de modification ou de dfaillance sur le projet, faut tre certain que le travail est fait partir dune ligne de commande. Pour une liste complte de tous les paramtres et leur signification, je vous suggre de visiter et bien lire et comprendre comment utilis GhostScript : http://web.mit.edu/ghostscript/www/Use.htm Grace un Monsieur sous le Pseudo Lord TaGoh sur CodeProject, dans son magnifique article http://www.codeproject.com/Articles/32274/How-ToConvert-PDF-to-Image-Using-Ghostscript-API , il a pu rendre le travail de lApi de GhostScript plus facile, en crant une librairie qui permet dautomatiser la conversion. Veuillez visiter le lien indiqu pour plus de dtails sur la cration de la librairie.

50

2.7.3 Utilisation de la librairie La librairie tait cr pour un projet en Ado.net (il permet la cration des applications clients lourd), dans notre cas lapplication va tre hberg sur un serveur (application en asp.net). Pour pouvoir l'utiliser sur une page ASP, on doit dfinir la proprit "ThrowException" true (grer les exceptions) et maintenant la bibliothque va lever juste une exception simple et non pas renvoyer un message sous forme de MessageBox comme sur un projet en Ado.net. Et enfin pour un projet Asp il faut aussi ajouter une rfrence vers la librairie cre et qui est sous le nom PDFToImage.dll ainsi que pour le gs32dll.dll pour les machines en 32 bits ou gs46dll.dll pour les machines en 64 bits dans le rpertoire Bin de la solution. 2.8 MyAuchan test Front Office : Objectif : Ralisation dune application permettant la dmatrialisation de lintgralit des catalogues de promotions Consultation et slection des offres disponibles en fonction des magasins de rfrence. But : Le but de la cration de cette application et de faciliter aux consommateurs du magasin Auchan connaitre toutes les promotions du mois du magasin qui leurs corresponds

51

2.8.1 Schma de Conception

Figure 21 : schma de conception de lapplication myAuchan front office

Le schma ci-dessus explique le fonctionnement de lapplication MyAuchan test sous WP7 Lapplication se compose dune page principale dfilant tous les magasins dAuchan France. Lorsquun utilisateur choisi un magasin quelconque, cela lui renvoie vers une autre page qui contient tous les catalogues contenant les rductions du mois, lorsquil choisit ensuite un catalogue spcifique , il accde son contenu et aprs il peut feuilleter toute les images quil contient sous dfrents formats, , ainsi quil peut choisir une photo et lagrandir en faisant un zoom sur lcran. Pour comprendre le fonctionnement de cette application, il faut apprendre comment on fait pour afficher des donnes sur un cran.

52

2.8.2 Mthode daffichage de donnes sur lcran (images et donnes) : Tout au long de lanalyse de ma mmoire jai parl plusieurs fois sur un composant nomm ListBox ainsi quune fonctionnalit Databinding, dans cette partie je vais dtailler le fonctionnement dune listbox, car dans lutilisation de cette application il est primordial de connaitre son utilit. Je dirai mme que toute cette application se base sur la comprhension et lutilisation de la listbox et le databinding (liaison de donnes : expliqu en dtail dans la partie 1) , car toutes les pages utilisent que ces deux fonctionnalits et qui sont lies entre eux. Listbox : Une zone de liste (ou list box ou listbox) est un widget qui permet l'utilisateur de slectionner un ou plusieurs lments d'une liste statique. L'utilisateur doit cliquer dans la liste sur un lment pour le slectionner. Cliquer sur un lment de liste dj slectionn le dslectionne.(wikipedia) Pour pouvoir crer une listbox il suffit de faire un glisser puis dposer du contrle listbox de la boite outil, ou bien de le crer manuellement en langage Xaml :

Databinding avec listbox : LAffichage d'une collection d'lments dans une liste est une tche commune sur le tlphone. Pour afficher une collection d'lments dans une liste en utilisant la liaison de donnes, on doit gnralement effectuer les oprations suivantes: -Ajouter une listBox notre application - Spcifiez la source de donnes du contrle ListBox en faisant une liaison de la collection la proprit ItemsSource

53

-Pour personnaliser l'apparence de chaque lment de la ListBox, ajouter un modle de donnes (data template) la ListBox . -Dans le modle de donnes, lier les lments de la ListBox aux proprits d'une collection dobjets (Collection item). Le code Xaml suivant montre appliquer le binding sur des images

Sur litem source de la listbox on fait un Binding, et dans le dataTemplate on spcifie nos lments dans ce cas cest une image. 2.8.3 Mthode de Zoom sur lcran Le zoom sur un cran est lune de ces choses qui a l'air incroyablement simple jusqu' ce quon essaye de la mettre en uvre. ce moment-l on se rend compte qu'il cache un certain nombre de subtilits qui font qu'il est difficile de bien faire les choses. Comment bien le faire : Le principe et de choisir deux points de l'image (par exemple deux yeux) et faire un zoom avec les doigts sur eux. Si la fin du zoom les deux points sont encore sous vos doigts vous lavez bien ralis, sinon vous vous trompez.

54

Le comportement multitouches Laurent Bugnion, Davide Zordan et David Kelly sont les hommes derrire le comportement Multitouche pour Silverlight et WPF. Il s'agit d'un projet open source impressionnant que vous devriez le vrifier. En plus de pincer-zoom a vous donne la possibilit de faire de la rotation, l'inertie, le mode debug et bien plus encore. Il est extrmement facile de travailler avec, on a besoin juste de quelques lignes de code XAML. Le Xaml C'est le XAML que jai utilis. Pour pouvoir utiliser la fonctionnalit de zoom il faut installer la bote outils (toolkit) et ajoutez une rfrence Microsoft.Phone.Controls.Toolkit dans le projet.

Lexplication de la partie code qui gre le zoom-in : Sur la figure qui contient le code suivant : la mthode GestureListner_PichStarted permet : Stocker l'angle de rotation initiale et mise l'chelle ainsi que calculer le centre pour le zoom-in.

55

Dans la mthode OnpichedDelta de la figure suivante on va mettre en place certaines conditions pour lutilisation des zoom-in et appliqus certaines mthodes: La premire condition sapplique que si la taille actuelle est plus petite que la taille dorigine ou bien plus grande de 4 fois sa taille, dans ce cas on napplique pas de zoom. La deuxime condition sapplique si la taille de limage est gale la taille d'origine dans ce cas on la centre. La troisime condition et sur la mise jour de la rotation et l'chelle , lorsquon est en mode paysage il faut zoomer rapidement, sinon il parait un peu agite.

56

Dans la mthode Image_drageDelta suivante, il faut mettre en point la condition suivante : (si lcran nest pas toucher ou si l'chelle est diffrente de 1, alors on ne permet pas le dplacement). Et la vrification suivante : vrifier les limites de limage ne pas lautoriser sortir de la zone.

57

Avec ces mthode on aura pu intgrer le zoom-in sur une image avec succs ,et je mentionne que cette mthode reste valable toute sorte de projet sous Windows Phone 7. CHAPITRE 3 : RESULTATS Dans cette partie je vais illustrer les solutions proposes et appliques sur le chapitre prcdent, donc il ny aura pas une prsentation de la totalit des applications pour tre plus clair. je vais organiser cette partie comme la partie du chapitre prcdent, en la dcortiquant en 4 parties, chaque partie porte sur chacune des applications (Phoceis,Vision,MyAuchan Back office, et MyAuchan Front office)

58

3.1 Prsentation des rsultats sur lapplication Phoceis : Ecran d'accueil : Prsentation de l'ensemble de l'application avec des liens rapides vers certaines fonctionnalits. Animation avec prsentation de certains savoirf aire Phoceis Ecran de prsentation des clients: Prsentation de l'ensemble des clients et des applications pour ces clients Permet de lancer le dtail d'une application Ecran de dtail d'une application: Prsentation brve de l'application Prsentation de capture d'cran de l'application Indique sur quelle plate-forme est dveloppe l'application Propose un lien vers la page Market place de l'application si cette dernire est disponible sur la plate-forme Windows phone Ecran de prsentation des solutions: Prsentation de l'ensemble des solutions proposes par l'entreprise Permet de lancer le dtail d'une solution Ecran de dtail d'une solution : prsentation brve de la solution propose par l'entreprise si cette solution est Vision, permet de lancer l'cran d'explication du test de Vision cran de contact de l'entreprise : Permet de lancer l'itinraire sur google maps ou navigation jusqu' Phoceis Permet d'appeler Phoceis Permet de lancer hotmail yahoo ou gmail pour crire un mail Phoceis Permet de rejoindre la page Facebook de Phoceis Permet de rejoindre la timeline Twitter de Phoceis Ecran de prsentation de l'entreprise : Description de Phoceis -Ecran fil dactualits : -Permet de voir les posts twitter de lentreprise
59

3.1.1 Ecran daccueil : Grce lutilisation de la page en mode paysage de WP7, et la cration des designs de mon propre fruit dinspiration, jai pu obtenir un cran daccueil attractif en gardant la mme ergonomie des applications sous WindowsPhone7

Figure 22 :Ecran daccueil Phoceis

60

3.1.2 Les crans du contenu : Aprs la mise en place du pivot qui contient les diffrentes pages du contenu telles que (Solutions, Agence, Fil dactualit, Clients), jai pu avoir le rsultat suivant :

Figure 23 :Contrle pivot contenant le contenu des pages

61

3.1.3 Fil dactualits : Grce lutilisation de lAPI de Twitter, et en faisant la liaison de donnes entre leurs Flux de donnes sous Xml jai pu avoir le rsultat suivant : une page dynamique attractive qui prsente le flux des messages qui se passe twitter en temps rel .

Figure 24 : page fil dactualits

62

3.1.4 Autres pages : Lapplication Phoceis ma permis dutiliser plusieurs fonctionnalits que WP7 offre, Parmi ces pages, il y la page map qui permet de situer lentreprise sur une map, lutilisation des des maps sur WP7 est fourni par Bing maps, et ce composant peut tre intgrer facilement par un simple glisser dposer de la boite outils, et quelques lignes de code pour se positionner sur la carte grce ses coordonnes gographiques.

Figure 25 :page map

63

3.2 Prsentations des rsultats sur lapplication Vision Test Cette partie va montrer les rsultats obtenus lors de la d-srialisation des donnes ainsi que laffichage des donnes sur le QuickCharts de Amcharts. 3.2.1 Affichage des donnes du flux Json sur une ListPicker Aprs d-srialisation du flux de donnes Json avec newtonsoft ,jai fait un databinding sur une listpicker et on obtient le rsultat suivant :

Figure 26 :affichage du flux json dans la listpicker

64

3.2.2 Affichage de donnes sur le Quick Charts Aprs d-srialisation du flux de donnes Json avec newtonsoft, on applique la mme mthode de databinding mais dans ce cas sur le Graph Quickcharts de AM charts et on obtient le rsultat suivant :

Figure 27 : page de paraphe

3.3 Prsentation des rsultats de la partie BackOffice de MyAuchan Dans cette partie je vais illustrer le rsultat obtenu grce lutilisation de lAPI de GhostScript et la librairie qui a permis de lautomatiser Comme expliqu prcdemment sur le schma de conception de lapplication : On a un fichier de type pdf en entr et en sortie plusieurs dossier contenant la conversion du fichier pdf en plusieurs images en diffrentes formats

65

-le schma suivant explique en dtails le fonctionnement de ce back office On a un fichier Pdf en entr, lorsquon appui sur le bouton convertir ,une mthode entre en jeux et prends le nom du fichier Pdf et cre un dossier dont le mme nom du fichier afin de faciliter la recherche du dossier par la suite, lintrieur de ce dossier, quatre autres dossiers se crent fd, hd, sd, mm pour les formats full hd , Hd ,normal et miniature.

66

Figure 28 : Rsultat dune partie du back Office MyAuchan

67

3.4 Prsentations des rsultats de lapplication MyAuchan test Front OfficeCette partie va traiter le rsultat obtenu de lutilisation des listbox avec la liaison de donnes (databinding) 3.4.1 Les rsultats de lutilisation de la listbox avec du databing -Le premier cran gauche prsente la liste des magasins Auchan -Le deuxime cran en bas prsente tout le catalogue -Le troisime cran droite prsente le contenu du catalogue

68

Figure 29 : Rsultat de donnes afficher sur une listbox

3.4.2 Le rsultat de lutilisation de la mthode zoom-in : Lorsquon choisit une image quelconque, cela nous renvoie vers une page qui permet dafficher cette dernire en plein cran ainsi quon peut faire un zoom sur limage en pinant sur lcran du Smartphone avec les doigts

Figure 30 : la page Zoom-in

69

CHAPITRE 4 : CONCLUSION ET PERSPECTIVES :

4.1 Conclusion Nous somme dans la naissance du systme Windows Phone ,malgr son retard dintgration dans le march des Smartphones, avec sa simplicit dutilisation ,son design attractive, et ses diffrentes fonctionnalits il va russir attirer plus de consommateurs ,et surtout avec la nouvelle signature de la grand Firme Nokia avec Windows Phone, on verra bientt une grande augmentation de sa russite ,et peu peu se bien positionn sur le march et pourquoi ne pas devenir le leader dans les prochaines 10 ans . Grce ce grand pas de lentreprise vers le monde de Windows Phone, cela va permettre Phoceis datteindre les utilisateurs des Smartphone sous ce systme, et qui ne cessent daugmenter de jour en jour. 4.2 Perspectives Malgr le succs des applications, il me reste encore des problmes rsoudre, et des fonctionnalits ajouter ,comme par exemple cre une librairie qui permet dajouter une nouvelle fonctionnalit une listbox qui lui permet de dfiler les images les unes aprs les autres ,et en marquant un point darrt chaque fois une image passe, ainsi que dajouter une fonctionnalit sur tri des magasins pour lapplication MyAuchan par le magasin le plus proche, une fonctionnalit qui va permettre de calculer la position de lutilisateur.A lavenir si je continue sur ces projets ,je complterai mes applications et je crerai de nouvelles librairies.

70

RFRENCES

IOS : Iphone Os (systme dexploitation mobile dvelopp par Apple) ANDROID : Un systme dexploitation open source utilisant le noyau de linux BackOffice : est une partie d'un site web ou d'un systme informatique, elle concerne la partie qui permet l'organisation et la mise en charge d'un systme informatique de l'administrer et de le grer. Front Office : cest linterface que le client aperoit tel que linterface dun site web par exemple, ou bien linterface du mobile . PDA : Personal digital assistant CTP : Community Technology Preview indique que les outils sont en prversion) IDE : Integrated development environment SDK : Software development kit URI : Uniform Resource Identifier, identificateurs de ressource Web ECMAScript : est un langage de programmation de type script standardis par Ecma International Quelques liens daides et sources : (Source : Wikipedia fournit une explication dtaille sur Windows Phone : http://fr.wikipedia.org/wiki/Windows_Phone) Sliverlight toolkit : http://silverlight.codeplex.com/ Microsoft sliverlight : http://en.wikipedia.org/wiki/Microsoft_Silverlight Twitter Rest API http://www.ibm.com/developerworks/xml/library/xtwitterREST/
71

Une explication dtaill est donne sur la section MSDN de Microsoft : http://msdn.microsoft.com/enus/library/cc278072%28v=vs.95%29.aspx) ASP.NET: http://fr.wikipedia.org/wiki/ASP.NET DataBing : http://msdn.microsoft.com/enus/library/windowsphone/develop/gg680271%28v=pandp.11%29.aspx Expression blend (Source : http://blogs.msdn.com/b/synergist/archive/2010/03/29/new-york-timessilverlight-kit-updated-for-windows-phone-7-series.aspx Json : http://fr.wikipedia.org/wiki/JavaScript_Object_Notation ListBox : http://en.wikipedia.org/wiki/List_box Amcharts http://wpf.amcharts.com/download#wp . Article sur la librairie ghostscript: http://www.codeproject.com/Articles/32274/How-To-Convert-PDF-to-ImageUsing-Ghostscript-API Xaml (une partie de : http://fr.wikipedia.org/wiki/XAML) Xml (une partie de http://fr.wikipedia.org/wiki/Extensible_Markup_Language)

72