Développements mobiles autour de l’application de réseau social UdAPro.fr et de … - UdA... ·...

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


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.


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


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


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


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

http://fr.wikipedia.org/wiki/Application_Web

http://fr.wikipedia.org/wiki/Page_Web_dynamique

http://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27exploitation

http://fr.wikipedia.org/wiki/Open_source

http://fr.wikipedia.org/wiki/Smartphone

http://fr.wikipedia.org/wiki/Noyau_Linux

http://fr.wikipedia.org/wiki/Logiciel

http://fr.wikipedia.org/wiki/Serveur_HTTP

http://fr.wikipedia.org/wiki/Langage_informatique

http://fr.wikipedia.org/wiki/Hypertext_markup_language

http://fr.wikipedia.org/wiki/Environnement_de_d%C3%A9veloppement_int%C3%A9gr%C3%A9

http://fr.wikipedia.org/wiki/Logiciel_libre


http://fr.wikipedia.org/wiki/R%C3%A9seau_social

http://fr.wikipedia.org/wiki/Format_de_donn%C3%A9es

http://fr.wikipedia.org/wiki/Pages_web

http://fr.wikipedia.org/wiki/Mac_OS_X

http://fr.wikipedia.org/wiki/Langage_de_programmation

http://fr.wikipedia.org/wiki/Informatique

http://fr.wikipedia.org/wiki/Orient%C3%A9_objet


http://fr.wikipedia.org/wiki/Langage_de_script

http://fr.wikipedia.org/wiki/Pages_web

http://fr.wikipedia.org/wiki/JavaScript


http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_And_XML

http://fr.wikipedia.org/wiki/HTML

http://fr.wikipedia.org/wiki/Format_de_donn%C3%A9es


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


http://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet

http://fr.wikipedia.org/wiki/Programme_informatique

http://fr.wikipedia.org/wiki/Appareil_informatique

http://fr.wikipedia.org/wiki/Langage_de_script


http://fr.wikipedia.org/wiki/Page_Web_dynamique

http://fr.wikipedia.org/wiki/Serveur_HTTP

http://fr.wikipedia.org/wiki/Application_Web

http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_base_de_donn%C3%A9es


http://fr.wikipedia.org/wiki/MySQL

http://fr.wikipedia.org/wiki/Entreprise

http://fr.wikipedia.org/wiki/BlackBerry


http://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27exploitation

http://fr.wikipedia.org/wiki/Cha%C3%AEne_de_caract%C3%A8res

http://fr.wikipedia.org/wiki/Ressource_(Web)

http://fr.wikipedia.org/wiki/Logiciel

http://fr.wikipedia.org/wiki/Navigateur_Web

http://fr.wikipedia.org/wiki/Mac_OS_X

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 :


- 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.


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é .


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.


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.


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é?


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 .


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

http://blog.idahoconsulting.com/wp-content/uploads/blog_idaho/2010/11/pdm-os-ventes.bmp

http://blog.idahoconsulting.com/wp-content/uploads/blog_idaho/2010/11/pdm-os-ventes.bmp


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.


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.


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 :


- 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.


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


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


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é.


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é


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 :


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);


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;

}


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-


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 .


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


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.


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.


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.


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


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 .


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.


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.


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)


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.


.

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 .


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.


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.


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


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>


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é.


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.


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


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 :


-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


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 à


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.


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


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.


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/

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/

Développements mobiles autour de l’application de réseau social UdAPro.fr et de … - UdA... ·...

Documents

Transcript of Développements mobiles autour de l’application de réseau social UdAPro.fr et de … - UdA... ·...