Adresse: B.P: 33/S Agadir - Maroc

Tél: (+212)0528 23 25 83 /(+212) 0661 68 63 16

Fax (+212) 0528 22 78 24

Site web: http://www.esta.ac.ma

[Rapport de projet de fin d’études]

Réalisé par :Encadré par :

Mohamed ElmansouriM. AbdenbiMazouHajarBoulhdirNourreddineOummadi

Département Génie

Informatique

Développement d'une application mobile (Android) pour la localisation automatique (GPS) des pharmacies de gardes les plus proches de chez vous.

1 | P a g e

Remerciements

Nous tenons sincèrement à remercier vivement Monsieur A.Mazoulpour son encadrement et son assistance durant la réalisation notre projet de fin d’études.

On remercie également nos professeurs, pour leurs conseils avisés. Nous avons apprécié leur disponibilité et leur patience. De plus leurs compétences indéniables 2 | P a g e

dans le domaine d’informatique.Merci à tout le corps enseignant du département« Département informatique » de l’Ecole Supérieure de Technologie d’Agadir.

3 | P a g e

DédicaceOn dédie cet humble travail :

A nos chers parents, pour leurs

amour et sacrifices.

A nos adorables frères, sœurs

pour leur patience.

A nos proches amis et toute

notre grande famille, pour

leurs soutient et

4 | P a g e

encouragements.

A toutes les personnes qui

nous connaissent de près ou de

loin seulement pour leur

existence.

TABLE DE FIGURESFigure 1 : Aperçu globale du système………………………………………………………………………………….………….....7Figure 2 : Communication mobile - Internet - Serveur Web - Base de données……………………………..…...9Figure3 : diagramme de classe web ……………………………………………………………………………………...............14Figure4 : diagramme d’activité cas 1 web ……………………………………………………………………….………………. 18Figure5 : diagramme d’activité cas 2 web…………………………………………………………………………….……..…….18Figure 5-1: diagramme d’activité cas 3 web……………………………………………………………………………………….19Figure 6: diagramme d’activité cas 4 web………………………………………………………………………………….……...19Figure7: Fonctionnement d’un site web dynamique……………………………………………………………..…………..21Figure8: Système Contacts ……………………………………………………………………………………….…………….….……. 21Figure9 : page d’accueil et d’inscription……………………………………………………………………….…………….……..22Figure 10: Connexion. ………………………………………………………………………………………………….………………...22 Figure 11 : étape 2 de l’inscription..…………………………………………………………………………………….……….…..23Figure 12 : page d’accueil (responsable pharmacie) ……………………………………………………………..…….…….24Figure 13: page consultation de calendrier………………………………………………………………………………………..25Figure 14: Mon compte(responsable pharmacie) ……………………………………………………………………………..24 Figure 15: envoyer un message au responsable de garde………………………………………………………………….24Figure 16: page de validation des comptes pharmacie……………………………………………………………………...26Figure 17: page d’affectation des dates pour les pharmacies…………………………………………………………....265 | P a g e

Figure 18: page de modification du compte……………………………………………………………………………………….27Figure 19: liste des comptes …………………………………………………………………………………………………….…..…..27Figure 20: l’envoie des message…………………………………………………………………………………….……………..…..28Figure 21: ajout ville/secteur………………………………………………………………..…………………………………………..28Figure 22: page de validation des comptes resp de garde…………………………………………………..………..…..29Figure 23: page de calendrier comporte toutes les dates………………………………………….……..…………..…..29Figure 24: page de suspension des comptes……………………………………………………………….………………..…..30Figure 25: Architecture plateforme Android .…………………………………………………………...………….…………..32figure 26 : IDE android studio………………………………………………………..………………..………………………………..33Figure27 : Android SDK and AVD Manager……………………………………………..………………………….……………..33Figure28 : Jsonparser …………………………………………………………………………..…………………………………………..34Figure 29 : Exemple Json …………………………………………………..…………………..…………………………….…………..34Figure 30 : Protocole et format de données ……………………………………………..……………………….……………..35Figure 32 : l’émulateur Genymotion et virtualBox……………………………………………..……………..….…………..35Figure 31 : diagramme de classe (android) ……….……………………………………………..……………..…..…………..38 Figure 33 : diagramme de cas d’utilisation……….……………………………………………..……………..………………..39Figure 34 : diagramme d’activité de cas 1) ……….……………………………………………..………………..………..…..42Figure 35: diagramme d’activité de cas 2……….……………………………………………..…………….……………….…..41Figure 36 : diagramme d’activité de cas3 ……….……………………………………………..……………..……………......42Figure37 : SplashScreen……….……………………………………………….…………………..……………..………………….....43Figure 38 : Ville Fragment……….……………………………………….………………………..……………..………………….....44Figure 39 : Lorsque l’utilisateur clique sur pharmacie degarde ………………………………………………….……..44Figure 40 : GPS Fragment……….………………………………………………………………..……………..……….……………....45Figure 41: bouton recherche et json………………………………………………..……………..……………………….……....45Figure 42 : Liste des pharmacies accessible depuis Ville Fragment……….……………………………………….....46Figure43 : Liste des pharmacies accessible depuis GPS Fragment……….………………………………….…………46figure 44 :message de non disponibilité de serveur…………………………………………………………………………..46Figure45 : La Localisation de la pharmacie dans la Carte……………………..……………..…….……..………….....47Figure46 : La Localisation de la pharmacie dans la Carte avant cliquer sur le bouton «Calculer Trajectoire ». ……….………………………………………….………………………………………..…………....………………….....48Figure47 :Exemple d’une route entre l’utilisateur et le pharmacie après le clique sur le bouton « calculer Trajectoire ». …………………………….……………………………………………..……………..……………………………………...48

6 | P a g e

SommaireI.INTRODUCTION..........................................................................................................................................8

II.PRESENTATION DU PROJET.....................................................................................................................10

1.Contexte.............................................................................................................................................10

2.Interaction client/pharmacie..............................................................................................................10

3.Objectif du projet................................................................................................................................10

4.Contrainte...........................................................................................................................................12

III.DEVELOPPEMENTWEB :.....................................................................................................................13

1.Présentation........................................................................................................................................13

2. Logiciels :............................................................................................................................................13

3-Les langages :......................................................................................................................................15

4-Modélisation et conception................................................................................................................17

4.1-Diagramme de classe :.................................................................................................................17

4.2-Dictionnaire de données :............................................................................................................17

4-3 Cahier de charge :........................................................................................................................18

4-4 Cas d’utilisation :..........................................................................................................................19

4-5.Diagrammes d’activité des cas d’utilisations :..............................................................................19

4-6.Conclusion :.................................................................................................................................22

5-Réalisation du site web.......................................................................................................................22

5.1-Description de la partie web :......................................................................................................22

5.1.1-C’est quoi un site dynamique ?.............................................................................................22

5.1.2-Comment fonctionne un site web dynamique ?...................................................................22

5.2-Présentation du de partie web :..................................................................................................23

5.2.1-system de Contact :...............................................................................................................23

5.3-les interfaces graphiques :...........................................................................................................23

5.3.1-Page d’Accueil :.....................................................................................................................23

5.3.2-Inscription :...........................................................................................................................23

5.3.3-Authentification....................................................................................................................24

7 | P a g e

5.3.4-2ème Etape de l’inscription..................................................................................................24

5.3.5-Partie Responsable pharmacie :............................................................................................25

5.3.5.1-Calendrier La page permet de consulter les dates attribué au pharmacies par le responsable de garde..................................................................................................................26

5.3.5.2-Mon compte Page permet de modifier des informations spécifiques.............................26

5.3.5.3-Contact Permet d’envoyer des messages au responsable de garde du même secteur que la pharmacie...............................................................................................................................26

5.3.6- Partie responsable de garde :..............................................................................................27

5.3.6.1- Valider les comptes pharmacie.....................................................................................27

5.3.6.2 Affectation des dates aux pharmacies............................................................................27

5.3.6.3Mon compte....................................................................................................................28

5.3.6.4forum liste des comptes pharmacie................................................................................28

5.3.6.5 Contact...........................................................................................................................29

5.3.7- Partie Administrateur...........................................................................................................29

5.3.7.1 ajouter une ville/secteur................................................................................................29

5.3.7.2 Valider les comptes des responsables de garde :..........................................................30

5.3.7.3 Consulter les dates de tous les pharmacies....................................................................30

5.3.7.4-Suspendre des comptes.................................................................................................31

IV.DEVELOPPEMENT MOBILE................................................................................................................32

1.Présentation (environnement de développement)..................................................................32

2-Modilisation........................................................................................................................................38

2.2 Diagramme de cas d’utilisation....................................................................................................39

2.3-Diagrammes d’activité des cas d’utilisations :..............................................................................40

3-Réalisation de l’application..........................................................................................................43

3.1- captures d’écran avec description..............................................................................................43

3.1-Activité Principale........................................................................................................................43

3.2-CONCLUSION...............................................................................................................................49

BIBLIOGRAPHIE..........................................................................................................................................50

Conclusion.................................................................................................................................................51

8 | P a g e

I.INTRODUCTIONDans le cadre de notre préparation au diplôme de DUT génie Informatique, nous avons été amenés à effectuer notre projet sous l'encadrement de M. Mazoul. Il s'agissait au cours du projet d'étudier et de développer une application mobile sous Android. Avec l'avancé et l'émergence des technologies mobiles, les développements embarqués sont de plus en plus demandés sur le marché. Avoir un Smartphone est devenu incontournable pour les jeunes de nos jours voire pour tous les catégories d’âges. D'où nait l'idée de développer une application utile, et à installer sur les Smartphones permettant de trouver la plus proche pharmacie de garde de chez nous , la contacter et connaitre le chemin exacte au logiciel lui-même. Mis à part le développement proprement dite de l'application, la première étape consistait à nous familiariser avec l'environnement Android, puis de choisir les outils convivial et envisageable à l'aboutissement du projet. Par la suite, nous entamerons la modélisation et le développement de l'application. Ensuite, créer un serveur web pour pouvoir stocker les données dans une base de donnée et facile d'accès grâce à un site web que nous avons développé par la suite. Les gros calculs seront implémenter sur le serveur web afin d'éliminer ou de diminuer les contraintes matériels limitant notre application sur les Smartphones. Ce rapport peut ainsi être subdivisé en quatre parties. La première consistera à la présentation du projet, des objectifs principaux puis les fonctionnalités de base. La seconde partie sera consacrée au développement proprement dite de l'application. La troisième partie propose une ébauche d'un site web qui servira d'interface entre le serveur web et l'application lui-même et les pharmaciens et leurs syndicats et implémentant toutes les fonctionnalités nécessaires à la communication entre eux. Enfin, la quatrième et dernière partie sera réservé à présenter l'application avec les fonctionnalités de base et une notice permettant de comprendre comment utiliser l’application mobile.

9 | P a g e

II.PRESENTATION DU PROJET1.Contexte Les Smartphones de nos jours sont équipés de plusieurs capteurs capables de localiser la position du téléphone avec précision, de mesurer la distance par rapport à un autre lieu . Ces derniers peuvent ainsi être utilisés à des fins services humaines-médicaux.2.Interaction client/pharmacie

Figure 1 : Aperçu globale du système

Comme on peut le constater dans la figure ci-dessus, l’interaction entre l’utilisateur et la pharmacie se résume en trois étapes : Pour commencer le responsable pharmacien doit au préalable créer un compte utilisateur sur le site web, qui permet de classer les responsables de pharmacies et les différencier et que l’administrateur désigné par le syndicat doit confirmer et contrôler. En second lieu, le responsable pharmacien ayant un compte validé par un administrateur pourra se connecter et disposer les différentes informations sur sa pharmacie. Il pourra alors, en toute liberté transmettre les données au sein du système. Pour terminer, les données transférées par le responsable pharmacie via internet seront récupérées par l’application android qui va traiter ces derniers et les bien comparer aux autres, les classer et les présenter à l’utilisateur.

10 | P a g e

3.Objectif du projet

Le travail qui nous a été demandé était de développer une application mobile sous Android, permettant la localisation automatique(GPS) des pharmacies de gardes les plus proches de chez l’utilisateur grâce à son appareil mobile. La principale fonctionnalité étant de mesuré la distance entre les pharmacies d’environs et l’utilisateur soit , sa localisation avec une possibilité de tracer le chemin, ses coordonnées et sa calendrier de garde. Au terme de ce projet, l'application devra être en mesure de deviner automatiquement le chemin le plus proche de l'utilisateur vers une pharmacie ou plusieurs.

Dans le cadre de ce projet, les fonctionnalités principales demandées sont l'envoi des données acquise depuis l’application web sur un serveur web , la récupération des données depuis ce serveur par l’application android et aussi des coordonnées GPS afin qu’elle peut bien fonctionner et exercer toute ses tâches.

Le fonctionnement et la mise en place du serveur est décrit par le schéma ci-dessous:

Figure 2 : Communication mobile - Internet - Serveur Web - Base de données

11 | P a g e

Le principe est donc que le Client (ordinateur ou le téléphone mobile), grâce à son navigateur, envoie une requête http au serveur Web via Internet. Le serveur traitera à son tour la requête correspondante et renverra la réponse au Client depuis Internet.

4.ContrainteNous sommes limités à l'autonomie de la batterie et de la taille de la mémoire du téléphone.

Pour pouvoir communiquer avec le serveur web et s'échanger des données, le téléphone doit être connecté à Internet (abonnement chez un fournisseur).

Par rapport au téléphone, le serveur présente un grand avantage du point de vue mémoire qu'autonomie. Pour l'instant, le serveur web est hébergé temporairement sur le serveur de olympe (https://www.olympe.in/) sous le nom projetftpestgi.olympe.in .

La difficulté surviendrait lorsque le site web changera de serveur. C'est à dire trouver un moyen de changer automatiquement la nouvelle adresse sur chaque application sans l'intervention de l'utilisateur et sans recompiler l'application.

12 | P a g e

III.DEVELOPPEMENTWEB :

1.Présentation

Le serveur Web est l'élément essentiel garantissant le stockage des informations de taille importante, car le téléphone ne dispose pas assez de mémoire suffisante.

L'objectif du serveur Web dans ce projet est d'héberger une application permettant de collecter les informations notamment de l'utilisateur et d'en assurer le traitement des données.

Lors de la première utilisation, le responsable pharmacie doit se connecter sur le site Web afin d'enregistrer ses informations qui seront stockées dans la base de données du serveur Web. Par la suite le login et le mot de passe de son choix ainsi qu'un code généré automatiquement lui permettra de se connecter sur le serveur et utiliser l'application web pour plusieurs tâches. Une fois connecté sur le site, l'utilisateur pourra donc voir son profil ou les modifier par la suite en cas de besoin.

Une partie réseau sociale donne à l'utilisateur de contacter le responsable de garde et démarrer une discussion instantanée.

Un compte administrateur (designer par le syndicat )permet à un utilisateur privilégié, d'accepter ou de refuser une ou plusieurs demandes de création de compte afin d'assurer facilement la sécurité ainsi que la gestion de capacité.

Sans négliger le rôle important du responsable de garde qui est organiser les calendriers de garde et contrôler les comptes.

Alors ce chapitre a pour objet de présenter les différents outils et technologies mis en œuvre pour la réalisation de la plateforme. Un accent particulier est mis sur les solutions open - source, qui n’ont aujourd’hui rien à envier aux solutions propriétaires, qui offrent un large Éventail de possibilités et opportunités toutes aussi intéressantes les unes que les autres. Cette étude technique exhibera la richesse et la puissance des technologies déployées pour réussir la réalisation du projet.

2. Logiciels :

WampServer:

Une plate-forme de développement Web sous Windows pour des

Applications Web dynamiques à l’aide du serveur Apache2, du langage

de scripts PHP et d’une base de données MySQL. Il possède également

13 | P a g e

PHPMyAdmin pour gérer plus facilement vos bases de données.

Contrairement aux autres solutions, WampServer permet de reproduire

fidèlement le serveur de production. Logo WampServer

Notepad++ :Notepad++ est plus qu’un simple éditeur de texte, il s’agit d’un outil destiné avant tout aux développeurs, débutants comme confirmés.

Notepad++ apporte une solution aux problèmes en proposant des fonctionnalités supplémentaires :

Logo Notepad++

Coloration des symboles

Chargement de fichiers de toute taille

Recherche et remplacement de texte

Choix des polices d’affichage

Offrant la coloration syntaxique de plus de vingt langages de programmation différents, de l’Ada au XML en passant par les populaires ASP, PHP,C++,java, JavaScript …..Etc.

14 | P a g e

PowerAMC est un logiciel de conception créé par la société SDP, qui permet de Logo PowerAMCmodéliserles traitements informatiques et leurs bases de données associées.

Créé par SDP sous le nom AMCDesignor, racheté par Powersoft, ce logiciel est produit par Sybase depuis le rachat par cet éditeur en 1995. Hors de France,version internationale est commercialisée par Sybase sous la

PowerAMC permet de réaliser tous les types de modèles informatiques. Il reste un des seuls qui permet de travailler avec la méthode Merise. Selon Riff News, cela permet d'améliorer la modélisation, les processus, le coût et la production d'applications.

3-Les langages :

HTML5 :

L'HTML est un langage informatique utilisé sur l'internet. Ce langage

est utilisé pour créer des pages web. L'acronyme signifie HyperText Markup

Language, ce qui signifie en français "langage de balisage d'hypertexte". Cette

signification porte bien son nom puisqu'effectivement ce langage permet de

réaliser de l'hypertexte à base d'une structure de balisage. Logo HTML5

CSS3 :

‘’Cascading Style Sheets’’ en anglais et ‘’Les feuilles de styles’’au

français sont un langage qui permet de gérer la présentation d'une page Web. Les styles

permettent de définir des règles appliquées à un ou plusieurs documents HTML. Ces règles

portent sur le positionnement des éléments, l'alignement, les polices de caractères, les

couleurs, les marges et espacements, les bordures, les images de fond, etc. Le but de CSS est

séparer la structure d'un document HTML et saprésentation.

JavaScript :Le JavaScriptest un langage de script incorporé dans un document

HTML. Historiquement il s’agit même du premier langage de script pour le web. C’est

un langage de programmation qui permet d’apporter des améliorations au langage

de programmation HTML en permettent d’exécuter des commandes du coté client,

c’est-à-dire au niveau du navigateur et non du serveur web.

Ainsi le langage JavaScript est fortement dépendant du navigateur appelant lapage web dans laquelle le script est incorporé, mais en contrepartie il ne nécessitera pas de compilateur. Logo JavaScript

15 | P a g e

Langage PHP est un langage de programmation web côté serveur, ce qui veut dire que c'est le serveur qui va interpréter le code PHP (langage de scripts) et générer du code HTML qui pourra être interprété par votre navigateur. Le PHPpermet d'ajouter des fonctionnalités de plus en plus complexe, d'avoir des sites dynamiques, de pouvoir gérer une administration de boutique en ligne, de modifier un blog, de créer des réseaux sociaux...Le PHP fut créé en 1994 par RasmusLerdorf, c'est un langage libre et gratuit, avec une grande communauté mondiale.

Logo PHP

PHP :

MySQL :MySQL est une base de données relationnelle libre qui a vu le jour en 1995 et très employée

sur le Web, souvent en association avec PHP (langage) et Apache (serveur web). MySQL fonctionne indifféremment sur tous les systèmes d'exploitation (Windows,

Linux, Mac OS notamment).

Le principe d'une base de données relationnelle est d'enregistrer les informations

dans des tables, qui représentent des regroupements de données par sujets (table

des clients, table des fournisseurs, table des produits, Les tables sont reliées entre

elles par des relations.

Le langage SQL (acronyme de StructuredQueryLanguage) est un langage universellement reconnu

par MySQL et les autres bases de données et permettant d'interroger et de modifier lecontenu d'une base de données. Les autres bases de données utilisées en informatique sont essentiellement Microsoft SQL Server et Oracle.

jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client dans le codeHTML des pages web1. La première version est lancée en janvier 2006 par John Resig.

16 | P a g e

Logo MYSQ

4-Modélisation et conception

4.1-Diagramme de classe :

Figure3 : diagramme de classe web

4.2-Dictionnaire de données :

Table VilleNom du champ Description Type de données Dimensionville N° ville int ---nom_ville nom de ville varchar 20latitude localisation latitude double ---longitude localisation latitude double ---

Table secteurNom du champ Description Type de données Dimensionn_secteur N° de secteur int ---nom_secteur nom de secteur varchar 20

Table PharmacieNom du champ Description Type de données DimensionN_phar N° de pharmacie int ---nom_phar nom de pharmacie varchar 16latitude localisation latitude double ---longitude localisation longitude double ---telephone telephone varchar 16adresse adresse de pharmacie varchar 30

17 | P a g e

Table connexionNom du champ Description Type de données Dimensionid_user N° de utilisateur int ---login psedou varchar 30password mot de passe de compte varchar 30email email de utilisateur varchar 20

typeresponsable pharmacie=1responsablegarde=2 int

---

typeconnexion non validé,encore ou validé int ---

Table resp_gardeNom du champ Description Type de données DimensionN_resp_p N° de responsable de garde int ---nom nom de resp garde varchar 20prenom prenom de resp garde varchar 20CIN carte d'identitenationnal varchar 20

Table resppharmacieNom du champ Description Type de données Dimension

N_resp_pN° de responsable de pharmacie int ---

nom nom de resp pharmacie varchar 20prenom prenom de resp pharmacie varchar 20cin carte d'identitenationnal varchar 20

Table garde_calendrierNom du champ Description Type de données Dimensionn_cal N° de garde int ---date_debut date de debut de garde date ---date_fin date de fin de garde date ---

Table message Nom du champ Description Type de données Dimensionn_mes N° message int ---Text textenvoyer , message varchar 10000date_env date d'envoie de message date ---Etat message lu=0,non lu=1 int ---

4-3 Cahier de charge :L’administrateur a comme tâche de validerles compte des responsables de garde et consulter les dates de tous les pharmacies soit en garde ou hors garde et aussi ajouter les secteurs et les villes et suspendre les comptes pharmacies et comptes garde(il les metenétat non validée)

Responsable de garde, lui, sa tâche est de valider les comptes des pharmacies et leur affecter les datessans oublier son droit de consulter les datesde garde de chaque pharmacie.

18 | P a g e

Responsable pharmacie peut seulement consulter les dates et modifier quelques donnéesconcernant son compte dans le site.

4-4 Cas d’utilisation :On a 1 système et 3 acteur

Use cas 1

Insertion des donnes par l’administrateur et aussi son compte permet la désactivation des comptes et la consultation des gardes et l’activation des comptes resp garde.

Use case 2

- Inscription de responsable du pharmacie (si le login tapé existe déjà, une interdiction del’inscription se déclenche et automatiquement sa demande ne sera pas affichée chez responsable). après il s’authentifier pour compléter la deuxième étape de l’inscription((sa demande sera affichée chez le responsable de garde du même secteur)). Puis il doit attendre la validation de son compte par le responsable de garde. Après la validation il peut accéder à son compte.

- Le responsable de garde affecte les dates aux pharmacies de son secteur et elles seront affichées au responsable de chaque pharmacie.

- Le forum permet d’envoyer des messages par les responsables des pharmacies au responsable de garde de son secteur et vice-versa. Le responsable de garde il peut aussi envoyer des messages aux comptes pharmacies de son secteur.

Use case 3

- Inscription de responsable de garde : (une recherche sur la base si le secteur choisi parle responsable de garde est déjà affecté si oui interdir l’inscription, si non le compte sera créé + vérification si login tape n’existe pas déjà).Puis il doit attendre la validation par administrateur (sa demande s’affiche chez l’administrateur).Après la validation il peut accéder à son compte.

Use case 4

L’affectation du garde apres les réunions des personnes chargées de chaque pharmacie pour déterminer les dates .

4-5.Diagrammes d’activité des cas d’utilisations :

Un diagramme d'activité permet de modéliser un processus interactif global ou partiel pour

un système donné (logiciel, système d'information). Il est recommandable pour exprimer une

dimension temporelle sur une partie du modèle, à partir de diagrammes de classes ou de cas

d'utilisation,

Par exemple :

Le diagramme d'activité est une représentation proche de l'organigramme ; la 19 | P a g e

description d'un cas d'utilisation par un diagramme d'activité correspond à sa

traduction algorithmique. Une activité est l'exécution d'une partie du cas

d'utilisation, elle est représentée par un rectangle aux bords arrondis.

Le diagramme d'activité est sémantiquement proche des diagrammes de communication (appelés diagramme de collaboration en UML), ou d'état-transitions, ces derniers offrant une vision microscopique des objets du système.

Figure 4: diagramme d’activité cas1 web

Figure 5 : diagramme d’activité cas 2 web

20 | P a g e

Figure5-1 : diagramme d’activité cas 3 web

Figure 6 : diagramme d’activité cas 4 web

21 | P a g e

4-6.Conclusion :Les logiciels et les langages et la modélisation cités précédemment sont indispensables à la

réalisation de notre projet. Par la suite, nous allons vous montrer quelques captures d’écrans des pages de notre site web qui vont vous donner une idée plus claire sur les composants de notre site web.

5-Réalisation du site web

5.1-Description de la partie web :5.1.1-C’est quoi un site dynamique ?

Le site web dynamique est un ensemble de pages web dynamiques qui sont chargéesà la demandepar opposition à des pages web statiques. Le contenu d’une page web dynamique peut donc varier en fonction d’informations (type de responsable,formulaires remplis par l’utilisateur, etc ) qui ne sont connues qu’au moment de sa consultation .

A l’inverse, le contenu d’une page statique est priori identique à chaque consultation.

5.1.2-Comment fonctionne un site web dynamique ?

Lorsque vous voulez visiter un site web, vous tapez son adresse dans votre navigateur web, que ce soit Google Chrome, Internet Explorer, Opera, Safari ou un autre. Mais ne vous êtes-vous jamais demandé comment faisait la page web pour arriver jusqu'à vous ?Il faut savoir qu'Internet est un réseau composé d'ordinateurs. Ceux-ci peuvent être classés en deux catégories.

- Les clients : Ce sont les ordinateurs des internautes comme vous. Votre ordinateur faitdonc partie de la catégorie des clients. Chaque client représente un visiteur d'un site web. Dans les schémas qui vont suivre, l'ordinateur d'un client sera représenté par l'image suivante.

- Les serveurs : Ce sont des ordinateurs puissants qui stockent et délivrent des sitesweb aux internautes, c'est-à-dire aux clients. La plupart des internautes n'ont jamais vu un serveur de leur vie. Pourtant, les serveurs sont indispensables au bon fonctionnement du Web.

22 | P a g e

Figure7: Fonctionnement d’un site web dynamique

5.2-Présentation du de partie web :Le site web dynamique joue un rôle complémentaire mais indispensable dans notre projet car il

permet de collecter les informations nécessaire pour que l’application fonctionne parfaitement. 5.2.1-system de Contact :

Un schéma expliquant la gestion des contacts

Figure 8 : Système Contacts5.3-les interfaces graphiques :

le site est divisé en troix grandes parties. La première partie est donc la partie responsable pharmacie, responsable de garde et la partie administrateur . Lorsqu’un visiteur entre l’adresse du site, il arrive sur la page d’accueil. Voici un aperçu de la structure générale du site.5.3.1-Page d’Accueil :

Permet aux responsable de pharmacie et responsable de garde l’authentification et l’insciption

Figure9 : page d’accueil etd’inscription.

23 | P a g e

5.3.2-Inscription :

le couchage du radio bouton resp garde génère deux champs, ville et secteur.5.3.3-Authentification

Dans cette partie le client peut être identifié en tapant son login et son mot de passe .

Une fois la connexion établie on aura :

Figure 10: Connexion.

5.3.4-2ème Etape de l’inscription

Une fois authentifié, l’utilisateur peut compléterla 2ème étape de l’inscription.

permet l’inscription de responsable pharmacie permet l’inscription de responsable de garde

Cette page sert à localiser l’emplacement de la pharmacie par le glissement du marqueur. Après la validation des données le compte passe à l’étatd’attente d’activation par le responsable de garde .

24 | P a g e

Figure 11 : étape 2 de l’inscription

5.3.5-Partie Responsable pharmacie :

Page d’Accueil du compte pharmacie: information sur le compte (etat compte activée)

Figure 12 : page d’accueil

25 | P a g e

5.3.5.1-CalendrierLa page permet de consulter les dates attribué au pharmacies par le responsable de garde

Figure 13: page consultation de calendrier5.3.5.2-Mon comptePage permet de modifier des informations spécifiques.

Figure 14: Mon compte5.3.5.3-ContactPermet d’envoyer des messages au responsable de garde du même secteur que la pharmacie.

Figure 15: envoyer un message au responsable de garde26 | P a g e

5.3.6- Partie responsable de garde :

5.3.6.1- Valider les comptes pharmacie

L’emplacement de pharmacie et les informations sont affichés sur le Map.

Figure 16: page de validation des comptes pharmacie5.3.6.2 Affectation des dates aux pharmacies

Cette page sert à attribuer les dates aux pharmacies, la suppression d’une et aussila consultation des dates de garde pour les pharmacies.

Figure 17: page d’affectation des dates pour les pharmacies

27 | P a g e

5.3.6.3Mon compte

Permet la modification des champs spécifiques

Figure 18: page de modification du compte5.3.6.4forum liste des comptes pharmacie

Cette partie du site affiche les comptes pharmacies dans lemême secteur que le responsable de garde, le nombre de message non lu et permet aussi de choisir un compte pharmacie pour lui envoyer un message.

Figure 19: liste des comptes

28 | P a g e

5.3.6.5 Contact

Page permet d’envoyer des messages au compte sélectionnée

Nombre de message non lu

Figure 20: l’envoie des message

5.3.7- Partie Administrateur

5.3.7.1 ajouter une ville/secteur.

Figure 21: ajout ville/secteur

29 | P a g e

5.3.7.2 Valider les comptes des responsables de garde :

Figure 22: page de validation des comptes resp de garde5.3.7.3 Consulter les dates de tous les pharmacies

Figure 23: page de calendrier comporte toutes les dates

30 | P a g e

5.3.7.4-Suspendre des comptes

La page permet la suspension (désactivation,état non validée) des comptes pharmacies et comptes responsables gardes.

Figure 24: page de suspension des comptes

31 | P a g e

IV.DEVELOPPEMENT MOBILE

1.Présentation (environnement de développement)

Les technologies mobiles prennent de plus en plus de place sur le marché. Les Smartphones sont considérés comme des petits ordinateurs et dotés d'un système d'exploitation s'appuyant sur un noyau Linux. Cependant, ils diffèrent des ordinateurs classiques par le cycle de vie d'une application. Sous Android, une application est composée d'une ou plusieurs activités. Une activité est la base d'un composant pour la création d'interfaces utilisateur. Afin de facilité lacinématique de l'application, il est préconisé de n'avoir qu'une interface visuelle par activité.

Figure 25 : cycle de vie d’une application

32 | P a g e

L'activité démarre : la méthode onCreate est appelée.

- Pendant l'utilisation d'une activité, l'utilisateur presse la touche Accueil, ou bien l'application téléphone, qualifiée comme prioritaire et qui interrompt son fonctionnement par un appel téléphonique entrant. L'activité est arrêtée (appel de onStop), le développeur détermine l'impact surl'interface utilisateur, par exemple la mise en pause d'une animation puisque l'activité n'est plus visible. - Une fois l'appel téléphonique terminé, le système réveille l'activité précédemment mise en pause (appel de onRestart, onStart). - L'activité reste trop longtemps en pause, le système a besoin de mémoire, il détruit l'activité (appel de onDestroy).- onPause et onResume rajoutent un état à l'activité, puisqu'ils interviennent dans le cas d'activités partiellement visibles, mais qui n'ont pas le focus. La méthode onPause implique également que la vie de cette application n'est plus une priorité pour le système. Donc si celui-ci a besoin de mémoire, l'Activity peut être fermée. Ainsi, il est préférable, lorsque l'on utilise cette méthode, de sauvegarde l'état de l'activité dans le cas où l'utilisateur souhaiterait y revenir avec la touche Accueil. Android se base sur un noyau Linux 2.6. Le SDK Android possède une bibliothèque de librairie de plusieurs classes java de base pour plusieurs type d'application (exemple : OpenGL|ES pour la 3D, SSL pour les protocoles de sécurité, etc.). Une application Android se repose sur un Framework qui facilite l'utilisation des classes de base et sert d'interface entre les "Librairies" et les applications.

Figure 25: Architecture plateforme Android

33 | P a g e

Android est un système d'exploitation pour téléphone portable de nouvelle génération développé par Google. Celui-ci met à disposition un kit de développement (SDK) basé sur le langage

Java.

1.2-Outils :

Nous avons eu l'occasion d'utiliserandroid studio comme outil de développement.

figure26 : IDE android studio

Nous vous invitons à consulter l'url ‘’https://developer.android.com/sdk/installing ‘’pour voir les étapes d'installation du plugin Android, sur Android studio IDE.

Le kit de développement Android est téléchargeable gratuitement sur : "HTTP://DEVELOPER.ANDROID.COM/SDK/INDEX.HTML" ainsi qu'un guide d'installation. Voici à quoi ressemble le SDK Android (SDK Manager) après l'installation et lancement :

34 | P a g e

Figure 27 : Android SDK and AVD Manager

La figure ci-dessus montre le lancement d'un émulateur Android sur le port : 5554 du

localhost, parmi 3 émulateurs.

Figure28 : Jsonparser

JSON ( JavaScript Object Notation) est un format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript . Il permet de représenter de l’information structurée. Un document JSON ne comprend que deux éléments structurels : des ensembles de paires nom / valeu; des listes ordonnées de valeurs. Ces mêmes éléments représentent 3 types de données :

des objets ; des tableaux ; des valeurs génériques de type tableau, objet, booléen, nombre, chaîne ou null.

EXEMPLE :

Figure 29 : Exemple Json

35 | P a g e

Le principal avantage de l’utilisation de JSON, dans notre application, est qu’il est simple à mettre en œuvre. Au rang des avantages, nous pouvons également citer : Facile à apprendre, car sa syntaxe est réduite et non-extensible; Ses types de données sont connus et simples à décrire ; Peu verbeux et léger, ce qui le rend bien adapté aux terminaux mobiles au contraire au langage XML qui est très verbeux. COMMENT JSON VA ÊTRE UTILISÉ DANS NOTRE APPLICATION ?Lorsque l'application Android s'exécute, elle se connectera au script PHP. Le script PHP va récupérer les données depuis la base de données MySQL. Ensuite les données seront encodées au format JSON et envoyées au système Android. Ensuite, l'application Android va obtenir ces données codées. Elle les analysera et les affichera sur le smartphone. Le schéma suivant illustre bien la façon d’échanger les données entre le client Android et la partie des serveurs(Web/SGBD) :

Figure 30 : Protocole et format de données

Figure 31 : l’émulateur Genymotion et virtualBox

36 | P a g e

Pour tester android sans un appareil dédié, on était devant plusieurs solutions comme l’émulateur officiel d’Android qui vient avec le SDK d’Android pour les développeurs, le populaireBluestacks App Player qui est plus axé sur l’exécution des applications Android sur PC. Cependant, l’émulateur du SDK est connu pour être très lent tandis que Bluestacks est limitée en fonctionnalités alors on a rechoisitGenymotion qui est un émulateur android plus rapide et complet pour ordinateur et qui fonctionne avec VirtualBox. sonrôme est de créer une machine virtuelle dans virtualbox qui émule en temps réel Android sur votre PC Windows, Mac ou Linux et offrir aussi un accès root et supporter les capteurs matériels.

37 | P a g e

2-Modilisation2.1- Diagramme de classe :

38 | P a g e

2.2 Diagramme de cas d’utilisationChaque 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 ». Ci-dessous le diagramme de cas d’utilisation général de notre application android :

Figure 33 : diagramme de cas d’utilisation

39 | P a g e

Le diagramme de cas d'utilisation ci-dessus nous montre l'interaction entre l'utilisateur et l’application android.

Les fonctionnalités principales sont chercher, choisir, visualiser le chemin, contacter et déterminer le chemin de la pharmacie.

L'utilisateur doit s'authentifier sur le serveur web pour pouvoir utiliser l'application. Une fois connecté, il peut configurer la distance, le type de pharmacie (Est ce qu’elle est en garde ou non), le GPS ainsi que les paramètres de connexion

2.3-Diagrammes d’activité des cas d’utilisations :

40 | P a g e

Figure 34 : diagramme d’activité de cas 1

41 | P a g e

Figure 35: diagramme d’activité de cas 2

Figure 36 :diagramme d’activité de cas 3(android)

42 | P a g e

3-Réalisation de l’application

3.1- captures d’écran avec description

Figure37 : SplashScreen

Splashscreen est une interface affiché à l’utilisateur au démarrage de l’application, permit d’afficher sa Logo Et des informations à propos de cette application, elle sert aussi à attends un moment (presque de 4 second), jusqu'à ce que les donnée téléchargé.

3.1-Activité PrincipaleOn a une Activité principal ‘Main_Activity’ Qui Contient Un ‘ActionBar’ qui contient aussi un bar de titre et une bar des onglets, dans cette application on a deux onglets qui caractérisent 2 Fragment, On peut accéder à chaque fragment soit par cliquer sur l’onglet ou par glisser l’écran. glisser à gauche pour afficher le Fragment de GPS, Ou à droite pour afficher le fragment de ville qui par défaut sélectionné au démarrage de l’application.

43 | P a g e

Figure 38 : Ville Fragment

Figure39 : Lorsque l’utilisateur clique sur pharmacie de garde

Cette interface contient une liste déroulante ‘’spinner’’ pour les villes, L’utilisateur peut choisir la ville ce qu’il veut, mais Agadir est la seul ville qui est disponible maintenant, et l’autre liste permit à l’utilisateur de

choisir le secteur qu’il souhaite effectuer la recherche des pharmacies sur. Le Toggle bouton au-dessous des listes permit à l’utilisateur de choisir entre naviguer sur tous les pharmacies ou juste les pharmacies de garde qu’ils sont disponible dans cette date, finalement il peut cliquer sur recherche pour afficher la liste

des Pharmacie.

Figure 40 : GPS Fragment

44 | P a g e

Dans cette Fragment L’application récupère la location actuelle de l’utilisateur ou au moins sa dernière «Known Location », S’il n y a pas des informations sur sa location actuelle et le GPS est désactivé, un message vas apparaitre il le dit Qu’il faut activer le GPS pour que l’application être capable de déterminé sa localisation actuelle. Une fois le GPS est activé mais il n’a pas réussi à récupérer les cordonnés de l’utilisateur le bouton ‘’Recherche’’ dans ce cas il ne le fait pas passer à la prochaine ‘’Activity’’ qui est la liste des pharmacies par ce que cette Activité ne fonctionne pas sans la location de l’utilisateur.

Ainsi que l’utilisateur peut Entrer une distance maximal qui est capable de passer, donc tous les pharmacies qu’ils vont afficher sera inferieure a la distance saisi.

L’utilisateur peut aussi choisit entre les pharmacies de garde et les pharmacies comme le Fragment précédent.

Une fois le bouton recherche est cliqué, Json commence à faire son travail, comme le montre ces figures :

Figure 41: extraction des données depuis la base et les organiser sous forme d’une liste de l’application

45 | P a g e

Figure43 : Liste des pharmacies Figure 42 : Liste des pharmaciesaccessible depuis GPS Fragmentaccessible depuis Ville Fragment

si l’application n’a pas pu accéder au serveur à cause du manque de connexion, cette interface sera affiché à l’utilisateur à la place des deux listes précédentes :

figure 44 :message de non disponibilité de serveur

46 | P a g e

Dans le figure 43 cette activité sert à afficher la liste des pharmacies qui sont le résultat de la recherche précédant à partir de choisir une ville et un secteur, cette interface affiche le nom de la pharmacie, l’adresse et aussi le numéro de téléphone, qui offre la possibilité de faire un appel directement par cliquer sur le numéro, et il y a aussi un autre bouton ‘’Map’’ qui déclenche une autre activité offre à l’utilisateur la possibilité de visualiser la location de la pharmacie.Dans Le figure 44 il y a un autre outil qui affiche la distance entre la location d’utilisateur et de la pharmacie, et aussi trier la liste des pharmacies à partir de la plus proche à la plus loin.

Figure45 : La Localisation de la pharmacie dans la Carte.

Cette Activity sert à afficher l’emplacement de la pharmacie dans la carte sans besoin de GPS, après le clique sur le bouton MAP ’’Figure43’’ de la liste des pharmacies.

47 | P a g e

Figure46 : La Localisation de la pharmacie dans la Carte avant cliquer sur le bouton «Calculer Trajectoire ».

Figure47 :Exemple d’une route entre l’utilisateur et le pharmacie après le clique sur le bouton « calculer Trajectoire ».

48 | P a g e

La figure 47 est une activité qui affiche aussi l’emplacement de la pharmacie depuis bouton «map » de ‘’figure 44’’ qui nécessite la localisation de l’utilisateur avec GPS, La ‘’figure 47 ‘’ affiche la carte qui est le même avec la carte de ‘’figure 46’’, Mais quand l’utilisateur clique sur le bouton « Calculer le trajectoire » l’application va tester si le Terminal android est connecté avec l’internet ,il vérifiera premièrement que le wifi ou la 3G sont activés, si Oui il fait une ping sur une site quelconque, si il reçoit des paquets dans le terminal où il est connecté avec l’internet et il peut dessiner le trajectoire entre l’emplacement de l’utilisateur et l’autre de la pharmacie, cela se fait par l’envoi des cordonnées a une API de google , pour qu’on reçoive un code xml contenant une liste de cordonnées du chemin le plus court , et on fera la traduction depuis le XML en java et on dessinera le Trajectoire Point par point.

3.2-CONCLUSION

L’activité d’implémentation était la plus délicate dans le développement de notre système.

Enfin, nous nous intéressons à tester l’application en réseau.

49 | P a g e

BIBLIOGRAPHIE http://supertos.free.fr/html/portables/android/

http://media.begeek.fr/

http://www.docs.php.net/

http://dev.mysql.com/doc/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

http://www.w3schools.com/js/default.asp

http://www.w3schools.com/php/default.asp

http://www.commentcamarche.net/contents/genie-logiciel/cycle-de-vie

http://developer.android.com/

http://developer.android.com/sdk/ndk/1.5_r1/index

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

Cours web (HTML/CSS/JAVASCRIPT/PHP) MrAmrouch

Cours UML Mr Salimi.

Cours android Mr Mazoul

50 | P a g e

ConclusionCe projet de fin d'étude consiste à réaliser une application android permettant de chercher les

pharmacies de garde les plus proches de l’utilisateur et un site web dynamique comme Platform permettant aux responsables des pharmacies de gérer les infos et les coordonnées de leurs pharmacies en ligne afin de créer une base de données sur le serveur que l’application android pourra extraire les données dont elle a besoin.

Au cours de ce rapport, nous avons présenté les différentes étapes de la conception et la réalisation de notre application.

Afin de satisfaire les besoins des utilisateurs nous avons commencé la conception en

utilisant le formalisme UML et la mise en œuvre des bases de données avec le gestionnaire de bases

de données MYSQL ensuite l'implémentation des requêtes SQL pour la manipulation des données

et enfin la concrétisation de l'application sous l'environnement de programmation PHP et

l’application android sous l’environement programmation android sans oublie l’outil photoshop qui

nous a beaucoup aider à bien présenter notre application android pour qu’elle puisse être visible et

à la portée de tout le monde.

Ce projet a fait l'objet d'une expérience intéressante, qui nous a permis d'améliorer nos connaissances et nos compétences dans le domaine de la programmation. Nous avons appris à mieux manipuler les langages PHP, HTML, MYSQL, Java, Json, Java Script et bien se familiariser avec Android.

Ainsi à travers cette application android et ce site web nous pourrons gérer ces activités par

le monde et offrir à cette structure une chance de s'imposer et d'entrer de plein pied dans le monde

compétitif des nouveaux application mobiles en mettant en ligne le site web sur un hébergeur pour

matérialiser sa consultation par des milliers des responsables pharmacies et aussi en mettant

l’application android dans Play Store.

En effet, ce travail étant une œuvre humaine, n'est pas un modèle unique et parfait, c'est

pourquoi nous restons ouverts à toutes les critiques et nous sommes prêts à recevoir toutes les

suggestions et remarques tendant à améliorer d'avantage cette étude. Etant donné que tout travail

informatique a été toujours l'œuvre d'une équipe.

51 | P a g e