Projet d’option ZENIKA – Ecole des Mines de Nantes

Présentation au sujet: "Projet d’option ZENIKA – Ecole des Mines de Nantes"— Transcription de la présentation:

1 Projet d’option ZENIKA – Ecole des Mines de Nantes
Florent WEBER Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN ZENIKA - Ecole des Mines de Nantes 1 1 1 1

2 Phase 3 : prototypage à l’aide de l’outil Google Gears
Phase 1 : problématiques et enjeux des applications Web en mode déconnecté Phase 2 : panorama du marché des solutions et comparaison par rapport à la technologie Google Gears Phase 3 : prototypage à l’aide de l’outil Google Gears Phase 4 : synthèse et prospective ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 2 2 2 2 2

3 . L’objectif de cette section est d’introduire le concept de « mode déconnecté » en présentant son contexte d’application, ses avantages et les moyens nécessaire à sa mise en œuvre. ZENIKA - Ecole des Mines de Nantes 3 3 3 3

4 ZENIKA - Ecole des Mines de Nantes
4 4

5 RIA : Rich Internet Application
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 (disque dur, périphériques...)‏ Utilisation locale (pas besoin de connexion)‏ ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 5 5 5 5 5

6 Exemples de technologies RIA
Adobe Flash Animations 3D Google Web Toolkit Composants graphiques avancés Boutons Editeur de texte ZENIKA - Ecole des Mines de Nantes 6 6 6

7 Exemples de technologies RDA
Adobe Air Le plus prometteur aujourd’hui. Cf. détails plus loin. Microsoft Silverlight 2.0 Peut servir pour la réalisation d’application RIA ou RDA Démarrage depuis le bureau ou depuis un site web au choix. Critiqué du fait qu’il ne soit pas Open Source. A terme, des contenus Web seraient donc réservés aux personnes ayant acheté les technologies Microsoft. Mozilla XulRunner Masqué par les 2 « grands » ZENIKA - Ecole des Mines de Nantes 7 7 7

8 Différence entre RDA et RIA
Les notions de RDA / RIA sont parfois utilisées à tort. De plus, avec l’arrivée du mode déconnecté, la frontière entre RDA et RIA est de plus en plus mince. En effet : 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 telles que eBay Desktop utilisent en permanence la connexion Internet et proposent des interactions similaires à celle d’une page Web. ZENIKA - Ecole des Mines de Nantes 8 8

9 Le mode déconnecté permet aux applications Internet :
L’accès aux ressources locales Une continuité du service ZENIKA - Ecole des Mines de Nantes 9 9 9

10 Il y a deux modes de déconnexion possible
Problème : La perte de connexion se traduit par une inutilisabilité du service dans le cas des applications Web “traditionnelles” Il y a deux modes de déconnexion possible Déconnexion implicite (non souhaitée)‏ Perte de réseau pour un téléphone portable. Passage dans un tunnel pour un ordinateur portable. Déconnexion explicite (volonté de l’utilisateur)‏ Economie du crédit de connexion Web pendant la rédaction d’un courrier électronique. ZENIKA - Ecole des Mines de Nantes 10 10 10

11 Il semble difficile pour certaines architectures d’offrir un mode déconnecté.
La raison est simple, les pages HTML affichées dans le navigateur sont générées côté serveur et non pas côté client comme avec GWT, Flex ou simplement HTML/Javascript. ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 11 11 11 11 11

12 Rendre une application "déconnectée" nécessite de rapatrier tout ou partie des traitements métiers sur le navigateur. Du coup, il semble nécessaire d'écrire ces traitements dans les langages spécifiques au client ou au serveur. En bref en HTML/JavaScript pour la partie client et en Java dans le cas d'un backend Java... Comment assurer une bonne répartition des traitements entre le serveur et le navigateur client ? ZENIKA - Ecole des Mines de Nantes 12 12 12

13 Comment gérer de gros volume de données
Comment gérer de gros volume de données ? Autrement dit, comment répartir la charge entre le client et le serveur ? Le serveur ne transmet au client que les données qui lui seront utiles pour les actions qu’il pourra réaliser en mode déconnecté… ZENIKA - Ecole des Mines de Nantes 13 13 13

14 Comment gérer les problèmes de mises à jour concurrentes
Comment gérer les problèmes de mises à jour concurrentes ? Comment rendre compte d'un problème de synchronisation à l'utilisateur ? Comment l’aider à résoudre ce problème de synchronisation ? Exemple : 2 utilisateurs effectuent une tâche sur leur poste en mode déconnecté, portant sur un même fichier. Comment gérer la convergence à la reprise de la connexion ? ZENIKA - Ecole des Mines de Nantes 14 14 14

15 Web téléphone portable Bureautique online Commerce
Webmail Web téléphone portable Bureautique online Commerce Cartographie – Itinéraires Blogs ZENIKA - Ecole des Mines de Nantes 15 15 15 15

16 La rédaction de mail via un webmail (ex: Gmail) nécessite une connexion à Internet
Grâce au mode déconnecté un utilisateur peut écrire un mail et l’ ”envoyer”. Lorsqu’il est de nouveau connecté à Internet l’envoi se fera de manière totalement transparente. Bien d’autres fonctionnalités sont possibles en mode déconnecté : consultation de mails, suppression de mails, configuration des comptes. La course au webmail déconnecté a été remportée par Zoho mail qui intègre Google Gears afin de disposer d’un mode “offline”. ZENIKA - Ecole des Mines de Nantes 16 16 16

17 Zoho Webmail Bien que Gears soit une technologie de Google, Zoho a été le premier à l’avoir mise en place. L’interface graphique de Zoho est plus riche que celle de Gmail, en effet elle ressemble beaucoup à l’interface de Mozilla Thunderbird. Bien que Gears sera considéré comme « mature » lors de son intégration par Google dans Gmail, Zoho fait preuve d’initiative en utilisant cette technologie pour son webmail et peut ainsi concurrencer Gmail . ZENIKA - Ecole des Mines de Nantes 17 17

18 Actuellement, lorsqu’un mobile n’est plus dans une zone couverte par son opérateur il devient impossible de réaliser des opérations via Internet (ex: écrire un mail). Des applications en mode déconnecté permettraient de s'abstraire des problèmes de connectivité. Cependant ces dernières ne peuvent être mises en place actuellement que sur des BlackBerry ou des mobiles dont l’OS repose sur J2ME (version mobile de java)‏ Une solution existe déjà : Gmail for mobile 2.0 qui permet de disposer d’un webmail en mode déconnecté. Dans un avenir proche d’autres applications disposant du mode déconnecté similaires à celles développées pour les PC devraient voir le jour. ZENIKA - Ecole des Mines de Nantes 18 18 18

19 Applications en mode déconnecté
La possibilité de travailler hors- ligne permettra à ces applications de se substituer aux applications clients lourds Applications traditionnelles Des logiciels de traitement de texte, de présentation et des tableurs sont récemment disponibles en ligne Ils offrent les mêmes fonctionnalités que les suites bureautiques telles que MS Office ou OpenOffice Inconvénient : Une fois déconnecté, impossibilité de travailler Avantages : Plus besoin d'installer la suite sur le poste client Tout sera utilisable par l'intermédiaire d'un navigateur Exemples: Zoho Writer, Google Docs, Project Draw 0.7 (Logiciels de Dessin pour présentation)‏ ZENIKA - Ecole des Mines de Nantes 19 19 19

20 Zoho Writer Après avoir mis en place le mode déconnecté pour son webmail, Zoho a récemment doté son éditeur de texte en ligne de cette fonctionnalité. La suite office que produit Zoho est plus poussée que celle de Google. En effet des reproches sont faits à la suite office de google notamment en ce qui concerne la pauvreté de son interface graphique mais aussi de sa navigabilité parfois difficile. Zoho devance encore une fois Google, démontrant ainsi sa participation active dans la communauté des suites offices online. ZENIKA - Ecole des Mines de Nantes

21 Zoho Writer Vs Google Doc
ZENIKA - Ecole des Mines de Nantes

22 Vérifier son planning de rendez-vous
Comme un commercial voyage beaucoup, il n'a pas toujours accès à Internet (pour son PDA ou ordinateur portable). Mais, même en déplacement, il a des besoins comme: Consulter ses s Vérifier son planning de rendez-vous Accèder aux infos de ses contacts (adresse, téléphone)‏ Proposer à ses clients un catalogue interactif de produits sous forme d'applications web (facilement modifiables)‏ La technologie en mode déconnecté lui offrira toutes ces fonctionnalités dans l'avion (pour aller à une conférence), ou chez un client résidant dans des zones non déservies (ou même dans des pays non connectés). ZENIKA - Ecole des Mines de Nantes 22 22 22

23 Rapidité dans la traitement de la commande.
Actuellement, la plupart des commandes sont prises sur papier. L'introduction d'applications permettant le mode déconnectés entrainera une accélération dans le processus de préparation et de livraison. La commande est saisie chez le client. Dès que le commercial a de nouveau accès à Internet, la commande est validée et transmise au centre de traitement. Rapidité dans la traitement de la commande. Synchronisation transparente. Exemples: Google Calendar Gmail Zoho Mail ZENIKA - Ecole des Mines de Nantes 23 23 23

24 Une fois un itinéraire calculé, si la connexion est interrompue il n’y a plus de possibilité de manipuler la carte. Hors, lors d’un voyage, il est toujours intéressant de disposer d’une carte interactive. Les fonctionnalités en mode déconnecté seraient dès lors de pouvoir zoomer sur une zone et ainsi pouvoir choisir un nouvel itinéraire. ZENIKA - Ecole des Mines de Nantes 24 24 24

25 La rédaction d'articles ou l'ajout de commentaires sur un blog nécessite une connexion Internet.
Toutes ces tâches pourront être réalisées hors-ligne et ensuite synchronisées avec le serveur hébergeant le blog Dans un train, avion, bus Exemples: Blogger -> blog.gears MySpace MySpace va introduire Google Gears sur ses blogs afin d‘économiser des ressources serveurs. Une partie des données sera ainsi stockée sur le poste client, réduisant la bande passante utilisée. ZENIKA - Ecole des Mines de Nantes 25 25 25

26 L’ensemble de l’étude s’appuiera sur cet outil.
Dans le cadre du projet, Google Gears a été choisi comme technologie de référence en termes d’applications Web en mode déconnecté. L’ensemble de l’étude s’appuiera sur cet outil. Google Gears a été élu produit de l'année par le magazine PC World devant l'iPhone ! Voir l’article ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 26 26 26 26 26

27 L’objectif de cette section est d’exhiber les technologies prometteuses en termes de « mode déconnecté » et de les comparer à l’outil Google Gears. ZENIKA - Ecole des Mines de Nantes 27 27 27 27

28 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 Cf. slide 24 ZENIKA - Ecole des Mines de Nantes 28 28 28

29 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 ZENIKA - Ecole des Mines de Nantes 29 29 29

30 ZENIKA - Ecole des Mines de Nantes
30 30 30

31 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 ZENIKA - Ecole des Mines de Nantes 31 31 31

32 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é. ZENIKA - Ecole des Mines de Nantes 32 32

33 AOL Top 100 Vidéos Vidéos sur son bureau
Fonctionnalités riches (plein écran, vidéos liées; publicités)‏ ZENIKA - Ecole des Mines de Nantes 33 33

34 Finetune Desktop Lecteur de musiques en ligne
Hautes performances requises à cause du streaming donc RIA difficile Capture les préférences des utilisateur stockées sur l’ordinateur pour la musique et peut ensuite proposer des morceaux et les lire en streaming Plus d’exemples d’applications Environ 180 applications déjà développées Lien vers le MarketPlace Adobe ZENIKA - Ecole des Mines de Nantes 34 34

35 Zimbra: l’arme de Yahoo pour se lancer dans le mode déconnecté
Alors que Google planche sur Gears, Yahoo offre un mode déconnecté à son webmail via Zimbra Desktop. En effet, Yahoo a racheté Zimbra pour environ 350 millions de dollars. De cette manière Yahoo complète sa liste de service «Web 2.0» (FlickR, del.icio.us, MyBlogLog) avec une offre d’outils orientées « Entreprise 2.0 ». Mais qu’offre donc Zimbra pour engendrer un tel engouement de la part de Yahoo ? ZENIKA - Ecole des Mines de Nantes 35 35

36 Zimbra : présentation Zimbra est une suite collaborative qui comprend une solution serveur ainsi qu’un certain nombre d’applications en ligne orientée collaboration : Un webmail Des calendriers partagés avec gestion des contacts Un traitement de texte et un tableur en ligne Un moteur de « push mail » pour les collaborateurs nomades Des extensions pour relier Zimbra à d’autres clients de messagerie (Outlook, Thunderbird…)‏ Mais Yahoo s’est surtout intéressé à Zimbra Desktop qui est un RIA offrant un webmail, un calendrier et un système de gestion de contacts avec la possibilité de travailler en mode déconnecté. ZENIKA - Ecole des Mines de Nantes 36 36

37 Serveur distant de Zimbra
Zimbra Desktop : schéma (1/2)‏ ZENIKA - Ecole des Mines de Nantes Client Serveur AJAX Navigateur Web/Prism Jetty Derby Serveur distant de Zimbra SOAP/HTTP(S) 37 37

38 Zimbra Desktop : schéma (2/2)‏
Jetty : un serveur HTTP et un moteur de servlet 100% implémentés en Java. Prism : navigateur web léger dont le moteur de rendu est basé sur celui de Firefox. Derby : base de données de petite taille (2MB), appartenant au projet Apache et totalement implémentée en Java. ZENIKA - Ecole des Mines de Nantes 38 38

39 Zimbra Desktop : mode déconnecté
En mode connecté, Zimbra Desktop se synchronise avec le serveur distant afin de mettre à jour les données (mails, contacts…). Ces données sont alors stockées dans une base de données. En mode déconnecté, toutes les informations de l’utilisateur (envoi de mail, ajout de contact…) sont stockées dans cette BD pour être synchronisées une fois l’utilisateur reconnecté. Cependant Zimbra a développé sa propre implémentation et ce mode ne repose donc pas sur Google Gears. En effet une grande partie de la logique applicative de Zimbra réside dans le code « serveur ». Or Gears est fait pour être utilisé par des applications dont la logique est principalement implémentée en Javascript (code côté client). ZENIKA - Ecole des Mines de Nantes 39 39

40 Zimbra Desktop : conclusion
Le principal défaut de Zimbra Desktop vient de son toolkit Ajax qui n’offre pas de module de développement d’applications en mode « « déconnecté », ni de librairies pour communiquer avec une BD Derby. Zimbra Desktop est totalement gratuit, excepté sa licence commerciale qui est payante. La communauté Zimbra est active (notamment dans son forum). Cependant, les informations sont parfois difficiles à trouver surtout en ce qui concerne son implémentation du mode « déconnecté ». Au vu de ces informations Zimbra n’est donc pas en phase avec les besoins de notre projet du fait de son manque d’environnement de développement pour le mode déconnecté. Cependant, Zimbra reste un concurrent non négligeable dans la course au mode « déconnecté ». ZENIKA - Ecole des Mines de Nantes 40 40

41 Aperçu de Zimbra Desktop
ZENIKA - Ecole des Mines de Nantes

42 Yahoo! Browser Plus Microsoft Live Mesh Extentions du navigateur
Type plug-ins Fonctionnalités riches de type Desktop Drag n Drop Manipulation de fichiers Convertisseur Texte – Parole Mode déconnecté à l’étude Microsoft Live Mesh Synchronisation de différents appareils (mobile, portable, console…)‏ Données disponibles partout Mode déconnecté à venir ZENIKA - Ecole des Mines de Nantes 42 42 42

43 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. ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 43 43 43 43 43

44 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é. ZENIKA - Ecole des Mines de Nantes 44 44

45 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. ZENIKA - Ecole des Mines de Nantes 45 45

46 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 ZENIKA - Ecole des Mines de Nantes 46 46

47 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. ZENIKA - Ecole des Mines de Nantes 47 47

48 Les différents termes sont explicités plus loin…
La synchronisation s'effectue toute seule Avec la synchronisation en tâche de fond (Background sync), l'application web se synchronise automatiquement et continuellement : Les différents termes sont explicités plus loin… ZENIKA - Ecole des Mines de Nantes 48 48

49 La synchronisation s'effectue toute seule
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. ZENIKA - Ecole des Mines de Nantes 49 49

50 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. ZENIKA - Ecole des Mines de Nantes 50 50

51 Fonctionnalités supplémentaires
Quelques fonctionnalités intéressantes ont été ajoutées à la version 0.4 de Gears : 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 permettant la création de raccourcis sur le bureau (à partir de la page web) et l'accès aux fichiers stockés sur le poste client. ZENIKA - Ecole des Mines de Nantes 51 51

52 Dojo et Google Gears Dojo est un framework permettant le développement d’application web dynamique 100% implémentée en javascript. Un des avantages de dojo est qu’il possède une extension (dojoX) qui intègre Google Gears. Cette extension fournit une couche d’abstraction facilitant ainsi l’utilisation de Google Gears. Cependant il ne dispose pas encore de toutes les fonctionnalités offertes par Google Gears comme la géolocalisation ou la gestion de BLOB. Mais Dojo est en constante évolution du fait d’une communauté vraiment active. ZENIKA - Ecole des Mines de Nantes

53 DojoX 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é ZENIKA - Ecole des Mines de Nantes

54 Bilan : les nominés sont…
Finalement, il ressort de l’étude préalable que les 2 solutions aujourd’hui suffisamment abouties pour réaliser des applications en mode déconnecté sont Google Gears et Adobe Air. Cependant, leur mode d’utilisation est très différent et il convient de bien distinguer les fonctionnalités de chacun. On va comparer ces 2 technologies sur les critères suivants : Date de sortie, version, licence Type d’applications visé : RIA, RDA, autre Extensions disponibles Communauté, support Type de technologie Développement : pré-requis, langages utilisables ZENIKA - Ecole des Mines de Nantes 54 54

55 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)‏ ? Exemples Zoho Mail, Google Reader… eBay Desktop, AOL Top 100 Videos… ZENIKA - Ecole des Mines de Nantes 55 55

56 Phase 3 Prototypage à l’aide de Google Gears
L’objectif de cette troisième partie est la réalisation d’un qui devra mettre en jeu les principaux aspects de la technologie Google Gears. ZENIKA - Ecole des Mines de Nantes 56 56 56 56

57 Choix du prototype Ajouter à l'application web ZenContact un mode déconnecté ZENIKA - Ecole des Mines de Nantes 57 57

58 ZenContact 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 Objectifs du prototype: rajouter un contact à la liste en mode déconnecté synchroniser la liste avec le serveur lors de la reconnexion ZENIKA - Ecole des Mines de Nantes 58 58

59 Design du prototype ZENIKA - Ecole des Mines de Nantes 59 59

60 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 ZENIKA - Ecole des Mines de Nantes 60 60

61 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 ZENIKA - Ecole des Mines de Nantes 61 61

62 Prototype final ZENIKA - Ecole des Mines de Nantes 62 62

63 Prototype final 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 ZENIKA - Ecole des Mines de Nantes 63 63

64 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. ZENIKA - Ecole des Mines de Nantes 64 64

65 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 (cf slides suivantes) « à la main » « avec les outils de développement » ZENIKA - Ecole des Mines de Nantes 11/11/08

66 Méthode 1: « à la main » Création de fichiers HTML, Css, Javascript et XML avec un simple éditeur de texte. Compilation et packaging en ligne de commandes ZENIKA - Ecole des Mines de Nantes 11/11/08

67 Descripteur de déploiement XML
Permet de configurer l’application: fichier à charger au démarrage, taille de la fenêtre… ZENIKA - Ecole des Mines de Nantes 11/11/08

68 Lignes de commandes Preview de l’application
adl application.xml Signature numérique de l’application adt -certificate -cn SelfSigned 1024- RSA certificat.pfx motdepasse Compilation et packaging (obtention du fichier .air) adt package storetype pkcs12keystore certificat.pfx ZenContactAir.air application.xml  ListeDesFichiersAInclure ZENIKA - Ecole des Mines de Nantes 11/11/08

69 Méthode 1: conclusion 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 ZENIKA - Ecole des Mines de Nantes 11/11/08

70 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) ZENIKA - Ecole des Mines de Nantes 11/11/08

71 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 ZENIKA - Ecole des Mines de Nantes 11/11/08

72 Aperçu du prototype (1) ZENIKA - Ecole des Mines de Nantes 11/11/08

73 Aperçu du prototype (2) ZENIKA - Ecole des Mines de Nantes 11/11/08

74 Méthode 2: conclusion Avantages Inconvénients 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 ZENIKA - Ecole des Mines de Nantes 11/11/08

75 Détection du réseau (1) Pré requis:
Connaissances pratiques en Flex 3, MXML, et ActionScript 3.0 FlexBuilder 3.0 La détection du statut du réseau ne peut se faire qu’en Flex (pas de Javascript pour cette partie) ZENIKA - Ecole des Mines de Nantes 11/11/08

76 Détection du réseau (2) Utilisation d’un Event Listener pour écouter l’évènement Event.NETWORK_CHANGE Utilisation de la méthode checkNetworkConnection() au démarrage de l’application pour vérifier le statut de la connexion Le code de cette méthode est décrit dans la slide suivante Cela donne une fonction initialiser() dont le corps est: NativeApplication.nativeApplication.addEventListener(Event. NETWORK_CHANGE, checkNetworkConnection); checkNetworkConnection(); ZENIKA - Ecole des Mines de Nantes 11/11/08

77 Détection du réseau (3) La fonction checkNetworkConnection fait un appel à une URL de test qui autorise le ping du server utilisé. On lui ajoute une série de listeners pour vérifier la connexion, si un appel HTTP peut être effectue et si il n’y a pas d’erreur Cela donne: ZENIKA - Ecole des Mines de Nantes 11/11/08

78 Détection du réseau (4) Le résultat des tests du réseau permet d’activer ou non un drapeau (booléen) appelé networked Cela se fait comme suit: Selon la valeur de networked on dirige les données vers la base de donnée SQLlite locale ou distante ZENIKA - Ecole des Mines de Nantes 11/11/08

79 Installation de l’application
L’installation de l’application sur le poste client se fait par un simple double click sur le fichier .air (installation du moteur d’éxécution Air préalable sur sa machine) ZENIKA - Ecole des Mines de Nantes 11/11/08

80 L’objectif de cette dernière section est de conclure l’étude réalisée en émettant un jugement clair et objectif sur la technologie Google Gears, en essayant d’anticiper les évolutions sur une période d’un à trois ans. ZENIKA - Ecole des Mines de Nantes 80 80 80 80

81 Solutions exploitables
A l’heure actuelle, 2 solutions « sérieuses » existent pour créer des applications Web permettant le mode déconnecté : Google Gears Adobe Air Cependant, si ces solutions peuvent conduire à un résultat similaire, la mise en œuvre est très différente : Google Gears : on ajoute à l’application initiale (exécutable dans un navigateur) des fonctionnalités qui permettent l’accès aux ressources locales. Adobe Air : on ajoute à l’application de bureau une connectivité à Internet (on simule le résultat d’un navigateur). ZENIKA - Ecole des Mines de Nantes 11/11/08

82 Difficultés de mise en œuvre (1/2)
Globalement, les techniques de mode déconnecté n’en sont qu’à leurs balbutiements. Google Gears comme Adobe Air présentent dans l’immédiat un certain nombre de difficultés dans leur mise en œuvre. Adobe Air : à remplir par Jérémy ZENIKA - Ecole des Mines de Nantes 11/11/08

83 Difficultés de mise en œuvre (2/2)
Google Gears : sans framework, l’utilisation actuelle de l’outil reste délicate pour les raisons suivantes : Utilisation exclusive du JavaScript (difficultés de débogage…). Communauté en développement (bien qu’active) : peu d’exemples pour le moment. ZENIKA - Ecole des Mines de Nantes 11/11/08

84 Gears, l’outil le plus avancé
Toutefois, si l’on devait élire la solution actuellement la plus exploitable, le choix se porterait sur Google Gears. Dans ce qui suit, on va rappeler les points forts essentiels de cet outil. Enfin, nous essaierons de prévoir l’avenir de Google Gears dans un avenir proche (1 à 3 ans). ZENIKA - Ecole des Mines de Nantes 11/11/08

85 Points forts (1/3) Un produit « made in Google » :
Google a la réputation de fournir des produits complets, fiables et évolutifs. Cette réputation joue en faveur de Google Gears : les utilisateurs potentiels hésiteront moins à s’engager s’ils savent qu’il s’agit d’un produit Google. Une activité importante sur les forums : Les échanges qui ont lieu sur le forums montrent l’intérêt qui est porté par les développeurs aux fonctionnalités du mode déconnecté. Dans les moteurs de recherche (Google…), l’entrée « mode déconnecté » mène très souvent à des articles sur Google Gears. ZENIKA - Ecole des Mines de Nantes 11/11/08

86 Points forts (2/3) Un outil déjà présent dans un certain nombre d’applications : Exemple : ? Cette présence témoigne de la volonté des concepteurs d’inclure dans leurs applications des fonctionnalités de mode déconnecté. Des évolutions rapides : Même à l’état de prototype (versions 0.x), de nouvelles versions sont mises à disposition régulièrement, enrichies de nouvelles fonctionnalités. ZENIKA - Ecole des Mines de Nantes 11/11/08

87 Points forts (3/3) Des « frameworks » qui simplifient l’utilisation de Google Gears : DojoX : cette bibliothèque rend plus simple la mise en place d’applications en mode déconnecté à l’aide de Google Gears. De telles initiatives sont bénéfiques puisqu’elles créent un regain d’activité autour de Google Gears. ZENIKA - Ecole des Mines de Nantes 87 87

88 Prévision à 1 an : les prémices (1/2)
On peut faire les suppositions suivantes : Prise de conscience, dans la communauté des développeurs Web, de l’intérêt des fonctionnalités de mode déconnecté. Arrivée de concurrents à Google Gears, certainement avec des technologies moins avancées (retard). Mise à disposition de versions définitives (1.x et supérieures) : stabilité renforcée et fonctionnalités toujours plus nombreuses. ZENIKA - Ecole des Mines de Nantes 88 88

89 Prévisions à 1 an : les prémices (2/2)
Eventuellement, apparition d’autres « frameworks » qui simplifieront l’utilisation de Google Gears en tenant lieu de « surcouche ». Activité croissante sur les forums au fur et à mesure de l’émergence des technologies de mode déconnecté dans les applications Web. ZENIKA - Ecole des Mines de Nantes 11/11/08

90 Prévision à 3 ans : la maturité (1/2)
On peut faire les suppositions suivantes : L’inclusion de fonctionnalités de mode déconnecté dans les applications Web va se généraliser. De ce fait, les produits Google Gears vont être inclus dans les outils de développement Web (Java, .Net…) : leur utilisation en sera simplifiée et les développeurs n’hésiteront plus à l’introduire dans leurs applications. D’autres outils concurrents devraient exister mais Google Gears gardera certainement une longueur d’avance en raison de ses initiatives actuelles (pionnier). ZENIKA - Ecole des Mines de Nantes 90 90

91 Prévisions à 3 ans : la maturité (2/2)
Des articles Web abondants (forums, tutoriels…) : les outils de mode déconnecté vont devenir une technologie à part entière. ZENIKA - Ecole des Mines de Nantes 11/11/08

92 Références (1/2)‏ Page Titre URL de référence 1 à 3 - 4 Chronologie
Wikipédia (aux technologies concernées)‏ 5 à 8 9 à 12 Enjeux des AWMD TODO 13 14 à 20 Exemples d’applications 21 Google Gears 22 23 à 27 Adobe Air 28 Browser + / Live Mesh 29 à 30 Composants et Schéma Google Gears 31 32 ZENIKA - Ecole des Mines de Nantes 92 92 92

93 Références (2/2)‏ Page Titre URL de référence 93
ZENIKA - Ecole des Mines de Nantes 93 93