Rapport de stage. Titre : Aide à la conception d interfaces et déploiement d un site d administration de tables SQL Stagiaire : Julien LE GALL

Transcription

1 Titre : et déploiement d un site d administration de tables SQL Stagiaire : Julien LE GALL Version Confidentiel

2 Table des matières 1 Introduction Contexte d entreprise Nexity Gestion de projet Outil d aide à la conception d interfaces Contexte et besoins Les solutions apportées Analyse Bibliothèque SIGEO Bibliothèque zoning application mobile Zoom sur la technique Site web d administration de tables SQL Contexte et besoins Les solutions apportées Zoom sur la technique Conclusion Glossaire Netographie Annexes Annexe 1 : Exemples d interface de la bibliothèque SIGEO Annexe 2 : Exemples d interface de la biliothèque zoning /04/2014 Confidentiel Page 2 de 36

3 Remerciements Je tiens à remercier dans un premier temps, toute l équipe pédagogique de l UFR ST et les intervenants professionnels responsables de la formation LP SIL CDOAM pour avoir assuré la partie théorique de celle-ci. Je tiens à remercier tout particulièrement et à témoigner toute ma reconnaissance aux personnes suivantes, pour l expérience enrichissante et pleine d intérêt qu elles m ont fait vivre durant ces 15 semaines au sein de l entreprise Nexity : Madame RAMASSO, chef de l équipe métier, ma tutrice, pour m avoir intégré rapidement au sein de l entreprise et m avoir accordé toute sa confiance, pour le temps qu elle m a consacré tout au long de cette période, sachant répondre à toutes mes questions, sans oublier sa participation au cheminement de ce rapport Monsieur ROCCATI, chef de l équipe développement, pour m avoir intégré à l équipe de développement Les équipe métier et de développement pour le temps qu ils m ont consacrés et la grande aide qu ils m ont apportés 30/04/2014 Confidentiel Page 3 de 36

4 1 Introduction Nexity Lamy m a accueilli au sein du Département des Systèmes d Information de la DSI dans le cadre de mon stage de fin d étude dans les locaux de Besançon. Les projets qui m ont été confiés sont la conception d une bibliothèque permettant d offrir une aide à la conception d interfaces et la réalisation d une application permettant le paramétrage de tables d une base de données Le projet d aide à la conception d interfaces consiste à créer une bibliothèque propre au logiciel SIGEO et utilisable à partir de PENCIL. Ce projet doit permettre à l équipe Etudes d accélérer le processus de création d interfaces, d obtenir un rendu plus représentatif des besoins utilisateurs ainsi que d uniformiser les méthodes de conception. Actuellement, les interfaces du logiciel SIGEO sont conçues à partir de logiciels non adaptés tels que Paint ou photoshop. De ce fait, le projet apporte une réponse concrète aux besoins de conception. Le projet d administration de tables SQL consiste à développer une application web MVC en asp.net qui doit permettre de gérer les valeurs contenu dans les différentes tables d une base de données. Cette demande s intègre dans un projet de développement d une application mobile interne à Nexity où de nombreuses valeurs de références sont employées. Dans ce rapport, je présenterai l entreprise Nexity. Je passerais après à la présentation de mes projets, à l étude des logiciels, aux phases de développement. Je terminerais enfin par une conclusion sur le plan technique ainsi que sur le plan personnel. 30/04/2014 Confidentiel Page 4 de 36

5 2 Contexte d entreprise 2.1 Nexity Nexity est une société immobilière française créée en Son PDG est Alain Dinin et son directeur général délégué Hervé Denize Nexity est le premier opérateur intégré des métiers de l immobilier en France, compte actuellement 3 type des clients et 6 lignes de métiers. Voici une liste de chiffre clé de la société Nexity, qui reflète sa grande envergure 200 millions d euros de résultat opérationnel millions d euros de carnet de commandes soit 16 mois d activité de promotion m² de maîtrise foncière et droits à construire réservations nettes de logements neufs et de terrains à bâtir lots résidentiels gérés 11,6 millions de m² d immobilier d entreprise gérés agences immobilières en réseaux collaborateurs 30/04/2014 Confidentiel Page 5 de 36

6 Le chiffre d affaire de la société est, pour l année 2012, de millions d euros et se répartit de la manière suivante : Chiffre d'affaires en m Immobilier d'entreprise Services & réseaux Immobilier résidentiel Autres La Direction des systèmes d informations, pour laquelle j effectue mon stage, fait partie de la DOSI. La Direction des Organisations et Systèmes d Informations (DOSI) a comme mission de base d assurer la qualité et la continuité du service informatique en support à l ensemble des entités du Groupe. Elle doit également organiser et faciliter la transformation en mettant à disposition des outils et expertises méthodologiques et en accompagnat la sélection et le suivi des projets d évolution, dans le respect des capacités disponibles et de la stratégie du Groupe. Enfin, elle doit anticiper les évolutions technologiques pour que Nexity puisse en tirer le meilleur parti au service des clients. 30/04/2014 Confidentiel Page 6 de 36

7 2.2 Gestion de projet Ce stage m a permis de travailler sur différents métier au sein de l entreprise. J ai commencé par une partie d étude et de formation sur les différents logiciels à utiliser, puis à la phase de conception avec l équipe Etudes qui correspond à mon premier projet et enfin une phase de développement que j ai pu découvrir en réalisant une application web. Mars Avril Mai Juin Juillet Etude Outil d aide de conception d interfaces - Formation SIGEO - Formation plateforme -Formation sécurité lié aux projets informatiques Site web d administration de tables SQL CDD Mon stage s est découpé en 3 grandes parties : La phase d étude o Etude du logiciel SIGEO o Etude du logiciel PENCIL o Etude du wiki de PENCIL La phase de conception o Réalisation de l outil d aide à la conception d interfaces La phase de développement o Création d un site web d administration de tables SQL 30/04/2014 Confidentiel Page 7 de 36

8 3 Outil d aide à la conception d interfaces 3.1 Contexte et besoins L équipe Etudes SIP de Nexity souhaite utiliser Pencil comme outil d aide à la conception d interfaces en vue de la spécification de projet. Dans ce contexte, le travail qui m a été demandé a pour but d enrichir l outil d une bibliothèque spécifique à la conception d interfaces du logiciel interne SIGEO. La bibliothèque devra permettre, grâce à Pencil, de générer des images permettant de simuler le rendu des interfaces à développer. Pencil est un logiciel de création de maquettes typographiques libre et gratuit développé par Evolus. Il permet de créer des diagrammes et des maquettes d interface graphique de logiciels. Il est disponible en tant qu extension pour le navigateur Firefox ou en version indépendante. Le logiciel possède plusieurs barres d outils permettant de dessiner, colorier, découper des formes sur la page de dessin. Le logiciel possède aussi des outils de syntaxe pour modifier la police, sa couleur Pencil permet d exporter des projets dans différents types de formats. On peut exporter un dessin comme un ensemble de fichiers PNG pixellisées ou comme une page Web. Pencil prend également en charge l'exportation de documents dans des formats populaires, y compris OpenOffice / LibreOffice documents texte, Inkscape SVG et Adobe PDF. Le principe de fonctionnement du logiciel est assez proche de la technique d impression au pochoir. Grâce à Pencil, on a la possibilité de créer des pochoirs qui sont appelés Stencils dans le logiciel, et qui permettent de dessiner des formes sur la page de dessin. Pour chaque Stencil, on a la possibilité de passer en paramètres des valeurs pour pouvoir modifier les propriétés des formes. SIGEO est un outil qui est développé en interne chez Nexity et qui est utilisé dans toutes les agences Nexity de France. Ce logiciel permet de gérer tous les métiers qui sont présents chez Nexity: Le métier de Gérance Le métier de Syndic Le métier de Transaction Vente Le métier de Transaction Location Le métier de Résidences services Jusqu à présent, les interfaces du logiciel SIGEO sont conçues à la main par les membres de l équipe métier à l aide de logiciel qui ne sont à la base, pas adaptés à la conception d interfaces comme Paint, ou photoshop. Il en découle de nombreux inconvénients tels que la vitesse très lente de conception des interfaces, des résultats qui ne correspondent pas nécessairement au interfaces voulues, une conception qui n est pas uniformisée... D où la nécessité du développement d un outil commun de conception d interfaces. La première étape de mon projet a été l analyse de l outil Pencil. Le but étant de savoir si le logiciel avait les capacités de répondre au cahier des charges. Suite à cette analyse et à plusieurs phases de tests, il a été décidé après une première réunion que ce logiciel était apte. 30/04/2014 Confidentiel Page 8 de 36

9 3.2 Les solutions apportées Analyse Pour réaliser ce projet, j ai commencé par chercher différentes documentations sur le logiciel Pencil, car je n avais auparavant jamais entendu parler de ce logiciel. La seule documentation que j ai trouvée pertinente et informative est celle se trouvant sur le site du groupe qui a développé le logiciel. La phase d analyse de cette documentation m a permis de comprendre le fonctionnement du logiciel, son interface et la création de bibliothèques Suite à cette phase d analyse, je me suis auto-formé sur la création et le développement de bibliothèques. Pour cela, j ai suivi le tutoriel développeur disponible sur le site de Pencil project. Celui-ci présente les fonctions de base pour la création de stencils. J ai notamment pu voir : Comment créer une bibliothèque et quelle architecture je devais donner à mes documents pour qu ils soient compilables avec le logiciel ; Comment créer des stencils sur des formes basiques (triangles, carrés ) ; Comment modifier le comportement des objets ; Comment ajouter des actions pour un objet (quelles interactions un utilisateur peut avoir sur une forme) ; Cette première phase de «conception test» a été nécessaire dans le sens où celle-ci m a permis de me familiariser avec le logiciel et de mieux comprendre le fonctionnement de la création de bibliothèques Bibliothèque SIGEO Suite à la phase d analyse, j ai développé la première bibliothèque SIGEO. SIGEO étant un logiciel assez vaste, j ai commencé par faire une sélection des interfaces que ma bibliothèque devra être capable de reproduire, j ai donc parcouru toutes les pages de SIGEO à la recherche des éléments clés. Je me suis donc moi-même créé un petit cahier des charges avec tous les éléments que j ai trouvé. L interface de SIGEO fonctionne avec un grand nombre de pages de recherches, et de résultats. Les éléments important de ces interfaces sont pour les pages de recherches tout ce qui va correspondre au passage de données tels que les champs textes, les labels, les listes déroulantes Pour les pages de résultats, on a d une part les tableaux qui permettent de faire un listing de toutes les entités trouvés en fonction de la recherche, et d autre part, les panneaux munis d onglet pour pouvoir consulter un résultat spécifique. Après avoir répertorié tous les éléments à intégrer, j ai commencé à développer ma première bibliothèque. J ai débuter par la création des éléments les plus simples à mettre en œuvre comme les champs de textes, puis je suis progressivement passé à des éléments plus compliqué comme les tableaux. 30/04/2014 Confidentiel Page 9 de 36

10 Après avoir réalisé la première version de la bibliothèque, une réunion a été organisée avec l équipe MOA dans le but de présenter l avancement du projet, mais aussi de récolter les besoins de tous les membres de l équipe pour être sûr que les éléments crées correspondent bien à leurs attentes. Suite à cette première réunion, plusieurs éléments importants en sont ressortis : L équipe était assez impressionné de voir les possibilités qu offre le logiciel Ils ont aimés le fait que les interfaces créées avec Pencil soit quasi similaire à SIGEO Des demandes d améliorations ou de corrections ont été faites. Beaucoup d icônes ou d images manquaient dans ma bibliothèque, il m a donc été demandé de les ajouter Pendant la réunion, chacun des membres de l équipe a pris la parole pour ajouter des éléments de l interface SIGEO sur lesquels ils sont amenés à travailler dans le but de les intégrer à ma bibliothèque. Suite à cette réunion, je suis donc reparti en phase de développement avec un nouveau cahier des charges. Cette phase a été la plus longue au cours de mon développement, car les demandes qui m ont été faites lors de la réunion m ont souvent demandés beaucoup de recherche. Lorsque j ai annoncé la fin du développement de la bibliothèque SIGEO, j ai fait une réunion avec ma responsable de stage pour pouvoir mettre à disposition mon travail à l équipe MOA afin qu ils puissent tester le logiciel, et me faire remonter d éventuels bugs ou améliorations, et aussi pour me donner une mission sur laquelle je pourrais utiliser ma bibliothèque pour répondre à une demande d amélioration sur SIGEO. Cette demande avait pour but de modifier une des interfaces de SIGEO qui concerne la partie des fournisseurs. Lors de la demande, la recherche ou la création de fournisseurs marchait sur un système par désignation, avec le nom du fournisseur et son code établissement, qui est pour la France le code SIREN. Le problème est que ce code n est pas forcément un code SIREN si le fournisseur est à l étranger. La modification que j ai dû faire sur cette interface s est traduit par l ajout d une liste déroulante de sélection de pays, et en fonction du pays choisi, affiché le code établissement associé. FIGURE 1 : PAGE FOURNISSEUR CREER SUR PENCIL Une fois que j ai eu terminé de concevoir ces pages, j ai exporté mon résultat aux formats PNG et PDF, que j ai ensuite envoyé à ma responsable de stage et qui les a transmis à l équipe de développement pour que ces changements soient pris en compte lors de la prochaine mise en production. 30/04/2014 Confidentiel Page 10 de 36

11 FIGURE 2 : EXEMPLE DE PAGE CREEE AVEC PENCIL Voici un exemple de rendu d une interface de SIGEO. D autres captures d écran peuvent être visionées en annexe Bibliothèque zoning application mobile Après avoir terminé cette première phase de développement, je suis passé à l élaboration d une bibliothèque pour l application mobile Triforce dans le but de réaliser des zoning. Le projet Triforce est une application mobile développé par Nexity qui doit permettre au négociant de la transaction vente d obtenir plus rapidement la signature d un mandat, si possible exclusif, d un bien mis en vente. Pour cela, le projet Triforce consiste à réunir les 3 domaines CRM, SIGEO et le CRC au sein d une application tactile installée sur une tablette Windows 8. Le zoning est un schéma rudimentaire des pages clés d'un site internet et de leurs zones principales : menus, logo, textes, moteur de recherche,... Lors de la conception d'un site internet, il projette «sur papier» le gabarit d'une page, et oblige à bien lister les éléments qu'elle contient. Le zoning 30/04/2014 Confidentiel Page 11 de 36

12 permet, d'une part, de mettre les parties prenantes d'accord sur l'approche d'un projet (entre client et prestataire, entre collaborateurs), et d'autre part de passer la main au webdesigner qui prendra le relais sans se soucier des aspects fonctionnels. La bibliothèque Triforce sera elle aussi utilisé par l équipe MOA dans le but de concevoir des interfaces de l application mobile, et aussi pour réaliser des zonings. Le cahier des charges qui a été mis à ma disposition est un PDF représentant les maquettes de l application. J ai aussi eu la possibilité de tester directement l application Triforce sur une tablette Microsoft Surface, ce qui a été très pratique pour bien identifier les différents éléments de l interface. J ai suivi le même procédé pour établir une liste des éléments à créer dans cette bibliothèque que pour la bibliothèque SIGEO. Cette phase a été d une durée moins longue que la précédente, car l application possède beaucoup moins d éléments spécifiques que le logiciel SIGEO. Grâce à la bibliothèque que j avais précédemment réalisée, j ai acquis une certaine expérience dans la conception des collections et j ai donc pu concevoir cette seconde bibliothèque dans des délais assez court. La conception des interfaces Triforce a des éléments en commun avec celle de SIGEO sur tout ce qui est insertion de données (label, champs texte, ) en revanche l affichage des résultats n est pas géré du tout de la même manière que SIGEO, puisqu on utilise ici le système de tuiles de Windows 8 qui est beaucoup plus pratique à utiliser sur une tablette. FIGURE 3 : EXEMPLE DE TUILE WINDOWS 8 Un des grands changements de cette bibliothèque vis-à-vis de la précédente est l utilisation d un thème pur Windows. Il faut ici reproduire des interfaces avec exactement la même apparence qu une application que l on pourrait actuellement voir en téléchargement pour Windows 8. Je suis ensuite passé à la phase de développement pour concevoir tous les éléments d interface que j avais répertorié dans le cahier des charges. Suite à cela, une réunion a été organisée pour voir l état d avancement de la conception de la bibliothèque Triforce et voir s il manquait des éléments ou si des améliorations étaient nécessaires. 30/04/2014 Confidentiel Page 12 de 36

13 Pour terminer le développement de cette seconde bibliothèque, j ai mis en place les différentes améliorations que l on m avait demandé, notamment sur la gestion des champs remplis et sur la liaison de plusieurs éléments (label + champs texte, label + liste déroulante ) FIGURE 4 : EXEMPLE PAGE TRIFORCE AVEC PENCIL Voici un exemple de rendu d une interface du zoning. D autres captures d écran peuvent être visionées en annexe 2 30/04/2014 Confidentiel Page 13 de 36

14 3.3 Zoom sur la technique Je vais dans cette partie de mon rapport apporter des éléments techniques sur des phases de mon projet qui ont été pour moi les plus complexes à réaliser. Je ne peux apporter ces détails sur toutes les parties de l interface que j ai créée car je ne respecterais pas le nombre de pages à fournir. J ai choisi ces éléments, car ils comportent la technique la plus avancé du projet sur cette partie. Le Tableau : Le tableau est un élément très important sur SIGEO, car la plupart des résultats de requêtes sont affichés par le biais de cet élément. Les plus gros tableaux peuvent compter jusqu à 17 colonnes. FIGURE 5 : PROPRIETES DE DEFINITION On retrouve ici le premier groupe de propriétés qui correspond à la définition de l élément, ainsi que ces dimensions initiales. Le tableau est de type box de taille 900 par 500. On peut aussi voir les propriétés «usehtmlcontent» et «fixedheaderheight» respectivement à false et true. La propriété «padding» va gérer les marges sur le tableau et la propriété «headerheight» fixe les dimensions du header du tableau avec les paramètres qui lui sont passés. FIGURE 6 : PROPRIETES COLONNES Le 2eme groupe de propriétés correspond à la définition des différentes colonnes du tableau ainsi que leurs dimensions. Dans le cas du projet SIGEO, j ai initialisé 17 colonnes, car c est le nombre maximum de colonne des tableaux existant sur SIGEO. FIGURE 7 : PROPRIETES DE COLORATION Pour terminer avec les propriétés, on trouve les propriétés de coloration, de syntaxe, de bordure Ci-dessus, on aperçoit une des propriétés de groupe qui correspond à la couleur de fond et à la couleur du texte. 30/04/2014 Confidentiel Page 14 de 36

15 Suite à l initialisation des propriétés de notre élément, on passe à la définition des comportements.. Avec les comportements ; les attributs et le contenu de la cible peuvent être modifiés en fonction des valeurs d entrées fournit aux comportements. L objet cible peut être un objet SVG ou HTML mais il doit être situé dans la partie <Content> de notre élément. FIGURE 8 : COMPORTEMENT Ci-dessus, on retrouve un exemple de définition d un comportement, avec comme balise <Attr> et <CustomStyle>. Ces comportements sont tous les deux utilisés pour affecter une valeur à un attribut de l objet cible. La balise <Attr> pour des attributs XML et la balise <CustomStyle> pour des attributs SVG et HTML. FIGURE 9 : DOM CONTENT On retrouve ensuite la partie la plus importante de la définition de l objet tableau : Le DOMContent. La balise DOMContent est une structure dynamique d élément. Le DOMContent permet de modifier dynamiquement le contenu DOM d un élément. En plus de fournir ce comportement, Pencil propose également des fonctions pour rapidement construire des nœuds DOM et des éléments provenant de la spécification défini comme des objets JavaScript. Dans la capture d écran ci-dessus, on trouve une partie de code qui va vérifier si le contenu passé correspond à l expression régulière, si c est le cas, alors on affichera un élément de type checkbox, sinon rien. 30/04/2014 Confidentiel Page 15 de 36

16 FIGURE 10 : COMPORTEMENT Suite à l initialisation des propriétés de notre élément, on passe à la définition des comportements. Pencil fournit le concept de comportements. Avec les comportements ; les attributs et le contenu de la cible peuvent être modifiés en fonction des valeurs d entrées fournit aux comportements. L objet cible peut être un objet SVG ou HTML mais il doit être situé dans la partie <Content> de notre élément. Ci-dessus, on retrouve un exemple de définition d un comportement, avec comme balise <Attr> et <CustomStyle>. Ces comportements sont tous les deux utilisés pour affecter une valeur à un attribut de l objet cible. La balise <Attr> pour des attributs XML et la balise <CustomStyle> pour des attributs SVG et HTML. Dans notre exemple on affecte : FIGURE 11 : DOM CONTENT On retrouve ensuite la partie la plus importante de la définition de l objet tableau : Le DOMContent. La balise DOMContent est une structure dynamique d élément. Le DOMContent permet de modifier dynamiquement le contenu DOM d un élément. En plus de fournir ce comportement, Pencil propose également des fonctions pour rapidement construire des nœuds DOM et des éléments provenant de la spécification défini comme des objets JavaScript. Dans la capture d écran ci-dessus, on trouve une partie de code qui va vérifier si le contenu passé correspond à l expression régulière, si c est le cas, alors on affichera un élément de type checkbox, sinon rien. 30/04/2014 Confidentiel Page 16 de 36

17 Liaison de 2 éléments : La liaison de 2 éléments est une amélioration qui m a été demandé lors des réunions. En effet, la plupart des champs de saisi sur SIGEO sont accompagnés d un label. Sur certaines pages de SIGEO, on peut trouver une trentaine de cas comme celui-ci. Cette amélioration a été pour moi le plus compliqué à mettre en œuvre, non pas pour la difficulté, mais pour trouver la bonne syntaxe et le bon paramétrage. FIGURE 12 : PROPRIETES BOX Pour la réalisation de cette amélioration, j ai commencé par créer 2 éléments box qui correspondent respectivement au textbox et au label. C est à partir de la définition de ces éléments que je vais pouvoir intégrer du texte, définir des comportements FIGURE 13 : COMPORTEMENT LIAISON Dans la partie comportement, on retrouve les 2 éléments qui ont été défini précédemment. On peut remarquer que les comportements liés à chacun des objets sont bien distincts, chacun d entre possède des propriétés différentes. Si j avais utilisé les mêmes paramètres, les objets textbox et label ne pourraient pas avoir de texte différent, auraient toujours exactement la même taille, et 30/04/2014 Confidentiel Page 17 de 36

18 seraient collés l un sur l autre. FIGURE 14 : PROPRIETES ELEMENT Enfin, pour chacun des 2 éléments, j ai donné les paramètres de décalage pour que la liaison entre les 2 éléments se passe bien. On voit ci-dessus, que j ai passé, pour l élément textbox une largeur de 100, une hauteur de 20, et que j ai mis un décalage de 70 sur l axe x par rapport à l autre élément. Le textbox, se trouvera donc, de base, à 70 pixels de l élément label. 30/04/2014 Confidentiel Page 18 de 36

19 4 Site web d administration de tables SQL 4.1 Contexte et besoins Le projet Triforce est un projet phare de l entreprise pour Il consiste à doter les négociateurs vente de tablettes tactiles (de type Microsoft Surface Pro sous Windows 8) et de fournir une application facilitant la signature de mandat. Le développement de cette application Windows 8 a été confié aux équipes de Besançon, elle se base sur des données issues du CRM (prospect / opportunité) et de la base de données SIGEO (biens / estimation / mandat). Concrètement, il s agit de récupérer des «opportunités» issues du système de gestion des clients (CRM nommé LINK), avec pour finalité de créer des estimations de biens et des mandats de vente dans le système SIGEO après avoir saisie les informations requises. L application Windows 8 utilise de nombreuses valeurs de références issues des 2 systèmes que sont le CRM et SIGEO : liste de civilité, liste de type de bien... Le besoin de disposer d une interface de paramétrage de ces valeurs s est vite imposer. Les fonctionnalités de base nécessaires étant : Gérer des types de valeur (ajout, modification, suppression) Gérer les listes de valeur (ajout, modification, suppression) Gérer les numéros de version permettant d indiquer à l application de se resynchroniser Et les fonctionnalités annexes : Importer des valeurs depuis la base de données SIGEO Les technologies qui m ont été préconisées sont l ASP.NET MVC et l utilisation de Entity FrameWork. Au niveau des contraintes techniques, il m a été impose d utiliser des web services, principalement pour une question de réutilisabilité des fonctionnalités 30/04/2014 Confidentiel Page 19 de 36

20 4.2 Les solutions apportées Suite aux spécifications du projet que j ai a réalisé, j ai commencé par me documenter sur le développement d application web asp.net et surtout sur le framework MVC 4 et le développement d application de service WCF. L intérêt d intégrer un web service à mon application MVC est que seul le web service accèdera aux informations stockées dans la base de données, et que si des changements sont a effectués sur mon application, je n aurais pas à remodifier tout le code. FIGURE 15 : EXEMPLE D'UNE INTERFACE CREEE 30/04/2014 Confidentiel Page 20 de 36

21 Développement de l application MVC : Le framework MVC est un modèle destiné à répondre aux besoins des applications interactives en séparant les problématiques liées aux différents composants au sein de leur architecture respective. Ce paradigme regroupe les fonctions nécessaires en trois catégories : Un modèle (modèle de données) Une vue (présentation, interface utilisateur) Un contrôleur (logique de contrôle) J ai donc commencé par développer les différents contrôleurs de mon application MVC. Pour cela, j ai créé 3 contrôleurs qui vont s occuper des méthodes pour les 3 différentes tables présentes en base de données. J ai choisi, lors de la création de ces contrôleurs, d utiliser un patron qui me permet d avoir 5 méthodes pour la gestion des vues : Index() : Affichage de toutes les entités de la table Details() : Affichage des détails pour une entité donné Create() : Permet de créer une nouvelle entité pour la table Edit() : Permet de modifier les valeurs d une entité déjà présente en table Delete() : Permet de supprimer une entité 30/04/2014 Confidentiel Page 21 de 36

22 La création de ces 3 contrôleurs me permet ensuite de générer automatiquement mes vues. Pour cela, il faut faire un clic droit sur chaque méthode des contrôleurs et sélectionner «Add View» FIGURE 16 : AJOUT D'UNE VUE Une fois que la génération des vues a été faite pour toutes les méthodes des contrôleurs, on obtient la structure de fichier suivante : FIGURE 17 : ARCHITECTURE VUES MajHisto, TypeValeurReference et ValeurReference sont les 3 dossiers qui comportent respectivement les vues des tables t_trif_maj_histo, t_trif_type_valeur_reference et t_trif_valeur_reference. Leurs structures de fichiers sont identiques avec, comme je l ai dit précédemment, une vue qui correspond à chacune des méthodes du contrôleur. Les dossiers Account, Home et Shared sont présents dès la création d un projet MVC. Ils permettent de gérer respectivement la gestion des comptes, l interface d accueil, et les éléments qui seront présents sur chacune des pages de l application (footer, header, ) FIGURE 18 : LIAISON MVC WS Enfin, il faut pour toutes les méthodes de mes vues, que j intègre les méthodes que j ai déployé dans mon web service. Pour cela, je créé une instance de la référence de service, avec laquelle je peux appeler les méthodes de mon web service. 30/04/2014 Confidentiel Page 22 de 36

23 Développement de l application WCF : Un service web est un programme informatique de la famille des technologies web permettant la communication et l'échange de données entre applications et systèmes hétérogènes dans des environnements distribués. Il s'agit donc d'un ensemble de fonctionnalités exposées sur internet ou sur un intranet, par et pour des applications ou machines, sans intervention humaine, de manière synchrone ou asynchrone. Le protocole de communication est défini dans le cadre de la norme SOAP dans la signature du service exposé (WSDL). Actuellement, le protocole de transport est essentiellement HTTP(S). WCF permet la communication entre plusieurs points (endpoint). Un endpoint est un triplet dont les valeurs sont les réponses à trois questions : Où? A une Adresse : URL finale du service Comment? Avec un Binding particulier : comment le service va être exposé (quel protocole, quel encodage, quel niveau de sécurité,...) Quoi? Un service dont la description est renseigné dans un Contrat : description des méthodes, attributs, comportements,... Avec WCF un service peut être appelé par différents canaux de communication (HTTP, TCP,...). Un service peut donc avoir plusieurs endpoints. Cela permet au client de choisir comment il va interroger un service. La première chose que j ai faites lors du développement de mon web service est l interaction avec la base de données, pour cela, j ai ajouté un nouvel élément à mon projet de type ADO.NET Entity Framework. Entity Framework est un outil de Mapping Objet Relationnel qui est intégré à ADO.NET. Il permet donc de créer automatiquement une couche d accès aux données d une base, et grâce à des outils comme «LinQ To Entities», de ne pas écrire du code SQL. On retrouve donc suite à l ajout de cet élément, un fichier de type.edmx de la forme suivante : FIGURE 19 : FICHIER.EDMX 30/04/2014 Confidentiel Page 23 de 36

24 En dessous de notre fichier.edmx, on retrouve un fichier.cs, ce fichier est auto-généré par «l EntityModelCodeGenerator», tout en créant le Model de Données Entity (EDM). Ce fichier contient le contexte et les entités qui sont utilisés par l EDM. J ai ensuite créé 3 classes qui correspondent aux tables t_trif_type_valeur_reference, t_trif_valeur_reference et t_trif_maj_histo de la base de données. Ces modèles représentent la couche de logique métier. FIGURE 20 : ARCHITECTURE MULTI COUCHE On remarque par le biais de ce diagramme qu il y a une interaction entre la couche d accès aux données et la couche logique métier. Pour pouvoir réaliser cette interaction, j ai besoin de pouvoir convertir des objets provenant de la couche de données en objets de la couche métier et inversement. J ai pour cela utilisé le patron de conception Adaptateur. L adaptateur permet entre autre de convertir l interface d une classe en une autre interface que le client attend. FIGURE 21 : ADAPTATEUR 30/04/2014 Confidentiel Page 24 de 36

25 On retrouve ci-dessus un exemple d adaptateur. La méthode DaoToBo (pour DataAcessObject to BusinessObject) prend en paramètre un objet de type t_trif_valeur_reference qui fait référence à l objet de notre couche de données, et retourne en sortie un objet de type ValeurReference qui fait référence à notre couche métier. J ai ensuite développé mon contrat de service. Le contrat de service spécifie les opérations prises en charge par le service. Une opération peut être considérée comme une méthode de service Web. Les contrats sont créés en définissant une interface C#. Chaque méthode dans l'interface correspond à une opération de service spécifique Je suis ensuite passé au développement des méthodes que je vais utiliser par le biais de mon application MVC. La définition de ces méthodes se fait dans le fichier Service1.svc. On retrouve donc des méthodes pour récupérer toutes les entités d une table, pour supprimer une référence d une table, J ai, pour finir, codé chacune des méthodes décrites dans mon contrat de service IService1. La définition de ces méthodes se fait dans le fichier Service1.svc. Ces méthodes seront appelées par mon application MVC, et permettront à cette dernière de pouvoir interagir avec la base de données. FIGURE 22 : METHODE SERVICE Consommation du web service depuis mon application MVC : Une fois que le développement de l application MVC et du web service sont terminés, on peut passer à la partie finale du développement de l application, la consommation du web service. Pour cela, j ai lancé la compilation de mon web service. Une fois la compilation terminé, j ai ajouté une référence de service à mon application MVC. Il faut au préalable avoir copié l adresse de notre service web pour pouvoir le coller dans l interface d ajout de référence de service. Cela permet de trouver un service à l adresse passé. 30/04/2014 Confidentiel Page 25 de 36

26 FIGURE 23 : ADRESSE WEB SERVICE FIGURE 24 : REFERENCE DE SERVICE On retrouve ci-dessus, l interface du gestionnaire de référence de service avec l adresse : qui correspond à l adresse de notre service web. Une fois que la référence de service est ajoutée dans notre application, on peut appeler les méthodes défini dans le web service sans problème. Ceci conclu le développement de mon application sur le paramétrage de tables SQL. 30/04/2014 Confidentiel Page 26 de 36

27 4.3 Zoom sur la technique Création de la fonction d import : Après avoir terminé le développement de mon application MVC et de mon web service, une demande d amélioration a été faite. Les développeurs qui vont utiliser mon application souhaitent pouvoir importer des données depuis la base SIGEO. Cette amélioration leurs permettraient de gagner du temps lorsqu ils veulent importer des valeurs en base depuis la base SIGEO. Pour me permettre d avancer correctement, un des développeurs a intégré à mon projet une partie de code qu il avait déjà développé qui permet de récupérer des données depuis le web service en question. La partie de code qu il a intégré à mon web service repose sur le pattern Repository. Ce pattern permet, lorsque l on veut manipuler des données, de s adresser à un point d entrée, dont le code qui y accède ne connait pas la nature, mais uniquement les services rendus. J ai directement été confronté à un problème lorsque j ai essayé de générer une première fois la solution. Les dictionnaires de données qui sont implémentés dans la partie de code qui m a été partagé prennent comme paramètres des objets de type string et TypeValeurReference. Le problème est que, dans la table ou je dois ajouter ces données, le type n est pas un string mais un int. L import est donc complétement impossible. Pour contourner ce problème, j ai passé aux valeurs du dictionnaire de données un chiffre, toujours de type string, qui correspond au label de leurs valeurs. Cela m a ensuite permis d utiliser une conversion de string en int. FIGURE 25 : DICTIONNAIRE AVANT MODIFICATION FIGURE 26 : DICTIONNAIRE APRES MODIFICATION Après avoir résolu ce premier problème, j ai dû reconstruire une classe adaptateur dans mon web service, car le modèle qui est utilisé dans la partie Repository n est pas le même que celui que j ai utilisé dans mon web service. FIGURE 27 : ADAPTATEUR 30/04/2014 Confidentiel Page 27 de 36

28 Après avoir terminé les modifications sur la partie de code qui m a été envoyé, je suis passé sur le développement des méthodes d import dans mon fichier Service1.svc. J ai donc créé 2 méthodes qui permettent de récupérer des Valeurs de Référence, une en fonction du type et l autre qui récupère toutes les valeurs. Ces 2 méthodes sont en lien direct avec les fichiers de mon Repository. FIGURE 28 : METHODE J ai ensuite créé une méthode d insertion qui prend en paramètre une Valeur de Référence provenant du web service SIGEO et ajoute directement un objet de type t_trif_valeur_reference. FIGURE 29 : METHODE D'INSERTION Et une méthode de suppression par type qui me permettra de supprimer des entités déjà présente en table lors d une insertion. A noter qu on retrouve la fonction de conversion Parse dont j ai parlé précédemment dans mon rapport. FIGURE 30 : METHODE DE SUPPRESSION PAR TYPE 30/04/2014 Confidentiel Page 28 de 36

29 La partie de développement sur le web service pour la fonction d import est terminé, il faut maintenant terminer l implémentation avec le code de l application MVC. Pour ce faire, j ai donc rajouté 2 méthodes dans le contrôleur qui s occupe de la table t_trif_valeur_reference. J ai appelés ces 2 méthodes «Import», l une est en GET et l autre en POST. La première va tout simplement appelé la méthode GetValeurReferenceSIGEO() qui va me retourner la liste des objets disponibles à importer. La deuxième va quant à elle commencer par supprimer toutes les entités correspondant au type passé à cette méthode, puis va insérer toutes les valeurs possédant ce même type. FIGURE 31 : METHODE D'IMPORT POST Création de filtres de recherche Les tables sur lesquels je travaille contiennent un grand nombre de lignes, il m a donc été demandé de créer des filtres de recherche sur mon application pour pouvoir trouver plus facilement une valeur contenu dans la table t_trif_valeur_reference. Il doit y avoir un filtre pour la sélection du type de valeur, et un autre filtre pour la recherche par mot. Pour réaliser ces filtres, j ai tout d abord créé une liste dans le contrôleur. Cette liste contient les objets qui seront sélectionnables dans la liste déroulante. J ai peuplé cette liste avec tous les types de valeurs de références qui sont contenus dans la table t_trif_type_valeur_reference. FIGURE 32 : LISTE DEROULANTE DE TYPE Ensuite, je créé dans la vue qui doit contenir ces filtres de recherche une liste déroulante, et un champ de texte, qui vont permettre à l utilisateur de pouvoir spécifier quels filtres il veut appliquer à 30/04/2014 Confidentiel Page 29 de 36

30 la recherche. La contrainte ici est de donner à la liste déroulante le même nom que celle contenue dans le contrôleur. J ai inséré ces 2 éléments HTML dans un formulaire : FIGURE 33 : FORMULAIRE DES FILTRES J ai ensuite modifié les paramètres d entrées de ma méthode Index pour qu elle prenne en paramètres la valeur du champ «SearchString» et de la liste déroulante «TypeId» FIGURE 34 : MODIFICATION METHODE INDEX Enfin, j ai modifié ma méthode GetValeurReference dans mon web service pour qu elle fasse des tests sur les valeurs qui sont passés dans les champs. Ex : Si le champ de texte est vide, mais pas la liste déroulante et vice versa. FIGURE 35 : EXEMPLE DE TEST IF 30/04/2014 Confidentiel Page 30 de 36

31 5 Conclusion Ces projets m ont permis de mettre en application les notions que j avais vu en cours, notamment au niveau de la programmation XML, JavaScript et du développement C#, mais aussi de découvrir de nouvelles technologies comme le développement d application web MVC et la conception de web services. J ai vraiment apprécié le déroulement du stage, puisqu il m a permis de voir plusieurs aspects des métiers qui sont représentés chez Nexity, en passant de la phase étude à la phase conception et enfin à la phase de développement. J ai également beaucoup aimer le fait de pouvoir partager et discuter avec les membres de l équipe, que ce soit par rapport à l informatique, au développement ou à tout autre chose. Ce stage a vraiment comblé toutes mes attentes et a été très enrichissant : j ai acquis de l expérience en travaillant avec des collaborateurs expérimentés tout en respectant des objectifs. Au terme de mon stage, Madame RAMASSO et Monsieur ROCCATI m ont proposés de poursuivre mon travail chez Nexity en tant que développeur pour une durée de 6 mois. C est avec grand plaisir que j ai accepté car je fonde de grands espoirs dans cette entreprise pour mon avenir professionnelle. 30/04/2014 Confidentiel Page 31 de 36

32 Glossaire DSI : Direction des Systèmes d Information MVC : patron de conception Modèle Vue Contrôleur SIP : Service Immobilier pour Particuliers MOA : Maîtrise d Ouvrage XML : Langage informatique de balisage SVG : Format de données conçu pour décrire des ensembles de graphiques vectoriels HTML : Format de données conçu pour représenter les pages web CRM : Le CRM est un gestionnaire de données de référence. Il regroupe l ensemble des méthodes, outils et processus pour assurer que les données soient identifiées et utilisables sans aucun risques. Entity Framework : Outil qui permet de créer une couche d accès aux données ASP.NET : ensemble de technologies de programmation web créé par Microsoft Web service : Permet la communication et l échange de données entre applications et systèmes hétérogènes dans des environnements distribués. Framework : Ensemble de classes généralement regroupées sous la forme de bibliothèques pour proposer des services plus ou moins sophistiqués SOAP : Protocole de RPC orienté objet bâti sur le XML WSDL : Grammaire XML permettant de décrire un service web http : Protocole de la couche d application WCF : Le modèle de programmation WCF est une couche d abstraction qui unifie et simplifie la mécanique d intégration des services Web TCP : protocole de transport 30/04/2014 Confidentiel Page 32 de 36

33 Netographie /04/2014 Confidentiel Page 33 de 36

34 Annexes Annexe 1 : Exemples d interface de la bibliothèque SIGEO 30/04/2014 Confidentiel Page 34 de 36

35 Annexe 2 : Exemples d interface de la biliothèque zoning 30/04/2014 Confidentiel Page 35 de 36