31 0 10MB
République Tunisienne Ministère de l’Enseignement Supérieur et de la Recherche Scientifique Université de Carthage Institut Supérieur des Technologies de l’Information et de la Communication
Rapport de Projet de Fin d’année Présenté en vue de l’obtention de la
Licence en Ingénierie des systèmes informatiques Spécialité : IOT et Systèmes Embarqués
Site Web E-Poubelle
Par Wafa BEN MILOUD Réalisé au sein de l’Association Tunisienne de Géomatique « ATG »
Encadrant Professionel : Mr Mohammed Chebil
Période De Stage : 15/06/2021 - 15/07/2021
Année Universitaire : 2020 - 2021
Dédicaces A mes chères parents , Nulle dédicace n’est susceptible de vous exprimer mes profonds affections et mes immenses gratitudes pour les efforts que vous avez fait pour mon éducation ,pour le soutien et les encouragements que vous m’avez prodigués tout au long de mon chemin.
Wafa Ben Miloud
i
Remerciement Au terme de ce projet de fin d’année , je tiens à exprimer mes sincères remerciments au personnel de ATG et de l’Enit , le président Mr. Noamen REBAI qui ont contribué à l’élaboration de ce rapport modeste. Ainsi J’exprime mon profond respect à Mr. Mohammed CHEBIL , mon superviseur, pour son assistance, ses directives et ses conseils précieux.
ii
Table des matières Introduction générale
1
1 Contexte du projet 0.1 Introduction . . . . . . . . . . . . . . 0.2 Présentation de l’organisme d’accueil 0.2.1 Organisme d’accueil : . . . . 0.2.2 Adresse et coordonnées . . . . 0.2.3 Domaines d’activités . . . . . 0.3 Présentation du projet . . . . . . . . 0.3.1 Cadre de projet . . . . . . . . 0.3.2 Problématique . . . . . . . . . 0.3.3 Solution proposée . . . . . . . 0.4 Conclusion . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
2 2 2 2 2 3 3 3 3 3 3
2 Analyse des besoins 2.1 Identification des acteurs . . . . . . . . . . . . . . . . . 2.2 Besoins fonctionnels . . . . . . . . . . . . . . . . . . . . 2.2.1 Besoins fonctionnels associés au citoyen . . . . . 2.2.2 Besoins fonctionnels associés au administrateur 2.2.3 Diagramme de cas d’utilisation global . . . . . . 2.3 Besoins non fonctionnels . . . . . . . . . . . . . . . . . 2.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
4 4 4 4 5 8 9 9
3 Etude Conceptuelle 3.1 Introduction . . . . . . . . . . . . . . . . . . . . . 3.2 Diagramme de classes . . . . . . . . . . . . . . . . 3.3 Diagramme de séquences du système . . . . . . . 3.3.1 Diagramme de séquence "Inscription" . . . 3.3.2 Diagramme de séquence "Authentification" 3.4 Conclusion . . . . . . . . . . . . . . . . . . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
10 10 10 11 11 11 12
4 Réalisation 4.1 Introduction . . . . . . . . . . . 4.2 Environnement de travail . . . . 4.2.1 Environnement matériel 4.2.2 Environnement logiciel . 4.3 Technologies utilisées : . . . . . 4.3.1 HTML5 : . . . . . . . . 4.3.2 CSS3 : . . . . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
13 13 13 13 13 14 14 14
. . . . . . .
. . . . . . . iii
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . . . . .
Table des matières
4.4
4.3.3 Bootstrap4 : . 4.3.4 JavaScript : . 4.3.5 Python : . . . 4.3.6 PostgreSQL : Tâches Réalisées . .
Table des matières . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
15 15 15 16 17
Conclusion Générale
23
Bibliographie
24
iv
Table des figures 1 2.2 2.3 2.4 3.5 3.6 3.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 4.16 4.17 4.18 4.19 4.20 4.21 4.22 4.23 4.24 4.25
Logo Association Tunisienne de Géomatique . . . . . . . . Diagramme de cas d’utilisation associé aux citoyens . . . . Diagramme de cas d’utilisation associé aux administrateurs Diagramme de cas d’utilisation global . . . . . . . . . . . Diagramme de classe général . . . . . . . . . . . . . . . . . Séquence "inscription" . . . . . . . . . . . . . . . . . . . . Séquence "authentification" . . . . . . . . . . . . . . . . . . logo de pycharm . . . . . . . . . . . . . . . . . . . . . . . logo de visual paradigm . . . . . . . . . . . . . . . . . . . logo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . logo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . logo Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . logo de JavaScript . . . . . . . . . . . . . . . . . . . . . . logo de Python . . . . . . . . . . . . . . . . . . . . . . . . logo Django . . . . . . . . . . . . . . . . . . . . . . . . . . logo de PostgreSQL . . . . . . . . . . . . . . . . . . . . . créer un compte . . . . . . . . . . . . . . . . . . . . . . . s’authentifier . . . . . . . . . . . . . . . . . . . . . . . . . ajouter une réclamation . . . . . . . . . . . . . . . . . . . consulter les reclamations . . . . . . . . . . . . . . . . . . ajouter un point de collecte . . . . . . . . . . . . . . . . . consulter la liste des citoyens . . . . . . . . . . . . . . . . créer un circuit de collecte . . . . . . . . . . . . . . . . . . ajouter une conteneure . . . . . . . . . . . . . . . . . . . . zonage . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
2 5 7 8 10 11 12 14 14 14 15 15 15 16 16 16 17 18 18 19 19 20 20 21 22
Liste des tableaux 2.1 2.2
Description des cas d’utilisations associés aux citoyens. . . . . . . . . . . . Description des cas d’utilisations associés aux administrateurs. . . . . . . .
vi
5 6
Introduction générale La géomatique est l’ensemble des techniques d’acquisition, d’intégration, de gestion et d’exploitation de l’information géographique. Dans ce cadre, l’association tunisienne de géomatique (ATG) accompagne ses clients dans la mise en place, l’exploitation et la maintenance d’un système d’information géographique (SIG). Au sein de cette association ,j’ai effectué mon stage du 15 juin 2021 au 15 juillet 2021 qui consiste à développer une application web qui vise l’application de la géomatique dans les organismes municipaux. Cette mission m’a permis de consolider mes connaissances relatives au fonctionnement des systèmes d’information géographique et leur contribuation dans le rapprochement entre géomatique et environnement. Pour mettre en valeur mon expérience il apparaît pertinent d’envisager le cadre de projet, l’organisme d’acceuil, un exposé de la problématique et une proposition de solution adapté dans le premier chapitre. Le deuxiéme chapitre présentera une analyse des besoins fonctionnels et non fonctionnels. Ainsi qu’une étude conceptuelle des différents fonctionnalités de notre application qu’on désignera dans le troisième chapitre. Dans le dernier chapitre nous décrirons l’environnement matériel et logiciel de l’application , les technologies adaptés , et les outils de développement utilisés. Et finalement , nous clôturerons ce rapport par une conclusion générale.
1
Chapitre 1 Contexte du projet 0.1
Introduction
Ce chapitre consiste à réaliser la mise contextuelle de notre projet, la présentation de l’organisme d’acceuil au sein du quel nous avons effectué le stage.
0.2 0.2.1
Présentation de l’organisme d’accueil Organisme d’accueil :
Figure 1 – Logo Association Tunisienne de Géomatique L’Association Tunisienne de Géomatique (ATG) créée en 2011, Jort Réf. N°4029 du 11 Octobre 2011 ayant le visa n° 2011T05596APSF1 et la matricule fiscale 1238329/W.
0.2.2
Adresse et coordonnées
Adresse : ATG, Association Tunisienne de Géomatique, ENIT / Département GC – Bâtiment F2 S 610 – B.P. 37, Le Belvédère 1002 Tunis – Tunisie. Contact : Dr REBAI Noamen président de l’association Tél : +216 23 29 19 35 Email : [email protected] 2
Chapitre 1
0.2.3
0.3. Présentation du projet
Domaines d’activités
ATG est une association qui vise la valorisation de la Géomatique en Tunisie en utilisant les Nouvelles Technologies de l’Information et de la Communication. Ceci à l’échelle nationale et internationale afin de rédiger, proposer et réaliser des programmes de recherche dans le domaine de la géomatique au niveau national. Cette organisation participe : – au développement de nouveaux produits de la géomatique interactive (Google Earth Tunisie à titre d’exemple) – à l’orientation des programmes nationaux de recherche (fondamentale ou appliquée) dans le domaine de la géomatique, – au financement d’actions ciblées de recherche ayant un intérêt scientifique ou thématique incontestable
0.3 0.3.1
Présentation du projet Cadre de projet
Le sujet «La géomatique dans les organismes municipaux » a été proposé dans le cadre de l’élaboration de notre projet de fin d’année (PFA) à l’Institut Supérieur des Technologies de l’Information et de la Communication (ISTIC). Il a été effectué durant un mois au sein de l’Association Tunisienne de Géomatique « ATG » . En effet, notre projet portera sur la conception et la réalisation d’une application web qui permet de localiser, mesurer et représenter sur des cartes et plans les divers éléments du territoire afin de faciliter les taches de la municipalité.
0.3.2
Problématique
Compte tenu des responsabilités nombreuses et diversifiées assumées par les municipalités qui doivent effectuer des taches lourdes pour collecter , filtrer et gérer les déchets. Ce contexte oblige les décideurs à trouver des moyens permettant de moderniser ce travail.
0.3.3
Solution proposée
Comme titre de solution , la proposition consiste à créer une application web qui vise l’implémentation d’un système d’informations géographique à l’aide duquel on y’aura toutes les informations nécessaires à propos les points de collecte des citoyens et les conteneurs dans le but de faciliter la gestion des déchets et alléger les taches de la municipalité.
0.4
Conclusion
Tout au long de ce chapitre, nous avons présenté l’organisme d’accceuil et envisagé le cadre de projet avec la solution adéquate adpté. Le chapitre suivant va être dédié à l’étude des besoins fonctionnels et non fonctionnels de notre application.
3
chapitre 2 Analyse et Spécification des besoins Dans ce chapitre nous allons spécifier les acteurs , les besoins fonctionnels et non fonctionnels de l’application afin de mieux clarifier notre but.
2.1
Identification des acteurs
Dans notre projet nous représentons deux acteurs : • Le citoyen : désigne les habitants de la ville d’ El Marsa. • L’administrateur : désigne la personne chargé de la gestion , la conception et la maintenance de l’application web. Il peut manipuler toutes les tâches proposées et possibles tels que Ajouter, Modifier, Supprimer et consulter.
2.2 2.2.1
Besoins fonctionnels Besoins fonctionnels associés au citoyen
Identification des cas d’utilisation : Cas d’utilisation Créer un compte S’authentifier Ajouter une réclamation Consulter ses réclamations Ajouter un point de collecte des déchets
Description chaque citoyen d’ El Marsa peut créer un compte en introduisant sa position géographique. Avant qu’un citoyen puisse accéder à son compte, il doit d’abord s’identifier. En cas d’insatisfaction , le citoyen peut ajouter une réclamation. Le citoyen peut accéder à ses réclamations et consulter leur état. Le citoyen peut ajouter un point de collecte pour ses déchets en précisant leur type (plastique, bois, ...)
4
Chapitre 2
2.2. Besoins fonctionnels
consulter l’emplacement des conteneurs
Selon sa position géographique , le citoyen peut consulter l’emplacements des conteneurs disponibles pour trouver le plus proche conteneur.
Table 2.1 – Description des cas d’utilisations associés aux citoyens.
Diagramme de cas d’utilisation associé aux citoyens
Figure 2.2 – Diagramme de cas d’utilisation associé aux citoyens
2.2.2
Besoins fonctionnels associés au administrateur
5
Chapitre 2
2.2. Besoins fonctionnels
Identification des cas d’utilisation : Cas d’utilisation S’authentifier Consulter la liste des citoyens Gestion des conteneurs
Gestion des réclamations
Gestion des circuits de collecte des déchets
Zonage
Description L’administrateur doit accéder au système via ses paramètres d’authentification L’administrateur peut consulter la liste des citoyens et leurs cordonnées personnelles. Il peut manipuler les taches suivantes : - consulter l’emplacement des conteneurs. - ajouter un conteneur. - modifier l’emplacement d’un conteneur. - supprimer un conteneur. Il peut manipuler les taches suivantes : - consulter la liste des réclamations. - modifier l’état d’une réclamation : traité ou pas encore. - supprimer une réclamation. Il peut manipuler les taches suivantes : - créer un circuit de collecte des déchets à partir des points de collecte désignés par les citoyens. - modifier un circuit de collecte. - supprimer un circuit de collecte. Chaque admin sera chargé d’une seule zone de la ville d’El Marsa.
Table 2.2 – Description des cas d’utilisations associés aux administrateurs.
6
Chapitre 2
2.2. Besoins fonctionnels
Diagramme de cas d’utilisation associé aux administrateurs.
Figure 2.3 – Diagramme de cas d’utilisation associé aux administrateurs
7
Chapitre 2
2.2.3
2.2. Besoins fonctionnels
Diagramme de cas d’utilisation global
Figure 2.4 – Diagramme de cas d’utilisation global 8
Chapitre 2
2.3
2.3. Besoins non fonctionnels
Besoins non fonctionnels
Les besoins non fonctionnels représentent les règles à respecter pour assurer la bonne qualité de l’application et le bon fonctionnement de son futur système. Les exigences non fonctionnelles de notre plateforme sont définies dans les points suivants : • Rapidité : L’application doit optimiser les traitements pour avoir un temps de génération de schéma raisonnable. • Efficacité : L’application doit être fonctionnelle indépendamment de toutes circonstances pouvant entourer l’utilisateur. • Convivialité : L’application doit être facile à utiliser. En effet, les interfaces utilisateurs doivent être conviviales c’est-à-dire simples, ergonomiques et adaptées à l’utilisateur.
2.4
Conclusion
Dans ce chapitre, nous avons précisé les besoins fonctionnels et non fonctionnels de notre système , le chapitre suivant sera consacré à la conception.
9
chapitre 3 Etude Conceptuelle 3.1
Introduction
Dans ce chapitre, je m’intéresse à la conception des cas d’utilisation que je viens d’analyser dans le chapitre précédent.
3.2
Diagramme de classes
Figure 3.5 – Diagramme de classe général 10
Chapitre 3
3.3 3.3.1
3.3. Diagramme de séquences du système
Diagramme de séquences du système Diagramme de séquence "Inscription"
La figure ci-dessous présente le scénario d’inscription pour le cas d’utilisation de «création d’un compte», donc pour créer un nouveau compte il faut d’abord saisir le nom d’utilisateur et le mot de passe dans la première interface, après la validation de ces paramètres l’utilisateur doit ajouter ses cordonnées personnels (nom,prénom,adresse,téléphone,latitude,longitude) pour accèder au système.
Figure 3.6 – Séquence "inscription"
3.3.2
Diagramme de séquence "Authentification"
La figure ci-dessous présente le scénario d’authentification pour le cas d’utilisation d’«authentification», donc pour accéder au système il faut tout d’abord saisir le nom d’utilisateur et le mot de passe dans l’interface de l’utilisateur, après la validation des paramètres d’accès, l’utilisateur accède au système.
11
Chapitre 3
3.4. Conclusion
Figure 3.7 – Séquence "authentification"
3.4
Conclusion
Dans ce chapitre, nous avons exposé les principaux diagrammes UML ‘diagramme de classe’ et ‘diagramme de séquences’ qui nous aident à présenter l’architecture de notre projet. Dans ce qui suit, on donnera dans le dernier chapitre une vision globale de la réalisation de l’application,en présentant l’environnement de développement et les interfaces graphiques.
12
chapitre 4 Réalisation 4.1
Introduction
Cette partie contient le dernier volet de ce rapport. Elle a pour objectif d’exposer le travail achevé. Dans un premier temps, nous présentons l’environnement matériel, logiciel et les différents outils de développement utilisés. Dans un second temps, nous illustrons la réalisation de notre travail par des imprimes d’écran des interfaces les plus importantes de notre application.
4.2 4.2.1
Environnement de travail Environnement matériel
L’environnement matériel sur lequel nous avons travaillé est constitué d’un ordinateur portable DELL caractérisé par : • Processeur : Intel Core I7 •Mémoire : 16Go de RAM. • Disque dur : 1 To . • Système d’exploitation : Windows 10.
4.2.2
Environnement logiciel
Pour élaborer ce projet nous avons fait recours à un certain nombre de logiciels : PyCharm : un environnement de développement intégré utilisé pour programmer en Python. Il permet l’analyse de code et contient un débogueur graphique. Il permet également la gestion des tests unitaires, l’intégration de logiciel de gestion de versions, et supporte le développement web avec Django.
13
Chapitre 4
4.3. Technologies utilisées :
Figure 4.8 – logo de pycharm Visual Paradigm : un logiciel de création de diagrammes dans le cadre d’une programmation. Tout en un, il possède plusieurs options permettant une large possibilité de modélisation en UML.
Figure 4.9 – logo de visual paradigm
4.3 4.3.1
Technologies utilisées : HTML5 :
HTML (Hypertext Markup Language) est le langage de balisage standard pour les documents conçu pour être affiché dans un navigateur Web.
Figure 4.10 – logo HTML
4.3.2
CSS3 :
CSS (Cascading Style Sheets) est utilisé pour décrire le style du contenu d’un HTML et Fichier XML 14
Chapitre 4
4.3. Technologies utilisées :
Figure 4.11 – logo CSS
4.3.3
Bootstrap4 :
Bootstrap est une collection d’outils dédiés à la création de la conception de sites Web et web applications. C’est un bundle contenant des composants HTML et CSS ainsi que JavaScript extensions.
Figure 4.12 – logo Bootstrap
4.3.4
JavaScript :
JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web.
Figure 4.13 – logo de JavaScript
4.3.5
Python :
Python est un langage de programmation qui peut s’utiliser dans de nombreux contextes et s’adapter à tout type d’utilisation grâce à des bibliothèques spécialisées.
15
Chapitre 4
4.3. Technologies utilisées :
Figure 4.14 – logo de Python Django : Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables.
Figure 4.15 – logo Django
4.3.6
PostgreSQL :
PostgreSQL est un système de gestion de base de données relationnelle orienté objet puissant et open source qui est capable de prendre en charge en toute sécurité les charges de travail de données les plus complexes.
Figure 4.16 – logo de PostgreSQL
16
Chapitre 4
4.4
4.4. Tâches Réalisées
Tâches Réalisées
Figure 4.17 – créer un compte
17
Chapitre 4
4.4. Tâches Réalisées
Figure 4.18 – s’authentifier
Figure 4.19 – ajouter une réclamation
18
Chapitre 4
4.4. Tâches Réalisées
Figure 4.20 – consulter les reclamations
Figure 4.21 – ajouter un point de collecte
19
Chapitre 4
4.4. Tâches Réalisées
Figure 4.22 – consulter la liste des citoyens
Figure 4.23 – créer un circuit de collecte
20
Chapitre 4
4.4. Tâches Réalisées
Figure 4.24 – ajouter une conteneure
21
Chapitre 4
4.4. Tâches Réalisées
Figure 4.25 – zonage
22
Conclusion Générale
23
Bibliographie
24