développements mobiles autour de l’application de réseau social udapro.fr et de … - uda... ·...
TRANSCRIPT
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Institut Supérieur d’Informatique
de Modélisation et de leurs
Applications
Complexe des Cézeaux
BP 125
63173 Aubière Cedex
Rapport de stage – ISIMA 2éme année
Filière : Système d’Information et Aide à la Décision
Développements mobiles autour de l’application de réseau social
UdAPro.fr et de l’Université d’Auvergne
Présenté par : Julien VERDIER
Responsables Entreprise : Laurent BERENGUIER
Pierre RAYNAUD
Responsables ISIMA : Jian-Jin LI
Date de la soutenance : Mercredi 31 Août
Université d'Auvergne -
Clermont-Ferrand 1
49, boulevard François-Mitterrand
BP 32
63001 CLERMONT-FERRAND Cedex 1
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Remerciements
Je tiens avant tout à remercier mon responsable de stage Monsieur
Laurent Berenguier, DSI de l ’Université d’Auvergne Clermont 1. I l m’a
offert la possibi l ité de poursuivre mon projet de deuxième année et i l m’a
fait confiance pour mener à bien ce projet.
Je remercie l ’équipe de développeurs composée de Pierre Raynaud
et de Didier Chabaud. I ls m’ont accueil l i au sein de leur structure et
m’ont apporté une grande aide et des explicat ions précieuses pour
l ’avancement du projet. Le service communication de l ’Université m’a
également soutenu avec son savoir faire en graphisme et design pour
l ’aspect de l ’application.
Je remercie aussi Mesdames Jian-Jin LI et Pascale Guinaud,
Monsieur Phil ippe Lacomme de l’ISIMA pour leurs disponibi l ités.
Je remercie également toutes les personnes de l’ ISIMA et de
l ’université qui m’ont aidé de près ou de loin dans la réalisat ion de ce
travail.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Table des figures
Figure 1 : Marché des OS Smartphones, second tr imestre 2010 ......................................... 8
Figure 2 : Evolut ion du marché des OS Smartphones .............................................................. 8
Figure 3 : Caractér ist iques des OS ................................................................................................ 10
Figure 4 : Tableau des prior ités pour les fonctionnalités .................................................... 13
Figure 5 : Maquette vue géo localisation ................................................................................................. 14
Figure 6 : Maquette vue l iste ......................................................................................................... 14
Figure 7 : Maquette vue connexion ............................................................................................. 15
Figure 8 : Maquette vue f lux d'actual ité .................................................................................... 16
Figure 9 : Exemple de compression avec "YUI Compressor" sur un f ichier CSS ............ 26
Figure 10 : Bureau Android ............................................................................................................. 28
Figure 11: Page d'accueil de l 'applica tion ................................................................................. 29
Figure 12: UdA map ........................................................................................................................... 30
Figure 13 : L iste des points d'intérêts ........................................................................................ 32
Figure 14 : UdA map it inéraire ...................................................................................................... 34
Figure 15 : L iste des restaurants ................................................................................................... 35
Figure 16 : Exemple d'un menu ..................................................................................................... 36
Figure 17 : Recherche sur l 'annuaire ........................................................................................... 37
Figure 18 : F lux RSS ........................................................................................................................... 38
Figure 19 : Connexion UdA Pro Mobile ....................................................................................... 39
Figure 20 : F i l d 'actual ité UdA Pro ............................................................................................... 40
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Résumé
Les réseaux sociaux sont aujourd’hui couramment utilisés. Ils permettent aux
utilisateurs de s’intégrer dans des groupes. Ici UdA Pro a pour vocation de regrouper
toutes les personnes de l’université, de fédérer un sentiment d’appartenance en son
sein et aussi d’intégrer les étudiants dans la vie active avec la brique professionnelle.
Le développement mobile s’est avéré comme une méthode de fidélisation des
utilisateurs déjà présents mais aussi comme un moyen de faire connaitre le site et
d’amener de nouveaux utilisateurs. Pour qu’un réseau social soit attractif, il faut une
communauté active et nombreuse. L’activité des utilisateurs est d’autant plus
importante qu’ils ont en permanence l’application et UdA Pro dans la poche.
Le stage était donc basé sur la programmation d’une application Smartphone
autour d’UdAPro.fr et de services mobiles à offrir aux utilisateurs d’UdA Pro.
Mots-Clés : Réseau social, développement mobile, Smartphone, Android, iPhone,
Web application, UdA
Abstract
Nowadays, social networks are frequently used, allowing users to join social groups. In
2010, the Auvergne University created UdA Pro to gather people from the University,
to develop a feeling of membership and to help students in their future life with the job
and resume services.
Mobile development is considered as a good way to improve current user loyalty and
also as a mean to publicize the web site and to attract new users. Indeed, a social
network must have an active community to be attractive. And a mobile application of
the web site increases users’ activity.
So, first of all, this study is based on Smartphone’s programming and especially on
Android and iPhone OS, then on the site’s redesign for mobile views.
Keywords: Social network, mobile development, Smartphone, Android, iPhone, web
application, UdA
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Table des matières
I . INTRODUCTION DE L’ETUDE ...................................................................................................... 3
A. PRESENTATION DU CADRE DU STAGE ............................................................................. 3
B. RAPPEL DU SUJET DE L ’ETUDE .............................................................................................. 4
C. CONNAISSANCE DU PROBLEME ............................................................................................. 4
1. CREATION ET EVOLUTION DE LA PLATEFORME ............................................................ 4
2. SERVICE PROPOSES PAR LA PLATEFORME UdA Pro .................................................... 5
D. ANALYSE DU PROBLEME ...................................................................................................... 5
1. APPREHENDER LA PLATEFORME EXISTANTE ................................................................. 6
2. DEFINIR LES L IMITES DU PROJET ...................................................................................... 6
E. RESUME DE L’ETUDE DE LANCEMENT DE PROJET ........................................................... 7
1. VEILLE TECHNOLOGIQUE..................................................................................................... 7
2. PRISE EN MAIN DES OUTILS MOBILES .......................................................................... 10
3. USAGES MOBILES ET FONCTIONNALITES ..................................................................... 11
I I . MATERIEL ET METHODE ........................................................................................................ 12
A. DEFINITION DES OBJECTIFS A REALISER ...................................................................... 12
B. DEVELOPPEMENT MOBILE .................................................................................................... 16
1. Développement Android .......................................................................................................... 17
2. Développement iPhone ............................................................................................................ 21
C. DEVELOPPEMENT WEB .......................................................................................................... 21
1. Premier pas : Google maps.............................................................................................. 21
2. UdA Mobi le : Onglet 1 ...................................................................................................... 22
3. UdA Mobi le : Onglet 2 ...................................................................................................... 23
4. Optimisat ion et Ergonomie ............................................................................................. 26
D. RESULTATS DETAILLES ....................................................................................................... 28
1. Premier onglet .......................................................................................................................... 28
2. Deuxième onglet ...................................................................................................................... 39
E. MISE SUR LE MARCHE ............................................................................................................ 41
F. PERSPECTIVE D’EVOLUTION ......................................................................................................... 41
I I I . CONCLUSION ............................................................................................................................. 44
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Glossaire
Ajax : Asynchronous Javascript and XML est une manière de construire des applications Web et des sites web dynamiques basés sur diverses technologies Web Android : système d'exploitation open source pour Smartphone et tablette graphique fondé sur un noyau Linux
apache 2 : logiciel de serveur HTTP
API : interface de programmation de l’anglais Applicat ion Programming Interface, elle permet l ' interaction des programmes les uns avec les autres
Css : feuil le de style en cascade de l’anglais Cascading Style Sheets, c’est un langage informatique qui sert à décrire la présentation des documents HTML
DSI : direct ion des systèmes d’informations
Eclipse : environnement de développement intégré libre
Elgg : logiciel l ibre permettant de mettre en place un réseau social en l igne
Géo localisation : procédé permettant de posit ionner (une personne sur un plan ou une carte à l 'aide de ses coordonnées géographiques
Html5 : HyperText MarkupLanguage 5, format de données conçu pour représenter les pages web
Interface builder : outil de développement d'interface graphique pour des applicat ions tournant sur Mac OS
Java : langage de programmation informatique orienté objet
Javascript : langage de programmation de scripts principalement util isé dans les pages web
JQuery : bibl iothèque JavaScript l ibre qui porte sur l ' interaction entre JavaScript (comprenant AJAX) et HTML. Il a pour but de simplif ier des commandes communes de JavaScript.
Json : JavaScript Object Notat ion, format de données textuel qui permet de
représenter de l’ information structurée LDAP : protocole d'annuaire sur TCP/IP
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien
Map kit : kit de création de carte
Objective-c : langage de programmation orienté objet
OS : Operating System, système d'exploitation ensemble de programmes central d'un appareil informatique
PHP : Hypertext Preprocessor langage de scripts l ibre principalement uti l isé pour produire des pages Web dynamiques via un serveur HTTP
phpMyAdmin : applicat ion Web de gestion pour les systèmes de gestion de base de données MySQL
Plugin: module d'extension pour un logiciel
Research in motion : société spécial isée dans la conception système notamment BlackBerry
Smartphone: téléphone "intell igent"
SQL server : système de gestion de base de données
Symbian : système d'exploitat ion pour NOKIA
URL : Uniform Resource Locator, chaîne de caractères util isée pour adresser les ressources du web VMware : logiciel de vitalisation de machine Webapp : applicat ion Web est un logiciel applicat if manipulable grâce à un navigateur Web
Xcode : environnement de développement pour Mac OS
XML : Extensible MarkupLanguage, langage informatique favorisant l 'échange d'informations YUI Compressor : Outil de "minif icat ion" du code JavaScript et CSS
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 1
INTRODUCTION
UdA Mobile est un service s’ inscrivant au sein de l’Université
d’Auvergne. Cette dernière regroupe plusieurs composantes :
Odontologie, IUP Management, Droit et Science polit ique Sciences
économiques et de gestion-IAE, Médecine, Pharmacie et IPAG.
L’object if de créer l ’applicat ion UdA Mobile était dans un premier
temps d ’augmenter la visibil ité d’UdA Pro. Le réseau social de
l ’Université devait offrir un nouveau service à ses ut il isateurs . Ce réseau
regroupe les étudiants -anciens, actuels ou futurs-, les professeurs et
employés de l ’Université , mais aussi des employeurs et des entreprises
extérieurs . Au sein de l ’université ce réseau a non seulement une
vocation sociale mais il se veut prioritairement professionnel pour faire
le l ien entre la vie étudiante et la vie professionnelle.
Ainsi, dans cette volonté il a été pris la décision de se tourner vers
un développement novateur et plein d’avenir à savoir le développement
mobile de ce réseau. En effet, les Smartphones ont depuis quelques
années pris une place importante dans la vie sociale et professionnelle
d’un grand nombre de personnes. De plus , pour les entreprises, disposer
d’un service mobile veut dire, d’une part se mettre « à la page » vis-à-vis
des tendances du moment d’un point de vue technologique, mais aussi
se faire connaitre auprès d’un nouveau public. Dans le cas d’UdA Pro,
les étudiants sont les principales cibles , car ce sont eux les employeurs
de demain qui donneront au réseau son importance et son eff icacité.
Ensuite selon la volonté des étudiants et de leurs besoins d’autres
services mobiles ont vu le jour et ont intégré l ’applicat ion ainsi d’UdA
Pro mobile nous sommes passé à UdA mobile.
Dans ce cadre, la DSI étant novice dans le monde des applicat ions
pour Smartphones, elle s’est tournée vers l’ ISIMA en proposant le projet
à des étudiants de deuxième année af in de démarrer correctement et
intel l igemment ce développement. Pour ce faire, une première partie du
projet avait été de sort ir une étude complète des possibi l ités offertes
pour réaliser une applicat ion mobile et de cela. Les questions suivantes
s’étaient posées :
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 2
- Sur quelles plateformes et avec quel langage de programmation
réaliser l ’applicat ion ?
- Quelles fonctionnalités faut- i l incorporer dans l’application ?
- De quelle manière faut-il réaliser les fonct ionnalités choisies
pour qu’elles soient modif iables aisément à postériori ?
La démarche du projet accompli en binôme dans la première part ie
de l’année avait été de choisir avec quels outi ls la réaliser , et quelle
sorte d’applicat ion devait être construite.
Ce stage, une fois les principales contraintes et l imites définies, a
donc consisté à la poursuite de ce travail, avec le développement et la
mise en place de cette application.
Dans un premier temps, je commencerai par l ’étude du cadre dans
lequel s’ inscrit ce stage. Ensuite, j ’aborderai la réalisat ion de
l ’applicat ion, enfin je présenterai les résultats obtenus et les
perspectives d’évolutions.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 3
I. INTRODUCTION DE L’ETUDE
A. PRESENTATION DU CADRE DU STAGE
L’Université d’Auvergne est composée de près de 16000
étudiants (dont 3000 étrangers), et professeurs répartis dans
plusieurs établissements : Odontologie, IUP Management, Droit et
Science polit ique Sciences économiques et de gestion -IAE,
Médecine, Pharmacie et IPAG.
a) UdA Pro
Ce projet conçu en mai 2010, est un réseau social
professionnel. I l fut mis en place af in de développer le sentiment
identitaire de l’Université d’Auvergne, de créer une dynamique
dans l ’Université, mais surtout af in d’assurer la bonne insert ion des
étudiants dans le monde du travail. Chaque membre de l’Université
dispose d’un compte qu’i l doit activer af in de pouvoir bénéficier des
atouts de la plateforme.
b) Ses acteurs
Les personnes directement impliquées dans ce service sont :
le DSI – directeur des systèmes d’ information – M. Berenguier qui
s’occupe du bon déroulement et de l’eff icacité de celui-ci en faisant
le l ien entre les autres services de l’université et le service
informatique. Ce sont ensuite deux développeurs : M. Chabaud et
M. Raynaud qui constituent la cellule de développement propre à
ce réseau. I ls ont également en charge d’autres applicat ions
interne à l’université .
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 4
B. RAPPEL DU SUJET DE L’ETUDE
UdA Pro n’ayant jamais été développée sur mob i le, l ’object if
de ce stage était de prendre la suite du projet en binôme et de
pouvoir mettre en production un premier service mobile pour le
réseau social et l ’Université d’Auvergne .
Concrètement, i l fallait :
- proposer des solutions et réaliser un travail
d’expert ise sur le développement mobile ,
- réaliser une application uti l isable au vue des
attentes de la direct ion et de ce qui se fait
aujourd’hui dans ce secteur.
C. CONNAISSANCE DU PROBLEME
1. CREATION ET EVOLUTION DE LA PLATEFORME
UdA Pro est une plateforme de réseau social professionnel
proposée aux 16000 étudiants et professeurs de l’Université
d’Auvergne ainsi qu’aux entreprises extérieurs. Pour ce faire, la
cellule de développement a util isé la version 1.6 d’Elgg, un logiciel
l ibre de création de réseau social dont la version init iale a été
lancée en août 2008. Les développeurs lui apportent en
permanence de multiples modif icat ions af in de le personnaliser et
de l’améliorer, ceci grâce aux retours des uti l isateurs inscrits. La
sort ie off icielle d’UdA Pro était en mai 2010 et aujourd’hui plus de
8000 personnes se sont inscrites, plus de 500 offres d’emplois y
sont dif fusées, ainsi que près de 400 CV.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 5
2. SERVICE PROPOSES PAR LA PLATEFORME UdA Pro
Les uti l isateurs ont plusieurs possibi l ités pour être act if sur la
plateforme :
Echanger : partager des f ichiers, des art icles et d’autres
informations via des blogs qui peuvent être à tout moment
commentés par d’autres ut il isateurs.
Discuter : créer des communautés – privées ou publiques, au
choix du gestionnaire – sur divers sujets techniques,
professionnels, associatif s ou encore ludiques.
Contacter : garder un l ien avec leur environnement de travail
ou d’étude à tout moment de l’année , ou après leur cursus
scolaire.
S’intégrer : trouver du travail, consulter des offres d’emplois
ou bien des CV.
D. ANALYSE DU PROBLEME
Toute la première partie du projet avait été d’analyser
le problème et de fournir une expert ise au vue des solutions
disponibles sur le marché. L’objectif étant de la mettre sur
Smartphone le service UdA Pro pour augmenter l ’ implication
des uti l isateurs du réseau. Pour cela, l ’applicat ion mobile
devait être attract ive, uti le et rester amovible au maximum.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 6
1. APPREHENDER LA PLATEFORME EXISTANTE
Dans un premier temps, af in de bien comprendre le
fonctionnement d’UdA Pro et donc d’être capable de proposer des
solutions pertinentes au problème, lors du projet nous avons
réalisé une étude en synthétisant les principales caractérist iques
de la plateforme – le contexte dans lequel s’inscrit l ’out il , les
enjeux déclencheurs de son lancement, ses fonctionnalités
existantes et ses perspectives d’améliorations – .
2. DEFINIR LES LIMITES DU PROJET
Af in de définir concrètement et intell igemment les limites du
projet nous avions fait une étude technologique résumée dans la
partie suivante. Elle nous avait permis de savoir dans quel
environnement nous all ions évoluer et comment nous réaliserons
l ’applicat ion .
En effet, certaines questions se posaient avant de débuter le
projet :
- Quel était le principal public visé par l ’applicat ion ?
- Sur quelles plateformes all ions-nous dif fuser l ’applicat ion ?
- Quelles fonctionnalités devr ions-nous intégrer dans l ’applicat ion ?
- Comment et avec quels langages all ions-nous la
construire sachant qu’el le devra être facile à maintenir et à faire évoluer par les développeurs de l’Université?
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 7
E. RESUME DE L’ETUDE DE LANCEMENT DE PROJET
1. VEILLE TECHNOLOGIQUE
Une veil le technologique dans le domaine du mobile a vait été
réalisée. Nous avions cherché un maximum d’informations et de
documentations sur le sujet pour obtenir des résultats pertinents et
en accord avec la réalité. En effet , le monde du mobile évolue très
rapidement et les marchés et les technologies évoluent
extrêmement vite dans ce secteur. Nous avions donc dû nous faire
une idée des tendances actuelles et des évolutions possibles pour
ne pas perdre de temps dans des technologies obsolètes .
a) ETUDE DE MARCHE DES SMARTPHONES
Avant tout, i l faut préciser les principales correspondances
entre les OS et les compagnies commercial isant des Smartphones :
- Symbian : Nokia, Samsung
- IOS : Apple
- Blackberry OS : Research in Motion
- Android : Samsung, Google,
HTC
- Windows phone : HTC, Samsung
Ensuite, nous avons étudié les parts de marchés des
Smartphones en croisant le plus de sources possibles sur le sujet.
Nous nous ét ions f ixés la date limite proche pour les documents
collectés sur ce sujet car dans le domaine tout va très vite .
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 8
Dans ce schéma, on peut voir que le marché des
Smartphones est principalement partagé entre quatre OS
dif férents : Android, Symbian, IOS, et Research in Motion .
Figure 2 : Evolution du marché des OS Smartphones
Figure 1 : Marché des OS Smartphones, second trimestre 2010
Source : Gartner
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 9
Ce schéma montre à quel point i l est indispensable d’étudier
l ’évolut ion du marché dans l’univers des Smartphones.
On remarque donc la chute des parts de marché de Symbian,
au prof it de celles d’Android alors que celles d’IOS et de RIM
stagnent. Aujourd’hui encore à la f in du stage les choses évoluent
et des changements peuvent encore voir le jour avec des rachats
ou des all iances possibles entre les compagnies.
De plus, i l faut prendre en compte le milieu dans lequel on
veut insérer cette application. En effet, le marché mondial ne
ref lète pas exactement le marché français et i l faut aussi prendre
en compte la population visée. I ci le milieu visé reste celui des
étudiants.
Ainsi, après avoir fait l ’étude du problème sur le terrain, nous
en avions conclu que la majorité des personnes faisant partie du
public concerné par l’application uti l isaient soit des iPhone, soit
des mobiles fonctionnant avec l ’OS Android. Donc, l ’ensemble de
l’équipe travaillant sur le projet s ’était accordée pour choisir les
deux plateformes majeurs afin d’y développer l ’application.
b) CARACTERISTIQUE DES SYSTEMES
D’EXPLOITATIONS
Dans un deuxième temps, nous avions étudié les
caractéristiques essentielles des principaux OS afin de
soulever la question du langage à uti l iser pour développer.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 10
Figure 3 : Caractéristiques des OS
Finalement, nous en avions déduit que les langages ut il isés
pour coder sur iPhone et Android étaient respectivement
l ’Object ive -C et le Java.
2. PRISE EN MAIN DES OUTILS MOBILES
Une partie de notre projet en binôme avait été la découverte
et la prise en main les dif férents outils de développement af in de
voir la complexité des deux plateformes. Nous avions en même
temps réalisé des tutoriels en paral lèle lors de notre prise en main
des outils, tels que xcode pour l ’IOS et Eclipse pour Android. Ces
documents ont été fournis au développeur af in de les aider au cas
où ils auraient besoin de faire des changements pas la suite. Un
premier bilan sur le développement mobile a été fait . A ce moment
là, nous commencions à savoir quelles directions prendre pour
l ’applicat ion.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 11
3. USAGES MOBILES ET FONCTIONNALITES
Afin de donner un aperçu des fonctionnalités qu’un étudiant
attendait d’une application mobile pour réseau social professionnel
telle que celle d’UdA Pro, nous av ions réalisé un sondage et fait
des enquêtes au près d’étudiants.
En collectant ces informations, nous avions vu l ’ importance
de rester proche des uti l isateurs. Cet échange nous avait permis
d’élaborer en résumé un plan avec toutes les idées intéressantes
et de f inalement retenir uniquement les fonctionnalités importantes
qui suivent:
Fonctionnalités propres à UdA Pro :
- Flux d’actualité en direct : suivre l ’actuali té d’UdA Pro en
direct via un f lux RSS.
- Géo-localisation : aff icher les dif férents lieux ut iles –
situat ion géographique des Universités, des entreprises
partenaires d’UdA Pro, des conférences, etc. – et vision de
ses contacts en temps réel.
- Calendrier des évènements : créer et aff icher des
évènements tel que les conférences, les réunions, les
manifestations, etc.
- Echanges de messages vocaux et de photos :
transmettre un message texte ou vocal , accompagné ou
non d’une photo, à un ou plusieurs contacts en même
temps.
Elargissement pour l ’Université d’Auvergne :
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 12
- ENT : permettre d’accéder aux services numériques de
l’Université – emplois du temps, changement de salles ou
d’heure, les notes, etc. – .
- Affichage des menus des Restaurants Universitaires :
diriger un élève sur un menu, avant même qu’il soit devant
le restaurant, et lui permettre de visualiser les f i les
d’attentes de chaque restaurant.
- Réalité augmentée : localiser les principaux
établissements des campus – Restaurants Universitaires,
Bibl iothèques Universitaires, etc. – afin d’aider les
nouveaux arrivants et les étudiants étrangers.
II. MATERIEL ET METHODE
A. DEFINITION DES OBJECTIFS A REALISER
Après avoir étudié le problème dans son ensemble, nous
avions construit un tableau de priorité pour l ’applicat ion. Le projet
avait permis de lancer une première ébauche d’application. Le
stage devait me permettre de rendre l’application uti l isable et
optimisé pour les mobiles. Avec pour but de permettre à la cel lule
développement de pouvoir continuer le développement de
l ’applicat ion et d’ajouter des fonctionnalités.
Ainsi, nous avions arrêté les objectifs avec comme priorités
les fonctionnalités suivantes.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 13
Figure 4 : Tableau des priorités pour les fonctionnalités
Notre choix avait été de séparer l ’application en deux parties
pour des raisons graphiques et ergonomiques. Un système
d’onglets en bas de page a donc été retenu. Le premier onglet
comportant les fonctionnalités propres à l’Université d’ Auvergne et
le deuxième onglet avec UdA Pro. J’ai donc poursuivi dans cet axe
de développement.
Les maquettes qui suivent avaient été réalisées au cours du
projet et ont guidé mon travail tout au long du stage.
Priorités Onglet 1 Onglet 2
1 Géo localisat ion des
établissements sur Clermont-Ferrand
Se connecter sur son compte
Flux d’actualité
2 Géo localisat ion des
établissements sur l ’Auvergne Partager sur les communautés
3 Menu des Restaurants
Universitaires
5
Instal lation de webcam dans les RU
Géo localisat ion de ses contacts
Réalité augmentée Messagerie texte, vocale et vidéo
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 14
La première page de l’application devait ressembler à :
Le bouton "Liste" (4)) renvoie sur la page suivante :
Figure 6 : Maquette vue l iste
4) Bouton qui affiche la liste
des points d’intérêts
3) Barre supérieure des
boutons pour chaque catégorie
de points d’intérêts et renvois
sur les cartes appropriées à la
sélection.
1) Afficher deux onglets qui
renvoient chacun sur une partie
de l’application (cette barre
restera tout le temps pendant
l’exécution).
2) Affichage d’une carte
avec notre position et des
points d’intérêts
Comme pour la première vue la
barre permet d’afficher les listes
selon les catégories souhaitées
et le bouton de droite permet de
retourner sur carte.
Affichage de la liste des
points d’intérêts avec le nom,
les caractéristiques et la
distance entre le point et
notre position
Figure 5 : Maquette vue géo localisation
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 15
Le deuxième onglet devait amener sur la partie propre à UdAPro et
pour la première connexion une page avec le Login et Password allait
être aff ichée.
Figure 7 : Maquette vue connexion
Une fois identif ié, on arrive rait sur la page UdAPro où s’aff iche le f lux
d’actualité.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 16
Figure 8 : Maquette vue flux d'actualité
J’ai donc essayé de respecter le plus possible ces maquettes
dans la poursuite du développement de l’application . Que ce soit
sur iPhone ou Android les développements ont été menés en
paral lèle et les résultats obtenus restent similaires. Même si la
programmation est dif férente pour ces deux systèmes
d’exploitat ion, la logique de développement était identique.
B. DEVELOPPEMENT MOBILE
Le premier travail réalisé au cours du projet avait été
d’observer et de voir comment mettre en place ces deux vues
principale avec les onglets. Pour cela , après notre prise main des
logiciels et langages de développement nous avions obtenu sur les
deux plateformes notre système de double vue et de changement
avec le système d’onglets
Flux d’actualité affiché
en direct Poster un message sur
la file d’actualité
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 17
Au départ, les pages devaient être réalisé spécif iquement et
dédiée à chaque système d’exploitation au sein de deux
applicat ions entièrement natives.
Ensuite, pour des raisons de simplicité, de gain de temps car
plus qu’un seul développement est réalisé, ce qui facil ité aussi la
maintenance. Avec les compétences des développeurs de
l ’université qui sont à la bases plus qualif iés dans le
développement web, la deuxième solution adoptée a été d’intégrer
un map kit dédié Apple ou Android dans la première vue pour la
carte. Et dans la vue de l’onglet dédié à UdAPro on devait faire
appel à une webview.
Cette solut ion s’avérant être bonne, pour les mêmes raisons
citées précédemment au fur et à mesure de notre développement,
nous nous sommes tournés vers une applicat ion orientée vers
beaucoup de développement web avec du HTML5. Cette décision
s’est prise après beaucoup de réf lexions et de tests. Avec les
compétences que nous avions acquises tout au long de la phase de
préparation, le choix à été pris de développer des webapps que
nous intégrerions dans les applications natives.
Nous sommes donc lancés sur les webapp que nous avons
liés à chacune des deux vues dans des webview sur Android ou
des UIWebview sur iPhone. Ce choix pris au cours de la conception
s ’est montré 6 mois plus tard être une bonne solution technique car
de plus en plus de développement mobile aujourd’hui sont traités
de cette manière et le HTML5 connait des évolut ions de jour en
jour.
Durant mon stage, j ’a i été amené à modif ier et à renforcer les
codes en natif même si cet te part de développement est restée très
minimaliste.
1. Développement Android
Une fois la webview déclarée, le premier control effectué est
sur la connexion. Si une connexion est faite ou faisable
l ’applicat ion continu sinon elle s’arrête. C’est la fonction suivante
qui grâce aux fonctions du package android.net.NetworkInfo et à la
permission android.permission.ACCESS_NETWORK_STATE
permet ce control :
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 18
public boolean isNetworkConnectionAvailable()
{
ConnectivityManager cm =
(ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo netInfo = cm.getActiveNetworkInfo();
if (netInfo != null && netInfo.isConnectedOrConnecting())
{
return true;
}
else{
return false;
}
}
Ensuite, on crée deux intents, un par onglet et un listener sur
la webview. Les intents sont presque indispensables sur la
plateforme Android. On peut les comparer à des act ions ou même à
des intentions. I ls permettent de dialoguer à travers le système à
partir de canaux qui leurs sont dédiés. Par exemple, quand le
mobile reçoit un appel, la plateforme lance un intent signalant
l ’arr ivée d’un appel, de même pour un sms. I ls sont ut i l isés dans
les applicat ions pour dialoguer à l ’ intérieur de celle -ci comme lors
d’un changement d’écran ou en communiquant avec le système du
mobile. Ainsi, on va faire le dialogue entre nos onglets et la
webview qui est le l istener, l ’écouteur en anglais . Le message
transmis sera donc l ’url de chacune des deux webapp. Les URL ont
par la suite étaient mis dans la configurat ion pour pouvoir les
changer facilement .
Voilà les intents des onglets :
Intent intent = new Intent(this, ActiviteTab.class);
tabHost = getTabHost();
intent.putExtra("url", "http://udamobile.u-clermont1.fr");
tabSpec =
tabHost.newTabSpec("un").setIndicator("1",getResources().getDrawable(
R.drawable.onglet1)).setContent(intent);
tabHost.addTab(tabSpec);
intent = new Intent(this, ActiviteTab.class);
intent.putExtra("url", "http://srvdev.udapro.fr/pg/UDA_Mobile/actu");
tabSpec =
tabHost.newTabSpec("deux").setIndicator("2",getResources().getDrawabl
e(R.drawable.onglet2)).setContent(intent);
tabHost.addTab(tabSpec);
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 19
Puis le l istener de la webview :
String url = getIntent().getStringExtra("url");
Par la suite, i l a fallu gérer la navigation web au sein de
l ’applicat ion. Au départ la navigation entre les pages n’était pas faisable
et dés qu’une URL était réécrite l ’application était stoppée puis
l ’ut i l isateur était redir igé sur son navigateur web du mobile. J ’a i donc
ajouté la fonction qui suit. En plus un control permanant est fait pour que
l ’ut i l isateur ne reste que dans le cadre d’UdA Mobile ou UdA Pro et qu’i l
ne puisse pas al ler sur une autre page totalement étrangère aux services
et que l’application ne devient pas un navigateur web .
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
//mail ou tel pour l'annuaire
if (url.startsWith("mailto:") || url.startsWith("tel:"))
{
Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
startActivity(intent);
}
else
{if(!url.startsWith("http://udamobile.u-
clermont1.fr")&&!url.startsWith("http://srvdev.udapro.fr"))
//Connexion au wifi ou autre
{
Context context = getApplicationContext();
CharSequence text = "Lien externe à l'application ou
problème de connexion wifi. Si vous n'êtes pas connecté au wifi et
connectez vous et essayez à nouveau.";
int duration = Toast.LENGTH_LONG;
Toast toast = Toast.makeText(context, text, duration);
toast.show();
Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
startActivity(intent);
}
else
{
view.loadUrl(url);
}
}
return true;
}
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 20
Dans cette fonction, i l y a aussi un premier test sur l ’ intent pour
voir si ce n’est pas un l ien pour téléphoner ou envoyer un mail et lancer
l ’activité correspondante. Ce test est uti le pour la fonctionnalité de
l’annuaire qui renvoie des l iens direct vers les mails ou téléphones.
Des options sur la webview sont nécessaires pour pouvoir
permettre la géolocalisat ion, l ’exécution du JavaScript, la mise en cache
et la sauvegarde de l’ identif iant et du mot de passe sur UdA Pro.
mWebView.getSettings().setJavaScriptEnabled(true);
WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setAppCacheEnabled(true);
webSettings.setGeolocationEnabled(true);
webSettings.setSaveFormData(true);
webSettings.setPluginsEnabled(true);
Pour f inir ce bref résumé, une chose indispensable au bon
fonctionnement d’une applicat ion Android a été la mise en place du
f ichier manifest . C’est dans ce f ichier de l ’application que toutes les
permissions Android sont déclarées. Les permissions sont des droits
d’accès aux fonctionnalités du téléphone. Ici l ’application util ise internet
et un contrôle sur l ’état de la connexion, ensuite i l était aussi nécessaire
d’ajouter des permissions pour la géolocalisation.
<uses-permission android:name="android.permission.INTERNET"></uses-
permission>
permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION"></uses-
permission>
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-
permission>
<uses-permission
android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission
android:name="android.permission.ACCESS_ASSISTED_GPS" /><uses-
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 21
2. Développement iPhone
Tout comme sur Android, la première étape fut la mise en
place des deux onglets avec xcode et interface Builder. Pour cela,
nous avons fait appel à une classe CocoaTouch :
UITabBarControl ler. Ensuite, nous avons créé les deux vues,
UIViews que nous avons enregistrées dans l ’UITabBarControl ler .
Avec ces deux objets ViewControl ler, I l a fallu les associer à
l ’UITabBarControl ler afin de pouvoir naviguer entre les deux.
Pour enregistrer les vues dans l ’UITabBarControl ler , nous avons
util isé la propriété du viewControl lers qui est en fait le tableau des
vues.
Une fois les deux UIViewController créés et mis à jour, un
signal leur est passé de manière à ce qu’i ls soient enregistrés par
l ’UITabBarControl ler .
Ensuite, i l fal lu intégrer les deux UIWebview à ces deux vues.
Pour système fut encore plus simple que pour Android avec le
chargement des URL souhaités.
C. DEVELOPPEMENT WEB
1. Premier pas : Google maps
Pour débuter l ’applicat ion comprenait dans le premier onglet
uniquement la fonction de carte. Ce fut nos premiers tests
d’application web. La solut ion la plus simple pour aff icher nos
cartes Google Maps avait été de créer un compte sur Google, puis
de créer une simple carte sur Google maps. Sur cel le-ci, nous
avions quelques points d’intérêt avec des établissements contenant
la description de ceux-ci –nom, adresse, descript ion et photo – .La
solution été d’appeler l ’URL de cette carte.
Mais, i l s’est très vite avérer que cette solut ion été à peine
convenable pour des ordinateurs et absolument pas satisfaisante
pour des terminaux mobile. En testant l ’application nous av ions
remarqué que l ’aff ichage des cartes était beaucoup trop lent pour
pouvoir distr ibuer l ’applicat ion et satisfaire les ut il isateurs .
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 22
A la f in du projet, nous nous étions donc tournés vers la
version trois de l ’API Google Maps sortie en 2010. En effet, celle-ci
proposait de nombreuses améliorat ions permettant l ’opt imisation et
l ’ intégrat ion sur les téléphones portables.
Ainsi, ce fut notre première démarche vers le HTML5. A partir
de là, le reste du développement de l’applicat ion a définit ivement
tourné dans cette direction.
Les langages de programmations suivants sont devenus les
seuls à être ut il isé par la suite :
- HTML5
- JavaScript
- CSS
- PHP
En plus de ces langages le Framework jQuery m ’a apporté
une grande aide, avec ses surcouches de code cela a permis
d’énormément simplif ier les scripts de toutes mes pages.
Après un bref aperçu du développement au cours du projet,
dès le commencement du stage j ’ai rapidement mis en applicat ion
tous ce que nous avions planif iés et mis en place les décisions
techniques.
2. UdA Mobile : Onglet 1
Durant toute la période du stage cet onglet à été en
constante évolution et de nouvelles fonctionnalités voient le jour
régulièrement.
La première part ie conséquente fut la mise en place de la
carte. I l a fallut appréhender l ’API Google Maps V3 et l ’adapter au
mieux à nos besoins pour cela les tutoriels Google m’ont été très
utiles . J’ai donc construit ma première page web de l ’applicat ion ,
udamobile.u-clermont1.fr avec un résultat sat isfaisant sur mobile.
A partir de là , j ’a i pu l ’opt imiser et ajouter d’autres fonctions.
Ainsi aujourd’hui, la partie UdA map possède une fonction de
géolocalisat ion qui compte 100 points d’intérêts, classés dans 7
catégories dif férentes que l’on peut sélect ionner ou non pour
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 23
l ’aff ichage via une liste de choix. Le fonctionnement sera
développé plus en détail dans la partie résultat détai l lé .
Ensuite, quatre autres fonctionnalités ont rejoint la map sur la
page d’accueil et sont optimisés pour mobile. Un annuaire des
personnels de l ’université, un lecteur de f lux RSS et un lien vers le
site off iciel de l’université ont été mis en place. Suite à notre
première collaboration avec le CROUS pour la carte, j ’ai créé le
service des menus des restaurants .
3. UdA Mobile : Onglet 2
En paral lèle du premier onglet le développement de l’onglet ,
UdA Pro a été fait. Au cours du projet , nous avions installé sur nos
ordinateurs des machines virtuel les VMware avec des systèmes
d’exploitat ion Linux et des serveurs apache. Ceci avait comme
f inalité de mettre une version d’UdA Pro dessus et de pouvoir
tester et appréhender Elgg le logiciel avec lequel UdA Pro a été
développé. A la f in du projet dans notre webview nous arrivions
simplement à charger le site udapro.fr qui n’était aucunement
optimisé et pensé pour les mobiles. Mon travail a donc été de
développer un nouveau module d’udapro.fr spécialement conçu
pour mobile. J’ai alors créé le plugin UdAMobile que nous avons
intégré à UdA Pro. Et par la suite au sein l ’applicat ion native le
module spécif ique au mobile est directement chargé et la
navigation une fois identif ié se fait entièrement sur la partie mobile
du site.
a) Elgg
Plus tôt, j ’ai parlé de plugin , en effet Elgg est constitué de
plugins que la communauté d’Elgg met en l ibre accès ou que les
développeurs peuvent développer à leur convenance. I l suff it
ensuite dans les outils d’administrat ion de les gérer en les
désactivant ou les activant. C’est de cette façon que la cellule de
développement a pu construire UdA Pro, i ls ont développé de
nombreux modules complémentaires qu’i ls ont ajoutés à la version
d’Elgg de base.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 24
J’ai également ajouté le module UdA mobile à l ’édif ice UdA
Pro. Pour cela l ’arborescence d’Elgg est prévue à cet effet et un
dossier Elgg/mod et présent pour ajouter tout nouveau module .
b) Plugin UdA Mobile
Pour créer le module j ’ai donc ajouté un dossier UdAMobile
parmi tous les autres modules. A ce dossier, la démarche à suivre
était d’ajouter un f ichier start.php - voir annexe-. Celui ayant
comme util ité d’ init ialiser le module, de référencer la page du
module au sein du site et aussi de référencer toutes les actions de
notre module.
-Référencement du module à l’ init ialisation d’udapro.fr :
-Référencement de toutes les act ions du module :
Dans ce même f ichier un control sur l ’ identif ication est fait et
une redirect ion vers les pages souhaitées est faite ici. Pour
l ’ instant seulement deux pages sont présentes celle de connexion
et le f lux d’actualité. La fonction d’Elgg is loggedin() permet donc
de dir iger l ’uti l isateur sur l ’une de ces deux pages selon l ’état de
son identif ication.
Le fonctionnement d’Elgg est ensuite d’appeler des vues PHP
et de construire ses pages html en combinant les dif férentes vues.
L’appel est réalisé avec une fonction elgg en PHP , c’est la fonction
elgg_view().
C’est ainsi que pour la page de connexion , la vue
UDA_Mobile/login est appelée et la page est construite avec les
paramètres passés en arguments.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 25
D ’une manière semblable pour le f lux d’actualité , on combine
plusieurs vues. On associe UDA_Mobile/thewire_mobile pour la
partie déposer une actuali té et r iverdashboard/container avec
UDA_Mobile/pageshell_mobile pour construire le f i l d’actualité.
Voici l ’exemple simple de la vue ‘thewire_mobile ’ qui représente
une partie de la vue actu. Elle combine des informations en PHP et
du contenu HTML :
Cette vue permet aussi de faire le l ien avec les actions
rencontrées plus tôt dans le start.php. Ici , sur la deuxième ligne,
on peut voir que sur la balise form on enregistre l’act ion
‘thewire_mobile/add’. Cette act ion permet d’enregistrer l ’actualité
sur UdA Pro et l ’ajouté au f i l.
On peut également voir à deux reprise des elgg_echo() ceci fait
appel à un f ichier de traduction qui renvoi les bons termes
associés à la langue défini. En effet aujourd’hui le site UdA Pro est
uniquement en Français mais l ’Université veut garder la possibil ité
d’ajouté de nouvelles langues à sa plateforme.
Cette part ie s’est montrée relativement compliquée de par la
complexité et toutes les dépendances entre les modules. Au f inal,
si le résultat se présente assez simplement , ceci est dû à de
nombreuses réf lexions sur l ’adaptation et la simplif ication du
système de départ pour l ’adapter aux mobiles.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 26
4. Optimisation et Ergonomie
Une fois des résultats conformes sur l ’ensemble des
activités, j ’ai dû prendre en compte la facil ité d’ut il isat ion de
l ’applicat ion.
a) Vitesse d’exécution
L’un des enjeux majeur sur le développement mobile et donc
de mon travail est la rapidité de l ’application. La première étape a
été de paramétrer l ’application native pour quel puisse mettre en
cache des informations de manière à ne pas les recharger à
chaque ut il isat ion.
Par la suite un travail important de minimisation et de compression
a été réalisé. I l a fallut diminuer un maximum les appels client
serveur. Pour cela, j ’a i regroupé tous les f ichiers scripts et CSS
dans un seul f ichier script et un seul f ichier CSS. Tous ces f ichiers
étant préalablement eux-mêmes minimisé grâce à l’out il "YUI
Compressor". J’a i choisi cet outil car i l reste le plus eff icace parmi
ceux que j ’ai testé. I l permet de supprimer les espaces, les
tabulations, les commentaires et redéfinit les variables avec des
lettres. Cette opération peu permettre de diminuer jusqu’à 50% la
tail le des f ichiers ce qui est vraiment bénéfique pour le transfert
des données entre le serveur et les clients.
Figure 9 : Exemple de compression avec "YUI Compressor" sur un fichier CSS
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 27
Par comparaison, pour le chargement de la page UdA map
qui est la plus conséquente de l’application . Lors du premier
chargement donc sans récupère de donné du cache, les temps de
chargement sont passés de 9s à 6s par la suite. Avec la
récupération des données mises en cache le chargement peut
descendre jusqu’à 4,5s . Sur ces 4,5s i l faut savoir que la fonction
de géolocalisat ion prend un peu de temps et que sur la carte
Google i l y a également aussi le chargement du fond qui prend
beaucoup de temps.
Sur les autres pages mise à part celle du site de l’université qui
n’est pas optimisée pour mobile, l ’applicat ion n’excède pas les 3s
de chargement.
Sur la part ie UdA Pro la minimisation a été beaucoup plus
compliqué car partant d’un f ichier CSS init ial global pour tout le
site, j ’a i été obligé de faire le tri moi-même des données. Ligne par
l igne, je suis passé d’un f ichier init ial de plusieurs mil l iers de
l ignes avec plus de 30kB de données à une seule l igne d’à peine
2kB. De cette manière, le chargement du f lux prend moins d’une
seconde contre plus de 10s pour la version d’UdA Pro init iale.
Pour terminer d’optimiser la vitesse, nous avons également
ajouté à la configuration du serveur des paramètres af in qu’i l
compresse les données transférées du serveur vers le cl ient. De
cette sorte les transferts sont devenus le plus minimaliste possible
et l ’appl ication peut maintenant fonctionner en toute rapidité sur de
nombreux mobiles.
b) Adaptation idéal pour les utilisateurs
En concertat ion permanente avec mes collègues et des
util isateurs d’UdA Pro, j ’ai tenté de calquer au mieux les attentes
de ceux-ci sur l ’applicat ion pour la rendre la plus intuit ive et
pratique à ut il iser. Ce sont des questions comme sur la posit ion , la
tail le ou encore l ’ut i l ité de certains boutons , les commentaires du
f lux d’actualité, le style des menus et d’autres qui se sont posés.
Et bien souvent ce n’est qu’après de nombreuses conf rontations et
argumentations sur les tests réalisés auprès des ut il isateurs que
nous trouvions les solutions. Le travail d’équipe a été primordial
pour avancer correctement dans le développement de l ’applicat ion .
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 28
D. RESULTATS DETAILLES
Figure 10 : Bureau Android
Une fois l ’applicat ion instal lée un icône UdA Mobile apparait
parmi les applicat ions du mobile. I l suff it alors de cl iquer dessus
pour démarrer l ’applicat ion.
1. Premier onglet
a) Page d’accueil
L’application démarre sur le premier onglet avec la page
d’accueil udamobile.u -clermont1.fr. Sur cette page pour l ’ instant 5
l iens html sont présents. Cette page est très simple et facile à
adapter pour ajouter d’autre fonction via d’autre page web.
Exemple du bouton Annuaire avec la classe "btnmenu" pour définir
le style, le href pour le l ien vers la page de l’annuaire et la source
de l’ image.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 29
Figure 11: Page d'accueil de l 'application
Sur la part ie basse, les deux onglets restent présents tout au
long de l ’applicat ion et i ls changent de style si on est dans la
première part ie ou la deuxième de l’applicat ion.
b) UdA map
La carte Uda map a occupé une part ie conséquente du
développement. Pour arriver à ce résultat beaucoup de recherches
ont été faites sur le site développeur Google et les forums.
Certaines fonctions sont apparues en même temps que je
développais l ’application. Cela nécessitait une adaptation
permanente af in de pouvoir évoluer rapidement
Un travail important a été également fait pour référencer tous
les points d’ intérêts . Pour le moment, on en compte une centaine.
I l a fallu déterminer quels points mettre et ensuite les rentrer tous
un à un dans une l iste avec leurs descript ions et leurs coordonnées
géographiques. Ces coordonnées GPS ont été repérées et vérif iées
les une après les autres pour que l ’applicat ion soit la plus juste
possible et de garder de la crédibi l i té.
Pour cette part de travail , le CROUS de Clermont-Ferrand s’est
associé à notre travail en me fournissant les données pour leurs
établissements.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 30
Pour mettre en forme la l iste, j ’ai fourni un outi l développé en
Visual basique. Toutes les informations étant entrées dans Excel,
cet outi l permet de transformer le tableau xls sous le format désiré
pour la l ’application à savoir le json.
La carte reste simple avec des contrôles basiques comme le
contrôle du zoom et du type de carte. Par défaut elle est en mode
plan pour la rapidité du chargement car moins volumineux que les
vues satell ite.
Figure 12: UdA map
Sur cette carte on peut dist inguer la barre de navigation qui
reste toujours présente sur cette première partie de l ’applicat ion.
La maison de gauche est toujours là pour permettre à l ’ut i l isateur
de retourner à la page d’accueil du premier onglet et ensuite les
autres boutons changent selon les pages et les contrôles à faire.
Ici :
-1)- la cible permet de localiser l ’ut i l isateur sur la carte , la fonction
appelée dernière cette action sera décrite un peu plus loin.
-2)- la l iste permet d’aff icher la l iste des points d’ intérêts -voir
1) 2) 3)
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 31
f igure 13-.
-3)- c’est le bouton de contrôle sur les types de catégories à
aff icher, i l déplie une liste que l ’on peut voir sur la deuxième
capture d’écran f igure 12 . Sur cette liste, on sélectionne les
catégories désirées ici la restaurat ion et les bâtiments
universitaires.
Ces contrôles sont réalisés grâce au jQuery qui comme je le
disais plus tôt simplif ie énormément le code.
Pour des cl ics comme ici, le jQuery permet décrire une
fonction en très peu de ligne. Voila exemple du bouton sur les
types de catégorie qui une fois sur 2 monte ou descend la l iste de
sélect ion :
En JavaScript ceci aurait était beaucoup plus lourd à écrire.
On aurait d’abord fait un l ien de cette manière :
<a href="javascript:;" onclick="slide(#btn1)">. Après dans la
fonction sl ide, i l fal lait faire un contrôle pour savoir si la l iste était
dépliée ou non. Dans les deux cas, faire un timer pour changer le
style de la l iste en la décalant à intervalle de temps régulier soit
vers le haut soit vers le bas. Une tel le fonction peut prendre une
vingtaine de l ignes de code à écrire contre seulement trois en
jQuery.
Les cl ics sur les catégories sont réalisés de la même façon. Lors
du clic, le style CSS du bouton est changé, ensuite les fonctions
Google map que j’ai adaptées et enrichies pour l ’applicat ion sont
appelées.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 32
.
Figure 13 : Liste des points d'intérêts
La f igure 13 est la l iste des points d’intérêts, elle aff iche que
les catégories choisies et comme avec la carte la sélect ion est
encore faisable à l ’aide du même bouton -3)-.
Le bouton deux a changé et permet dans cette position de
retourner sur la carte.
Sur cette liste on peut voir que les distances entre les points
d’intérêts et l ’uti l isateur sont aff ichées. Ceci est faisable avec la
position géographique calculée à l ’ init ial isat ion de la carte ou à
partir de l’action sur le bouton -2)-. Plus derrière à une requête
AJAX pour calculer les distances.
Pour revenir sur géolocalisat ion, ceci a été rendu possible
grâce au HTML5. La fonction de géolocalisation est apparue en
même temps que je développais la carte et a encore une fois
beaucoup simplif ié mon code une fois compris et mis en place .
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 33
Plutôt que de passer par les applications en natif pour obtenir les
coordonnées GPS, cela est devenu faisable en passant par le s
navigateurs web. La fonction
navigator.geolocation.getCurrentPosition avec les bons paramètres
permet ainsi de trouver les coordonnées GPS que ce soit avec une
connexion wif i ou 3G.
Le traitement en PHP à été par la suite très faci le à réaliser en
passant par un peu de mathématique.
I l est vrai que ces distances renvoyées sont des distances en
ligne droite. On aurait pu réaliser ces calculs avec l ’API Google
mais Google n’acceptant qu’un nombre limite de requêtes, les
calculs auraient dus être temporisé et ceci aurait pris beaucoup
plus de temps.
Sur la l iste est présent sous chaque adresse un lien it inéraire
qui permet d’aff icher un it inéraire détail lé pour ce rendre à la
destination choisie. Cet i t inéraire est présent sur la page suivante -
f igure 14- Cet fois, j ’a i pu uti l iser le JavaScript associé aux
fonctions proposés par Google car un seul i t inéraire est calculé et
le temps d’exécution reste raisonnable.
L’it inéraire est composé du trajet sur la carte avec les contrôles
habituels et en plus de la streetview pour pouvoir mieux se repérer
et en dessous l’ it inéraire est détail lé en texte.
En plus une fonction a été ajoutée pour sélect ionner le mode de
transport.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 34
Figure 14 : UdA map itinéraire
c) Les menus des restaurants
Le deuxième bouton du menu d’accueil permet d’accéder à la
l iste suivante de tous les restaurants qui peuvent être classés par
ordre alphabétique ou du plus proche au plus éloigné. Ces
classements sont effectués en PHP comme pour la l iste de points
sur la map. La l iste des restaurants et les menus que nous verrons
plus tard proviennent de web services mis à notre disposition par
le CROUS.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 35
Avec la fonction "cron" présente sur le serveur de
l ’université, tous les matins, les données sont récupérées et
inscrites dans un f ichier texte. Ensuite un traitement PHP est fait
pour aff icher la l iste et les menus convenablement.
Après, c’est en jQuery que les liens sont fait entre le restaurant et
le menu approprié. Le menu est lui-même crée lors d’un appel
Ajax.
Figure 15 : Liste des restaurants
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 36
Figure 16 : Exemple d'un menu
d) Annuaire universitaire
Un besoin prat ique à été dégagé avec cette troisième
fonction , l ’annuaire téléphonique des personnels universitaire s
avec tous les services de l ’université. Ce service a été simple à
mettre en place car i l n’a nécessité qu’une seule requête LDAP et
un peu de mise en forme pour un résultat plus commode . En effet
grâce aux liens html avec les protocoles mailto et tel par un simple
clique sur les l iens, i l est possible d’ajouter le contact dans son
répertoire téléphonique ou encore de lui écrire ou l ’appeler
directement
Voici un exemple avec le protocole mailto sur ma propre adresse
mail :
<a href="mailto:[email protected]">[email protected]</a>
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 37
Figure 17 : Recherche sur l 'annuaire
e) Flux RSS
Un lecteur de f lux RSS à été inséré à l’application car facile à
mettre en place et i l donne de la visibi l ité sur l ’Université.
Le plus dif f ici le à faire étant la mise en page J ’ai fait un
paragraphe par actualité, ensuite le l ien vers l ’actualité , suivit d’un
résumé.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 38
Figure 18 : Flux RSS
f) Site de l’UdA
Toujours pour des raisons de visibi l ité , nous avons décidé
d’ajouter le site de l’université. Cependant cette part ie n’est pas
très bien adaptée car le site est intégré dans un iframe avec sa
version normale et donc n’est pas optimisé pour les mobiles. En
effet, pour l’opt imiser i l y aurait un travail considérable pour peu
d’uti l ité. Cela reste quand même posit i f d’avoir le site à l’ intérieur
de l’application.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 39
2. Deuxième onglet
L’onglet UdA Pro , après de nombreux essais, j ’ai assimilé la
complexité d’elgg et compris la gestion d’ identif ication sur UdA
Pro. Ce qui ma permis de rapidement mettre en place le f lux
d’actualité .
a) Connexion
La page est minimaliste avec deux champs à compléter le
mail et mot de passe . Ensuite l ’act ion login_mobile est appelée
pour vérif ier sur la base de données d’UdA Pro les données
rentrées par l’uti l isateur. Si le résultat est positif , on va sur le f i l
d’actualité , sinon un message d’erreur est aff iché et i l est demandé
à l’ut i l isateur d’essayer de se reconnecter.
Par la suite, des options dans les applications natives ont été
ajoutées. Ces options permettent à l ’ut i l isateur , s’i l le souhaite, de
conserver sa connexion act ive d’une fois à l ’autre .
Figure 19 : Connexion UdA Pro Mobile
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 40
b) Fil d’actualité
Le f lux d’actualité consiste à appe ler l ’e lgg view
riverdashbord pour l’aff ichage du f i l d’actua l i té pour un ut il isateur
donné. Cette vue à été développé directement dans le plugin
UdA_Mobile ainsi qu’expliqué dans la partie propre à la plateforme
Elgg.
Figure 20 : Fi l d'actualité UdA Pro
Sur cette vue les contrôles sont réalisés en JavaScript et
avec le jQuery. Trois act ions sont possibles :
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 41
-publier une actuali té, cet act ion est faisable dans la part ie du
haut.
-faire défiler les actualités vers le bas et aff icher d’autres
actuali tés plus anciennes avec le bouton "Actualités plus anciens" .
Pour aff icher ces actuali tés plus anciennes c’est le même système
que pour les premières actuali tés du f i l, c’est une requête AJAX
sur le serveur qui est faite. Après le mobile reçoit et met en pages
ces actualités en dessous des plus récentes.
-sur le f lux, i l y a des bulles avec le nombre de commentaires de
chaque actualité , i l est possible d’al ler voir les commentaires ou
d’en poster un en cliquant sur l ’actuali té.
E. MISE SUR LE MARCHE
Le stage n’étant pas encore terminé, l ’applicat ion n’a pour
l ’ instant pas été déposée sur les boutiques en ligne d’Apple et de
Google. Ceci restera l’étape f inale du stage.
Le dépôt sur l ’Android market se fera sans problème. Le
compte Google de l ’université a été validé sans problème et
l ’applicat ion n’est pas contrôlée.
L’application sur iPhone va être plus complexe à mettre sur le
marché. La validat ion du compte Apple n’a toujours pas été faite .
Cela fait plus d’un mois que nous l ’attendons, pour des problèmes
de validat ion de l’université en tant que compagnie. Une fois cette
validat ion reçue, l ’applicat ion devra encore subir des tests et être
validée chez Apple pour être mise sur l ’Apple store.
Une fois les applications mise en l igne, elles seront
disponibles gratuitement et pour tous les possesseurs d’iPhone ou
d’Android.
F. PERSPECTIVE D’EVOLUTION
A la f in de mon stage je laisse donc entre les mains des
développeurs une applicat ion déjà aboutie qui possède encore
beaucoup de possibil i té d’évolut ion avec un bel avenir. En effet ,
les développeurs qui vont reprendre cette application n’ont aucune
connaissance dans le domaine du développement mobile, mais i ls
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 42
sont experts en web. C’est donc la raison pour laquelle ce ne sera
pas un problème pour eux de prendre la continuité de mon travail.
Aussi les améliorat ions envisageables à l’avenir sont :
- Pour le premier onglet :
Rajouter une page avec l ’ENT avec
les fonctions de calendrier, de
réunions et en plus le nouvel outi l
de web conférence pourrait tout à
fait intégrer l ’application.
Sur l ’ENT un service de petites
annonces pour les étudiants est
présent, ce pourrait être un plus de
l ’a jouter dans l ’application mobile.
Une fonction avec les notes avait
aussi été envisagée d’être mise et
pourrait un jour rejoindre cette
partie.
Pour le service de restauration, la
mise en place de webcam comme
dans les stations de ski ou les parcs
d’attraction pour voir les f i ls
d’attente reste toujours faisable
avec la col laboration du CROUS.
Avec la 2D et encore plus la 3D, la
réalité augmentée est de plus en
plus performante. En complément
de la carte un tel service pour être
développé.
-Pour l’onglet UdA Pro :
Sur le f i l d’actualité avec les
évolutions du HTML5, de nouveaux
services comme l’enregistrement
vocal ou la prise de photographies
et la gestion de celle-ci directement
à partir du navigateur, permettrons
de faire évoluer rapidement les
échanges de contenus sur le f lux
d’actualité.
D’autres pages en plus du f lux
d’actualités pourront être adaptés à
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 43
partir d’UdA Pro. Parmi ces pages
on pourrait retrouver les offres
d’emplois, les CV, UdA Stage etc.
Ce rapport étant rédigé avant l ’échéance du stage . I l me reste
quelques améliorat ions à faire d’ici la f in . Ainsi, actuellement je
travail le sur la carte et menus des restaurants pour pouvoir faire le
l ien entre ces deux services. J’ai ajouté la fonction d’ it inéraire sur
les menus de restaurants quand on a sélect ionné le restaurant
pour se rendre à celui -ci. J ’aimerai ajouter les menus des
restaurants sur la l iste des restaurants de la carte.
De plus, j ’ai gardé un regard constant sur l ’évolut ion des
marchés du mobile, celui -ci reste toujours en mouvement . Le
développement a été fait d’une tel le manière avec les webapps
qu’i l pourra être adapté rapidement sur d’autres systèmes
d’exploitat ion.
On peut imaginer par exemple que l ’association entre Nokia et
Microsoft conduise à un regain de parts de marché de l’OS
Windows Mobile. I l pourrait par conséquent devenir intéressant de
développer l ’application pour Windows Phone.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 44
III. CONCLUSION
L’université d’Auvergne a la volonté de toujours plus
impliquer les uti l isateurs de leur réseau social UdA Pro, notamment
ses étudiants. Dans cette optique , l ’ idée de mettre en place une
applicat ion mobile est née. En effet, l ’outi l mobile est une manière
de se mettre en avant au niveau technologique et donc, d’att irer
les étudiants sur la plateforme.
Dans ce cadre, la DSI de l’Université d’Auvergne a décidé de
proposer le projet et de lancer une campagne de développement
sur mobile pour UdA Pro avec des étudiants de l’ISIMA.
En premier l ieu, nous avions fait au cours du projet d’une
centaine d’heures l’analyse de l’ensemble du marché des
Smartphones et de son évolut ion, af in de nous diriger vers des
plateformes pertinentes qui sont largement util isées. Pour ce faire,
nous avions réalisé une veille technologique montrant l ’évolut ion
des parts de marché des Smartphones pour déterminer sous quel
OS et avec quel langage le développement devait être fait .
Ensuite, nous avions commencé la phase de développement sur
mobile. Nous sommes partis de zéro et avons acquis des
compétences tout au long de phase d’étude. En même temps, nous
avions rédigé deux tutoriels uti les pour démarrer le développement
d’une applicat ion mobile sur iPhone et sur Android , de manière à
transmettre aux développeurs notre savoir faire pour qu’i ls
puissent reprendre notre travail par la suite . Parallèlement à cette
étude nous avions déterminé les dif férentes fonctionnalités que
l ’applicat ion pouvait offrir.
Finalement, cette première partie en projet m ’a permis de me
lancer rapidement et de manière concrète dans le développement
de cette applicat ion.
Ce développement s’est montré très enrichissant
personnellement. En effet, ce sont des techniques encore très
récentes et fréquemment de nouvelles méthodes de réalisat ion
voient le jour. I l fallait donc s’informer et s’adapter en permanence.
En plus de l ’aspect technologique , la part de communication
avec les uti l isateurs n’était pas à négliger et a apporté à
l ’applicat ion ainsi qu’à moi beaucoup . Si on veu t que l ’applicat ion
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 45
convienne aux ut il isateurs, un maximum d’avis reste le mieux. De
nombreuses idées nous ont été transmises par les util isateurs,
même sur l ’ergonomie , bien souvent au cours de tests les avis
divergeaient. Ces avis permettaient de constru ire et d’avancer
correctement sans partir dans de mauvaises direct ions.
Cette application représente un lancement dans l’univers du
mobile, i l comprend donc les bases à suivre pour continuer à
développer l ’application.
Rapport de stage UdA Mobile 2010-2011 –Verdier Julien 46
SOURCES
Développer pour le Web mobile :-auteur- Firtman, Maximiliano –édition-
Paris : Pearson, 2011
Développer avec les API Google Maps : applications web, iPhone-iPad et
Android : –édition Paris : Dunod, impr. 2010
L'art du développement Android : -auteur- Murphy, Mark L –édition- Paris :
Pearson, impr. 2009
Développez des applications pour l'iPhone : avec HTML, CSS et
JavaScript : -auteur- Barney, Lee S –édition- Paris : Pearson, impr. 2009
http://www.ace-art.fr/wordpress/
http://www.alsacreations.com
http://developer.android.com/index.html
http://developer.apple.com/
http://developer.yahoo.com/performance/rules.html#gzip
http://docs.jquery.com/Main_Page
http://google-maps-api-version-3.touraineverte.com/
http://www.php.net/
http://reference.elgg.org/1.6/index.html
http://stackoverflow.com/
http://www.tutomobile.fr
http://www.w3schools.com/