1 Table des matières

Introduction générale.............................................................................................................................6
Chapitre 1 : Présentation du cadre du projet...................................................................................7
I. Présentation de la société :..............................................................................................................7
1. Présentation de l’entreprise d’accueil.........................................................................................7
a. Présentation de Telecom For Future (TFF)...............................................................................7
b. Secteur d’activités..........................................................................................................................7
II. Cahier de charge :.............................................................................................................................7
1. Problématique :..............................................................................................................................7
2. Contexte de projet :.......................................................................................................................8
3. Objectif du contrôle de lumière à distance dans une usine :...................................................9
4. IOT et domotique :.........................................................................................................................9
III. Conclusion :..................................................................................................................................10
Chapitre 2 : Etude et spécification des besoins............................................................................11
I. Introduction :.....................................................................................................................................11
II. Les besoins fonctionnels :..............................................................................................................11
1. Digrammes des cas d’utilisation :..............................................................................................12
a. Diagramme du cas d’utilisation général :..............................................................................12
b. Diagramme du cas d’utilisation d’authentification :.............................................................13
c. Diagramme du cas d’utilisation de gestion des usines :.....................................................16
d. Diagramme du cas d’utilisation de gestion des départements :........................................17
e. Diagramme du cas d’utilisation de gestion des lignes :......................................................19
f. Diagramme du cas d’utilisation de gestion des plannings :...............................................21
g. Diagramme du cas d’utilisation de configurer des plannings :...........................................22
h. Diagramme du cas d’utilisation de consulter des plannings :............................................24
i. Diagramme du cas d’utilisation de consulter l’historique :..................................................25
III. Les besoins non fonctionnels :...................................................................................................26
IV. Les besoins matériels :...............................................................................................................27
1. La carte Arduino :.........................................................................................................................27
2. La carte WeMos D1 mini :..........................................................................................................27
3. La carte STM32F4 DISCOVERY :.............................................................................................28
4. La carte zedboard :......................................................................................................................28
5. La carte Beagle Bone Black :.....................................................................................................29
1
 6. Comparaison technique entre ces cartes de développement :.........................................30
V. Conclusion :......................................................................................................................................31
Chapitre 3 : Conception.......................................................................................................................32
I. Introduction :.....................................................................................................................................32
II. Conception globale du projet :.......................................................................................................32
III. Architecture générale du projet Lightways :.............................................................................32
1. Description des composants :....................................................................................................32
2. Conception détaillé :....................................................................................................................33
a. Diagramme de déploiement :.................................................................................................33
b. Diagrammes de classes :.......................................................................................................34
c. Diagrammes de séquences :..................................................................................................36
d. Diagrammes d’activités :.........................................................................................................36
IV. Conclusion :..................................................................................................................................38
Chapitre4 : Implémentation et réalisation.......................................................................................39
I. Introduction :.....................................................................................................................................39
II. Les technologies de la Construction de la partie beckend du l’application web :...................39
1. Apache Tomcat 8 :.......................................................................................................................39
2. Spring Boot Framework :............................................................................................................39
3. Spring Initializer:..........................................................................................................................40
4. MongoDB Compass Community :.............................................................................................42
5. Spring Tools suite:.......................................................................................................................42
6. Spring data Mongo Repository :................................................................................................44
7. Sécurité de l’application web :....................................................................................................47
a. Spring Security :.......................................................................................................................47
b. Fonctionnalités :.......................................................................................................................47
c. JSON Web Token:...................................................................................................................48
III. Les technologies de la Construction du partie frontend du l’application web :....................49
1. Angular 7 :.....................................................................................................................................49
a. Installer Angular:......................................................................................................................50
b. Création des composants :.....................................................................................................50
c. Créations des Services :.........................................................................................................51
d. Créer un service Http Client :.................................................................................................51
e. Routage :...................................................................................................................................51

2
 f. Modele :.....................................................................................................................................52
g. Local Storage et session Storage :........................................................................................52
h. Les interfaces de l’application web :...........................................................................................53
2. Autres logiciels :...........................................................................................................................53
a. Postman :..................................................................................................................................53
b. Visual studio:............................................................................................................................54
c. Bootsrap4:.................................................................................................................................54
d. Node.js......................................................................................................................................55
e. NPM :.........................................................................................................................................55
f. Edraw Max :..............................................................................................................................56
3. Langages utilisés :.......................................................................................................................56
g. Java2EE :..................................................................................................................................56
h. Html5 :.......................................................................................................................................57
i. Css3 :........................................................................................................................................57
j. Type Script :..............................................................................................................................58
k. JavaScript :...............................................................................................................................58
l. JSON :.......................................................................................................................................59
IV. Partie embarquée :......................................................................................................................59
1. Logiciels utilisés :.........................................................................................................................59
a. Vnc Viewer :..............................................................................................................................59
b. Arduino :....................................................................................................................................60
2. Configuration du matériel :.........................................................................................................60
3. Choix de la solution :...................................................................................................................60
4. Les besoins élémentaires :.........................................................................................................61
5. Démarrage et configuration de la Raspberry :.........................................................................61
6. Connection de la carte Raspberry avec l’ordinateur...............................................................63
7. Démarrage de Raspberry...........................................................................................................65
8. Consommation avec web service :............................................................................................66
9. Communication mqtt :.................................................................................................................67
10. Câblage :...................................................................................................................................71
V. Conclusion........................................................................................................................................72

Figure 1 : Diagramme du cas d'utilisation « générale ».....................................................................13

3
Figure 2:Diagramme du cas d'utilisation « authentification »............................................................14
Figure 3:diagramme du cas d'utilisation « gestion des usines ».......................................................16
Figure 4:diagramme du cas d'utilisation « gestion des départements »..........................................18
*Figure 5:diagramme du cas d'utilisation « gestion des lignes »......................................................19
Figure 6:diagramme du cas d'utilisation « gestion des plannings ».................................................21
Figure 7:diagramme du cas d'utilisation « configurer des plannings ».............................................22
Figure 8:diagramme du cas d'utilisation « consulter les plannings »...............................................24
Figure 9:diagramme de cas d’utilisation « consulter l’historique »....................................................25
Figure 10:logo carte Arduino..................................................................................................................27
Figure 11:logo carte WeMos D1 mini....................................................................................................28
Figure 12:logo carte STM.......................................................................................................................28
Figure 13: logo carte zedboard..............................................................................................................29
Figure 14:logo carte Beagle Bone Black..............................................................................................30
Figure 15:architecture générale du projet Lightways..........................................................................32
Figure 16:diagramme de déploiement..................................................................................................34
Figure 17:diagramme de class..............................................................................................................35
Figure 18:diagramme séquentiel « enregistrer identifier ».................................................................36
Figure 19:diagramme d'activité « authentification avec Spring Security et Json Web Token »....37
Figure 20:logo apache Tomcat..............................................................................................................39
Figure 21:logo Spring Boot Framework................................................................................................40
Figure 22:Logo Spring Initializr..............................................................................................................41
Figure 23:logo MongoDB........................................................................................................................42
Figure 24:logo IDE Spring Tools suite..................................................................................................43
Figure 25:import Maven..........................................................................................................................43
Figure 26:chercher existing Maven projet............................................................................................43
Figure 27:importer le fichier Maven. Jar..............................................................................................44
Figure 28:la classe principale « main »................................................................................................44
Figure 29:Spring Data MongoDB..........................................................................................................45
Figure 30:les documents Java...............................................................................................................45
Figure 31:les contrôleurs java................................................................................................................45
Figure 32:configurer la base de données Mongo................................................................................47
Figure 33:logo Spring Security..............................................................................................................48
Figure 34: logo Json Web Token...........................................................................................................48
Figure 35:mot de passe crypté..............................................................................................................49
Figure 36:autorisation « ADMIN ».........................................................................................................49
Figure 37:autorisation "USER"...............................................................................................................49
Figure 38:logo Framework angular 7....................................................................................................50
Figure 39:architecture angular...............................................................................................................50
Figure 40:architecture angular frontend avec autorisation.................................................................53
Figure 41:logo Postman..........................................................................................................................54
Figure 42:logo Visual studio...................................................................................................................54
Figure 43:logo bootstrap4.......................................................................................................................55
Figure 44:logo Nodejs.............................................................................................................................55
Figure 45:logo Npm.................................................................................................................................55

4
Figure 46:logo Edraw Max.....................................................................................................................56
Figure 47:logo java 2E............................................................................................................................57
Figure 48:logo HTML5............................................................................................................................57
Figure 49:logo css3.................................................................................................................................58
Figure 50:logo Type Script.....................................................................................................................58
Figure 51:logo java script.......................................................................................................................59
Figure 52:Logo JSON.............................................................................................................................59
Figure 53:logo vnc viewer.......................................................................................................................60
Figure 54:logo IDE Arduino....................................................................................................................60
Figure 55:formater carte SD...................................................................................................................62
Figure 56:copier l'image de Raspbian sur la carte SD.......................................................................63
Figure 57:partage de connexion............................................................................................................63
Figure 58:chercher l'adresse IP avec IScanner...................................................................................63
Figure 59:configuration avec PuTTY....................................................................................................64
Figure 60:installer VNC Server..............................................................................................................64
Figure 61:interface du Raspberry..........................................................................................................65
Figure 62:choix la version du nodejs....................................................................................................66
Figure 63: consommation du service web............................................................................................67
Figure 64:objet json reçu........................................................................................................................67
Figure 65:architecture MQTT.................................................................................................................68
Figure 66:client MQTT............................................................................................................................69
Figure 67:connexion wifi.........................................................................................................................69
Figure 68:fonction reconnect (code Arduino).......................................................................................70
Figure 69:fonction callback (code arduino)..........................................................................................70
Figure 70:resultat1 du console arduino................................................................................................70
Figure 71:resultat2 du console arduino................................................................................................71

5
 Introduction générale 
L’internet des objets (IoT) s’impose dans toutes les sphères de la vie quotidienne, à
commencer par l’entreprise. À la fois dans un souci de faciliter ou de remplacer certains
gestes des utilisateurs, mais aussi de répondre à l’obligation d’économies d’énergie. Par
la mise en place de systèmes connectés, les bâtiments se transforment en smart
buildings, permettant une synergie dans les usages et, par conséquent, une meilleure
utilisation de l’énergie.

Ce mariage des objets et d’internet offre de nombreuses perspectives aux entreprises et

aux collectivités pour améliorer leur efficacité énergétique. Outre la digitalisation directe
de l’énergie, à travers des capteurs et des compteurs intelligents, les objets connectés
peuvent également apporter aux utilisateurs un bien-être qui passe par une prise en
compte rapide de leurs besoins. Une automatisation qui génère une utilisation raisonnée
des outils du quotidien et contribue ainsi à engranger des économies d’énergie.

Dans ce cadre se présente notre projet de fin d’études réalisé au sein de Telecom for
future. En effet notre projet consiste à étudier, concevoir et développer une solution
permet l’éclairage automatique qui repose sur la gestion à distance centralisé ou
automatisé de lumière d'un bâtiment industriel par l’intermédiaire d’une application web.

Le premier chapitre « Présentation du cadre du projet » est dédié à la présentation de

l’organisme d’accueil Dans le deuxième chapitre « Analyse de besoins » analyser les
besoins du projet.
Le troisième chapitre « Conception » est consacré à la conception détaillée de notre
système.
Le quatrième chapitre « Réalisation » est destiné à la description des différentes phases
de réalisation qui ont mené à l’aboutissement de notre solution.

6
 Chapitre 1 : Présentation du cadre du projet
I. Présentation de la société :
1. Présentation de l’entreprise d’accueil

a. Présentation de Telecom For Future (TFF)

TFF est une société de service et de développement dans les domaines de télécoms et
de l’informatique, créée en 2016. La filiale DOTWAYS a été créée en 2017 pour
développer et étendre les activités de TFF en France.

b. Secteur d’activités

Développement des logiciels et des Applications mobile et web : conception et

développement des solutions innovantes dans divers secteurs : culturel, social...,
Conseil et expertise informatique : expert en ingénierie informatique, la société
accompagner ses clients dans la conception et le développement des projets
informatique et dans la recherche d’innovation digitale, Conseil et expertise Télécom :
mettre à disposition des clients une expertise dans les architectures réseaux.

II. Cahier de charge :

1. Problématique :

La consommation d'énergie toujours un problème précisément dans les chaines de la

production des usines, même si le nombre d'ouvriers diminue au cours de nuit il ‘y a
certain équipement électrique non utilisable mais reste connectés. Qui provoque une
perte Indésirable d'énergie.
Dans ce projet notre problème est :

7
Comment contrôler l’éclairage automatique de chaines de travail ?
De quelle manière on peut effectuer cet éclairage ?
Quelle source d’information peut effectuer cet éclairage ?
Comment suivit l’état de la lumière à distance ?
Dans quel but on contrôle l’éclairage ?

2. Contexte de projet :
Le projet Lightways consiste au premier lieu de développer un application web
permettant de gérer les usines, piloter l’éclairage par le planning horaire ou
manuellement et suivre les états de marche / arrêt des lumières du chaine de travail.
Cette application servira à communiquer avec la box domotique pour est assurée via
WIFI.

La communication entre la centrale domotique et les interrupteurs est assuré via un

câble et/ou WIFI.

Chaque groupe de lampes est raccordé par un interrupteurs spécial programmable, qui
a son tour contrôlé un box domotique.

Aussi que notre travail consiste à synchroniser les données vers une base de données
centralisée pour l’extraction et la réutilisation de ces données.

Ce projet est divisé sur 3 parties :

Développement du partie frontend : la conception de l’interface graphique utilisateur

Le frontend peut se consacrer à l’UI (interface utilisateur) exclusivement sur la base du
développement backend, lequel aura déjà construit toutes les interactions avec la base
de données.
Le développement backend : clé de voûte de l’application web
Le travail du développement backend est invisible pour l’utilisateur final, mais sans son
intervention, pas d’application. La partie backend va construire, développer et mettre en
interaction trois piliers essentiels au fonctionnement de l’application.
Le serveur d’hébergement
L’application web
La base de données
Le serveur est le disque dur sur lequel seront enregistrées votre application, partie
frontend. Tous les fichiers composant les pages, le design, les éléments qui
construisent la partie visible de votre application.
8
  La base de données, quant à elle, est construite par le développeur backend de
sorte à conserver dans des tableaux spécifiques toutes les données nécessaires
au fonctionnement de l’application (ID d’un utilisateur, droits d’utilisateurs,
stockage des mots de passe, etc.).

Pour que la base de données puisse être mise à jour, modifiée, ou que des éléments
(nouvel utilisateur, par exemple) puissent s’intégrer à la base préexistante, le
développeur backend va utiliser des langages dynamiques, lesquels vont connecter la
base de données avec l’application.

La partie embarquée :

Le box domotique présente le lien entre le serveur web et les composants électriques
celui qui permet de prendre les données et transmettre aux composants via une
connexion wifi /câble.

3. Objectif du contrôle de lumière à distance dans une usine :

Lightways Sert à l’économie d’Energie en limitant les zones éclairées aux chaines de
travail fabrication concernées, lumière selon le moment de la journée et
les départements actives Par exemple la nuit, on a évidemment besoin d’une intensité
de lumière plus grande que le matin.

4. IOT et domotique :

La domotique rassemble les différentes techniques qui permettent de contrôler, de

programmer et d’automatiser une habitation, comme son nom l’indique avec le terme
latin domus (domicile) et le suffixe tique (technique). Elle regroupe et utilise ainsi les
domaines de l’électronique, de l’informatique, de la télécommunication et des
automatismes.

Sa fonction est de programmer, de contrôler et d’automatiser, à distance ou sur place,

tous les appareils du domicile intégrés au sein du réseau. Ce dernier fonctionne avec ou
sans fil afin de recevoir et de transmettre des données entre les différents points de
commandes et les appareils à contrôler. Dans le sens inverse, chaque appareil peut
communiquer sur son état de fonctionnement aux points de commandes.

La domotique est permise au moyen d’une mise en réseau des appareils électriques de
l’habitation par une centrale de commande. Cette dernière elle sert d’interface pour
permettre à l’utilisateur de contrôler et de gérer à distance tous les appareils connectés.
Elle remplace les différents dispositifs de gestion des équipements tels que l’éclairage,
le système d’alarme ou les programmateurs et elle rassemble leurs fonctionnalités en
un seul point, gérable à tout moment et en tout lieu.

9
La domotique vous permet de gérer les sources d’énergie de votre domicile. Chauffage,
climatisation, éclairage, ouverture et fermeture des stores, température et remplissage
de l’eau, chargement des appareils fonctionnant sur batterie, etc. Tout est conçu pour
vous faciliter la vie, tenir votre maison prête et confortable pour votre arrivée et vous
permettre de réaliser des économies en programmant ces actions lors des heures
creuses par exemple.

Cette gestion permet de contrôler et de programmer votre à distance, par internet .

III. Conclusion :
Dans ce chapitre, nous avons fait une présentation générale de l’entreprise Telecom for
future, nous avons expliqué son environnement de travail et le contexte du projet. Le
chapitre suivant contiendra une étude plus détaillée de spécification des besoins.

10
 Chapitre 2 : Etude et spécification des besoins

I. Introduction :

Durant ce chapitre nous allons analyser les besoins fonctionnels et non fonctionnels de
notre projet et les besoins matériels. Nous utiliserons le diagramme de cas d’utilisation
d’UML pour modéliser nos besoins.

II. Les besoins fonctionnels :

Toute application doit correspondre aux attentes du client. La phase de spécification des
besoins fonctionnels permet de bâtir la base de l’application. De ce fait, la solution
proposée doit satisfaire d’une façon informelle les fonctionnalités suivantes :

 Gérer les usines : L’administrateur doit pouvoir lister ajouter modifier ou

supprimer des usines.
 Gérer les départements de chaque usine : ajouter un département à
chaque usine et lister modifier supprimer les départements ajoutés.
 Gérer les lignes de la lumière de chaque département : ajouter une ligne à
chaque département et lister modifier supprimer les lignes ajoutées.
 Gérer l’éclairage du la ligne manuellement et suivre leur état.
 Gérer les plannings de chaque ligne : ajouter un planning à chaque ligne
et consulter modifier supprimer les plannings ajoutés.
 Gérer la configuration du planning de chaque ligne : Le planning est
configuré d’abord selon une configuration des créneaux qui s’e ffectuée à
travers différents paramètres (heure du début d’éclairage, heure de la fin
d’éclairage, durée d’éclairage.).
 Gérer l’éclairage du ligne avec le planning : éclaircir la ligne selon l’état du
planning et la synchronisation du système chaque minute.
 Gérer l’historique : consulter toute modification annulation, ajoute ou
changement d’état.

11
 1. Digrammes des cas d’utilisation :
En langage UML, le diagramme de cas d’utilisation permet de modéliser le
comportement d’un système et de dégager ses exigences. Les diagrammes de cas
d’utilisation décrivent les fonctions générales de l’application ainsi que les interactions
entre le système et les acteurs.

Pour notre système, nous avons distingué les acteurs suivants :

L’administrateur : c’est un acteur qui aura le rôle de déclencheur toutes les

fonctionnalités de notre application.

L’utilisateur : c’est un acteur qui a l’accès à des fonctionnalités précises

a. Diagramme du cas d’utilisation général :

La figure ci-dessous représente le diagramme de cas d’utilisation général, ce

diagramme sera étalé sur plusieurs sous cas d’utilisation représentant le raffinement de
chaque cas d’utilisation.

12
 Figure 1 : Diagramme du cas d'utilisation « générale »
b. Diagramme du cas d’utilisation d’authentification :

13
 Figure 2:Diagramme du cas d'utilisation « authentification »

 Description textuelle de cas d’utilisation « authentification » :

Description du diagramme d'authentification

Acteur Administrateur Utilisateur

Précondition Faire un compte:

s’enregistrer

Scenario principal 1-Remplir le formulaire Accéder à l’application

d’enregistrement :

14
 Saisir le non email et mot
de passe
2-Remplir le formulaire
d’identification :
Email et mot de passe
3-Accéder à l’application
Scénario alternatif Le mot de passe est
crypté dans la base de
données.
Post condition Accéder aux gestions Accéder aux gestions
des usines. des usines.

Tableau 1:description du diagramme d'authentification

15
 c. Diagramme du cas d’utilisation de gestion des usines :

Figure 3:diagramme du cas d'utilisation « gestion des usines »

 Description textuelle de cas d’utilisation « gestion des usines » :

Diagramme de gestion des usines

Acteur Administrateur Utilisateur

Précondition L’administrateur doit L’utilisateur doit

s’authentifier afin s’authentifier afin
d’accéder à l’application. d’accéder à l’application.

16
Scenario principal 1-l’administrateur accède L’utilisateur accède à la
à la liste des usines. liste des usines.
2- il effectuée une action
d’ajoute, modification, ou
suppression
Scénario alternatif

Post condition Accéder à la liste des Accéder à la liste des

départements de chaque départements de chaque
usine. usine.

Tableau 2:description du diagramme de gestion des usines

d. Diagramme du cas d’utilisation de gestion des départements :

Figure 4:diagramme du cas d'utilisation « gestion des départements »

17
 Description textuelle du cas d’utilisation de gestion des départements :

Description du diagramme de gestion des départements

Acteur Administrateur Utilisateur

Précondition L’administrateur doit L’utilisateur doit

s’authentifier afin s’authentifier afin
d’accéder à l’application. d’accéder à l’application.

Scenario principal 1-l’administrateur accède L’utilisateur accède à la

à la liste des liste des départements.
départements.
2- il effectuée une action
d’ajoute, modification, ou
suppression
Scénario alternatif Accéder aux listes des Accéder aux listes des
départements par départements par
l’identifiant de chaque l’identifiant de chaque
usine. usine.
Post condition Accède à la liste des Accède à la liste des
lignes de chaque lignes de chaque
département département

Tableau 3 : Description du cas d’utilisation de gestion des départements

18
 e. Diagramme du cas d’utilisation de gestion des lignes :

*Figure 5:diagramme du cas d'utilisation « gestion des lignes »

 Description textuelle de cas d’utilisation :

Description du diagramme de gestion des lignes

Acteur Administrateur Utilisateur

Précondition L’administrateur doit L’utilisateur doit

s’authentifier afin s’authentifier afin
d’accéder à l’application. d’accéder à l’application.

19
Scenario principal 1-l’administrateur accède Controller manuellement
à la liste des lignes. les lignes.

2- il effectuée une action

d’ajoute, modification, ou
suppression.

3-eclaircir la ligne
manuellement
Scénario alternatif Accéder aux listes des Accéder aux listes des
lignes par l’identifiant de lignes par l’identifiant de
chaque département chaque département
Post condition Ajouter planning aux
chaque lignes

Tableau 4:description du diagramme du cas d'utilisation « gestion des lignes »

20
 f. Diagramme du cas d’utilisation de gestion des plannings :

Figure 6:diagramme du cas d'utilisation « gestion des plannings  »

Description textuelle de cas d’utilisation « gestion des plannings » :

Description du diagramme de gestion des planning

Acteur Administrateur Utilisateur

Précondition L’administrateur doit

s’authentifier afin
d’accéder à l’application.
Scenario principal 1-l’administrateur
configurer le planning de
chaque ligne.

21
 2-consulter les
plannings.
Scénario alternatif Ajouter un planning à
chaque ligne par leur
propre identifiant.
Post condition Configurer le planning.

Tableau 5:description diagramme du cas d'utilisation gestion des plannings

g. Diagramme du cas d’utilisation de configurer des plannings :

Figure 7:diagramme du cas d'utilisation  « configurer des plannings  »

 Description textuelle de cas d’utilisation :

22
 Description du diagramme de Configurer les planning

Acteur Administrateur Utilisateur

Précondition L’administrateur doit

s’authentifier afin
d’accéder à l’application.
Scenario principal 1- saisir la date de début
et la date de fin
d’éclairage.

2-le planning mis ajour

chaque minute pour
vérifier son état s’il est
actif ou désactive.

3-la ligne s’allume par le

planning à configurer.
Scénario alternatif Comparer les dates de
l’éclairage par la date
actuelle du système.
Post condition Consulter les plannings

Tableau 6:description du cas d'utilisation consulter des plannings

23
h. Diagramme du cas d’utilisation de consulter des plannings :

Figure 8:diagramme du cas d'utilisation « consulter les plannings »

 Description textuelle de cas d’utilisation :

Description du diagramme de Consulter les planning

Acteur Administrateur Utilisateur

Précondition L’administrateur doit

s’authentifier afin
d’accéder à l’application

24
Scenario principal 1- accéder aux listes des
plannings.

2-Il effectuée une action

d’ajoute, modification, ou
suppression.
Scénario alternatif Accéder aux listes des
plannings du chaque
ligne par leur propre
identifiant
Post condition Consulter l’historique.

Tableau 7:description du cas d'utilisation « consulter le planning »

i. Diagramme du cas d’utilisation de consulter l’historique :

Figure 9:diagramme de cas d’utilisation « consulter l’historique »

25
  Description textuelle de cas d’utilisation :

Description du diagramme de consulter l'historique

Acteur Administrateur Utilisateur

Précondition L’administrateur doit

s’authentifier afin
d’accéder à l’application.
Scenario principal Consulter tous les
changements d’état, la
période d’éclairage des
lignes et consulter toutes
les modifications des
objets.
Scénario alternatif Les données sont
répliquées et
synchronisées dans la
base de données.
Post condition Les données sont
répliquées et
synchronisées dans la
base de données.

Tableau 8:description du cas d'utilisation « consulter l'historique »

III. Les besoins non fonctionnels :

La spécification des besoins non fonctionnels sont toutes les spécifications qui
n’expriment pas une fonction du l’application. Ces spécifications, ne sont pas
rattachées à un cas d’utilisation particulier, mais ils caractérisent toute l’application.
Ils expriment les contraintes du l’application donc il doit garantir les besoins
opérationnels suivants :

 Contraintes techniques :
L’application doit garantir la sécurité à travers la gestion des droits d’accès, L’accès à la
base de données doit être souple et rapide, L’application doit être toujours fonctionnelle,
Le choix se fera parmi une liste de valeur rattaché aux champs afin d’assurer le contrôle
de la saisie, Espace de stockage des données suffisant, L’application doit détecter la
présence d’une connexion internet, Temps de réponse minimum, Communiquer des

26
données entre deux environnements hétérogènes : Protocole de communication, format
des données..
 Contraintes économiques :
L’interface de notre future application doit respecter la charte graphique d’une
application embarquée
L’utilisateur doit être guidé lors de la saisie de certaines informations, afin de respecter
les formats des champs de notre base de données.

IV. Les besoins matériels :

Durant notre recherche sur la carte électronique convenable, nous avons constaté qu’au
cours des dernières années, de nombreuses cartes de développement modulaire sont
apparues. Chaque carte présente des avantages et des inconvénients. Elles se différent
par leurs fonctionnalités leurs complexités et leurs prix.
Description des carte électroniques :

1. La carte Arduino :

Les cartes Arduino possèdent un microcontrôleur facilement programmable ainsi que de

nombreuses entrées-sorties.
 Elle est la carte la plus couramment utilisée.  Plusieurs cartes Arduino existent et
qui se différencient par la puissance du microcontrôleur ou par le nombre d’e/s. 
L'ensemble des cartes Arduino se programment en C à l'aide d'un logiciel de
programmation gratuit et open-source fourni par Arduino (IDE).

Figure 10:logo carte Arduino

2. La carte WeMos D1 mini :

La WeMos D1 mini est une carte de développement ESP8266 compacte, polyvalente et

très facile à prendre avec l’IDE Arduino ou Platform IO. Elle est naturellement supportée
par le SDK d’Expressif. L'avantage du WeMos du mini-rapport au développement,

27
ESP8266 résident dans les nombreuses cartes d’extension (Shields) qui ont été
développées par Chinoise Wemos.cc.

Figure 11:logo carte WeMos D1 mini

3. La carte STM32F4 DISCOVERY :

Cette carte s’apparente à l’Arduino UNO (carte embarquée la plus courante chez
Arduino), mais possède des caractéristiques beaucoup plus intéressantes et un prix
cinq fois moins élevé avec une taille identique. Se représente en fait un produit idéal
pour commencer la programmation embarquée pour les débutants, tout en restant très
intéressant pour les experts grâce à sa puissance de calcul supérieure.

 STM32F4 fonctionne à une fréquence plus élevée de 168 MHz,  prend en charge
des instructions DSP en un seul cycle.  dispose d’une unité de calcul en virgule
flottante FPU  Elle est construite autour d’un microcontrôleur ARM Cortex
M4FSTM32F407VGT6 contenant 1 Mo de Flash, 192 Ko de RAM, des périphériques
avancés pour les applications d’imagerie, de connectivité, d’encryptage.

Figure 12:logo carte STM

4. La carte zedboard :

ZedBoard est une carte d’évaluation et de développement basé sur le Xilinx ZynqTM-
7000 All Soc programmable (AP Soc). Combinaison d'un double système de traitement
Corex-A9 (PS) avec 85 000

28
Les cellules logiques programmables (PL) Série-7, le Soc AP Zynq-7000 peuvent être
ciblées de nombreuses applications. Le solide mélange de périphériques embarqués et
d'extension du ZedBoard Ses capacités en font une plate-forme idéale pour les
concepteurs novices et expérimentés.  Cette carte contient tous les éléments requis
pour créer une conception Linux, Android,
Windows ou autre OS/RTOS et profitez du système de traitement ARM solidement
associé au Soc Zynq7000 et de la série 7 de logique programmable pour créer des
conceptions uniques et puissantes.
Plusieurs connecteurs d'extension exposent le système de traitement et les E/S de
logique programmable pour faciliter l'accès aux utilisateurs.

Figure 13: logo carte zedboard

5. La carte Beagle Bone Black :

La nouvelle carte est basée sur la Beagle Bone Black et se présente comme un
ordinateur Linux facile à utiliser qui intègre une connectivité Wi-Fi et Bluetooth et un
grand nombre d’E/S pour des applications à base de capteurs et dispositifs de
commande. Elle est également idéale pour le développement d’applications connectées,
dont des nœuds et des plateformes IoT, s’appuyant sur des plateformes logicielles
open-source telles que Debian, Android et Ubuntu.
La carte intègre une fonctionnalité de mise en réseau sans fil haute performance offrant
à la fois le Wi-Fi 2.4GHz 802.11b/g/n et le Bluetooth, et assure une connectivité
Ethernet-10/100. Cependant, comme la BeagleBone Black, cette version sans fil
conserve la sortie HDMI, le port de débogage série, l’interface PC USB, l’hôte USB 2.0,
les boutons de réinitialisation et de mise en marche, et ajoute deux LED d’indication
d’état pour le Wi-Fi et le Bluetooth.
Le processeur principal est un Sitara AM335x de TI cadencé à 1GHz, qui intègre un
cœur de processeur basé sur un ARM Cortex-A8. La carte offre aussi deux
microcontrôleurs 32 bits à PRU
(Programmable Real-Time Unit), une connectivité micro-HDMI, 512Mo de DDR3 RAM,
et 4Go de stockage en mémoire flash embarquée eMMC, qui comprend Debian Linux
préinstallé.

29
 Figure 14:logo carte Beagle Bone Black

6. Comparaison technique entre ces cartes de

développement :

Nom de la Arduino Stm32 F4 Raspberry BeagleBone ZedBoard

carte Uno Discovery pi3
Modèle B +
Fabricant Arduino.cc STMicroelectroni Raspberry pi BeagleBoard. ZedBoard.or
cs foundation Org g
Taille la carte 45,43*32,34m 97*66mm 85,60*53,95m 86,36*53,34m 152,4*127m
m m m m
Prix 50dt 120dt 200dt 200dt 1200dt

Microcontrôle Microcontrôle ARM cortex Mf4 BCM2835 Sitara335x sur Soc

ur ur CPU intégré un cortex M8 Zynq7000
XC7Z020-
CLG484-1
Système RTOS RTOS Linux Linux Linux
d’exploitation
RAM 3Ko 192Ko 1Go 512Mo 512Mo

Mémoire flash 32Ko 2048Ko Micro SD Micro SD 4Go 256Mo

32Go
Wifi Non Non Oui Oui

Ethernet Non Non Oui Oui Oui

Tension 7v-12v 3v-5v 5v 5v 5v

d’entrée
Port USB Non Micro USB 4 2 2

Tableau 9:comaraison technique des cartes

V. Conclusion :

30
Dans ce chapitre, nous avons détaillé les besoins fonctionnels, nous avons spécifier les
besoins non fonctionnels et nous avons cité les choix du besoins matériels. Dans le
chapitre suivant, nous allons entamer la conception de l’application

31
 Chapitre 3 : Conception
I. Introduction :
La phase de conception permet de détailler et structurer les besoins vus dans le
chapitre deux. Nous allons décrire la phase de conception du pour apporter plus de
détails sur les fonctionnalités du système ainsi que chercher à clarifier les aspects
techniques.

II. Conception globale du projet :

La partie conception présente la partie la plus importante avant la phase de réalisation.
Tout d’abord, nous allons définir les langages UML et les diagrammes nous verrons par
la suite comment ce langage peut contribuer pour la conception de notre système.

III. Architecture générale du projet Lightways :

Figure 15:architecture générale du projet Lightways

1. Description des composants :

32
Raspberry : c’est une carte intelligente qui va récupérer les données de la base de
données à travers un web service et l’envoyer vers la carte Nodemcu d1 mini.
Nodemcu d1 mini : c’est une carte avec un module wifi esp 8266 permet de
réceptionner les données du carte Raspberry.
Base de données : où les données sont stockées.
Lampes :

2. Conception détaillé :

a. Diagramme de déploiement :
Le diagramme de déploiement UML montre l'architecture d'exécution de systèmes qui
représentent l'affectation (déploiement) des artefacts logiciels à des cibles de
déploiement. Il est utilisé pour visualiser la topologie des composants physiques d'un
système dans lequel les composants logiciels sont déployés. Les diagrammes de
déploiement sont très utiles pour décrire les composants matériels où les composants
logiciels sont déployés. Le diagramme de déploiement permet également de modéliser
l'aspect physique d'un système du logiciel orienté objet.

La figure Présente le diagramme de déploiement de notre application :

33
 Figure 16:diagramme de déploiement
b. Diagrammes de classes :
Un diagramme de classes fournit une vue globale d’un système. Il permet de
représenter les attributs et les méthodes des classes ainsi que les relations entre elles.
Ce diagramme est statique c’est-à-dire qu’il permet d’afficher les liens structurels entre
les classes qui composent le système mais il n’illustre pas ce qui se passe pendant les
interactions.

34
Figure 17:diagramme de class

35
 c. Diagrammes de séquences :
Diagramme de séquence UML

Un diagramme de séquence UML est un diagramme d'interaction qui montre comment

les procédés fonctionnent avec l'autre et dans quel ordre. Les diagrammes de séquence
UML sont utilisés pour montrer comment les objets interagissent dans une situation
donnée. Une caractéristique importante d'un diagramme de séquence est que le temps
passe de haut en bas, à savoir, l'interaction commence près de la partie supérieure du
diagramme et se termine à la partie inférieure.

Le diagramme ci-dessous montre comment notre système gère les processus

d’enregistrement et de connexion utilisateur :

Figure 18:diagramme séquentiel « enregistrer identifier »

d. Diagrammes d’activités :

Diagramme d'activité UML

Le diagramme d'activité UML est un diagramme important dans UML pour décrire les
aspects dynamiques du système. Le diagramme d'activité UML est essentiellement un
diagramme de flux et elle illustre le caractère dynamique d'un système. Dans UML, un
diagramme d'activité est utilisé pour afficher la séquence des activités.

36
Les diagrammes d'activité UML sont utiles pour la modélisation d'entreprise où ils sont
utilisés pour détailler les processus impliqués dans les activités commerciales. Les
diagrammes d'activités UML Edraw vous permettront de penser plus fonctionnellement
en vous aidant à décrire le flux du contrôle du système cible, la méthode, la fonction ou
le fonctionnement des logiciels, etc.
Ceci est un diagramme d’activité pour les classes Spring Security / JWT qui sont séparées en 3
couches :
- HTTP
- Spring Security
- API REST

Figure 19:diagramme d'activité « authentification avec Spring Security et Json Web

Token »
Diagramme de Spring Security conçue pour l’authentification JWT, qui nous aide à sécuriser nos
API REST avec l’authentification JWT (jeton Web JSON).
Description diagramme d’activité d'authentification JWT de Spring Security :

37
  Recevoir une requête HTTP
 Filtrer la demande
 Créer une authentification à partir d'un jeton
 Objet d'authentification de magasin dans SecurityContext
 Déléguer AuthenticationToken pour AuthenticationManager
 Authentifier avec AuthenticationProvider
 AuthenticationProviders
 DaoAuthenticationProvider
 Récupérer les détails de l'utilisateur avec UserDetailsService
 Obtenir une autorisation
 Protégez les ressources avec les expressions HTTP Security & Method Security
 Configurer HTTP Security
 Méthode Expressions de sécurité
 Gérer AuthenticationException – AuthenticationEntryPoint

IV. Conclusion :
Dans ce chapitre, nous avons exposé les différents diagrammes élaborés lors d’une
étude conceptuelle du projet. Cette étude adoptée facilite par la suite la réalisation de
l’application, qui sera par la suite le contenu de notre quatrième chapitre.

38
 Chapitre4 : Implémentation et réalisation
I. Introduction :
Dans ce dernier chapitre, nous allons détailler la dernière phase de la méthodologie du
processus simplifié. En effet, nous allons exposer notre projet par une vue sur
l’environnement logiciel et matériel du projet. En fin, nous allons exposer un scénario
d’exécution de notre projet.

II. Les technologies de la Construction de la partie beckend du

l’application web :

1. Apache Tomcat 8 :

Le logiciel Apache Tomcat 8 est une implémentation open source des technologies Java
Servlet, Java Server Pages, Java Expression Language et Java WebSocket. Les
spécifications Java Servlet, Java Server Pages, Java Expression Language et Java
Web Socket sont développées dans le cadre du processus de la communauté Java.

Apache Tomcat Maven Plugin fournit des objectifs pour manipuler des projets WAR
dans le conteneur de servlets Apache Tomcat. Vous pouvez exécuter votre projet WAR
Apache Maven via Apache Maven sans déployer votre fichier WAR sur une instance
Apache Tomcat.

2. Spring Boot Framework :

Figure 20:logo apache Tomcat
Spring Boot est le point de départ de la création de toutes les applications Spring. Il est
conçu pour vous permettre de démarrer le plus rapidement possible, avec une
configuration initiale minimale de Spring.

Ce n’est pas un Framework, du moins pas comme un Spring Security, Guava, ou autre
mais c’est un générateur de code autrement dit, Spring Boot fait partie intégrante du
projet, y compris lors de l’exécution de l’application. C’est un outil de maquettage, il sert
à faire des applications.

Spring boot simplifie la vie du développeur en :

39
  Déploiement d’une application avec Spring Boot
 Autoconfigurant les composants qui sont détectés sur le classpath (par exemple,
si Spring Boot détecte le driver Java de Mongo, ou un driver JDBC, ou Tomcat,
etc., alors il configure automatiquement un ensemble de Bean (au sens Spring)
pour utiliser ces composants)
 Permettant de personnaliser les composants, pour passer outre l’auto
configuration.
 Simplifiant la gestion des propriétés provenant de sources différentes
 Exposant des points d’entrées pour la surveillance de l’application
 Simplifiant le déploiement (un jar unique, ou un WAR pour Tomcat)

Figure 21:logo Spring Boot Framework

3. Spring Initializer:

Spring Initializer fournit une interface utilisateur Web simple et intuitive pour créer,
configurer et générer une application Spring. Cet outil permet aux développeurs de
générer facilement une structure de projet initiale sans se soucier de la structure et des
dépendances du projet. Sur un niveau élevé, les outils Spring Initializer s’occupent des
points suivants pour toute application Spring.

Figure 22:Logo Spring Initializr

40
Pour créer un projet basé sur Spring Boot, visitez Spring Initializr, renseignez les détails
du projet, choisissez vos options, ajouter toutes les dépendances nécessaires
télécharger un fichier de construction Maven ou un projet fourni sous forme de fichier
zip.

Le plugin Spring Boot Maven fournit de nombreuses fonctionnalités pratiques :

 Il collecte tous les fichiers jar du chemin de classe et crée un seul fichier jar
exécutable, ce qui le rend plus pratique pour exécuter et transporter votre
service.
 Il gère le fichier pom.xml de la liste de dépendances :
o Spring boot :

Noyau de base, comprenant la prise en charge de la configuration automatique, la

journalisation et YAML

o Web :

Démarreur pour la création d'applications Web, y compris RESTful, utilisant Spring

MVC. Utilise Tomcat comme conteneur incorporé par défaut

o Dev Tools :

Spring Boot comprend un ensemble d’outils supplémentaire qui peut rendre l’expérience
de développement d’applications un peu plus agréable. Le module spring-boot-devtools
peut être inclus dans tout projet pour fournir des fonctionnalités supplémentaires au
moment du développement.

o MongoDB :
Démarreur pour utiliser la base de données orientée document MongoDB et
Spring Data MongoDB
o Spring Security
o Json web Token

4. MongoDB Compass Community :

Le moteur de la base de données MongoDB. Il a été choisi pour sa capacité à gérer

des documents très rapidement, Gérer de gros volumes, Facilité de déploiement et
d’utilisation Possibilité de faire des choses complexes tout de même.
MongoDB est un gestionnaire de base de données par documents, et non relationnel.
On ne parle plus de tables, ni d'enregistrements mais de collections et de documents.
Ce système de gestion de données nous évite ainsi de faire des jointures de tables

41
car toutes les informations propres à un certain donnée sont stockées dans un même
document sous un style JSON.
Aussi, son langage d’interrogation n’est pas le SQL mais un ensemble de méthodes
dont la sémantique est proche. L’avantage majeur du choix d’un moteur NoSQL est
que chaque élément d’une même collection peut avoir un schéma diffèrent et il
devient ainsi possible de stocker ce que l’on souhaite à n’importe quel moment.

Figure 23:logo MongoDB

5. Spring Tools suite:

Spring Tools suite est un plugin qui permet le support de Spring dans Eclipse. Il se base
sur le plugin Spring IDE.
Les fonctionnalités de base de SpringSource Tool Suite sont :
Gérer la déclaration de beans Spring dans les fichiers XML.
Liste toutes les propriétés possibles
Réside dans la recherche de beans Spring, l’auto-complétions et la détection d’erreurs
dans la configuration qui n'apparaissent habituellement qu’au démarrage de l’application
ou dans les tests unitaires.

Figure 24:logo IDE Spring Tools suite

Vous pouvez exécuter une application Spring Boot à partir de votre IDE en tant
qu'application Java simple. Cependant, vous devez d'abord importer votre projet. Les
étapes d'importation varient en fonction de votre IDE et du système de construction.

Sélectionner Importer… → Projets Maven existants dans le menu Fichier.

42
 Figure 25:import Maven

Figure 26:chercher existing Maven projet

Figure 27:importer le fichier Maven. Jar

43
Il a créé automatiquement une classe d’application void main :

Figure 28:la classe principale « main »

6. Spring data Mongo Repository :

Spring Data est un projet qui regroupe de nombreux sous-modules, chacun spécifique à
une base de données particulière.
L'interface centrale dans l'abstraction du repository Spring Data est Repository. Il est
facile à gérer pour la classe de domaine de gérer ainsi que le type id de la classe de
domaine. Cette interface sert principalement d'interface de marqueur pour capturer les
types à traiter et nous aide lors de la découverte d'interfaces qui étendent celui-ci. En
plus de cela, CrudRepository fournit des opérations de création, de lecture, de mise à
jour.

Figure 29:Spring Data MongoDB

Créer MongoDB repository extends interface Mongo Repository pour implementer

44
Les CRUD opérations : Save () Delete () findby () update () pour implémenter cette
interface en utilisant la dépendance spring data mongo repository.
Créer les document (class model)111

Figure 30:les documents Java

Définir les Controller pour la récupération suppression et ajoute des données :

Figure 31:les contrôleurs java

Utiliser les repository de chaque document :

Pour créer document utiliser la méthode (méthode Save) et le mapping Post.

Modifier document avec la méthode update() PUT mapping :

Lister le document avec la méthode find by() et le mapping Get :

Supprimer document avec la méthode Delete ()et le mapping Delete

 Les annotations :

L’annotation @SpringBootConfiguration indique qu'une classe fournit une application

Spring Boot. Ne devrait être déclaré qu'une seule fois dans un projet, habituellement
automatiquement en utilisant @SpringBootApplication

45
@PathVariable : identifie le modèle qui est utilisé dans l'URI pour la demande entrante

@Id : Démarque un identifiant

@RequestBody : indiquant un paramètre de méthode doit être liée au corps de la

requête Web. Le corps de la requête est passé par un HttpMessageConverter pour
résoudre l'argument de la méthode en fonction du type de contenu de la requête.

@Autowired : pour effectuer une injection de constructeur fonctionne bien.

@RequestMapping : fournit des informations de « routage ». Il indique à Spring que

toute requête HTTP avec le chemin / doit être mappée à la méthode home. L'annotation
@RestController indique à Spring de restituer la chaîne résultante directement à l’appel.

@Cross Origin : active les demandes d'origine croisée uniquement pour cette méthode
spécifique. Par défaut, son autorise toutes les origines, tous les en-têtes et les
méthodes HTTP spécifiées dans la @RequestMappingannotation.

La planification est un processus d'exécution des tâches pour une période donnée.
Spring Boot fournit un bon support pour écrire un planificateur sur les applications
Spring.

Expression Java Cron :

Les expressions Java Cron permettent de configurer les instances de CronTrigger, une
sous-classe de org. quartz. Trigger.

L'annotation @EnableScheduling permet d'activer le planificateur pour votre application.

Cette annotation doit être ajoutée dans le fichier de classe de l'application Spring Boot
principale.

Configurer la base mongo application. Properties

Figure 32:configurer la base de données Mongo

7. Sécurité de l’application web :

46
Les services web et les pages servies ne sont pas sécurisées. Pour mettre en place la
sécurité, on ajoute starter Spring Boot Security et l'authentification JWT (JSON Web
Token).

Ensuite, en fonction du rôle de l'utilisateur actuel (utilisateur ou admin), ce système

accepte ce à quoi il peut accéder.

Annotation @EnableWebSecurity 

L'annotation Spring @Bean indique qu'une méthode produit un Bean à gérer par le
conteneur Spring. C'est une annotation au niveau de la méthode.
a. Spring Security :

Spring Security est un cadre d’authentification et de contrôle d’accès puissant et

hautement personnalisable. C'est la norme de facto pour la sécurisation des
applications basées sur Spring.

Spring Security est une infrastructure qui fournit à la fois l’authentification et

l’autorisation aux applications Java. Comme tous les projets Spring, la véritable force de
Spring Security réside dans la facilité avec laquelle elle peut être étendue pour répondre
aux exigences personnalisées.

Fonctionnalités :

Prise en charge complète et extensible pour l'authentification et l'autorisation

Protection contre les attaques telles que la fixation de session, le détournement de clic,
la falsification de requêtes intersites, etc.

Intégration de l'API Servlet.

Figure 33:logo Spring Security

b. JSON Web Token:

47
JWT est un standard, ce qui signifie que tous les JWT sont des jetons, mais que tous les
jetons ne sont pas des JWT. Les JWT peuvent être utilisés de différentes manières :

Authentification : lorsqu'un utilisateur se connecte avec succès à l'aide de ses

informations d'identification, un jeton d'ID est renvoyé. Selon les spécifications Open ID,
un jeton d'identification est toujours un JWT.

Autorisation : une fois qu'un utilisateur est connecté avec succès, une application peut
demander à accéder à des itinéraires, des services ou des ressources pour le compte
de cet utilisateur. Pour ce faire, il utilise un jeton d'accès, qui peut être sous la forme
d'un JWT. Chaque demande ultérieure inclut le jeton d'accès. Single Sign On utilise
largement JWT en raison de la légère surcharge du format et de sa capacité à être
facilement utilisé dans différents domaines.

Échange d’informations : les JWT sont un bon moyen de transmettre des informations
en toute sécurité entre les parties, car elles peuvent être signées, ce qui signifie que
vous pouvez être sûr que les expéditeurs sont bien ce qu'ils prétendent être. De plus, la
structure d'un JWT vous permet de vérifier que le contenu n'a pas été falsifié.

Figure 34: logo Json Web Token

Les annotations:

L'annotation Spring @Bean signifie qu'une méthode produit un Bean à gérer par le
conteneur Spring. C'est une annotation au niveau de la méthode.

@Configuration: Utilisé pour déclarer une ou plusieurs méthodes @Bean. Peut être
sélectionné par balayage automatique de paquets afin de déclarer les différentes
méthodes @Bean au lieu de la configuration xml traditionnelle.

Annotations (@Configuration et @EnableWebSecurity) et une extension de

WebSecurityConfigurerAdapter tout ce qu’il fait de la classe de configuration de Spring
Security au sein de l’application.

Cryptage de mot de passe pendant l’enregistrement à l’application avec le postmapping

(/ registre)

Figure 35:mot de passe crypté

Autorisation avec jwt :
Création du token pendant l’identification avec le postmapping(/login)
48
 Figure 36:autorisation « ADMIN »

Sécurité de l’application web :

Les services web et les pages servies ne sont pas sécurisées. Pour mettre en place la
sécurité, on ajoute starter Spring Boot Security et l'authentification JWT (JSON Web
Token).
Ensuite, en fonction du rôle de l'utilisateur actuel (utilisateur ou admin), ce système
accepte ce à quoi il peut accéder.

Figure 37:autorisation "USER"

III. Les technologies de la Construction du partie frontend du

l’application web :

1. Angular 7 :

Angular est une plate-forme qui facilite la création d'applications avec le Web. Angular
combine des modèles déclaratifs, une injection de dépendance, des outils de bout en
bout et des meilleures pratiques intégrées pour résoudre les problèmes de
développement. Angular permet aux développeurs de créer des applications
compatibles avec le Web, le mobile ou le bureau.

49
 Figure 38:logo Framework angular 7
a. Installer Angular:

Install Node.js
Install Angular:
npm install -g @angular/cli

Figure 39:architecture angular

b. Création des composants :

Une grande partie du développement avec Angular 7 se fait dans les composants.
Les composants sont essentiellement des classes qui interagissent avec le
fichier .html du composant, qui est affiché sur le navigateur.

c. Créations des Services :

Dans Angular, nous pouvons avoir des scénarios dans lesquels du code doit être
réutilisé dans plusieurs composants. Par exemple, une connexion de données qui
récupère les données d'une base de données peut être nécessaire dans plusieurs
composants. Ceci est réalisé en utilisant des services.

50
 d. Créer un service Http Client :

Ce service aura le http Client et sera responsable de l'appel des demandes HTTP
GET à l'application backend Spring Boot. Dans Angular, un service est écrit pour
toutes les préoccupations transversales et peut être utilisé par plusieurs composants.

e. Routage :

Le routeur angular 7 est un élément essentiel de la plate-forme angulaire. Il permet

aux développeurs de créer des applications à une seule page avec plusieurs états et
vues utilisant des itinéraires et des composants, ainsi que la navigation côté client et
le routage entre les différents composants. Il est construit et maintenu par l’équipe
centrale derrière le développement angulaire et est contenu dans le paquet @
angular- / router.

Fonctionnalités :

 Utiliser l'historique de leur navigateur (e.g. les boutons back et next),

 Partager des liens,
 Ajouter une vue à leurs favoris,
 Ouvrir une vue dans une nouvelle fenêtre via le menu contextuel,

 Paramètres de route :

Les itinéraires dynamiques sont souvent utilisés dans les applications Web pour
transmettre des données (paramètres) ou des états à l'application ou entre divers
composants et pages. Le routeur angulaire prend en charge les chemins
dynamiques et fournit une API facile à utiliser pour accéder aux paramètres de
route dans le module app. Module.ts

{path: 'factorydetails/:id’, component: factorydetailsComponent}

 Les directives de navigation :

Angular Router fournit deux directives pour la navigation : la directive router Link
qui remplace l'attribut href dans les balises <a> pour créer des liens et
routerLinkActive pour marquer le lien actif.

f. Modele :

Modele (Template) combine HTML avec un balisage angulaire pouvant modifier les éléments
HTML avant leur affichage. Les directives de modèle fournissent une logique de programme et
le balisage de liaison relie vos données d'application et le DOM. Il existe deux types de liaison
de données :

51
La liaison d'événement permet à votre application de répondre aux entrées de l'utilisateur dans
l'environnement cible en mettant à jour les données de votre application.
La liaison de propriété vous permet d'interpoler les valeurs calculées à partir des données de
votre application dans le code HTML

g. Local Storage et session Storage :

Local Storage et session Storage, une partie de l'API de stockage Web, sont deux
excellents outils pour enregistrer les paires clé / valeur localement. Si vous cliquez sur le
bouton Sauvegarder en haut de ce message, local Storage est utilisé pour stocker vos
messages sauvegardés.
Local Storage et session Storage offrent des avantages par rapport à l'utilisation de
cookies :
Les données sont enregistrées localement uniquement et ne peuvent pas être lues par
le serveur, ce qui élimine le problème de sécurité que les cookies posent.
Cela permet de sauvegarder beaucoup plus de données (10 Mo pour la plupart des
navigateurs).
C’est plus simple à utiliser et la syntaxe est très simple.
Il est également pris en charge par tous les navigateurs modernes. Vous pouvez donc
l'utiliser aujourd'hui sans problème. Évidemment, comme les données ne peuvent pas
être lues sur le serveur, les cookies ont toujours une utilité, notamment en ce qui
concerne l’authentification.

52
 Figure 40:architecture angular frontend avec autorisation

2. Les interfaces de l’application web :

3. Autres logiciels :

a. Postman :

Postman est actuellement l'un des outils les plus populaires utilisés dans les tests d'API.
API signifie (Application Programming Interface), qui permet aux applications logicielles
de communiquer entre elles via des appels API.

La gestion d’environnements. Une même API peut être déployée sur différents
environnements (dev, prod, …). Dans ce cas, certains éléments pourront être
variabilisés et ainsi permettre de conserver un même ensemble logique de requêtes,
alimentées de ces éléments sur simple sélection de l’environnement désiré.

Chaque requête peut être documentée au sein même de Postman, tout comme la
collection elle-même. Le tout peut être partagé pour faciliter le travail collaboratif, soit
uploadé sur la plateforme en ligne de Postman (et rendu privé ou public selon le choix)
ou exporté sous forme d’un fichier JSON.

53
 Figure 41:logo Postman
b. Visual studio:

Visual Studio .NET est un environnement de développement intégré à Microsoft qui peut
être utilisé pour développer des consoles, des interfaces utilisateur graphiques, des
Windows Forms, des services Web et des applications Web.

Visual Studio est utilisé pour écrire du code natif et du code géré pris en charge par
Microsoft Windows, Windows Mobile, Windows CE, .NET Framework, .NET Compact
Framework et Microsoft Silverlight. L'éditeur de code de Visual Studio .NET prend en
charge IntelliSense et le refactoring de code, tandis que le débogueur intégré Visual
Studio .NET prend en charge le débogage au niveau de la source et de la machine.
Visual Studio .NET inclut d'autres outils intégrés, tels qu'un concepteur de formulaire, ce
qui est utile lors de la création d'applications à interface graphique. Un concepteur Web
qui crée des pages Web dynamiques ; un concepteur de classe utilisé pour créer des
bibliothèques personnalisées et un concepteur de schéma pour la prise en charge de la
base de données.

Figure 42:logo Visual studio

c. Bootsrap4:

Bootstrap est un Framework composé principalement d’une feuille de style CSS prête à

l’emploi accompagnée d’un peu de javascript. Elle fournit un certain nombre de styles
par défaut dont certains permettent de définir des écrans RWD.

54
 Figure 43:logo bootstrap4

d. Node.js

Node.js (Node) est une plate-forme de développement open source permettant

d'exécuter du code JavaScript côté serveur. Node est utile pour développer des
applications nécessitant une connexion persistante du navigateur au serveur et est
souvent utilisé pour des applications en temps réel telles que la discussion en ligne, les
flux de nouvelles et les notifications Web push.

Figure 44:logo Nodejs

e. NPM :

Npm est le gestionnaire de paquets officiel de Node.js. Depuis la version 0.6.3 de

Node.js, npm fait partie de l'environnement et est donc automatiquement installé par
défaut. Npm fonctionne avec un terminal et gère les dépendances pour une application.
Il permet également d'installer des applications Node.js disponibles sur le dépôt npm.

Figure 45:logo Npm

55
 f. Edraw Max :

Edraw Max est un logiciel de diagramme tout-en-un qui le rend facile pour créer des
diagrammes de flux, des organigrammes, des diagrammes de réseau, des
présentations d'affaires, des plans de construction, des cartes mentales, des illustrations
scientifiques, des designs de mode, des diagrammes UML, des flux de travail, des
structures de programme, des conceptions de site web, des schémas électriques de
l'ingénierie, des cartes directionnelles et des diagramme de base de données et d'autres
diagrammes de qualité professionnelle

Figure 46:logo Edraw Max

4. Langages utilisés :

g. Java2EE :

J2EE est l'acronyme de Java 2 Entreprise Edition. Cette édition est dédiée à la
réalisation d'applications pour entreprises. J2EE est basé sur J2SE (Java 2 Standard
Edition) qui contient les API de base de Java. Depuis sa version 5, J2EE est
renommée Java EE (Enterprise Edition).

J2EE est une plate-forme fortement orientée serveur pour le développement et

l'exécution d'applications distribuées. Elle est composée de deux parties
essentielles :

Un ensemble de spécifications pour une infrastructure dans laquelle s'exécutent les

composants écrits en Java : un tel environnement se nomme serveur d'applications.

Un ensemble d'API qui peuvent être obtenues et utilisées séparément. Pour être
utilisées, certaines nécessitent une implémentation de la part d'un fournisseur tiers.

56
 Figure 47:logo java 2E

h. Html5 :

L’HyperText Markup Language, abrégé HTML, est un langage conçu pour représenter
les pages web. Ce langage de balisage permet de structurer sémantiquement et de
mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des
images, des formulaires de saisie, etc.

Figure 48:logo HTML5

i. Css3 :

De l’anglais Cascading Style Sheets (les feuilles de style en cascade), le CSS constitue
un langage informatique permettant d’ajouter des contraintes de mise en forme
graphique dans des documents web, dont les normes sont établies par le World Wide
Web Consortium (W3C).

57
 Figure 49:logo css3
j. Type Script :

Type Script est un langage compilé fortement typé, orienté objet. Il a été conçu par
Anders Hejlsberg (concepteur de C #) chez Microsoft. Type Script est à la fois un
langage et un ensemble d’outils. Type Script est un sur-ensemble typé de JavaScript
compilé en JavaScript. En d'autres termes, Type Script est JavaScript et certaines
fonctionnalités supplémentaires.

Type Script est juste JavaScript. Type Script commence par JavaScript et se termine
par JavaScript. Type script adopte les éléments de base de votre programme à partir de
JavaScript. Il suffit donc de connaître JavaScript pour utiliser Type Script. Tout le code
Type Script est converti en son équivalent JavaScript aux fins d'exécution.

Figure 50:logo Type Script

k. JavaScript :

Le JavaScript est un langage informatique utilisé sur les pages web. Ce langage à la

particularité de s'activer sur le poste client, en d'autres mots c'est votre ordinateur qui va
recevoir le code et qui devra l'exécuter. C'est en opposition à d'autres langages qui sont
activé côté serveur. L'exécution du code est effectuée par votre navigateur internet.
L'une des choses primordiales à savoir est de bien se rendre compte que le JavaScript
n'a aucun rapport avec le Java qui est un autre langage informatique.

La particularité du JavaScript consiste à créer du contenu mis à jour de façon

dynamique, de contrôler le contenu multimédia, d’animer des images, à peu près tout.
Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de
JavaScript.

58
 Figure 51:logo java script

l. JSON :

Le JSON est un format de représentation textuelle des données dérivé de la notation

des objets du langage JavaScript. Toutefois il est indépendant du JavaScript et de tout
autre langage de programmation.
Son avantage est de fournir un support pour une écriture simple et légère au format
texte, relativement compréhensible par les développeurs JavaScript, mais aussi - et
surtout - d'être nativement interprété.
La principale limite du JSON est le fait que les champs d'un objet ne peuvent être que
des chaînes de caractères.

Figure 52:Logo JSON

IV. Partie embarquée :

1. Logiciels utilisés :

a. Vnc Viewer :

Virtual network computing (VNC) est un type de logiciel de contrôle à distance qui
permet de contrôler un autre ordinateur via une connexion réseau. Les frappes et les
clics de souris sont transmis d'un ordinateur à un autre, ce qui permet au personnel du
support technique de gérer un ordinateur de bureau, un serveur ou un autre
périphérique en réseau sans se trouver au même emplacement physique.

59
 Figure 53:logo vnc viewer
b. Arduino :

Le logiciel Arduino est un environnement de développement (IDE) open source et

gratuit, téléchargeable sur le site officiel Arduino.
L’IDE Arduino permet :

 D’éditer un programme : des croquis (sketch en Anglais),

 De compiler ce programme dans le langage « machine » de l’Arduino,
 De téléverser le programme dans la mémoire de l’Arduino,
 De communiquer avec la carte Arduino grâce au terminal.

Figure 54:logo IDE Arduino

2. Configuration du matériel :
Un ensemble d’équipements matériels a été choisi pour la réalisation de notre application. Ce
choix se base sur beaucoup de critères ainsi que les besoins fonctionnels de
l’application en question.

3. Choix de la solution :

Pour que le projet soit complet et réalisé d’une manière qui répond correctement à nos
besoins, il nous a fallu procéder à des recherches sur le matériel le plus adéquat et
nécessaire à l’implémentation de la solution.
Pour atteindre nos objectifs, et après la comparaison établie ci-dessous entre les
différents choix présentés dans le tableau nous avons conclu que le RPI est la solution
la plus adaptée à nos besoins
En effet : La connectivité est considérée comme un besoin fondamental pour réaliser
notre projet, le RPI possède un port Ethernet, un port WI-FI et un support BLUETOOTH
d’où nous pouvons communiquer avec plusieurs systèmes à microprocesseur par des
divers moyens de communication.
60
On a couplé la carte RPI avec la carte Nodemcu vu que la Raspberry ne traite pas les
données Analogiques
La carte BEAGLEBONE présente une alternative intéressante pour la réalisation de
notre projet en raison de son puissant microcontrôleur mais vu que son indisponibilité
immédiate dans le marché tunisien, nous avons opté pour la carte Raspberry comme un
solution parfait.
Malgré que la carte ZEDBOARD soit plus performante, son cout élevé représente un
handicap pour l’acquisition d’une telle solution sachant que ses capacités sont au-delà
des besoins demandés.

4. Les besoins élémentaires :

Pour faire fonctionner notre Raspberry Pi, nous avons besoin les accessoires suivants :
Une carte mémoire SD : cette carte va contenir le système d’exploitation du Raspberry Pi, il ne
pourra pas donc démarrer sans cette dernière. Concernant la capacité de la carte mémoire, elle
devra être au moins de 16 Go et de classe 10 minimum. La carte mémoire SD contient le
système d’exploitation Raspbian Stretch et les données.

5. Démarrage et configuration de la Raspberry :

Choix du système d’exploitation

La plupart des systèmes qui fonctionnent sur Raspberry Pi sont des versions du
système d'exploitation Linux. Parce que Linux est open source, les développeurs
peuvent l’adopter pour des buts spécifiques. Dans le cas du Raspberry Pi, le matériel
léger nécessite un système réduit et privé d'applications inutiles.
Il existe plusieurs systèmes d’exploitation qui peuvent être installé sur la Raspberry Pi
tel que, Raspbian, Stretch, Wheezy, NOOBS et Jessie. Vu que NOOBS est simple et ne
comporte pas les principales fonctionnalités par défaut, nous avons choisi le système
d’exploitation Raspbian Stretch. C’est un système d'exploitation basé sur la nouvelle
version stable de Debian, qui est appelé Stretch.
Raspbian Stretch comporte Tous langages qui peuvent être compilés sur ARMv7 sont
installés par défaut sur le Raspberry Pi : Python. C, C ++, Java, Scratch, Nodejs, et
Ruby.

Formatage de la carte SD 

Pour installer un système d’exploitation sur la carte Raspberry Pi, nous devons tout
d’abord formater la carte SD en format souhaité par le logiciel dédié SD Formatter.

61
 Figure 55:formater carte SD

Installation du système d’exploitation 

Télécharger le système d’exploitation Raspbian à partir du site officiel. Une fois le

téléchargement de l’image de « Raspbian-
Stretch.img » s’est terminé, son contenu sera copié sur la carte SD, par l’intermédiaire
du logiciel Etcher.

Figure 56:copier l'image de Raspbian sur la carte SD

62
 6. Connection de la carte Raspberry avec l’ordinateur

Apres avoir copié l’image de système d’exploitation sur la carte SD, nous devons
connecter la carte Raspberry avec l’ordinateur via une connections ssh ( à travers une
point d’accès Wi-Fi) :
-La réinsertion de la carte SD créera deux autres partitions dans la section Poste de
travail.
-Ouvrir la partition « boot »de la carte SD
-Cree un nouveau bloc-notes et enregistre avec ssh sans extensions (pour activer la
connections ssh).
-créer un nouveau bloc-notes sous le nom « wpa-supplicant.conf » sans extension.

Autoriser le partage de connexions :

Figure 57:partage de connexion

Lancer la recherche de l’adresse IP de carte Raspberry dans le réseau local à l’aide de

« angry IP scanner »

Figure 58:chercher l'adresse IP avec IScanner

Connection SSH :
PuTTY est un client SSH et Telnet largement utilisé pour accéder à Raspberry Pi pour
l’installation et la configuration à distance de diverses applications. Ensuite, il suffit

63
d’entrer l’adresse IP du Raspberry dans PuTTY pour pouvoir se connecter et ensuite
installer VNC-server sur le Raspberry et l’activer.

Figure 59:configuration avec PuTTY

Figure 60:installer VNC Server

64
 Figure 61:interface du Raspberry

7. Démarrage de Raspberry
La mise à jour et là sa mise à niveau.

$ sudo apt-get update //pour la mise à jour

$ sudo apt-get upgrade //pour la mise à niveau

Pour détecter la version de processeur ARM

$ uname -m

Choisir la version du Node js correspond au processeur arm v7 du Raspberry pi 3 B+

D’après le site :https://nodejs.org/en/download/
Version du nodejs :nodejs.org/dist/v10.15.0/node-v10.15.0-linux-armv7l.tar.gz

65
 Figure 62:choix la version du nodejs

Installer Node js :

wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linux-armv7l.tar.gz

tar -xzf node/-v10.15.0-linux-arm7l.tar.gz

cd node-v10.15.0-linux-armv7l/

sudo cp -R * /usr/local/

MQTT nodejs :

MQTT.js est une bibliothèque cliente pour le protocole MQTT, écrite en JavaScript pour
node.js et le navigateur.

npm i mqtt

Installer cron nodejs :

$ npm install --save node-cron

Le module node-cron est un petit planificateur de tâches en JavaScript pur pour node.js basé
sur GNU crontab. Ce module vous permet de planifier une tâche dans node.js en utilisant la
syntaxe complète de la crontab.

8. Consommation avec web service :

Créer un Script avec le Nodejs intégrer dans la Raspberry pour assurer Communication
entre Raspberry et serveur web.

66
La carte Raspberry va échanger des données avec le serveur. Le format des données
échangées sera en JSON. Cela nécessite de définir le type de contenu de la requête
HTTP comme étant du JSON.

Créer un client http permet de récupérer la ligne sélectionner depuis l’interface web et
permet de changer leur état grâce à une requête http Get contenant les données à reçu.

Figure 63: consommation du service web

Figure 64:objet json reçu

La synchronisation du Raspberry avec la base de données chaque 0.5 seconde avec le
cron nodejs.

Cron. Schedule ('*/1 * * * *', function ()

9. Communication mqtt :

MQTT :
Mqtt est un protocole de messagerie léger basé sur la publication / abonnement.
 Il est plus rapide (plus rapide) que d'autres API basées sur les requêtes et les
réponses telles que HTTP.
 Il est développé sur la base du protocole TCP / IP.
 Il permet aux périphériques de localisation distants de se connecter, s'abonner,
publier, etc. à un sujet spécifique sur le serveur à l'aide du courtier de messages.

67
  MQTT Broker / Message broker est un module entre l'expéditeur et le
destinataire. C'est un élément de validation, de transformation et de routage des
messages.
 Le courtier est responsable de la distribution des messages aux clients intéressés
(clients abonnés) de leur sujet intéressé.

Figure 65:architecture MQTT

On récupérer les attributs id et état de chaque ligne et envoyer au Node mcu via un
client mqtt par la méthode publish :

Client. Publish (TOPIC, payload) ;

TOPIC : id

Payload: état (true or false)

La communication mqtt (publish/subscribe) Raspberry et Nodemcu d1 mini :

Programmation du Nodemcu d1 mini :

Créer un client mqtt :

68
 Figure 66:client MQTT
Connexion wifi :

Figure 67:connexion wifi

Connecter au serveur mqtt du Raspberry :

Client.SetServer(mqtt_server,1883)

Mqtt_server : l’adresse IP du Raspberry 

Mqtt_server : l’adresse IP du Raspberry 

Arduino reçu le topic et message avec la méthode subscribe en utilisant la fonction

reconnect :

69
 Figure 68:fonction reconnect (code Arduino)
La fonction callback piloter l’éclairage de la ligne :

Figure 69:fonction callback (code arduino)

Figure 70:resultat1 du console arduino

70
 Figure 71:resultat2 du console arduino

10. Câblage :

71
V. Conclusion
La dernière partie était dédiée à la navigation dans notre application. Elle constitue le
dernier volet de ce rapport, elle a pour objet de présenter l’environnement logiciel et
matériel de réalisation, et de décrire les principales fonctionnalités implémentées suite
au développement par des captures écrans présentant les principes interfaces des
applications.

72
Conclusion générale :

73