Examen ECTEI 2012

1. Examen ECTEI 2012 Sommaire Introduction - Le stage - Objectif I – Présentation de BNP Paribas - BNP Paribas - BNP Paribas en France - BNP Paribas dans le monde - BNP Paribas et son organisation - BNP Paribas - RBIS ‘Retail Banking Information System’ II – Cadre du stage et outils mit à disposition - Le cadre du stage - JavaFX Script - JavaFX Script, caractéristiques du langage - Adobe Flex - Flex, exemple - Application répondant aux normes de BNP Paribas III – RichRef et ses fonctionnalités - Aperçu - Architecture de RichRef - Critères de filtre et notion de data binding - Arbre des UO et manipulation des données au format XML - Fonctions pratiques 1

2. Examen ECTEI 2012 Introduction (1/2) Le stage Mon stage a eu lieu au sein de l’entreprise BNP Paribas l’une des plus grandes banque de France. Suite à mon agréable expérience durant mon stage de première année de BTS ig au sein de BNP Paribas je n’ai pas hésité longtemps à réitérer une demande de stage. Leur réponse a été longue à venir mais positive, après entretient on me proposa de travailler sur un outil de recherche dans l’annuaire de l’entreprise. Ce stage initialement prévu pour une durée de 6 mois du 14 mars au 9 septembre 2011 a été renouvelé pour 2 mois supplémentaires du 26 décembre 2011 au 27 février 2012. La Loi Cherpion* interdit l’entreprise d’embaucher un stagiaire plus de six mois par année d’enseignement ce qui explique le temps de séparation entre ces deux périodes. *"La durée du ou des stages effectués par un même stagiaire dans une même entreprise ne peut excéder six mois par année d'enseignement. Cette règle figure désormais à l'article L. 612-9 du code de l'éducation, issu de la loi du 28 juillet 2011 citée en référence en vigueur à compter du 30 juillet 2011. Un décret (à paraître) fixera les conditions dans lesquelles il pourra être dérogé à cette règle au bénéfice des stagiaires qui interrompront momentanément leur formation afin d'exercer des activités visant exclusivement l'acquisition de compétences en liaison avec cette formation, ainsi que dans le cas des stages qui seront prévus dans le cadre d'un cursus pluriannuel de l'enseignement supérieur. " 2

3. Examen ECTEI 2012 Introduction (2/2) Objectif Mon travail consiste à développer une interface de recherche intuitive, élaborée et performante facilitant la consultation de l’annuaire intranet de BNP Paribas. Cet annuaire contient des informations sur les employés de la société (nom, prénom, téléphone professionnel, lieu de travail, fonction etc…). Cette application sera nommé ‘RichRef’. Pour réaliser ce travail, une interface modèle et partiellement fonctionnelle développé en Java m’a été fournie ainsi qu’un accès (limité) à la base de donné contenant les données de l’annuaire. Il m’est alors demandé de développé l’application à l’aide du langage JavaFX Script mais à cause du peu de documentation et de problèmes de performance nous avons perdu du temps et dû nous résigné à opter pour une autre technologie : Adobe Flex 3

4. Examen ECTEI 2012 I – Présentation de BNP Paribas 4

5. Examen ECTEI 2012 I – Présentation de BNP Paribas (1/5) BNP Paribas BNP Paribas (www.bnpparibas.com) est l'une des 6 banques les plus solides du monde* et la première banque de la zone Euro par le montant des dépôts. Avec une présence dans plus de 80 pays et plus de 200 000 collaborateurs, dont 160 000 en Europe, BNP Paribas est un leader européen des services financiers d'envergure mondiale. Il détient des positions clés dans ses trois grands domaines d'activité : Retail Banking, Investment Solutions et Corporate & Investment Banking. En banque de détail, le Groupe a quatre marchés domestiques en Europe : la Belgique, la France, l'Italie et le Luxembourg ; BNP Paribas développe également son modèle intégré dans la zone Europe Méditerranée et a un réseau important aux Etats-Unis. BNP Paribas Personal Finance est numéro un du crédit aux particuliers en Europe. Pour Corporate & Investment Banking et Investment Solutions, BNP Paribas bénéficie également d'un leadership en Europe, ainsi que d'un dispositif solide et en forte croissance en Asie. * Notée AA par Standard & Poor's, soit la 3ème note sur une échelle de 22 5

6. Examen ECTEI 2012 I – Présentation de BNP Paribas (2/5) BNP Paribas en France En France, le pôle banque de détail de BNP Paribas compte 32 700 collaborateurs au service de 6,580 millions de clients particuliers et banque privée, 570 000 clients professionnels et entrepreneurs et 66 000 clients entreprises et institutions. Il offre une large gamme de produits et services, de la tenue du compte courant jusqu'aux montages les plus complexes en matière de financement des entreprises ou de gestion de patrimoine. Le réseau Banque de détail en France se caractérise par une présence forte sur la clientèle de particuliers et par une position de premier plan sur le marché des entreprises. Pour améliorer cette proximité, le réseau d'agences se rénove aux couleurs du programme Accueil & Service. Il comprend 2 250 agences, 5 400 guichets et automates auxquels s'ajoute une organisation multicanale efficace (téléphone et Internet en plus du réseau d'agences). Par ailleurs, le cœur du dispositif pour les entreprises repose sur 28 Centres d'Affaires répartis sur toute la France. Cette organisation est complétée par 2 services d'assistance – Service Assistance Entreprise (SAE) et Cash Customer Service (CCS) – prenant en charge le suivi après-vente de la clientèle. 6

7. Examen ECTEI 2012 I – Présentation de BNP Paribas (3/5) BNP Paribas dans le monde Présence dans 85 pays, 5 continents 100 000 collaborateurs, dont 70 000 en Europe (52 000 en France) 7

8. Examen ECTEI 2012 I – Présentation de BNP Paribas (4/5) BNP Paribas et son organisation 4 pôles d’activités / 13 fonctions centrales 8

9. Examen ECTEI 2012 I – Présentation de BNP Paribas (5/5) BNP Paribas - RBIS ‘Retail Banking Information System’ RBIS est la structure responsable de la gestion des « Systèmes d’Information de la Banque de Détail en France », le pôle informatique de la banque BNP Paribas. Les missions de RBIS Gérer les équipes informatiques - Coordonner l’informatique - Mutualiser les grands investissements informatiques - Favoriser les échanges de savoir-faire et les bonnes pratiques - Réaliser des activités transverses - RBIS en quelques chiffres (par mois) 55 millions de paiements porteurs de cartes - 2 millions d’appels téléphoniques vers les serveurs vocaux interactifs et le - centre relations clients 1,5 millions de sms envoyés vers les clients - 10 millions de visites sur BNPPARIBAS.NET - 55 millions de chèques traités - 36 000 Postes de travail - 5470 Automates - 2600 scanners - 3500 serveurs Mainframe Z10 1200 transactions / sec en heure de pointe 9

10. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition 10

11. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (1/7) Le cadre du stage Trois personnes ont travaillé à l’élaboration, mon tuteur Eric Bartolone ‘Chef d’équipe & développeur’, Ludovic Autaa ‘développeur’ et moi-même. Eric étant en charge du développement d’autres projets il n’a pas directement participé au développement de RichRef, il nous a orientés sur le choix des technologies à utiliser et fonctionnalités à intégrer dans l’application. Ludovic lui aussi occupé sur d’autres projets, développeur plus expérimenté et familiarisé avec les installations informatiques de l’entreprise, il s’est chargé de m’assisté en cas de difficulté dans le développement et d’intervenir sur les parties les plus délicates. JavaFX Script Bien que le projet sous JavaFX Script dû être abandonné, il me semble nécessaire de faire une brève description de ce langage. Sur la base du langage F3 (Form Follow Function), racheté en 2005, Sun a développé JavaFX Script, un langage déclaratif destiné à décrire des interfaces graphiques, notamment pour le framework JavaFX. Ce langage entre en concurrence avec XUL et XAML mais sa syntaxe le rapproche de JavaScript, tandis que le framework, dont la version 1.0 est publiée en décembre 2008, est lui concurrent de Adobe AIR et Silverlight, autres frameworks pour applications Web. Destiné à concevoir des GUIs, il dispose de fonctionnalités pour associer les composants aux données de l'application et donc synchronizer l'interface avec les données et sa syntaxe est cinq fois plus concise que celle de Java. Il veut combiner le texte enrichi, le graphisme, les animations, l'audio et la vidéo. 11

12. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (2/7) JavaFX Script, caractéristiques du langage Types: String, Number, Integer, Boolean, Void, Null, Duration.  On ne déclare pas le type, il est impliqué par ce qui est assigné. On utile le mot-  clé var ou def. Les opérateurs sont ceux de Java.  Toute chose est une expression.  Un objet est défini par un littéral selon la syntaxe d'un tableau comme en  JavaScript. Les symboles {} ont des usages multiples. Ils servent à grouper un contenu, à  insérer une variable dans une chaîne (PHP utilise directement la variable avec son préfixe $). A concaténer des chaînes. La même chose peut être écrite de façon équivalente sous une forme déclarative  et une forme procédurale. Il peut utiliser les classes Java préexistantes.  12

13. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (3/7) Adobe Flex Flex a été créé par Macromedia en 2004 et repris par Adobe en 2006, il permet de concevoir des applications internet riches (RIA) multiplateformes à l’aide de la technologie Flash. Son modèle de programmation repose sur ActionScript 3.0 (basé sur ECMAScript) et MXML. La possibilité de créer rapidement une interface graphique fluide et riche grâce au MXML ainsi que le SDK Flex disposant de nombreux composants graphiques nous a conquis. Pour un développeur d’applications traditionnelles il n’est pas forcément évident de travailler avec la plate-forme Flash (je n’ai personnellement jamais développé en flash), l’objectif de Flex est de minimiser ce problème en fournissant un modèle de programmation qui est familier à ces développeurs. Dans une architecture trois tiers, les applications Flex représentent la couche présentation. Contrairement aux applications HTML, les applications Flex fournissent un client "stateful", c'est-à-dire que les changements de la vue ne requièrent pas le chargement d'une nouvelle page. De la même manière, Flex et le Flash Player offrent la possibilité d'envoyer et de recevoir des données depuis et vers un serveur sans que le client ne doive recharger la vue. 13

14. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (4/7) Flex, exemple <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " layout="absolute"> <mx:Script> <![CDATA[ // Code ActionScript 3.0 directement intégré dans le fichier MXML // Ce code pourrait être placé dans un fichier séparé avec l'extension .as public function sayHello():void { lblResults.text = "Hello " + txtName.text; } ]]> </mx:Script> <mx:Panel x="10" y="10" width="306" height="200" layout="absolute" title="Say Hello"> <mx:Label x="10" y="10" text="Entrez votre nom :"/> <mx:TextInput x="10" y="36" id="txtName"/> <mx:Button x="178" y="36" label="Dis Bonjour!" click="sayHello()"/> <mx:Label x="10" y="66" id="lblResults"/> </mx:Panel> </mx:Application> Ce code dessine un formulaire permettant à un utilisateur de saisir son nom puis d'afficher "Hello + [le nom saisi]" lorsque l'on clique sur le bouton "Dis Bonjour!". 14

15. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (5/7) Application répondant aux normes de BNP Paribas Dans cette partie nous expliquerons les différentes normes d’architectures qui sont établies afin de déployer les applications. Couche Une couche est un découpage logique de l'application. Les classes d' une couche ne peuvent communiquer qu'avec les classes de la même couche où celles de la couche directement inférieure. Le découpage en couche permet de modifier l'implémentation d'une couche sans impacter les couches inférieures. 15

16. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (6/7) Couche présentation La couche présentation contient l'ensemble des classes permettant de : gérer l'envoi d'informations à l'utilisateur - traiter les événements envoyés par l'utilisateur - maintenir les données non persistantes - valider les données saisies - transformer les données en un format compréhensible par l'utilisateur - Couche métier La couche métier contient l'ensemble des classes permettant de : contrôler la sécurité - gérer la logique de l'application - Couche données La couche DATA contient l'ensemble des classes permettant de : manipuler les données persistantes - transformer les données en un format compréhensible par l’application - Couche Core La couche Core contient l'ensemble des classes utilisables à partir de toutes les couches logiques. 16

17. Examen ECTEI 2012 II – Cadre du stage et outils mit à disposition (7/7) Le schéma suivant représente l’architecture physique d’une application respectant les standards BNPParibas : La DMZ3 d’une application Java héberge une base de données contenant les données fonctionnelles de l’application et éventuellement les données techniques du framework SweetDEV. Cette DMZ est accédée par la DMZ2 via un driver JDBC. La DMZ2 héberge les couches métier et données de l’application. Cette DMZ est accédée par la DMZ1 via un objet Façade. La DMZ1 héberge la couche présentation de l’application. Cette DMZ est accédée via Internet. Pour pouvoir respecter cette architecture, une application doit être découpée en deux modules. Le premier module contiendra la couche présentation et sera déployé sur le serveur de DMZ1. Le deuxième contiendra les couches métier et données et sera déployé sur le serveur de DMZ2 SweetDEV est un framework technique dont l'objectif est d'aider le développement. Ce framework contient : des composants graphiques, des services dont le besoin est récurrent dans les applications : accès aux protocole, cache, gestion des juridictions … des classes utilitaires, des règles d'architecture permettant de standardiser les développements. 17

18. Examen ECTEI 2012 III – RichRef et ses fonctionnalités 18

19. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (1/8) Aperçu Il s’agit ici d’une application test en Java, déployée sur Java Web Start (Permet l'installation d'une application grâce à un simple clic dans un navigateur). Pour des questions de confidentialité il m’a été demandé de ne pas montrer d’un quelconque contenu de l’intranet de l’entreprise … 19

20. Examen ECTEI 2012 III – RichRef et ses fonctionnalités ( 2/8) 20

21. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (3/8) Architecture de RichRef BROKER Ce service sert de couche transport à SweetDEV. Il permet d'appeler des objets en cachant le protocole utilisé. Il permet, par exemple, d'appeler un EJB, une Servlet ou un Objet Java sans connaître son type à l'avance. Un Business Controller est une classe Java contenant le code métier de l'application. 21

22. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (4/8) Critères de filtre et notion de data binding Le « data binding » qu’est-ce que c’est ? Pour faire bref ça permet au développeur de lier automatiquement des données entre sources et cibles : Imaginez une étiquette conçue pour automatiquement afficher la valeur d'un bouton sélectionné. C'est un concept simple qui se montre très souvent utile dans la construction d'applications internet riches (RIA). C’est l’une des possibilités qu’offre flex ce qui m’a permis de créer des filtres dynamiques. A chaque caractère que vous tapez dans un cadre filtre votre recherche se mettra à jour automatiquement. Exemple ‘simplifié’ ci-dessous. 22

23. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (5/8) //MXML //DataGrid : où est affiché le résultat de recherche <mx:DataGrid id="myGrid" dataProvider="{initDG}"> <mx:columns></mx:columns> </mx:DataGrid> //Cadre pour le filtre « nom » <s:TextInput id="critereNom" width="75" change="filterCriteriaChangeHandler(event);"/> </s:VGroup> //AS //Fonction qui met à jour le résultat de recherche lorsque qu’on utilise un //filtre private function filterCriteriaChangeHandler(event:Event):void { if (initDG.filterFunction == null) { initDG.filterFunction = processCriteria ; } initDG.refresh() ; } (Exemple en ligne : http://s-jdm.developpez.com/tutoriels/flex/traductions/introduction-data- binding/fichiers/data-binding.html ) 23

24. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (6/8) Arbre des UO et manipulation des données au format XML BNP Paribas dispose d’une structure complexe, un employé appartient à un sous-service qui lui-même descend d’un service principal ce dernier étant situé dans l’un des pôles … Il était donc utile d’ajouter une option de permettant de mieux cibler la recherche en fonction de cette infrastructure que nous nommons arbre des UO. Nous avons donc créé un fichier XML la représentée. //XML <Pôle 1> <Service 1> <Sous service 1></Sous service 1> <Sous service 2></Sous service 2> </Service 1> Etc… 24

25. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (7/8) A partir de ce fichier XML est généré un ‘data tree’ type : Ici ‘item 1c’ est sélectionné, la recherche sera donc ciblée dessus. 25

26. Examen ECTEI 2012 //AS [Bindable] //On utilise le format XML pour afficher les données de l'UO public var uoXmlCollection:XMLListCollection ; //Arbre des UO private function getArbreUosFull():void { remoteObjectArbreDesUO.getTreeUOFull() ; } private function initTreeData (e:ResultEvent):void { var myXML:XML; var xmlList:XMLList ; myXML = new XML(e.result as String) ; xmlList = new XMLList(myXML) ; uoXmlCollection = new XMLListCollection(xmlList) ; } private function arbreDesUOXMLHandler(event:ResultEvent):void { try { getArbreUosFull() ; } catch (e:Error) { trace (e) ; } } private function findNodeByLabel(uoName:String):void { var xmllistDescendants:XMLList = uoXmlCollection.descendants().(@label == uoName); expandParents(xmllistDescendants[0]); UoTree.selectedItem = xmllistDescendants[0]; UoTree.firstVisibleItem = UoTree.selectedItem ; } 26

27. Examen ECTEI 2012 private function expandParents(xmlNode:XML):void { while (xmlNode.parent() != null) { xmlNode = xmlNode.parent(); UoTree.expandItem(xmlNode,true, false); } } //Recherche dans l'UO selectionné private function searchPersonInUo():void { var uoName:String = UoTree.selectedItem.@uoId ; var searchCriteria:String = c_search.text; remoteObjectRésultatInUo.searchPersonInUo(searchCriteria, uoName); } //Recherche toutes les personnes pour un UO donné private function searchUoPersons():void { var uoName:String = UoTree.selectedItem.@uoId ; remoteObjectRésultatUoMembers.searchUoPersons(uoName); } //Quand click sur la datagrid de résultat met à jour les détails et l'arbre //des UO private function dataLinkUO():void { var text:String = myGrid.selectedItem[0]; var idBureau:String = myGrid.selectedItem[10] ; remoteObjectDetail.getDetail(text); remoteObjectBureau.getHierBur(text, idBureau); if (uoXmlCollection != null) { findNodeByLabel(myGrid.selectedItem[6]) ; } } 27

28. Examen ECTEI 2012 III – RichRef et ses fonctionnalités (8/8) Fonctions pratiques //AS //Avant première recherche, affiche un texte grisé "votre recherche..." public var initializeSearch:Boolean=true; private function finitializeSearch():void { if (initializeSearch == true) { initializeSearch = false; c_search.text=""; c_search.setStyle("color", "#000000"); c_search.setStyle("fontStyle", "normal"); } } //Lance la recherche si on appuis sur Entrée private function onKeyUpHandler(event:KeyboardEvent):void{ if (event.keyCode == Keyboard.ENTER){ event.target.dispatchEvent(new MouseEvent(MouseEvent.CLICK)); } } private function onKeyUpHandlerTree(event:KeyboardEvent):void{ if (event.keyCode == Keyboard.ENTER){ searchUoPersons(); } } private function onKeyUpHandlerDataG(event:KeyboardEvent):void{ if (event.keyCode == Keyboard.ENTER){ dataLinkUO(); } } 28

29. Examen ECTEI 2012 //Ouvre un navigateur quand on appuis sur le bouton mail private function env_mail(mail:String):void { mail = "mailto:"+mail; var urlReq:URLRequest = new URLRequest(mail); navigateToURL(urlReq, "_self"); } 29

30. Examen ECTEI 2012 Conclusion et remerciements 30

31. Examen ECTEI 2012 Conclusion et remerciements Pour conclure, j’ai trouvé cette expérience professionnelle enrichissante dans la mesure où elle m’a permis de découvrir une technologie de développement particulièrement agréable à manipuler et présentant des possibilités variées : Flex. Le second point sur lequel je suis satisfait est d’avoir pu collaborer avec des professionnels expérimentés dans le développement informatique, disposés à me renseigner et m’aider tout au long du stage malgré leurs travaux annexes. Je tiens à adresser mes remerciements aux personnes suivantes qui ont contribué à rendre cette expérience professionnelle plus enrichissante : Eric Bartolone, mon tuteur de stage Pour m’avoir offert la possibilité de faire ce stage. Ludovic Autaa, développeur chez BNP Paribas Pour ses précieuses explications et sa contribution au développement du projet. Nathalie Jolivot, Responsable Marketing FLEX - Adobe Systems France Pour nous avoir fait découvrir la technologie Flex. Magali Misbah, responsable RH BNP Paribas Pour avoir suivi m’a candidature au sein de l’entreprise. 31