Rapport de stage d’Ingénieur

Sauver les abeilles grâce à l’IoT

Réalisé par : Oussama RMILI

Encadré par : Mme. Feten TEBER

Département : Informatique

Option : Systèmes logiciels Embarqués Ambiants et Mobiles SLEAM

Organisme d’accueil : RDI, ESPRIT – Tech

Année universitaire : 2020 – 2021

 Table des matières

INTRODUCTION GENERALE ............................................................................................ 1

CHAPITRE 1 : CADRE ET DESCRIPTION DU PROJET................................................ 2

1. INTRODUCTION .......................................................................................................... 2
2. PRESENTATION DE L’ORGANISME D’ACCUEIL ................................................. 2
3. DESCRIPTION DU PROJET ........................................................................................ 2
4. SPECIFICATIONS DES BESOINS .............................................................................. 3
4.1. Besoins fonctionnels .............................................................................................. 3
4.2. Besoins non fonctionnels ....................................................................................... 3
5. CONCLUSION .............................................................................................................. 4

CHAPITRE 2 : CONCEPTION ............................................................................................. 5

1. INTRODUCTION .......................................................................................................... 5
2. LANGAGE DE MODELISATION ............................................................................... 5
2.1. Langage UML ........................................................................................................ 5
3. LOGICIEL DE MODELISATION ................................................................................ 6
4. IDENTIFICATION DES ACTEURS ET DES CAS D’UTILISATION ....................... 6
4.1. Diagramme de cas d’utilisation .............................................................................. 6
5. DIAGRAMME DE CLASSE DU SYSTEME............................................................... 7
6. REALISATION DE LA BASE DE DONNEES DU SYSTEME.................................. 8
7. ARCHITECTURE GLOBALE DU SYSTEME .......................................................... 10
8. CONCLUSION ............................................................................................................ 11

CHAPITRE 3 : REALISATION .......................................................................................... 12

1. INTRODUCTION ........................................................................................................ 12
2. ENVIRONNEMENT LOGICIEL ................................................................................ 12
2.1. Langages utilisés .................................................................................................. 12
2.2. Framework et bibliothèques utilisés ..................................................................... 14
2.3. Environnements de développement utilisés ......................................................... 15
3. PRESENTATION DES INTERFACES DE L’APPLICATION ................................. 16
3.1. Interface d’authentification .................................................................................. 16
3.2. Interface d’inscription .......................................................................................... 17
 3.3. Interface de l’ensemble des ruches ....................................................................... 18
3.4. Interface de statistiques ........................................................................................ 18
3.5. Interface pour gérer les ruches ............................................................................. 19
3.6. Interface d’ajout des nouvelles ruches ................................................................. 20
4. CONCLUSION ............................................................................................................ 20

CONCLUSION GENERALE ............................................................................................... 21

REFERENCES NETOGRAPHIQUES ET BIBLIOGRAPHIQUES ............................... 22

 Liste des figures

FIGURE 1 : LOGO UML ...................................................................................................... 6

FIGURE 2: DIAGRAMME DE CAS D'UTILISATION GLOBAL DU SYSTEME ........... 7
FIGURE 3 : DIAGRAMME DE CLASSE DU SYSTEME .................................................. 8
FIGURE 4 : CAPTURE D'ECRAN DE LA TABLE USER ................................................. 9
FIGURE 5 : CAPTURE D'ECRAN DE LA TABLE BEEHIVE .......................................... 9
FIGURE 6 : CAPTURE D'ECRAN DE LA TABLE SENSORS ........................................ 10
FIGURE 7 : ARCHITECTURE GLOBALE DU SYSTEME ............................................. 10
FIGURE 8 : LOGO HTML .................................................................................................. 12
FIGURE 9 : LOGO CSS ...................................................................................................... 13
FIGURE 10 : LOGO JAVASCRIPT ................................................................................... 13
FIGURE 11 : LOGO SQL .................................................................................................... 13
FIGURE 12 : LOGO DE CORDOVA ................................................................................. 14
FIGURE 13 : LOGO BOOTSTRAP .................................................................................... 14
FIGURE 14 : LOGO JQUERY ............................................................................................ 15
FIGURE 15 : LOGO VS CODE .......................................................................................... 15
FIGURE 16 : LOGO WAMPSERVER ............................................................................... 15
FIGURE 17 : LOGO NODE-RED ....................................................................................... 16
FIGURE 18 : INTERFACE MOBILE D'AUTHENTIFICATION ...................................... 16
FIGURE 19 : INTERFACE TABLETTE D'INSCRIPTION ............................................... 17
FIGURE 20 : INTERFACE WEB DE L'ENSEMBLE DES RUCHES............................... 18
FIGURE 21 : INTERFACE WEB DE STATISTIQUES .................................................... 18
FIGURE 22 : INTERFACE MOBILE DE STATISTIQUES .............................................. 19
FIGURE 23 ; INTERFACE WEB DE VISUALISATION DES RUCHES ........................ 19
FIGURE 24 : INTERFACE WEB D'AJOUT DES NOUVELLES RUCHES .................... 20
Introduction générale

Introduction générale

Le stage que j’ai effectué est une occasion de découverte de l’IoT dans l’apiculture.

Durant ce stage d’ingénieur, j’ai eu l’occasion de savoir l’importance des nouvelles

technologies dans la production du miel et protection des abeilles.

L’objectif de mon stage dans cet établissement est de réaliser une solution IoT pour sauver
les abeilles, améliorer la production du miel et suivi l’état des ruches.

Dans ce cadre, le stage sera présenté selon les trois chapitres suivants :

➢ Le premier chapitre présente l’organisme d’accuil RDI, ESPRIT – Tech et aussi la

description et le cadre du projet ;

➢ Le deuxième chapitre met l’accent sur les différents diagrammes développés afin
de concevoir la solution ;

➢ Le troisième chapitre explore l’environnement de la réalisation de l’application

Cordova avec ces principales interfaces graphiques.

1
Chapitre 1 : Cadre et description du projet

Chapitre 1 : Cadre et description du projet

1. Introduction
Ce chapitre traite d’abord la présentation de l’organisme d’accueil ESPRIT, ensuite le sujet
et l’objectif principal du projet et enfin l’ensemble des besoins fonctionnels et non
fonctionnels liés à notre application ainsi que la gestion des tâches du projet.

2. Présentation de l’organisme d’accueil

Esprit est une école supérieure privée d’ingénierie et de technologies de Tunisie basée à
l’Ariana et agréée par le ministère de l’enseignement supérieur et de la recherche scientifique.

J’ai passé mon stage d’ingénieur dans le département ESPRIT-Tech RDI.

La Recherche, le Développement et l'Innovation (RDI) ont été parmi les priorités

stratégiques d’ESPRIT depuis sa création. En 2010, l'université a créé ESPRIT-Tech (le
bureau RDI) pour superviser les différentes activités de RDI et travailler activement avec les
parties prenantes concernées pour définir les politiques, stratégies et priorités de recherche.

ESPRIT-Tech est le point focal où les équipes RDI, à travers diverses disciplines et
domaines de recherche, se réunissent pour collaborer sur divers projets de recherche
interdisciplinaires.

ESPRIT s'engage à impliquer les étudiants dans le processus de recherche, de

développement et l'innovation, tout en s'efforçant de contribuer au développement socio-
économique de la région.

3. Description du projet
➢ Titre du projet : Sauver les abeilles grâce à l’IoT ;

➢ Objectif du projet : Concevoir un système permettant de contrôler à distance les

ruches et ceci en surveillant la position, le poids, la température, l'humidité et
l'exposition à la lumière, l'apiculteur sait maintenant quelles colonies nécessitent son
attention immédiate, lesquelles se portent bien et lesquelles sont prêtes pour la
récolte ;

2
Chapitre 1 : Cadre et description du projet

➢ Mots clés : IoT, application web ou mobile, GPS, microcontrôleurs, Gateway,

capteurs.

4. Spécifications des besoins

La spécification des besoins constitue la phase de départ de toute application à développer.
Dans cette partie, je vais identifier les besoins fonctionnels ainsi que les besoins non
fonctionnels pour éviter le développement d’une application imparfaite.

4.1. Besoins fonctionnels

Les besoins fonctionnels expriment une action que doit effectuer le système en réponse à
une demande (sorties qui sont produites pour un ensemble de données d’entrée). L’application
doit permettre à l’utilisateur de :

➢ S’authentifier ;

➢ Créer un compte ;

➢ Gérer les ruches ;

➢ Gérer les cadres des ruches.

4.2. Besoins non fonctionnels

Les besoins non fonctionnels sont des besoins qui peuvent avoir un aspect visible pour
l’utilisateur, mais qui ne sont pas reliés directement au comportement du système. Ils
présentent les exigences internes primordiales pour le système tel que les contraintes liées à
l’environnement et à l’implémentation et les exigences en matière de performances,
d’extensibilité et de fiabilité.

Les besoins non fonctionnels de notre système se décrivent comme suit :

Le temps de réponse de l’application doit être minimal : Efficacité temporelle ;

La portabilité du système sur n’importe quelle plateforme ;

L’ergonomie des interfaces de l’application ;

L’application doit être accessible à plusieurs utilisateurs en même temps : Multi-

utilisateurs ;

La sécurité ;

3
Chapitre 1 : Cadre et description du projet

La fiabilité.

5. Conclusion
À travers ce chapitre, j’ai présenté le cadre du projet, l’entreprise et la spécification des
besoins fonctionnels et non fonctionnels du système. En outre, j’ai mis l’accent sur la manière
d’organiser et d’élaborer les tâches afin de respecter les délais de développement.

Dans le contexte du projet, je vais entamer le chapitre suivant intitulé étude préalable du
projet.

4
Chapitre 2 : Conception

Chapitre 2 : Conception

1. Introduction
La conception a comme objectif de constituer une présentation claire et cohérente des
fonctionnalités et autres exigences du système en développement.

Ce chapitre sera présenté comme suit : je commence par le choix du langage de

modélisation, ensuite j’identifie les acteurs et les diagrammes des cas d’utilisation, puis je
présente le diagramme de classe ainsi l’architecture physique de l’application.

2. Langage de modélisation

2.1. Langage UML

UML (en anglais Unified Modeling Language ou langage de modélisation unifié) est un
langage de modélisation graphique à base de pictogrammes. Il est apparu dans le domaine du
génie logiciel dans le cadre de la « conception orientée objet » [5].

Couramment utilisé dans les projets logiciels, il peut être appliqué à toutes sortes de
systèmes ne se limitant pas au domaine informatique. Les 14 diagrammes UML (version 2.3)
sont dépendants hiérarchiquement et se complètent de façon à permettre la modélisation d'un
projet tout au long de son cycle de vie. Ces diagrammes sont typés comme suit :

➢ Diagrammes structurels ou statiques :

• Diagramme de classes ;
• Diagramme d'objets ;
• Diagramme de composants ;
• Diagramme de déploiement ;
• Diagramme des paquetages ;
• Diagramme de structure composite ;
• Diagramme de profils.
➢ Diagrammes comportementaux :
• Diagramme des cas d'utilisation ;
• Diagramme états-transitions ;
• Diagramme d'activité.
➢ Diagrammes d'interaction ou dynamiques :

5
Chapitre 2 : Conception

• Diagramme de séquence ;
• Diagramme de communication ;
• Diagramme global d'interaction ;
• Diagramme de temps.

Figure 1 : Logo UML

3. Logiciel de modélisation
Il existe plusieurs logiciels de modélisations UML tels que : AgroUML, MagicDraw,
Microsoft Visio, BOUML, StarUML, Visual Paradigm etc.

J’ai utilisé le logiciel drawio pour élaborer les différents diagrammes UML du projet car
c’est une application gratuite, rapide et facile de l’utiliser.

4. Identification des acteurs et des cas d’utilisation

Les cas d’utilisations permettent de modéliser les besoins des clients d'un système et ne
doivent pas chercher l'exhaustivité, mais clarifier, filtrer et organiser les besoins.
Les éléments de base des cas d’utilisations sont :
➢ L’Acteur : c’est une entité externe qui agit sur le système (opérateur, autre système...),
il peut consulter ou modifier l'état du système, ce dernier fournit un service qui
correspond à son besoin.
➢ Use case : peut-être définit comme l’ensemble des actions réalisées par le système, en
réponse à une action d'un acteur. L'ensemble des cas d’utilisations décrit les objectifs
(le but) du système.

4.1. Diagramme de cas d’utilisation

Le diagramme schématisé ci-dessous synthétise le cas d’utilisation global du système :

6
Chapitre 2 : Conception

Figure 2: Diagramme de cas d'utilisation global du système

5. Diagramme de classe du système

Le diagramme de classes montre les blocs de construction de tout système orienté-objet.
Les diagrammes de classes représentent une vue statique du modèle. Ou une partie du modèle,
décrivant ce que les attributs et les comportements, qu’il a plutôt que de détailler les méthodes
pour atteindre les opérations. Les diagrammes de classes sont les plus utiles pour illustrer les
relations entre les classes et les interfaces. Généralisations, agrégations et les associations sont
tous précieux reflétant l’héritage, la composition ou l’utilisation, et les connexions
respectivement [3].
7
Chapitre 2 : Conception

Le diagramme schématisé ci-dessous synthétise les classes du système ainsi les relations
entre eux :

Figure 3 : Diagramme de classe du système

6. Réalisation de la base de données du système

Les figures ci-dessous montre la structure des tables crées sur le logiciels WampServer :

8
Chapitre 2 : Conception

➢ Table « User » :
Au niveau de la table User, on trouve les informations des utilisateurs qui sont enregistrées
lors de la création du compte pour pouvoir se connecter.

Figure 4 : Capture d'écran de la table User

➢ Table « Beehive » :
La table Beehive contient les informations sur les ruches comme ses numéros, ses nombres
de cadres dedans, la nature du miel et la localisation de chaque ruche.

Figure 5 : Capture d'écran de la table Beehive

9
Chapitre 2 : Conception

➢ Table « Sensors » :
Dans la table Sensors, on trouve les données issues du nœud capteur comme la
température, l’humidité, la lumière etc.

Figure 6 : Capture d'écran de la table Sensors

7. Architecture globale du système

La figure ci-dessous illustre les composant principaux du système ainsi la relation entre eux :

Figure 7 : Architecture globale du système

10
Chapitre 2 : Conception

8. Conclusion
Ce chapitre a mis l’accent sur le diagramme de cas d’utilisation et le diagramme de classe
pour montrer les interactions entre l’acteur et le système. Puis j’ai présenté l’architecture
physique du système afin de comprendre la liaison entre les principaux composants.
Le prochain chapitre traitera des explications et des clarifications de plusieurs concepts en
rapport avec le contexte de mon travail.

11
Chapitre 3 : Réalisation

Chapitre 3 : Réalisation

1. Introduction
Ce chapitre illustre sur le plan pratique les concepts théoriques précédents en présentant
d’abord l’environnement de réalisation sur le plan logiciel et ensuite les interfaces de
l’application web/mobile.

2. Environnement logiciel

2.1. Langages utilisés

Durant notre stage, nous avons utilisé les langages de programmation suivants :

➢ HTML [14] : (HyperText Markup Language) c'est le langage universel utilisé sur les
pages Web lisibles par tous les Navigateurs Web (Internet Explorer, Netscape,
Mozilla, etc..). Ce langage fonctionne suivant l'assemblage et la combinaison de
balises permettant de structurer et de donner l'apparence voulue aux données textes,
images et multimédias suivant la mise en page voulue.

Figure 8 : Logo HTML

➢ CSS [15] : (Cascading Style Sheets) est un langage de feuille de style utilisé pour
décrire une présentation d'un document écrit en HTML ou en XML (on inclut ici les
langages basés sur XML comme SVG ou XHTML). Le CSS décrit la façon dont les
éléments doivent être affichés sur l'écran ou sur d'autres périphériques.

12
Chapitre 3 : Réalisation

Figure 9 : Logo CSS

➢ JavaScript [16] : JavaScript est un langage de script orienté objet, principalement

utilisé dans les pages HTML. A l'opposé des langages coté serveurs, JavaScript est
exécuté sur l'ordinateur de l'internaute par le navigateur lui-même ; ainsi, ce langage
permet une interaction avec l'utilisateur en fonction de ses actions (lors du passage de
la souris au-dessus d'un élément, du redimensionnement de la page...).

Figure 10 : Logo JavaScript

➢ SQL [17] : (Structured Query Language) est un langage informatique normalisé

servant à exploiter des bases de données relationnelles. La partie langage de
manipulation des données de SQL permet de rechercher, d'ajouter, de modifier ou de
supprimer des données dans la base de données relationnelles.

Figure 11 : Logo SQL

13
Chapitre 3 : Réalisation

2.2. Framework et bibliothèques utilisés

Durant mon stage, J’ai utilisé les Framework et les bibliothèques suivants :

➢ Apache Cordova [19] : C’est un framework de développement mobile open-source, il

permet d'exploiter les technologies Web courantes telles que HTML5, CSS3 et
JavaScript pour développer des applications multi-plateformes, évitant ainsi
l'utilisation des langages natifs propres aux différentes plates-formes mobiles.

Figure 12 : Logo de Cordova

➢ Bootstrap [20] : C’est une collection d'outils utiles à la création du design (graphique,
animation et interactions avec la page dans le navigateur, etc.), de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des
formulaires, des boutons, des outils de navigation et d’autres éléments interactifs ainsi
que des extensions JavaScript en option.

Figure 13 : logo Bootstrap

➢ JQuery [21] : C’est une bibliothèque JavaScript libre et multiplateforme créée pour
simplifier et faciliter considérablement la navigation et la manipulation des documents
HTML, la gestion d'événements, l'animation et l’Ajax grâce à une API simple à
utiliser qui fonctionne sur une multitude de navigateurs.

14
Chapitre 3 : Réalisation

Figure 14 : Logo jQuery

2.3. Environnements de développement utilisés

Durant mon stage, j’ai exploité les environnements suivants :

➢ VS Code [22] : (Visual Studio Code) c’est un éditeur de code cross platform, libre et
gratuit, supportant une dizaine de langages, développé par Microsoft.

Figure 15 : Logo VS Code

➢ WampServer [23] : C’est une plate-forme de développement Web sous Windows

pour des applications Web dynamiques à l’aide du serveur Apache, du langage de
scripts PHP et d’une base de données MySQL. Il possède également PHPMyAdmin
pour gérer plus facilement les bases de données.

Figure 16 : Logo WampServer

➢ Node-RED [26] : C’est un outil de développement basé sur le flux pour la

programmation visuelle et développé à l'origine par IBM pour connecter l’ensemble
des périphériques matériels, des API et des services en ligne dans le cadre de l'Internet
des objets.

15
Chapitre 3 : Réalisation

Node-RED fournit un éditeur de flux basé sur un navigateur Web, qui peut être utilisé pour
créer des fonctions JavaScript. Des éléments d'applications peuvent être sauvegardés ou
partagés sur Node-RED pour être réutilisés. Le runtime est construit sur Node.js et les flux
créés dans Node-RED sont stockés à l'aide de JSON.

Figure 17 : Logo Node-Red

3. Présentation des interfaces de l’application

Cette section comporte des captures d’écran des interfaces web et mobile de l’application
réalisée accompagnées par de brèves descriptions.

3.1. Interface d’authentification

Figure 18 : Interface mobile d'authentification

16
Chapitre 3 : Réalisation

Cette interface permet à l’utilisateur de se connecter en saisissant son email et son mot de
passe pour à accéder aux différents services de l’application.

3.2. Interface d’inscription

Figure 19 : Interface tablette d'inscription

Cette interface permet à l’utilisateur de créer un compte pour qu’il puisse s’authentifier en
remplissant tous les champs.

17
Chapitre 3 : Réalisation

3.3. Interface de l’ensemble des ruches

Figure 20 : Interface Web de l'ensemble des ruches

Cette interface permet à l’utilisateur de voir ses différentes ruches et d’y accéder pour
passer à l’interface suivantes qui est l’interface de statistique.

3.4. Interface de statistiques

Figure 21 : Interface Web de statistiques

Cette interface permet à l’utilisateur de consulter l’état actuel de sa ruche en regardant les
différentes valeurs envoyées par le nœud capteur.

18
Chapitre 3 : Réalisation

Figure 22 : Interface Mobile de statistiques

Cette interface permet à l’utilisateur de savoir l’évolution des données issues des capteurs
qui peuvent affecter la production du miel.

3.5. Interface pour gérer les ruches

Figure 23 ; Interface Web de visualisation des ruches

L’interface ci-dessus permet à l’utilisateur de consulter toutes ses ruches en détails.

19
Chapitre 3 : Réalisation

3.6. Interface d’ajout des nouvelles ruches

Figure 24 : Interface Web d'ajout des nouvelles ruches

Cette interface permet à l’apiculteur d’ajouter des nouvelles ruches en remplissant le

formulaire.

4. Conclusion
Dans ce chapitre j’ai procédé d’une part à la description des caractéristiques de
l’environnement du travail et j’ai décrit la plateforme logicielle sur laquelle j’ai construit mon
application. D’autre part, j’ai présenté les différentes interfaces développées tout au long de
l’application.

20
Conclusion générale

Conclusion générale

Le stage d’ingénieur est une occasion pour améliorer la formation des étudiants. De ma
part, j’ai eu l’occasion d’être un stagiaire en RDI, ESPRIT Tech, dirigé par Mme. Feten
TEBER qui m’a donné l’opportunité de travailler sur un projet très innovant où l’IoT et le
développement se combinent.

Ce stage m’a offert une opportunité pour confronter mes connaissances théoriques avec la
vie professionnelle et d’enrichir bien mon expérience surtout en matière de développement
hybride et d’effectuer les recherches, les études et les comparaisons sur les technologies qui
sont les plus adéquates aux besoins lors de la réalisation de l’application de gestion des PC à
réparer.

Je conclus que ce type de stage est très intéressant dans le parcours de nos études car il me
donne des idées et une image sur notre stage final PFE.

21
Références Netographiques et Bibliographiques

Références Netographiques et Bibliographiques

[1] Trello : https://fr.wikipedia.org/

[2] Github : https://www.lemonde.fr/pixels/article/2018/06/04/qu-est-ce-que-github-la-plate-

forme-que-microsoft-vient-de-racheter_5309488_4408996.html

[3] : https://www.sparxsystems.fr/resources/uml2_tutorial/uml2_classdiagram.html

[4] HTML : http://www.clashinfo.com/

[5] CSS : https://developer.mozilla.org/

[6] JavaScript : https://www.futura-sciences.com/

[7] SQL: https://fr.wikipedia.org/

[8] Apache Cordova: https://cordova.apache.org/

[9] Bootstrap: Bootstrap: https://fr.wikipedia.org/

[10] : jQuery : https://oschool.ci/

[11] : VsCode : https://www.01net.com/

[12] : WampServer : http://www.wampserver.com/

[13] : Node-Red : https://en.wikipedia.org/

22