Rapport PFE Geoportail Telecom [PDF]
ROYAUME DU MAROC UNIVERSITE ABDELMALEK ESSAÂDI FACULTE DES SCIENCES ET TECHNIQUES TANGER Projet de Fin d’Études En vue
61 2 7MB
Papiere empfehlen
![Rapport PFE Geoportail Telecom [PDF]](https://vdoc.tips/img/200x200/rapport-pfe-geoportail-telecom.jpg)
- Author / Uploaded
- Khaled Hicham
Datei wird geladen, bitte warten...
Zitiervorschau
ROYAUME DU MAROC UNIVERSITE ABDELMALEK ESSAÂDI FACULTE DES SCIENCES ET TECHNIQUES TANGER
Projet de Fin d’Études En vue de l’obtention du : Diplôme d’Ingénieur d’Etat en Géoinformation Présenté par :
Khaled HICHAM AMINE Intitulé :
Mise en place d’une base de données spatiale et développement d’une application SIG/Web pour la gestion complète du réseau de Djibouti Telecom Soutenu le : 15/07/2020 Devant le jury :
Pr. Miriam WAHBI
FST de Tanger
Président de jury
Pr. Otmane YAZIDI ALAOUI
FST de Tanger
Rapporteur
Mr. Houssien ABDOULKARIM
Djibouti Telecom
Encadrant Professionnel
Pr. Mustapha MAÂTOUK
FST de Tanger
Encadrant Pédagogique
Projet de fin d’études
Année universitaire : 2020/2021
Dédicaces Je dédie ce travail : A l’ensemble de ma famille et plus particulièrement à mes parents, ma sœur et mes frères pour leur amour, leur confiance, leurs conseils, leurs sacrifices, leurs prières ainsi que leur soutien inconditionnel qui m’a permis de réaliser les études pour lesquelles je me destine et par conséquent ce mémoire. Merci à mon père Hicham de m’avoir encouragée et épaulée durant toutes mes études. Je souhaite particulièrement dédier ce travail mon ami de toujours, Abdallah pour son accompagnement, son soutien et son amitié durant toutes ces années et pour l’ensemble de mes projets... Merci
II
Projet de fin d’études
Année universitaire : 2020/2021
Remerciements Je tiens à exprimer mes remerciements avec un grand plaisir et un grand respect à Allah tout puissant et miséricordieux. Mon encadrant professionnel Mr. Houssein ABDOUKARIM, qui n'a cessé de me faire profiter de ses précieux conseils et remarques. Sa disponibilité et ses encouragements m’ont permis de réaliser ce travail dans les meilleures conditions malgré les contraintes du stage à distance. Mes encadrants pédagogiques Pr. Mustapha MAÂTOUK et Pr. Otmane YAZIDI ALAOUI pour leurs engagements, leurs aides et leurs précieux conseils qu’ils ont sus me transmettre tout au long de mes études et de ce projet de fin d’études. Monsieur Jamal Eddine EL ABDELLAOUI, coordinateur de la filière Géoinformation pour son dévouement, sa gentillesse et ses conseils précieux. Sans oublier tous les professeurs et le corps administratif de la FST de Tanger. Je souhaite témoigner de la richesse de cette année au travers d’un corps professoral passionné, déterminé et qui a toujours su manifester son soutien. Je remercie toutes ces personnes qui ont contribué au renforcement de mes connaissances et qui m’ont donné les outils indispensables tout au long de mes études. J’adresse mes sincères remerciements à tous les professeurs, intervenants, et toutes les personnes qui par leurs paroles, leurs écrits, leurs conseils et leurs critiques m’ont permis de mener à bien mon travail.
III
Projet de fin d’études
Année universitaire : 2020/2021
Résumé Djibouti Télécom SA, c’est surtout un éventail de produits et de services, adaptés aux besoins de ses clients articulés autour de 3 métiers : le Téléphone fixe, le Mobile (GSM, CDMA) et l’Internet (IP/DATA pour les réseaux ADSL). Cependant le « service pilote » où j’ai effectué mon stage, utilise des plans Autocad pour la représentation les différents éléments du réseau. Et aussi, un système de base de données non spatial (GAYA) pour consulter l’état de disponibilité d’un point de contrôle (PC). Les requetés se font par ligne de commande cmd. Du coup le service ne dispose d’aucune base de données spatiale. Afin de renforcer et d’améliorer le service, mon projet de fin d’études a pour objectif, la conception et la réalisation d'une application web/SIG pour la gestion de l’ensemble du réseau de « Djibouti Télécom ». La solution développée permet de mieux gérer les différents éléments du réseau (ONU, Tête, PC, Conduite, Regard). L’application est basée sur le Format de fichier SIG « GeoJSON », le Framework Laravel, le système de gestion de base des données PostgreSQL, l’API Leaflet et sur la technologie Docker. Mots clés : Djibouti Télécom, ONU, PC, GC, Regard, Web SIG, PostgresSQL, Leaflet, GeoJSON, Laravel, Docker.
IV
Projet de fin d’études
Année universitaire : 2020/2021
Abstract Djibouti Telecom SA, it is above all a range of products and services, adapted to the needs of its customers articulated around 3 trades: the fixed telephone, the Mobile (GSM, CDMA) and the Internet (IP/DATA for the networks ADSL) However, the "pilot service" where I did my internship uses Autocad plans for the representation of the various elements of the network. And also, a non-spatial database system (GAYA) to check the availability status of a checkpoint (PC). Requests are made by command line cmd. As a result, the service does not have any spatial database. In order to strengthen and improve the service, my end-of-studies project aims to design and produce a web / GIS application for the management of the entire "Djibouti Telecom" network. The developed solution makes it possible to better manage the various elements of the network (ONU, Head, PC, Pipe, Manhole). The application is based on the "GeoJSON" GIS File Format, the Laravel Framework, PostgreSQL Database Management System, Leaflet API and Docker technology. Keywords: Djibouti Telecom, ONU, PC, GC, Manhole, Pipe, Web SIG, PostgresSQL, Leaflet, GeoJSON, Laravel, Docker.
V
Projet de fin d’études
Année universitaire : 2020/2021
ملخص اتصاالت جيبوتي ،هي قبل كل شيء مجموعة من المنتجات والخدمات التي تتكيف مع احتياجات عمالئها المتمحورة حول 3مهن :الهاتف الثابت والجوال يبل CDMAو ،GSMو اإلنترنت ADSL لشبكات .IP / DATA ومع ذلك ،فإن "الخدمة التجريبية" حيث أجريت تدريبي الداخلي تستخدم خطط أوتوكاد لتمثيل العناصر المختلفة للشبكة .وأيضًا ،نظام قاعدة بيانات غير مكاني للتحقق من حالة توفر نقطة للقيادة ) .(PCيتم إجراء الطلبات عن طريق سطر األوامر .cmdنتيجة لذلك ،ال تحتوي الخدمة على أي قاعدة بيانات مكانية. من أجل تعزيز الخدمة وتحسينها ،يهدف مشروع نهاية دراستي إلى تصميم وإنتاج تطبيق ويب /نظم المعلومات الجغرافية إلدارة شبكة "اتصاالت جيبوتي" بأكملها. يتيح الحل المطورإلى إدارة العناصر المختلفة للشبكة بشكل أفضل ).(ONU, Tête, PC, Conduite, Regard
التطبيق يعتمد على بنية ملفات نظم المعلومات الجغرافية " ،" GeoJSONاإلطار المعلوماتي ،Laravel ونظام إدارة قاعدة بيانات ،PostgreSQLواجهة برمجة تطبيقات Leafletوتقنية .Docker الكلمات الرئيسية :اتصاالت جيبوتي،PostgresSQL ،Leaflet ،Web SIG ،Regard ،GC ، PC ،ONU ، Docker ،GeoJSON ،Laravel
VI
Projet de fin d’études
Année universitaire : 2020/2021
Table des matières Dédicaces ................................................................................................................................................................ II Remerciements ...................................................................................................................................................... III Résumé .................................................................................................................................................................. IV Abstract .................................................................................................................................................................. V ملخص...................................................................................................................................................................... VI Table des matières................................................................................................................................................ VII Liste des figures ..................................................................................................................................................... IX Liste des abréviations ............................................................................................................................................ XI Introduction générale ............................................................................................................................................. 1
Chapitre I: CONTEXTE GÉNÉRAL DU PROJET ....................................................................................................... 2 Introduction ........................................................................................................................................................ 3 I. Organisme d’accueil : Djibouti Télécom ....................................................................................................... 3 1.
Aperçu général : .................................................................................................................................... 3
2.
Historique de Djibouti Télécom ............................................................................................................ 4
3.
Activités et mission : ............................................................................................................................. 5
4.
Informations supplémentaires sur l’organisme : ................................................................................... 5
5.
Le Service de pilotage (SP) ................................................................................................................... 7
6.
Les principales composantes du réseau Djibouti télécom ..................................................................... 9
7.
Les réseaux de Djibouti Télécom ........................................................................................................ 11
II. Présentation du projet ................................................................................................................................. 12 1.
Contexte .............................................................................................................................................. 12
2.
Etude de l’existant ............................................................................................................................... 12
3.
Problématique ..................................................................................................................................... 13
4.
Objectif ............................................................................................................................................... 13
Conclusion ....................................................................................................................................................... 13
Chapitre II: SPÉCIFICATION DES BESOINS & PLANIFICATION ............................................................................ 14 Introduction ...................................................................................................................................................... 15 Cahier des charges ................................................................................................................................... 15
I. 1.
Spécification des besoins .................................................................................................................... 15
2.
Diagramme de bête à cornes ............................................................................................................... 16 Planification du projet ............................................................................................................................. 19
II. 1.
Tableau des taches............................................................................................................................... 19
2.
Diagramme de GANTT....................................................................................................................... 20
Conclusion ....................................................................................................................................................... 20
Chapitre III: ANALYSE, CONCEPTION & MODÉLISATION .................................................................................. 21 Introduction ...................................................................................................................................................... 22
VII
Projet de fin d’études
Année universitaire : 2020/2021
Modélisation UML .................................................................................................................................. 22
I. 1.
Diagramme de cas d’utilisation ........................................................................................................... 22
2.
Diagramme de séquence ..................................................................................................................... 24 La base de données géographique et Diagramme de classe..................................................................... 26
II. 1.
La base de données géographique ....................................................................................................... 26
2.
Le diagramme de classe ...................................................................................................................... 31
Conclusion ....................................................................................................................................................... 31
Chapitre IV: OUTILS & ENVIRONNEMENT DU TRAVAIL .................................................................................... 32 Introduction ...................................................................................................................................................... 33 Environnement logiciel ........................................................................................................................... 33
I. 1.
Outil de conception, modélisation et planification .............................................................................. 33
2.
Outil SIG et SGBD ............................................................................................................................. 33
3.
Plateforme de développement, gestion des versions et test des APIs.................................................. 34
4.
Serveur Web : Docker ......................................................................................................................... 35 Langage de programmation, Framework et API ..................................................................................... 36
II. 1.
Le Front-End ....................................................................................................................................... 36
2.
Le Back-End ....................................................................................................................................... 39
III.
Architecture de la solution .................................................................................................................. 40
Conclusion ....................................................................................................................................................... 41
Chapitre V: MISE EN ŒUVRE DE L’APPLICATION .............................................................................................. 42 Introduction ...................................................................................................................................................... 43 I.
Page d’accueil.......................................................................................................................................... 43
II.
Authentification ....................................................................................................................................... 43
III.
Page d’accueil après authentification .................................................................................................. 44
IV.
Profil ................................................................................................................................................... 45 Gestion des utilisateurs ............................................................................................................................ 48
V. VI.
Gestion des éléments du réseau ........................................................................................................... 50
A.
ONU .................................................................................................................................................... 50
B.
Tete ..................................................................................................................................................... 54
C.
PC ( point de contrôle) ........................................................................................................................ 56
D.
Conduites ............................................................................................................................................ 59
E.
Regard ................................................................................................................................................. 60
F.
Antenne relais ..................................................................................................................................... 62
VII.
Carte générale ..................................................................................................................................... 63
VIII.
Client ................................................................................................................................................... 65
Conclusion ....................................................................................................................................................... 65 Conclusion générale et perspective...................................................................................................................... 66 Bibliographie ......................................................................................................................................................... 67
VIII
Projet de fin d’études
Année universitaire : 2020/2021
Webographie ........................................................................................................................................................ 67 Annexe .................................................................................................................................................................. 69
Liste des figures Figure 1 : L’historique de la société Djibouti Telecom ............................................................................ 4 Figure 2 : Le logo de la société Djibouti Telecom ................................................................................... 5 Figure 3 : Les partenaires de la société Djibouti Telecom ...................................................................... 6 Figure 4 : Organigramme de la société Djibouti Télécom ....................................................................... 7 Figure 5 : Organigramme du Service Pilotage du réseau ........................................................................ 8 Figure 6 : Image d’une ONU .................................................................................................................... 9 Figure 7 : Image d’une tête ..................................................................................................................... 9 Figure 8 : Image d’un PC ....................................................................................................................... 10 Figure 9 : Image d’un Regard ................................................................................................................ 10 Figure 10 : Image d’une antenne relais................................................................................................. 11 Figure 11 : Image d’un réseau aérien ................................................................................................... 11 Figure 12 : Image d’un réseau sous-terrain .......................................................................................... 12 Figure 13 : diagramme bête à cornes ................................................................................................... 18 Figure 14 : diagramme de Gantt ........................................................................................................... 20 Figure 15 : Diagramme de cas d’utilisation général.............................................................................. 23 Figure 16 : Diagramme de cas d’utilisation pour la manipulation de la carte ...................................... 24 Figure 17 : Diagramme de séquence de l’utilisateur régulier ............................................................... 25 Figure 18 : Diagramme de séquence de l’administrateur .................................................................... 25 Figure 19 : Diagramme de séquence du super administrateur ............................................................ 26 Figure 20 : Diagramme de classe générale ........................................................................................... 31 Figure 21 : Architecture globale de l’application .................................................................................. 40 Figure 22 : Interface d’authentification ................................................................................................ 43 Figure 23 : Interface d’accueil (user) .................................................................................................... 44 Figure 24 : Interface d’accueil (administrateur) ................................................................................... 44 Figure 25 : Interface d’accueil (super administrateur) ......................................................................... 45 Figure 26 : Interface profil. ................................................................................................................... 45 Figure 27 : Interface profil : changement d’avatar. .............................................................................. 46 Figure 28 : modale profil : changer d’avatar......................................................................................... 46 Figure 29 : modale profil : mise à jour d’information. .......................................................................... 47 Figure 30 : modale profil : mise à jour de mot de passe....................................................................... 47 Figure 31 : interface Dashboard. .......................................................................................................... 48 Figure 32 : modale Dashboard : ajout d’un utilisateur. ........................................................................ 48 Figure 33 : modale Dashboard : modification d’un utilisateur. ............................................................ 49 Figure 34 : confirmation Dashboard : suppression d’un utilisateur. .................................................... 49 Figure 35 : interface ONU. .................................................................................................................... 50 Figure 36 : table ONU............................................................................................................................ 50 Figure 37 : digitalisation ONU. .............................................................................................................. 51 Figure 38 : interface ONU. .................................................................................................................... 51 Figure 39 : message de création avec succès d’une ONU..................................................................... 52 Figure 40 : message d’erreur de création d’une ONU. ......................................................................... 52 Figure 41 : popup sur ONU. .................................................................................................................. 52 Figure 42 : modale de modification d’une ONU. .................................................................................. 53 IX
Projet de fin d’études
Année universitaire : 2020/2021
Figure 43 : message d’erreur : édition. ................................................................................................. 53 Figure 44 : message de réussite : édition. ............................................................................................ 53 Figure 45 : message de confirmation : suppression. ............................................................................ 54 Figure 46 : Interface de gestion des têtes............................................................................................. 54 Figure 47 : menu déroulant : changer d’ONU. ...................................................................................... 55 Figure 48 : Modale d’ajout : tête. Figure 49 : modale : édition d’une tête. ................................... 55 Figure 50 : Interface : carte des PC par ONU par saturation. ............................................................... 56 Figure 51 : Interface : carte des PC par ONU par demande irréalisable. .............................................. 57 Figure 52 : Interface : table des PC par ONU. ....................................................................................... 57 Figure 53 : modale d’ajout Pc. .............................................................................................................. 58 Figure 54 : modale d’ajout Pc. .............................................................................................................. 58 Figure 55 : interface : carte des conduites par ONU par saturation. .................................................... 59 Figure 56 : interface : table des conduites par ONU............................................................................. 59 Figure 57 : modale d’ajout : conduites. Figure 58 : modale d’édition : conduites. ......................... 60 Figure 59 : interface : carte des regards par ONU par saturation. ....................................................... 60 Figure 60 : interface : table des regards par ONU. ............................................................................... 61 Figure 61 : modale d’ajout : regards. Figure 62 : modale d’édition : regards.................................. 61 Figure 63 : interface : carte des antennes relais. .................................................................................. 62 Figure 64 : interface : table des antennes relais. .................................................................................. 62 Figure 65 : modale d’ajout : antennes relais. Figure 66 : modale d’édition : antennes relais. ....... 63 Figure 67 : Interface : carte générale. ................................................................................................... 63 Figure 68 : carte générale : affichage des PC de l’ONU 02. .................................................................. 64 Figure 69 : carte générale : affichage des conduites et regards de l’ONU 02. ..................................... 64 Figure 70 : Interface : carte générale. ................................................................................................... 65 Figure 71 : Donnée Excel : antennes relais. .......................................................................................... 69 Figure 72 : Donnée Excel : PC de l’ONU2. ............................................................................................. 69 Figure 73 : Donnée Autocad : ONU. ...................................................................................................... 70 Figure 74 : Donnée Autocad : Conduites et regards de l’ONU2. .......................................................... 70
Liste des Tableaux Tableau 1 : La fiche d’identité de la société Djibouti Télécom ............................................................. 6 Tableau 2 : les sous-services du service de pilotage ............................................................................. 8 Tableau 3 : L’ensemble des tables de la Base de Données ................................................................. 26 Tableau 4 : Table ONU.......................................................................................................................... 27 Tableau 5 : Table Tête .......................................................................................................................... 27 Tableau 6 : Table PC ............................................................................................................................. 28 Tableau 7 : Table conduite ................................................................................................................... 28 Tableau 8 : Table Regard ...................................................................................................................... 29 Tableau 9 : Table Antenne ................................................................................................................... 29 Tableau 10 : Table User ........................................................................................................................ 30
X
Projet de fin d’études
Année universitaire : 2020/2021
Liste des abréviations ADSL: Asymmetric Digital Subscriber Line API: Application Program Interface BD: Base de données CDMA : Code Division Multiple Access CSS: Cascading Style Sheets DT: Djibouti Telecom EWI: Esri World Imagery JS: Javascript JSON : JavaScript Object Notation GC: Génie civil GANTT: Generalized Activity Normalization Time Table GEOJSON : Geographic JavaScript Object Notation, ajoute au format JSON le stockage de l'information géographique. GSM: Global System for Mobile Communication HTTP: HyperText Transfer Protocol HTML: Hyper Text Markup Language IP: Internet Protocol ONU: Optical Network Unit ONEAD: OFFICE NATIONAL DE L'EAU ET DE L'ASSAINISSEMENT DE DJIBOUTI OSM: OpenStreetMap PC : Point de Contrôle PHP: Hypertext Preprocessor SA : Société Anonyme SIG : Système d’Informations géographiques : c’est un système informatique de matériels, de logiciels et de processus conçus pour permettre la collecte, la gestion, la manipulation, l’analyse, la modélisation et l’affichage des données à référence spatiale afin de résoudre des problèmes complexes d’aménagement et de gestion (Prof.MAATOUK Mustapha). SGBD : Système de Gestion de Base de données SQL: Structured Query Language UML: Unified Modeling L
XI
Projet de fin d’études
Année universitaire : 2020/2021
Introduction générale A Djibouti, au cours de ces dernières années, il y’a eu une véritable prise de conscience de l’apport potentiel des technologies de l’information et de la communication au développement socio-économique, d’une part par la consolidation de l’accès et d’autre part par l’élargissement des applications. Avec l’Éthiopie et l’Érythrée, Djibouti est l’un des trois pays de l’Afrique disposant encore qu’un seul opérateur « Djibouti Télécom ». Ce dernier est une société anonyme appartenant en totalité à l’Etat de la République de Djibouti, elle offre l’ensemble des services de télécommunications et détient le monopole sur les communications nationales et internationales. Ceci dit, le besoin d’un outil de gestion complète est primordial afin de faciliter la gestion des composantes du réseau et d’aider à la prise de décision pour les actions/extensions future. Mon projet de fin d’études porte sur la conception, la réalisation d’une base des données géographique et le développement d’une application Web/SIG permettant une flexibilité, simplicité et une précision dans la gestion du réseau « Djibouti Télécom » et aussi un service de consultation pour les employées de la société. C’est ce qu’on explique en détail dans ce rapport qui sera organisé en 5 chapitres comme suit : -
-
Le premier chapitre est un chapitre introductif présentant le contexte général du projet : le sujet, l’organisme, l’identification de la problématique et les objectifs du projet. Le deuxième chapitre comporte les spécifications des besoins, et la planification du projet. Le troisième chapitre est consacré à l’étude conceptuelle de l’application, on présentera la modélisation de la base de données à travers des modèles de conception et les diagrammes UML. Le quatrième chapitre présentera l’étude technique permettant de décrire l’environnement de développement ainsi que l’architecture de la solution. Le cinquième chapitre a pour objectif de présenter la mise en œuvre de la solution réalisée du projet. Enfin, on terminera par une conclusion générale de ce rapport contenant le bilan de la réalisation et citerons des perspectifs avenirs.
1
Projet de fin d’études
Année universitaire : 2020/2021
Chapitre I CONTEXTE GÉNÉRAL DU PROJET
2
Projet de fin d’études
Année universitaire : 2020/2021
Introduction Dans ce chapitre, on va exposer le contexte général du projet. On présentera en premier lieu l’organisme, Djibouti Télécom, ensuite le contexte du projet ainsi que les différents facteurs qui ont suscité le besoin de notre projet et à la solution proposée.
I. Organisme d’accueil : Djibouti Télécom 1. Aperçu général : Djibouti Télécom SA est un opérateur autonome de droit privé, détenant le monopole des télécommunications nationales et internationales sur l’ensemble du territoire djiboutien. Un acteur national engagé, par ce que Djibouti Télécom SA croit en la force des télécommunications comme créateur de lien social et comme outil indispensable au développement économique de Djibouti, Djibouti Télécom SA crée ainsi des liens étroits avec le tissu local. Djibouti Télécom SA, c’est surtout un éventail de produits et de services, adaptés aux besoins de ses clients articulé autour de 3 métiers : le Téléphone fixe, le Mobile (GSM, CDMA) et l’Internet (IP/DATA pour les réseaux ADSL). A travers ces trois métiers, Djibouti Télécom SA répond aux attentes de ses clients du secteur professionnel et des particuliers. En instaurant une stratégie de complémentarité entre le réseau fixe, le mobile et l’Internet, Djibouti Télécom SA place le client au centre de ses préoccupations et lui offre la possibilité de personnaliser ses services au gré de ses besoins. En adéquation avec la politique d’intégration régionale de Djibouti et son positionnement géostratégique exceptionnel. Djibouti Télécom SA est aussi une société à vocation internationale, point de chute des câbles sous-marins d’interconnexion entre l’Europe et l’Asie, elle constitue naturellement la voie de transit des communications de l’ensemble des pays de l’Afrique de l’Est, Centrale et du Sud. Ce rôle hautement stratégique contribue activement au développement du réseau international des télécommunications et fait de Djibouti un Hub des Télécommunications.
(Djibouti Telecom - Profil de Djibouti Télécom S.A, s. d.)
3
Projet de fin d’études
Année universitaire : 2020/2021
2. Historique de Djibouti Télécom Né le 20 septembre 1999 de la fusion du service des Télécommunications de l’Office des Postes et Télécommunications (OPT) et de la Société des Télécommunications Internationales de Djibouti (STID). La société de Djibouti Télécom a été inaugurée le 24 novembre 2001. Les deux sociétés dissoutes ont été liquidé et leurs patrimoines respectifs transférer à Djibouti Télécom. Elle a le statut juridique d'une société anonyme et son capital est détenu. A ce titre elle constitue le seul opérateur de télécommunication. Elle offre des services de télécommunication de qualités accessible aux usagers privés et particuliers. Elle est dotée d’un conseil d’administration de personne désigné par le décret. Elle est aussi dirigée par un directeur général.
Figure 1 : L’historique de la société Djibouti Telecom
Djibouti Telecom est aujourd'hui un centre stratégique de premier plan pour les services de télécommunications internationales en Afrique de l'Est avec son infrastructure de réseau sous-jacente comprenant sept câbles sous-marins internationaux, avec une connexion directe à plus de 90 pays, et deux câbles terrestres. Afin d'améliorer la résilience du réseau, la société a construit deux stations d'atterrissage de câbles. Il s'agit du plus grand nombre de sites d'atterrissage de câbles en Afrique subsaharienne. (Djibouti Telecom International | Telecom Hub for East Africa, s. d.)
4
Projet de fin d’études
Année universitaire : 2020/2021
3. Activités et mission : Afin de garantir un accès équitable aux services des télécommunications, Djibouti Télécom SA s’engage à : •
•
Moderniser le réseau public pour pouvoir l’étendre à l’ensemble du territoire national y compris les zones rurales, conformément à la politique gouvernementale de décentralisation et d’aménagement du territoire. Pratiquer une politique tarifaire incitative, permettant ainsi aux populations défavorisées l’accès aux services des télécommunications. Fournir à toutes les exigences de communication de nos clients avec des offres de produits emballés hermétiquement et services de haute qualité grâce à des équipes motivées et qualifiées.
•
Djibouti Télécom SA a pour missions : •
•
De fournir et exploiter l’ensemble des services relevant du monopole de l’Etat dans le secteur des télécommunications sous toutes leurs formes et à l’échelle régionale, nationale et internationale, De développer et assurer l’exploitation des réseaux publics nécessaires à ces services et assurer la connexion avec les réseaux étrangers, De garantir à tous, particuliers et professionnels qui en font la demande, l’accès aux différents services de téléphonie : Fixe, Mobile et Internet dans des conditions objectives, transparentes, non discriminatoires et à un prix abordable.
•
(Djibouti Telecom - Notre mission, notre objectif, s. d.)
4. Informations supplémentaires sur l’organisme : 4.1.
Logo et coordonnées
Figure 2 : Le logo de la société Djibouti Telecom
Adresse : 3 Boulevard Georges Pompidou, BP 205 Djibouti Téléphone : (+253) 21 35 67 18 E-mail : [email protected]
5
Projet de fin d’études
4.2.
Année universitaire : 2020/2021
Fiche d’identité
Tableau 1 : La fiche d’identité de la société Djibouti Télécom
Raison Social
Djibouti Telecom SA
Siège Social
Boulevard George Pompidou
Taux d’efficacité de l’appel
Société Anonyme (S.A) Société d’économie mixte Capital 4 000 000 000 fdj Prestation télécommunication Acheminement du circuit téléphonique (National, international) ; des réseaux, de l’internet Local : 59% International : 40%(départ) et 62%(arrivée)
Domaine
La Télécommunication
Date de création
20 Septembre 1999
Effectif de la Société
200 fonctionnaires et 120000 conventionnels
Forme Juridique
Activités de la Société
4.3.
Partenaires
Figure 3 : Les partenaires de la société Djibouti Telecom
6
Projet de fin d’études
4.4.
Année universitaire : 2020/2021
Organigramme de la société Djibouti Télécom
Figure 4 : Organigramme de la société Djibouti Télécom
5. Le Service de pilotage (SP) Le Service Pilotage du réseau joue un rôle important dans la télécommunication à Djibouti (réseau) car c’est le seul service qui réalise le plan de réseaux de télécommunication. Ce dernier est directement relié à la direction des infrastructures de Djibouti télécom. La mission principale du service SP est de créer une gestion centralisée des opérations du réseau ; travaux de désaturation, extension, réhabilitation, maintenance prévention plans d’action du réseau. Il est composé de trois sections : ➢ Etude ➢ Pré-étude ➢ Système d’information Géographique
7
Projet de fin d’études
Année universitaire : 2020/2021
Service Pilote
Service Préétude
Service
Cellule
Etude
SIG
Figure 5 : Organigramme du Service Pilotage du réseau
Tableau 2 : les sous-services du service de pilotage
-
Etude (Bureau d’Etude)
-
-
-
Pré-Etude
-
Système d’information Géographique -
Concevoir et dessiner tous les projets d’extension, désaturation, réhabilitation, restriction, fiabilisation de réseau générés par le SP ; Gérer la documentation et le patrimoine ; Participer à l’élaboration du SDI (Schème d’infrastructure Ligne) qui permet d’esquisser les travaux d’extension à long terme pour préparer un budget d’investissement ; Surveiller les taux d’occupation des infrastructures du réseau par zone qui doivent être en adéquation avec les prévisions de la demande. Veiller au respect des délais d’intervention et de réalisation pour chacune des phases ; Valider ou faire valider, suivant l’importance des travaux, des projets ; Programmer les travaux ; Contrôler l’intégralité des informations de retour travaux pour les mises à jour des plans. Anticiper les travaux liés aux nouvelles constructions (immeubles neufs, lotissement...) aux évolutions des zones ou quartiers... Participer aux phases projet et étude des différents concessionnaires de promoteurs... Informer le Bureau d’étude de ces prévisions pour la cohérence avec les autres projets en cours ou à venir La mise à jour des cartes Prévention et planification des réseaux.
➢ Mission Ce service du pilotage a bénéficié d’une mise en place d’une cellule SIG, parallèlement, il utilise l’AUTOCAD comme plans d’itinéraires et implantation des PC. Récemment le service pilotage utilise des calques pour la réalisation de ses différents documents, schéma des câbles et plans des PC. 8
Projet de fin d’études
Année universitaire : 2020/2021
6. Les principales composantes du réseau Djibouti télécom 6.1.
Optical Network Unit (ONU)
L’Optical Network Unit (autrement dit ONU) est l'équipement utilisateur chargé de terminer la fibre optique dans un réseau d’accès à Internet de type FTTH, ADSL et ligne téléphonique. Il fait la conversion du signal optique en signal électrique. FTTH : un réseau FTTH est un réseau de télécommunications physique qui permet notamment l’accès à internet à très haut débit et dans lequel la fibre optique se termine au domicile de l’abonnée. Figure 6 : Image d’une ONU
ADSL : Asymmetric Digital Subscriber Line (Ligne numérique d’Abonné). Cette technologie rend possible la coexistence sur une même ligne d’un canal téléphonique, un canal descendant de haut débit (pour downloader) et un canal montant moyen débit (pour uploader). (SFR - Guide SFR SEO - Box, s. d.)
6.2.
Tête
Les têtes se trouvent à l’intérieure des ONU et sert à donner accès à l’internet et ligne téléphonique. Une tête, constituée de 16 amorces, peut servir 112 foyers.
Figure 7 : Image d’une tête
9
Projet de fin d’études
6.3.
Année universitaire : 2020/2021
Point de contrôle (PC)
Le Point de Contrôle ou de Concentration (PC) est un boitier qui réunit un minimum de 7 lignes d'abonnés. D’un côté on y trouve, les paires de fils de cuivre qui vont chez les abonnés (câbles d'entrée de poste) et de l'autre côté, un câble plus gros qui relie le Point de Concentration au Sous-Répartiteur (câble de distribution). Les PC peuvent se présenter sous plusieurs formes (chambre souterraine avec trappe d'accès, boitier positionné sur un poteau en bois ou en béton, armoire de rue, etc.).
Figure 8 : Image d’un PC
6.4.
Les conduites
Les conduites (canalisations), c’est l’ensemble des fourreaux rassemblés en un bloc enrobé le plus souvent de sable et posé dans une tranchée. Les câbles passant par les conduites relient les têtes avec les PC. 6.5.
Regard
Regard (incluant cuve et tampon) en matériaux synthétiques armés de fibres de verre agréé. Placé dans un domaine privatif, il permet de tirer et de raccorder les lignes souterraines. Le regard de branchement télécom est une solution compacte et modulaire pour faciliter la mise en œuvre, quel que soit le type de réseaux.
Figure 9 : Image d’un Regard
10
Projet de fin d’études
6.6.
Année universitaire : 2020/2021
Antenne relais
Dans les réseaux mobiles, les antennes sont des émetteurs / récepteurs d’ondes radio qui acheminent le trafic sur un territoire donné. Tout comme la télévision et la radio fonctionnent grâce à des émetteurs, les téléphones mobiles ne pourraient pas fonctionner sans elles. Leur déploiement poursuit un double objectif : • •
Assurer la plus vaste couverture géographique possible. Maintenir une densité suffisante de relais pour traiter tout le trafic en un point donné.
Compte tenu de la façon dont se propagent les ondes radio, les antennes sont généralement installées en hauteur, par exemple sur le toit des immeubles ou au sommet de pylônes. Leur faisceau se déploie comme celui d’un phare éclairant la mer, n’atteignant le sol qu’à une distance de 50 à 200 mètres de l’antenne selon la hauteur de celle-ci. Et plus on s’éloigne, plus le faisceau diminue en intensité. Figure 10 : Image d’une antenne relais
7. Les réseaux de Djibouti Télécom Le but du réseau est d’alimenter les foyers (internet et téléphone fix). Et pour cela l’alimentation commence par l’ONU, équipée de plusieurs têtes dont chacune possède 16 amorces. Il faut noter qu’une amorce peut alimenter 7 foyers (7 paires). Les amorces sont alors liées avec des PC (point de contrôle situé partout dans la ville) par des câbles par voie aérienne ou souterraine. Et pour finir, les foyers seront connectés au PC qui leur est proche. 7.1.
Le réseau aérien
Un réseau aérien est un ensemble d’équipement infrastructure de télécommunication plus ou moins disponible permettant d'acheminer le réseau télécom (à savoir l’internet et la téléphonie). Il est essentiellement constitué des poteaux espacés de 35 à 40 m reliés par des câbles. Un réseau de télécommunication doit aussi assurer la gestion dynamique de l'ensemble production transport – consommation et facturation, mettant en œuvre des réglages ayant pour but d'assurer la stabilité de l'ensemble. Figure 11 : Image d’un réseau aérien
11
Projet de fin d’études
7.2.
Année universitaire : 2020/2021
Le réseau sous-terrain
Un réseau souterrain télécom est un ensemble d’équipement et d’infrastructure de télécommunication d'acheminer le réseau télécom sur des grandes distances contrairement au réseau aérien télécom (à savoir l’internet et la téléphonie). Le réseau souterrain passe sous le sol du trottoir visible et reconnaissable par des ouvertures fermées par un rectangle en fer avec un logo d’un téléphone appeler « regard » dans le jargon des télécoms. Figure 12 : Image d’un réseau sous-terrain
➔ Les différents types des câbles que le réseau souterrain est constitué sont : Câbles 448 paires, câbles 224 paires, câbles 112 paires, câbles 56 paires et la fibre optique.
II. Présentation du projet 1. Contexte Dans le cadre de gestion du réseau, Djibouti Telecom, porte un besoin pour une solution fiable afin de suivre et gérer efficacement le réseau qui est en charge par le service pilote de Djibouti Telecom dont j’ai effectué mon stage. C’est dans ce sens qu’il m’a été confié une mission à savoir l’élaboration d’une solution ainsi qu’une base de données géographique pour répondre aux besoins du bureau d’étude. Ce projet intitulé « La mise en place d’une base de données spatiale et développement d’une application SIG/Web pour la gestion complète du réseau de Djibouti Telecom », est réalisé dans le cadre d’un stage de fin d’études du cycle d’ingénieur d’Etat en Géoinformation et vient pour appliquer notre formation ingénieur à la FST Tanger.
2. Etude de l’existant Je ne saurai commence ce travail sans avoir une idée sur l’existant. J’ai effectué une analyse sur le moyen de gestion appliqué par le bureau d’étude, avec l’aide de mon encadrant professionnel, j’ai pu noter que les plans Autocad sont utiliser pour représenter spatialement les différents éléments du réseau. Ainsi que des données sous format Excel contenant les localisations des antennes relais et des points de control (PC). Pour consulter la disponibilité d’une place dans un PC, le service utilise une plateforme nommé « GAYA », cette plateforme est liée à une base de données non spatiale. J’ai constaté qu’il existe aucune liaison entre la partie spatiale et la partie sémantique.
12
Projet de fin d’études
Année universitaire : 2020/2021
3. Problématique Suite à l’étude de l’existant, j’ai pu m’entretenir avec mon encadrant professionnel, qui est le chef du bureau d’étude, pour mettre au point les besoins ainsi que les problèmes à soulever. Cependant, Djibouti Telecom, souhait des solutions pratiques et adéquates qui répond aux problèmes et fonctionnalités suivantes : • • • • •
Manque d’outil de gestion complet (visualiser, ajouter, modifier, trier et supprimer), de suivi, pour simplifier les procédures de la gestion. Difficulté de trouver les zones de saturation du réseau des points de contrôle (PC), conduites génie civil (GC) et ONU. Quels sont les points de contrôle (PC), conduites génie civil (GC), regards et ONU qui auront besoin d’intervention en tenant en compte de leurs états ? Difficulté de gérer les extensions futures du réseau. Quelles sont les zones que le réseau mobile est faible/indisponible ?
Et bien d’autre requête de ce genre.
4. Objectif Ce projet de PFE consiste à réaliser une solution/application SIG/Web afin de faciliter la consultation des données et la gestion de tous les éléments du réseau de Djibouti Telecom. L’objectif principal de ce travail est la mise en place d’une base de données spatiale regroupant les différents éléments du réseau. Permettre une gestion flexible des données ; le CRUD (Create, Read, Update, Delete) des ONU, Tete, PC, câble souterrain, regard d’intervention, antenne relais. La visualisation et la consultation des différents éléments du réseau dans une carte dynamique dans une plateforme facilitant l’utilisation. Suivi de tout le réseau dans une seule plateforme avec l’information de la saturation, état et bien d’autres fonctionnalités intéressantes comme extension future du réseau. Facilitation de la gestion en combinant l’information spatiale et attributaire.
Conclusion Dans ce premier chapitre nous avons présenté l’organisme « Djibouti Telecom », son historique et le contexte de notre projet, avec la problématique et l’objectif. L’importance de ce chapitre réside dans le fait qu’il est avant tout essentiel, dans la réalisation d’un projet SIG afin de bien étudier l’existant et ensuite définir la problématique et d'en déduire les objectifs du projet. Dans le chapitre qui suit, nous rentrerons dans l’étude fonctionnelle de notre projet.
13
Projet de fin d’études
Année universitaire : 2020/2021
Chapitre II SPÉCIFICATION DES BESOINS & PLANIFICATION
14
Projet de fin d’études
Année universitaire : 2020/2021
Introduction Ce chapitre a pour but d’une étude approfondie du projet qui sera décortiqué en trois parties essentielles. Dans la première partie nous allons nous pencher sur l’analyse des besoins la deuxième partie fera l’objet de présenter l’importance de la solution, par un diagramme bête à cornes. La dernière partie se focalisera sur la gestion de notre projet.
I. Cahier des charges Le cahier des charges est un document qui doit respecter, lors de la conception d’un projet, un service à réaliser. Ici, il regroupe les fonctionnalités formulant le besoin plus ou moins détaillé, ainsi que les services attendus par la solution à fournir. Après plusieurs réunions et discussions avec l’encadrant professionnel on a pu mettre en place des objectifs du projet, et ainsi faire sortir les besoins puis les fonctionnalités à mettre en place.
1. Spécification des besoins Dans cette partie, nous allons définir les différents besoins fonctionnels et non fonctionnels de notre solution : 1.1 Besoins fonctionnels Les besoins fonctionnels doivent répondre aux exigences du futur système en termes de fonctionnalités. Ils constituent une sorte de promesse ou de contrat au comportement du système généré. De ce fait, la solution proposée doit répondre aux besoins fonctionnels suivants : -
Nécessite une authentification pour avoir accès à l’application.
-
Nécessite une authentification en tant qu’administrateur pour avoir accès à la gestion des données.
-
Nécessite une authentification en tant que super administrateur pour avoir accès à la gestion des utilisateurs.
-
Permettre l’affichage, l’ajout, la modification et la suppression des données des ONU, PC, conduites, regards, antennes relais, utilisateurs de l’application.
-
Affiche des notifications ou une confirmation liée à une opération réalisée.
-
Permettre de faire un filtre de recherche sur les données.
-
La visualisation et la gestion des données à partir de la carte avec la possibilité de zoom et de filtrer les données à visualiser.
15
Projet de fin d’études
Année universitaire : 2020/2021
-
La localisation des entités du réseau (ONU, PC, conduites, regards, antennes relais) dans la carte et la visualisation de leurs niveaux de saturation et leurs états.
-
La mise en place d’une légende claire pour faciliter la lecture de la carte.
-
La visualisation des zones de recouvrement (buffer) du réseau des antennes relais.
1.2 Besoins non fonctionnels Les besoins non fonctionnels peuvent être considérés comme des besoins fonctionnels spéciaux. Parfois, ils ne sont pas rattachés à un cas d'utilisation particulier, mais ils caractérisent tout le système (l'architecture, la sécurité, le temps de réponse, etc..). Le système doit garantir les besoins opérationnels suivants : -
Besoins matériels : l’application doit s’exécuter de la même façon sur les différentes catégories d’appareils : ordinateur, pc portable et tablettes.
-
Besoins de performance : l’application doit répondre rapidement au besoin de l’utilisateur, lors de la manipulation.
-
Besoins de disponibilité : l’application doit être disponible pour les utilisateurs 24h/24, sauf période de maintenance et mise à jour du système.
-
Besoins de maintenance : l’application doit être facile à utiliser et à maintenir. Le système doit être conçu d’une manière facilitant son développement et son amélioration, à court, moyen et long terme.
-
Besoins de flexibilité : l’application doit être souple pour une extension future.
-
Besoin de l’interface : l’application doit présenter une interface claire, intuitive, conviviale et facilement exploitable par les utilisateurs.
2. Diagramme de bête à cornes Un diagramme bête à cornes est un outil pour l’analyse fonctionnelle du besoin. C’est un schéma qui démontre si le produit est utile pour l’utilisateur, s’il répond à ses besoins. Ce diagramme illustre l’importance du nouveau produit, en lequel ce produit répond aux besoins de ces utilisateurs. Ainsi doit répondre à ces trois questions :
-
À qui rend-il service ? Sur quoi agit-il ? Dans quel but ?
16
Projet de fin d’études
Année universitaire : 2020/2021
À qui rend-il service ? Sur quoi agit-il ?
La société de télécommunication Djibouti Telecom.
Faciliter la gestion du réseau
Le produit ? Application SIG/WEB
Dans quel but existe-t-il ? a. Utilisation régulière Vous verrez ci-dessous les fonctionnalités qu’un utilisateur régulier peut avoir : -
Consulter les données sur les ONU. Consulter les données sur les têtes. Consulter les données sur les points de contrôles. Consulter les données sur les conduites génie civil. Consulter les données sur les regards. Consulter les données sur les antennes relai. Rechercher les PC disponible pour un client. Consulter son profil. Editer les informations sur son profil. Modifier sa photo de profil. Modifier son mot de passe de connexion.
b. Administrateur Vous verrez ci-dessous les fonctionnalités qu’un administrateur peut avoir : -
Consulter et gérer (CRUD) les données sur les ONU. Consulter et gérer (CRUD) les données sur les têtes. Consulter et gérer (CRUD) les données sur les points de contrôles. Consulter et gérer (CRUD) les données sur les conduites génie civil. Consulter et gérer (CRUD) les données sur les regards. Consulter et gérer (CRUD) les données sur les antennes relai. Rechercher les PC disponible pour un client. Consulter son profil. Editer les informations sur son profil. Modifier sa photo de profil. Modifier son mot de passe de connexion.
17
Projet de fin d’études
Année universitaire : 2020/2021
c. Super Administrateur Vous verrez ci-dessous les fonctionnalités qu’un super administrateur peut avoir : -
Consulter et gérer (CRUD) les données sur les ONU. Consulter et gérer (CRUD) les données sur les têtes. Consulter et gérer (CRUD) les données sur les points de contrôles. Consulter et gérer (CRUD) les données sur les conduites génie civil. Consulter et gérer (CRUD) les données sur les regards. Consulter et gérer (CRUD) les données sur les antennes relai. Rechercher les PC disponible pour un client. Consulter son profil. Editer les informations sur son profil. Modifier sa photo de profil. Modifier son mot de passe de connexion. Récupérer son mot de passe en cas d’oubli sur son e-mail. Consulter et gérer (CRUD) les utilisateurs de l’application.
NB : CRUD → Création, Lecture, Modification et Suppression. Figure 13 : diagramme bête à cornes
18
Projet de fin d’études
Année universitaire : 2020/2021
II. Planification du projet La planification a pour objectif de déterminer et d’ordonnancer les tâches à effectuer au sein de notre projet, puis d’estimer leur durée et les ressources nécessaires à leur accomplissement. Et pour accompagner le développement du projet dès le début.
1. Tableau des taches Tableau 1 montre la planification de notre projet qui décrivent les durés de chaque tâche. Tableau 2 : Organisation du projet
Nom de la tâche
Durée
Début
Fin
Phase d’analyse des besoins
21 jours
01/03/21
29/03/21
Compréhension du sujet
7 jours
01/03/21
09/03/21
Identification des besoins
7 jours
10/03/21
18/03/21
Rédaction du cahier des charges
7 jours
19/03/21
29/03/21
Phase de formation
20 jours
31/03/21
27/04/21
Choix des technologies et environnement de travail
3 jours
31/03/21
02/04/21
Formation : Technologie et développement
17 jours
05/04/21
27/04/21
15 jours
28/04/21
18/05/20
Préparation de l'environnement de Travail
3 jours
28/04/21
30/04/21
Conception de la Base des données : gestion du réseau.
12 jours
03/05/21
18/05/21
Phase de développement
47 jours
03/05/21
06/07/21
Développement de l’application WEB/SIG
40 jours
03/05/21
25/06/21
Test et finalisation
7 jours
28/07/21
06/07/21
67 jours
05/04/21
06/07/21
Phase de conception
Rédaction du rapport
19
Projet de fin d’études
Année universitaire : 2020/2021
2. Diagramme de GANTT Le diagramme de GANTT est un outil efficace exploitant des données brutes telles que les dates de début et de fin et les durées de chacune des tâches afin de générer une visualisation de l’avancement du projet. Il permet de donner une vue globale des tâches à réaliser, des responsabilités et des ressources associées, de l’idée jusqu’à la mise en service de notre solution. La figure 4 présente le diagramme de GANTT, qui détaille l’organisation des différentes tâches.
Figure 14 : diagramme de Gantt
Conclusion Ce chapitre a permis de mettre en évidence l’ensemble des fonctionnalités et généralités sur la modélisation afin de donner une idée concise et claire sur le projet. Ensuite une gestion de projet a été faite en établissant le cahier des charges du projet et en planifiant l’ensemble des tâches qui permettent sa réalisation. Dans le chapitre suivant nous allons présenter une modélisation UML permettant la conception de l’application.
20
Projet de fin d’études
Année universitaire : 2020/2021
Chapitre III ANALYSE, CONCEPTION & MODÉLISATION
21
Projet de fin d’études
Année universitaire : 2020/2021
Introduction Ce chapitre présente la modélisation conceptuelle de notre solution qui nous aidera à structurer notre travail afin de répondre au cahier des charges et satisfaire les besoins, ce chapitre présentera dans une première partie, une modélisation de l’application, ensuite dans une deuxième partie, fera l’objet d’une conception graphique prévisionnelle de l’application.
I.
Modélisation UML
L’UML est un langage de modélisation graphique conçu pour fournir une méthode normalisée pour visualiser la conception d'un système. Il est couramment utilisé en développement logiciel et en conception orientée objet. Les diagrammes 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. Nous avons mis le point sur les diagrammes de comportement (diagramme des cas d’utilisation, diagramme de séquence et diagramme de classe).
1. Diagramme de cas d’utilisation Le diagramme des cas d’utilisation représente les possibilités d'interaction entre le système et les acteurs (intervenants extérieurs au système), c'est-à-dire de toutes les fonctionnalités que doit fournir le système. Ce diagramme représente les principaux cas d’utilisation de l’application, nous avant 3 acteurs qui sont les suivants : Super-Admin qui hérite les cas utilisations de l’administrateur que lui-même hérite de l’utilisateur régulier.
22
Projet de fin d’études
Année universitaire : 2020/2021
Figure 15 : Diagramme de cas d’utilisation général
23
Projet de fin d’études
Année universitaire : 2020/2021
Le diagramme de cas d’utilisation de la figure 17 présente les étapes à poursuivre pour pouvoir manipuler la carte.
Figure 16 : Diagramme de cas d’utilisation pour la manipulation de la carte
2. Diagramme de séquence Le diagramme de séquence est un diagramme UML comportemental d’interactions, il permet de représenter les échanges entre les différents objets et acteurs du système en fonction du temps. Les figures 18,19 et 20 illustrent les diagrammes de séquence de chaque acteur « Super-admin », « admin » et « utilisateur régulier ».
24
Projet de fin d’études
Année universitaire : 2020/2021
Figure 17 : Diagramme de séquence de l’utilisateur régulier
Figure 18 : Diagramme de séquence de l’administrateur
25
Projet de fin d’études
Année universitaire : 2020/2021
Figure 19 : Diagramme de séquence du super administrateur
II.
La base de données géographique et Diagramme de classe
1. La base de données géographique C'est un ensemble des données spatiales et non spatiales, baser sur le système d’information géographique, structurée et organisée de manière à être interrogeable et analysable de façon interactive ou automatique. Tableau 3 : L’ensemble des tables de la Base de Données
Table
Description
ONU
Données sur l’ONU
Tête
Données sur les Têtes
PC
Données sur les PC
Conduite
Données sur les Conduites
Regard
Données sur les Regards
Antenne
Données sur les Antennes
26
Projet de fin d’études
Année universitaire : 2020/2021
User
Données sur les Utilisateurs
migrate
Gère les migrations des tables depuis Laravel
pointcloud_formats spatial_ref_sys
L’ensemble des points de données dans l'espace. Systèmes de référence spatiale.
Tableau 4 : Table ONU
Attribut
Type
Caractéristique
Description
id
integer
nombre_tete
integer
tete_deploye
integer
etat
integer
nombre_conduite
integer
Not null
longitude
real
Not null
Les nombres de conduites par ONU Longitude
latitude
real
Not null
Latitude
geom
geometry
Not null
created_at
date
Not null
La géométrie (polygon, 4326) Date de création
Primary key, not Les identifiants de null l’ONU Not null Les nombres de têtes par ONU Not null Les nombres de têtes déployées par ONU Not null Les états des ONU
Tableau 5 : Table Tête
Attribut
Type
Caractéristique
Description
id
integer
id_onu
integer
nombre_pc
integer
Primary key, not null Primary key, foreign key, not null Not null
pc_actif
integer
Not null
etat
integer
Not null
Les nombres de pc par tête Les nombres de pc actif par tête Les états des pc
created
date
Not null
Date de création
Les identifiants des têtes Les identifiants de l’ONU
27
Projet de fin d’études
Année universitaire : 2020/2021
Tableau 6 : Table PC
Attribut
Type
Caractéristique
Description
id
integer
id_tete
integer
id_onu
integer
amorce
text
abonnement
integer
Not null
etat
integer
Not null
Nombre de foyers connecté Etats des pc
type
text
Not null
type des pc
longitude
real
Not null
Longitude
latitude
real
Not null
Latitude
geom
geometry
Not null
created_at
date
Not null
La géométrie (point, 4326) Date de création
Primary key, not Les identifiants des PC null foreign key, not Les identifiants des null têtes foreign key, not Les identifiants des ONU null Not null Amorce desservant le PC
Tableau 7 : Table conduite
Attribut
Type
Caractéristique
Description
id
integer
id_onu
integer
Les identifiants des conduites Les identifiants des ONU
tuyaux_occupe
integer
Primary key, not null foreign key, not null Not null
etat
integer
Not null
onead
integer
Not null
nombre_tuyaux
integer
Not null
geom
geometry
Not null
created
date
Not null
Les nombres de tuyaux occupés par conduite Etats des conduites Defini les conduites partagé avec l’onead Les nombres de tuyaux par conduite La géométrie (polyline, 4326) Date de création
28
Projet de fin d’études
Année universitaire : 2020/2021
Tableau 8 : Table Regard
Attribut
Type
Caractéristique
Description
id
integer
id_onu
integer
Les identifiants des regards Les identifiants des ONU
etat
integer
Primary key, not null foreign key, not null Not null
type
text
Not null
type des regards
projeter
integer
Not null
longitude
real
Not null
Pour définir un regard projeté ou pas Longitude
latitude
real
Not null
Latitude
geom
geometry
Not null
Created_at
date
Not null
La géométrie (point, 4326). Date de création.
Attribut
Type
Caractéristique
id
integer
nom
text
région
text
Primary key, not null Primary key, not null Not null
réseau
text
Not null
transport
text
Not null
Les identifiants des antennes relais. Nom du quartier dont l’antenne se situe. Nom de la région dont l’antenne appartient. Type de réseau (4g, 3g ,2g). Type de transport
systeme
text
Not null
Système
projeter
integer
Not null
longitude
real
Not null
Pour définir une antenne projeter ou pas Longitude
latitude
real
Not null
Latitude
geom
geometry
Not null
created_at
date
Not null
La géométrie (point, 4326) Date de création
Etats des regards
Tableau 9 : Table Antenne
Description
29
Projet de fin d’études
Année universitaire : 2020/2021
Tableau 10 : Table User
Attribut
Type
Caractéristique
Description
name
text
username
text
email
email
Primary key, not null Primary key, not null Not null
password
text
Not null
Mot de passe
role
integer
Not null
Rôle
avatar
URL
Nullable
Photo de profil
created_at
date
Not null
Date de création
updated_at
date
Not null
Date de la dernière mise à jour
Nom complet du l’utilisateur Nom d’utilisateur pour se connecter Adresse email
30
Projet de fin d’études
Année universitaire : 2020/2021
2. Le diagramme de classe Le diagramme de classe est l'un des types de diagrammes UML les plus utiles, car il décrit clairement la structure d’un système particulier en modélisant ses classes, ses attributs, ses opérations et les relations entre ses objets.
Figure 20 : Diagramme de classe générale
Conclusion Ce chapitre a fait l’objet d’une étude conceptuelle de la solution à travers les diagrammes UML. Dans le chapitre suivant, nous allons identifier l’environnement et les outils de travail favorisant le développement de notre application.
31
Projet de fin d’études
Année universitaire : 2020/2021
Chapitre IV OUTILS & ENVIRONNEMENT DU TRAVAIL
32
Projet de fin d’études
Année universitaire : 2020/2021
Introduction La création et la conception d’une application SIG/WEB sont un processus qui implique l’utilisation des techniques et des outils de développement notamment dédiés au web. Ce quatrième chapitre présentera dans une première partie, les outils et l’environnement du travail afin d’élaborer de notre application web et dans une deuxième partie donnera un aperçu sur l’architecture technique de l’application.
I.
Environnement logiciel
1. Outil de conception, modélisation et planification Draw.io : est une application gratuite, qui permet de dessiner des diagrammes ou des organigrammes. Cet outil vous propose de concevoir toutes sortes de diagrammes, de dessins vectoriels, de les enregistrer au format XML puis de les exporter. Draw.io est un véritable couteau suisse de la frise chronologique, de la carte mentale et des diagrammes de tout genre. (Draw.io : un outil pour dessiner des diagrammes en ligne, s. d.)
➔ Nous l’avons donc utilisé pour créer les diagrammes de cas d’utilisation, d’interaction et le diagramme de classe. Microsoft Project : (MS Project ou également MSP) est un logiciel Microsoft dédié à la gestion de projets. Il est possible à tout moment créer des tâches et des jalons, définir les liens entre chaque tâche, les hiérarchiser. MS Project a également la capacité d’estimer la durée ainsi que la charge de travail nécessaire pour accomplir une tâche définie. Microsoft Project permet aussi la création de modèles qui permet à l’utilisateur de respecter une méthodologie ou un processus quelconque. (Microsoft MS Project - Gestion de projets décisionnels - Next Decision, s. d.)
➔ Nous l’avons donc utilisé pour la gestion et la planification du projet ainsi que la création du diagramme de GANTT.
2. Outil SIG et SGBD QGIS : est un logiciel SIG (système d'information géographique) libre multiplate-forme publiée sous licence GPL. Le développement a débuté en mai 2002. Il était également appelé Quantum GIS jusqu'à la version 1.9. La version 3.0.0 ("Girona") est sortie fin février 2018. La version actuelle est QGIS 3.14.0 'București', sortie le 19.06.2020 via la bibliothèque GDAL3, il gère les formats d’image matricielle (raster) et vectorielle, ainsi que les bases de données. (Duplain, s. d.)
33
Projet de fin d’études
Année universitaire : 2020/2021
➔ Quantum GIS est utiliser comme une méthode d’implémentation de gros nombre de donnée rapidement vers la base de données.
PostgreSQL : est un système de gestion de base de données relationnelle et objet. Ce système libre n'est pas contrôlé par une seule entreprise, mais est fondé sur une communauté mondiale de développeurs et d'entreprises. Ce SGBD utilise des types de données modernes, dit composés ou enrichis suivant les terminologies utilisées dans le vocable informatique usuel. Ceci signifie que PostgreSQL peut stocker plus de types de données que les types simples traditionnels entiers, caractères, etc. L'utilisateur peut créer des types, des fonctions, utiliser l'héritage de type, etc. PostgreSQL est plus avancé que ses concurrents dans la conformité aux standards SQL. Il fonctionne sur diverses plateformes matérielles et sous différents systèmes d'exploitation. PostGIS : est une extension du SGBD PostgreSQL, qui active la manipulation d'informations géographiques (spatiales) sous forme de géométries (points, lignes, polygones), conformément aux standards établis par l’OGC. Il permet à PostgreSQL d'être un SGBD spatial pour pouvoir être utilisé par les systèmes d'informations géographiques. (Install Postgres/PostGIS and get started with spatial SQL | Technical Tidbits From Spatial Analysis & Data Science, s. d.)
3. Plateforme de développement, gestion des versions et test des APIs A. Éditeur de code Visual Studio code : est un éditeur de code source propriétaire. Il prend en charge certains langages de programmation, il permet d’analyser le code et de vérifier sa syntaxe, ses fonctionnalités peuvent être étendues via des extensions qui lui permettent de supporter d’autre langage de programmation. (Visual Studio code - Code Editing. Redefined, s. d.)
A. GIT Git est un logiciel de gestion des versions décentralisé. Il est open source, et a été créé aux alentours de 2005 par Linus Torvalds, développeur du noyau Linux. Git permet de gérer multiples versions d’un document, d’un site Web, d’un programme etc. Pour un travail fiable, git nous offre une « machine à voyager dans le temps », permettant de revenir à d’anciennes versions du projet, il offre aussi la possibilité de travailler simultanément sur différentes versions d’un même projet (exemple : version en production et version de développement). (Git, s. d.)
34
Projet de fin d’études
Année universitaire : 2020/2021
B. GitHub GitHub est une plateforme de développement inspirée de votre façon de travailler. De l'open source à l'entreprise, vous pouvez héberger et réviser du code, gérer des projets et créer des logiciels aux côtés de 50 millions de développeurs. (Build Software Better, Together, s. d.)
C. Postman Postman est une plateforme de collaboration pour le développement d'API. Les fonctionnalités de Postman simplifient chaque étape de la création d'une API et rationalisent la collaboration afin que vous puissiez créer de meilleures API, plus rapidement. (Postman | The Collaboration Platform for API Development, s. d.)
4. Serveur Web : Docker Docker permet d'embarquer une application dans un ou plusieurs containers logiciels qui pourra s'exécuter sur n'importe quel serveur machine, qu'il soit physique ou virtuel. Docker fonctionne sous Linux comme Windows Server. C'est une technologie qui a pour but de faciliter les déploiements d'application, et la gestion du dimensionnement de l'infrastructure sous-jacente. Elle est proposée par la société Docker, en partie en open source.
Les avantages des conteneurs Docker ➢ Modularité L'approche de Docker en matière de conteneurisation repose sur la décomposition des applications : c'est-à-dire la capacité de réparer ou de mettre à jour une partie d'une application sans devoir désactiver l'ensemble de cette dernière. En plus de cette approche basée sur les microservices,
➢ Couches et contrôle des versions d'image Chaque fichier image Docker est composé d'une série de couches. Ces couches sont assemblées dans une image unique. Chaque modification de l'image engendre la création d'une couche. Chaque fois qu'un utilisateur exécute une commande, comme run ou copy, une nouvelle couche se crée. Docker réutilise ces couches pour la construction de nouveaux conteneurs, accélérant ainsi le processus de construction. Les modifications intermédiaires sont partagées entre les images, ce qui optimise la vitesse, la taille et l'efficacité. Qui dit superposition de couches, dit contrôle des versions.
35
Projet de fin d’études
Année universitaire : 2020/2021
➢ Restauration La fonction la plus intéressante de la superposition de couches est sans doute la restauration. Chaque image est composée de couches. Aussi, si l'itération actuelle d'une image ne vous convient pas, vous pouvez restaurer la version précédente. Cette fonction favorise le développement agile et vous aide à mettre en œuvre les pratiques d'intégration et de déploiement continus au niveau des outils. ➢ Déploiement rapide Avant, il fallait plusieurs jours pour mettre en place du nouveau matériel, le faire fonctionner, l'approvisionner et le rendre disponible. C'était un processus complexe et fastidieux. Aujourd'hui, avec les conteneurs Docker, on peut effectuer tout cela en quelques secondes seulement. En créant un conteneur pour chaque processus, on peut rapidement partager les processus similaires avec les nouvelles applications. De plus, comme on n’a pas besoin de redémarrer le système d'exploitation pour ajouter ou déplacer un conteneur, le délai de déploiement s'en trouve encore réduit. Et ce n'est pas tout. (Empowering App Development for Developers | Docker, s. d.)
II.
Langage de programmation, Framework et API
1. Le Front-End A. JavaScript JavaScript est un langage de programmation web orienté prototype, contrairement aux autres langages de programmation. Ce paradigme permet, entre autres, de moduler les prototypes à volonté en leur ajoutant des attributs et des méthodes. Il s’agit d’un langage interprété. JavaScript a longtemps été un langage destiné à être téléchargé et exécuté chez le client. Cependant, ces dernières années ont vu la montée de nouvelles API et plateformes telles que NodeJS développé par Google, qui permettent d’utiliser la puissance de JavaScript à la fois chez le client et sur le serveur. Ainsi les développeurs peuvent coder la totalité de leur application dans un seul langage pour permettre une meilleure coordination du client et du serveur. (JavaScript | MDN, s. d.)
B. HTML HTML est un langage de balisage permettant d’écrire le format de données conçu pour représenter les pages web. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). (HTML Tutorial, s. d.) 36
Projet de fin d’études
Année universitaire : 2020/2021
C. CSS Les feuilles de style en cascade, ou en anglais, Cascading StyleSheet (CSS), forment un langage informatique décrivant la manière dont les éléments d’une interface HTML doivent être affichés. Introduit dans les années 1990, CSS est un langage utilisé par tous les navigateurs. C’est le langage standard pour la réalisation d’interfaces web riches. L’utilisation de framework CSS permet, comme dans le cas du framework PHP, d’améliorer la maintenabilité du code, son évolution, et plus généralement le design de l’application, la rendant ainsi plus agréable à utiliser. De plus, la plupart de ces frameworks implémentent des notions comme le design responsif qui permettent à l’application d’être universelle et de s’adapter à tout type d’écran. (CSS Tutorial, s. d.)
D. Bootstrap 4 Bootstrap est un framework front-end gratuit pour le développement web. Il contient plusieurs outils utiles à la réalisation de sites interactifs. Il permet entre autres de concevoir plus facilement un design responsif qui va permettre d’adapter l’affichage de l’application à tout type d’écran. Il fait partie des frameworks les plus populaires. Bootstrap est un framework très récent. Il a été conçu en 2010 par deux développeurs de chez Twitter : Mark Otto et Jacob Thornton. Son but était de diminuer les coûts de maintenances dus aux incohérences entre les différentes bibliothèques existantes. (Bootstrap 4 Get Started, s. d.)
E. JQUERY JQUERY est un Framework JavaScript sous licence libre qui permet de faciliter des fonctionnalités communes de JavaScript. L'utilisation de cette bibliothèque permet de gagner du temps de développement lors de l'interaction sur le code HTML d'une page web. JQUERY possède par la même occasion l'avantage d'être utilisable sur plusieurs navigateurs web (cf. Internet Explorer, Firefox, Chrome, Safari ou Opera). (JQuery Tutorial, s. d.)
F. DataTables Le plugin DataTables de jQuery permet d'interagir facilement avec un tableau HTML. Il gère la personnalisation du style, la pagination, le filtrage des données et le tri sur une ou plusieurs colonnes. (DataTables | Table plug-in for jQuery, s. d.)
G. Font Awesome Font Awesome a été créée par Dave Gandy afin d'être utilisée avec Bootstrap, Elle détient une part de marché de 20% parmi les sites qui utilisent des scripts de polices tiers sur leur plateforme, ce qui le place en deuxième position après Google Fonts. (Font Awesome, s. d.)
37
Projet de fin d’études
Année universitaire : 2020/2021
H. Popper.js Popper.js est une bibliothèque utilisée pour créer des poppers dans des applications Web. Des exemples courants de poppers sont les infobulles et les popovers. (Popper.Js – Create Tooltips and Popovers in Web Applications, s. d.)
I. JSON JSON (JavaScript Object Notation) est un format d'échange de données en texte lisible. Il est utilisé pour représenter des structures de données et des objets simples dans un code qui repose sur un navigateur Web. JSON est parfois également utilisée dans les environnements de programmation, côté serveur et côté poste de travail. A l'origine, JSON est issue du langage de programmation JavaScript. Sur Internet, JavaScript utilise JSON comme substitut à XML pour l'organisation des données. A l'instar de XML, JSON est indépendant des langages, et peut se combiner avec nombre de ces derniers, dont C++, Java, ou Python. (JSON Introduction, s. d.)
J. Leaflet Leaflet :est une bibliothèque JavaScript libre de cartographie en ligne développée par Vladimir Agafonkin de CloudMade et de nombreux contributeurs. Elle est notamment utilisée par le projet de cartographie libre et ouverte OpenStreetMap. • Nouvelle API javascript (juin 2013) • Légère, « mobile friendly » et facile de prise en main Utilisation du format GeoJSON et vecteurs, WMS • Besoin d’HTML, CSS et Javascript+ serveur, base de données. ➢ Leaflet.draw Leaflet.draw ajoute la prise en charge du dessin et de l'édition de vecteurs et de marqueurs superposés sur les cartes Leaflet. Il s'agit d'un plugin complet qui peut ajouter des polylignes, des polygones, des rectangles, des cercles et des marqueurs à une carte, puis modifier ou supprimer ces objets à votre guise. ➢ Leaflet.fullscreen Leaflet.fullscreen est un plugin plein écran HTML5 pour Leaflet. ➢ Leaflet.MousePosition Leaflet.MousePosition est un simple contrôle de position de la souris que vous pouvez déposer dans votre carte de dépliant. Il affiche les coordonnées géographiques du pointeur de la souris lorsqu'il se déplace sur la carte.
38
Projet de fin d’études
Année universitaire : 2020/2021
➢ Leaflet.label Leaflet.label est un plugin pour ajouter des étiquettes aux marqueurs et aux formes sur les cartes alimentées par des dépliants. ➢ leaflet-groupedlayercontrol Contrôle des couches de dépliants avec prise en charge du regroupement des superpositions. Prend également en charge la création de groupes exclusifs (radio au lieu d'une case à cocher). (Leaflet - a JavaScript library for interactive maps, s. d.)
2. Le Back-End A. PHP PHP est un acronyme récursif qui signifie « PHP : Hypertext Processor ». Il s’agit d’un langage de script Open Source très utilisé et spécialement conçu pour le développement web. Il est plus souvent utilisé côté serveur qui va interpréter le code PHP et générer la page HTML en conséquence. Sa syntaxe s’inspire du C, du Java et de Perl. Il est peu typé. PHP permet, entre autres, de collecter des données de formulaires, créer des pages web de manière dynamique ou d’envoyer ou recevoir des cookies. Il permet de programmer de deux manières différentes, à savoir en procédural ou en orienté objet. De plus, il est possible d’utiliser des objets Java comme des objets PHP de manière transparente dans une application PHP. Il supporte un grand nombre de bases de données dont entre autres PostgreSQL. (PHP : Hypertext Preprocessor, s. d.)
B. Laravel Laravel est un framework PHP multi-plateforme permettant de créer des applications web. Il permet à un développeur de tirer parti d’une vaste bibliothèque de fonctionnalités préprogrammées (telles que l’authentification, le routage et la création de modèles HTML). L’accès à cette bibliothèque simplifie la création rapide d’applications web robustes tout en minimisant la quantité de code nécessaire. Laravel offre un environnement de développement très fonctionnel, ainsi que des interfaces de ligne de commande intuitives et expressives. En outre, Laravel utilise la cartographie objet-relationnel (ORM) pour simplifier l’accès et la manipulation des données. Les applications Laravel sont hautement évolutives et leur base de code est facile à maintenir. Les développeurs peuvent également ajouter des fonctionnalités à leurs applications de manière transparente, grâce au système de packaging modulaire de Laravel et à la gestion robuste des dépendances. (Laravel - The PHP Framework For Web Artisans, s. d.) 39
Projet de fin d’études
Année universitaire : 2020/2021
C. SQL SQL est un langage de programmation permettant de stocker, de manipuler et de retrouver ces données. Il est aussi possible d’effectuer des requêtes, de mettre à jour les données, de les réorganiser, ou encore de créer et de modifier le schéma et la structure d’un système de base de données et de contrôler l’accès à ses données. (« SQL - Tout savoir sur le langage de programmation des bases de données », 2020)
D. PL/SQL PL/SQL est un langage procédural (Procedural Language/SQL) qui permet en plus de SQL d'avoir les mécanismes des langages algorithmiques. L'unité de programmation PL/SQL est le bloc. Un bloc contient des déclarations de variables ou de constantes et des instructions (qui peuvent être des commandes SQL). (Guide PL/SQL, s. d.)
III.
Architecture de la solution
Figure 21 : Architecture globale de l’application
La structure de notre l’application décrit la disposition des différents éléments, elle est composée d’un utilisateur ; un serveur local de type docker ; d’une base de données avec le gestionnaire PostgreSQL et l’API cartographique Leaflet pour l’affichage des données dans la carte. 40
Projet de fin d’études
Année universitaire : 2020/2021
Avec laravel qui gérer bien la liaison entre la base de données et le frontend. Laravel récupère les demandes de l’utilisateur pour les transmettre à la base de données et renvoi le résultat à l’utilisateur et les traites (pour génères par exemple un GeoJSON), JavaScript traite ces données pour les affichées dans la carte (Leaflet) et ajoute de l’interactivité dans les pages web.
Conclusion Dans ce chapitre nous avons présenté les outils de travail choisis pour le développement de notre application notamment les environnements matériel et logiciel ainsi que les langages de développement. Enfin nous avons présenté l’architecture adoptée pour la réalisation de l’application. Le chapitre suivant est consacré pour la présentation de l’application où nous allons présenter l’ensemble des résultats obtenus.
41
Projet de fin d’études
Année universitaire : 2020/2021
Chapitre V MISE EN ŒUVRE DE L’APPLICATION
42
Projet de fin d’études
Année universitaire : 2020/2021
Introduction Ce chapitre constitue le dernier volet de ce rapport, il a pour objectif d'exposer le travail achevé. Pour ce faire, on présentera les différentes fonctionnalités de l’application.
I. Page d’accueil
La page d'accueil de l’application est la première page qui apparait aux utilisateurs. Cette page est conçue pour présenter la société. En cliquant sur le bouton en haut à droite « Connecter », ça lui retournera la page d’authentification.
II. Authentification
Figure 22 : Interface d’authentification
43
Projet de fin d’études
Année universitaire : 2020/2021
Pour accéder au système de consultation ou de gestion, une authentification est requise. La figure 23 représente la fenêtre d’authentification. L’application demande à l’utilisateur à travers une page d’authentification de saisir son nom d’utilisateur et son mot de passe. Pour accéder à l’interface complète de l’application.
III.
Page d’accueil après authentification
Figure 23 : Interface d’accueil (user)
Figure 24 : Interface d’accueil (administrateur)
44
Projet de fin d’études
Accédé à la page d’accueil
Année universitaire : 2020/2021
Visualiser tous les éléments du réseau dans une seule carte
Rechercher les PC disponible pour un client Gestion des éléments du réseau
Gestion des utilisateurs Modifier son profil
Se déconnecter
Figure 25 : Interface d’accueil (super administrateur)
IV.
Profil
Cette section est réservée pour permettre aux utilisateurs de l’application de modifier leur information, mot de passe et photo de profil.
Figure 26 : Interface profil.
1. Ouvrir la modale pour changer son avatar. 2. Ouvrir la modale pour mettre ses informations à jour. 3. Ouvrir la modale pour changer son mot de passe.
45
Projet de fin d’études
Année universitaire : 2020/2021
➢ Changement d’avatar.
Figure 27 : Interface profil : changement d’avatar.
En cliquant sur son avatar, ceci ouvrira une modal permettant de changer son avatar. Après avoir cliqué sur « Browse », une fenêtre d’explorateur de Windows s’ouvrira et l’utilisateur pourra naviguer et choisir une autre image pour son profil.
Figure 28 : modale profil : changer d’avatar
Après avoir choisi l’image remplaçante, il aura un aperçu et les détails de l’image choisie. L’utilisateur n’aura qu’à appliquer pour changer l’ancienne image par la nouvelle.
46
Projet de fin d’études
Année universitaire : 2020/2021
➢ Mise à jour des informations du profil.
Figure 29 : modale profil : mise à jour d’information.
➢ Changement du mot de passe. Pour appliquer la mise à jour il faut que l’utilisateur confirme son mot de passe.
Figure 30 : modale profil : mise à jour de mot de passe.
Pour appliquer me changement du mot de passe, il faut que l’utilisateur confirme son ancien mot de passe.
47
Projet de fin d’études
Année universitaire : 2020/2021
V. Gestion des utilisateurs Cette partie de l’application est pour gérer les utilisateurs de l’application. Elle accessible seulement pour le super administrateur.
Figure 31 : interface Dashboard.
1. Ouvrir la modale pour ajouter un nouvel utilisateur. 2. Ouvrir la modale pour mettre à jour un utilisateur. 3. Ouvrir la modale pour supprimer un utilisateur.
➢ Ajout d’un utilisateur.
Figure 32 : modale Dashboard : ajout d’un utilisateur.
Le super administrateur trouvera ici tous les champs qu’il pourra applique au nouvel utilisateur à ajouter.
48
Projet de fin d’études
Année universitaire : 2020/2021
➢ Modification d’un utilisateur.
Figure 33 : modale Dashboard : modification d’un utilisateur.
Ce formulaire serre à modifier un utilisateur.
➢ Suppression d’un utilisateur.
Figure 34 : confirmation Dashboard : suppression d’un utilisateur.
En cliquant sur le bouton de suppression, une confirmation apparaitra afin de confirmer la suppression.
49
Projet de fin d’études
Année universitaire : 2020/2021
VI.
Gestion des éléments du réseau
La gestion regroupe actuellement 6 éléments du réseau (ONU, Tête, PC, Conduite, Regard, Antenne).
A. ONU ➢ Carte.
Contrôleur de Zoom
Contrôleur des fonds de carte
Plein écran Outil de mesure Outil de digitalisation et ajout d’une ONU
Échelle Contrôler la représentation des ONU
Petite carte pour visualiser le territoire à petite échelle
Légende
Figure 35 : interface ONU.
➢ Table.
Effectuer un filtre sur l’affichage des données Supprimer une entité
Choisir le nombre de ligne à afficher par page
Modifier une entité Ouvrir le popup des infos sur l’entité dans la carte Zoomer sur l’entité dans la carte Figure 36 : table ONU.
Naviguer dans les pages de la table
50
Projet de fin d’études
Année universitaire : 2020/2021
➢ Ajout.
Figure 37 : digitalisation ONU.
1. Bouton de digitalisation Donne la main a l’utilisateur de digitaliser la nouvelle zone correspondant a la nouvelle ONU a ajouté. 2. Exemple de digitalisation 3. Bouton « finish » Une fois la digitalisation terminée, il aura à cliquer sur « finish » afin d’ouvrir la modale d’ajout pour ajouter les infos supplémentaires de l’ONU.
Figure 38 : interface ONU.
51
Projet de fin d’études
Année universitaire : 2020/2021
Dans la modale on a un formulaire à remplir et aussi un petit aperçu de l’entité qui vient d’être digitalisée.
Ce message est renvoyé en cas d’ajout réussi.
Figure 39 : message de création avec succès d’une ONU.
Sinon, ce message est renvoyé en cas d’erreur, en soulignant l’élément causant le problème.
Figure 40 : message d’erreur de création d’une ONU.
NB : les messages en cas d’erreur ou de réussite concernant l’ajout seront de même pour les autres éléments du réseau.
Après la création de notre nouvelle ONU on pourra clique dessus pour voir apparaître un popup avec les infos de l’ONU et même la possibilité de la supprimer et de la modifier.
Figure 41 : popup sur ONU.
➢ Modification. L’utilisateur doit choisir une ONU a éditer et le choix d’une ONU peut se faire de la table et aussi de la carte dans le popup. 52
Projet de fin d’études
Année universitaire : 2020/2021
1. Bouton édit Donne la main a l’utilisateur d’éditer la zone correspondant a ONU choisie. 2. Exemple d’édition Les carrés transparents permettent d’ajouter des nœuds et les carrés en blanc pour les nœuds existants déjà et un clique sur eux permet de les supprimer. 3. Bouton « save » Sauvegarde l’édition de la géométrie.
Figure 42 : modale de modification d’une ONU.
Puis avec le bouton « appliquer », ça enregistra tous les changements. En cas d’échec d’édition, par exemple changer l’identifiant de l’ONU qu’on venait de crée de 99 à 02, on aura un message d’erreur comme :
Figure 43 : message d’erreur : édition.
Figure 44 : message de réussite : édition.
NB : les messages en cas d’erreur ou de réussite concernant l’édition, seront de même pour les autres éléments du réseau. 53
Projet de fin d’études
Année universitaire : 2020/2021
➢ Suppression. L’utilisateur doit choisir une ONU à supprimer de la table ou bien de la carte à partir du popup.
Figure 45 : message de confirmation : suppression.
Figure 16 : message de réussite : suppression.
NB : les messages en cas d’erreur ou de réussite concernant la suppression, seront de même pour les autres éléments du réseau.
B. Tete ➢ Table.
Figure 46 : Interface de gestion des têtes
54
Projet de fin d’études
Année universitaire : 2020/2021
L’information géographique d’une tête n’étant pas importante. Car ils se situent forcément dans les ONU. Du coup on aura uniquement les informations sémantiques.
1. Menu déroulant : « changer d’ONU » À partir de ce menu l’utilisateur pourra switcher d’une ONU à une autre.
Figure 47 : menu déroulant : changer d’ONU.
NB : menu déroulant : changer d’ONU, seront de même pour les autres éléments du réseau. 2. Ajouter une tête Ce bouton serre à ouvrir la modale d’ajout d’une tête.
➢ Ajout.
Figure 48 : Modale d’ajout : tête.
➢ Modification.
Figure 49 : modale : édition d’une tête.
Éditer les informations d’une tête, avec la possibilité de la déplace vers une autre ONU à condition qu’une autre tête du même ” id “ n’existant pas dans ce dernier.
55
Projet de fin d’études
Année universitaire : 2020/2021
C. PC ( point de contrôle) ➢ Carte.
Figure 50 : Interface : carte des PC par ONU par saturation.
1. Bouton de digitalisation Ce bouton permet d’ajouter un pc à partir de la carte et puis ouvrira la modale d’ajout d’un pc. 2. Contrôleur d’affichage des couches Ici on a la possibilité de visualiser en bleu les PC projetés ou bien les zones de 35m supposer entre les PC. 3. Contrôleur d’affichage des PC D’après les règles de la sémiologie graphique, l’œil humaine peut distinguer en moyenne 7 variables visuelles. Dans ce sens, on a mis en place les représentations suivantes : -
Par saturation/état (nombre de pairs libres/état, au total 6 variables visuelles) Par demande IR (demande irréalisable, au total 3 variables visuelles)
Les demandes irréalisables apparaissent quand le PC est saturé et n’a aucun pair libre pour un client. 2 demandes IR = clients n’ayant pas trouvé de place. 4. Icône « loupe » Pour zoomer sur l’ensemble des PC.
56
Projet de fin d’études
Année universitaire : 2020/2021
Figure 51 : Interface : carte des PC par ONU par demande irréalisable.
➢ Table.
Figure 52 : Interface : table des PC par ONU.
57
Projet de fin d’études
Année universitaire : 2020/2021
➢ Ajout.
Ce formulaire regroupe les informations à attribuer lors d’un nouvel ajout. Les coordonnées géographiques peuvent être entrées manuellement ou bien à partir de la carte.
Figure 53 : modale d’ajout Pc.
➢ Modification.
L’utilisateur pourra éditer les données sémantiques et la localisation des PC.
Figure 54 : modale d’ajout Pc.
58
Projet de fin d’études
Année universitaire : 2020/2021
D. Conduites ➢ Carte.
Figure 55 : interface : carte des conduites par ONU par saturation.
1. Bouton de digitalisation Ce bouton permet d’ajouter une conduite à partir de la carte et puis ouvrira la modale d’ajout. 2. Couche supplémentaire Visualise les regards, les conduites projetées ou bien les conduites en commun avec l’ONEAD.
➢ Table.
Figure 56 : interface : table des conduites par ONU.
59
Projet de fin d’études
Année universitaire : 2020/2021
➢ Modification.
➢ Ajout.
Figure 57 : modale d’ajout : conduites.
Figure 58 : modale d’édition : conduites.
E. Regard ➢ Carte.
Figure 59 : interface : carte des regards par ONU par saturation.
60
Projet de fin d’études
Année universitaire : 2020/2021
➢ Table.
Figure 60 : interface : table des regards par ONU.
➢ Ajout.
Figure 61 : modale d’ajout : regards.
➢ Modification.
Figure 62 : modale d’édition : regards.
61
Projet de fin d’études
Année universitaire : 2020/2021
F. Antenne relais ➢ Carte.
Figure 63 : interface : carte des antennes relais.
L’utilisateur aura les antennes relais avec leurs zones de couverture dans la carte. A chaque mise à jour de données (ajout, modification, suppression), la zone de couverture sera mise à jour automatiquement. Ceci sera très utile pour panifier une installation future par exemple et de visualiser la couverture du réseau à prévoir.
➢ Table.
Figure 64 : interface : table des antennes relais.
62
Projet de fin d’études
Année universitaire : 2020/2021
➢ Ajout.
➢ Modification.
Figure 65 : modale d’ajout : antennes relais.
VII.
Figure 66 : modale d’édition : antennes relais.
Carte générale
Figure 67 : Interface : carte générale.
63
Projet de fin d’études
Année universitaire : 2020/2021
Cette section de l’application est conçue pour visualiser l’ensemble du réseau (ONU, PC, Conduite, Regard) tous dans une seule carte. L’utilisateur doit procéder comme suivant : ➔ Cliquer sur une ONU : ceci ouvrira un popup avec les infos de l’ONU. ➔ Cliquer sur le bouton de navigation dans le popup : ceci permettre d’importer les données sur les PC, conduites, regards et les mettre à la place de l’ONU.
Figure 68 : carte générale : affichage des PC de l’ONU 02.
Figure 69 : carte générale : affichage des conduites et regards de l’ONU 02.
En se servant du contrôleur des couches, l’utilisateur pour choisir les éléments à visualiser. 64
Projet de fin d’études
Année universitaire : 2020/2021
VIII.
Client
Figure 70 : Interface : carte générale.
Cette partie de l’application, vise à faciliter la recherche d’une place pour un nouveau client (abonnement) en permettant au service de trouver les PC disponible dans un rayon de 35m (n°2) du foyer du client. Pour procéder à la recherche, l’utilisateur est invité à entrer les coordonnées géographiques (n°1 et n°4) du foyer du client et puis cliquer sur l’icône de recherche (n°5). Ensuite l’application retournera les PC trouvé, dans la carte et aussi dans le tableau (n°6) par ordre du plus proche au foyer. Il faut noter que le tableau contient uniquement les PC disponibles, tant dis que la carte visualisera les PC, qu’ils soient disponibles ou pas. Il pourra survoler le curseur sur les entités dans la table pour zoomer et ouvrir le popup (n°3) sur ces derniers dans la carte. Ou même cliquer sur les entités dans la carte pour ouvrir le popup.
Conclusion Dans ce chapitre, nous avons présenté l’application développée, le fruit d’un long processus de développement qui a commencé par l’analyse, conception et modélisation, en passant par le choix de l’environnement et les outils de travail, pour arriver à la phase de réalisation.
65
Projet de fin d’études
Année universitaire : 2020/2021
Conclusion générale et perspective Au cours de ce stage de fin d’études intitulée « Mise en place d’une base de données spatiales et développement d’une application SIG/Web pour la gestion complète du réseau de Djibouti Telecom », on a pu acquérir des nouvelles compétences et des diverses technologies. La solution résultante de notre travail va améliorer la gestion d’une manière significative, de même en facilitant la consultation afin de savoir l’état des composantes du réseau ou bien la saturation en seulement quelque clique. L’application créée répond aux besoins de la société qui ont été identifiés. La gestion des différents éléments du réseau (ONU, Tête, PC, Conduite, Regard, Antenne Relais). En effet, pourront consulter, filtrer, ajouter, modifier et supprimer les données par rapport à son rôle (user, admin, super-admin). L’application fournit une interface facile à utiliser. Ce stage m’a été très utile au niveau de la réalisation d’un projet SIG. Dans notre projet on a commencé par la compréhension profonde des objectifs souhaités par la société, on a ensuite étudié l’existant dans la société. Puis, on a recensé les besoins pour mettre en place une planification exacte et précise. Après tous cela, l’étape de modélisation graphique par le langage UML a pris sa place. Après, on a préparé les données cartographiques de chaque élément du réseau et on a entamé le développement en utilisant les technologies web adéquates. Néanmoins, des perspectives d'améliorations restent envisageables. On vise aussi l’intégration de la fibre optique dans la gestion du réseau et bien d’autres solutions en intégrant une interface pour les clients.
66
Projet de fin d’études
Année universitaire : 2020/2021
Bibliographie EL KHARKI Omar, « Cours : Base de données spatiale » (Année universitaire 2019/2020). Document non publié, Faculté des Sciences et Techniques de Tanger. Anas BOUKHARI, « Cours : Webmapping » (Année universitaire 2019/2020). Document non publié, Faculté des Sciences et Techniques de Tanger. MAATOUK Mustapha, « Cours : Les SIG » (Année universitaire 2019/2020). Document non publié, Faculté des Sciences et Techniques de Tanger. YAZIDI ALAOUI Othman, « Cours : UML » (Année universitaire 2018/2019). Document non publié, Faculté des Sciences et Techniques de Tanger.
Webographie Bootstrap 4 Get Started. (s. d.). Consulté 13 juin 2021, à l’adresse https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp CSS Tutorial. (S. d.). Consulté 13 juin 2021, à l’adresse https://www.w3schools.com/css/ DataTables | Table plug-in for jQuery. (S. d.). Consulté 13 juin 2021, à l’adresse https://datatables.net/ Djibouti Telecom. (S. d.). Consulté 13 Mars 2021, à l’adresse http://www.djiboutitelecom.dj/ Djibouti Telecom International | Telecom Hub for East Africa. (s. d.). Djibouti Telecom. Consulté 5 Mars 2021, à l’adresse https://international.djiboutitelecom.dj/ Draw.io : Un outil pour dessiner des diagrammes en ligne. (S. d.). Consulté 13 juin 2021, à l’adresse https://www.tice-education.fr/tous-les-articles-er-ressources/articles-internet/819-draw-io-un-outilpour-dessiner-des-diagrammes-en-ligne Duplain, R. (s. d.). Guides de recherche · Research guides : Systèmes d’information géographique (SIG) : QGIS. Consulté 13 juin 2021, à l’adresse https://uottawa.libguides.com/c.php?g=715386&p=5132221 Font Awesome. (S. d.). Consulté 05 Avril 2021, à l’adresse https://fontawesome.com/ Guide PL/SQL. (S. d.). Consulté 01 juin 2021, à l’adresse https://sheikyerbouti.developpez.com/pl_sql/ HTML Tutorial. (S. d.). Consulté 13 juin 2021, à l’adresse https://www.w3schools.com/html/ Install Postgres/PostGIS and get started with spatial SQL | Technical Tidbits From Spatial Analysis & Data Science. (S. d.). Consulté 01 juin 2021, à l’adresse https://www.zevross.com/blog/2019/12/04/install-postgres-postgis-and-get-started-with-spatialsql/ JavaScript | MDN. (S. d.). Consulté 13 juin 2021, à l’adresse https://developer.mozilla.org/fr/docs/Web/JavaScript 67
Projet de fin d’études
Année universitaire : 2020/2021
JQuery Tutorial. (S. d.). Consulté 13 juin 2021, à l’adresse https://www.w3schools.com/jquery/ JSON Introduction. (S. d.). Consulté 13 juin 2021, à l’adresse https://www.w3schools.com/js/js_json_intro.asp Laravel—The PHP Framework For Web Artisans. (S. d.). Consulté 06 avril 2021, à l’adresse https://laravel.com/ Leaflet—A JavaScript library for interactive maps. (S. d.). Consulté 15 avril 2021, à l’adresse https://leafletjs.com/ PHP : Hypertext Preprocessor. (s. d.). Consulté 10 avril 2021, à l’adresse https://www.php.net/ Popper.js – Create Tooltips and Popovers in Web Applications. (S. d.). JQuery Plugins. Consulté 13 juin 2021, à l’adresse https://jquery-plugins.net/popper-js-create-tooltips-and-popovers-in-webapplications SQL - Tout savoir sur le langage de programmation des bases de données. (2020, novembre 3). Formation Data Science | DataScientest.com. https://datascientest.com/sql-tout-savoir Visual Studio Code—Code Editing. Redefined. (S. d.). Consulté 03 juin 2021, à l’adresse https://code.visualstudio.com/ Git. (s. d.). Consulté 15 mars 2021, à l’adresse https://git-scm.com/ Empowering App Development for Developers | Docker. (s. d.). Consulté 20 mars 2021, à l’adresse https://www.docker.com/ Microsoft MS Project—Gestion de projets décisionnels—Next Decision. (s. d.). Consulté 4 avril 2021, à l’adresse https://www.next-decision.fr/editeurs/pmo/ms-project Postman | The Collaboration Platform for API Development. (s. d.). Postman. Consulté 19 Avril 2021, à l’adresse https://www.postman.com/ Build software better, together. (s. d.). GitHub. Consulté 7 Avril 2021, à l’adresse https://github.com
68
Projet de fin d’études
Année universitaire : 2020/2021
Annexe La localité des antennes relais plus les informations attributaire de l’année 2018.
Figure 71 : Donnée Excel : antennes relais.
La localité des PC plus les informations sur les têtes et les amorces de l’année 2021.
Figure 72 : Donnée Excel : PC de l’ONU2.
69
Projet de fin d’études
Année universitaire : 2020/2021
Zone respective des ONU de la commune de Ras-dika et Boulaos.
Figure 73 : Donnée Autocad : ONU.
Localité des conduites et regards de l’ONU 2
Figure 74 : Donnée Autocad : Conduites et regards de l’ONU2.
70