Home

Texte intégral View

1. v Orsat gt gt Provins gt Tuipe gt gt Cabernet gt Vins des Chevaliers Chardonnay gt Cornalin de Sierre gt Diolinoir V troz gt D le de Sion gt Diolinor Provins gt Screenshot 2 afficher le d tail d un vin En cliquant sur un vin l utilisateur va pouvoir afficher le d tail d un vin Il pourra galement le noter et le commenter avant de l ajouter sa liste de favoris ou alors le partager sur les r seaux sociaux mil ABC 02 39 PM D Vins et encaveurs Q cdi d sirs Cave de Sierre Accord et mets Amgne de V troz Volalles agneau gbier et fromages Blanc de Gamay v v v v _ Chardonnay LAS Mon commentaire Parfait pour le souper du 13 Diolinoir V troz viiv v D le de Sion L onard Stalder 52 HES SO Valais 2012 Hes s0 MS HR Re Re Re terre ee en teens no 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Screenshot 3 lister les vins d un encaveur Sous l onglet encaveurs l utilisateur peut afficher le d tail d un encaveur et les vins propos s Il est galement possible afficher le d tail d un vin par un clic D Vins
2. un boire un verre depuis la carte 3 Utilisateur Afficher les informations g n rales sur Vin a Utilisateur Afficher une page propos T che e Jejeje D wlml H Afficher l aide de l application Afficher le programme de la manifestation Afficher les animations de la manifestation Utilisateur S lectionner un parcours propos Utilisateur G o localiser le vin depuis le menu d tail d un vin 3 Afficher des bandeaux publicitaires Utilisateur lister les parcours qui me sont propos s Utilisateur Lister les vins d un parcours L onard Stalder 57 HES SO Valais 2012 So VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 e Hes so waus 00000000000000000000000000000000000000000000000000000000000000000000000000000000009 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Annexe VI Planification des Sprints Sprint 1 60 h planifi es 28 05 12 16 06 12 10 Em o Sprint 2 120 h planifi es 16 06 12 16 07 12 Cr ation du sch ma de base de donn es Mise en place de la base de donn es local ou Mise en place sync des donn es en cours Mise en place du webservice distant en cours 1 O Oleje U1 U1 U en cours i i i i i i i i i i l i
3. jour ces pages n importe quel moment elles ne sont pas embarqu es dans le projet PhoneGap mais stock es sur un serveur distant Elles sont r cup r es depuis ce serveur et ins r es l int rieur d une balise HTML nomm e iframe Celle ci permet d int grer un site internet distant l int rieur de notre application Les pages html externes sont t l charg es sur le t l phone et affich es l int rieur de la balise iframe Nous avons rencontr un probl me avec cette balise Son comportement sur d finissait le comportement de certaines balises de notre application et cr ait des r actions non attendues Afin de contourner ce probl me nous avons d retirer certaines balises lors de l affichage des pages en question Figure 25 Int gration de pages html distantes L onard Stalder 37 HES SO Valais 2012 Hes so wais PHRF TSEMEMEEMEME NES EEE e 60060600000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Graphisme mobile de l application Comme mentionn dans notre tat de l art nous avons d cid ne pas utiliser de librairies graphiques pour la simple et bonne raison qu elles ralentissent trop les performances des applications hybrides
4. 18543 idCave 963 nomCave Rimuss und Weinkellerei Rahm cepage Chardonnay nom annee 2010 created _at 2012 08 09T08 32 38 02 00 updated_at 2012 08 097T08 32 38 02 00 deleted_at null VALEUR VALEUR id 963 id 15 idTente 15 name Caves de Gen ve nomCave Cave les Ruinettes code 6 adresseCave Rue des Vignerons 88 latitude 46 292856 npaCave 1963 ongitude 7 532272 ieuCave V troz description emailCave serge roh bluewin ch created_at 2012 07 23721 52 14 02 00 siteCave http www vins roh com CLE relParcoursWine 10e33e3 eb36 dc61 e929 6cf62ad16e72 VALEUR idParcours 17229 idWine 18543 created_at 2012 08 09708 46 22 02 00 updated_at 2012 08 09708 46 22 02 00 deleted_at null id a10e33e3 eb36 dc61 e929 6cf62ad16e72 L onard Stalder HES SO Valais 2012 created_at 2012 08 09708 32 18 02 00 updated_at 2012 08 09708 32 18 02 00 deleted_at null CLE parcours 17229 VALEUR id 17229 idCave 907 nomCave Anne Catherine et Denis Mercier cepage Pinot Noir nom annee 2010 created_at 2012 08 09708 32 19 02 00 updated_at 2012 08 09708 32 19 02 00 deleted_at null Figure 22 Sch ma de base de donn es locale updated_at 2012 08 06720 46 57 02 00 deleted_at null 35 Hes so YANS HR I RRRRRIrRnrnRnnenNenNetReTIReTIRetiees 60
5. La mont e en puissance des applications hybrides Consult le 29 05 2012 sur http blog brightcove com fr 2011 11 la montee en puissance des applications hybrides Angelo Buscerni 23 03 2012 Trois approches pour le d veloppement d app mobiles Consult le 29 05 2012 sur http www ictiournal ch fr CH News 2012 03 20 Trois approches pour le developpement dapps mobiles aspx Peter Friese 2012 Cross Platform Mobile Development Consult le 29 05 2012 sur http www slideshare net peterfriese cross platform mobile development 11239246 Tony Lukasavage 20 04 2011 A deeper look at Appcelerator and PhoneGap Consult le 30 05 2012 sur http savagelook com blog portfolio a deeper look at appcelerator and phonegap Fran ois Petitit 17 10 2012 Applications mobile multi plateformes les approches PhoneGap et Titanium Mobile Consult le 30 05 2012 sur http blog octo com applications mobiles multi plateformes les approches phonegap et titanium mobile Gordon L Hempton 13 01 2012 The Top 10 Javascript MVC Frameworks Reviewed Consult le 31 05 2012 sur http codebrief com 2012 01 the top 10 javascript mvc frameworks reviewed Dave Feldman 23 01 2012 Comparing Mobile Web Frameworks Sench TOuch JQuery Mobile jJQTouch Titanium Consult le 12 06 2012 sur http operationproject com 2011 adventures in html5 part one L onard Stalder 43 HES SO Valais 2012 Haute Ecole Sp
6. Les avantages D veloppement avec des technologies web HTML5 CSS3 JS D veloppement avec des librairies JavaScript populaires D veloppement unique pour toutes les plateformes Le code source peut tre r utilis Les inconv nients Aucune distribution possible sur les plateformes de t l chargement d applications Performance moindre car les pages ne sont pas stock es en local mais doivent tre charg es lors de chaque requ te L acc s aux fonctions natives du t l phone est impossible ou dans certains cas tr s limit Une connexion internet est requise Les principaux outils JQuery Mobile Sencha Dojo Toolkit L onard Stalder 11 HES SO Valais 2012 Hes sO ME HR RR R RRIrRnR en enNetNeTReTIReTIRetiees 6000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 3 4 D velopper des applications hybrides Une application hybride est d velopp e en HTML5 CSS3 et JavaScript comme une application web classique Le projet web est ensuite ins r dans une coquille qui est d velopp e en langage natif Elle a pour but d afficher les pages web contenues sous forme de vues et de les faire communiquer avec les fonctions natives du t l phone Ceci
7. l g re et la plus optimis e pour des projets PhoneGabp En effet elle a t optimis e pour le moteur de rendu webkit utilis par PhoneGap Nous avons donc commenc le d veloppement de notre projet en utilisant ce Framework Rapidement nous avons remarqu qu il tait tr s performant mais qu il contenait beaucoup d erreurs et n tait pas assez complet par rapport aux fonctions propos es Les transitions taient lentes et souvent des comportements non souhait s surgissaient De plus JQMobi est tr s mal document Glossaire Moteur de rendu Glossaire Librairie de manipulation du DOM t6 Annexe 3 Tableau comparatif des Frameworks graphiques 17 Glossaire JaMobi L onard Stalder 17 HES SO Valais 2012 Hes s0 MS HR RIRE Re Re Re Re ee en teens 60060600000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Nous nous sommes donc int ress s la solution JQuery combin e avec du CSS M me si la combinaison Zepto js avec du CSS est plus l g re la librairie de s lection JQuery demeure plus stable et surtout plus rapide Cette variante nous a permis de d velopper un outil performant tout en rationnalisant le poids de notre projet Afin de simuler une exp
8. t d velopp e Cependant elle n tait pas assez performante pour une mise en production de l application d but ao t 2012 Elle contenait des bugs et apr s plusieurs tests sur le terrain nous avons remarqu que la g o localisation sur un aussi petit site que Vin a n tait pas assez pr cise Pour ces raisons et dans le but de nous concentrer sur l am lioration des fonctionnalit s existantes et ainsi garantir une mise en production d but ao t 2012 nous avons d un commun accord avec l institut Icare d cid d abandonner cette fonctionnalit pour cette version de l application L onard Stalder 28 HES SO Valais 2012 5 Hes so yga F EEEHNENENENENENENENENNENENNNENNNNN 60060600000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 3 Fonctionnement global Notre projet web a t embarqu dans deux coquilles natives une coquille iOS et une Android Celles ci nous permettent d avoir deux applications mobiles qui tournent sur deux syst mes d exploitation Dans cette partie du document nous allons nous int resser au projet web qui est embarqu dans la coquille PhoneGap et aux diff rentes interactions qu il effectue Nos deux applications mobiles son
9. 1 3 i i 3 i i ou ou ou ou ou ou ou ou ou ou ou ou ou 7 3 10 5 15 32 16 18 34 L onard Stalder 58 HES SO Valais 2012 Hes so e HR r E ERRER teens 6000000000000000000000000000000000000000000000000000000000000000000000000000000006 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Tester l application sous 108 o t o 17 afficher ma position sur la carte 4 oi activer d sactiver le tra age GPS 2 oi 12 Modifier mon valuation d un vin favori 1 oi 11 S lectionner un vin favori 1 o 13 exporter ma liste de favoris par mail 2 i __35 G o localiser le vin depuis le menu d tail d un vin 4 ouw wal o 7 O Sprint 3 90 h planifi es 16 07 12 30 07 12 Mise en place sync des donn es sprint 2 lou Mise en place du webservice distant sprint 2 2 ou Mise en place des images fournies par Vin a lou Bugs avec g o localisation 2fowi 19 Lier mon compte Facebook aow Afficher mes amis Facebook pr sents Vin a sur la 20 LA carte Abandonn 23 Inviter un ami Facebook un boire un verre depuis la carte non Afficher l aide de l application Afficher le programme de la manifestation Partager un parcours sur les r seaux sociaux 2 1 D
10. 2 Afficher des bandeaux publicitaires m Range de localisation pr voir une localisation uniquement l int rieur d un range Ajouter les stands sur la carte Toa oo l A L onard Stalder 59 HES SO Valais 2012 Hes s0 YANS HR nn RRRnrRnR R enNetretNeTIReTIRetiees 00600000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Sprint 2 90 h planifi es 30 07 12 13 08 12 us T che Story point Termin partager le vin d gust sur les r seaux sociaux sprint 3 2 oui a Afficher l aide de l application sprint 3 Afficher carte en off line sprint 3 afoui 1 Page a propos ajoi 7 Bugs avec g o localisation 2 ou 7 Sust me de pubs foi 77 Gestion de l historique de navigation 2 oui Int gration des pages Printto Mobile 4jou R duire temps de chargement de l application 5 jou Toa J ooo o A S L onard Stalder 60 HES SO Valais 2012 Hes so MMS SH RRRRRIRReIRenReIReNReRReIriens N 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz Unive
11. Afin d optimiser notre feuille de styles nous avons uniquement utilis des attributs CSS optimis s pour le moteur de rendu webkit Notre application ne fonctionne donc pas sur d autres moteurs de rendu web comme Gecko par exemple Ce choix nous a permis d optimiser notre feuille de styles pour notre projet web Ainsi nous avons pu all ger consid rablement les op rations effectu es lors de l affichage par le moteur de rendu Un gros effort t fourni pour que notre projet web ait un look mobile et surtout que notre feuille de styles soit facilement r utilisable dans d autres projets hybrides de l institut Icare La feuille de style de notre projet a t suffisamment comment e pour qu elle puisse tre r utilis e facilement Diff rences entre IOS et Android Th oriquement le d veloppement hybride est cens fonctionner Nous avons effectu notre d veloppement l aide d une coquille Android Lorsque nous avons voulu embarquer notre projet dans une coquille iOS quelques fonctionnalit s n avaient pas le m me comportement L initialisation de l application tait plus lente et les num ros des stands n apparaissaient pas sur les tentes Afin de r gler ces probl mes le code d initialisation de l application a t optimis et un calque suppl mentaire t cr e pour l affichage des num ros de tente Bouton retour Titre centr Titre gauche Au niveau de l ergonomie et de la gestion de l historique
12. Liste des caves Ce service retourne la liste des encaveurs On y trouve les informations relatives un encaveur Voici un exemple d un fichier JSON retourn PS PER nee I T nomCave Nouveau calguenen adresse Cave TBahnhnhorstrasse MBA ave Se NON Men ave a MQuenent eman ve n omar hier Com e eCe E Les in a o e a O O a a a a O 2 ROSES er SCO SOON ASS ETES EE E EE Al Liste des vins Ce service retourne la liste des vins On y trouve le nom du vin ainsi que le c page et l encaveur Voici un aper u d un fichier JSON retourn RACE PIC EN SSP Emo Mme MER PRO EMeMAMe ee CE MCD CENT OM MBOlENAI NS rot Torete ee 7 0e NT RS ROSE DES 02010 LS CEE Re OE Re OE RUES 071008 Ho ee Ce Sn CRI ee ci Liste des stands Ce service retourne la liste des stands de Vin a On y trouve le nom du stand avec ses coordonn es g ographiques afin qu on puisse le placer sur la carte Voici un aper u d un fichier JSON retourn SONO Memento sand TOT coden NEA Red 20 0e romeudenress 200 Pdea TPE Ona a AO a e CMELC Se ANUS T 108 e O SOUL UE Eee SZ US oo e EO TO OO T E E e PE een Liste des parcours Ce service retourne la liste des parcours que Vin a propose On y trouve le nom du parcours ainsi qu une br ve description Voici un aper u d un fichier JSON retourn OMS aee RE MS EC ore de la Syran comnmenl e Leo mellleure gt oyrah de Vin uone ga Seon Uone EM M er a a T S Oa O O a a a O a ISA E O e EC Sci VAR EAN L onard S
13. cialis e de Suisse occidentale Fachhochschule Westschweiz University of Applied Sciences Western Switzerland 5 Mes sO VA En nr nn nr I nn ni nn Rein nn Rene ent nee Application mobile multiplateforme pour l v nement viticole Vin a Travail de Bachelor 2012 Christian Simms 27 06 2011 HTML5 Storage Wars localStorage vs IndexedDB vs Web SQL Consult le 2 06 2012 sur http csimms botonomy com 2011 05 html5 storage wars localstorage vs indexeddb vs web sqal html Aaron Brethorst 6 06 2012 A primer on hybrid apps for iOS Consult le 12 06 2012 sur http www cocoacontrols com posts a primer on hybrid apps for ios Paul Krill 19 01 2012 JQMobi JavaScript framework boats faster mobile apps Consult le 4 06 2012 sur http Wwww infoworld com d application development jamobi javascript framework boasts faster mobile apps 184476 Test des outils Documentation de Batman js Consult partir du 31 05 2012 sur http batmanis org Documentation de JQTouch Consult partir du 12 06 2012 sur http www jatouch com Documentation de Twitter Bootstrap Consult partir du 12 06 2012 sur http twitter github com bootstra Documentation de JQuery Mobile Consult partir du 12 06 2012 sur http jquerymobile com Documentation de Zetpo js Consult partir du 13 06 2012 sur http zeptojs com Documentation de JqMobi Consult partir du 13 06 2012 sur http w
14. complet au niveau des informations disposition liste des encaveurs et produits tr s compl te avec beaucoup de d tails disposition Faiblesses application peu intuitive beaucoup d informations souvent mal structur es LIWF2012 London International Wine Fair 2012 Fonctionnalit s similaires Plan de situation liste des exposants avec possibilit de les g o localiser sur la carte Forces Navigation sur la carte tr s conviviale possibilit de localiser les stands Faiblesses application peu intuitive navigation difficile 2 2 4 Synth se L enqu te de terrain nous a permis de constater qu il y avait un vif int r t pour les fonctionnalit s sociales et un r el besoin de pouvoir interagir avec ses amis Facebook L analyse des applications des autres manifestations a principalement fait ressortir le manque de convivialit dans l utilisation Cependant la plupart des applications offrent bien plus de renseignements que l application actuelle de Vin a Cela nous encourage int grer plus d informations g n rales concernant la manifestation L onard Stalder 6 HES SO Valais 2012 yanas H EHEEEENSEEEEEEET ess EEE ess Eggs ess ess ses ege reg ege ses een enr Hes so is 20228002800880080008000080008000800000008820080 00080 008000020002002000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschw
15. couche graphique et la mise jour des donn es Cr ation du sch ma de base de donn es et mise en place de la base de donn es locale Liaison de la base de donn es avec la logique backbone Mise en place d objets qui lisent et crivent en base de donn es 05 07 2012 Cr ation d un webservice pour les tests qui renvoie la liste des caves Mise en place de la synchronisation des donn es en local 06 07 2012 Synchronisation des donn es et mise jour de la liste des vins automatis e Cr ation des fonctionnalit s favoris et recherche R flexion et r daction des donn es retourner par le webservice d finitif S ance avec David il va r aliser le backend en Rails Explication 5 04 07 2012 UT 09 07 2012 des donn es dont j ai besoin 10 07 2012 Mise en place de la synchronisation des donn es pour les caves les stands les parcours BR Cr ation d un mini webservice test pour les donn es ci dessus 11 07 2012 Cr ation et modification fonctionnalit s ajouter des vins favoris lister vins Fonctionnalit carte ajout des stands sur la carte et s lection d un stand Possibilit de s lectionner un vin favori Cr ation de la fonctionnalit Liste des parcours et la 12 07 2012 possibilit d en choisir un Fonctionnalit carte ajout de la g o localisation et terminer D O U9 s lection d un stand Ajout de stands tests s
16. de cette page il peut afficher l aide de l application ou la page propos Aucune SIM 15 37 Aucune SIM 15 37 Aucune SIM 15 37 Param tres Retour Aide Retour A propos Aide Aide R alisation Cette application a t r alis e par l insitut de recherche Icare Icare s emploie cr er des solutions innovantes dans les syst mes d information notamment par le d veloppement de logiciels in dits propres une production industrielle Gr ce Vin a Mobile A propos Vous pouvez situer les encaveurs pr sents lors de Vin a valuer des vins ou encore d vouvrir Vin a au travers de parcours d couvertes Vins Sur l cran Vins il est possible de lister les diff rents vins et encaveurs de rechercher des vins ou encore en cliquant sur le bouton g o localiser de situer le stand d un encaveur ou d un vin sur la carte Vous avez galement la possibilit de lister le d tail d une cave avec les informations sur celle ci et les vins qu elle offre www icare ch Carte L cran Carte permet en cliquant sur les emplacements d acc der la liste des wkx FO wkx FO u x F Ca C Car ane Jecouverte te Favoris D couverte Vins art Favoris Vine ARE arte Favoris D couverte Programme Vins Figure 16 Param tres L onard Stalder 27 HES SO Valais 2012 o VALAIS EE EE Hes so wus RELEASES EEE EREP ER EEE EEE EEE AE ER RS Haute Ecole
17. et encaveurs Vins Encaveurs O Vins des Chevaliers Salquenen Screenshot 4 Fonction de recherche Une barre permet l utilisateur de saisir un terme recherch concernant les vins et les encaveurs O Vins et encaveurs l Vins Encaveurs ss ovar Les fis Maye Vins des Cheveaux gt L onard Stalder 53 HES SO Valais 2012 University of Applied Sciences Hesso Yas Haute Ecole Sp cialis e de Suisse occidentale Fachhochschule Westschweiz Western Switzerland Application mobile multiplateforme pour l v nement viticole Vin a Travail de Bachelor 2012 Scenario Sentiers des vins Cette fonctionnalit permet aux utilisateurs de suivre des parcours de d gustation propos s par Vin a Les visiteurs seront ainsi guid s au travers des stands en fonction du parcours choisi Par exemple un parcours Cornalin proposera l utilisateur un itin raire qui passera par tous les stands qui offrent du Cornalin Elle permet galement aux sponsors de proposer des parcours L utilisateur peut choisir le parcours qu il veut suivre Les stands par lesquels il doit passer sont entour s Une fois que l utilisateur est a proximit du stand une fen tre appara t et lui propose d ajouter le vin ses favoris ou alors de passer au vin suivant mil ABC3G 03 45PM w X Mes parcours qu tes amp Parcours de l Heida amp Parcours s l ction Vin a am
18. gr ce l aide d une librairie qui fait office de pont entre le natif et le JavaScript Les avantages D veloppement avec des technologies web HTMLS CSS3 JS D veloppement unique pour toutes les plateformes Acc s aux fonctionnalit s natives du t l phone Co ts et temps de d veloppement faibles Portabilit de l application Distribution possible sur les plateformes de t l chargement d applications L inconv nient Performances inf rieures car une couche suppl mentaire s intercale entre le natif et les pages web Les principaux outils PhoneGap Adobe Flash Builder The M Project L onard Stalder 12 HES SO Valais 2012 R R a 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 3 5 Comparatif des quatre approches et choix Pour terminer voici un tableau r capitulatif des quatre approches qui permettent de d velopper des applications crossplatform NATIVE APP NATIVE APP WEB APP HYBRID APP INTERPRETEE GENEREES Raisonnable pas Raisonnable pas de langage web de langage web Rapide couche Rapide couche interm diaire interm diaire Co ts et temps de d veloppement Performances D ploiement sur les plat
19. hybride de base Afin de pouvoir d velopper des applications hybrides nous devons utiliser un Framework qui permette notre projet web d tre embarqu l int rieur d une coquille native Plusieurs entreprises offrent aujourd hui des Frameworks pour d velopper ce type d applications Cependant en fixant quelques crit res minimaux comme interagir avec la fonction de g olocalisation du t l phone embarquer une base de donn es int grer Facebook avoir un Framework stable pas de version BETA avoir un Framework compatible avec iOS et Android d velopper avec des langages web HTML CSS JS nous retenons les trois outils suivants Licence Commercial Libre Commercial EE a S S ewe a O o f e Tableau 3 Comparatif des Frameworks hybrides Nous avons d cid d utiliser PhoneGap comme Framework hybride pour les raisons suivantes l outil est gratuit la documentation disponible est abondante et le team de d veloppement de l institut Icare nous l a conseill De plus PhoneGap est le leader dans ce domaine et de nombreuses applications hybrides ont d j vu le jour avec ce Framework L onard Stalder 14 HES SO Valais 2012 e VALAIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 Hes so Yxts LEE ER EEE EEE SERA A DER ES EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachh
20. les applications iOS et Android ne fonctionnent pas de la m me mani re Parcours du Cornaln D couvrez les 10 meilleurs Cornalins propos s par Manor Des adaptations du code ont du tre d Parcours du Coran D couvrez les 10 meilleurs Cornal ns propos s par Manor Cornatin effectu s afin que nos deux applications reg Cornatin Comalin aient une ergonomie et une gestion de Comalin f t de ch ne Comalin Cornatin f t de ch ne Cornalin l historique personnalis e en fonction du syst me d exploitation Bouton retour Figure 26 Diff rences ergonomiques entre iOS et Android L onard Stalder 38 HES SO Valais 2012 VALAIS 2552225202002000220800280202020080020002200200225 toS OS SOSO DOOS 022000022022 SSS Hes so Yxts RRERRRRRRENREERRMEREERTERTERRT Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Quantit et qualit des donn es Int gration des donn es li es aux vins et encaveurs Les donn es sur les encaveurs et les vins repr sentent environ 2300 enregistrements Comme mentionn dans le chapitre 5 4 1 les donn es sont charg es dans le localStorage lors du premier lancement de l application Le temps d criture des donn es prenait beaucoup de temps D normes efforts d optimisation de code ont t fournis afi
21. les choix les plus performants En accord avec les responsables de nos projets Jean Baptiste Lathion et moi m me avons r alis notre application avec les m mes technologies La seconde partie savoir le d veloppement en lui m me tait un travail cons quent Vu que mon application r pondait une demande du march elle devait absolument tre stable et disponible temps sur les diff rentes plateformes de t l chargement d applications La mise en production de notre application a t r alis e Glossaire Plateforme de t l chargement d applications L onard Stalder 2 HES SO Valais 2012 yanas HEREEEEEIEETEEET IEEE EEE ENT EEE Enr Een Een Enr enr enr enr ren enr Hes s0 is S RIE EEE ES EE EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 2 Analyse de l existant et du march En 2009 Icare a d velopp l application Vin a pour le syst me iOS uniquement Afin de d velopper une application performante et adapt e aux besoins du march une analyse des forces et des faiblesses de cette application ainsi qu une enqu te de terrain ont t r alis es 2 1 Analyse de l application existante Actuellement l application mobile Vin a d velopp e en 2009 est exclusivement disponible sur iOS et offre les fonctionnalit s s
22. red ploy e Une des am liorations serait d externaliser le stockage de ces images sur le back end afin qu elles puissent tre g r es distance La fonction g o localisation des amis Facebook avait t abandonn e en cours de route Un gros travail avait d j t effectu afin de mettre en place cette fonctionnalit Quelques jours de d veloppement suffiraient afin de finaliser cette fonctionnalit et pouvoir la mettre en production Les banni res publicitaires de notre application ne sont pas modifiables distance En effet si l on veut modifier les annonceurs il est n cessaire de red ployer l application L onard Stalder 40 HES SO Valais 2012 5 Hes so yga F EEENIENNENENENENENENENNENENENENNNNN 00600000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 6 Gestion de projet 6 1 Panification des t ches Une gestion de projet Agile a t adopt e afin d offrir un maximum de flexibilit au suivi du d veloppement de notre application Dans un premier temps un Product Backlog a t r dig avec les diff rents acteurs du projet Ce document qui volue au fur et mesure du d veloppement a pour objectif de regrouper toutes les f
23. sur la carte de Vin a et de les inviter boire un verre un stand L onard Stalder 51 HES SO Valais 2012 Hes sO YANS HR I RRR RRIrRnR ere eINetneTIReTIRetiees HSS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Scenario Recherche et lister les vins encaveurs Cette fonctionnalit permet d afficher et de rechercher les vins et les encaveurs pr sents la manifestation L utilisateur peut galement afficher le d tail de chaque vin le noter et l ajouter sa liste de favoris ou alors le partager sur Facebook Screenshot 1 lister les vins Depuis le menu principal une ic ne permet l utilisateur d acc der un cran Vins et encaveurs Les vins sont affich s sous forme de liste Les onglets vins et encaveurs permettent l utilisateur de naviguer entre les diff rentes vues mil ABC 3G 03 34 PM il ABc 3G 02 31PM Vin a mobile D Vins et encaveurs G Encaveurs wil ac 3G 01 58 PM f Cave Bol ro gt Imesch Vins gt Les fils Maye gt Maye Simon Carte Tu bois une Vins encaveurs 9 O Vins et encaveurs Arvine du Valais Amgine de V troz gt Blanc de Gamay
24. une carte OpenLayers ne fonctionne qu avec une connexion internet Cependant la carte devait tre disponible en mode hors ligne et avec trois niveaux de zooms diff rents Zoom Aujourd hui que se soit Google Maps Bing Maps ou OpenLayers cevei i Zoom Level 2 ENET 20 afin de tous utilisent la m me projection cartographique repr senter la surface de la terre Le principe est d afficher des tuiles l une c t de l autre et au final d obtenir un rendu qui repr sente l ensemble de la carte La seule diff rence entre ces fournisseurs de moteurs cartographiques est la mani re dont ces Figure 24 Structure d indexation Bing tuiles sont index es Afin d avoir une carte en mode hors linge nous avons t l charg ces diff rentes tuiles pour les ajouter avec la m me indexation notre projet web en local Lors de l affichage de la carte nous avons modifi la source des tuiles qui pointait vers le serveur cartographique d OpenLayers afin de la rediriger vers un dossier local contenant les tuiles t l charg es 2 Glossaire Projection cartographique L onard Stalder 36 HES SO Valais 2012 5 Hes s0 MAS HSE TR nr rs ni sin in R Risiiis sin sin iss ent Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Rapideme
25. 00000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland O Fonctionnalit Programme L onglet Programme contient un menu avec des informations g n rales concernant la manifestation Vin a Aucune SIM 15 40 1 3 m Aucune SIM 21 35 Informations X Retour Informations Ateliers balades et autre ANIMATIONS ANNEXES Salon Vin a En parall le ces initiatives individuelles des prestations collectives sont aussi propos es travers le vignoble Progamme sp cial d ouverture Animations Chemin du vignoble S 3 itin raires pied v lo ou en voiture pour Animations annexes parcourir toute l ann e le vignoble de la rive droite du Rh ne de Martigny Lo che Salon des vins suisses www cheminduvignoble ch Restauration Caves ouvertes cantonales Chaque ann e lors du weekend de l ascension Plus de 200 caves travers tout le vignoble we Les meilleurs vins vaudois pendant 3 jours TRS d W LE Care Favoris D couverte Programme Vins Carte avoris couverte Programme Figure 15 Informations g n rales Fonctionnalit param tres En cliquant sur le bouton param tres en haut droite l utilisateur est redirig vers une page de param tres A partir
26. 000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland R sum La partie d introduction situe le contexte dans lequel le projet a t r alis Un descriptif du projet ainsi que les objectifs r aliser y sont galement pr sent s La partie d analyse de l existant est du march regroupe une enqu te de terrain aupr s de potentiels utilisateurs de l application Vin a ainsi qu une analyse des applications similaires La partie de proposition d application d crit les fonctionnalit s que l institut Icare et moi m me avons d cid de d velopper La partie de l tat de l art r pertorie de mani re exhaustive les derni res nouveaut s en mati re de d veloppement mobile ainsi que les choix que nous avons effectu s pour le d veloppement de l application mobile La partie de description de l application recense toutes les fonctionnalit s qui ont t d velopp es Ce chapitre traite galement du fonctionnement de notre application des probl mes rencontr s lors du d veloppement et de la mise en production de l application La partie de gestion de projet pr sente les diff rentes m thodes et outils qui ont t utilis s pour g rer le suivi du projet La partir de conclusion donne un bilan personnel sur l
27. 000000000000000000000000000000000000000000000000000000000000000000000eS Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz Shi Applied aana Travail de Bachelor 2012 estern Switzerlan J Mobi Il s agit d un Framework JavaScript qui permet de simplifier la manipulation de pages HTML Celui ci est optimis pour les moteurs de rendu Webkit Librairie de manipulation du DOM Ensemble de composants JavaScript qui permettent de manipuler le contenu de pages HTML Moteur de rendu Il s agit d un composant essentiel d un navigateur internet Celui ci est en charge de l affichage des l ments d une page web Plusieurs moteurs de rendu existent et les plus connus sont Gecko Presto et Webkit Plateforme de t l chargement d applications Il s agit d une boutique en ligne sur laquelle peuvent tre t l charg s des applications mobiles Chaque syst me d exploitation a sa propre plateforme de t l chargement Projection cartographique Il s agit d un ensemble de techniques utilis es pour repr senter la surface de la terre sur une carte Webservice Un webservice est une application web qui permet l change de donn es avec d autres applications via internet L onard Stalder IV HES SO Valais 2012 5 Hes so yga F EEEENENENENENENNENNENNENENNNENNNNN 6000000000000000000000000000000000000000000000000000000000000000
28. 00000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 1 Introduction 1 1 Contexte du projet Le travail de Bachelor qui finalise trois ann es pass es la HES SO Valais a pour but de mettre en pratique les connaissances acquises et de les appliquer un projet informatique r el Parmi un vaste choix de projets propos s par diff rents mandataires j ai choisi d effectuer un travail sur le d veloppement mobile pour le compte de l institut Icare A la pointe des sciences de l information cet institut de recherche labore des solutions informatiques qui r pondent aux besoins du march partir de technologies test es stables et efficientes Mon travail r alis au sein de cet institut se focalise sur la cr ation d une application mobile multiplateforme l aide de nouvelles technologies 1 2 Description du projet Le but de ce travail est de cr er une application mobile multiplateforme pour l v nement viticole Vin a Cet outil performant permettra aux visiteurs de profiter pleinement de la manifestation Afin de r aliser le projet et de d finir les fonctionnalit s cr er une analyse de march ainsi qu une analyse de l existant ont t effectu es Dans un deuxi me temps j ai recher
29. 06060000000000000000000000000000000000000000000000000000000000000000000000000000ES Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 6 Difficult s rencontr es lors du d veloppement Ce chapitre recense les principaux probl mes rencontr s lors du d veloppement de notre application Prise en main des nouvelles technologies L utilisation du JavaScript comme architecture de base d une application web tait compl tement nouveau pour nous En effet nous tions habitu s d velopper des application web avec la notion de client serveur classique Un temps de formation que nous avons sous estim t n cssaire Fonction Carte Une des fonctionnalit s principales de notre application consiste afficher le plan Carte O de situation de la manifestation H PONT ae Nous avons utilis pour cela la librairie gratuite et open source Openlayers Cette a librairie tr s riche en fonctionnalit s nous permet de mettre en place un moteur A cartographique web afin d afficher de mani re fluide des cartes A Diff rents calques peuvent tres superpos es sur la carte Nous avons utilis ce syst me de claques afin de placer nos stands sur la carte mais aussi afin de g o Figure 23 Carte localiser utilisateur Par d faut
30. 2012 Prise en main de BackBone js FrameWork 06 06 2012 D but du d veloppement de l architecture de l application avec 5 Backbone 08 06 2012 11 06 2012 7 12 06 2012 7 13 06 2012 14 06 2012 7 15 06 2012 5 18 06 2012 S ance de sprint review et planification du prochain sprint avec Pierre Mise en place favoris et d tail de vins et possibilit d ajouter aux favoris Planification second sprint Test des diff rents Frameworks UI notamment JaMobi Mise en place du framework UI JaMobi sur notre projet actuel Mise en place de la navigation et la gestion des transitions Cr ation du menu de navigation Abandon de JaMobi pas assez stable Adaptation de la couche graphique avec CSS3 UT 3 NS 23 05 2012 24 05 2012 O O UT 19 06 2012 20 06 2012 21 06 2012 22 06 2012 UT 27 06 2012 Ww SPRINT 2 SPRINT 1 SPRINT O O N L onard Stalder HES SO Valais 2012 amp se 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e Application mobile multiplateforme pour l v nement viticole Vin a Fachht ule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western lang 28 06 2012 Adaptation de la couche graphique avec CSS3 et IScroll4 7 LA 02 07 2012 R solution de bugs graphiques et de navigation 03 07 2012 S ance avec Pierre pour la
31. EE E E 41 6 1 Panification des t ches ESERE ET EEEN AS 41 ae e SM a OE re E E 41 6 3 Ecart par rapport la planification initiale Us 42 T CONU A A A 42 EE EEE 43 L onard Stalder VII HES SO Valais 2012 Haute Ecole Sp cialis e Hes s0 YME 0202000 000202000000000000880002800000002000002000002082000208000020000 0200800 de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 9 Liste des figures 10 Liste des tableau ie E E a a RAN 47 11 A o E E S E ET E E O E E A AE E E E 48 Annexe l Cahier des Chaire E S eea E a 48 Annexe Il Scenarios T Util at ONkenee r nr ssstesteansstsecseiies sn ssstrs cuites sert 51 Annexe Ill Tableau comparatif des Frameworks graphiques 56 Annexe IV Acc s au t l chargement de l application Annexe V Product Backlog Annexe VI Planification des Sprints sesssecsesesuneresreresuneresreresuneerurerenunserureresunrersreresanrerureresaerersneres 58 Annexe VII Tableau de bord sssesesssersesesesesesesesssessssssesesrsrsrersrscsesesesesesesesesserororeseseseererscscerseseseeee 61 Annexe VIII D compte des heureS essessssssesrrssrressrrssrrrssrresrtrsrtrrsrrrsrtrsstrnsrersrtrustresrersrereserrsrerseerese 62 L onard Stalder HES SO Valais 2012 VIII i Hesso s eunn 006000000000000000000000000000000000000
32. L Gestion des NON ne a ENP iaa 25 Figure 12 Processus de publication sur Facebook 25 Figure 13 Partage sur ADR a a 26 Feure LA PAT OURS de CON Ena E E T 26 Figure 15 Informations g n raleS ess sesssssssresserrssrrererererssreresrrressreressreresetresererssrereserereseeresereeeseeeesse 27 F ES A AP E e E E EA A E 27 Fae L PADNE er A E E 28 Fie re 18 Fontionnement global rere EAA 29 Figure 19 Fonctionnement de Backbone js sisi 30 Feure 20 Structure d projet We Desras a de a E der ee 32 Heure 21 Fonctionnement global ercran ESEE A 33 Figure 22 Sch ma de base de donn es locale 35 D LEE PAS TO LE A EE E E E A E E A E E E A E O A 36 Figure 24 Structure d indexation Bing sssssssesssesnsesreresrrrsssreresrreessreressrerssreresereessreresereresrereserereseeeesse 36 Figure 25 Int gration de pages html distantes ss 37 Figure 26 Diff rences ergonomiques entre iOS et Android 38 Figure 27 R cup ration des coordonn es g ographiques 39 L onard Stalder 46 HES SO Valais 2012 University of Applied Sciences Hes s0 yas Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz estern Switzerland Travail de Bachelor 2012 10 Liste des tableaux Tableau 1 R sultats de l enqu te de terrain aupr s des visiteurs de Vin a 4 Tableau 2 r capitulatif des approches crossp
33. Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Aucune SIM 08 30 Publicit Retour Vin Vaudois Pour financer l application des bandeaux Aucune SIM publicitaires figurent au bas de l cran Ceux T rat Encaveurs ci apparaissent de mani re al atoire sur Se Bienvenue au pays des meilleurs vins certaines pages vaudois Adrian Mathier Nouveau Salqu Les Lauriers d Or Terravin ne sont attribu s qu aux vins dont la personnalit exprime et E FS je j j ia exalte l Ame Eternelle de son Terroir Afin de En cliquant sur une publicit l utilisateur est Anne Catherine ES vassin dos Vire Vaudois Terravin vous pr sente les meilleurs vins vaudois provenant des meilleurs domaines de La C te Lavaux Chablais Bonvillars C tes Bagnoud Vins de l Orbe et Vully sis Antoine et Christophe B trisey redirig vers une page disposition du sponsor Biocave gt w g Les meilleurs vins vat vs avoris D couverte Programme gt w y Vins Care Favoris D couverte Programme Figure 17 Publicit 5 2 Fonctionnalit s abandonn es La seule fonctionnalit abandonn e en cours de route a t la g o localisation de ses amis Facebook Une premi re version de cette fonctionnalit a
34. VALAIS 9929999 9 0 9 9 9 8 9 9 9 9 9 8 9 9 9 9 9 8 9 8 8 8 8 9 9 8 9 8 9 9 8 8 8 8 9 8 8 8 8 8 8 8 8 8 8 8 9 8 8 8 8 8 8 8 8 8 8 8 8 eo se H e 600000000000 00000000000000000000000000000000000000000600060000000000600000000060060666 ce WALLIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000006 ve 060000000000000000000000000000000000000000000000000000000000000000000000000000000006 Haute Ecole Sp cialis e de Suisse occidentale Fachhochschule Westschwei University of Applied Sciences Western Switzerland Fili re Informatique de gestion Application mobile multiplateforme pour l v nement viticole Vin a Etudiant L onard Stalder Professeur Yann Bocchi wwWw hevs ch Hes so wais PHRF TSEMEMEEMEME NES EEE ce 6006060000000000000000000000000000000000000000000000000000000000000000000000000000eS Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Pr face Aujourd hui le d veloppement mobile est en plein essor De nombreuses nouvelles tendances se profilent et il n est pas toujours facile de choisir la technologie la plus appropri e La conception d applications mobiles est un domaine qui m int resse beaucoup et qui n a t que peu tudi lors
35. a Fianc e Nouv eau gt aiquene Dans la barre de navigation du haut l utilisateur a la possibilit de visualiser l emplacement de la cave sur la carte Figure 6 D tail d un encaveur L onard Stalder 22 HES SO Valais 2012 University of Applied Sciences Hes s0 5 Haute Ecole Sp cialis e de Suisse occidentale Fachhochschule Westschweiz Travail de Bachelor 2012 Western Switzerland Cet cran apparait lorsque lutilisateur d cide d afficher le d tail d un vin soit depuis l cran de d tail d une cave soit depuis l cran de recherche d un vin Si l utilisateur a appr ci ce c page il a la possibilit de noter ce vin d y apporter un commentaire et de l ajouter ses favoris Dans la barre de navigation du haut l utilisateur a galement la possibilit de localiser le stand dans lequel il peut d guster le c page s lectionn Application mobile multiplateforme pour l v nement viticole Vin a Aucune SIM Retour Fendant Du Ravin Adrian Mathier Nouveau Sa Note Excellent Mill sime 2012 Confirmation Ce vin t ajout vos favoris Fermer Ajouter mes favoris jouter mes favoris n D cou Figure 7 D tail d un vin Lorsque l utilisateur d cide de localiser une cave via l cran d tail d un vin ou d tail d une cave la carte ci des
36. ail Un mail contenant ses favoris est automatiquement g n r et l utilisateur et redirig vers l application mail de son Smartphone Aucune SIM 15 39 15 39 Favoris P Favoris Fendant Du Ravin 2012 Fendant Du Ravin Adrian Mathier Nouveau Salquenen Adrian Mathier Nouveau Salquenen Chardonnay 2005 Note uveau Salquenen Excellent Pinot Noir Saphir 2006 Mill sime Adrian Mathier Nouveau Salquenen 2012 Adrian Mathier N Tr s bon Enregistrer we Les meilleurs vins vaudois Retirer de mes favoris ER RS ER Favoris D verte Programme Favoris Figure 11 Gestion des favoris Lorsque l utilisateur clique sur le bouton de partage Facebook il autorise Vin a Mobile publier sur son mur Le processus d autorisation termin il peut publier ses favoris et ajouter un commentaire Aucune SIM 20 44 Ea Aucune SIM 15 39 7 ah Annuler facebook Connexion Annuler Publier sur le mur Partager Vin a Mobile Cette application demande le SalonVinea Mes coups de coeur Vin a LORIE Mes vins favoris e Vos infos de base Retrouvez mes coups de coeur e Votre adresse lectronique lors de ma visite Vin a leo88ts hotmail com EE via Vin a Mobile e Vos mentions J aime Qui peut voir les publications de cette application sur Facebook Ar A propos de cette application Vous vous connectez cette application en tant que L onard Stalder j
37. ation abondante disponible PhoneGap O et librairie libre La librairie Backbone js pour le squelette et l architecture de base de notre application Argument phare Librairie la plus robuste et la plus l g re Elle est utilis e par des grandes entreprises telles que Linkedin ou 37 Signals NT ezz La combinaison de JQuery HTMLS et CSS3 pour toute la partie du rendu des vues Argument phare Modulable stable et l ger Les librairies graphiques web amp jQuery cs optimis es pour mobiles ne sont pas encore assez performantes IScroll 4 pour simuler avec du langage web des listes d roulantes natives Argument phare Extr mement l ger performant Utilis par Linkedin et d autres grandes entreprises pour leurs applications hybrides Le localStorage HTML5 pour tout ce qui est du stockage des donn es Argument phare Standardis par la W3C performant et l ger Openlayers pour le moteur cartographique web Argument phare Opensource beaucoup de documentation et offre une personnalisation norme des cartes L onard Stalder 20 HES SO Valais 2012 Hes so ME HR nn IR RRnrenR en en etNeINeTIRe Reise HSS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Wester
38. avail M Pierre Kenzelmann responsable de projet chez Icare qui m a suivi au sein de l institut Icare M Fran ois Chabbey ing nieur en d veloppement chez Icare qui m a aid pour la partie d int gration sur iOS ainsi que pour la mise en production de notre application M David Werlen ing nieur en d veloppement chez Icare qui m a conseill dans mes choix technologiques Je remercie galement tout le personnel de l institut Icare pour les conseils qu ils m ont donn s D claration sur l honneur Je d clare par ce document que j ai effectu ce travail de Bachelor seul sans autre aide que celles d ment signal es dans les r f rences et que je n ai utilis que les sources express ment mentionn es Je ne donnerai aucune copie de ce rapport un tiers sans l autorisation conjointe du RF et du professeur charg du suivi du travail de Bachelor y compris au partenaire de recherche appliqu e avec lequel j ai collabor l exception des personnes qui m ont fourni les principales informations n cessaires la r daction de ce travail et que je cite ci apr s M Yann Bocchi M Pierre Kenzelmann L onard Stalder L onard Stalder II HES SO Valais 2012 5 Hes so yga F EEEENIENENENENENNENENNNENENENENNNNN 0060000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole V
39. bilit d acc der des l ments graphiques natifs du t l phone Ainsi le look and feel de l application est adapt en fonction de la plateforme utilis e Le d veloppement termin un interpr teur multiplateforme couche interm diaire entre le natif et le code d velopp peut interpr ter le code le transcrire en natif et l ex cuter sur le p riph rique mobile Les avantages Possibilit d acc der aux fonctions du t l phone GPS appareil photo contacts D ploiement sur les plateformes de t l chargement d applications Look and feel natifs l inconv nient Apprentissage du Ruby RhoMobile ou du Framework propri taire Javascript Appcelerator Les principaux outils AppCelerator Titanium RhoMobile JMango L onard Stalder 10 HES SO Valais 2012 5 Hes so yga F EEEENENENENENENNENNENNENENNNENNNNN 6006060000000000000000000000000000000000000000000000000000000000000000000000000000ES Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 3 3 D velopper des applications web Cette solution consiste d velopper un site internet optimis pour un cran de t l phone portable l aide des technologies du web classique L utilisateur peut acc der au site gr ce au navigateur internet de son t l phone portable
40. c page avec ses amis n existaient pas sur l application actuelle D autres telle la consultation des coups de c ur sur une plateforme web y figurent mais n int ressaient plus les utilisateurs L onard Stalder HES SO Valais 2012 Hes so ME HR nn IR RRnrenR en en etNeINeTIRe Reise 060600000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 2 2 3 Analyse de l existant Cette analyse a pour but de lister les principales applications similaires celle de Vin a Cette s lection a aid laborer des fonctionnalit s qui soient adapt es la r alit du march Les crit res de s lection taient d avoir au moins deux fonctionnalit s similaires l application Vin a De plus il devait s agir d une application li e une manifestation ou au domaine du vin Nous avons s lectionn les quatre applications les plus populaires qui r pondaient ces crit res Elles ont t class es en deux cat gories Foires festivals et manifestions avec application Buzz Application T es o Foire du Valais Fonctionnalit s similaires Plan de situation G olocalisation personnelle et des amis Facebook Forces Convivial et simple utili
41. cation mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 6 3 Ecart par rapport la planification initiale L estimation des t ches r aliser t sous valu e Le temps de formation sur les nouvelles technologies ainsi que la mise en production de l application ont pris plus de temps que pr vu De ce fait notre planification initiale de 360 heures a pass 417 heures Cet cart est principalement d la mise en production de l application 7 Conclusion Les trois mois pass s sur mon travail de bachelor ont largi mes connaissances en mati re de d veloppement mobile La philosophie de cr ation d une application mobile multiplateforme est consid rablement diff rente de celle d un d veloppement de logiciel pr vu pour un ordinateur fixe Les projets mobiles doivent tre l gers et pourvus d une interface graphique qui r pond une utilisation tactile Ils doivent galement fonctionner lorsque l utilisateur est situ des endroits d pourvus de r seau Le fait de devoir livrer une application qui ne contienne aucun bug puisqu elle allait tre mise en production tait galement un exercice nouveau pour moi En effet les projets scolaires que nous avions r alis s n ont jamais t mis en production et pouvaient ainsi contenir des bugs Pouvoir travailler au sein du team de d veloppement d Icare a
42. ce g n re partir du Ruby ou du JavaScript le code natif pour chaque plateforme Les avantages Possibilit d acc der aux fonctions du t l phone GPS appareil photo contacts D ploiement sur les plateformes de t l chargements Performance lev e aucune couche suppl mentaire Glossaire HTML5 1 Glossaire CSS3 H Glossaire Framework 7 Glossaire JavaScript L onard Stalder 9 HES SO Valais 2012 Hes sO YANS HR nn I RRInen Re RInenNetNetNeTIReTIRettees 00600000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland L inconv nient Notre projet est d pendant de l outil utilis et par cons quent ne peut qu tre difficilement r utilis au sein d un autre environnement de d veloppement Les principaux outils MoSync XMLVM Eqela 4 3 2 D velopper des applications natives interpr t es Cette pratique consiste d velopper une application mobile dans un langage sp cifique l aide d un environnement de travail donn Nous sommes donc d pendants des limitations de l outil Des m thodes nous permettent ensuite d acc der aux fonctionnalit s du t l phone Certains diteurs ex Titanium Appcelerator offrent m me la possi
43. ch et test des technologies mobiles existantes et s lectionn les plus adapt es au projet mobile r aliser Sur la base des r sultats obtenus j ai r alis l application mobile pour les syst mes d exploitation Android et iOS Ce document finalise le travail effectu et rend compte de la d marche utilis e 1 3 Acteurs L onard Stalder Etudiant Yann Bocchi Professeur responsable Pierre Kenzelmann Responsable du projet chez Icare 1 4 Etapes r aliser Le cahier des charges a t approuv par les parties prenantes t Glossaire Application mobile multiplateforme Glossaire Android Glossaire iOS Annexe 1 Cahier des charges L onard Stalder 1 HES SO Valais 2012 POTERIE RNEENEEEENEESEEEEENES EEE EEE EEE Hes s0 is R Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 1 5 Remarques Le test des technologies mobiles actuelles et la r daction du travail de recherche ont n cessit un grand investissement en temps Jean Baptiste Lathion tudiant de troisi me ann e la HES SO Valais devait galement r diger pour l institut Icare un tat de l art sur le d veloppement mobile multiplateforme Au terme de notre phase de recherche l institut Icare nous a conseill de partager nos r sultats afin d opter pour
44. de mon cursus acad mique Ce travail me donnait l occasion d approfondir mes connaissances dans ce domaine et de r aliser une application qui allait tre mise en production Dans mon rapport l tat de l art des nouvelles tendances en mati re de d veloppement mobile r pertorie de mani re exhaustive les derni res nouveaut s en la mati re Gr ce ces technologies j ai pu r aliser une application mobile multiplateforme pour l v nement viticole Vin a Je vous invite la d couvrir travers ce rapport Liste des vins carte interactive fiches de d gustation ou parcours de d couverte tout y est afin de permettre aux visiteurs de Vin a de profiter pleinement de la manifestation Si vous pr voyez de vous rendre Vin a du 31 ao t au 1er septembre t l chargez l application mobile sur l AppStore ou sur Google Play L onard Stalder HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e Hes so wus HER Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Remerciements Je tiens remercier toutes les personnes qui m ont aid pour ce travail de Bachelor et particuli rement M Yann Bocchi professeur responsable qui m a soutenu et conseill tout au long de ce tr
45. des Frameworks permettent de d velopper une application dans un seul langage pour ensuite le d ployer sur les diff rents syst mes d exploitation mobiles Il devient par exemple possible de d velopper des applications natives en combinant les langages natifs avec des langages web ou de g n rer des applications natives partir du langage JavaScript entre autres Un seul d veloppement permet de diffuser une application sur plusieurs syst mes d exploitation mobiles Cet ensemble de pratiques appel le d veloppement crossplatform est en respectant les crit res d Icare exactement ce dont nous avons besoin Etant donn que la pratique est actuellement encore assez nouvelle il n existe aucune tendance pr dominante en mati re de d veloppement crossplatform Plusieurs Frameworks ont vu le jour et chacun est pr sent comme tant le meilleur mais aucun ne sort vraiment du lot Nous avons analys et test une multitude de ces Frameworks Ceci nous a permis de les classer en quatre approches Chacune a ses avantages mais aussi ses inconv nients par rapport notre probl matique 4 3 1 D velopper des applications natives g n r es Cette pratique consiste d velopper une application en un langage ind pendant de la plateforme mobile en g n ral Ruby ou JavaScript Un Framework nous permet d acc der aux fonctionnalit s natives du t l phone Une fois le d veloppement termin un traducteur de code sour
46. du document Modification des certains icones et minimisation du JavaScript R daction et relecture du document Modification du document 12 08 2012 Modification et impression du document Total des heures L onard Stalder 65 HES SO Valais 2012
47. e carte off line Les images ic nes utilis es dans notre application sont dans le dossier E underscore min js 4 modules collections js models js E views js a util facebook js sync js main js router js E index html images Les tuiles qui permettent de recomposer la carte sont galement contenues dans celui ci Le dossier data inclut les donn es n cessaires linitialisation de l application Le fonctionnement sera d crit au chapitre 5 5 3 Le dossier js englobe l ensemble du code JavaScript de Figure 20 Structure du projet web l application Les librairies externes Backbone js JQuery OpenLayers etc sont inclues dans le dossier jslib Nos collections mod les et vues sont contenues dans le dossier module Le dossier util incorpore les classes d acc s aux donn es des web services sync js ainsi qu une classe facebook js qui nous permet de connecter l application Facebook La classe router js g re la navigation entre les vues Une classe main js permet d instancier l application ainsi que la mise jour des donn es La page index html contient le HTML qui s affiche l cran L onard Stalder 32 HES SO Valais 2012 Hes so ME HR nn RRrRn ne en etNeINeTIReTIRetiees 006000000000000000000000000000000000000000000000000000000000000000000000000000000006 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v
48. e travail effectu L onard Stalder V HES SO Valais 2012 Hes so Yi Haute Ecole Sp cialis e de Suisse occidentale Fachhochschule Westschweiz University of Applied Sciences Western Switzerland Application mobile multiplateforme pour l v nement viticole Vin a Travail de Bachelor 2012 Table des mati res OOo E E de Se en te ne 1 LE COR AUDO CE a ne de 1 T2 DE PU NAD OE a A E E 1 Po EEE 1 A OS aa a aa A 1 ES Rema QUOS esensi erre AE 2 2 Analyse delexistantet AMAR ae REE NEARS Eea ac 3 2 1 Analyse de l application existante oosseseseenseseenesrrrssrreresrrrsssrereseresssreresererssrereserersseeresereesseee 3 Dl AN dU EC a S T ie ae 3 22l CODEC AA a E ee a te 3 2 2 2 NOUeCe 0e CTI a rade ee de de 4 2 2 3 Analyse de PERS RS a 5 2 2 4 S E a TE 6 Propo COn aPN Oe aE E E 7 EEE EEE 7 2 M COL COCO a E E E 7 A EE 690 EE DR EEE 8 DL ODI CUTS AE AA Ea en 8 2 POI AQU a a oi 8 SOON dt 9 4 3 1 D velopper des applications natives g n r es ss 9 4 3 2 D velopper des applications natives interpr t es essusssseesereeresrrrssrrerssrrreerreresrrressee 10 4 3 3 D velopper des applications Web essesssssssessnssrsserresrrrsressrrrnsrrrsrressrrnsreesrteeerresrerssereerene 11 4 3 4 D velopper des applications hybrides ss 12 4 3 5 Comparatif des quatre approches et choix ss 13 L onard Stalder VI HES SO Valais 2012 Hes sSo ME 155155 nn Re ne ne nee Re Re Re Re Re Re nee R
49. eformes de t l chargement unique pour toutes les plateformes Langages de programmation C CH ou JS Ruby ou JS Acc s aux fonctionnalit s natives du t l phone Code d velopp est r g n r en langage natif Non mais interpr t D veloppement Tableau 2 r capitulatif des approches crossplatform En respectant les crit res minimaux de l institut Icare en recherchant les meilleures performances d ex cution et une optimisation du temps de d veloppement ce sont les applications hybrides qui correspondent le mieux nos besoins Nous avons galement remarqu que des grandes entreprises comme Facebook Linkedin ou Bing utilisent depuis 2011 cette approche d application hybride pour la cr ation de leurs applications mobiles La technologie est stable et le fait de pouvoir d velopper l application avec des langages web langages que nous ma trisons nous a d finitivement convaincu que cette approche tait la plus adapt e L onard Stalder 13 HES SO Valais 2012 Hes s0 MS HR IR Re Re Re ee en een 6006060000000000000000000000000000000000000000000000000000000000000000000000000000eS Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 4 Outils et choix pour un d veloppement hybride 4 4 1 Le Framework
50. eiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 3 Proposition d application 3 1 C t client En tenant compte du r sultat de l enqu te men e aupr s des utilisateurs ainsi qu en accord avec l institut Icare nous avons labor la proposition d application suivante Carte permet l utilisateur de visualiser le plan de situation de Vin a et de se g o localiser il ABC3G 03 39PM Inviter mes amis d guster un c page affiche les amis Facebook sur la carte de Vin a Vins encaveurs pr sente les diff rents encaveurs et leurs vins et permet d en ajouter ses favoris Sentiers des vins les visiteurs de Vin a travers des parcours nologiques peuvent se laisser guider et en apprendre plus sur certains vins Favoris permet de g rer les vins favoris Plus regroupe diff rentes informations g n rales sur la manifestation Figure 1 Proposition d application Des sc narios d utilisation qui ont t pr sent s Vin a ont t r alis s 3 2 C t back end Actuellement chaque mise jour de l application doit tre red ploy e sur l App Store M me s il ne s agit que d un accent De plus il n existe aucun moyen de g rer les stands de l application par apr s Nous proposons de stocker toutes les donn es sur un serveur distant et ensuite d y acc der d
51. ene 0260220008 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 4 Outils et choix pour un d veloppement hybride 14 4 4 1 Le Framework hybride de base 14 4 4 2 La librairie d architecture JavasScript ss 15 4 4 3 COSSAIS E 17 4 4 4 D ASE CE CONNSSS aan EE A E E E E T 18 45 Les librairies suppl mentaires a Ei 19 AG VN a E E A a 20 5S Descripionde ADD ICONE a a a ea em net 21 51 Fonctionnalit s A V lODH S danse ondes auiee dans om edrs eg cocenena eee ta ondes 21 5 2 Fonctionnalit s aBandOnnees ses n eer en sentiers een EEE an EET Eaa 28 S3 Fonctionnement eenean 29 5 4 Architecture de l application sssesssssseenesreressresesrrrsssrerssrrressreresrreessrerssrrressrereserressrereserressne 30 5 4 1 Concept d enecelle erranera E E EE 30 5 4 2 Organisation du projet et du code ssseesssessseessressrrrssrrssreesrererreesresserrssreesrersreresreeseene 32 D CSS TON OS CONS ne de ee E doi 33 5 5 1 Fonctionnement de l acc s et la synchronisation des donn es 33 5 5 2 Services distants r r a E E AEREE E E EAE SE EEEa 34 5 5 3 SOC SOA E E 35 5 6 Difficult s rencontr es lors du d veloppement 36 5S7 INOUS TAN auon AU IOE CE ae an a a a te ei 40 De AM ornon DOS ea de der td den 40 e GESTION DOI a EE
52. entaire bugs manque de manque de data binding composants Framework documentation documentation est m lang avec le HTML Tableau 4 Comparatif des librairies MVC Le choix s est rapidement port sur Backbone js Il s agit d une librairie JavaScript robuste et l g re la fois qui offre une structure de code int ressante D autre part la documentation pour Backbone js est riche et abondante De plus des grandes entreprises comme Linkedin ou 37 Signals utilisent cette librairie pour leurs applications mobiles Ce choix nous a vivement t conseill par Icare Notons galement que Backbone js fonctionne uniquement avec une librairie de s lection comme JQuery Zepto js ou JaMobi Le choix de la librairie de s lection sera d crit au chapitre suivant Glossaire JQuery L onard Stalder 16 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 4 Hes s0 wans HER EEE EEE EEE EEE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 4 3 La couche graphique Afin de pouvoir simuler une exp rience native sur des vues web nous avons analys et test de nombreux Frameworks graphiques optimis s pour des appareils tactiles Aujourd hui JQuery Mobile est sans contes
53. epter les Conditions de service et En continuant vous d clarez a la Politique de confidentialit de Vin a Mobile Figure 12 Processus de publication sur Facebook L onard Stalder 25 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e Hes so Yxts RRRERRRRRRERRERERMEREETERTERRT Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland A partir du statut publi sur Facebook il est possible de pointer vers une page internet valide Une page web standard qui r cup re les vins favoris partag s a t cr e Cette page s affiche de la ts e T maniere suliva nte pa ame e Vinea 2012 Favoris nea icarech t t fi Cyberteam 7 intranet HES SO Facebook 57 Gma RO netplus challenge EURCHF X Graphig C s C bem le Salonvinea o VENDREDI 31 AO T N y SAMEDI 1T SEPTEMBRE K P DE 11H00 19H00 lt PAT TE M L onard Stalder Il y a 7 minutes via Vinga Mobile 4 Mes coups de coeur Vin a Mes vins favoris r Fendant Anne Catherine et Denis Mercier Fendart Anne Cathenne et Denis Mercier 2012 Pinot Noir Lucifer Pinot Noir Adrien Mothier Nouveau 2012 Sslquenen Patte Amno Cave de Va
54. epuis l application mobile Ainsi toutes les donn es de l application pourront tre mises jour distance et synchronis es automatiquement Annexe 2 Sc narios d utilisation 7 Glossaire App Store L onard Stalder 7 HES SO Valais 2012 i Hesso s eunn 060600000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 Etat de l art 4 1 Objectifs de l analyse Aujourd hui les m thodes de d veloppement d applications mobiles sont de plus en plus nombreuses Depuis la sortie des premiers langages de programmation natifs mobiles en 2004 de multiples tendances se profilent L objectif de cet tat de l art est de dresser un bref aper u de toutes les pratiques existantes de cibler puis d analyser celle qui correspond le mieux aux besoins de l institut de recherche Icare et au projet d application mobile r aliser Cette recherche est effectu e dans un cadre fix par l institut Icare notamment en ce qui concerne les crit res technologiques 4 2 Probl matique Les crit res de base impos s par Icare en mati re de choix des technologies sont relativement restrictifs L application native doit tre ex cutable sur les syst mes d exploitation And
55. es actions met jour Routeur Figure 19 Fonctionnement de Backbone js L onard Stalder 30 HES SO Valais 2012 Hes s0 YANS HR nn RRRnrRnR R enNetretNeTIReTIRetiees 6000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland La compr hension du fonctionnement et la mise en place de Backbone js a t tr s fastidieuse Cependant une fois en place sa structure de code lisible permet de cr er ais ment des vues et des mod les Remarque fonctionnement du refresh des vues l aide de templates HTML Le fichier index html d un projet qui utilise Backbone js et son syst me de rendu par injection de templates HTML est structur de la mani re suivante lt body gt lt div id header n lt div Id con eni lt div gt v Id na a n E e a a a a a OX lt p gt Mon template de la vue X lt p gt MISCHpE sonore Mtert t melenes Lo a lt p gt Mon template de la vue Y lt p gt ES Coipr body Des templates HTML sont appel s par les vues et ins r s dans les diff rents containers qui seront visibles l cran Lorsqu on quitte une vue le contenu est effac et la nouvelle vue charge son template HTML Les vue
56. es bugs L autre partie sera consacr e la r daction du travail de Bachelor Signatures ou visa L onard Stalder Yann Bocchi Pierre Kenzelmann L onard Stalder 50 HES SO Valais 2012 o VALAIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 4 Hes so wais LEE ER EEE EEE SERA A DER ES EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Annexe II Sc narios d utilisation Afin de pr senter au client notre proposition d application nous avons d cid de d tailler les 6 fonctionnalit s principales sous forme de sc narios d utilisation Chaque sc nario sera ensuite compos de diff rentes User Stories auxquelles nous allons attribuer une priorit et une estimation de temps Scenario Carte Screenshot 1 Se g o localiser parmi les stands de Vin a Cette fonctionnalit permet l utilisateur de se g o localiser sur une carte de type Google Maps et d afficher les stands et les d tails d un stand Corte Tu bois une VewetEsvers Scenario Inviter mes amis Facebook d guster un c page Screenshot 1 G o localiser ses amis Facebook Cette fonction est une extension de la fonction carte Elle offre l utilisateur la possibilit d afficher ses amis Facebook
57. es meilleurs vins vaudois a Favoris D couverte Programme Aucune SIM 17 04 Vins Encaveurs Aucune SIM aS Figure 4 Liste des encaveurs Exemples Fendant Encaveurs Q Fenl En basculant sur l onglet Vins seule cette barre de Fendant La Perle du Valais N Domaine du Mont d Or recherche est disponible Aucune liste n est affich e Fendant z i a ii car la base de donn es contient plus de 2100 vins ce Done aiwlelr r z u 1loir ROUVINIE Alsip rlelH u k L n UECUUEOQU Figure 5 Recherche d un vin qui aurait consid rablement ralenti l application L utilisateur saisit un terme de recherche et la liste des r sultats apparait Aucune SIM 15 36 Retour Encaveur Adrian Mathier Nouveau Salquenen Bahnhofstrasse 50 3970 Salquenen Stand 1 Site internet PEO I E N a Si l utilisateur s lectionne une cave l cran ci contre s affiche Y Fendant Du Ravin A t Nouveau Salquenen figurent des informations sur la cave ainsi que la liste des vins Johannisberg Weidmannstrunk Adrian Mathier Nouveau Salqueni propos s en d gustation A partir de cette liste utilisateur peut Hermitage Marsanne Blanche Adrian Mat uveau Salquene s lectionner un vin qui le conduira vers l cran suivant Malvoisie La Valaisanne uveau Salquen A m A AQran Manie Muscat La TPT VI
58. ilisateur 3 La derni re partie dite contr leur s occupe de g rer les diff rentes actions de l utilisateur Vue eN Contr leur Affiche les donn es Gestion int raction issues du mod le utilisateur Synchronisation mod le vue Mod le Domaine m tier Figure 2 Interaction MVC source http blog iteratif fr L onard Stalder 15 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 4 Hes s0 wais HER ER RREEERR EEE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Par souci d efficacit nous avons choisi de d velopper notre architecture MVC l aide d un Framework existant Nous avons fix certains crit res effectu des recherches et tabli une liste des diff rents Frameworks existants Crit res librairie JavaScript l g re utilise la syntaxe JQuery pour l interaction avec le DOM permet de r aliser du MVC ou quivalent ns ee ER EDETS ooto JS g n r Langage JavaScript partir de JavaScript JavaScript JavaScript CoffeeScript Mod le vue Mod le vue Pattern utilis Mod le vue Mod le vue Mod le vue contr leur vue mod le Pas de Contient des Tr s jeune collections Manque des L un des premiers Comm
59. in a O Notez et partagez vos vins favoris D couvrez des parcours de d gustation Programme horaires etc Aucune SIM 09 41 D couverte Parcours de la Syrah Parcours du Cornalin Parcours du Fendant D 1in Favoris f X Fendant Du Ravin 2012 y 2 S s VE s Chardonnay 2005 R M Les meilleurs vins vaudois Pinot Noir Saphir 2006 y A E Les meilleurs vins vaudois EE LO Figure 3 Aper u g n ral de l application 18 Annexe 4 Acc s au t l chargement de l application L onard Stalder 21 HES SO Valais 2012 VALAIS 2552225202002000222800280202020080020002200200225 202 00020000020000 020000 2202228000 Hes so Yxts REINE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland gt Fonctionnalit Vins et encaveurs Cette premi re vue permet l utilisateur de lister les encaveurs et miniai vins pr sents la manifestation Adrian Mathier Nouveau Salque Un champ de saisie permet d effectuer une recherche sur les caves Agriloro Les deux onglets du haut permettent l utilisateur de naviguer entre Anne Catherine et Denis Mercier la liste des vins et la liste des encaveurs Amona et Ghriatophe MATIN Association Fully Grand Cru pss L
60. in a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Glossaire Android Il s agit d un syst me d exploitation open source pour Smartphones d velopp par Google App Store Plateforme de t l chargement d applications du syst me d exploitation mobile iOS Application mobile multiplateforme Application d velopp e l aide d un seul langage pour ensuite tre d ploy e sur plusieurs syst mes d exploitation diff rents CSS3 Il s agit de la derni re r vision de CSS Le CSS Cascading Style Sheets feuilles de style en cascade est utilis afin de mettre en forme des pages HTML Framework Il s agit d un ensemble de biblioth ques qui servent cr er les grandes lignes d une partie d un logiciel Google Play Google Play est une plateforme de t l chargement d applications du syst me d exploitation mobile Android HTMLS Il s agit de la derni re r vision d HTML HTML est un langage de balises utilis pour repr senter des pages web iOS IOS est un syst me d exploitation mobile d velopp par Apple pour ses appareils mobiles JavaScript Le JavaScript est un langage de programmation de scripts principalement utilis dans des projets web Jquery Il s agit d un Framework JavaScript qui permet de simplifier la manipulation de pages HTML L onard Stalder III HES SO Valais 2012 i Hesso s unuunu 6006060000000
61. isation d acc der ses informations Facebook sera effectu e la premi re fois qu il utilisera cette fonctionnalit ABC X 02 31PM p TestAndroidintegration is requesting Mes favoris permission to do the following Access rma Arvine du Valais kr Post to my Wall Amgine de V troz Ee Blanc de Gamay ogged in as Davy De W aele Not You Don t Allow Da mMm Envoyer par mail Scenario Plus Cette partie de l application permet l utilisateur d afficher des informations relatives l v nement et de configurer certains param tres L onard Stalder 55 HES SO Valais 2012 Hes so Yi SRE E r EED PESES EEE EEE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Annexe IIT Tableau comparatif des Frameworks graphiques DS The M Jquery JQMobi et UI Zepto js avec Twitter boostrap Jquery avec project Mobile css3 avec JQuery Css3 Licence Taille de la librairie de manipulation du DOM Syntaxe Librairie UI js css Supports All browsers All browsers All browsers Editeur partir du combinaison syntaxe javaScript mais CSS particuli re Le Bas sur d velopp la design n est pas JQuery main Zepto est adapt pour moins rapide mobile mais que Jquery mais plut t pour des plus l ger applica
62. isiiis sis sin iss ent ce 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 2 2 2 Enqu te de terrain L enqu te de terrain aupr s de diff rents visiteurs de Vin a a permis de r aliser que les fonctionnalit s de l application existante n taient plus toutes d actualit L enqu te s est d roul e en deux phases 1 Conversation ouverte avec des personnes sp cialis es dans les domaines du vin et de l informatique afin de trouver des id es de fonctionnalit s qui inciteraient les visiteurs t l charger l application 2 Sondage aupr s de onze visiteurs de Vin a tout ge et statut social confondus afin d valuer le succ s de chaque proposition de fonctionnalit Sur les onze personnes sond es toutes ont pr vu d aller Vin a cette ann e Seules deux personnes avaient d j utilis l ancienne application iOS Nb de personnes E Utiliseraient la fonctionnalit 12 10 O SL X S XS X R4 C RY XX S WW Tableau 1 R sultats de l enqu te de terrain aupr s des visiteurs de Vin a Cette enqu te r v le que certaines fonctionnalit s tr s demand es comme la proposition de parcours ou l invitation d guster un
63. latform essssssseesesserssrreresrressrrrresrrressreresrreresrereserereseee 13 Tableau 3 Comparatif des Frameworks hybrides 14 Tableau 4 Comparatif des librairies MVC eseesssssssessnssrnserrnssrnserrrsrrsssrnnsrensrtenstrnsrtrsrtessrrrsreesrteneereereeseee 16 Tableau 5 Tableau comparatif des moteurs cartographiques 19 L onard Stalder HES SO Valais 2012 47 University of Applied Sciences Hes so he Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz Western Switzerland 11 Annexes Travail de Bachelor 2012 Annexe I Cahier des charges Cahier des charges Application multiplateforme Pr sentation g n rale du projet Le projet Application mobile Vin a consiste r aliser une application multiplateforme compatible iPhone et Android afin de r pondre aux besoins des utilisateurs dans le cadre l v nement viticole sierrois Vin a Une premi re version de cette application a t r alis e en 2009 par l institut Icare pour la plateforme iPhone uniquement Aujourd hui celle ci ne r pond plus aux besoins du march et demande tre repens e adapt e et red velopp e Ce projet est propos par l institut Icare et sera r alis au sein de celui ci Les fonctionnalit s impl menter seront d finir dans un Product Backlog livrable la fin du premier sprint voir chapi
64. len on le Salon Vinea Retrouvez mes coups de coeur lors de ma visite Vin a ae A a rc J aime Commenter Figure 13 Partage sur Facebook Fonctionnalit D couverte Afin d affiner ses connaissances viticoles diff rents parcours nologiques sont propos s Vin a propose ses sponsors de parrainer ces parcours d couverte Le jour de la manifestation plusieurs parcours seront d finis en fonction des vins s lectionn s par les sponsors par exemple Parcours Manor L utilisateur peut visionner les vins d un parcours et en cliquant sur un vin il sera redirig vers l cran d tail d un vin Ces parcours peuvent tout moment tres modifi s depuis l interface d administration distante Aucune SIM 15 40 Aucune SIM 15 40 D couverte Retour D couverte Parcours du Cornalin Parcours du Cornalin D couvrez les 10 meilleurs Cornalins propos s par Manor D couvrez les 10 meilleurs Cornalins propos s Cornalin Charles Bonvin Fils SA Cornalin Jean Vogel et Fils Domaine Croix Duplex Cornalin f t de ch ne Cave Rives du Bisse Cornalin Cave du Vieux Village Enes Les meilleurs vins vaudois D couverte Programme Vins avoris D couverte Figure 14 Parcours d couverte L onard Stalder 26 HES SO Valais 2012 Hes sO YANS HR nn I RRIrenIRnRnnenRetNetNenIReTIRetiees R 000000000000000000000000000000000000000000000000000000000000000000000
65. n Dans une premi re partie nous traiterons les concepts de base de l architecture de l application hybride Dans une deuxi me partie nous allons nous int resser l organisation du code et la gestion et la synchronisation des donn es Pour terminer nous voquerons les difficult s rencontr es 5 4 1 Concept d architecture utilis Nous avons d cid d utiliser la librairie Backbone js afin de structurer notre application web et d obtenir une architecture de type mod le vue contr leur La librairie Backbone js nous offre les possibilit s suivantes G rer des mod les quivalents aux classes objets Java Cr er des collections de mod les tableaux d objets Cr er des vues qui peuvent couter les actions de l utilisateur et des mod les Cr er un routeur qui permet de naviguer entre les diff rentes vues La grande force de Backbone js consiste pouvoir lier tous ces l ments entre eux Les vues vont g rer l aide de templates HTML l affichage et la capture des v nements Elles peuvent tres attach es des mod les et ainsi d s qu un mod le est modifi d clencher automatiquement des v nements Un routeur permet de g rer la navigation entre nos diff rentes vues Il fonctionne en quelque sorte comme un aiguilleur Ainsi si une vue veut pointer vers une autre elle indique au routeur la route qui correspond la nouvelle vue afficher La vue coute l
66. n Switzerland 5 Description de l application 5 1 Fonctionnalit s d velopp es Cette partie du document regroupe un aper u des fonctionnalit s r alis es L cran d accueil de l application permet l utilisateur d avoir rapidement un aper u des fonctionnalit s disposition La barre de navigation du bas lui permet de naviguer entre ces diff rentes fonctionnalit s que sont la liste des vins et encaveurs le plan de la manifestation sa liste de favoris des parcours ou alors le programme de la manifestation C est au lancement de l application que cette derni re va v rifier si les donn es qu elle contient sont encore jour par rapport au web service distant Si ce n est pas le cas les donn es modifi es ou supprim es sont t l charg es et remplac es en local sur le t l phone mobile Aucune SIM 15 40 fic Informations x Ateliers balades et autre ba Salon Vin a gt Adrian Mathier Nouveau Salque gt Progamme sp cial d ouverture gt Anne Catherine et Denis Mercier gt Animations gt Antoine et Christophe B trisey Vi gt Animations annexes gt Bagnoud Vins gt Salon des vins suisses gt Bienvenue dans votre application Biocave gt Vin a Vous y retrouverez Restauration 5 D couvrez les vins et caves pr sents Vin a EPA Les meilleurs vins vaudois 9 Les meilleurs vins vaudois Localisez vos amis Facebook et vous parmi les stands de V
67. n de r duire le temps de chargement des donn es de cette op ration Int gration des donn es li es aux stands De nombreuses informations nous sont parvenues tardivement ou sous une forme non exploitable Par exemple le plan du registre du cadastre fourni par Vin a tait inexploitable Sans la position g ographique des stands il nous tait impossible de les placer sur la carte Apr s de nombreuses recherches nous avons utilis Google Earth afin de r cup rer les coordonn es g ographiques des stands En effet Google Earth offre la possibilit de superposer des images sur leur carte Nous avons positionn des marqueurs sur les emplacements des stands pour r cup rer les coordonn es g ographiques Toutes ces donn es ont t entr es manuellement ri s Gode Cut TERG KA A Figure 27 R cup ration des coordonn es g ographiques L onard Stalder 39 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 4 Hes 5s0 wais HER ER RREEERR EEE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 7 Industrialisation du logiciel Etant donn que le projet allait tre mis en production nous avons cherch tout au long du d veloppement d optimiser notre code afin qu une fois ex cu
68. nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 5 Gestion des donn es 5 5 1 Fonctionnement de l acc s et la synchronisation des donn es Les donn es de notre application mobile sont stock es en local dans une base de donn es embarqu e et sont synchronis es avec un web service distant Le web service ainsi qu une interface d administration ont t r alis s en collaboration avec l institut Icare A l aide de nos sch mas de donn es l institut Icare a r alis le web service L acc s et la synchronisation des donn es s effectuent comme suit Fichier JSON _ Web service embarqu 26 distant P yson CEE Er son Figure 21 Fonctionnement global 1 L utilisateur lance pour la premi re fois l application mobile Nous avons embarqu dans le projet mobile un fichier plat contenant les donn es de base Lors de ce premier d marrage un script r cup re les donn es dans ce fichier plat et les ins re dans le localStorage de l application Ainsi l application n est pas d pendante d une connexion internet pour effectuer la premi re importation des donn es 2 Lorsque l utilisateur relance l application celle ci contient d j des donn es dans le localStorage Elle ne r cup re plus les fichiers plats qui sont embarqu s mais elle se connecte un web service distant afin de savoir si des nouvelles donn e
69. nt nous avons remarqu qu OpenLayers n offrait que 17 niveaux de zoom sur ces cartes Cela ne suffisait pas pour pouvoir distinguer les stands sur la carte Nous nous sommes alors int ress s au serveur cartographique Bing qui offrait des tuiles allant jusqu 20 niveaux de zoom Le but tant de r cup rer les tuiles du service cartographique Bing pour ensuite remplacer les n tres avec celles ci Comme les diff rents services de cartographie n utilisent pas la m me mani re d indexer leurs tuiles nous avons d convertir l indexation des tuiles Bing pour qu elles soient compatibles avec OpenLayers Ce travail a t r alis manuellement et a n cessit un investissement en temps important Facebook connect Afin de pouvoir simuler une exp rience utilisateur la plus native possible nous avons d cid d utiliser un plugin PhoneGap Il devait nous permettre d authentifier l utilisateur aupr s de l application Facebook Apr s quoi nous pouvions r cup rer les amis Facebook de l utilisateur et publier des statuts sur son mur Un plugin PhoneGap est en fait une extension de la librairie PhoneGap principale Il s agit de plugins natifs et sont donc crits en Java pour Android et en Objective C pour iOS l int gration du plugin sous Android a pris passablement de temps Int gration de pages html distantes La fonctionnalit Programme contient des informations g n rales de Vin a Afin de pouvoir mettre
70. ochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 4 2 La librairie d architecture JavasScript Le Framework hybride de base choisi nous nous sommes pench s sur l architecture de notre application Comme mentionn dans le chapitre pr c dent notre projet hybride est bas sur les langages web HTML CSS et JavaScript Depuis toujours JavaScript a caus des difficult s aux d veloppeurs car les diff rentes variantes de ce langage rendaient souvent des fonctions incompatibles d un navigateur un autre Plusieurs standards ont vu le jour et JavaScript est rapidement devenu un langage sale et peu structur Avec le temps le JavaScript a t standardis et aujourd hui ce langage est interpr t de la m me mani re sur presque tous les navigateurs modernes Cependant la difficult de structurer des projets JavaScript demeure Afin d avoir une architecture d application structur e claire et efficace nous avons choisi des librairies qui permettent le d veloppement d une architecture de type MVC Cette approche nous permet de s parer les diff rentes couches de notre application et ainsi d organiser notre projet de mani re structur e en trois parties 1 La premi re partie dite mod le s occupe de la gestion des donn es acc s aux web services et stockage en base de donn es 2 La seconde partie dite vue s occupe du rendu et de l affichage l ut
71. onctionnalit s qui r pondent aux besoins du client Celles ci sont exprim es sous forme d User Stories Par la suite des priorit s ainsi que des estimations de temps ont t attribu es aux User Stories Les fonctionnalit s d velopper ont t r parties sur les 360h que compte un travail de Bachelor Le travail a t d compos en 5 Sprints Voici la r partition de ces heures 15 06 28 05 16 06 02 07 16 07 30 07 13 08 La r partition des t ches sur les diff rents Sprints est d crite dans le cahier des charges en annexe A la fin de chaque Sprint un Sprint Review a t effectu avec les acteurs du projet afin d adapter si n cessaire le Product Backlog et de planifier le prochain Sprint Le Product Backlog ne tient pas compte des t ches de recherche ni du temps de formation Ces t ches exceptionnelles en plus des User Stories ont t s ajout es chaque Sprint Planning 6 2 Outil de suivi du projet Un tableau de bord a t con u et mis disposition des diff rents acteurs afin de pr senter tout moment un aper u g n ral de la progression du projet Afin de faciliter sa consultation il a t mis sur Dropbox 7 Annexe 5 Product Backlog Annexe 6 Planification des Sprints L onard Stalder 41 HES SO Valais 2012 i Hesso s eeuna 0606000000000000000000000000000000000000000000000000000000000000000000000000000000006 Haute Ecole Sp cialis e de Suisse occidentale Appli
72. outils seront utilis s Uses cases user stories product backlog sprint backlog sprint review et calcul de la v locit Planning Le travail de Bachelor compte 360 heures qui doivent tre effectu es entre le 15 05 2012 et le 13 08 2012 Le travail sera d compos en 5 sprints Voici comment seront r parties ces heures Sprint 0 40 h Le sprint O0 comprend 2 semaines mi temps au terme duquel un cahier des charges une analyse du march et de l existant un concept d application et un Product Backlog avec valuation des user stories seront livrables Les m thodologies agile de gestion de projet seront galement mis en place durant ce sprint Sprint 1 60h Le sprint 1 comprend 2 semaines mi temps Une partie de ce sprint sera consacr la recherche et au test essayer d impl menter des fonctionnalit s des technologies utiliser L autre partie sera consacr e la prise en main de ses technologies Au terme de ce sprint un document explicatif des technologies utiliser sera livrable Sprint 2 90h Le sprint 2 comprend 2 semaines plein temps Ce sprint compte la planification du d veloppement ainsi que le d but du d veloppement Sprint 3 90h Le sprint 3 comprend 2 semaines plein temps Ce sprint comprend le d veloppement de l application Sprint 4 90 h Le sprint 4 comprend 2 semaines plein temps La premi re partie du sprint comprend la fin du d veloppement et la r solution d
73. p Qu te Univerre amp Qu te Marque Valais L onard Stalder HES SO Valais 2012 ml ABC3G 03 45PM E X Parcours du cornalin Ml ABC3G 03 45PM Ca X Parcours du cornalin Ml ABC3G 03 45PM Ca X Parcours du cornalin Fendant Provins d gust Voulez vous l ajouter votre s l ction de vins F licitactions Vous avez termin le parcours du cornalin 54 5 Mes SO VAS LR nn IR nn nn R R R R R nn tin sn etes gt 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Scenario Afficher et g rer les favoris Ce processus permet d afficher et de g rer les vins favoris Ils peuvent tre ajout s depuis la liste des vins et encaveurs d crite dans le sc nario pr c dant Une fen tre permet d exporter ses favoris en les envoyant une adresse mail il ABC 05 48 PM p il asc X 02 31PM p Mes favoris Mes favoris R Envoyer par mail j Arvine du Valais RR Veuillez entrer une adresse mal Amgine de V troz k me de Gone Mm Envoyer por mal f Partager sur Facebook L t Le bouton partager sur Facebook permet de publier sur le mur de l utilisateur sa liste des favoris Une demande d autor
74. phique web afin d afficher de mani re fluide le plan de situation Apr s quelques recherches nous avons pu lister les trois librairies les plus populaires suivantes OpenLayers Google maps OINGrers Payant pour les gros Payant pour les gros Licence Open source volumes volumes Possibilit d utiliser nos propres cartes Possibilit de stocker les cartes en local Tableau 5 Tableau comparatif des moteurs cartographiques Afin d utiliser cette fonctionnalit sans connexion internet il tait imp ratif de pouvoir stocker nos propres cartes en local sur l appareil OpenLayers est le seul Framework qui offre cette possibilit s De plus cette librairie open source s int gre merveille l int rieur de projets JavaScript et offre de larges possibilit s de personnalisation L onard Stalder 19 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e Hes so wus HER Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 6 Synth se En r sum nous utilisons et conseillons pour un d veloppement hybride efficace les technologies et outils suivants La librairie PhoneGap pour la passerelle entre le code natif et les vues web Argument phare Leader dans son domaine document
75. quantes R solution de bugs li s la g o localisation et la carte Mise jour des stands sur la carte Possibilit de diff rencier 4 5 les stands Mise en place du plugin Facebook connect Mise en place du partage sur Facebook Cr ation d une application Facebook avec une landing page pour celle ci Configuration de l application Facebook Hashage de l url pour le partage des vins sur Facebook Cr ation d une landing page pour les vins partag s sur Facebook Terminer le partage Facebook Cr ation des pages aide et a propos R solution de bugs R solution de bugs mise en place d un syst me de versionning pour les donn es D pouillage des donn es R cup ration des long lat des stands Mise jour des stands sur le web service et des informations Mise en place range de localisation Int gration des pages print to mobile l application Cr ation du menu dynamique pour les pages print to mobile Modification des stands R daction du document 27 07 2012 Mise en place de la map Off line t l chargement des tiles et modification de la librairie OL 28 07 2012 Terminer la map off line modification des png et transition des notations 29 07 2012 Terminer la map off line ajout des stands 3 5 30 07 2012 Modification des tiles avec ceux de Bing gt probl me des niveaux de zoom R daction du document 31 07 2012 Gestion du bouton de l historique de navigation support sur iOs et And
76. ra t Ce d tail contient une liste des encaveurs qui sont pr sents sous la tente en question A partir de cet cran l utilisateur peut afficher le d tail d une cave Si l utilisateur clique sur un stand de type g n rique une petite fen tre avec une description du stand s affiche Aucune SIM 15 38 Retour Stand Informations 1 Cave Bol ro Horaires et tarifs Vendredi 31 ao t et samedi 1er Cave G rard Roduit septembre 2012 i 11h00 19h00 CHF 40 inclus un verre et un bon de d gustation pour un Grain Noble ConfidenCiel CESR S E Fermer PR VINS A VALAIS F couverte Figure 10 D tail d un stand L onard Stalder 24 HES SO Valais 2012 5 Mes SO VAS LR nn nn R R R nn nn nn nn nt Rs nee ee 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland sr Fonctionnalit Favoris L cran d tail d un vin permet l utilisateur d ajouter un vin ses favoris Les crans ci dessous permettent l utilisateur de modifier ou de supprimer ses favoris Un bouton de partage Facebook offre la possibilit de publier ses favoris sur son mur Facebook Un autre bouton permet d exporter ses favoris par m
77. rience graphique tactile nous avons utilis une librairie JavaScript IScroll 4 Celle ci est utilis e pour simuler des listes d roulantes natives En ce qui concerne les feuilles de style elles ont t int gralement d velopp es la main 4 4 4 La base de donn es Les donn es que nous allons r cup rer depuis le serveur distant doivent pouvoir tres stock es en local sur le t l phone afin de pouvoir utiliser l application en mode hors connexion La librairie PhoneGap offre la possibilit de cr er en natif une base de donn es SQLITE Par contre si dans un avenir proche nous voulons utiliser le projet Vin a en dehors d une coquille PhoneGap toute la base de donn es serait inutilisable Pour cette raison nous nous sommes int ress s aux r centes options de stockage qu offre HTMLS Avec ses moyens de stockage novateurs HTML5 permet d enregistrer les donn es d un projet directement dans la m moire cache du navigateur Il existe acteullement trois principales fa ons de stocker des donn es l aide d HTMLS Le localStorage Il s agit d un syst me de stockage simple qui utilise la combinaison cl valeur Avantages Simple d utilisation disponible sur la plupart des nouveaux navigateurs il existe un adaptateur qui permet de faire communiquer nos mod les d velopp s avec Backbone js avec le localStorage Inconv nients Pas de langage de requ tes et les normes de s curit ne sont pas
78. roid Modification des bugs quant aux pages print to mobile R daction du rapport Optimisation du code l initialisation de l application Possibilit de g rer le menu du programme dynamiquement Optimisation du code de fermeture des vues But s assurer que la m moire s est bien vid e N 18 07 2012 19 07 2012 2 5 22 07 2012 m e UT 23 07 2012 N N O fay 24 07 2012 3 25 07 2012 26 07 2012 3 02 08 2012 03 08 2012 SPRINT 4 SPRINT 3 L onard Stalder HES SO Valais 2012 n Hes s0 yas HHFHHHSHMEEMEEEEEEEEEEEE EEE ESS EEEEES Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland ot R daction du document 04 08 2012 Modification de l emplacement de certains stands R daction du document 06 08 2012 Impl mentation de la couche graphique ajout d ic nes haut r solution Modification du CSS en fonction des id es d un graphiste R daction du document 07 08 2012 R daction du document Impl mentation d un syst me de gestion des publicit s Optimisation du code 08 08 2012 Optimisation du code pour la mise en production R daction du document 09 08 2012 Correction de bugs en fonction des retours de tests fonctionnels R daction
79. roid et iOS Elle doit pouvoir tre t l charg e depuis l App Store et Google Play Toutes les donn es doivent tre externalis es sur un serveur distant afin de r duire le temps de mise jour d une application mobile Les donn es de l application doivent pouvoir tre mises jour sans faire passer l application par les diff rents processus de validation de l App Store Pour respecter ces crit res nous avons envisag un d veloppement natif Toutefois ce type de programmation n cessite la ma trise de plusieurs langages et rend le d veloppement compliqu une application iOS est d velopp e l aide du langage de programmation Objective C et une application Android gr ce Java C est pourquoi nous avons envisag une autre alternative Glossaire Google Play L onard Stalder 8 HES SO Valais 2012 Hes s0 Ms HR RER Re Re Re ere en teens 6006060000000000000000000000000000000000000000000000000000000000000000000000000000eS Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 4 3 Solution La d mocratisation massive des Smartphones a d multipli les diff rentes mani res de d velopper des applications mobiles L arriv e du HTML5 et CSS3 modifie radicalement la conception des applications mobiles Actuellement
80. rsity of Applied Sciences Travail de Bachelor 2012 estern Switzerland Annexe VII Tableau de bord Project Velocity mr ffectu es Moyenne Completed story points 2 3 Sprints L onard Stalder 61 HES SO Valais 2012 Hes so wais HHFHHHSHMEEMEEEEEEEEEEEE EEE ESS EEEEES 60060000000000000000000000000000000000000000000000000000000000000060000000000000006 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Annexe VIII D compte des heures DELK LEIG Heures 15 05 2012 S ance de d but de projet 15 05 2012 R daction du cahier des charges 16 05 2012 Prise en main de l application et recherche de l existant 21 05 2012 Mise en place du sondage et r colte d informations ainsi que recherche de fonctionnalit s R daction d un document expliquant les fonctionnalit s 22 05 2012 D pouillage du sondage ajustement du document concept 2 5 d application Cr ation de prototypes crans Ajustement du document concept d application 3 cr ation des supports de gestion de projet et planification des 3 sprints 25 05 2012 Relecture et r daction Product Backlog 29 05 2012 Analyse tat de l art gt test des diff rentes plateformes de 4 5 d veloppement utiliser 30 05 2012 l architecture JavaScript Backbone js 04 06
81. s Documentation OpenLayers Consult partir du 12 06 2012 sur http docs openlayers org Mobile UI Patterns 2012 Consult partir du 26 06 2012 sur http mobile patterns com Facebook Developers Consult patir du 16 07 2012 sur https developers facebook com Microlmages Inc 12 2009 Bing Maps Structures Consult partir du 12 07 2012 sur htto Wwww microimages com documentation TechGuides 76BingStructure pdf Klokan Petr Pridal 2008 Tiles la Google Maps Coordinates Tile Bounds and Projection Consult partir du 12 07 2012 sur http www mabptiler org google maps coordinates tile bounds projection L onard Stalder 45 HES SO Valais 2012 University of Applied Sciences Hes so he Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz Western Switzerland Travail de Bachelor 2012 9 Liste des figures Figure 1 Proposition d appliCatiON 2 a e etes nes datneseemeses Dei A ENEN 7 Figure 2 Interaction MVC source http blog iteratif fr is 15 Figure 3 Aper u g n ral de l application sise 21 peurc 4 LISE OS CAVE 22 Feire S Recherche Un VE a ae eo a a 22 Feur SES DIEU LES HE LR 2 66 120 E 22 FeWwe FADE UO LS PR RER RE 23 Heures Localisation d OS A nd ne este tin eee es ain ei ire 23 Figure 9 Fonctionnalite carte a a 24 Feure 10 Detail RS AR S E T 24 Figure L
82. s modifient cette page en fonction des actions de l utilisateur L onard Stalder 31 HES SO Valais 2012 Hes so wais FHRF TESESEMEEMESE NES EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 4 2 Organisation du projet et du code Dans l optique de pouvoir r utiliser le code ce chapitre d crit 4 www a cordovaAndroid X cordova 1 6 0 js 4 cordovalphone l organisation de notre projet web Afin que l application puisse tre ex cut e sur un t l phone mobile le dossier www t ins r dans une coquille PhoneGap sous assets cordova 1 6 0 Js 4 css E styleOpenLayers css vineamobile css 4 datas cellars json Ci contre une image de notre projet web qui contient 6 dossiers Les E map_stands json marked_path_steps json dossiers cordovaAndroid et cordovalphone contiennent les E marked_paths json librairies PhoneGap ecm images 4 js a amp libs backbone min js cdv plugin fb connect js 4 facebook js_sdk js iscroll min js jquery 1 7 2 min s openlayers mobile 2 11 js Au niveau graphique les feuilles de styles se trouvent dans le dossier css La feuille de styles vineamobile css contient le CSS g n ral et la feuille de style styleOpenLayers css le CSS pour notr
83. s sont disponibles Pour ce faire l application mobile envoie au web service une date de la derni re mise jour Cette op ration est transparente pour l utilisateur et elle est effectu e chaque fois que celui ci ex cute l application 3 En fonction de la date de mise jour re ue le web service retourne un fichier JSON qui contient les enregistrements qui ont t modifi s ajout s ou supprim s Voici un exemple de JSON retourn id 2 idCave 35 nomCave Anne Catherine et Denis Mercier D CO ETUI Ne MAURICE MAC nnee a OTO r ea e a O O TOTO TOn LEO NUL update da O OE TTO 0 UE OS OURS AC ea a E 4 L application mobile re oit la r ponse sous forme d un fichier JSON A l aide des trois derniers attributs savoir created_at updated_at et deleted_at celle ci pourra soit ins rer un nouvel enregistrement soit modifier un enregistrement existant ou alors supprimer un enregistrement existant dans le localStorage L onard Stalder 33 HES SO Valais 2012 5 Hes s0 MAS FEES TR nr ns ni sien s iis sis sis sen iss ent Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 5 2 Services distants Le web service r alis par l institut Icare nous permet de r cup rer l aide de requ tes AJAX les donn es suivantes
84. schweiz Travail de Bachelor 2012 Organisation du travail Parties prenantes L onard Stalder Etudiant Yann Bocchi Professeur responsable Pierre Kenzelmann Responsable du suivi de l avancement du projet Livrables Phase de sp cifications et d analyse des besoins Cahier des charges Analyse du march et de l existant Proposition de concept et de positionnement Product Backlog sp cifications User stories Evaluation des user stories Phase de recherche et test Recherche des technologies utiliser tat de l art en fonction du Product Backlog Test des technologies et choix Phase de r alisation Sprint plannings et reviews R valuation des user stories Etats d avancements Phase de livraison Application multiplateforme fonctionnelle et Code source de l application Phase de r daction R daction du travail de Bachelor mise en commun des diff rentes recherches L onard Stalder 49 HES SO Valais 2012 5 Hes so yga F EEEEENIENENENENENNENENENNENENENENNNNNN 0000000000000000000000000000000000000000000000000000000000000000000000000000000000S Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland M thodologie de travail L agilit sera utilis e pour g rer au mieux ce projet Les diff rents concepts et
85. ser Faiblesses Le temps de chargement et de synchronisation est lev les donn es sont chaque fois t l charg es depuis un serveur distant Lors d une recherche sur le plan aucun indicateur graphique ne nous permet de situer le stand recherch ni d afficher le d tail du stand par un clic sur l endroit indiqu sur la carte Pal o Buddy Pal o Festival Nyon Fonctionnalit s similaires Plan de situation possibilit de se donner rendez vous en FESTIVAL NYON positionnant des points sur le plan de situation et en invitant des amis Forces Beaucoup d informations en direct Faiblesses peu intuitif et la g olocalisation de l utilisateur sur le plan de situation n est pas possible L onard Stalder 5 HES SO Valais 2012 se VALAIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 Hes so wru 00000000000000000000000000000000000000000000000000000000000000000000000000000000009 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Manifestations viticoles My Vinexpo Vinexpo Fonctionnalit s similaires Plan de situation liste des exposants avec possibilit de les g o localiser sur la carte liste des vins possibilit d ajouter des vins sa liste de favoris Forces Tr s
86. sous met en vidence l aide d une animation le stand recherch LS Favoris ws g L 2 ji voris couverte rogaramme Vins a D couverte Figure 8 Localisation d un stand L onard Stalder HES SO Valais 2012 23 Hes So VALAIS Scccccccccccococcccocscccccoscccssccccosccccccccscscoccccccccccccccccccocccccccccccccccocos ET LE RE I PR te Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland RL Fonctionnalit Carte En cliquant sur l onglet Carte un plan de situation avec les stands de Vin a s affiche Cette fonctionnalit t impl ment e afin que l utilisateur puisse l utiliser sans connexion internet Les images de la carte sont embarqu es au sein du projet mobile A l aide d un mouvement des doigts l utilisateur peut zoomer jusqu trois niveaux diff rents En cliquant sur les ic nes diff rentes informations s affichent Dans la barre de navigation du haut un bouton permet de se situer sur la carte La g olocalisation r est uniquement possible si l utilisateur re oit un S signal GPS ou est connect un r seau internet Figure 9 Fonctionnalit carte mobile Le signal GPS est toutefois recommand En cliquant sur un stand de type tente l cran ci dessous appa
87. standardis es Indexed Database API Il s agit d un fichier plat avec un syst me de stockage cl valeur Poss de une indexation des donn es Avantage Tr s simple d utilisation Inconv nients non disponible sur la plupart des navigateurs ne poss de pas de langage de requ tes L onard Stalder 18 HES SO Valais 2012 se VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 4 Hes s0 wais RER EEE EEE EEE EEE EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Web SQL Il s agit d une base de donn es Sqlite stock e dans la m moire cache du navigateur Avantages supporte le langage de requ tes SQL tr s rapide lors de l ex cution de requ tes Inconv nients La W3C a laiss de c t cette pratique et donc non standardis Pour des raisons de performances de standardisation et de l g ret mais aussi de compatibilit avec Backbone js nous avons d cid de choisir de stocker nos donn es l aide du localStorage 4 5 Les librairies suppl mentaires Une fonctionnalit principale d velopper pour le projet Vin a tait l affichage d une carte qui situe tous les stands Afin de r ponde ce besoin il nous fallait une librairie qui nous permette de mettre en place un moteur cartogra
88. t il soit le plus rapide possible Afin de diminuer au maximum la taille de notre projet mobile nous avons minimis nos classes JavaScript Ce proc d consiste lever les espaces blancs les commentaires et les noms des variables Le temps de chargement des scripts et ainsi r duit et les performances de l application en sont am lior es Pour minimiser notre code nous avons utilis le compilateur Google En accord avec l institut Icare il a t d cid de ne pas mettre en place des tests unitaires La plupart du code n tait pas assez complexe pour tre test Les m thodes les plus complexes ont t test es manuellement Des tests fonctionnels durant lesquels plusieurs utilisateurs v rifient que l application effectue bien ce qui a t demand ont t s effectu s Le code a ensuite t r adapt en fonction de bugs relev s L application mobile iOS a t publi e sur l App Store par l institut Icare car un Mac poss dant le logiciel Xcode tait n cessaire L application Android va tre publi e sur Google Play par mes soins 5 8 Am liorations possibles L application existante ne contient aucune erreur et est utilisable Cependant quelques modifications pourraient la rendre encore plus efficace Les images des ic nes plac es sur la carte sont embarqu es dans le projet mobile et ainsi non modifiables Si l ann e prochaine les images des stands veulent tre chang es l application doit tre
89. t une exp rience tr s enrichissante et surtout un premier enseignement dans le monde du travail D un point de vue personnel la collaboration et les nombreux changes que j ai eu avec les personnes de l institut Icare m ont permis d acqu rir de nouvelles connaissances mais surtout de d couvrir des fa ons innovantes de penser et de concevoir des logiciels En fin de compte j esp re que les visiteurs de Vin a pourront gr ce ces diff rentes fonctionnalit s d velopp es profiter pleinement de la manifestation et ainsi d guster de bons c pages et partager leurs avis avec les amis Annexe 6 Tableau de bord Annexe 7 D compte des heures L onard Stalder 42 HES SO Valais 2012 VALAIS 99929909 9 9 9 9 9 9 9 9 9 9 9 8 9 9 8 9 9 9 9 9 9 8 9 9 8 9 9 9 9 8 8 8 8 8 8 8 8 8 8 8 8 9 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 Hes so vas siinne Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 8 Sources Etat de l art Florent Lamoureux 1 02 2012 Diff rences entre PhoneGap Appcelerator Titanium Sencha Touch et JQuery Mobile Consult le 29 05 2012 sur http www florentlamoureux fr blog differences entre phonegap appcelerator titanium sencha touch et jquery mobile Robert Raiola 30 11 2012
90. t bas es sur une architecture de type MVC Elles fonctionnent soit en mode hors ligne soit en mode en ligne Les diff rentes donn es de nos applications sont stock es dans une base de donn es locale et sont synchronis es lors de chaque lancement de l application avec un web service distant si une connexion internet est disponible Pour la fonctionnalit informations g n rales les deux applications utilisent des pages html h berg es sur un serveur web distant Nous avons pr f r externaliser ces pages car les informations qu elles contiennent sont continuellement modifi es Si le programme de la manifestation ou si les horaires d ouvertures changent il suffit de mettre jour ces pages sur le serveur web distant et l application mobile affichera la page corrig e L inconv nient de ce syst me est que la fonctionnalit est uniquement disponible avec une connexion internet Serveur web distant webservice REST Figure 18 Fonctionnement global 19 i Glossaire web service L onard Stalder 29 HES SO Valais 2012 VALAIS EEE EEE co Hes so wru 000000000000000000000000000000000000000000000000000000000000000000000000000000000090 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 5 4 Architecture de l applicatio
91. talder 34 HES SO Valais 2012 Hes s0 MS HR RIRE Re Re Re ete en tes KSS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Travail de Bachelor 2012 Fachhochschule Westschweiz University of Applied Sciences Western Switzerland D tail des parcours Ce service retourne la liste des parcours que Vin a propose On y trouve le nom du parcours ainsi qu une br ve description Voici un aper u d un fichier JSON retourn Eu a eo e a a EPS Re Ce a a S a O T O updated e e EO E S O aa 000 e ee dae Que NY 5 5 3 Stockage local Comme mentionn au chapitre 5 4 2 notre application mobile poss de une base de donn es embarqu e qu elle synchronise avec un web service distant Nous utilisons le localStorage HTML5 pour stocker nos donn es Le localStorage n offre pas les possibilit s d une base de donn es relationnelle et offre uniquement un stockage des donn es qui utilise la combinaison cl valeur Pour sauvegarder nos collections et mod les cr s avec Backbone js et afin de simuler les comportements d une base de donn es relationnelle nous avons utilis un adaptateur Celui ci sert de pont entre nos collections et mod les et le localStorage Nos enregistrements sont stock s de la fa on suivante CLE CLE CLE wine 18543 cellar 963 stand 15 VALEUR id
92. te le leader dans ce type de Frameworks graphiques Plusieurs applications mobiles ont t d velopp es avec ce Framework au sein de l institut Icare mais avec des r sultats peu probants En effet JQuery Mobile est tr s lent Le Framework a t d velopp afin d tre support par tous les moteurs de rendu des navigateurs du march Il est tr s lourd car de nombreux tests sont effectu s afin de garantir un rendu identique sur tous les navigateurs L institut Icare voulait une alternative JQuery Mobile A l aide de celle ci nous devrions tre en mesure de d velopper rapidement des interfaces graphiques sans que les performances de l application ne baissent cause de la lourdeur du Framework graphique Nous avons test un grand nombre de possibilit s et pouvons affirmer qu il existe actuellement deux moyens de proc der Soit utiliser un Framework qui combine une librairie graphique avec une librairie de manipulation du DOM exemple JQuery Mobile soit utiliser une librairie graphique ind pendante de la librairie de manipulation du DOM exemple TwitterBoostrap combin avec JQuery Des recherches et de nombreux tests nous ont permis d tablir un tableau comparatif qui tient compte des tendances actuelles de d veloppement mais aussi des performances et de la l g ret qu offrent ces Frameworks graphiques Tout semblait d signer JQMobit comme le successeur de JQuery Mobile Cette librairie est la plus
93. tions web normales ex cution Documentation Existe depuis T l chargements 558 850 depuis GIT HUB Annexe IV Acc s au t l chargement de l application Rapidit HTML g n r Bonne Poss de une L application iPhone et iPad peut tre t l charg e partir du lien suivant http ota icare ch vinea2012 L application Android peut tre t l charg e partir du 20 ao t sur Google Play L onard Stalder 56 HES SO Valais 2012 Haute Ecole Sp cialis e de Suisse occidentale Fachhochschule Westschweiz Hes so NERO TE ER RE I PR te Application mobile multiplateforme pour l v nement viticole Vin a University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Annexe V Product Backlog a uvssteur farinerte menu d accueit de Tappicaion 1 2 Unisateur Pouvoir naviguer dans tes di rentes pages 1 s omea ress o a omae fisterteseaes y e uriateur afcherte tain gunvin ooo a uvtsteur noter un vin avant de ajouter autos o Uuisateur commenter un vin avant de ajouter aurtavors 12 uriateur Moaier mon evaluation dunun tor 1 C3 uvtsseur erporter ma iste de avr par mal 1 aa uvissteur partager le vin d guste sur es r seaursoaa 3 as Ousateur afficher Ia carte de avenue G n ral Gusan 2 afficher le d tail d un stand en cliquant dessus Utilisateur Afficher mes amis Facebook pr sents Vin a sur la carte 3 Utilisateur Inviter un ami Facebook
94. tre 5 planning L application sera r alis e l aide des technologies Ruby RubyOnRails HTML5 CSS3 et PhoneGap pour la compatibilit multiplateforme Une analyse concernant les technologies utiliser sera galement r alis e Etapes r aliser ordre chronologique e identification de la probl matique par rapport l application existante e Identification et analyse des besoins en fonction du march e Proposition de solution suite aux analyses e concept d application cliente concept de gestion back end e Planification du d veloppement en fonction des choix du client e R alisation des user stories attribution de story points Identification de l importance des user stories e Analyse et choix des technologies utiliser tat de l art en fonction du Product Backlog e Conception et d veloppement de l application mobile multiplateforme e Conception et d veloppement du backend administration e R alisation d un manuel d utilisateur et administrateur e En parall le r daction de documents en rapport la th matique trait e L onard Stalder HES SO Valais 2012 48 University of Applied Sciences Western Switzerland Hes so VALAIS Scccccccccccocccococcccccoccccssccccosccccccccsscoccccccccccccccccccccccccccccccccccsos nn EE EH Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule West
95. uivantes une carte de l v nement qui permet de localiser l utilisateur parmi les stands une liste des encaveurs pr sents avec des informations les concernant une liste des vins avec fiches explicatives un syst me d valuation permettant d enregistrer les vins favoris des utilisateurs et de les consulter sur une plateforme web Dans la version actuelle aucun aspect social Int gration de Facebook ni d interactivit entre les utilisateurs et Vin a n ont t pris en compte Il en r sulte qu un utilisateur ne peut pas t l charger l application sur un autre syst me qu iOS que consulter ses valuations via la plateforme web ou l application elle m me aucun autre partage n est possible pas g o localiser ses connaissances sur la carte que se g o localiser sur un sch ma des lieux et non sur une carte pr cise pas avoir acc s des actions et offres exclusives pas choisir des parcours de d gustation ex je veux d guster tous les Cornalin 2 2 Analyse du march 2 2 1 Objectifs de l analyse Afin de d finir les fonctionnalit s d velopper dans la nouvelle application deux tudes ont t r alis es La premi re repose sur une enqu te effectu e aupr s de visiteurs de Vin a et la seconde sur une tude des fonctionnalit s propos es par des applications de manifestations similaires L onard Stalder 3 HES SO Valais 2012 5 Hes s0 MAS HS I I I is Rss ni R i
96. ur la carte Cr ation de la fonctionnalit de d tail d un stand Fonctionnalit favoris Possibilit d exporter par mail Fonctionnalit carte Possibilit d activer d sactiver le tra age 13 07 2012 GPS 14 07 2012 Fonctionnalit carte Possibilit de localiser un vin depuis le d tail d un stand ou vin 16 07 2012 1 Impl mentation de la fonctionnalit lister les vins d un 3 parcours Correction de bugs 2 planification du troisi me sprint 1 De 1 S ance avec Pierre pour la couche graphique et la mise jour des donn es L onard Stalder HES SO Valais 2012 se M VALAIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000000 mr Hes so Yi D eaee e e WALLIS 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 8 9 8 9 9 9 9 9 9 8 9 9 9 9 9 9 9 9 9 9 8 8 9 9 9 9 9 8 8 8 OU vote E E E E E E Hes s VALAIS 00000000000000000000000000000000000000000000000000000000000000000000000000000000e Haute Ecole Sp c de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland 17 07 2012 Mise en place JSON embarqu pour la premi re utilisation gt si 7 pas de connexion internet Mise jour des donn es du JSON embarqu gt liens morts cl s trang res man
97. ww jgmobi com Documentation et tutoriaux Documentation de PhoneGap Consult partir du 3 06 2012 sur http phonegap com Documentation Backbone js Consult partir du 4 06 2012 sur http backbonejs org L onard Stalder 44 HES SO Valais 2012 oo VALAIS 0000000000000000000000000000000000000000000000000000000000000000000000000000000000e6 4 Hes s0 wais RER EEE EEE EEE EEE EE Haute Ecole Sp cialis e de Suisse occidentale Application mobile multiplateforme pour l v nement viticole Vin a Fachhochschule Westschweiz University of Applied Sciences Travail de Bachelor 2012 Western Switzerland Net tutsplus com 28 04 2012 Getting Started with Backbone js started with Consult le 4 06 2012 sur http net tutsplus com tutorials javascript ajax gettin backbone js Artur Adib Hello Backbone js Consult partir du 4 06 2012 sur http arturadib com hello backbonejs S bastien Chopin 15 04 2012 Backbone js le fonctionnement des mod les Consult le 4 06 2012 sur http www atinux fr 2012 04 15 backbone js le fonctionnement des modeles Thierry Stiegler 29 10 2010 Html5 Backbone js et localStorage sont dans un bateau Consult partir du 8 06 2012 sur http thierrystiegler wordpress com 2010 10 29 html5 backbone js et localstorage sont dans un bateau Rico Sta Cruz 2011 2012 Backbone patterns Consult partir du 4 06 2012 sur http ricostacruz com backbone pattern

Texte intégral View

Contents

Download Pdf Manuals

Related Search

Related Contents

Texte int&eacute;gral View

Contents

Download Pdf Manuals

Related Search

Related Contents

Texte intégral View