Webisation. Webisation. Jean-Michel BRUEL Jean-Bernard CRAMPES Daniel VIELLE

Transcription

1 Webisation Jean-Michel BRUEL Jean-Bernard CRAMPES Daniel VIELLE 18 avril

2 Objectif Application autonome ou client lourd Transformer une application autonome ou client lourd écrite dans un ou plusieurs langages de programmation quelconques (C, C++, Java, COBOL ) en une application WEB (WebApp) exploitable à partir d'un navigateur internet de dernière génération (client léger). Application client léger 2

3 Pourquoi Webiser? La même application est accessible via Internet depuis tout type de poste de travail (PC, Mac, Linux, Tablette ) Aucune installation particulière n'est nécessaire WebApp Etape nécessaire pour pouvoir cloudiser Facilite la smartphonisation Cloudisation Smartphonisation (client léger sur smartphone ou tablette) 3

4 Inconvénients de la webisation Toutes les communications utilisent le même protocole HTTP /S Exemples typiques : webmail client de messagerie POP/S, IMAP/S, SMTP (googl Outlook, Thunderbird...) Office Web Apps (suite Office de Microsoft) Google drive Danger La traversée des FireWalls et des Proxies sans configuration particulière ouvre des failles de sécurité. Par exemple : Retard de normalisation des WebSockets en HTML5 à cause d'une faille découverte dans les Proxies. 4

5 5

6 Principe Modifier le moins possible l'existant pour limiter les coûts et conserver les fonctionnalités de l'application. Données à conserver telles quelles Traitements métier à conserver tels quels Structure générale de l'ihm à conserver sauf si exigence particulière Ergonomie et dynamique des pages à adapter aux exigences des langages du WEB : HTML, CSS, Javascript 6

7 Les techniques mises en œuvre Le modèle MVC (Model, View, Controler) Les modèles d'ihm de MACAO : SNI, SEP Les Web Services HTML5, CSS3 Librairies et frameworks (jquery ) 7

8 Controler MVC Selon MVC, toute application peut se décomposer en trois niveaux View Traitements métier Logiciel interactif Model 8

9 Démarche de Webisation (4 étapes) 4 - Dynamique interne et ergonomie des pages Rétro-conception de l'ihm SNI Langage pivot 3-2 Construction du SEP SEP Modèle dédié WEB 3-3 Reprogrammation Langage source X 1-1 Rétro-conception des données Modèles de données 1-2 Interfaces d'accès aux données Langage cible WEB 2-1 Recensement des procédures métier Nomenclature 2-2 Encapsulation des procédures métier 9

10 Première opération Tamiser le code source pour séparer : Les accès aux données Les traitements (procédures métier) L'IHM 10

11 1 - Les données Langage source X 1-1 Rétro-conception des données Modèles de données 1-2 Interfaces d'accès aux données Langage cible WEB 11

12 1 - Les données Fonction des structures de données existantes : fichier texte, XML, BD Description de fichier XML : DTD : Document Type Definition XSD : XML Schema Definition BD : Modèles MERISE (MCD, MLD) UML : Diagramme de classes Conception des procédures d'accès aux données (interfaces) 12

13 1 - Les données Exemple de structure de données Gestion des stages Utilisation d'un diagramme des classes persistantes Entreprise Stage Etudiant nomentr adresseentr responsable 1 nomencadrant encadrant 1 nometu adresseetu etu 1 Tuteur nomtut tut 13

14 2 Les procédures métier Langage source X Modèles de données Langage cible WEB 2-1 Recensement des procédures métier Nomenclature 2-2 Encapsulation des procédures métier 14

15 Procédures métier nomenclature - encapsulation Etablir une nomenclature des procédures mises en œuvre dans l'application prototype de chaque méthode / procédure / fonction langage nombre, nom et type des paramètres en entrée / sortie type de la valeur retournée Encapsuler les procédures côté serveur 1. dans des classes (conseillé pour clarté, fiabilité, documentation...) 2. dans des Web Services (interopérabilité) Alternatives mono-environnement tout Java : JavaScript Java J2EE Servlets... tout Microsoft : dotnet ASP.NET WCF serveurs MS 15

16 Web Services WS spécifiques, non publiés dans un annuaire (UDDI...) Résoud les problèmes d'interopérabilité entre différentes applications et différentes plateformes frameworks disponibles dans tous les langages Choisir un protocole d'appel / d'échanges SOA Services Oriented Architecture : architecture orientée services REST REpresentational State Transfer : architecture orientée ressources XML-RPC Remote Procedure Call : appel de procédure distante SOAP Simple Object Access Protocol : messages entre objets distants websockets en HTML5 : tunneling propriétaire sur HTTP Principes paramètres / résultats en XML, transport par HTTP / HTTPS contrôle et sécurité assurés par le protocole du Web Service utilisé sans état (context-free) 16

17 Web services orientés ressources REST REST est une architecture d'échanges échange de documents entre client et serveur dans un format normalisé ou propriétaire XML, JSON Javascript Object Notation, CSV... le webisateur prévoit une URL différente pour chaque action d'un processus de traitement développe l'interface avec la procédure métier existante doit maintenir le contexte dans les documents échangés un outil performant : RAILS Ruby on RAILS (langage Ruby) 17

18 Web services orientés ressources REST transport par HTTP traverse les Firewall, les Proxy Requête HTTP Action Post Create Get Retrieve Put Update Delete Delete Format JSON un objet : { "attribut" : "valeur",... } une collection d'objets : [ objet1, objet2,... ] exemple : { "nometu" : "Dupont", "adresseetu" : "9 rue...", " etu" : "dupont@xx.fr" } 18

19 Web services orientés Appel Distant JSON-RPC / XML-RPC / SOAP Convertit un appel local de fonction en appel distant Client Objet serveur Autres serveurs Navigateur Procédure métier JSON, XML, SOAP (XML) Encodage paramètres Décodage résultat / erreur Transport HTTP/S Types natifs Résultat / Erreur Décodage paramètres Encodage résultat / erreur 19

20 Web services SOAP Echange d'un document XML décrit la méthode appelée, ses paramètres, son retour, les exceptions Protocole décliné en SOAP-RPC et SOAP-Document Normalisé par un schéma XSD : namespace schemas.xmlsoap.org Normalisé WSDL Web Service Description Language Richesse de déclaration des types de données échangées structures de données complexes WSS WS-Security : intégrité (signature) des messages confidentialité (chiffrement) des messages jeton de sécurité (attaché dans l'en-tête des messages) <SOAP-ENV : Enveloppe> <SOAP-ENV : Header> <SOAP-ENV : Body > 20

21 Le protocole WebSockets WebSockets est une norme IETF, en cours de standardisation w3c comme les sockets canal de communication bi-directionnnel sur un socket TCP entre un navigateur et un serveur Web WebSockets prévu dans HTML 5 permet d'encapsuler un protocole propriétaire ou métier lié à HTTP (mais pas "transporté par HTTP") permet les notifications serveur web client navigateur changement d'état du serveur mode "push" de données 21

22 En résumé Dans un contexte C/S existant architecture SOA existante dotnet Java J2EE commentaire maintien de la cohérence du SI tout microsoft, interopérable avec J2EE tout Java, interopérable avec dotnet Dans un contexte hétérogène avantages à surveiller REST association données / traitements sécurité XML-RPC JSON-RPC simple sécurité SOAP sécurité lourd websockets full duplex attendre v2 22

23 3 - L'IHM Utilisation des modèles d'ihm de la méthode MACAO : SNI, SEP Rétro-conception de l'ihm SNI Langage pivot 3-2 Construction du SEP SEP Modèle dédié WEB 3-3 Reprogrammation Langage source X Modèles de données Langage cible WEB 23

24 Le Schéma Navigationnel d Interactions SNI 24

25 SNI - Objet Le SNI permet de concevoir et de modéliser la logique d'enchaînement des interactions entre l'utilisateur et le logiciel (IHM). Il concerne essentiellement les niveaux "Vue" et "Controller" Le SNI est purement conceptuel : il est indépendant de la technologie utilisée (Windows, WEB, Multimédia...) il fait abstraction de tout aspect matériel (clavier, type d écran, souris...) il ne représente pas la manière de faire de l'utilisateur (menu déroulant, bouton, glisser-déposer, toucher...) il ne représente pas les traitements réalisés dans l'application 25

26 Les Unités de Dialogue On appelle "Unité de Dialogue" (UD) l'ensemble des fonctions offertes à l'utilisateur de façon simultanée (sur un même écran, dans une même fenêtre, dans une même page) Chaque UD est représentée par un ou plusieurs symboles dans le SNI Une UD élémentaire = un seul symbole Une UD composée = plusieurs symboles 26

27 6 UD élémentaires (UDE) Saisie de données Affichage simple (un objet, un résultat, divers attributs) Affichage d une collection d objets Message (erreur, avertissement, information) View Impression d un objet ou d un résultat simple Opt1 Opt2 Opt3 Opt4 Opt5 Menu (5 options) Controler 27

28 Les UD composées par juxtaposition (UDC) Modification de données Suites à donner à un affichage simple Opt1 Opt2 Opt3 Opt4 Opt5 1 N Suites à donner à l affichage d une collection Opt1 : indépendamment des objets Opt2 : pour un seul objet sélectionné Opt3 : pour N objets sélectionnés Opt1 Opt2 Opt3 28

29 Les UD composées par boîte de groupage (UDC) Objet1 Objet2 Affichage simultané de deux objets Objet Collection Affichage simultané d un objet et d une collection d objets Seuls les affichages et les saisies peuvent être placés dans une boîte de groupage Les menus sont toujours placés à l extérieur Objet1 Objet2 Menu associé à une boîte de groupage Objet1 1 : Objet2 Option 1 Option 2 29

30 Exemple de SNI Gestion des stages - Planche 01 Entreprise Stage Etudiant Tuteur 30

31 Gestion des stages Planche 02 31

32 Visual-SNI Outil d aide à la réalisation du SNI Plugin Eclipse open source (licence GPL) téléchargeable sur le site SourceForge à l adresse suivante : Dernière version :

33 Le Schéma d'enchaînement des Pages SEP 33

34 Représentation des pages Caractéristiques générales Objet visuel 1 Objet visuel 2 Objet visuel 3 Evt. interne [ Evénement utilisateur ] [ (Paramètres) ] [ Ev. util ] [ (Paramètres) ] [ Ev. util. ] [ (Paramètres) ] [ Evénement ] [ (Paramètres) ] Caractéristiques générales : Nom de la page précédé de son type (STA, DYN, FORM ) "DESSIN" pour les pages complexes NAV" si la page doit s'ouvrir dans un autre navigateur "POPUP" si la page doit s'ouvrir dans une fenêtre popup 34

35 Le SEP correspondant 35

36 Visual-SEF (SEP) Outil d aide à la réalisation du SEP Plugin Eclipse open source (licence GPL) téléchargeable sur le site SourceForge à l adresse suivante : Dernière version :

37 4 Dynamique et ergonomie des pages 4 - Dynamique interne et ergonomie des pages Langage source X Langage cible WEB 37

38 Objectif : Rapprocher l'ergonomie des pages de l'ergonomie d'origine en apportant éventuellement quelques améliorations Gestion des menus et sous-menus Formats d'affichage des données Gestion des images et graphiques (numériques, vectoriels) Formulaires (ex boîtes de dialogue) Fenêtres popup Contrôles de premier niveau Aide contextuelle... Compromis entre les différentes versions des navigateurs 38

39 Dessin de page WEB 39

40 Quelques technologies WEB Les langages côté client (navigateur) HTML5 CSS3 Javascript TypeScript (Microsoft) Les bibliothèques d'utilitaires jquery jquery-ui Plugins jquery... Dessin vectoriel Balise <canvas> de HTML5 Balise <svg> de HTML5 Plugin jquery SVG 40

41 Exemple1 : Diagramme réalisé avec jquery (plugin jqplot) 41

42 Exemple2 : Diagramme de Gantt réalisé avec jquery (plugin fn.gantt) 42

43 La démarche proposée en 4 étapes Conclusion qui s'appuie sur les technologies actuelles - web services, - modélisation de l'ihm, - HTML5, CSS3, bibliothèques javascript (jquery) favorise une webisation dans les meilleures conditions - d'économie, - de performances, - d'ergonomie, - de fiabilité, pour aller vers la cloudisation et la smartphonisation 43

44 Site WEB : Des questions? 44