DEDICATION

Je tiens c’est avec grande plaisir que je dédie ce modeste travail :

À l’être le plus cher de ma vie, ma mère Mabrouka karrati qui m’a transmis l’amour de
vivre, l’amour de sacrifice et celui de continuer à donner sans limite.

À l’âme de mon père Hedi Mayara.

À mes chères soeurs Aicha, Hedia pour leur affection, compréhension et patience.
À tous mes chers amis spécialement Siwar Iben Ali pour leur appui et leur encouragement,
sans oublier mon binôme Nada Ben Farah, qui m’ont tant soutenu pour effectuer ce travail.

À tous mes professeurs d’enseignement primaire, secondaire et supérieur.

À tous ceux que j’aime, tous ceux qui ont cru en moi et en mes compétences et toute ma
famille pour leur soutien tout au long de mon parcours.

À vous tous,
Je dédie ce modeste travail.
Bochra Mayara

FS-SFAX Page i
 DEDICATION

C’est grâce à Dieu que tout a commencé, et c’est à lui que je rends grâce. Le reste n’est que
dédicace.
À ceux qui ont sacrifié leur vie pour mon aisance et mon confort a ceux que leur présence et
leur support me valent la vie à ceux qui m’ont élevé avec amour et tendresse Je dédie ce
modeste travail.
À mes parents Fathi Benfarah et Naziha Benkhalifa.
À mes chères soeurs Rana, Chahd, Fatma Ezzahra et mon petit frère Mohamed Taha.
À tous mes chers amis sans oublier mon binôme Bochra Mayara, qui m’ont tant motivé et
soutenu pour effectuer ce travail. Merci pour votre amour, encouragement et soutien moral.

Àtous mes professeurs d’enseignement primaire, secondaire et supérieur.

Àtous ceux que j’aime et tous ceux qui ont cru en moi et en mes compétences.
À vous tous,
Je dédie ce modeste travail.
Nada Benfarah

FS-SFAX Page ii
 REMERCIEMENT

C’est avec notre inspiration la plus primordiale et la plus sincère que nous voudrons rendre
mérite à tous ceux qui à leur manière nous ont soutenus durant notre projet de fin d’études. Nous
tenons à manifester l’expression de nos respects les plus distingués à Mr Fahmi Ezzeddine,
gérant de l’entreprise Piximind et Mr Mohamed Elleuch, directeur technique à Piximind pour
son encadrement, ses conseils, son support et pour nous avoir offert l’opportunité d’effectuer ce
stage de fin d’études au sein de son entreprise. Toute l’équipe de Piximind, nous présentons
également de sincères remerciements de nous avoir accueillie et incitée à mener à bien ce
travail. Nous citons en particulier notre encadrant académique Mr Boulbeba Ben Ammar pour
son encadrement, sa supervision, son assistance, ses précieuses remarques et sa rigueur, qui
nous a beaucoup aidé dans la réduction de ce rapport. Ses lectures méthodiques et corrections
avisées n’ont pu qu’améliorer la qualité de ce travail. Nos remerciements s’adressent aussi
à Mr Naoufel Gueddah pour l’intérêt qu’il a porté à ce travail en acceptant de nous faire
l’honneur de présider le jury de notre soutenance. L’expression de notre profonde gratitude
s’adresse également à Mme Marwa Hentati d’avoir acceptée d’être rapporteur de ce projet.
Nous exprimons finalement nos vifs remerciements à tous les enseignants de la Faculté des
Sciences de Sfax pour la formation de qualité qu’ils nous ont prodiguée tout au long de notre
cursus universitaire au sein de cette prestigieuse université.

FS-SFAX Page iii

 TABLE DES MATIÈRES

LISTE DES FIGURES viii

INTRODUCTION GÉNÉRALE ix

I R EVUE DE L ITTÉRATURE 2

1 L ES VILLES INTELLIGENTES 3
1.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 C ADRE DU PROJET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 P RÉSENTATION DE L’ ORGANISME D ’ ACCUEIL . . . . . . . . . . . . . . . . . 5
1.3.1 P IXI M IND Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.2 M ISSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 VALEURS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.3.1 L A TRANSPARENCE ET L’ HONNÊTETÉ . . . . . . . . . . . 6
1.3.3.2 L A QUALITÉ . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.3.3 L A CRÉATIVITÉ . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.3.4 L E PASSION . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 L E C ONCEPT D ’ UNE V ILLE I NTELLIGENTE . . . . . . . . . . . . . . . . . . 6
1.5 P ROBLÉMATIQUE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6 S OLUTION P ROPOSÉE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.1 O BJECTIF DU PROJET . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.2 P ÉRIMÈTRE DU PROJET . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.7 L ES T RAVAUX C ONNEXES . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.8 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

II S MART C ITY 11

2 C ONCEPTION DU S YSTÈME 12

FS-SFAX Page iv
TABLE DES MATIÈRES

2.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 ASPECT FONCTIONNEL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.1 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.2 Les besoins non fonctionnels : . . . . . . . . . . . . . . . . . . . . . . 15
2.3 ARCHITECTURE GÉNÉRALE . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4 DÉFINITION DES CONCEPTS DE BASE DU PROJET . . . . . . . . . . . 16
2.4.1 IoT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4.2 Cloud Computing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.5 MÉTHODOLOGIE DE DÉVELOPPEMENT . . . . . . . . . . . . . . . . . . 19
2.5.1 UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.5.2 Méthodologie de conception RUP . . . . . . . . . . . . . . . . . . . . 20
2.6 ANALYSE ET CONCEPTION . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.6.1 Identification des acteurs et des cas d’utilisation . . . . . . . . . . . . . 20
2.6.1.1 Acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.6.1.2 Cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 21
2.6.1.3 Cas d’utilisation «S’authentifier» . . . . . . . . . . . . . . . 25
2.6.1.4 Cas d’utilisation «Mot de passe oublié» . . . . . . . . . . . 27
2.6.1.5 Cas d’utilisation «S’inscrire» . . . . . . . . . . . . . . . . . 29
2.6.1.6 Cas d’utilisation «Ajouter des réclamations» . . . . . . . . . 31
2.6.1.7 Cas d’utilisation «Modifier profile» . . . . . . . . . . . . . . 33
2.6.1.8 Cas d’utilisation «Ajouter/Supprimer/Modifier les localisations
des poubelles» . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.6.1.9 Cas d’utilisation «Gérer les utilisateurs» . . . . . . . . . . . 38
2.6.1.10 Cas d’utilisation «Ajouter des administrateurs» . . . . . . . 42
2.6.2 Diagrammes d’activités . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.6.2.1 Diagramme d’activité «Application Mobile» . . . . . . . . . 43
2.6.3 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.7 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3 R ÉALISATION DU S YSTÈME 47
3.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2 Etude technologique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2.1 Outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2.1.1 Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . 48
3.2.1.2 Android Studio . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2.1.3 Postman (logiciel) . . . . . . . . . . . . . . . . . . . . . . . 49

FS-SFAX Page v
TABLE DES MATIÈRES

3.2.1.4 Swagger . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.2.1.5 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.2.1.6 Arduino . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.2.2 Technologie du frontend . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.2.2.1 React JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.2.2.2 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.2.2.3 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.2.3 Technologie du backend (NestJS) . . . . . . . . . . . . . . . . . . . . 51
3.2.4 Base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.2.4.1 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.2.4.2 Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.5 Langages de développement . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.5.1 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.5.2 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.5.3 JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.5.4 Langage C . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.6 Librairies Utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.6.1 npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.7 Matériels utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.7.1 Ultrason . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.7.2 Node MCU . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.3 RÉALISATION DE L’APPLICATION . . . . . . . . . . . . . . . . . . . . . 55
3.3.1 Réalisation sur le mobile . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.3.2 Réalisation sur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.3.3 Réalisation sur le mongo . . . . . . . . . . . . . . . . . . . . . . . . . 72
3.3.4 Réalisation sur le swagger . . . . . . . . . . . . . . . . . . . . . . . . 73
3.3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

CONCLUSION GÉNÉRALE 75

BIBLIOGRAPHIE 76

FS-SFAX Page vi
 LISTE DES FIGURES

1.1 Exemple d’une ville intelligente . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.2 Logo de l’organisme d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Les caractéristiques d’une ville intelligente . . . . . . . . . . . . . . . . . . . 9

2.1 Internet des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2 Cloud Computing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.4 Diagramme de séquence «S’authentifier» . . . . . . . . . . . . . . . . . . . . 26
2.5 Diagramme de séquence «Mot de passe oublié» . . . . . . . . . . . . . . . . . 28
2.6 Diagramme de séquence «S’inscrire» . . . . . . . . . . . . . . . . . . . . . . 30
2.7 Diagramme de séquence «Ajouter des réclamations» . . . . . . . . . . . . . . 32
2.8 Diagramme de séquence «Modifier le profile» . . . . . . . . . . . . . . . . . . 34
2.9 Diagramme de séquence «Ajouter des localisations des poubelles» . . . . . . . 36
2.10 Diagramme de séquence «Modifier des localisations des poubelles» . . . . . . 37
2.11 Diagramme de séquence «Supprimer des localisations des poubelles» . . . . . 38
2.12 Diagramme de séquence «Gérer utilisateurs» . . . . . . . . . . . . . . . . . . 41
2.13 Diagramme de séquence «Ajouter des administrateurs» . . . . . . . . . . . . . 43
2.14 Diagramme d’activité «Application mobile» . . . . . . . . . . . . . . . . . . . 44
2.15 Diagramme de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.1 Welcome page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

3.2 Login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.3 Mail page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.4 Register page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.5 Home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.6 Map page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.7 PublicClaims page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.8 PrivateClaims page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
3.9 SaveClaim page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

FS-SFAX Page vii

LISTE DES FIGURES

3.10 Create Claim-mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3.11 Edit profil page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
3.12 LogOut page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3.13 Login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.14 Register page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.15 Claims page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
3.16 Users page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
3.17 Dashboard page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.18 Image de prototype :poubelle intelligente . . . . . . . . . . . . . . . . . . . . 68
3.19 Schéma synoptique de la poubelle intelligente . . . . . . . . . . . . . . . . . . 69
3.20 Add admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
3.21 Edit Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
3.22 Send Mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
3.23 Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
3.24 Users() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
3.25 Claims . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
3.26 Swagger(1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.27 Swagger(2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.28 Login swagger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

FS-SFAX Page viii

 INTRODUCTION GÉNÉRALE

Introduction

Avec l’évolution du temps, l’être humain devient incapable d’effectuer certaines tâches,
pouvant avoir l’air simple avec l’utilisation de la technologie. En effet, la technologie a été
considérée, à divers stades de la civilisation, comme menant au progrès futur. Au cours des
dernières décennies, le rythme des changements technologiques devient plus rapide qu’à tout
autre moment de l’histoire. Ces changements ont reflété même nos villes en nous laissant parler
maintenant des villes intelligentes avec l’évolution des objets connectés.

La ville intelligente est un nouveau concept de développement urbain où les appareils

peuvent être automatiquement contrôlés à distance de n’importe où avec une connexion Internet
à l’aide d’un smart-phone ou d’une tablette. Il s’agit d’améliorer la qualité de vie des citadins en
rendant la ville plus adaptative et efficace, à l’aide de nouvelles technologies qui s’appuient sur
un écosystème d’objets et de services. Le périmètre couvrant ce nouveau mode de gestion des
villes inclut notamment : infrastructures publiques (bâtiments, mobiliers urbains, domotique,
etc.), réseaux (eau, électricité, gaz, telecom) ; transports (transports publics, route,etc).

Dans ce cadre et en vue de l’obtention du diplôme de licence en ingénierie des systèmes

Informatiques (Systèmes Embarqués et Internet des Objets (IoT)), nous étions chargés durant
cette période de stage, au sein de la société Piximind, de réaliser une application web/mobile.
Une telle application permet à l’utilisateur de gérer et de suivre une ville en temps réel.

Le présent document expose en détail l’évolution du projet s’étalant sur trois chapitres
définis comme suit.

FS-SFAX Page ix
INTRODUCTION GÉNÉRALE

Le premier chapitre, présentation du concept d’une ville intelligente, nous permet de situer
le projet dans son contexte général à travers une présentation de l’organisme d’accueil, notre
problématique et notre solution proposée, ainsi que les travaux connexes.

Dans le second chapitre, nous passerons à l’analyse et la conception, contient la conception

générale et détaillée du système.

Le dernier chapitre, intitulé Réalisation du Système, est consacré à la présentation des

environnements de développement, les technologies et les langages utilisées. Nous détaillons
ensuite quelques interfaces réalisées dans l’application web et l’application mobile.

Ce rapport se clôture par une conclusion générale et quelques perspectives pouvant être vues
comme une extension à ce travail.

FS-SFAX Page 1
 Première partie

R EVUE DE L ITTÉRATURE

FS-SFAX Page 2
Chapitre

1
L ES VILLES INTELLIGENTES

Sommaire
1.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Cadre du projet . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Présentation de l’organisme d’accueil . . . . . . . . . . 5
1.3.1 PixiMind Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.2 Mission . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 Valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 Le Concept d’une Ville Intelligente . . . . . . . . . . . . 6
1.5 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6 Solution Proposée . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.1 Objectif du projet . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.2 Périmètre du projet . . . . . . . . . . . . . . . . . . . . . . 8
1.7 Les Travaux Connexes . . . . . . . . . . . . . . . . . . . . . . 8
1.8 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

FS-SFAX Page 3
LES VILLES INTELLIGENTES

1.1 INTRODUCTION

La présentation du cahier du charge d’un projet constitue une étape préliminaire pour la
réalisation correcte d’une application. En effet, ce cahier permet d’analyser, d’évaluer et de
critiquer l’existant afin de produire des solutions plus efficaces.

Dans ce chapitre, nous présenterons, tout d’abord, le cadre du projet et la société accueillante.
Ensuite, le concept de notre projet, notre problématique et notre solution proposée. Par ailleurs,
nous exposerons les travaux connexes qui permettent de décortiquer les fonctionnalités des
systèmes existants et leurs limites.

F IGURE 1.1 – Exemple d’une ville intelligente

1.2 C ADRE DU PROJET

Notre projet, réalisé au sein de la société Piximind, s’englobe dans le cadre d’un stage de
fin d’études au sein de la Faculté des Sciences de Sfax pour l’obtention du diplôme de licence
en ingénierie des systèmes informatiques spécialité Systèmes Embarqués et Internet des Objets
(IoT).

FS-SFAX Page 4
LES VILLES INTELLIGENTES

1.3 P RÉSENTATION DE L’ ORGANISME D ’ ACCUEIL

1.3.1 P IXI M IND Logo

La figure 1.2 représente le logo de l’organisme d’accueil.

F IGURE 1.2 – Logo de l’organisme d’accueil

1.3.2 M ISSION

PixiMind est un éditeur d’applications mobiles et web (essentiellement B to B), fondé en

Tunisie et dédié à l’offshore depuis 2013.

Une équipe de Geeks, de plus de 30 collaborateurs maitrisant les technologies de pointe les
plus sollicitées sur le marché, engagée à vous apporter un accompagnement sur mesure, de bout
en bout, pour réussir vos projets digitaux via des solutions personnalisées fluides et riches en
fonctionnalités au meilleur coût.

A travers les années, PixiMind a su développer une collaboration avec des partenaires
en Europe, Belgique et Moyen-Orient et a su fidéliser ses partenaires, grâce à des process
d’amélioration contenue, intégrant une approche complète d’orchestration : démarche qualité
reconnue, méthode Agile Scrum, et pratique DevOps.

Des formules forfaitaires ou en régie sont à disposition pour répondre adéquatement à votre
besoin.

FS-SFAX Page 5
LES VILLES INTELLIGENTES

Ils adoptent une méthodologie de travail dans le cycle de vie de développement et de test
pour atteindre le besoin de ses clients en gardant une bonne qualité de livraison et du code
source.

1.3.3 VALEURS

1.3.3.1 L A TRANSPARENCE ET L’ HONNÊTETÉ

Tout en respectant un code d’éthique, nous sommes constamment ouverts, honnêtes et

ingénieux.

1.3.3.2 L A QUALITÉ

Nous faisons de notre mieux, au mieux que nous pouvons.

1.3.3.3 L A CRÉATIVITÉ

Les idées naissent, se concrétisent, et renaissent de leur cendre.

1.3.3.4 L E PASSION

Unis par le cœur et par l’esprit, nous sommes là pour se motiver, s’inspirer et engager les
autres. Nous aspirons à ce que Piximind devienne une.

1.4 L E C ONCEPT D ’ UNE V ILLE I NTELLIGENTE

Une Smart City, c’est d’abord une ville plus efficace, avec un fonctionnement des transports
urbains amélioré, une offre diversifiée...
Il va de soi qu’une ville plus efficace est moins gourmande en énergie, lutte contre les gaspillages,
valorise ses ressources naturelles, etc. Enfin, se développe derrière l’idée de Smart City celle
d’une autre expérience urbaine, d’une nouvelle qualité de vie en ville. Pour beaucoup, une Smart
City permet de repenser l’urbanité.

FS-SFAX Page 6
LES VILLES INTELLIGENTES

1.5 P ROBLÉMATIQUE

Le concept de « Smart City » ou « Ville Intelligente » fait référence à une nouvelle façon de
voir la ville, via l’intégration de nouveaux services basés sur les technologies de l’information,
de la communication et plus globalement du numérique dans le quotidien des citoyens. Ces
nouveaux services permettent de transformer la relation entre la collectivité et l’usager ou
l’entreprise et incitent également au développement de l’éco-citoyenneté. In fine, ce sont l’ensemble
des services urbains qui sont améliorés. Ces nouveaux services sont basés sur des technologies
et concepts tels que l’Internet des Objets ( IoT ) que les villes et collectivités doivent appréhender
pour mener à bien ces objectifs d’amélioration de la vie citoyenne.

1.6 S OLUTION P ROPOSÉE

En considérant les inconvénients des villes intelligentes existantes, la société Piximind a

proposé de concevoir son propre système d’une ville intelligente. Dans ce cadre, nous sommes
appelés à réaliser ce système contrôlé par une application web/mobile. Il permet aux utilisateurs
de mieux gérer leurs besoins.

1.6.1 O BJECTIF DU PROJET

Partant de ces défis généraux, nos villes sont confrontées à de nombreux enjeux spécifiques
en matière de :

ENVIRONNEMENT

— Atteinte des objectifs fixés afin de limiter le réchauffement climatique.

— Catastrophes climatiques et autres changements dus au réchauffement climatique.

— Nécessité de produire de l’énergie renouvelable afin de pallier l’épuisement des énergies

fossiles.

— Gestion des déchets et des ressources naturelles.

FS-SFAX Page 7
LES VILLES INTELLIGENTES

POPULATION

— Passer les réclamations sur la consommation d’énergie, santé publique, environnement.

— Nécessité de pallier au vieillissement de la population, de préférence en favorisant les

relations inter-générationnelles. Immigration et inter-culturalité.

GOUVERNANCE ET CITOYENNETÉ

— Demande de transparence accrue de la part des citoyens.

— Besoin d’inclure le citoyen dans le processus de développement des villes.

— Développement des relations inter-relationnelles et inclusives au sein d’une population

vieillissante et multiculturelle !

— Adaptation numérique et digitale du système administratif.

— Intégration des nouvelles technologies –IoT (Internet of Things) – dans la ville.

— Soutien pour la création d’écosystèmes régionaux incluant les différents acteurs d’une
ville gouvernement, universités, entreprises et citoyens.

1.6.2 P ÉRIMÈTRE DU PROJET

Sur la base de la définition présentée dans la section précédente et en reprenant les différentes
catégories de challenges auxquels les villes font face, il est intéressant d’introduire les six
dimensions suivantes qui, à notre sens, englobent l’entièreté des aspects d’une Smart City
présentées par la figure 1.3.

1.7 L ES T RAVAUX C ONNEXES

Le concept de smart city a commencé à se concrétiser en Corée du Sud au début des années
2000 avec le projet U-Korea. La ville de Sondgo propose un maillage wifi total et de grande
qualité, une présence accrue de vidéo-surveillance mais également des systèmes innovants de
gestion de l’énergie.Aujourd’hui, le concept de smart city a le vent en poupe. Il est utilisé, «
mis en place » ou revendiqué par de nombreuses villes de l’Hexagone, d’Europe et du monde

FS-SFAX Page 8
LES VILLES INTELLIGENTES

F IGURE 1.3 – Les caractéristiques d’une ville intelligente

et recouvre un éventail très large de visions. Pour mieux appréhender le sujet, voici quelques
exemples de Smart City déjà existante :
L’exemple de Singapour :

Le point le plus remarquable concernant Singapour, c’est son programme global de “smart
nation” lancé en 2014. Il a vocation à doter la ville d’une intelligence connectée fiable et
généralisée, un pari jusqu’à présent réussi notamment du fait d’investissements colossaux : plus
de 2,4 milliards de dollars investis par le gouvernement en 2017, un milliard supplémentaire
injecté en 2019. Des capteurs sont installés dans toute la ville et disposés sur du mobilier urbain
(poubelles, routes, lampadaires. . .) de sorte d’analyser les comportements urbains, de fluidifier
le trafic et d’optimiser les déplacements. Dans la ville, tout est connecté : les services publics,
l’habitat . . . même les secteurs de la santé et de la finance sont concernés.

L’exemple du France :

Parmi les 25 villes intelligentes recensées en France, voici 2 exemples de villes faisant
figure d’exemple en France dans ce domaine, aux côtés de Nantes, Dijon et Montpellier : Lyon
et Bordeaux.

FS-SFAX Page 9
LES VILLES INTELLIGENTES

Lyon et ses 340 millions d’euros investis dans des projets de ville intelligente.Lyon est La
ville pionnière dans le domaine en France. Elle propose des véhicules électriques en auto-partage,
elle est en train de tester des navettes autonomes pour le transport collectif des usagers, mais
elle a surtout inauguré en 2015, l’éco-quartier intelligent de la Confluence, où se dresse un
ensemble de 3 bâtiments baptisé Hiraki et qui ont la particularité de produire plus d’énergie
qu’il n’en consomme.

Bordeaux et son éco-quartier test du stade Matmut-Atlantique.La ville de Bordeaux réalise

de nombreux tests de Smart City dans le quartier du stade Matmut-Atlantique pour, dans le
futur, déployer ces méthodes dans l’ensemble de la métropole.

Comme nous pouvons le voir dans ces exemples, le développement de ville intelligente se
fait par étape et par test, afin d’optimiser au maximum sa gestion et son déploiement.

1.8 CONCLUSION

Ce chapitre présente une étude préliminaire du projet où nous avons tout d’abord exposé le
cadre de notre projet avec une présentation de notre organisme d’accueil.Puis nous avons étudié
le concept d’une ville intelligente en présentant notre problématique et notre solution proposée.
Ensuite, Nous avons ainsi clôturé ce chapitre par étudier quelques travaux existants. Dans le
chapitre suivant, nous allons entamer la phase de conception de notre application.

FS-SFAX Page 10
 Deuxième partie

S MART C ITY

FS-SFAX Page 11
Chapitre

2
C ONCEPTION DU S YSTÈME
S MART C ITY

Sommaire
2.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 ASPECT FONCTIONNEL . . . . . . . . . . . . . . . . . . . . . 13
2.2.1 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . 13
2.2.2 Les besoins non fonctionnels : . . . . . . . . . . . . . . . . . . . 15
2.3 ARCHITECTURE GÉNÉRALE . . . . . . . . . . . . . . . . . 16
2.4 DÉFINITION DES CONCEPTS DE BASE DU PROJET . 16
2.4.1 IoT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4.2 Cloud Computing . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.5 MÉTHODOLOGIE DE DÉVELOPPEMENT . . . . . . . . . 19
2.5.1 UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.5.2 Méthodologie de conception RUP . . . . . . . . . . . . . . . . . 20
2.6 ANALYSE ET CONCEPTION . . . . . . . . . . . . . . . . . . 20
2.6.1 Identification des acteurs et des cas d’utilisation . . . . . . . . . 20
2.6.2 Diagrammes d’activités . . . . . . . . . . . . . . . . . . . . . . 43
2.6.3 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . 44
2.7 CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

FS-SFAX Page 12
CONCEPTION DU SYSTÈME

2.1 INTRODUCTION

Dans ce chapitre, nous présenterons, tout d’abord, l’aspect fonctionnel et l’architecture

générale de notre projet. Puis, nous définirons les concepts de base qui constituent l’environnement
du projet. Nous avons ainsi clôturé ce chapitre par la définition de choix du langage de modélisation
et de la méthodologie de conception utilisée en détaillons cette conception par l’identification
des acteurs et des cas d’utilisation et la présentation des diagrammes de séquences, d’activités
et de classes.

2.2 ASPECT FONCTIONNEL

2.2.1 Les besoins fonctionnels

Les besoins fonctionnels expriment un ensemble d’action dont le système doit les prendre
en considération afin de répondre à une demande. Nos besoins dans le projet réalisé peuvent
être divisés en trois grandes parties :

— Coté serveur, nous avons proposé la création des API (interface de programmation d’application).

— Coté frontale ou client, nous proposons des interfaces graphiques.

— Coté embarquée, nous avons besoin d’objet connecté afin de contrôler l’état du poubelle
(pleine, vide, utilisée).

a) Besoins fonctionnels au niveau du Serveur :

Ces exigences expriment les différentes fonctionnalités standard qui doivent être fournies
aux développeurs front-end pour répondre aux besoins de sécurité, d’accès aux bases de données
d’applications et de traitement des données :

o Développer des API REST pour gérer l’authentification : S’inscrire / Connexion / Déconnexion
/ Jeton de connexion à durée limite / Réinitialisation du mot de passe.

FS-SFAX Page 13
CONCEPTION DU SYSTÈME

o Développer des services pour la sécurité des données sensibles : hachage / cryptage des
mots de passe.

o Développer des API REST pour la gestion des utilisateurs et leurs rôles.

o Développer des services pour la gestion des réclamations.

o Développer des API REST pour la récupération des données.

b) Besoins fonctionnels au niveau du frontal :

Ces exigences expriment différentes fonctions standard fournies aux utilisateurs d’application
mobile et web. On peut les résumer comme suit :

* Développer le module d’authentification :

o Développer les interfaces d’inscription et connexion.

o Développer la logique de Déconnexion.

o Développer l’interface et la logique nécessaire pour la page réinitialisation le mot de passe.

Application mobile :

o Développer une page d’accueil qui contient les actualités, la météo et tous les modules de
notre ville (poubelle, transport, ...).

o Développer les pages des réclamations publiques et privées.

o Développer une page qui contient une carte pour consulter les localisations des poubelles.

o Développer une page «Add Claim» pour ajouter votre réclamations.

Application web :

o Développer l’interface de la page «Claims» dans laquelle l’administrateur peut consulter

les différentes réclamations avec leurs créateurs.

o Développer une page «Users» qui contient les détailles du chaque utilisateur avec leurs
états (active ou inactive).

FS-SFAX Page 14
CONCEPTION DU SYSTÈME

o Développer une page « tableau de bord » dans le quelle on peut consulter les localisations
des poubelles, état de la poubelle à l’aide de «piechart», le pourcentage des utilisateurs actives
et inactives, les nombres des utilisateurs, réclamations et les poubelles.

c) Besoins fonctionnels au niveau du IoT :

o Contrôler l’état de la poubelle (pleine, vide, utilisée) à l’aide d’ultrason en temps réel.

2.2.2 Les besoins non fonctionnels :

Afin d’assurer le bon fonctionnement de l’application et de garantir la satisfaction de l’utilisateur,

des contraintes doivent être prises en compte tout au long du développement du projet.

Ergonomie et convivialité :

L’application doit se caractériser par des interfaces claires, simples et conviviales afin de
faciliter l’exploitation des services de l’application.

Sécurité de l’application :

L’application devra être hautement sécurisée, car les informations contenues dans le système
ne devront pas être accessibles par tout le monde.

Fiabilité :

L’application doit toujours être en mesure de fonctionner correctement.

Performance :

L’application doit être performante c’est-à-dire que le système réagit dans un délai précis
quel que soit l’action de l’utilisateur.

Réutilisabilité :

L’application doit être réutilisable en tout ou en une partie dans des nouvelles applications.

FS-SFAX Page 15
CONCEPTION DU SYSTÈME

2.3 ARCHITECTURE GÉNÉRALE

L’architecture d’une application est la fondation d’un système. Car une bonne architecture
dépend entièrement du fait qu’un système soit évolutif, extensible et maintenable. Dans notre
cas, notre architecture présenté dans la figure montre comment notre système fonctionne.Chaque
utilisateur authentifié à partir de l’application mobile peut ajouter des réclamations s’il y a un
problème dans le cité lié à n’importe quel domaine (Gouvernance, Environnement, Mobilité,
peuple...) ou consulter les réclamations des autres en temps réel aussi que toutes les actualités
et tous les localisations des poubelles de la cité. Ces réclamations vont être envoyés en temps
réel aux institutions concernées (la police ou la municipalité ou la protection civile.. etc).

D’autre part ces institutions peuvent consulter ces réclamations en temps réel à travers
l’application web et aussi peuvent bloquer/débloquer n’importe quel utilisateur de l’application
mobile si les réclamations qu’il envoie toujours sont fausses. Aussi ils peuvent ajoutés, modifiés
et supprimés les localisations de poubelles de cette cité et suivent leurs état en temps réel
(pleines, vides, en utilisation) à l’aide de capteur ultrason et carte Node MCU en utilisant la
technologie Internet des Objets (IoT). Toutes les commandes des utilisateurs se lancent à partir
des interfaces des applications web et mobile. Chaque commande s’envoie à la base des données
en temps réel. Donc, la base de données joue le rôle d’un intermédiaire entre les applications
web et mobile.

2.4 DÉFINITION DES CONCEPTS DE BASE DU PROJET

Dans cette section, nous définissons quelques notions de base concernant le concept d’IoT,
Cloud Computing.

2.4.1 IoT

IoT signifie « Internet of Things » ou en français « Internet des objets ». Il permet d’accéder
et de contrôler les équipements et les appareils utilisables au quotidien via Internet. Selon

FS-SFAX Page 16
CONCEPTION DU SYSTÈME

l’Union Internationale des Télécommunications (UIT), D’après [1], l’Internet of Things est
« une infrastructure mondiale pour la société de l’information, qui permet de disposer de
services évolués en interconnectant des objets (physiques ou virtuels) grâce aux technologies
de l’information et de la communication interopérables existantes ou en évolution ». L’IoT
peut se définir aussi comme étant «un réseau qui relie et combine les objets avec l’Internet,
en suivant les protocoles qui assurent leur communication et leur échange d’informations à
travers une variété de dispositifs». Autrement, l’IoT est un système avancé d’automatisation et
d’analyse qui traite de l’intelligence artificielle, des capteurs, des réseaux, de l’électronique, de
la messagerie cloud, etc. Le système créé par l’IoT offre une transparence, un contrôle et des
performances. La figure 2.1 représente les avantages de l’internet des objets.

F IGURE 2.1 – Internet des objets

2.4.2 Cloud Computing

De nos jours, de plus en plus d’entreprises ont recours à la technologie du cloud computing
afin de se décharger des informations stockées sur leurs postes de travail et de la complexité de
l’infrastructure matérielle. Ce nouveau concept informatique consiste à proposer les services à
la demande accessibles à n’importe quel ordinateur avec accès internet. Il se base sur le principe
de centralisation du stockage, des traitements et de la bande passante en utilisant des serveurs
distants. De ce fait, les entreprises n’ont plus besoin de serveurs propres, mais elles confient
cette ressource à une entreprise qui leur garantit une puissance de calcul et de stockage à la

FS-SFAX Page 17
CONCEPTION DU SYSTÈME

demande. Nous distinguons trois formes de Cloud Computing : les clouds privés, les clouds
publics et les clouds hybrides. Chacun de ces types englobe trois classes de services [2] :

— Software as a Service (SaaS) : c’est un modèle qui met à la disposition des utilisateurs des
solutions exposées sous forme de services disponibles sur Internet à travers une interface
homme-machine (navigateur, Smartphone).

— Plateforme as a Service (PaaS) : il propose à l’utilisateur, en plus d’un service d’utilisation

de logiciel à distance, d’avoir accès à une véritable plate-forme de développement, équipée
d’un langage de programmation, d’outils de développements, de modules. L’utilisateur
bénéficie donc d’un environnement de développement managé, hébergé, maintenu par un
prestataire basé sur une infrastructure externe à son entreprise. Il aura donc la possibilité
de développer des outils uniques pour son activité.

— Infrastructure as a Service ( IaaS ) : le service de plus bas niveau qui consiste à offrir un
accès à un parc informatique virtualisé, telsque des machines virtuelles sur lesquelles le
consommateur peut installer un système d’exploitation et des applications.
Le consommateur est ainsi dispensé du coût d’achat de matériel informatique.

Dans le cadre de notre projet, nous avons eu l’occasion de découvrir le Cloud privé où nous
avons hébergé notre application CloudERP comme étant un SaaS. En effet, le Cloud privé est un
environnement de Cloud Computing propriétaire qui fournit des services hébergés à un nombre
limité de personnes. Son avantage majeur est qu’il est plus sécurisé et assure une protection des
données puisqu’il est destiné à un nombre des entités bien identifiées. La figure 2.2 représente
les différentes formes ainsi que les services.

FS-SFAX Page 18
CONCEPTION DU SYSTÈME

F IGURE 2.2 – Cloud Computing

2.5 MÉTHODOLOGIE DE DÉVELOPPEMENT

Nous avons choisi UML2 comme langage de modélisation et RUP comme méthodologie de
développement pour plusieurs raisons.

2.5.1 UML

UML “Unified Modeling Language” [3] est un langage de modélisation standardisé par
l’OMG (Object Management Group) en 1997. Le choix de l’UML n’était pas arbitraire.Il est
justifié par le fait qu’il est devenu le standard en termes de modélisation objet. Par ailleurs, il
est indépendant du langage de programmation et facilite la compréhension de représentations
abstraites complexes.

Nous utiliserons le logiciel StarUML [4] comme un outil d’analyse et de conception UML
pour son utilité simple et facile, son interface intuitive et conviviale et pour sa puissance. Ce
logiciel couvre toutes les fonctionnalités nécessaires pour notre conception. Il supporte l’UML2.

FS-SFAX Page 19
CONCEPTION DU SYSTÈME

2.5.2 Méthodologie de conception RUP

Le choix du processus unifié (RUP, eng.Rational Unified Process) [5] est le résultat d’une
contrainte majeure qui est la complexité et le volume important des fonctionnalités du système
à mettre en place. Donc, un processus piloté par les cas d’utilisation sera le bon choix. RUP est
un processus de développement logiciel utilisé conjointement avec UML et défini par Rational
Software (IBM). Ce processus est :

— Itératif et incrémental : Le projet est décomposé en plusieurs itérations de courte durée.

Chaque itération prend en compte un certain nombre de cas d’utilisation et donne lieu à
un incrément et produit une nouvelle version exécutable

— Guidé par les risques : Les risques majeurs du projet sont traités en priorité.

— Centré sur l’architecture : RUP vise la conception d’une architecture stable du système
dès les premiers incréments.

— Piloté par les cas d’utilisation : Le développement d’un logiciel doit être centré sur
l’utilisateur et ses besoins. Les cas d’utilisation permettent d’exprimer ces besoins.

2.6 ANALYSE ET CONCEPTION

Dans cette section, nous présentons les cas d’utilisation du projet et nous détaillons quelques
cas.

2.6.1 Identification des acteurs et des cas d’utilisation

2.6.1.1 Acteurs

a) Utilisateur simple

Cet acteur est l’un des habitants de la ville. Il a l’accès aux modules suivants :

— S’authentifier.

FS-SFAX Page 20
CONCEPTION DU SYSTÈME

— Ajouter des réclamations.

— Modifier profile.

— Réinitialiser le mot de passe.

— Consulter les réclamations publiques et privés.

— Consulter les localisations des poubelles.

b) Administrateur de l’application

Cet acteur est l’un des administrateurs des établissements de la ville. Il a l’accès aux mêmes
fonctionnalités qu’un utilisateur simple. De plus, il est privilégié par les modules suivants :

— Gérer les utilisateurs de l’application mobile.

— Ajouter des administrateurs.

— Consulter les réclamations ajoutées.

— Ajouter/modifier/supprimer les localisations des poubelles.

— Consulter l’état des poubelles en temps réel.

2.6.1.2 Cas d’utilisation

La figure 2.3 représente le diagramme des cas d’utilisation qui regroupe les différents modules
de notre application mobile et web. Chaque cas d’utilisation est détaillé dans le tableau 2.1.

FS-SFAX Page 21
CONCEPTION DU SYSTÈME

F IGURE 2.3 – Diagramme de cas d’utilisation

FS-SFAX Page 22
CONCEPTION DU SYSTÈME

Cas d’utilisation Détails Accessible via

S’authentifier Ce cas d’utilisation Mobile et Web

autorise l’utilisateur à se
connecter et à accéder
aux différentes
fonctionnalités du
système.

Modifier le profil Ce cas d’utilisation Mobile et Web

permet à l’utilisateur de :
- Mettre à jour les
données.

Consulter les Ce cas d’utilisation Mobile

réclamations permet à l’utilisateur de :
- Voir les réclamations
publiques et privées.

Ajouter des réclamations Ce cas d’utilisation Mobile

permet à l’utilisateur de :
- Créer nouvelle
réclamation .

Consulter les Ce cas d’utilisation Mobile

localisations des permet à l’utilisateur de :
poubelles - suivre les localisations
des poubelles .

FS-SFAX Page 23
CONCEPTION DU SYSTÈME

Consulter l’état des Ce cas d’utilisation Web

poubelles en temps réel permet à l’administrateur
de consulter l’état des
poubelles (pleines, vides,
en utilisation)en temps
réel.

Consulter les Ce cas d’utilisation Web

réclamations permet à l’administrateur
de : - Voir les
réclamations publiques et
privées envoyés par
l’application mobile.
-Écrire un commentaire
pour chaque réclamation

Gérer les utilisateurs de Ce cas d’utilisation Web

l’application mobile permet à l’administrateur
de bloquer ou débloquer
l’utilisateur de
l’application mobile.

Ajouter des Ce cas d’utilisation Web

administrateurs permet à l’administrateur
d’ajouter des
administrateurs.

Ajouter/modifier/supprimer Ce cas d’utilisation Web

les localisations des permet à l’administrateur
poubelles d’ajouter/modifier/supprimer
les localisations des
poubelles.
TABLE 2.1 : Description détaillée des cas d’utilisation

FS-SFAX Page 24
CONCEPTION DU SYSTÈME

2.6.1.3 Cas d’utilisation «S’authentifier»

Ce cas d’utilisation permet à un utilisateur de s’authentifier

Description textuelle
au système afin d’accéder à ses différentes fonctionnalités.

Acteurs Utilisateur simple ou administrateur.

Pré condition L’utilisateur ou l’administrateur a déjà un compte.

1. L’utilisateur saisit ses paramètres de connexion (Login et

Scénario nominal
mot de passe).
2. Le système décrypte le mot de passe.
3. Le système vérifie les informations saisies.
4. L’utilisateur ou l’administrateur accède au système.

5. Le mot de passe ou le login est invalide. L’enchaînement

Scénario alternatif
5 démarre au point 3 du scénario nominal.
6. Le système indique à l’utilisateur ou l’administrateur que
le mot de passe ou le login est invalide.
Diagramme de séquence :

La figure 2.4 représente le diagramme de séquence qui décrit le cas d’utilisation «S’authentifier».

FS-SFAX Page 25
CONCEPTION DU SYSTÈME

F IGURE 2.4 – Diagramme de séquence «S’authentifier»

FS-SFAX Page 26
CONCEPTION DU SYSTÈME

2.6.1.4 Cas d’utilisation «Mot de passe oublié»

Ce cas d’utilisation permet à un utilisateur de modifier son

Description textuelle
mot de passe.

Acteurs Utilisateur simple ou administrateur.

Pré condition L’utilisateur ou l’administrateur a déjà un compte.

1. L’utilisateur saisit ses paramètres de connexion (Login et

Scénario nominal
mot de passe).
2. Le système indique à l’utilisateur ou l’administrateur que
le mot de passe ou le login est invalide.
3. l’utilisateur ou l’administrateur choisit de récupérer son
mot de passe.
4. Le système redirige l’utilisateur ou l’administrateur vers
une page de récupération de mot de passe.
5. l’utilisateur ou l’administrateur saisit son adresse e-mail.
6. Le système vérifie l’email.
7. Le système envoie un email de récupération de mot de
passe.
8. L’utilisateur ou l’administrateur saisit les informations
suivants : émail et nouveau mot de passe.
9. Navigation vers Page connexion.
Diagramme de séquence : La figure 2.5 représente le diagramme de séquence «Mot de passe
oublié».

FS-SFAX Page 27
CONCEPTION DU SYSTÈME

F IGURE 2.5 – Diagramme de séquence «Mot de passe oublié»

FS-SFAX Page 28
CONCEPTION DU SYSTÈME

2.6.1.5 Cas d’utilisation «S’inscrire»

Ce cas d’utilisation permet à un utilisateur ou un

Description textuelle administrateur de créer un compte

Acteurs Utilisateur simple ou administrateur.

L’utilisateur ou l’administrateur est déjà connecté au

Pré condition
système.

1. L’utilisateur ou l’administrateur remplit la formulaire

Scénario nominal
d’inscrire.
2. Le système vérifie les champs.
3. L’utilisateur ou l’administrateur a été crée.
4. Le système ajoute l’utilisateur ou l’administrateur.

5. Les champs sont invalides ou l’utilisateur ou

Scénario alternatif l’administrateur annule l’inscription. L’enchaînement
5 démarre au point 3 du scénario nominal.
6. Les champs sont invalides ou l’utilisateur
l’administrateur annule l’ajout : Scénario nominal
reprend du point 1 et le système indique à l’utilisateur ou
l’administrateur qu’il y a un échec d’ajout.
Diagramme de séquence : La figure 2.6 représente le diagramme de séquence qui décrit le
cas d’utilisation «S’inscrire».

FS-SFAX Page 29
CONCEPTION DU SYSTÈME

F IGURE 2.6 – Diagramme de séquence «S’inscrire»

FS-SFAX Page 30
CONCEPTION DU SYSTÈME

2.6.1.6 Cas d’utilisation «Ajouter des réclamations»

Ce cas d’utilisation permet à un utilisateur d’ajouter les

Description textuelle réclamations.

Acteurs L’utilisateur

Pré condition * L’utilisateur doit être authentifié.

* L’utilisateur est déjà connecté au système

Scénario nominal 1. L’utilisateur demande l’ajout d’une réclamation.

2. Le système demande la confirmation de l’ajout.
3. L’utilisateur confirme l’ajout.
4. Le système ajoute la réclamation.

5. Les champs sont invalides ou l’utilisateur annule

Scénario alternatif l’inscription. L’enchaînement 5 démarre au point 3 du
scénario nominal.
6. Les champs sont invalides ou l’utilisateur
l’administrateur annule l’ajout : Scénario nominal reprend
du point 1 et le système indique à l’utilisateur qu’il y a un
échec d’ajout.
Diagramme de séquence : La figure 2.7 représente le diagramme de séquence qui décrit le
cas d’utilisation «Ajouter des réclamations».

FS-SFAX Page 31
CONCEPTION DU SYSTÈME

F IGURE 2.7 – Diagramme de séquence «Ajouter des réclamations»

FS-SFAX Page 32
CONCEPTION DU SYSTÈME

2.6.1.7 Cas d’utilisation «Modifier profile»

Ce cas d’utilisation permet à un utilisateur de modifier son

Description textuelle profile.

Acteurs L’utilisateur ou l’administrateur

Pré condition *L’utilisateur ou l’administrateur doit être authentifié.

*L’utilisateur ou l’administrateur est déjà connecté au
système

1. L’utilisateur saisit les nouvelles informations concernant

Scénario nominal
son profile.
2. Le système vérifie que tous les champs obligatoires sont
renseignés et valides.
3. Le système enregistre et met à jour les informations.

5. Les champs sont invalides ou l’utilisateur ou

Scénario alternatif l’administrateur annule le met à jour de son profile.
L’enchaînement 5 démarre au point 3 du scénario nominal.
6. Les champs sont invalides ou l’utilisateur
l’administrateur annule le met à jour de son profile :
Scénario nominal reprend du point 1 et le système indique
à l’utilisateur ou l’administrateur qu’il y a un échec de met
à jour de son profile.
Diagramme de séquence :

La figure 2.8 représente le diagramme de séquence qui décrit le cas d’utilisation «Modifier
le profile».

FS-SFAX Page 33
CONCEPTION DU SYSTÈME

F IGURE 2.8 – Diagramme de séquence «Modifier le profile»

FS-SFAX Page 34
CONCEPTION DU SYSTÈME

2.6.1.8 Cas d’utilisation «Ajouter/Supprimer/Modifier les localisations des poubelles»

Ce cas d’utilisation permet à un utilisateur d’ajouter des

nouvelles localisations des poubelles ou modifier/supprimer
Description textuelle
les anciennes localisations des poubelles.

Acteurs Administrateur

Pré condition * L’administrateur doit être authentifié.

*L’administrateur est déjà connecté au système.

1. L’administrateur ajoute la localisation

Scénario nominal (longitude,latitude) de la nouvelle poubelle ou
(modifier/supprimer) la localisation de l’ancienne poubelle.
2. Le système affiche la nouvelle localisation
ajoutée/modifiée.

3. Les champs sont invalides ou l’administrateur annule

Scénario alternatif l’ajout/la modification/la suppression. L’enchaînement 3
démarre au point 2 du scénario nominal.
4. Les champs sont invalides ou l’administrateur annule
l’ajout/la modification/la suppression : Scénario nominal
reprend du point 1 et le système indique un message
(poubelle non ajoutée /poubelle n’existe pas) ou
l’administrateur.
Diagramme de séquence :

La figure 2.9 représente le diagramme de séquence qui décrit le cas d’utilisation «Ajouter
des localisations des poubelles».

FS-SFAX Page 35
CONCEPTION DU SYSTÈME

F IGURE 2.9 – Diagramme de séquence «Ajouter des localisations des poubelles»

La figure 2.10 représente le diagramme de séquence qui décrit le cas d’utilisation «Modifier
des localisations des poubelles».

FS-SFAX Page 36
CONCEPTION DU SYSTÈME

F IGURE 2.10 – Diagramme de séquence «Modifier des localisations des poubelles»

La figure 2.11 représente le diagramme de séquence qui décrit le cas d’utilisation «Supprimer
des localisations des poubelles».

FS-SFAX Page 37
CONCEPTION DU SYSTÈME

F IGURE 2.11 – Diagramme de séquence «Supprimer des localisations des poubelles»

2.6.1.9 Cas d’utilisation «Gérer les utilisateurs»

a.Bloquer un utilisateur

FS-SFAX Page 38
CONCEPTION DU SYSTÈME

Ce cas d’utilisation permet à un administrateur de gérer les

Description textuelle utilisateurs.

Acteurs Administrateur

Pré condition * L’administrateur doit être authentifié.

*L’administrateur est déjà connecté au système
*Un utilisateur est déjà enregistré

1.L’administrateur demande le blocage d’un utilisateur au

Scénario nominal
système.
2. Le système demande la confirmation de blocage.
3. L’administrateur confirme le blocage
4. Le système bloque l’utilisateur

5 L’administrateur annule le blocage. L’enchaînement 5

Scénario alternatif
démarre au point 2 du scénario nominal.
6 L’administrateur annule le blocage Scénario nominal
reprend du point 1.
b. Débloquer un utilisateur

FS-SFAX Page 39
CONCEPTION DU SYSTÈME

Ce cas d’utilisation permet à un administrateur de gérer les

Description textuelle utilisateurs.

Acteurs Administrateur

Pré condition * L’administrateur doit être authentifié.

*L’administrateur est déjà connecté au système
*Un utilisateur est déjà enregistré

Scénario nominal 1.L’administrateur demande de Débloquer un utilisateur.

2. Le système demande la confirmation de déblocage.
3. L’administrateur confirme le déblocage.
4. Le système débloque l’utilisateur.

5. L’administrateur annule le déblocage. L’enchaînement 5

Scénario alternatif
démarre au point 2 du scénario nominal.
6. L’administrateur annule le déblocage Scénario nominal
reprend du point 1.

Diagramme de séquence : La figure 2.12 représente le diagramme de séquence qui décrit le

cas d’utilisation «Gérer les utilisateurs».

FS-SFAX Page 40
CONCEPTION DU SYSTÈME

F IGURE 2.12 – Diagramme de séquence «Gérer utilisateurs»

FS-SFAX Page 41
CONCEPTION DU SYSTÈME

2.6.1.10 Cas d’utilisation «Ajouter des administrateurs»

Ce cas d’utilisation permet à l’administrateur d’ajouter les autres

Description textuelle administrateurs.

Acteurs Administrateur

Pré condition * L’administrateur doit être authentifié.

*L’administrateur est déjà connecté au système.

Scénario nominal 1.L’administrateur demande l’ajout d’un autre administrateur.

2. Le système demande la confirmation de l’ajout.
3. L’administrateur confirme l’ajout.
4. Le système ajoute le nouvel administrateur.

5. L’administrateur annule l’ajout.

Scénario alternatif
L’enchaînement 5 démarre au point 2 du scénario nominal.
6. L’administrateur annule l’ajout Scénario nominal reprend du
point 1et le système indique un message (Administrateur non
enregistré)à l’administrateur.

Diagramme de séquence : La figure 2.13 représente le diagramme de séquence qui décrit le

cas d’utilisation «Ajouter des administrateurs».

FS-SFAX Page 42
CONCEPTION DU SYSTÈME

F IGURE 2.13 – Diagramme de séquence «Ajouter des administrateurs»

2.6.2 Diagrammes d’activités

Le diagramme d’activités permet de mettre l’accent sur les traitements. Il est adapté à la
modélisation du cheminement de flots de contrôle et de flots de données.

2.6.2.1 Diagramme d’activité «Application Mobile»

La figure 2.14 représente le diagramme d’activité d’application mobile.

FS-SFAX Page 43
CONCEPTION DU SYSTÈME

F IGURE 2.14 – Diagramme d’activité «Application mobile»

2.6.3 Diagramme de classe

La figure 2.15 identifie la structure des classes de notre système, y compris les attributs et
les méthodes de chaque classe.

FS-SFAX Page 44
CONCEPTION DU SYSTÈME

F IGURE 2.15 – Diagramme de classes

2.7 CONCLUSION

Dans ce chapitre, nous avons décrit l’architecture générale de ce projet ainsi que la définition
des concepts de base qui constituent l’environnement du projet. A la fin nous avons abordé
la conception de nos applications à l’aide des Diagrammes de cas d’utilisation, de séquence,

FS-SFAX Page 45
CONCEPTION DU SYSTÈME

d’activité et de classe. L’objectif du chapitre suivant est de présenter la réalisation de notre

projet.

FS-SFAX Page 46
Chapitre

3
R ÉALISATION DU S YSTÈME
S MART C ITY

Sommaire
3.1 INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2 Etude technologique . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.2.1 Outils de développement . . . . . . . . . . . . . . . . . . . . . . 48
3.2.2 Technologie du frontend . . . . . . . . . . . . . . . . . . . . . . 50
3.2.3 Technologie du backend (NestJS) . . . . . . . . . . . . . . . . . 51
3.2.4 Base de données . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.2.5 Langages de développement . . . . . . . . . . . . . . . . . . . . 53
3.2.6 Librairies Utilisées . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.7 Matériels utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.3 RÉALISATION DE L’APPLICATION . . . . . . . . . . . . . 55
3.3.1 Réalisation sur le mobile . . . . . . . . . . . . . . . . . . . . . . 55
3.3.2 Réalisation sur web . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.3.3 Réalisation sur le mongo . . . . . . . . . . . . . . . . . . . . . . 72
3.3.4 Réalisation sur le swagger . . . . . . . . . . . . . . . . . . . . . 73
3.3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

FS-SFAX Page 47
RÉALISATION DU SYSTÈME

3.1 INTRODUCTION

Après avoir achevé la phase de conception de l’application, nous entamons dans ce chapitre
la phase de la réalisation. Elle consiste à réaliser une application web accessible par l’admin
(police, municipalité, protection civile...) et une application mobile accessible par le citoyen. Ce
chapitre est organisé en deux parties. La première partie consiste à l’identification des logiciels
et des outils utilisés pour mettre en œuvre notre application. La deuxième partie représente des
scénarios d’utilisation présentés sous forme des itérations associées avec des captures d’écran
permettant de donner une idée sur le fonctionnement de l’application web et mobile.

3.2 Etude technologique

3.2.1 Outils de développement

3.2.1.1 Microsoft Visual Studio Code

Visual Studio Code [6] est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS. Il peut être utilisé avec une variété de langages de programmation,
notamment Python, Java, JavaScript et C++.

3.2.1.2 Android Studio

Android [7] est un environnement de développement pour créer des applications mobiles
Android .

o L’AVD Android [8] : Un appareil virtuel Android (AVD) est un émulateur android pour
exécuter et tester les applications android.

o Le SDK Android [9] (Sotfware Development Kit) : est un ensemble d’outils de développement
pour développer un logiciel destiné aux plateformes suivant (Linux, Windows, Android, etc) .

FS-SFAX Page 48
RÉALISATION DU SYSTÈME

3.2.1.3 Postman (logiciel)

Postman[10] est un logiciel permettant de tester vos API mais aussi de les enregistrer.
C’est-à- dire qu’au lieu de tester vos API sur votre navigateur et de découvrir vos informations
non formaliser, vous allez utiliser postman tester les requêtes, les voir sous le bon format et
aussi enregistrer la requête.

3.2.1.4 Swagger

Le projet Swagger [11] API a été créé en 2011 par Tony Tam. Swagger est un ensemble
open source de règles, de spécifications et d’outils pour développer et décrire des API RESTful
.

3.2.1.5 Git

Git [12] est un logiciel de gestion de version distribué, très puissant et récent, il a été créé
par Linus Torvalds, qui est entre autres l’homme à l’origine de Linux. Il se distingue par sa
rapidité et sa gestion des branches qui permettent de développer en parallèle de nouvelles
fonctionnalités.

a) GitLab

GitLab [13] est une plateforme devops complète qui permet aux équipes de collaborer et de
créer de meilleurs logiciels.

b) Les commandes utilisées

- git checkout -b <name-of-branch> : Créer une branche.

- git checkout <name-of-branch> : Pour basculer vers une branche existante.

- git status : afficher l’état de la copie de travail, c’est à dire les fichiers qui ont été modifiés
par rapport au référentiel.

FS-SFAX Page 49
RÉALISATION DU SYSTÈME

- git pull <REMOTE> <name-of-branch> : Mettre à jour le dépôt local.

- git add . : ajouter tous les modifications.

- git commit -m "message" : pour valider les fichiers préparés .

- git push : transférer toutes les modifications locales vers le dépôt distant.

3.2.1.6 Arduino

Arduino [14] est la marque d’une plateforme de prototypage open-source qui permet aux
utilisateurs de créer des objets électroniques interactifs à partir de cartes électroniques matériellement
libres sur lesquelles se trouve un micro-contrôleur. Les schémas de ces cartes électroniques sont
publiés en licence libre.

3.2.2 Technologie du frontend

3.2.2.1 React JS

React JS [15] est une bibliothèque JavaScript pour créer des interfaces utilisateurs, libre
développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la
création d’application web monopage, en travaillant avec un DOM virtuel.

a) Les avantages du React Js

o DOM virtuel au lieu d’un vrai DOM.

o Simple, Rapide et évolutif.

o Communauté de developpeurs tres importantes .

o JSX fournit un code facile à lire et à écrire .

o S’integre facilement à d’autres frameworks java script.

FS-SFAX Page 50
RÉALISATION DU SYSTÈME

3.2.2.2 React Native

React Native [16] est un framework d’applications mobiles open source créé par Facebook.
Il est utilisé pour développer des applications pour Android et iOS en permettant aux développeurs
d’utiliser React avec les fonctionnalités natives de ces plateformes.

a) Les avantages du React Native

o Développement rentable.

o Open-Source.

o Une communauté de développeurs active.

o Utilise JavaScript.

o Fonction de rechargement à chaud.

3.2.2.3 Redux

Redux [25] est un conteneur d’état prévisible pour les applications javascript basé sur le
modèle de conception de flux. Redux peut être utilisé avec reactjs ou avec toute autre bibliothèque
de vues.

3.2.3 Technologie du backend (NestJS)

Nest JS [17] est un framework permettant de créer des applications serveur Node.js évolutives
et efficaces. Il utilise JavaScript progressif, est construit avec et prend en charge TypeScript, et
combine des éléments de OOP (programmation orientée objet), FP (programmation fonctionnelle)
et FRP (programmation réactive fonctionnelle).

a) Les avantages du NestJs

o Une grande communauté.

FS-SFAX Page 51
RÉALISATION DU SYSTÈME

o Avoir une architecture claire et organisée.

o NestJS encourage la modularité car il utilise plusieurs outils telque (intercepteurs, gardes
...) .

3.2.4 Base de données

3.2.4.1 MongoDB

MongoDB [18] est une base de données multi-plateforme orientée document. Elle offre des
performances élevées, une haute disponibilité et une évolutivité aisée. MongoDB travaille sur
le concept de collection et de document.

a) Les avantages du MongoDB

o Schema less - MongoDB est une base de données de documents dans laquelle une collection
contient différents documents. Le nombre de champs, le contenu et la taille du document
peuvent différer d’un document à l’autre.

o La structure d’un seul objet est claire.

o Aucune jointure complexe.

o Capacité de requête approfondie. MongoDB prend en charge les requêtes dynamiques sur
les documents à l’aide d’un langage de requête basé sur des documents qui est presque aussi
puissant que SQL.

o Réglage.

o Facilité de mise à l’échelle - MongoDB est facile à faire évoluer.

o Conversion/mappage des objets d’application aux objets de base de données non nécessaire.

o Utilise la mémoire interne pour stocker l’ensemble de travail (fenêtré), permettant un accès
plus rapide aux données.

FS-SFAX Page 52
RÉALISATION DU SYSTÈME

3.2.4.2 Firebase

Firebase [19] est un service du cloud computing .Il est conçu pour les mises à jour et la
gestion des données en temps réel.

a) Les avantages du Firebase

o Base de données en temps réel.

o Cloud Firestore.

o Authentification Firebase multiplateforme gratuite.

3.2.5 Langages de développement

3.2.5.1 TypeScript

Le TypeScript [20] est un langage de programmation développé par Microsoft en 2012. Son
ambition principale est d’améliorer la productivité de développement d’applications complexes.
Cependant, le langage introduit des fonctionnalités optionnelles comme le typage ou encore la
programmation orientée objet. Pour pouvoir bénéficier de ces fonctionnalités aucune librairie
n’est requise.

3.2.5.2 JavaScript

JavaScript [21], créé par Brendan Eich en mai 1995 pour Netscape Communications Corporation,
est un langage de programmation qui permet la création de contenu mis à jour dynamiquement,
pour contrôler le contenu multimédia, créer des animations et tout ce que vous pouvez penser.

3.2.5.3 JSX

JSX [22] (javaScript xml) est une combinaison entre javaScript et html rapide, simple et
lisable .

FS-SFAX Page 53
RÉALISATION DU SYSTÈME

3.2.5.4 Langage C

C [23] est un langage de programmation impératif de bas niveau, a été conçu en 1972 par
Dennis Richie et Ken Thompson, afin de développer un système d’exploitation UNIX.

3.2.6 Librairies Utilisées

3.2.6.1 npm

Npm [24] est le package manager de NodeJS mais c’est aussi la plus grande bibliothèque
de projets open sources au monde. NPM est l’abréviation de Node Package Manager, qui est un
outil gérant les bibliothèques de programmation Javascript pour Node.js.

3.2.7 Matériels utilisés

3.2.7.1 Ultrason

Les capteurs ultrason [26] sont principalement utilisés dans l’industrie et servent à détecter
et mesurer des distances entre divers types d’objets, quelle que soit leur forme (liquide, solide,
granuleux, etc.). Ce sont des capteurs puissants et qui restent fiables même s’il y a présence de
poussière ou si l’objet est brillant, transparent...

3.2.7.2 Node MCU

NodeMCU [27] est une carte électronique programmable. Elle contient un circuit intégré à
micro-contrôleur avec connexion Wi-Fi nommée ESP8266 développé par le fabricant chinois
Espressif.

FS-SFAX Page 54
RÉALISATION DU SYSTÈME

3.3 RÉALISATION DE L’APPLICATION

3.3.1 Réalisation sur le mobile

F IGURE 3.1 – Welcome page

La figure 3.1 représente la page d’acceuil de l’application avec laquelle l’utilisateur peut
naviguer vers la page de connexion au système après l’appui sur le bouton «Sign in to continue».

FS-SFAX Page 55
RÉALISATION DU SYSTÈME

(a) Login page (b) Invalid login

F IGURE 3.2 – Login page

La figure 3.2 représente l’interface d’authentification avec laquelle l’utilisateur peut se connecter
au système. Après l’appui sur le bouton «Sign in», si les paramètres sont valides le système
affiche l’interface du «Home page», la figure 3.5, comme le montre «You are logged in» . Sinon
le système affiche un message d’erreur comme le montre la figure (b)Invalid login «Please check
your login information ». Il’y a aussi le bouton «Sign up» si l’utilisateur n’avait pas un compte,
il peut naviguer vers cette page pour créer un nouveau compte et le bouton «Forgot password»
pour naviguer vers la page de réinitialisation du mot de passe.

Les figures 3.3 (a), (b) et (c) représentent les étapes de ré-initialisation du mot de passe.
Après avoir cliqué sur "Forgot Password ?" dans l’interface d’authentification, une nouvelle

FS-SFAX Page 56
RÉALISATION DU SYSTÈME

(a) SendMail page (b) ResetMail page

(c) Invalid send

F IGURE 3.3 – Mail page

FS-SFAX Page 57
RÉALISATION DU SYSTÈME

interface s’affiche pour donner à l’utilisateur l’accès d’écrire son adresse mail puis il clique
sur le bouton «Send». Si le mail est incorrect une alerte s’affiche "Incorrect email adress",
sinon il faut ensuite recevoir un mail afin de changer son mot de passe et enfin de l’enregistrer.
Maintenant, il peut s’authentifier avec le nouveau mot de passe.

(a) SignUp page (b) Invalid signUp

F IGURE 3.4 – Register page

La figure 3.4 représente l’interface de «Sign up » avec laquelle l’utilisateur peut créer un
nouveau compte. Après l’appui sur le bouton «Sign up», si les paramètres sont valides le
système affiche l’interface du «Sign in page». Sinon le système affiche un message d’erreur
comme le montre «Please check your register information ». Il’y a aussi le bouton «Sign in» si
l’utilisateur a déja un compte, il peut naviguer vers cette page.

FS-SFAX Page 58
RÉALISATION DU SYSTÈME

(a) Home page(1) (b) Home page(2)

F IGURE 3.5 – Home page

La figure 3.5 représente l’interface de «Home page », premier page après l’authentification,
à partir de laquelle l’utilisateur a la possibilité de consulter les actualités, la météo et tous les
modules de notre ville (poubelle, transport, réservation...etc..). La clique sur chaque module le
permet de se naviguer vers les pages de ce module et consulter ses informations.

FS-SFAX Page 59
RÉALISATION DU SYSTÈME

F IGURE 3.6 – Map page

La figure 3.6 représente l’interface de «Map page », premier page après la clique sur le
module «Bin», à partir de laquelle l’utilisateur a la possibilité de consulter tous les localisations
des poubelles.

FS-SFAX Page 60
RÉALISATION DU SYSTÈME

F IGURE 3.7 – PublicClaims page

La figure 3.7 représente l’interface «Public claims », à partir de laquelle l’utilisateur a la

possibilité de consulter tous les réclamations (ses réclamations et les réclamations des autres
utilisateurs).

FS-SFAX Page 61
RÉALISATION DU SYSTÈME

F IGURE 3.8 – PrivateClaims page

La figure 3.8 représente l’interface «Private claims », à partir de laquelle l’utilisateur a la

possibilité de consulter tous ses réclamations.

FS-SFAX Page 62
RÉALISATION DU SYSTÈME

F IGURE 3.9 – SaveClaim page

F IGURE 3.10 – Create Claim-mobile

La figure 3.9 représente l’interface «Add claims », à partir de laquelle l’utilisateur a la

possibilité d’ajouter des réclamations en précisant le mode de cette réclamation (publique ou

FS-SFAX Page 63
RÉALISATION DU SYSTÈME

privé). Si les paramètres sont valides et le mode est privé donc cette réclamation va être affichée
dans la page «Private claims » sinon dans la page «Public claims».

(a) Edit profil(1) (b) Edit profil(2)

F IGURE 3.11 – Edit profil page

La figure 3.11 représente l’interface «Edit profil », à partir de laquelle l’utilisateur a la

possibilité de modifier son profil.

FS-SFAX Page 64
RÉALISATION DU SYSTÈME

(a) Edit profil(1) (b) Edit profil(2)

F IGURE 3.12 – LogOut page

Le figure 3.12 représente une page «Logout» qui va être apparaît si on clique sur le bouton
«Logout» de l’application d’où supprimer le «Token» et retourner à la page connexion.

FS-SFAX Page 65
RÉALISATION DU SYSTÈME

3.3.2 Réalisation sur web

F IGURE 3.13 – Login page

F IGURE 3.14 – Register page

La figure 3.13 représente l’interface d’authentification avec laquelle l’utilisateur peut se

connecter au système. Après l’appui sur le bouton «Sign in», si les paramètres sont valides le
système affiche l’interface du «Home page». Sinon le système affiche un message d’erreur. Il’y
a aussi le bouton «Sign up» si l’utilisateur n’avait pas un compte, il peut naviguer vers cette
page pour créer un nouveau compte (figure 3.14).

FS-SFAX Page 66
RÉALISATION DU SYSTÈME

F IGURE 3.15 – Claims page

La figure 3.15 représente l’interface de la page «Claims» avec laquelle l’administrateur peut
consulter tous les détails de chaque réclamation envoyée et il peut commenter, modifier ou
supprimer le commentaire.

F IGURE 3.16 – Users page

La figure 3.16 représente l’interface de la page «Users» permettant à :

- L’administrateur peut consulter tous les noms d’utilisateurs, leurs contacts, leurs adresses avec
leurs réclamations envoyées.
- L’administrateur peut bloquer ou débloquer des utilisateurs.

FS-SFAX Page 67
RÉALISATION DU SYSTÈME

F IGURE 3.17 – Dashboard page

La figure 3.17 représente l’interface de la page «Dashboard» avec laquelle l’administrateur

peut consulter tous les nombres des utilisateurs et leurs état (nombres d’utilisateurs bloqués et
actifs), les nombres des poubelles avec leurs localisations et leurs états en temps réel (pleines,
vides, utilisés) et les nombres des réclamations.

-Deux diagrammes circulaires : 1ier diagramme représente les pourcentages des utilisateurs
bloqués et actifs, le 2ème diagramme représente les pourcentages des poubelles pleines, vides
et utilisés.

F IGURE 3.18 – Image de prototype :poubelle intelligente

FS-SFAX Page 68
RÉALISATION DU SYSTÈME

F IGURE 3.19 – Schéma synoptique de la poubelle intelligente

Les figures 3.18 et 3.19 représentent une image de notre prototype (la poubelle intelligente)
avec son schéma qui détaille son fonctionnement avec la technologie iot.

L’architecture de l’iot se compose de 4 couches :

o La couche1 définit l’objet connecté qui est composé d’une poubelle lié à un capteur
ultrason et une carte node mcu.

o La 2ème couche définit le protocole de communication utilisé : c’est le wifi.

o La 3ème couche présente la plateforme de stockage qui est dans ce cas le firebase.

o La 4ème couche est réservé à la visualisation qui est assuré par l’application web.

Pour mieux clarifier le capteur ultrason détecte les distances par rapport aux déchets, puis
il envoie ces valeurs en temps réel au firebase, pour les récupérer par la suite dans l’interface
Dashboard ou ils seront affichés sous forme des pourcentages.

La figure 3.29 représente un tableau explicatif des valeurs détectés par le capteur ultrason.
NB :Dans notre exemple la hauteur de la poubelle est 21 cm.

Distance par rapport au Pourcentage d’état de État de poubelle

déchets poubelle dans le
dashboard

Distance détecté = 1cm 4,7% La poubelle et pleine

21cm > distance détecté 100% > pourcentage La poubelle est en

> 1cm d’état de poubelle > 4,7% utilisation

Distance détecté = 21 cm Pourcentage d’état de La poubelle est vide

poubelle = 100%

FS-SFAX Page 69
RÉALISATION DU SYSTÈME

F IGURE 3.20 – Add admin

La figure 3.20 représente l’interface de la page «Add admin» avec laquelle l’administrateur
peut ajouter d’autres sous administrateurs.

F IGURE 3.21 – Edit Profil

La figure 3.21 représente l’interface de la page «Edit profil» avec laquelle l’administrateur
peut modifier son profile.

FS-SFAX Page 70
RÉALISATION DU SYSTÈME

F IGURE 3.22 – Send Mail

F IGURE 3.23 – Reset

Les figures 3.22 et 3.23 représentent les étapes de ré-initialisation du mot de passe. Après
cliquer sur sur "forgot Password ?" dans l’interface d’authentification, une nouvelle interface
ouvert pour donner à l’utilisateur l’accès d’écrire son adresse mail puis on clique sur le bouton
"Send".Il faut ensuite recevoir un mail qui contient un lien , après on clique sur cet lien , on’a
afficher directement l’interface de "Add New Password" afin de changer son mot de passe et
enfin de l’enregistrer. Maintenant, il peut s’authentifier avec le nouveau mot de passe.

FS-SFAX Page 71
RÉALISATION DU SYSTÈME

3.3.3 Réalisation sur le mongo

F IGURE 3.24 – Users()

La figure 3.24 représente le module «Users» dans la base des données.

F IGURE 3.25 – Claims

La figure 3.25 représente le module «Claims» dans la base des données.

FS-SFAX Page 72
RÉALISATION DU SYSTÈME

3.3.4 Réalisation sur le swagger

F IGURE 3.26 – Swagger(1)

F IGURE 3.27 – Swagger(2)

FS-SFAX Page 73
RÉALISATION DU SYSTÈME

F IGURE 3.28 – Login swagger

Les figures de 3.26 jusqu’à 3.28 sont des captures de notre testeur des APIs (Swagger).

3.3.5 Conclusion

Dans ce chapitre, nous avons décrit, en premier lieu, les logiciels et les outils utilisés dans
notre projet. La deuxième partie a été dédiée à la présentation de notre travail moyennant des
captures d’écran et une description des fonctionnalités offertes par les différentes interfaces de
l’application développée.

FS-SFAX Page 74
 CONCLUSION GÉNÉRALE
ET PERSPECTIVES

Durant notre projet, nous avons fait la conception et la réalisation d’une ville intelligente
pour aider les citoyens de la cité et faciliter mieux leur vie. Notre projet s’articule sur quatre
parties principales. La première partie s’agit de réaliser une application web pour la police,la
municipalité, la protection civile... Cette partie englobe toutes les fonctionnalités nécessaires
pour gérer une ville comme le contrôle des réclamations reçus par les utilisateurs de l’application
mobile. Pour la deuxième partie, nous étions chargés de réaliser une application mobile pour
les différents utilisateurs (citoyens). Cette application permet aux utilisateurs d’envoyer des
réclamations dans le but de trouver des solutions immédiates aux problèmes rencontrés dans la
ville, afin d’améliorer la qualité de vie en rendant cette dernière plus adaptative et efficace et
aussi recevoir des réclamations des autres utilisateurs en temps réel.

Tout au long de ce présent rapport, nous avons essayé de mentionner les étapes suivies pour
décrire et mettre en œuvre le travail accompli. Nous avons commencé, dans le premier chapitre,
par une présentation générale mettant en œuvre le cadre et les concepts de base de notre projet.
Dans le deuxième chapitre, la conception générale et détaillée le système en présentant des
diagrammes UML tel que le diagramme de cas d’utilisation, les diagrammes de séquence, les
diagrammes d’activités et le diagramme de classes. Dans le dernier chapitre, nous avons clôturé
par la réalisation où nous avons mis en œuvre toute l’étude que nous avons élaborée.

Ce projet nous a été bénéfique tant sur le plan théorique que pratique. En effet, sur le
plan théorique, nous avons acquis des notions fondamentales sur Internet des Objets (IoT),
cloud computing, l’architecture de l’atomic design et sur le mongoDB. Sur le plan pratique,
la phase de réalisation était à la fois enrichissante et instructive. C’était une occasion pour

FS-SFAX Page 75
CONCLUSION GÉNÉRALE

nous familiariser avec les nouvelles technologies. Nous avons eu l’opportunité d’acquérir des
compétences en ReactJs, NestJs et ReactNative.

En termes de perspectives, on peut envisage de complèter la platforme proposée par les

autres éléments (Transport, Emergency, Complain, Touristic Places, Booking), aussi en rendant
tous les objets de la cité connectés (smart parking, smart health, smart transportation, smart
manufacturing, smart farming, smart energy, smart gouvernment...).
On peut ajouter à notre poubelle intelligente d’autres capteurs et modules tel que le module GPS
afin de suivre l’emplacement de nos poubelles en cas de vol ou la modification des emplacements
ou encore le capteur Smell iX16 (pour détecter les mauvaises odeurs des poubelles, etc.).

FS-SFAX Page 76
 BIBLIOGRAPHIE

[1] UIT,

UIT-T, “Présentation générale de l’Internet des objets,” Sect. LA Norm. DES Telecommun.
L’UIT, no. 1, p. 24, 2012.

[2] Cloud Computing,

https ://www.javatpoint.com/cloud-computing-architecture

[3] Langage UML,

https ://www.lucidchart.com/pages/fr/langage-uml/section0

[4] StarUML,

http ://www.uml.org

[5] RUP,

IntroductionauRationalUnifiedProcess,PhilippeKruchten

[6] Visual Studio Code,

https ://code.visualstudio.com/docs

[7] Android,

https ://developer.android.com/studio

[8] Un appareil virtuel Android (AVD),

https ://developer.android.com/studio/run/managing-avds

[9] Le SDK Android,

https ://developer.android.com/studio/releases/platform-tools

[10] Postman (logiciel),

https ://www.postman.com/

FS-SFAX Page 77
BIBLIOGRAPHIE

[11] Swagger,

https ://swagger.io/docs/specification/2-0/what-is-swagger/

[12] Git,

https ://git-scm.com/

[13] GitLab,

https ://docs.gitlab.com/

[14] Arduino,

https ://https ://www.arduino.cc/reference/en/

[15] ReactJS,

https ://fr.reactjs.org/

[16] React Native,

https ://reactnative.dev/

[17] NestJS,

https ://nestjs.com/

[18] MongoDB,

https ://www.mongodb.com/

[19] Firebase,

https ://firebase.google.com/docs

[20] TypeScript,

https ://blog.cellenza.com/developpement-specifique/web-developpement-specifique/
introduction-a-typescript/

[21] JavaScript,

https://developer.mozilla.org/fr/docs/Web/JavaScript

[22] JSX,

https ://reactjs.org/docs/introducing-jsx.html

[23] Langage C,

https ://openclassrooms.com/fr/courses/19980-apprenez-a-programmer-en-c

FS-SFAX Page 78
BIBLIOGRAPHIE

[24] NPM,

https ://www.npmjs.com/

[25] Redux,

https ://redux.js.org/

[26] Ultrason,

https ://www.eeca.eu/capteur-ultrason-une-technologie-de-pointe/

[27] NodeMCU,

https ://www.gotronic.fr/art-module-nodemcu-esp8266-27744.htm

FS-SFAX Page 79