La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN Florent WEBER.

Présentations similaires


Présentation au sujet: "Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN Florent WEBER."— Transcription de la présentation:

1 Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN Florent WEBER

2 Tuteur-entreprise : M. Nicolas ANDRE (ZENIKA) Tuteur-école : M. Hervé GRALL

3 Présentation Contexte dapplication Une étude en 4 phases : Phase 1 : Découverte Phase 2 : Approfondissement Phase 3 : Prototypage avec Google Gears Phase 4 : Prévisions et Conclusion Conclusion : de lutilité du mode déconnecté Bilan : un projet enrichissant Ecole des Mines de Nantes3

4 Web 2.0 Nouveaux usages (communautés…) Nouvelles technologies Parmi ces technologies Apparition du mode déconnecté pour les applications Web Ecole des Mines de Nantes4

5 Exemple : un voyage en train : le passage dans un tunnel provoque la perte de la connexion. Impossible de terminer lenvoi du courriel en cours décriture. Solution : Simulation de la page Web en local Stockage du courriel dans une base de données Synchronisation au moment de la reconnexion Ecole des Mines de Nantes5

6 Les objectifs de ce sujet de veille technologique sont : Répertorier lensemble des solutions existantes Retenir les solutions pertinentes (critères à définir) Réaliser un prototype pour la solution phare Conclure sur létat de lart et anticiper les évolutions Ecole des Mines de Nantes6

7 OBJECTIF TRANSVERSE : Découvrir et maîtriser les techniques de gestion de projet : AU DEBUT : estimation des charges… PENDANT : suivi au quotidien, adaptation face aux imprévus… A LA FIN : bilan, enseignements… Chef de projet : Florent W. Outil : Open WorkBench (logiciel de gestion de projet, libre) Ecole des Mines de Nantes7

8 Lorganisation du projet est basée sur le découpage en 4 phases : Phase 1 : Découverte Implication de tous afin davoir une idée globale du thème détude. Phase 2 : Approfondissement Répartition des technologies jugées intéressantes : Google Gears : Cédric C. Adobe Air : Jérémy S. Zimbra : Thomas G. Autres : Florent W. Ecole des Mines de Nantes8

9 Phase 3 : Prototypage Répartition en fonction de la charge : Google Gears : le « gros morceau », le cœur de létude. Cédric C., Thomas G., Florent W. Adobe Air : en plus par rapport aux attentes initiales. Jérémy S. Phase 4 : Prévisions & Conclusion Implication de tous (mise en commun des acquis) Durée du projet : environ 13 semaines travaillées Ecole des Mines de Nantes9

10 OBJECTIF : Pour chacun des membres de léquipe, découvrir : Le contexte dapplication Les intérêts du mode déconnecté Les principaux acteurs Les briques technologiques essentielles Ecole des Mines de Nantes10

11 Fusion RIA/RDA RIA : Rich Internet Application Lancement dans le navigateur Pas dinstallation RDA : Rich Desktop Application Installation sur le poste client Accès aux ressources de lordinateur Utilisation locale Ecole des Mines de Nantes11

12 Larrivée du mode déconnecté réduit la frontière entre RDA et RIA : Si la RIA permet le mode déconnecté, alors on obtient une application utilisable sans connexion Internet donc de type desktop Inversement, en mode connecté, des RDA offrent les mêmes fonctionnalités et interactions quune page web. Ecole des Mines de Nantes12

13 Palier le plus gros défaut des RIA : une perte de connexion => perte du service Permettre aux RIA daccéder aux ressources locales afin dassurer la continuité du service Il existe 2 modes de déconnexion : Explicite : voulue par lutilisateur Implicite : non souhaitée par lutilisateur Ecole des Mines de Nantes13

14 Il est difficile pour certaines architectures doffrir un mode déconnecté En effet, les pages web peuvent être générés côté serveur et non côté client comme GWT, Flex ou tout simplement HTML/JavaScript Rendre une application déconnectée nécessite un rapatriement de tout ou partie des traitements métiers sur le navigateur Ecole des Mines de Nantes14

15 Comment assurer une bonne répartition des traitements entre le serveur et le navigateur client? Comment gérer de gros volume de donnés?(répartition de la charge) Comment gérer les problèmes de mises à jours concurrentes et comment les notifier aux utilisateurs? Ecole des Mines de Nantes15

16 OBJECTIF : Réaliser un panorama de lexistant afin de sélectionner les solutions pertinentes. Ecole des Mines de Nantes16

17 Yahoo offre un mode déconnecté à son webmail via Zimbra Desktop FlickR, MyBlogLog: exemples de services offerts par Yahoo Mais quoffre donc Zimbra pour engendrer un tel engouement de la part de Yahoo? Ecole des Mines de Nantes17

18 Zimbra est une suite collaborative comprenant une solution serveur ainsi quun certain nombre dapplications : Webmail Calendrier partagé avec gestion de contacts Des extensions pour relier Zimbra à dautres clients de messagerie (Outlook, Thunderbird…) Yahoo sest surtout intéressé à Zimbra Desktop qui est une RIA offrant un webmail, un calendrier et un système de gestion de contacts avec la possibilité de travailler en mode déconnecté. Ecole des Mines de Nantes18

19 Ecole des Mines de Nantes19

20 Jetty : un serveur HTTP et un moteur de servlet 100% implémenté en java Prism : navigateur web léger dont le moteur de rendu est fondé sur celui de Firefox Derby : base de données de petite taille (2MB) appartenant au projet Apache et totalement implémentée en java. Ecole des Mines de Nantes20

21 Ecole des Mines de Nantes21

22 Zimbra met à disposition un toolkit AJAX Cependant, il ne possède pas de librairies pour le mode « déconnecté » Zimbra Desktop est totalement gratuite, excepté sa licence commerciale qui est payante. Communauté active (notamment dans son forum) Des informations parfois difficiles à trouver surtout en ce qui concerne son implémentation du mode « déconnecté » Ecole des Mines de Nantes22

23 Les applications web déconnectées utilisant Gears fonctionnent sans serveur HTTP local. LAPI Gears est composée de 3 modules : Un serveur local (LocalServer) Une base de donnée SQLite qui stocke les données sur le poste client. Un « WorkerPool » qui facilite la synchronisation des données. Ecole des Mines de Nantes23

24 Toute l'application dans un cache LocalServer Il remplace le serveur HTTP distant. Il met dans le cache de Gears (différent de celui du navigateur) les ressources utilisées en déconnecté (DB SQLite). Il stocke l'ensemble des éléments de l'application - pages HTML, bibliothèques Javascript, images, feuilles de style (CSS), etc - sur le poste client. Il intercepte les requêtes HTTP de l'application lorsqu'elle fonctionne en mode déconnecté. Ecole des Mines de Nantes24

25 Une base de données locale La base de données locale s'appuie sur le moteur SQL open-source SQLite. Stocke localement les données téléchargées par l'utilisateur lorsque celui-ci est connecté. Une base de données hébergée sur le serveur distant peut être copiée intégralement ou partiellement dans la base de données locale. En mode déconnecté, c'est la base de données locale qui est utilisée par l'application. Un moteur de synchronisation se charge de réconcilier les données lorsque l'utilisateur se reconnecte. Ecole des Mines de Nantes25

26 Synchronisation des données Les données entre le serveur et le client ne sont plus synchronisées automatiquement dans les cas suivants : Modification de données hors-ligne Données partagées entre plusieurs utilisateurs Données provenant d'une source extérieure (exemple : flux RSS) Pour résoudre ces problèmes de synchronisation, deux stratégies sont possibles pour les applications Gears : Synchronisation manuelle Synchronisation en tâche de fond Ecole des Mines de Nantes26

27 Synchronisation manuelle (manual sync) L'utilisateur décide quand il veut lancer la synchronisation (usuellement via un bouton): Upload des données locales Téléchargement des données récentes du serveur La quantité de données à transférer doit rester faible (quelques Mo pour une connexion Wifi). Cette synchronisation nécessite que l'utilisateur connaisse l'état de la connexion. Il peut également oublier de synchroniser avant de se déconnecter. Ecole des Mines de Nantes27

28 La synchronisation s'effectue toute seule Avec la synchronisation en tâche de fond (Background sync), l'application web se synchronise automatiquement et continuellement : Ecole des Mines de Nantes28

29 Des traitements asynchrones en tâche de fond Les synchronisations de données nécessitent souvent du temps. Gears propose un 3ème module : le WorkerPool. Il élimine les blocages du navigateur dus à l'exécution trop longue de scripts. Il transforme les traitements Javascript synchrones en processus asynchrones. Grâce à ce module, la synchronisation des données ou la capture de sites se fait de manière complètement transparente pour l'utilisateur. Toutes ces tâches sont effectuées en arrière-plan. Ecole des Mines de Nantes29

30 Détection automatique de la déconnection et affichage Téléchargement autonome des fichiers requis au fonctionnement de lapplication en mode déconnecté Ecole des Mines de Nantes30

31 Moteur d'exécution multi-plateforme Compatible Windows, Linux, Mac OS Moteur et SDK en téléchargement gratuit Applications bureau riches Véritablement déconnectées Solution la plus mature à ce jour Air 1.0 en mars 2008 Communauté active et nombreuses applications Ecole des Mines de Nantes31

32 Ecole des Mines de Nantes32 Google Gears Adobe Air Adobe Air

33 Installation dun moteur dexécution Code unique pour toutes les plateformes Langages ActionScript Pour les applications Flash ou Flex JavaScript Pour les applications AJAX Possibilité de les mélanger dans une même application Ecole des Mines de Nantes33

34 Intègre le moteur de rendu Webkit de Safari et Chrome Flash Player inclus API variée Son Vidéo Sécurité… et beaucoup dautres! Détection de connexion automatique Stockage des données en local en offline puis synchronisation dès le passage online Ecole des Mines de Nantes34

35 eBay Desktop Client bureau pour le site denchères Permet de faire un listing des objets à vendre offline et de synchroniser ensuite une fois connecté. Ecole des Mines de Nantes35

36 Matrice comparative Google GearsAdobe Air Date de sortie (1 ère version stable) Juin 2007Mars 2008 (version 1.0) Version (nov. 2008) Type dapplications viséRIARDA LicenceBSDEULA (Moteur)/Open Source Type de technologiePlug-in (~ 1Mo)Moteur dexécution (~ 13 Mo) Communauté / Support Gears.google.com Pré-requis au développement1 script dinitialisation1 SDK (~ 12 Mo) Langages utilisables pour le développement JavaScriptFlash / Flex / JavaScript ExtensionDojoX (simplification)non ExemplesZoho Mail, Google Reader…eBay Desktop, AOL Top 100 Videos… Ecole des Mines de Nantes36

37 OBJECTIF : Réaliser une application fonctionnelle simple illustrant quelques unes des possibilités du mode déconnecté. Ecole des Mines de Nantes37

38 Choix du prototype Ajouter à l'application web ZenContact un mode déconnecté Ecole des Mines de Nantes38

39 Objectifs du prototype: Rajouter un contact à la liste en mode déconnecté Synchroniser la liste avec le serveur lors de la reconnexion Ecole des Mines de Nantes39

40 Design du prototype Ecole des Mines de Nantes40

41 Liste des fichiers 4 fichiers jsp pour accéder à la base de données du serveur index.html: page principal offline.js: contient tout le code javascript pour utilise l'API Gears manifest.json: liste des fichiers nécessaires au fonctionnement hors-ligne gears_init.js: script d'initialisation pour Gears prototype.js & DatePicker.js: framework pour AJAX Ecole des Mines de Nantes41

42 Exemple de code // Create the local database if not exists // 1. One stores all customers (same data as the one stored on the server) // 2. The other one stores the queuing customer function initializeDB() { try { db = google.gears.factory.create('beta.database', '1.0'); } catch (ex) { alert('Could not create database: ' + ex.message); } if (db) { db.open('gears'); db.execute('CREATE TABLE IF NOT EXISTS localContact ( id int, firstName varchar(255), lastName varchar(255), varchar(255), notes varchar(255), language varchar(255), category varchar(255), active bool, birthDate Date)'); db.execute('CREATE TABLE IF NOT EXISTS datablobs ( id_contact int, status int )'); localServer = google.gears.factory.create("beta.localserver"); } Ecole des Mines de Nantes42 Créer le serveur local pour les fichiers du manifest Créé 2 tables pour la gestion des contacts dans la base SQLite

43 Prototype final: démonstration Ecole des Mines de Nantes43

44 Problèmes rencontrés Difficultés de debuggage avec le Javascript Pas de gestion de synchronisation concurrente des contacts Détection de la connexion difficile à maitriser Intégration de l'API Gears à Wicket assez compliquée Récupération de la page principale de ZenContact et recodage de toutes les fonctions metiers et ajout des JSPs. Ecole des Mines de Nantes44

45 But Obtenir une version Adobe Air de lapplication ZenContact ayant des fonctionnalités offline similaires à celles de lapplication codée avec Google Gears Deux méthodes possibles « à la main » « avec les outils de développement » Ecole des Mines de Nantes45

46 AvantagesInconvénients Code maitrisé de bout en bout Utilisation doutils gratuits uniquement Idéal pour apprendre Méthode fastidieuse quand le nombre de fichier augmente Débogage limité Design plus difficile Ecole des Mines de Nantes46

47 Quels outils? Dreamweaver CS3 Éditeur de sites web permettant une conception par code et par design direct (What You See Is What You Get ) Extention Adobe Air pour Dreamweaver Plug in développé par Adobe ajoutant le support de Air à Dreamweaver FlexBuilder 3.0 IDE basé sur Eclipse pour le développement dapplications web en Flex (format SWF) Ecole des Mines de Nantes47

48 Permet lutilisation de wizards pour la création du XML de déploiement, du certificat de signature numérique ou du packaging de lapplication finale Ecole des Mines de Nantes48

49 Ecole des Mines de Nantes49

50 AvantagesInconvénients Rapide Efficace Facile dutilisation Adapté à la réalisation dapplications dentreprises (beaucoup de fichier inclus dans une même application) Solutions payantes Dreamweaver: 300 Flex Builder: 215 Méthode retenue malgré tout Utilisation des versions dessai des logiciels pour la réalisation du prototype Ecole des Mines de Nantes50

51 En Flex (ActionScipt) uniquement… Avantages: deboggage facile Inconvenient: nouveau langage a maitriser Utilisation dun Event Listener pour écouter lévènement Event.NETWORK_CHANGE Une fonction fait appel à une URL de test qui autorise le ping du server utilisé. Le résultat des tests du réseau permet dactiver ou non un drapeau (booléen) appelé networked Selon la valeur de networked on dirige les données vers la base de donnée SQLlite locale ou distante Ecole des Mines de Nantes51

52 Un simple double clic suffit… Ecole des Mines de Nantes52

53 Problèmes rencontrés Apprentissage de lActionScript Outils payants Temps limité Mises à jour concurrentes Ecole des Mines de Nantes53

54 OBJECTIF 1 : Conclure létude en émettant un avis clair et objectif sur les technologies étudiées. OBJECTIF 2 : Au regard de létude réalisée, envisager lavenir de ces technologies : A 1 an. A 3 ans. Ecole des Mines de Nantes54

55 Air et Gears sont les deux solutions les plus exploitables à lheure actuelle Mises en œuvre différentes RIA / RDA Ecole des Mines de Nantes55

56 Complet, fiable, évolutif Communauté active Déjà présent dans certaines applications Récemment Gmail Evolutions rapides Apparition de premiers « framework » facilitateurs Ecole des Mines de Nantes56

57 A un an: les prémices Prise de conscience généralisée de lintérêt du mode déconnecté Arrivée probable de concurrents (retard) Versions définitives 1.xx … Augmentation de lactivité sur les forums Ecole des Mines de Nantes57

58 A trois ans: la maturité Généralisation du mode déconnecté Technologie Gears incluse dans les outils de développement Web Gears devrait conserver son avance Abondance de documentation Ecole des Mines de Nantes58

59 Une grande importance accordée à la communication. Un partage des tâches réaliste. Des livrables partagés. Ecole des Mines de Nantes59

60 Des réunions « courtes » régulières (au moins 1x/sem.) : les jeudis lors du cours de gestion de projet : 1. Bilan global avec M. BLANC 2. Réunion au sein du groupe Des réunions « longues » aux moments-clés : Avant la remise des livrables (aux 4 phases donc) Rédaction systématique dun compte-rendu « Les paroles senvolent mais les écrits restent » Utilisé en cas dabsence (cas de Thomas en contrat de professionnalisation par exemple) Ecole des Mines de Nantes60

61 Courriel au sein de léquipe : Programmation des réunions Résumés des réunions / envoi des CRs Remontée des problèmes Courriels réguliers à M. ANDRE (tuteur- entreprise) : Au départ (spécifications, cahier des charges…). En cours de réalisation : état davancement. Au moment de la remise des livrables : contenu, prise en main. Contact téléphonique au début de la phase de prototypage (moment critique). Ecole des Mines de Nantes61

62 Lucidité : pas ou peu de travail pendant les vacances de Noël / le voyage à Javapolis. Implication de tous lors des phases « générales » : Prise de connaissance Conclusion Attribution dune tâche lors des phases « lourdes » : Approfondissement sur une technologie Prototypage La personne chargée de la tâche en prend la responsabilité. Cependant : idée générale de chacun sur le travail des autres. Gestion de projet : 2h/sem. réservées pour le chef de projet. Ecole des Mines de Nantes62

63 Rapport : présentation Powerpoint (en accord avec M. ANDRE). Partage des sources à laide de Google Code (outil spécialisé, gratuit) : Accès possible depuis lextérieur. Accès possible en permanence pour M. ANDRE. Permet donc, moyennant quelques règles de bonnes pratiques, de travailler sur le même document simultanément. Ecole des Mines de Nantes63

64 Dun point de vue organisationnel Véritable gestion de projet Apprentissage de la démarche pour un sujet de veille technologique Dun point de vue technique Nouvelles technologies Sujet « brûlant » Ecole des Mines de Nantes64

65 Avez-vous des questions ?


Télécharger ppt "Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN Florent WEBER."

Présentations similaires


Annonces Google