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

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
PROJET D’OPTION Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN Florent WEBER

2 Applications Web en mode déconnecté
Tuteur-entreprise : M. Nicolas ANDRE (ZENIKA) Tuteur-école : M. Hervé GRALL

3 Plan Présentation Contexte d’application 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 l’utilité du mode déconnecté Bilan : un projet enrichissant Ecole des Mines de Nantes

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

5 Contexte : une connectivité à Internet variable
Exemple : un voyage en train : le passage dans un tunnel provoque la perte de la connexion. Impossible de terminer l’envoi 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 Nantes

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

7 Un mot sur la gestion de projet…
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 Nantes

8 Gestion de projet (1/2) L’organisation du projet est basée sur le découpage en 4 phases : Phase 1 : Découverte Implication de tous afin d’avoir 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 Nantes

9 Gestion de projet (2/2) 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 Nantes

10 Phase 1 : Découverte OBJECTIF : Pour chacun des membres de l’équipe, découvrir : Le contexte d’application Les intérêts du mode déconnecté Les principaux acteurs Les briques technologiques essentielles Ecole des Mines de Nantes

11 Mode déconnecté, qu’est ce que c’est?
Fusion RIA/RDA RIA : Rich Internet Application Lancement dans le navigateur Pas d’installation RDA : Rich Desktop Application Installation sur le poste client Accès aux ressources de l’ordinateur Utilisation locale Ecole des Mines de Nantes

12 Différence entre RDA et RIA
L’arrivé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 qu’une page web. Ecole des Mines de Nantes

13 Mode déconnecté, qu’est ce que c’est?
Palier le plus gros défaut des RIA : une perte de connexion => perte du service Permettre aux RIA d’accéder aux ressources locales afin d’assurer la continuité du service Il existe 2 modes de déconnexion : Explicite : voulue par l’utilisateur Implicite : non souhaitée par l’utilisateur Ecole des Mines de Nantes

14 Enjeux des applications Web en mode déconnecté
Il est difficile pour certaines architectures d’offrir 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 Nantes

15 Enjeux des applications Web en mode déconnecté
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 Nantes

16 Phase 2 : Approfondissement
OBJECTIF : Réaliser un panorama de l’existant afin de sélectionner les solutions pertinentes. Ecole des Mines de Nantes

17 Yahoo se lance dans le mode déconnecté
Yahoo offre un mode déconnecté à son webmail via Zimbra Desktop FlickR, MyBlogLog: exemples de services offerts par Yahoo Mais qu’offre donc Zimbra pour engendrer un tel engouement de la part de Yahoo? Ecole des Mines de Nantes

18 Zimbra : présentation Zimbra est une suite collaborative comprenant une solution serveur ainsi qu’un certain nombre d’applications : Webmail Calendrier partagé avec gestion de contacts Des extensions pour relier Zimbra à d’autres clients de messagerie (Outlook, Thunderbird…) Yahoo s’est 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 Nantes

19 Zimbra Desktop : schéma (1/2)
Ecole des Mines de Nantes

20 Zimbra Desktop : schéma (2/2)
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 Nantes

21 Zimbra Desktop : retour au schéma
Ecole des Mines de Nantes

22 Zimbra Desktop : conclusion
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 Nantes

23 L’API Gears est composée de 3 modules :
Les applications web déconnectées utilisant Gears fonctionnent sans serveur HTTP local. L’API 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 Nantes 23 23 23

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 Nantes 24

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 Nantes 25

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 Nantes 26

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 Nantes 27

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 : Le « Sync Engine » assure une synchronisation continue entre le serveur et le client grâce à la techonologie Comet (AJAX 2.0). Comet garde une connexion ouverte entre les deux postes pour que le serveur puisse envoyer des donnés en continu sans requête préalable du client. Ensuite, il ajoute les données à « Local Database ». Quand l'utilisateur clique sur un bouton, le « Data Switch » oriente les appels de l'UI vers le « Server Data Layer » (mode connecté) ou vers le « Local Data Layer » (mode déconnecté). Les couches « Data Layer » interrogent la BD locale ou la BD du serveur. Ecole des Mines de Nantes 28

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. Nouvelles fonctionnalités dans Gears 0.4 Géolocalisation La manipulation de BLOB (Binary Large Object) comme des images, sons ou vidéos dans du code Javascript (passage par référence). Desktop API Ecole des Mines de Nantes 29

30 Détection automatique de la déconnection et affichage
Téléchargement autonome des fichiers requis au fonctionnement de l’application en mode déconnecté Dojo est un framework permettant le développement d’application web dynamique 100% implémentée en javascript. Ecole des Mines de Nantes

31 Adobe Integreted Runtime (AIR)
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 Nantes 31 31

32 Adobe Air et Google Gears: deux philosophies antagonistes ….
Ecole des Mines de Nantes

33 Adobe Air: Fonctionnement
Installation d’un moteur d’exé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 Nantes 33 33

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

35 Adobe Air: un exemple d’application
eBay Desktop Client bureau pour le site d’enchères Permet de faire un listing des objets à vendre offline et de synchroniser ensuite une fois connecté. Ecole des Mines de Nantes 35

36 Matrice comparative Google Gears Adobe Air Date de sortie
(1ère version stable)‏ Juin 2007 Mars 2008 (version 1.0)‏ Version (nov. 2008)‏ 0.4 1.5 Type d’applications visé RIA RDA Licence BSD EULA (Moteur)/Open Source Type de technologie Plug-in (~ 1Mo)‏ Moteur d’exécution (~ 13 Mo)‏ Communauté / Support Gears.google.com Pré-requis au développement 1 script d’initialisation 1 SDK (~ 12 Mo)‏ Langages utilisables pour le développement JavaScript Flash / Flex / JavaScript Extension DojoX (simplification)‏ non Exemples Zoho Mail, Google Reader… eBay Desktop, AOL Top 100 Videos… Ecole des Mines de Nantes 36

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

38 Choix du prototype Ajouter à l'application web ZenContact un mode déconnecté Application web de gestion de contacts reposant sur le framework Wicket Il est possible de créer, modifier ou supprimer un contact de sa liste Ecole des Mines de Nantes 38

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 Nantes 39

40 Design du prototype Ecole des Mines de Nantes 40

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 Nantes 41

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"); Créé 2 tables pour la gestion des contacts dans la base SQLite Créer le serveur local pour les fichiers du manifest Ecole des Mines de Nantes 42

43 Prototype final: démonstration
Faire la démonstration Widget graphique pour le statut de la connexion et de la synchronisation avec le serveur Affichage des contacts dans la file d'attente pour la synchronisation Images pour l'état des contacts Synchronisation automatique lors de la reconnexion La déconnexion n'est détectée qu'à travers l'option “Travailler en hors-connexion” du menu Ecole des Mines de Nantes 43

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 Nantes 44

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

46 Méthode 1: « à la main » Avantages Inconvénients
Code maitrisé de bout en bout Utilisation d’outils 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 Nantes

47 Méthode 2: « avec des outils de développement»
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 d’applications web en Flex (format SWF) Ecole des Mines de Nantes

48 Extention Adobe Air pour Dreamweaver
Permet l’utilisation de wizards pour la création du XML de déploiement, du certificat de signature numérique ou du packaging de l’application finale Ecole des Mines de Nantes

49 Aperçu du prototype Ecole des Mines de Nantes

50 Méthode 2: conclusion Rapide Efficace Facile d’utilisation
Adapté à la réalisation d’applications d’entreprises (beaucoup de fichier inclus dans une même application) Solutions payantes Dreamweaver: 300 € Flex Builder: 215 € Méthode retenue malgré tout Utilisation des versions d’essai des logiciels pour la réalisation du prototype Avantages Inconvénients Ecole des Mines de Nantes

51 Détection du réseau En Flex (ActionScipt) uniquement…
Avantages: deboggage facile Inconvenient: nouveau langage a maitriser Utilisation d’un 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 d’activer 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 Nantes

52 Installation de l’application
Un simple double clic suffit… Ecole des Mines de Nantes

53 Problèmes rencontrés Apprentissage de l’ActionScript Outils payants
Temps limité Mises à jour concurrentes Ecole des Mines de Nantes 53

54 Phase 4 : Prévisions & Conclusion
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 l’avenir de ces technologies : A 1 an. A 3 ans. Ecole des Mines de Nantes

55 Gears, l’outil le plus avancé…
Air et Gears sont les deux solutions les plus exploitables à l’heure actuelle Mises en œuvre différentes RIA / RDA Ecole des Mines de Nantes

56 Gears, un produit « made in Google »
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 Nantes

57 Prévisions à court terme
A un an: les prémices Prise de conscience généralisée de l’intérêt du mode déconnecté Arrivée probable de concurrents (retard) Versions définitives 1.xx … Augmentation de l’activité sur les forums Ecole des Mines de Nantes

58 Prévisions à plus long terme
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 Nantes

59 Organisation au sein de l’équipe
Une grande importance accordée à la communication. Un partage des tâches réaliste. Des livrables partagés. Ecole des Mines de Nantes

60 Communication (1/2) 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 d’un compte-rendu « Les paroles s’envolent mais les écrits restent » Utilisé en cas d’absence (cas de Thomas en contrat de professionnalisation par exemple) Ecole des Mines de Nantes

61 Communication (2/2) 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 d’avancement. 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 Nantes

62 Partage des tâches 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 d’une 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 Nantes

63 Format des livrables Rapport : présentation Powerpoint (en accord avec M. ANDRE). Partage des sources à l’aide de Google Code (outil spécialisé, gratuit) : Accès possible depuis l’exté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 Nantes

64 Un projet enrichissant…
D’un point de vue organisationnel Véritable gestion de projet Apprentissage de la démarche pour un sujet de veille technologique D’un point de vue technique Nouvelles technologies Sujet « brûlant » Ecole des Mines de Nantes

65 Avez-vous des questions ?
Fin Avez-vous des questions ?