54
ISET Mahdia Adr : Av. Mourouj 5111 Hiboun Mahdia Tél : 73683407 / 73683410 Fax : 73683399 PROJET PRESENTEE POUR OBTENIR LE TITRE : DIPLÔME NATIONAL DE LICENCE APPLIQUEE En Technologies de l’Informatique (TI) Spécialité : Développement des Systèmes d’Information (DSI) Réalisé par : Mohamed Amine MAHMOUDI SOUTENU LE 14/06/2016 DEVANT LE JURY D’EXAMEN : Mme. Raoudha TRIMECH Président M. Khairallah KHOUJA Rapporteur Mme. Olfa BELAZEREG Examinateur M. Mohamed HAMMOUDA Encadreur-ISET M. Maher BELHADJ Encadreur-Entreprise A.U. : 2015-2016 Création dune application mobile pour le tourisme dans la région de Mahdia Institut Supérieur des Etudes Technologiques de Mahdia Département Technologie de l’Informatique République Tunisienne Ministère de l’Enseignement Supérieur de la Recherche Scientifique

Rapport Projet Fin d'Études PFE

Embed Size (px)

Citation preview

Page 1: Rapport Projet Fin d'Études PFE

----***----

ISET Mahdia Adr : Av. Mourouj 5111 Hiboun Mahdia Tél : 73683407 / 73683410 Fax : 73683399

PROJET

PRESENTEE POUR OBTENIR LE TITRE :

DIPLÔME NATIONAL DE LICENCE APPLIQUEE

En Technologies de l’Informatique (TI)

Spécialité : Développement des Systèmes d’Information (DSI)

Réalisé par : Mohamed Amine MAHMOUDI

SOUTENU LE 14/06/2016 DEVANT LE JURY D’EXAMEN :

Mme. Raoudha TRIMECH Président

M. Khairallah KHOUJA Rapporteur

Mme. Olfa BELAZEREG Examinateur

M. Mohamed HAMMOUDA Encadreur-ISET

M. Maher BELHADJ Encadreur-Entreprise

A.U. : 2015-2016

Création d’une application mobile pour le

tourisme dans la région de Mahdia

Institut Supérieur des Etudes

Technologiques de Mahdia

Département Technologie de l’Informatique

République Tunisienne

Ministère de l’Enseignement Supérieur de la

Recherche Scientifique

Page 2: Rapport Projet Fin d'Études PFE

Dédicaces

Je dédie ce projet à :

Mes chers parents, que nulle dédicace ne puisse exprimer

mes sincères sentiments,

Pour leurs patience illimitée, leur encouragement contenu,

leur aide, en témoignage de

Mon profond amour et respect pour leurs grands sacrifices.

Mes chers grands parents, pour me assistant.

Mes chers frères pour leur grand amour et leur soutien qu'ils

trouvent ici l'expression de ma haute gratitude.

Mes chers amis

Qui sans leur encouragement ce travail n'aura jamais vu le

jour.

Et à toute ma famille et à tous ceux que j'aime.

Mahmoudi Mohamed Amine

Page 3: Rapport Projet Fin d'Études PFE

Remerciements

Au terme de ce projet fin d’études je tien a exprimer mes respects mais

connaissances et mes sincère remerciement au personnels du E-Pirana, le

directeur de la société M. BELHADJ Maher, qui ont contribués à l’élaboration

de ce rapport modeste.

J’exprime mes profonds remerciements les plus sincères à M. HAMMOUDA

Mohamed, mon superviseur à l’institut, pour son assistance, ses directives et ses

conseils précieux.

Ainsi ceux qui mon aidées durant cette période pour effectuer mon projet dans

les meilleurs conditions, et je tiens également à remercier virement tous ceux qui

m’ont fait preuve d’un grand esprit de collaboration et d’initiative tous les

personnels de l’équipe technique et qui m’apportent une aide précieuse par leurs

suggestion et leurs conseils.

Que tous ceux qui ont contribué de près ou de loin à la réalisation de ce travail

trouvent ici l’expression de nos sincères gratitudes.

En résumé, j’adresse mes sincère sentiments de vivre reconnaissance à tous ceux

qui ont contribué du près ou de loin à fin que ce modeste projet voie le jour.

Page 4: Rapport Projet Fin d'Études PFE

Table des matières

Introduction générale ............................................................................................................... 1

Chapitre 1 : Analyses et Spécifications des Besoins .............................................................. 2

I. Introduction ....................................................................................................................... 3

II. Cadre du projet .................................................................................................................. 3

III. Présentation de la société .................................................................................................. 3

IV. Étude de l’existant ............................................................................................................ 3

1. Description de l’existant .......................................................................................... 3

2. Critique de l’existant ............................................................................................... 4

3. Solution proposée .................................................................................................... 5

V. Spécifications des besoins ................................................................................................ 5

1. Besoins fonctionnels ................................................................................................ 6

a. Besoin fonctionnels pour la partie mobile ..................................................... 6

b. Besoin fonctionnels pour la partie web .......................................................... 6

2. Besoins non fonctionnels ......................................................................................... 6

VI. Conclusion ........................................................................................................................ 7

Chapitre 2 : Conception ........................................................................................................... 8

I. Introduction ....................................................................................................................... 9

II. Langage de conception ..................................................................................................... 9

1. Langage UML ......................................................................................................... 9

2. Utilisation de l’UML ............................................................................................. 10

III. Diagramme de cas d’utilisation ...................................................................................... 10

1. Les Acteurs ............................................................................................................ 10

2. Diagramme de cas d’utilisation ............................................................................. 11

a. Diagramme de cas d’utilisation global pour l’application mobile ............... 12

b. Diagramme de cas d’utilisation global pour l’application web ................... 13

3. Raffinement de cas d’utilisation pour l’application mobile .................................. 14

Page 5: Rapport Projet Fin d'Études PFE

a. Cas d’utilisation raffiné « Visualiser les cafés » .......................................... 14

b. Cas d’utilisation raffiné « Visualiser les événements » ............................... 15

c. Cas d’utilisation raffiné « gérer parcours » .................................................. 16

IV. Diagramme de séquence ................................................................................................. 17

1. Diagramme de séquence « Synchronisation des données » .................................. 17

2. Diagramme de séquence « Authentification » pour la partie web......................... 18

3. Diagramme de séquence « gérer endroit » pour l’application mobile................... 19

4. Diagramme de séquence « gérer parcours » pour l’application mobile ................ 20

5. Diagramme de séquence « gérer événement » pour l’application mobile............. 21

V. Diagramme de classe ...................................................................................................... 21

1. Diagramme de classe global .................................................................................. 22

2. Modèle logique de données liée au diagramme de classe ..................................... 23

VI. Diagramme de composants ............................................................................................. 23

VII. Conclusion ...................................................................................................................... 24

Chapitre 3 : Réalisation ......................................................................................................... 25

I. Introduction ..................................................................................................................... 26

II. Environnement de travail ................................................................................................ 26

1. Environnement matériel ........................................................................................ 26

2. Environnement logiciel ......................................................................................... 27

3. Langage de programmation et technologies utilisés ............................................. 28

III. Plateforme Android ......................................................................................................... 30

1. Historique .............................................................................................................. 30

2. Architecture Android ............................................................................................. 30

a. Application ................................................................................................... 30

b. Le Framework (Application Framework) .................................................... 31

c. Les bibliothèques (Libraires) ....................................................................... 31

d. Moteur d’exécution Android (Android Runtime) ........................................ 31

Page 6: Rapport Projet Fin d'Études PFE

e. Noyau Linux (Linux Karnel) ....................................................................... 31

IV. Présentation des interfaces de l’application .................................................................... 31

1. Les interfaces de l’application web ....................................................................... 31

a. Interface d’authentification .......................................................................... 32

b. Interface d’accueil ........................................................................................ 32

c. Interfaces gérer endroit ................................................................................ 33

d. Interfaces gérer parcours .............................................................................. 34

e. Interfaces gérer évènement .......................................................................... 35

2. Les interfaces de l’application mobile .................................................................. 35

a. Icône de l’application ................................................................................... 35

b. Interfaces de chargement de l’application ................................................... 36

c. Interfaces Carte géographique ..................................................................... 37

d. Interfaces de gérer les endroits .................................................................... 38

e. Interfaces gérer les parcours ........................................................................ 39

f. Interfaces gérer les événements ................................................................... 40

3. Conclusion ............................................................................................................. 41

Conclusion générale ............................................................................................................... 42

Bibliographie ........................................................................................................................... 43

Netographie ............................................................................................................................. 44

Annexe ..................................................................................................................................... 45

Page 7: Rapport Projet Fin d'Études PFE

Liste des Figures

FIGURE 1 : LOGO DE LA SOCIETE ...................................................................................................................................... 3

FIGURE 2 : PRESENTATION DE LA SOLUTION PROPOSEE ......................................................................................................... 5

FIGURE 3 : DIAGRAMME DE CAS D’UTILISATION GLOBAL POUR L’APPLICATION MOBILE ............................................................. 12

FIGURE 4 : DIAGRAMME DE CAS D'UTILISATION GLOBAL POUR L’APPLICATION WEB ................................................................. 13

FIGURE 5 : DIAGRAMME D'UN CAS D'UTILISATION RAFFINEE « VISUALISER LES CAFES » ............................................................ 14

FIGURE 6 : DIAGRAMME CAS D'UTILISATION RAFFINEE « VISUALISER EVENEMENTS » ............................................................... 15

FIGURE 7 : DIAGRAMME CAS D'UTILISATION RAFFINEE « GERER PARCOURS » ......................................................................... 16

FIGURE 8 : DIAGRAMME DE SEQUENCE « SYNCHRONISATION DES DONNEES » ....................................................................... 17

FIGURE 9 : DIAGRAMME DE SEQUENCE « AUTHENTIFICATION » POUR L’APPLICATION WEB ....................................................... 18

FIGURE 10 : DIAGRAMME DE SEQUENCE « GERER ENDROIT » POUR L’APPLICATION MOBILE ...................................................... 19

FIGURE 11 : DIAGRAMME DE SEQUENCE « GERER PARCOURS » POUR L’APPLICATION MOBILE ................................................... 20

FIGURE 12 : DIAGRAMME DE SEQUENCE « GERER EVENEMENT » POUR L’APPLICATION MOBILE ................................................. 21

FIGURE 13 : DIGRAMME DE CLASSE GLOBAL .................................................................................................................... 22

FIGURE 14 : DIAGRAMME DE COMPOSANTS .................................................................................................................... 23

FIGURE 15 : ARCHITECTURE GENERALE ANDROID ............................................................................................................. 30

FIGURE 16 : INTERFACE D'AUTHENTIFICATION .................................................................................................................. 32

FIGURE 17 : INTERFACE D'ACCUEIL ................................................................................................................................ 32

FIGURE 18 : INTERFACE AJOUTER ENDROIT ...................................................................................................................... 33

FIGURE 19 : INTERFACE LISTER LES ENDROITS .................................................................................................................. 33

FIGURE 20 : INTERFACE AJOUTER PARCOURS ................................................................................................................... 34

FIGURE 21 : LISTER LES PARCOURS................................................................................................................................. 34

FIGURE 22 : INTERFACE AJOUTER EVENEMENT ................................................................................................................. 35

FIGURE 23 : INTERFACE LISTER DES EVENEMENTS ............................................................................................................. 35

FIGURE 24 : ICONE PRINCIPALE DE L'APPLICATION ............................................................................................................. 36

FIGURE 25 : INTERFACES DE CHARGEMENT DE L'APPLICATION ............................................................................................. 36

FIGURE 26 : INTERFACES DE LA CARTE GEOGRAPHIQUE ...................................................................................................... 37

FIGURE 27 : INTERFACES GERER LES ENDROITS ................................................................................................................. 38

FIGURE 28 : INTERFACES GERER LES PARCOURS ................................................................................................................ 39

FIGURE 29 : INTERFACES GERER LES EVENEMENTS............................................................................................................. 40

Page 8: Rapport Projet Fin d'Études PFE

Liste des Tableaux

TABLEAU 1 : DESCRIPTIONS LES ACTEURS ........................................................................................................................ 11

TABLEAU 2 : DETAILS DU DIAGRAMME DE CAS D’UTILISATION GLOBAL POUR L’APPLICATION MOBILE ........................................... 13

TABLEAU 3 : DETAILS DU DIAGRAMME DE CAS D’UTILISATION GLOBAL POUR L’APPLICATION WEB ............................................... 14

TABLEAU 4 : DETAILS DU RAFFINEMENT DE CAS D’UTILISATION « VISUALISER LES CAFES » ......................................................... 15

TABLEAU 5 : DETAILS DU RAFFINEMENT D’UN CAS D’UTILISATION « VISUALISER LES EVENEMENTS » ........................................... 16

TABLEAU 6 : DETAILS DE RAFFINEMENT D'UN CAS D'UTILISATION « GERER PARCOURS » ........................................................... 17

TABLEAU 7 : ENVIRONNEMENT MATERIEL 1..................................................................................................................... 26

TABLEAU 8 : ENVIRONNEMENT MATERIEL 2..................................................................................................................... 26

Page 9: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Introduction générale

1 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Introduction générale

Dans un monde actif et continuellement évolutif, la motivation d'avoir des moyens

performants et efficaces de communication et d'échange d'informations devient de plus en

plus fondamentale. Cette motivation donne naissance à une révolution favorisant le travail à

distance et l'accès aux besoins en temps réduit à l’aide d’internet qui a bouleversée les

habitudes de travail dans de nombreux métiers.

D’après beaucoup d’analyses et statistiques effectuées, il s’avère que de plus en plus

d’internautes se connectent désormais à internet via leurs téléphones portables. Nous

remarquons ces dernières années un développement exponentiel des appareils mobiles qui

sont répandus comme une traînée de poudre dans le monde en développement et

révolutionnant le domaine des communications notamment dans les zones rurales.

C’est dans ce cadre qu’entre le sujet de notre PFE. Il s’agit en fait, de concevoir et de

développer une solution informatique assurant l’exposition des informations des monuments

et des endroits les plus connus de la ville de Mahdia sur un rayon de 100 km.

Pour une meilleure accessibilité à ces informations, nous avons décidé de développer une

application mobile capable de gérer et d’exposer toutes ses informations et de les synchroniser

à travers la communication avec une application web dédiée.

En effet, les applications mobiles ne cessent d’enregistrer une croissance de plus en plus

importante, qui sont facilitent la vie des internautes. Par conséquent, il doit y avoir une

montée rapide en compétences afin de s’adapter aux nouveaux besoins, et développer des

solutions intégrantes plusieurs composantes mobiles, pour des applications mobile sur divers

plateforme comme : IOS, Windows Phone, Bada, Android etc.

Ce rapport détaillera les différentes phases dont nous sommes passées par afin d’aboutir à une

application fiable et satisfaisante. Pour cela le rapport définit le travail qui nous avons

effectué, il est composée par trois grands chapitre. Le premier chapitre aura pour présente

l’entreprise et l’analyse et spécification des besoins, le deuxième chapitre est consacré aux

conceptions. Le dernier chapitre comporte les détails de réalisation de notre application.

Page 10: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

2 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 1 : Analyses et Spécifications

des Besoins

Page 11: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

3 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 1 : Analyses et Spécifications des Besoins

I. Introduction

Dans ce chapitre, nous allons présenter en premier lieu la société dans laquelle nous avons

effectué notre stage de fin d’étude. Ensuite, nous allons faire une étude de l’existant sur les

modalités des travaux actuelles. Enfin nous allons spécifier l'ensemble des besoins

fonctionnels et non fonctionnels liés à notre application.

II. Cadre du projet

Le projet entre dans le cadre de préparation de stage de fin d'études pour l'obtention de la

licence appliquée en Développement des Systèmes d’Information (DSI) de l'Institut Supérieur

d’Études Technologiques de Mahdia. Ce projet a été effectué au sein de la société e-Pirana

durant la période du 4 mois.

III. Présentation de la société

e-Pirana est une startup situe à Mahdia, spécialisée dans le développement web pour les

différents médias (desktops, tablettes et smartphones) ainsi qu’à la conception et la réalisation

des applications mobile. Elle propose aussi des services d’audits, de conseils et de

référencements à ses clients.

Figure 1 : Logo de la société

IV. Étude de l’existant

1. Description de l’existant

L’application que nous voulons développer est dédiée aux utilisateurs ayant visité le

gouvernement de Mahdia ou bien qui souhaite la visiter dans la future.

Page 12: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

4 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Le tourisme mobile propose aux utilisateurs de téléphone portable de se situer sur une carte

dans la ville où ils se trouvent. Le service comprend non seulement la géo localisation en

temps réel, mais également, des informations sur la ville et ses centres d’intérêts (musées,

parcs, monuments, événements culturels ou artistiques du moment, etc…) : un vrai guide

touristique. L’originalité est qu’il permet à l’utilisateur de personnaliser son guide selon sa

localisation.

Conscients que nous vivons actuellement le passage d’E-tourisme au M-tourisme, nous avons

décidé de saisir cette opportunité en lançant une application mobile touristique. Notre

particularité est que notre application porte dans son spectre le tourisme durable et solidaire.

Nous avons opté pour ce choix parce que nous avons l’intime conviction que le tourisme de

masse n’a plus sa place privilégiée en Tunisie et que l’avenir du secteur touristique est dans le

tourisme alternatif.

2. Critique de l’existant

Selon une étude réalisé par d’Orange, « aujourd'hui, plus d'un tiers de la population mondiale

surfe sur Internet depuis son téléphone mobile. En un an, leurs ventes ont progressé de 74%.

Plus d'un quart de la population mondiale est équipée et on estime que les smartphones

couvriront la totalité du parc de la téléphonie mobile d'ici 2020. Le mobile est en passe de

devenir le principal canal de avant, pendant et après le voyage. Smartphones et tablettes, les

nouveaux outils du voyageur pour s'informer, le voyageur utilise de moins en moins

l'ordinateur mais de plus en plus son mobile (+ 31 % par rapport à 2011) et aussi sa tablette

(+17 % par rapport à 2011). 44 % des voyageurs en 2012 ont téléchargé une application

mobile en lien avec leur voyage. La clientèle de loisirs réserve davantage sur un site mobile:

dans 40 % des cas pour un hébergement, dans 38 % des cas pour le vol et dans 33 % des cas

pour la location de voiture. L'usage de la vidéo : 66 % consultent des vidéos pour avoir des

idées de voyage et 64 % consultent les vidéos d'une destination avant le voyage. Les touristes

européens qui partent en vacances l'été passent quotidiennement 2 heures et 25minutes à

visiter et faire des activités culturelles sur leur Smartphone ou tablette. »

Ces données, confortent notre conviction que les applications mobiles représentent une

nouvelle alternative très attrayante qui permet à la fois de promouvoir la destination Tunisie

en général et le tourisme culturel en particulier.

Page 13: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

5 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

3. Solution proposée

Le marché des applications a littéralement explosé à la faveur du succès fulgurant des

Smartphones. L’entreprise nous à demander de réaliser une application m-tourisme pour

valoriser le tourisme de la ville de Mahdia. Cette application aide à trouver la liste des hôtels,

affiche les centres d’intérêts touristiques et informe les utilisateurs des évènements culturels.

Notre solution vise à s’imposer en offrant une bonne qualité de services, une fluidité dans la

navigation et une bonne performance en temps de réponse.

Notre solution consiste à développer un système informatique composée de :

Application mobile permettent à des revenant ou bien des touristes potentiel d’accéder

à un ensemble des données relatif aux diffèrent endroits la visite de Mahdia.

Application web concernent la gestion centralisée de toutes les données du système à

développer.

Figure 2 : présentation de la solution proposée

V. Spécifications des besoins

La spécification de besoins constitue la phase de départ de toute application à développer.

Dans cette partie nous allons identifier les besoins de notre application. Nous allons mette

Page 14: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

6 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

l’accent sur les besoins fonctionnels ainsi que les besoins non fonctionnels pour éviter le

développement d’une application non satisfaisante.

1. Besoins fonctionnels

Un acteur joue le rôle d’une entité externe (utilisateur humain, dispositif matériel ou autre

système) qui interagit directement avec le système étudié. L’acteur représenté dans notre

application peut être soit un administrateur, soit un visiteur.

a. Besoin fonctionnels pour la partie mobile

Présenter les informations sur les endroits de ville Mahdia

Spécifier les localisations qu’on veut priser en compte

Savoir la localisation des lieux les plus proches

Consulter la liste des endroits favoris

Poser des nouveaux circuits du tourisme alternatif

Consacrer un espace pour la publicité

Tracer des chemins selon l’emplacement et les besoins du touriste

b. Besoin fonctionnels pour la partie web

Gérer les endroits (ajouter, supprimer, modifier, Lister).

Gérer les parcours (ajouter, supprimer, modifier, Lister).

Gérer les événements (ajouter, supprimer, modifier, Lister).

2. Besoins non fonctionnels

Les besoins non fonctionnels décrivent les objectifs liés aux performances du système et aux

contraintes de son environnement. Ses exigences techniques sont souvent exprimées sous

forme d’objectifs spécifiques que doit atteindre le système.

Les besoins non fonctionnels de cette application sont les suivants :

Assurer une cohérence et une crédibilité aux informations stockées dans la base de

données.

L’ergonomie des interfaces de l’application mobile et web.

Sécurité : à développer d’avantage

Page 15: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 1 : Analyses et Spécifications des Besoins

7 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Qualité

Accessibilité et performance

Renouvellement

Fiabilité

VI. Conclusion

À travers ce chapitre, nous avons présenté l’entreprise et le cadre du projet. En outre nous

avons analysé et étudié les différentes applications de tourisme afin d’enrichir nos

fonctionnalités et augmenter la performance de l’application pour répondre à nos besoins.

Ainsi, nous nous sommes positionnés dans le contexte de notre projet, ceci va nous permettre

d’entamer la prochaine étape qui consiste à présenter la phase de conception.

Page 16: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

8 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 2 : Conception

Page 17: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

9 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 2 : conception

I. Introduction

Le Modèle conceptuel de données est une représentation statique du système d’information. Il

a comme objectif de constituer une représentation claire et cohérente des données manipulées

dans le système d’information.

Cette section sera présentée comme suit : nous commençons par le choix de la méthodologie

de conception et justification. Ensuite nous identifions les acteurs et les diagrammes des cas

d’utilisation, puis nous présentons les diagrammes de séquence, enfin le diagramme de classe.

II. Langage de conception

Pour élaborer cet application on doit établir une conception modeste pour attentera le but de

notre projet pour cela on doit choisira un langage de conception adaptable avec notre besoins.

1. Langage UML

« UML » (en anglais Unified Modeling Language ou langage de modélisation unifié) est un

langage de modélisation graphique à base de pictogrammes. Il est apparu dans le monde du

génie logiciel, dans le cadre de la « conception orientée objet ».

Couramment utilisé dans les projets logiciels, il peut être appliqué à toutes sortes de systèmes

ne se limitant pas au domaine informatique.

Les 14 diagrammes UML sont dépendants hiérarchiquement et se complètent, de façon à

permettre la modélisation d'un projet tout au long de son cycle de vie. Ces diagrammes sont :

Diagrammes structurels ou statiques:

o Diagramme de classes

o Diagramme d'objets

o Diagramme de composants

o Diagramme de déploiement

o Diagramme des paquetages

Page 18: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

10 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

o Diagramme de structure composite

o Diagramme de profils

Diagrammes comportementaux :

o Diagramme des cas d'utilisation

o Diagramme états-transitions

o Diagramme d'activité

Diagrammes d'interaction ou dynamiques :

o Diagramme de séquence

o Diagramme de communication

o Diagramme global d'interaction

o Diagramme de temps

2. Utilisation de l’UML

L’UML est un langage formel et normalisé en termes de modélisation objet. Son

indépendance par rapport aux langages de programmation, son caractère polyvalent et sa

souplesse ont fait de lui un langage universel. En plus UML est essentiellement un support de

communication, qui facilite la représentation et la compréhension de solution objet. Sa

notation graphique permet d’exprimer visuellement une solution objet, ce qui facilite la

comparaison et l’évaluation des solutions. L’aspect de sa notation, limite l’ambigüité et les

incompréhensions.

III. Diagramme de cas d’utilisation

1. Les Acteurs

Un acteur représente l'abstraction d'un rôle joué par des entités externes (utilisateur, dispositif

matériel ou autre système) qui interagissent directement avec le système (réception

d’information, etc.). Pour notre application, il y aura qu'un seul acteur. Nous allons nommer

cet acteur tout simplement : « Utilisateur ».

Page 19: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

11 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Acteur Type Acteur Descriptions

Utilisateur

Acteur

Principale

Découvrir les endroits

Suivi les parcours

Participer aux événements

Consulte la carte géographie

Administrateur Gérer les endroits

Gérer les parcours

Gérer les événements

Système

Acteur

Secondaire

Garde les actions de l’utilisateur

Calcule la distance

Import les données

Lance les mises à jour

Envoyer les notifications

Serveur Google Map Définir la position de l’utilisateur

Traçage du l’itinéraire

Définir la position de l’endroit,

événement

Rechercher sur les endroits

Serveur Web Téléchargement les images

Sauvegarde les données

Gérer les mises à jour

Tableau 1 : Descriptions les acteurs

2. Diagramme de cas d’utilisation

Chaque usage que les acteurs font du système est représenté par un cas d’utilisation. Chaque

cas d’utilisation représente une fonctionnalité qui leur est offerte afin de produire le résultat

attendu. Ainsi, le diagramme de cas d’utilisation décrit l’interaction entre le système et

l’acteur en déterminant les besoins de l’utilisateur et tout ce que doit faire le système pour

l’acteur.

Dans ce sens nous avons fait deux applications, d’une part une application web pour la

gestion des données et d’autre parte une application mobile.

Page 20: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

12 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

a. Diagramme de cas d’utilisation global pour l’application mobile

Figure 3 : Diagramme de cas d’utilisation global pour l’application mobile

N.B : Dans l’application mobile l’utilisation de l’authentification n’est pas utilisée dans notre

cas. Les utilisateurs sont passé en tant que anonyme.

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>> <<extend>>

<<include>>

<<extend>>

Utilisateur

<<Acteur>>:Serveur web

gérer endroit

Description Endroit Visualiser dans la carte

Contacter les responsables

gérer note

Synchroniser les données

Visualiser Carte

gérer Parcoursdetaille parcours

Tracer itinéraire

gérer événement

Participer au événement

gérer les notifications

<<Acteur>>:Serveur Google Map

Lister Favoris

Ajouter favoris

Page 21: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

13 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Titre : Diagramme de cas d’utilisation globale

Acteurs : Utilisateurs, Système

Raffinement du

Diagramme :

Aucun

Pré conditions : Connexion à l’internet requise

Description : L’utilisateur peut utiliser l’application pour accéder aux

différentes informations de la ville de Mahdia

Le système qui tourne en arrière-plan va import les

données, lance les notifications et se déclenche en cas

spécifiques

Cas dérivé : Si la connexion internet échoue ou n’existe pas un

message sera affiche

Post Conditions : Interfaces affichées

Tableau 2 : Détails du diagramme de cas d’utilisation global pour l’application mobile

b. Diagramme de cas d’utilisation global pour l’application web

Figure 4 : Diagramme de cas d'utilisation global pour l’application web

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<include>>

<<include>>

<<include>>

Administrateur

Gérer endroit

Gérer parcours

Gérer événement

Ajouter Endroit

Modifier Endroit

Supprimer Endroit

Lister Endroit

Ajouter Parcours

Supprimer Parcours

Modifier Parcours

Lister Parcours

Ajouter événement

Modifier événement

Supprimer événement

Lister événement

Authentification

Page 22: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

14 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Titre : Diagramme de cas d’utilisation globale

Acteurs : Administrateur, Système

Raffinement du

Diagramme :

Aucun

Pré conditions : Connexion à l’internet requise

L’authentification requise

Description : L’administrateur gère les endroits

L’administrateur gère les parcours

L’administrateur gère les événements

Cas dérivé : Si la l’authentification échoue un message sera affiche

Post Conditions : Interfaces affichées

Tableau 3 : Détails du diagramme de cas d’utilisation global pour l’application web

3. Raffinement de cas d’utilisation pour l’application mobile

a. Cas d’utilisation raffiné « Visualiser les cafés »

Figure 5 : Diagramme d'un cas d'utilisation raffinée « Visualiser les cafés »

Page 23: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

15 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Titre : Visualiser les cafés

Acteurs : Utilisateur, Serveur web, SGBD

Pré conditions : Choisir la liste des cafés.

Description L’utilisateur peut visualiser les cafés et voir son description

Voir les cafés en carte « Map »

Consulter le numéro téléphonique de chaque café

Affichage l’image de couvre a partir d’un serveur web

L’écoute de la description de voix du système

L’utilisateur donne son note du café

Cas dérivé : Impossible de charge l’image en l’absence de la connexion internet.

Impossible de voir la position du café en carte en l’absence de la

connexion internet.

Post conditions : Interfaces affiche.

Tableau 4 : Détails du raffinement de cas d’utilisation « Visualiser les cafés »

b. Cas d’utilisation raffiné « Visualiser les événements »

Figure 6 : Diagramme cas d'utilisation raffinée « visualiser événements »

Page 24: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

16 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Titre : Visualiser les événements

Acteurs : Utilisateur, SGBD

Pré conditions : Choisir un événement

Description : L’utilisateur peut voir la description sur l’événement.

L’utilisateur peut participer à l’événement.

L’utilisateur peut voir l’emplacement de l’événement sur la carte

« Map »

L’utilisateur donnera son avis ce que concerne de l’événement.

L’enregistrement des données dans un base des données a partir

d’une SGBD

Cas dérivé : Besoins d’une connexion internet pour l’affichage sur la carte

Post conditions Interfaces affiches

Tableau 5 : Détails du raffinement d’un cas d’utilisation « Visualiser les événements »

c. Cas d’utilisation raffiné « gérer parcours »

Figure 7 : Diagramme cas d'utilisation raffinée « gérer parcours »

Page 25: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

17 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Titre : Gérer parcours

Acteurs : Utilisateur, Google Map Api, Serveur Web

Pré conditions : Choisir un parcours

Description : L’utilisateur va voir la description sur le parcours.

L’utilisateur peut voir l’itinéraire de le parcours sur la carte « Map »

L’utilisateur donnera son avis ce que concerne de le parcours.

Cas dérivé : Besoins d’une connexion internet pour l’affichage sur l’itniéraire

Post conditions Interfaces affiches

Tableau 6 : Détails de raffinement d'un cas d'utilisation « gérer parcours »

IV. Diagramme de séquence

Le diagramme de séquence représente la succession chronologique des opérations réalisées

par un acteur. Il indique les objets que l’acteur va manipuler et les opérations qui font passer

d’un objet à l’autre.

1. Diagramme de séquence « Synchronisation des données »

Ce diagramme représente l’intersection entre deux application mobile et web pour réfléchira

les données.

Figure 8 : Diagramme de séquence « Synchronisation des données »

Page 26: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

18 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Pour assurer que l’application est à jour il doit être faire des synchronisations des

données avec l’application web dans certains temps prédéfini.

2. Diagramme de séquence « Authentification » pour la partie web

Figure 9 : Diagramme de séquence « Authentification » pour l’application web

Ce diagramme décrit le cas de l’authentification dans l’application web, l’utilisateur

doit indiquer son login et mot de passe. Une fois vérifiée le système charge l’interface

d’accueil si non un message d’erreur survenue sera affiché.

Page 27: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

19 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

3. Diagramme de séquence « gérer endroit » pour l’application mobile

Figure 10 : diagramme de séquence « gérer endroit » pour l’application mobile

Gérer endroit

Afficher l iste des endroitsRésultat

Traitement

requêteLister endroit

Exporter l 'image

l'importation de l 'image

Affichier détailsRetourner résultat

Traitement

requêteSelectionner endroit

Lancement description vocale

Retourne RésultatTraitement

Extraction descriptionDemande de la description

Affichage Map

Retourne les donnéesTraitement

Demande des CoordonnéesDemande d'affichage Map

établir l 'appelle

Demande d'appelle

Extraction le numéro

Afficher le résultat

Retourne le résultatTraitement du requête

requêteDemande d'ajout aux favoris

:Système :Base Des Données :Serveur Web

Util isateur

[Ajouter aux favoris]opt

[Contacter]opt

[Visualiser Map]opt

[Description Vocale]opt

par

[choisir endroit]opt

Afficher l iste des endroitsRésultat

Traitement

requêteLister endroit

Exporter l 'image

l'importation de l 'image

Affichier détailsRetourner résultat

Traitement

requêteSelectionner endroit

Lancement description vocale

Retourne RésultatTraitement

Extraction descriptionDemande de la description

Affichage Map

Retourne les donnéesTraitement

Demande des CoordonnéesDemande d'affichage Map

établir l 'appelle

Demande d'appelle

Extraction le numéro

Afficher le résultat

Retourne le résultatTraitement du requête

requêteDemande d'ajout aux favoris

Page 28: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

20 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Ce diagramme décrit la gestion des endroits dans partie mobile pour laquelle

l’utilisateur doit choisir endroit puis le système afficher les détails sur l’endroit

sélectionné par suite à partir des options ajouter aux favoris, contacter les

propriétaires, visualiser en carte « MAP » et une description vocale.

4. Diagramme de séquence « gérer parcours » pour l’application mobile

Figure 11 : Diagramme de séquence « gérer parcours » pour l’application mobile

Ce diagramme décrit la gestion des parcours, lorsque l’utilisateur choisira de lister les

parcours il y a deux taches effectués simultanément c’est l’extraction les données à

partir une base des données local « Sqlite » et la deuxième c’est l’importation de

l’image de serveur web pour l’afficher dans avec les détails sur le parcours.

Gérer Parcours

Afficher liste parcours

RésultatTraitement

requêteLister Parcours

Afficher Map

Traitement

Selectionner Map

Export image

Importer image

Afficher détails

Retourner les parcoursExtraction parcours

requêteSelectionner parcours

Util i l isateur

:Système :Base des données :Serveur web

par

[Visualiser Map]opt

[Choisir parcours]opt

Afficher liste parcours

RésultatTraitement

requêteLister Parcours

Afficher Map

Traitement

Selectionner Map

Export image

Importer image

Afficher détails

Retourner les parcoursExtraction parcours

requêteSelectionner parcours

Page 29: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

21 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

5. Diagramme de séquence « gérer événement » pour l’application mobile

Figure 12 : Diagramme de séquence « gérer événement » pour l’application mobile

Ce diagramme représente la gestion des événements, lorsque l’utilisateur choisi la liste

des événements, le système va communique avec la base des données pour afficher la

liste. Au même temps en arrière-plan le système exporter les images depuis un serveur

web simultanément. Avant ça l’utilisateur peut choisi deux options Visualiser Map et

la participation aux événements.

V. Diagramme de classe

Le diagramme de classe représente les classes intervenant dans le système. Le diagramme de

classe est une représentation statique des éléments qui composent un système et de leurs

relations.

Gérer év ènement

requête

importer image

Afficher l iste des événemebts

Retourner les événementsTraitement

requêteLister événements

Afficher le résultat

Résultat

sauvgarde les données

envoye les donnéesdemande de participation

Afficher Map Traitement

Selectionner Map

export l 'imageTemps de repense

Afficher les détails

Retourner les événementsExtraction les événements

Selectionner événement

Utilisateur

:Systéme requête :Serveur Web

par

[Visualiser Map]opt

[Participer]opt

[Choisir événement]opt

requête

importer image

Afficher l iste des événemebts

Retourner les événementsTraitement

requêteLister événements

Afficher le résultat

Résultat

sauvgarde les données

envoye les donnéesdemande de participation

Afficher Map Traitement

Selectionner Map

export l 'imageTemps de repense

Afficher les détails

Retourner les événementsExtraction les événements

Selectionner événement

Page 30: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

22 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

1. Diagramme de classe global

Le diagramme suivant présent le diagramme de classe de l’application mobile.

Figure 13 : Digramme de classe global

Page 31: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

23 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

2. Modèle logique de données liée au diagramme de classe

Endroit (IdEndroit, Nom, description, Latitude, Longitude, numéro, statut, type)

Parcours (IdParcours, Nom, description, duree, distance)

Evenement (IdEvenement, Nom, description, date_deb, date_fin, #IdEndroit, contact)

Order (#IdEndroit, #IdParcours, rang)

Favoris (#IdEndroit, date_aj)

Participe_evenement (#idEvenement, date_participation)

VI. Diagramme de composants

Le diagramme de composants décrit l'organisation du système du point de vue des éléments

logiciels comme les modules (paquetages, fichiers sources, bibliothèques, exécutables), des

données (fichiers, bases de données) ou encore d'éléments de configuration (paramètres,

scripts, fichiers de commandes). Ce diagramme permet de mettre en évidence les dépendances

entre les composants (qui utilisent quoi).

Les diagrammes de composants et les diagrammes de déploiement sont les deux derniers

types de vues statiques en UML. Les premiers décrivent le système modélisé sous forme de

composants réutilisables et mettent en évidence leurs relations de dépendance. Les seconds se

rapprochent encore plus de la réalité physique, puisqu'ils identifient les éléments matériels

(PC, Modem, Station de travail, Serveur, etc.), leur disposition physique (connexions) et la

disposition des exécutables (représentés par des composants) sur ces éléments matériels.

Figure 14 : Diagramme de composants

Page 32: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 2 : Conception

24 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

VII. Conclusion

Ce chapitre a été consacré à différentes étapes de la conception détaillée. Du raffinement du

diagramme de cas d’utilisation, vers du diagramme de séquence de plusieurs cas d’utilisations

pour montrer les interactions entre les acteurs et le système. Finalement nous avons terminé

avec le diagramme de classe avec lequel nous avons pour présenter la structure de notre

application.

Le prochain chapitre contiendra des explications et des clarifications de plusieurs concepts en

rapport avec le contexte de notre travail.

Page 33: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

25 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 3 : Réalisation

Page 34: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

26 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Chapitre 3 : Réalisation

I. Introduction

En détaillent ce chapitre, nous sommes déjà passé par les étapes nécessaires à fin d’entrainer

la phase de la réalisation. Le problème a été profondément analysé, nous avons défini une

conception complète à notre jugement. Une conception qui comporte et décrit tous les besoins

de l’application.

Dans ce chapitre nous commencerons par la description de l’environnement de

développement (matériel et logiciel) ainsi que les différents outils utilisées. Ensuite, nous

présenterons les différents aspects de fonctionnement de notre application.

II. Environnement de travail

Dans ce paragraphe, nous allons présenter l’environnement matériel et logiciel de

développement de l’application que nous avons utilisée.

1. Environnement matériel

Pour développer l’application, nous avons utilisé comme environnement matériel un

ordinateur portable et un téléphone portable qui possèdent les caractéristiques suivant :

Marque ACER

Processeur Intel Core i7 2.4GHz

Mémoire 8 GO

Disque Dur 1 TO

Système d’exploitation Windows 10 Professionnel

Tableau 7 : Environnement matériel 1

Marque Evertek EverVivid Q47

Processeur Quad core 1.3 GHz

Mémoire 1 GO

Disque dur 8 GO

Système d’exploitation Android 4.4

Tableau 8 : Environnement matériel 2

Page 35: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

27 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

2. Environnement logiciel

Android studio

Android studio est un est un environnement de développement pour développer des

applications Android. Il est basé sur IntelliJ IDEA, mis gratuitement à la disposition des

développeurs Android accompagné de sa documentation complète. Il est créé par Google pour

remplacer l’ancien IDE eclipse.

Notepad ++

Notepad ++ est un éditeur de texte générique codé en C++. Ce logiciel, basé sur la

composante Scintilla, a pour but de fournir un éditeur léger (aussi bien au niveau de la taille

du code compilé que des ressources occupées durant l’exécution) et efficace. Il est également

une alternative au bloc-notes de Windows (d’où le nom). Le projet est sous licence GPL.

FileZilla

FileZilla est un client FTP, FTPS et SFTP, développé sous la licence publique générale

GNU.

Sqlite Browser

Sqlite Browser est un logiciel gratuit, domaine public, outil visuel open source utilisé

pour créer, concevoir et éditer des fichiers de base des données compatible avec Sqlite.

Power Designer

Power Designer est un logiciel de conception créé par la société Sybase, qui permet de

modéliser les traitements informatique en utilisent les diagrammes UML.

Page 36: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

28 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

WampServer

WampServer est une plateforme de développement Web de type WAMP, permettant

de faire fonctionner localement (sans se connecter à un serveur externe) des scripts PHP.

Iconion

Iconion vous permet de convertir n'importe quelle police d'icône en une superbe icône

au format png en y ajoutant couleur, ombre, arrière-plan, gradient, traits, et plusieurs autres

éléments fantaisistes.

3. Langage de programmation et technologies utilisés

JAVA

Le langage Java est un langage de programmation informatique orienté objet créé

par James Gosling et Patrick Naughton, employés de Sun Microsystems.

XML

L'Extensible Markup Language (XML, « langage de balisage extensible » en français)

est un métalangage informatique de balisage générique qui dérive du SGML.

PHP

PHP: Hypertext Preprocessor, plus connu sous son sigle PHP (acronyme récursif), est

un langage de programmation libre, principalement utilisé pour produire des pages Web

dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n'importe

quel langage interprété de façon locale. PHP est un langage impératif orienté objet.

SQL

Page 37: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

29 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

SQL (sigle de Structured Query Language, en français langage de requête structurée)

est un langage informatique normalisé servant à exploiter des bases de données relationnelles.

La partie langage de manipulation des données de SQL permet de rechercher, d'ajouter, de

modifier ou de supprimer des données dans les bases de données relationnelles.

HTML5

L’HyperText Markup Language, généralement abrégé HTML, est le format de

données conçu pour représenter les pages web. C’est un langage de balisage permettant

d’écrire de l’hypertexte, d’où son nom.

JavaScript & JQuery

JavaScript est un langage de programmation de scripts principalement employé dans

les pages web interactives mais aussi pour les serveurs.

JQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter

l'écriture de scripts côté client dans le code HTML des pages web. La première version est

lancée en janvier 2006 par John Resig.

JSON

JSON ou JavaScript Object Notation, est un format de données textuelles dérivé de la

notation des objets du langage JavaScript.

Bootstrap

Bootstrap est une collection d'outils utile à la création de sites et d'applications web.

C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de

navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option..

Page 38: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

30 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

III. Plateforme Android

1. Historique

Android doit son nom à la startup éponyme spécialisée dans le développement d'applications

mobiles rachetée par Google en août 2005, nom venant lui-même d'« androïde » qui désigne

un robot construit à l'image d'un être humain.

2. Architecture Android

Android est basé sur un noyau linux 2.6, au-dessus l’architecture générale :

Figure 15 : Architecture générale Android

a. Application

Android est fourni avec un ensemble de programmes de base (également nommés

applications natives) permettant d'accéder à des fonctionnalités comme les courriels, les SMS,

le téléphone, le calendrier, les photos, les cartes géographiques, le Web, pour ne citer que

quelques exemples. Ces applications sont développées à l'aide du langage de programmation

Java. Pour l'utilisateur final, c'est la seule couche accessible et visible.

Page 39: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

31 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

b. Le Framework (Application Framework)

En fournissant une plateforme de développement ouverte, Android offre aux développeurs la

possibilité de créer des applications extrêmement riches et innovants. Les développeurs sont

libres de profiter du matériel périphérique, les informations de localisation d'accès, exécutez

les services d'arrière-plan, définir des alarmes, ajouter des notifications de la barre d'état, et

beaucoup, beaucoup plus.

c. Les bibliothèques (Libraires)

En interne, Android inclut un ensemble de bibliothèques C et C++ utilisées par de nombreux

composants de la plateforme Android. Ces bibliothèques sont en réalité accessibles au

développeur par l'intermédiaire du Framework Android. En effet, le Framework Android

effectue, de façon interne, des appels à des fonctions C/C++ beaucoup plus rapides à exécuter

que des méthodes Java standard.

d. Moteur d’exécution Android (Android Runtime)

Android inclut un ensemble de bibliothèques qui fournit la plupart des fonctionnalités

disponibles dans les bibliothèques de base du langage de programmation Java.

e. Noyau Linux (Linux Karnel)

Android repose sur un noyau Linux (version 2.6) qui gère les services du système, comme la

sécurité, la gestion de la mémoire et des processus, la pile réseau et les pilotes. Il agit

également comme une couche d'abstraction entre le matériel et la pile logicielle.

IV. Présentation des interfaces de l’application

Cette section comporte des captures d’écran de quelques interfaces de l’application réalisée

accompagnée par une brève description.

1. Les interfaces de l’application web

Cette application permet à l’administrateur de gérer les endroits, les parcours, les évènements

(insertion, modification, suppression et l’affichage). Pour cela nous hébergons cette

application dans le web sous le nom de domaine stage.lelkol.net

Page 40: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

32 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

a. Interface d’authentification

Figure 16 : Interface d'authentification

L’accès à l’application web est protégé par un système d’authentification.

L’administrateur doit saisir son login et mot de passe de passe à fin d’y accéder.

b. Interface d’accueil

Figure 17 : Interface d'accueil

Dans cette interface l’administrateur peur d’accéder aux plusieurs fonctionnalités de

l’application

1 : Lien vers la page d’accueil

2 : gérer les endroits

3 : gérer les parcours

4 : gérer les événements

5 : gérer les notifications

Page 41: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

33 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

6 : fermeture la session de l’administrateur et retour vers la page

d’authentification

7 : message de ressuie à la connexion

c. Interfaces gérer endroit

Figure 18 : Interface ajouter endroit

Cette interface représente l’étape de l’ajoute des endroits par l’administrateur qui

contient nom, description, long, lat, numéro statues, type, et image de type png

Figure 19 : Interface Lister les endroits

Page 42: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

34 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

L’interface représente la liste des endroits qui contient l’image, description, latitude,

longitude, statuts et les actions (modification et suppressions). Ainsi deux actions de

modification et suppression.

d. Interfaces gérer parcours

Figure 20 : Interface ajouter parcours

Depuis cette interface l’administrateur peut ajouter des nouveaux parcours et les

endroits qui sont formulent le parcours.

Figure 21 : Lister les parcours

Dans cette interface en trouvent les détails les parcours. Ainsi deux bouton

modification et suppression.

Page 43: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

35 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

e. Interfaces gérer évènement

Figure 22 : Interface ajouter événement

Comme les autres interfaces en peut ajouter les événements.

Figure 23 : Interface Lister des événements

Dans l’interface on représente la liste des événements.

2. Les interfaces de l’application mobile

a. Icône de l’application

Page 44: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

36 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Figure 24 : Icone principale de l'application

La figure représente les différents types des icônes de l’application (hdpi, mdpi, xhdpi,

xxhdpi, xxxhdpi).

b. Interfaces de chargement de l’application

Figure 25 : Interfaces de chargement de l'application

Cette interface représente le chargement des données de la base des données local

« Sqlite » dans l’application. Ainsi les informations supplémentaires.

Page 45: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

37 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

c. Interfaces Carte géographique

Figure 26 : Interfaces de la carte géographique

Depuis cette interface en peut gérer la carte de l’api Google Map, les fonctionnalités

sont :

o Localisation géographique de l’utilisateur sur la carte

o Changement le type de carte (Normale, Hybrid, Satellite, terrain).

o Recherche les endroits

o Et un bouton de retour vers la page d’accueil.

Page 46: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

38 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

d. Interfaces de gérer les endroits

Figure 27 : Interfaces gérer les endroits

Dans cette interface, l’utilisateur permet de gérer les endroits et profitez de ces

fonctionnalités suivante :

o Consulte la liste des endroits par son catégorie (Restaurant, cafés, etc.).

o Consulter les détails pour chaque endroit (image, description, etc.).

o Afficher ma position les endroits la plus proche de ma position.

o Gérer favoris c’est-à-dire que en peut ajouter, supprime et consulte les endroits

Page 47: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

39 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

e. Interfaces gérer les parcours

Figure 28 : Interfaces gérer les parcours

Ces interfaces permettent à l’utilisateur de :

o Sélectionner un parcours.

o Voir les détails du parcours (liste des endroits à passer, description).

o Tracer un itinéraire sur la carte

Page 48: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

40 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

f. Interfaces gérer les événements

Figure 29 : Interfaces gérer les événements

Ces interfaces permettent à l’utilisateur de :

o Visualiser la liste des événements.

o Consulter les détails pour chaque événement.

o Participation et l’annulation dans l’événement.

Page 49: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Chapitre 3 : Réalisation

41 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

o Une notification en cas de participation que informe nous avons participent au

événement qui offre deux fonctionnalités (accéder au événement et accéder au

carte et affiche la position de l’événement).

3. Conclusion

Dans ce chapitre on a mis l’accent sur la description des caractéristiques de l’environnement

du travail et décrit les plateformes matérielles et logiciel sur lesquelles nous avons construit

notre application d’une part, d’autre part par la représentation des différents interfaces

développées tout au long de l’application. Enfin nous avons clôturé ce chapitre par la

présentation du chronogramme d’activité.

Page 50: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Conclusion générale

42 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Conclusion générale

Au bout de notre cursus en licence informatique, nous avons été chargés de réaliser un projet

de fin d’études. Notre travail s'est basé sur le développement d'un programme sur les

technologies mobiles (Smartphone). Ceci nous a amené à découvrir une nouvelle plateforme

de développement et à enrichir notre savoir et notre expérience.

Ce projet se dirige dans le cadre de notre licence appliques en informatique au sein de

l’Institut Supérieur d’Études Technologique de Mahdia pour le compte de la société e-pirana.

Au cours de la phase de réalisation de notre application, nous avons élaboré une étude

préalable sur les smart phones et son importance sur le plan social afin de préciser le but

principal pour la future application. Cette phase a constitué le point de départ pour l’étape

d’analyse et de spécification des besoins. Une fois nos objectifs sont fixés nous avons

enchaîné avec la conception afin de mener à bien notre projet. Nous avons procédé à la phase

de réalisation au cours de laquelle nous nous sommes familiarisés avec le langage de

programmation java.

Pour conclure, notre travail peut être sujet à des extensions. En effet, nous envisageons

d’ajouter une application «mTorism» sur Play store dans notre travail, la possibilité

développer sous d’autres plateformes.

Page 51: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Bibliographique

43 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Bibliographie

[1] L'art du développement Android 4eédition, 1er décembre 2012, de Grant Allen

[2] Développez pour Android, 1re édition, 1er mars 2011, de Cyril Mottier et Ludovic

Perrier.

[3] Programmation Android De la conception au déploiement avec le SDK Google

Android 2, de Damien Guignard, Julien Chable, Emmanuel Robles.

Page 52: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Netographie

44 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Netographie

[1] http://stackoverflow.com

[2] https://openclassrooms.com

[3] https://developers.google.com

[4] http://android.developpez.com/cours

[5] https://www.youtube.com

[6] http://www.tutorialspoint.com/android

[7] http://stage.lelkol.net

[8] http://getbootstrap.com

[9] http:// www.w3schools.com/bootstrap

[10] http://phpmyadmin.ovh.net

[11] http://www.ovh.tn

[12] https://www.wikipedia.org

Page 53: Rapport Projet Fin d'Études PFE

Projet Fin d’Études Annexe

45 Institut Supérieur d’Études Technologiques de Mahdia 2015/2016

Annexe

Page 54: Rapport Projet Fin d'Études PFE

Annexe

Android Studio versus Eclipse

ADT (Eclipse) Android Studio

Facilité d'installation Moyen Simple

Langue Nombreuses Anglais

Performance Peut-être lourd Rapide

Système de construction et compilation (build) Ant Gradle

Génération de variante et de multiple APK Non Oui

Complétion de code et refacturation Base Avancé

Éditeur d'interface graphique Oui Oui

Signature d'APK et gestion de Key store Oui Oui

Support NDK Oui oui

Installer Android Studio

Android Studio est disponible pour les systèmes Linux, Mac et Windows à partir de

cette page : https://developer.android.com/sdk/index.html

Pour Windows, si vous ratez votre installation, l'installateur n'arrête pas de boucler en

affichant des messages d'erreur à propos de composantes manquantes, assurez-vous

d'avoir préalablement effacé les fichiers préservés en cache, par la précédente

installation, dans le répertoire Temp de votre machine.

Quelques paramètres à respecter :

https://developer.android.com/sdk/index.html#Requirements

o Minimum 2 GB RAM, recommandé 4 GB RAM

o Espace disque: 400 Mb

o Au moins 1 Gb pour le SDK d'Android, les images pour l'émulateur et la cache

o 1280 x 800 la résolution minimale de l'écran

o Java Development Kit (JDK) 7

o Si l'on veut accélérer l'émulateur: processeur Intel avec support pour Intel VT-

x, Intel EM64T (Intel 64), et la fonctionnalité « Execute Disable (XD) Bit »