Université de la Réunion

UFR Sciences et Technologies

Rapport de stage de Master M2INFORMATIQUE

Laboratoire d’Energétique, d’Electroniqueet Procédés

Développement d’une application mobilede visualisation et de gestion de noeuds

d’un réseau de capteurs

Auteur :Oumar PATELno étudiant : 31000154

Encadrant :Mickael MOUROUVIN

Ingénieur d’étude

Responsable de stage UFR Sciences et Technologies :Alexandre DOUYERE - MCF

Période du stage : Du 21 janvier 2019 au 05 juillet 2019

RemerciementsJe tiens tout d’abord à remercier toutes les personnes qui ont contribué à

la réussite de ce stage et qui m’ont aidé à m’améliorer aussi bien sur le planprofessionnel que le plan personnel.Je tiens à remercier particulièrement mon tuteur de stage, Monsieur MickaëlMOUROUVIN pour son aide et son professionnalisme durant toute la durée demon stage. Je tiens également à le remercier pour pour son soutien, et de laconfiance qu’il m’a accordée tout au long de ces quelques mois de collaboration.Il a toujours été présent même dans les moments les plus difficiles.Je tiens aussi à remercier Monsieur Pierre-Olivier Lucas de Peslouan chef de pro-jet, pour son soutien moral, et pour sa bonne humeur constante. Il a su m’apporterde nombreuses compétences, et a su m’orienter vers les bonnes décisions.Je tiens aussi à remercier Monsieur Alexandre DOUYERE, pour son encadrementdu stage.Je remercie tout particulièrement Monsieur Jean-Pierre CHABRIAT, directeur duLaboratoire d’Énergétique, d’Électronique et Procédés, sans qui ce stage n’auraitjamais eu lieu.Je remercie également l’équipe pédagogique du Master Informatique de l’Univer-sité de la Réunion pour son accompagnement au sein de ce cursus.

2

3

RésuméDans le cadre de mon stage de fin d’études de Master Informatique à l’Uni-

versité de la Réunion, j’ai eu l’opportunité de pouvoir travailler sur le projetCARERC au sein du LE2P.

Le project CARERC a pour but une cartographie électromagnétique d’unendroit donné via un réseau de capteurs autonome. Ce réseau de capteur en plusdes données électromagnétiques est capable de récupérer d’autres valeurs tel quetempérature, humidité, luminosité.Ces données sont stockées dans une base de données.

Ce stage a pour but le développement d’une application mobile permettantla visualisation et la gestion des données et des noeuds de ce réseau de capteurs.

Mots-clés

: Base de données, réseau de capteur, application mobile

AbstractAs part of my internship graduation of Master computer science at Université

de la Réunion, I had the opportunity to work on the CARERC project at theLE2P.

The purpose of the CARERC project is to provide electromagnetic mappingof a given location via an autonomous sensor network. This sensor network inaddition to the electromagnetic data is capable of recovering other values such astemperature, humidity, brightness.These data are stored in a database.

This internship aims at the development of a mobile application allowing thevisualization and the management of the data and the nodes of this network ofsensors.

Keywords

: Database, sensor network, mobile application

4

5

Table des matières

Glossary 1

Introduction 2

1 L’entreprise d’acceuil 31.1 Le LE2P . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 OS3 - Optimisation énergétique des réseaux de capteurs . . . . . . 31.3 Le projet CARERC . . . . . . . . . . . . . . . . . . . . . . . . . . 41.4 L’équipe de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Présentation du stage 62.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2 Sujet et Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.3 Méthodes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . 82.4 Déroulement du stage . . . . . . . . . . . . . . . . . . . . . . . . . 8

3 Études Préliminaires 93.1 Analyses des besoins . . . . . . . . . . . . . . . . . . . . . . . . . 93.2 Choix de la technologie . . . . . . . . . . . . . . . . . . . . . . . . 10

3.2.1 Les applications native . . . . . . . . . . . . . . . . . . . . 103.2.2 Les web-applications . . . . . . . . . . . . . . . . . . . . . 113.2.3 Les applications cross-platforms . . . . . . . . . . . . . . . 113.2.4 React Native . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.3 Rédaction cahier des charges . . . . . . . . . . . . . . . . . . . . . 123.4 Apprentissage de React Native . . . . . . . . . . . . . . . . . . . . 13

4 Développement de l’application mobile 144.1 Création des vues . . . . . . . . . . . . . . . . . . . . . . . . . . . 144.2 Ajout des modules . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.2.1 Localisation . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.2.2 Carte/Maps . . . . . . . . . . . . . . . . . . . . . . . . . . 174.2.3 Wifi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.2.4 Problèmes rencontrés . . . . . . . . . . . . . . . . . . . . . 20

4.3 Connexion à la base de donnée . . . . . . . . . . . . . . . . . . . . 214.3.1 Approche proposée . . . . . . . . . . . . . . . . . . . . . . 214.3.2 Problèmes rencontrés . . . . . . . . . . . . . . . . . . . . . 24

4.4 Autres fonctionnalités . . . . . . . . . . . . . . . . . . . . . . . . . 24

5 Déploiement de l’application et documentation 25

Mooc 26

Conclusion 27

Bibliographie 28

Annexes 29A Charte Graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . 29B Planning et Diagramme de Gantt . . . . . . . . . . . . . . . . . . 30

Table des figures

1 Logo projet CARERC . . . . . . . . . . . . . . . . . . . . . . . . 52 Site Web CARERC . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Illustration du contexte . . . . . . . . . . . . . . . . . . . . . . . . 74 Logo Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Logo Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Logo React Native . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Logo Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 MockUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Quelques vues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1510 Exemple d’installation module de navigation . . . . . . . . . . . . 1611 Code JS - Localisation . . . . . . . . . . . . . . . . . . . . . . . . 1712 Code JS - Mapbox . . . . . . . . . . . . . . . . . . . . . . . . . . 1813 Visualisation donnée wifi . . . . . . . . . . . . . . . . . . . . . . . 1914 API Node Influx . . . . . . . . . . . . . . . . . . . . . . . . . . . 2215 Exemple code Node.js . . . . . . . . . . . . . . . . . . . . . . . . 2316 Résultat du code Node.js précédent . . . . . . . . . . . . . . . . . 23

8

Glossaire

A

Android Système d’exploitation mobile de Google. 10

API Application programming interface. 22

C

CARERC Cartographie Électromagnétique par Réseaux de Capteurs. 4

I

IHM Interface Homme Machine. 14

iOS Système d’exploitation mobile de Apple. 10

IP Internet Protocol. 19

M

MAC Media Access Control - Aussi appelé Adresse Physique, c’est une adressephysique stocké sur une "machine" qui, si elle n’est pas modifié, est unidentifiant unique. 19

mockup Un mockup désigne une maquette simplifiée d’une interface utilisateurpour montrer les fonctionnalités sans commencer à définir l’aspect visuel.14

mooc Massive Open Online Course. 26

R

RSSI Received Signal Strength Indication. 6

S

SSID Service Set Identifier - Correspond au nom d’un réseau sans fil. 19

1

Introduction

Ce stage s’inscrit dans le cadre du projet CARERC. C’est un projet portépar le Laboratoire d’Énergétique, d’Électronique et de Procédés. L’objectif dece projet est la réalisation d’une cartographie Électromagnétique par réseaux decapteurs.

Plusieurs étapes sont nécessaires afin d’atteindre ce but, la plus importanteétant l’acquisition des données via le réseau de capteurs.

Ce stage quant à lui est directement impliqué dans la phase de visualisationdes données provenant des capteurs.

Afin d’arriver à ce résultat, l’objectif de ce stage est de développer une ap-plication mobile de visualisation et de gestion des données. La visualisation desdonnées sur une plateforme mobile tel qu’un smartphone permettant une plusgrande mobilité.

Dans la première et la deuxième partie de ce rapport, je vais présenter l’entre-prise d’accueil ainsi que le déroulement de mon stage. Puis nous développerons lestravaux réalisés dans les troisième et quatrième parties. Enfin, avant de conclurenous aborderons les perspectives d’avenir, ainsi que quelques missions annexesréalisées durant le stage.

2

1 L’entreprise d’acceuil

1.1 Le LE2PLe Laboratoire d’Energétique, d’Electronique et Procédés créé en 2006 est une

équipe d’acceuil au sein de la Faculté des Sciences et Technologies de l’Universitéde la Réunion. Des chercheurs en énergétique, électronique, télécommunicationset physique de l’environnement animent cette équipe.

Le laboratoire travaille principalement sur 3 opérations scientifiques, à savoir :

— 0S1 - Gisement Solaire

— 0S2 - Stockage et conversion de l’énergie

— 0S3 - Optimisation énergétique des réseaux de capteurs

1.2 OS3 - Optimisation énergétique des réseaux de capteursSmartphones, drones, capteurs de température ou de mouvement. . . D’ici à

2020, 50 milliards d’appareils seront connectés à un vaste réseau : l’Internet desobjets, dont la technologie utilisée est le capteur sans fil. Cette invasion de nou-velles technologies présentes de nombreux défis à relever. Celui de l’équipe deprojet CARERC : l’autonomie énergétique des capteurs.

Les réseaux de capteurs s’intègrent parfaitement dans le quotidien de la popu-lation pour les années à venir, notamment dans les projets de villes intelligentes.La multitude de données que nous seront capables de mesurer et collecter serontautant de services aux personnes qui pourront être développés.

L’opération scientifique se concentre principalement sur :

— La définition précise de l’évolution énergétique du réseau, à la fois au niveaulocal (nœud et ses constituants) et global (le réseau dans son ensemble etprotocoles de communication)

3

— Le développement de topologies et de protocoles de routage à faible coûténergétique

— Le couplage énergie/information, avec la récupération d’énergie RF intégréeau sein des protocoles de communication et dans l’alimentation des nœudsdu réseau (Wake Up Radio ou Radio Trigger)

1.3 Le projet CARERCAu cours de deux dernières décennies, nous avons assisté à un développement

constant des technologies de communications sans fils. Les réseaux de téléphoniemobiles, les points d’accès à l’internet, les communications points à points sontautant de sources de réseaux sans fils basées sur des standards de communica-tion définis par différents organismes (ETSI, CEPT, IEEE, FCC). A chacun deces standards est allouée une bande de fréquences associée à plusieurs canauxpossédant chacun une quantité d’énergie maximale.Ainsi, afin d’obtenir une image fréquentielle et temporelle de ces réseaux sansfil, le projet CARERC propose la réalisation d’une infrastructure logicielle etmatérielle de mesure dans le but de réaliser une cartographie électromagnétique3D dynamique d’un espace donné basée sur l’exploitation des réseaux de capteurs.Ce réseau doit être autonome en énergie afin de pouvoir fonctionner dans tout typed’environnement et cette autonomie passe par l’aspect logiciel (optimisation descommunications et de l’activité des éléments du réseau) et matériel (récupérationd’énergie de différentes sources : ondes électromagnétique, solaire...).

D’après la définition de "Wikipédia" :

Un réseau de capteurs sans fil est un réseau sans-fil ne s’appuyant pas surune infrastructure préexistante. Il possède un grand nombre de nœuds,qui sont des micro-capteurs capables de recueillir et de transmettre desdonnées d’une manière autonome. La position de ces nœuds n’est pasobligatoirement prédéterminée. Ils peuvent être aléatoirement répartisdans une zone géographique, correspondant au terrain concerné pour lephénomène capté.

Réseau de capteurs

4

Ainsi les 3 points clés de ce projet sont les suivants :

— Autonomie énergétique du réseau.

— Réalisation d’un capteur de niveaux de puissance électromagnétique

— Visualisation des données mesurées sur un outil de visualisation 3D

Figure 1 – Logo projet CARERC

1.4 L’équipe de projet

Voici les membres composant le projet CARERC

Responsable scientifique : Alexandre DouyereAdjoints scientifiques : Frédéric Alicalapa et Nour Murad

Chef de projet : Pierre-Olivier Lucas de Peslouan

Pierre-Olivier Lucas de Peslouan, IGR Conception et Développement des circuitsMarie-Laure Pérony-Charton, IGE ValorisationAriste Boutchama, IGE Circuits et SsystèmesJérôme Rivière, IGR Electronique Hyper-FréquenceMickaël Mourouvin, IGE Réseaux et Web

5

2 Présentation du stage

2.1 ContexteActuellement, et grâce à l’équipe du projet CARERC, l’acquisition des donnéesest fonctionnelle et génère une quantité de données très importante.Les données collectées proviennent des nœuds du réseau de capteurs. Ces noeudspeuvent embarquer différents capteurs mesurant différentes grandeurs physiques :luminosité, température, RSSI, humidité, etc...

Ces données sont stockées au sein d’une base de donnée InfluxDB.InfluxDB est une base de données, écrite en Go et dévéloppée par InfluxData. Elleest spécialisée pour le stockage rapide et la récupération de données de séries chro-nologiques dans des domaines comme la supervision, les métriques d’applicationou encore l’analyse en temps réel.

Ces données sont actuellement visibles et peuvent être gérées depuis un siteweb responsive-design développé par l’ingénieur d’études Réseaux et Web duprojet, qui est également mon tuteur.

Figure 2 – Site Web CARERC

6

2.2 Sujet et ObjectifComme vu précédemment, le réseau de capteurs en place permet l’acquisition

d’une grande quantité de donnée qui est stocké dans une base de donnée. Cesdonnées sont destinées à être exploitées, c’est pourquoi il existe donc un site web.

De nos jours, l’utilisation du smartphone est omniprésente dans la vie dechaque individu. Ce qui était à la base un simple outil de communication setransforme aujourd’hui en un formidable outil très polyvalent, et même en unoutil de travail.

De ce constat est venu l’idée de l’utilisation d’une application mobile dans lecadre du projet CARERC.L’utilisation d’une application mobile permettrait les mêmes fonctions que pro-pose déjà le site web, mais elle permettrait en plus d’apporter de nouvelles fonc-tionnalités.En effet, les derniers smartphones possèdent bon nombre de capteurs et il estpossible de les utiliser via une application mobile.

Par exemple, le smartphone possède une puce GPS ainsi que des cartes ré-seaux. Il est donc possible d’utiliser ces capteurs pour pouvoir récupérer des don-nées tel que la localisation ou encore la qualité d’un signal wifi reçu (RSSI). Dece fait le smartphone pourra être utilisé au sein du réseau de capteur CARERCtel un noeud itinérant.

L’objectif principal du stage est donc le développement d’une telle application.

Figure 3 – Illustration du contexte

7

2.3 Méthodes de travailDurant le stage, le travail s’est surtout effectué en autonomie.Des réunions hebdomadaires étaient organisées afin de permettre à chaque

membre de l’équipe de projet de faire des points réguliers et que chacun soit aucourant du travail des autres. Cela permet de faciliter le travail en équipe.

Pour la partie développement, le code est versionné à l’aide du logiciel deversioning Git. Le code est ensuite hébergé sur le GitHub du LE2P.

2.4 Déroulement du stageLe stage s’est effectué en plusieurs parties.Dans un premier temps, une partie du temps a été consacrée à la compré-

hension et à l’assimilation de la montagne de données que comprend le projetCARERC.

Une fois que le sujet et que les données du projet ont bien été assimilés, letravail a pu débuter.

Tout d’abord, avant de se lancer dans le travail de développement, il a fallueffectuer une étude préliminaire afin d’établir les besoins du projet.La deuxième partie du stage, qui est également la plus conséquente, a été dédiéeau développement de l’application.Enfin, la troisième partie de ce stage, un soin tout particulier sera apporté àla rédaction d’une documentation d’utilisation, ainsi qu’à une documentationtechnique.

8

3 Études Préliminaires

3.1 Analyses des besoinsComme dans tout projet, l’analyse des besoins occupe une place très impor-

tante. En effet, avant de pouvoir entamer tout développement, il est absolumentnécessaire de connaître tous les besoins, mais également les contraintes, qu’ilssoient techniques, ou imposés (cf. Charte Graphique voir Annexe A). Il est aussiindispensable de connaître les délais nécessaires pour le travail à effectuer.

L’analyse des besoins a dans un premier temps demandé un travail afin desavoir quelles seraient les fonctions que devrait avoir l’application mobile.En effet, l’application mobile doit se démarquer de l’actuel site web, afin deproposer une nouvelle expérience utilisateur et que celle-ci ne soit pas redondante.

Une liste des différentes fonctions a donc été établie. Voici une liste de cesfonctionnalités :

— Visualisation des emplacements des noeuds du réseau de capteurs

— Visualisations des données provenant des différents noeuds

— Utilisation du smartphone en tant que noeud au sein du réseau de capteurs(utilisation des capteurs du smartphone ; GPS ; Réseaux)

— Gestion des noeuds du réseau de capteurs (Ajout, Suppression)

L’analyse des besoins comprend également la planification de toutes les tâchesà effectuer.La méthode la plus efficace est l’utilisation d’un diagramme de Gantt commemontré dans l’annexe B.

9

3.2 Choix de la technologieLe projet CARERC aimerait s’appuyer sur une application mobile fonction-

nant sur les deux principaux systèmes d’exploitation mobiles : Android et iOS.Cela ayant été décidé après un rapide sondage au sein de l’équipe destiné à évaluerle taux de smartphones sous Android et iOS. Dans le monde du développementmobile, il existe trois types d’applications :

— Les applications natives

— Les web applications

— Les applications cross-platforms

Chacune de ces méthodes présente leurs avantages et leur inconvénients, etnous essaierons de les confronter aux besoins de notre projet afin de savoir les-quelles de ces méthodes nous allons devoir adopter.

Figure 4 – Logo Android Figure 5 – Logo Apple

3.2.1 Les applications native

Les applications natives sont des applications spécifiquement développées pourun système d’exploitation.En effet, Android et iOS ne supportent pas le même langage de programmation.Il faut donc développer une application pour chaque système. Cependant le dé-veloppement d’applications natives propose de gros avantages malgré son tempsde déploiement plus long. En effet, le développement natif, permet d’accéder ai-sément à tous les capteurs et instruments présents dans le smartphone (GPS,Gyroscope, boussole, etc.. ).Ces capteurs étant nombreux au sein de nos appareils, leur utilisation dans desapplications permet une grande diversité d’applications.De plus, les applications natives sont, du moins théoriquement, plus rapides que

10

les autres types d’applications étant développées spécialement pour un type d’ap-pareil.

3.2.2 Les web-applications

Les web applications sont des applications directement en ligne et qui sontaccessibles via le navigateur web. Il n’est donc pas nécessaire de faire une ins-tallation sur la machine cliente. Similaire à un site web, une application web estinstallée sur un serveur et utilise des commandes graphiques pour manipuler lesinformations affichées.Actuellement, une web application est en développement depuis le début du pro-jet. Cette web application présente les informations des capteurs sur une carteen perspective 3D et permet d’interagir avec les noeuds afin de voir le détails desmesures collectées. Toutefois des limites se font sentir avec cette solution, notam-ment d’interactions et de fonctionnalités.Premièrement, une web application ne permet d’utiliser efficacement les fonction-nalités qu’offrent les smartphones comme la fonctionnalité GPS ou gyroscope.Ensuite, pour fonctionner, une web application nécessite absolument une connexioninternet afin de se lancer dans un navigateur web.Enfin, étant donné qu’une application web n’est pas développée spécifiquementpour tel ou tel appareil, elle devra s’adapter à chaque appareil sur lequel elle seralancée. Elle n’est donc pas optimisée, et entraîne des ralentissements.

3.2.3 Les applications cross-platforms

Les applications cross-platforms contrairement aux applications natives, sontdéveloppées une seule et unique fois et sont compatibles sur iOS et Android. Lesapplications cross-platforms se font par des frameworks. Ce type d’applicationspermet un gain de temps considérable. Elle possède les avantages du développe-ment natif, à savoir la possibilité d’utiliser facilement les capteurs physiques dusmartphone, tout en gardant la rapidité d’exécution. De plus, il n’est pas néces-saire d’apprendre plusieurs langages de développement afin de pouvoir créer uneapplication fonctionnant sur plusieurs plateformes mobiles.

11

3.2.4 React Native

Après avoir étudié les différentes méthodes existantes afin de trouver la so-lution optimale pour l’application mobile CARERC, le choix s’est porté sur undéveloppement cross-platform. Ce type de développement permettra un tempsde développement réduit ainsi qu’un déploiement sur les deux principales pla-teformes mobiles Android de Google et iOS d’Apple. Il existe de nombreusespossibilités afin de développer en cross-platforms, mais notre choix s’est porté surReact Native. React native est un framework développé par Facebook. Il se dé-marque de ses autres concurrents par le fait que React native permet l’utilisationdes composants natifs du smartphone au lieu d’utiliser des composants web. Cequi lui permet d’obtenir une meilleure compatibilité, et une meilleure fiabilité. Leframework React Native utilise le langage de programmation Javascript.

Figure 6 – Logo React Native Figure 7 – Logo Javascript

3.3 Rédaction cahier des chargesToujours dans le cadre de cette étude préliminaire, un cahier des charges a

été rédigé. Dans celui-ci, ont été consignées toutes les informations concernant leprojet :

— Les besoins

— Les contraintes

— Les différentes fonctionnalités

— La technologie utilisée

— Le planning (cf. annexe B)

12

3.4 Apprentissage de React NativeAprès avoir choisi React Native pour la réalisation de l’application, il a fallu

apprendre à utiliser cette technologie.

Plusieurs semaines ont été nécessaires afin de maîtriser tous les aspects ettoutes les nuances de développements existant au sein de React Native. Celui-ci,même s’il utilise le langage de programmation JavaScript reste très complexe.

Pour faciliter cet apprentissage, le suivi de plusieurs MOOC a été nécessaire(Voir chapitre 5).

13

4 Développement de l’applicationmobile

Après avoir défini tous les besoins, toutes les contraintes, le matériel et logicieldevant être utilisé à travers notre étude préliminaire, nous sommes en capacitéde commencer la partie développement de l’application mobile.Cette partie est déjà en cours, mais n’est cependant pas terminée. Une descriptiondu travail déjà réalisé ainsi que les difficultés rencontrées y seront exposé. Nousverrons dans un second temps les travaux en cours, et enfin ceux à venir dans ladernière partie.

4.1 Création des vuesLa première étape est la création des vues de l’application. En effet, toute

application utilisable par un utilisateur doit avoir une Interface Homme Machine(IHM) claire et facilement utilisable.

Dans un premier temps, afin d’avoir une idée des différentes fonctionnalitéssans forcément tenir compte du design de l’application, un mockup a été réalisédont un extrait est visible sur la figure 8.

Figure 8 – MockUp

14

(a) (b)

(c)Figure 9 – Quelques vues

15

4.2 Ajout des modulesL’application est développée avec React Native. Comme nous l’avons vu, react

Native est un framework développé par Facebook. C’est un outil formidable pro-posant de nombreuses fonctionnalités propres aux smartphones, qu’ils soient sousAndroid ou iOS. Cependant les développeurs n’ont pas inclus parmi le framework,toutes les fonctionnalités existantes et pouvant être utilisées avec un smartphone.Dans de nombreux cas, il est indispensable de passer par des modules ou librai-ries, pouvant être inclus dans React Native, mais qui sont développés par desdéveloppeurs tierces.Le projet ne fait pas exception et il sera obligatoire de passer par l’utilisation deces modules afin que notre application puisse effectuer les actions voulues.

Le développement en React Native s’eefectue grâce à Node.js. L’installationdes modules se fait donc grâce à la commande npm.npm signifie « "Node Package Manager", c’est le gestionnaire de paquets deNode.js.

Figure 10 – Exemple d’installation module de navigation

4.2.1 Localisation

Fort heureusement, comme dit précédemment, certaines fonctionnalités sontincluses directement dans React Native. C’est le cas de la localisation. Il suffitd’inclure le module correspondant à la localisation afin de pouvoir l’utiliser dansnotre code afin de retourner la position GPS du smartphone sous la forme de

16

coordonnées (longitude et latitude) comme dans la figure 12.

Figure 11 – Code JS - Localisation

4.2.2 Carte/Maps

Notre application mobile est un outil de visualisation d’un réseau de capteurs.Il est donc indispensable de pouvoir visualiser l’emplacement de chaque capteurdu réseau directement sur une carte, comme cela est possible pour le site webCARERC.L’utilisation du smartphone permettra l’utilisation de celui-ci en temps que cap-teur, et d’afficher son emplacement sur la map grâce à la valeur récupérée précé-demment.

Pour l’intégration d’une carte dans l’application, il a été décidé d’utilisé MAP-BOX. Mapbox est un grand fournisseur américain de carte en ligne personnalisé

17

et personnalisable pour les sites web et les applications. Mapbox a été utilisé dansle cadre du développement du site web, il a donc été logique de se tourner versla même plateforme pour l’application mobile.

Figure 12 – Code JS - Mapbox

4.2.3 Wifi

Afin d’utiliser le smartphone en tant que capteur au sein du réseau, il est né-cessaire de retourner la localisation, mais également d’autres données. Parmi lescapteurs du smartphone utilisable, il y a les puces et cartes réseaux. Ces capteursnous permettront de remonter la puissance du signal reçu des réseaux sans-fil.

Cette donnée de puissance de signal associé à la donnée de localisation permettrad’améliorer la cartographie établie par le réseau de capteur une fois ces donnéesstockés au sein de la base de donnée InfluxDB.

Une nouvelle fois, l’utilisation de module développé par d’autre développeursera nécessaire.

18

Après études des différents modules existants pour l’analyse des réseaux sans-fil,le constat est qu’il existe de nombreuses possibilités sous android, mais aucunesous iOS. Il nous sera donc impossible d’utiliser cette fonction de l’applicationavec un appareil fonctionnant sous le système d’exploitation mobile d’Apple (voirparagraphe 4.2.4).

Le module utilisé pour android est "react-native-android-wifi". Ce module ap-porte de nombreuses fonctionnalités. Il permet notamment de :

— scanner le réseau Wifi

— se connecter à un réseau

— obtenir l’adresse IP et MAC

— activer/désactiver le wifi

— obtenir le SSID courant

— obtenir la force du signal wifi connecté (rssi)

Figure 13 – Visualisation donnée wifi

19

4.2.4 Problèmes rencontrés

Un des problèmes récurrent lors de l’utilisation de modules développées pardes développeurs tierces est la compatibilité avec les différentes versions de ReactNative. En effet, React Native étant régulièrement mis à jour, il se peut que lesmodules soit alors obsolètes ou présentes quelques bugs, s’ils ne sont pas adaptéspour fonctionner avec les nouvelles versions du framework. C’est pourquoi il estrecommandé d’utiliser des modules encore suivi par leur développeurs afin d’êtresur de leur fiabilité.

En cas de bug lors d’ajout de module, la solution est de parcourir la documen-tation afin de s’assurer que le bug n’est pas déjà répertorié par le développeur.Si malgré cela il n’y toujours pas de solution, il faut bien souvent parcourir lesforums de développement afin de trouver des cas similaires ayant déjà été résolu.

L’autre problème rencontrés durant cette partie du travail a été l’impossibi-lité de trouver un module effectuant la fonction de scanner de réseau wifi sous iOS.

En effet, le système d’exploitation Apple possèdent un écosystème très fermé,où les accès sont fortement contrôlés. Toutes les fonctionnalités du smartphone nesont pas utilisables car les API nécessaires à l’utilisation de ces fonctions ne sontpas disponibles. Elles existent mais ne sont disponibles que pour les développeursApple, ou encore dans certains cas particulier comme dans le développementd’une application ne nécessitant pas de déploiement sur le store. Ce sont des APIdites privées.

Il n’y a donc aucune solution à ce problème, et la fonctionnalité de scan duréseau wifi ne sera pas disponible sur les smartphones iOS.

20

4.3 Connexion à la base de donnéeL’application est une application de visualisation. Pour cela elle doit être ca-

pable de faire parvenir à l’utilisateur les données provenant du réseau de capteurset qui sont stockées au sein de la base de données InfluxDB. Cependant, de base,InfluxDB n’est pas compatible avec React Native. Cela implique la recherched’une solution afin d’autoriser l’application à communiquer avec la base de don-nées.

Cette partie du travail est toujours en cours. C’est un travail, nécessitantbeaucoup de recherche et de temps.

4.3.1 Approche proposée

Dans le cadre de la recherche d’une solution à la communication entre appli-cation et base de données, deux approches ont été retenu :

— La création d’un API faisant une passerelle entre l’application et la base dedonnées

— L’utilisation d’un serveur Node.js sur l’application mobile (Node.js étantcompatible avec InfluxDB)

Pour le site web CARERC, un script développé en PHP est chargé de la liai-son avec la base de données. C’est de là que viens l’idée d’un API développé luiaussi en PHP.

Cette API, relié à Internet (par exemple via un Raspberry Pi) serait doncchargé de faire le lien entre la base de données et l’application, que ce soit enenvoi ou en réception de données.

Cependant, cette idée à rapidement était abandonnée principalement pourdeux raisons : rapidité et fiabilité.Tout d’abord, utiliser une passerelle déporté de notre application implique quecette passerelle doit toujours être disponible sur internet pour pouvoir être attei-gnable par l’application.Enfin, une communication avec la base de données via cette passerelle serait trèslente. En effet, la vitesse de transmission ou de récupération des données dépen-drait de plusieurs facteurs :

— Rapidité de la connexion internet de l’API

21

— Rapidité de la connexion internet de l’application

— Capacité physique du smartphone

En prenant ces facteurs en compte, cette idée a donc été abandonnée pourêtre remplacé par une autre approche plus prometteuse : l’utilisation de Node.js.

Node.js est une plate-forme de développement open source permettantd’exécuter du code JavaScript côté serveur. Node est utile pour dévelop-per des applications devant être utilisées pour des applications en tempsréel, telles que le chat, les flux d’actualités.

Node.js

En creusant un peu plus profondément le sujet, nous avons découvert l’exis-tence d’un module permettant l’utilisation de node.js dans l’application mobile.Ce module s’appelle nodejs for mobile App et il est développé par janeasystems(voir [1]).

Node.js quant à lui propose un API afin d’intéragir avec une base de donnéeInfluxDB, node-influx (voir figure 14).

Figure 14 – API Node Influx

22

L’utilisation de node pour mobile permet d’intégrer la technologie permettantla connexion et la communication à la base de données directement dans notreapplication mobile.Dans la figure 15, on peut voir un morceau de code permettant la connexionvers la base de données InfluxDB ainsi qu’une requête retournant la températurecapté par les différents noeuds. Le résultat est montré dans la figure 16.

Figure 15 – Exemple code Node.js

Figure 16 – Résultat du code Node.js précédent

23

4.3.2 Problèmes rencontrés

Cette partie du développement de la connexion à la base de données n’estpas terminé. En effet, il a fallu pour ma part revoir des cours sur Node.js afin depouvoir développer en utilisant cette technologie. Node.js ayant de nombreusesspécificités propres à son langage, c’est un apprentissage long et complexe. Unenouvelle fois, le suivi d’un mooc s’est révélé très utile.

Une fois le langage Node.js approprié et un script fonctionnel (Figure 15) ré-digé, viens la partie intégration à React Native.

Malgré la présence du module permettant l’utilisation de Node.js dans reactnative, c’est un travail relativement complexe.La documentation de node.js for mobile n’étant pas très fourni, le travail derecherche est donc très important. De plus, après de nombreuses recherches surdes forums de développements, aucuns cas de développements similaires n’a ététrouvé.

La difficulté résulte dans le fait de faire communiquer la partie Node.js avecla partie React Native.En effet Node.js propose une fonction de "pont" (bridge) pour faire communiquerle code Node.js avec le code React Native, mais le manque de documentationrend ce travail complexe.

A l’heure de la rédaction de ce rapport, ce problème est sur le point d’êtrerésolu.

4.4 Autres fonctionnalitésMalheureusement, pris par le temps et le délai court qu’offre le stage. Le

développement des autres fonctionnalités tels que la gestion des noeuds existant(suppression) ou que la gestion des utilisateurs non pas pu être traités dans lecadre de ce stage.Ces fonctionnalités pourront néanmoins être ajoutés ultérieurement en cas debesoin.

24

5 Déploiement de l’application etdocumentation

Cette partie du travail est à venir et interviendra après la phase de dévelop-pement.

Le déploiement de l’application consiste à la mise à disponibilité de l’appli-cation pour tous. A cet effet, l’application sera donc déployée sur les stores dessystèmes d’exploitations pour lesquels l’application a été développée, à savoir leGoogle Play pour Android et l’App Store pour iOS.

Cette étape de déploiement est importante, et intervient après de nombreuxtest, afin de s’assurer que l’application est fonctionnelle et ne présente pas defaille, de bug.Une fois l’application disponible sur les stores, il faut également s’assurer du suivide celle-ci. En effet, notre application doit être mise à jour si besoin, mais elledoit surtout être suivi pour prévenir l’arrivée d’éventuel bug, et les corriger dèsque cela arrive.

Dans le cadre de ce suivi, la création d’une documentation est nécessaire etobligatoire. Cette documentation sera divisée en deux parties :

— Une partie technique

— Une partie tutoriel

La partie technique de la documentation sera utilisée pour la maintenance del’application mais également pour de futurs ajouts de fonctionnalités.

La partie tutoriel sera là afin d’aider l’utilisateur dans l’utilisation de l’appli-cation. Elle expliquera les différentes fonctionnalités de l’application et la manièredont il conviendra de l’utiliser.

25

Mooc

Durant le stage de Master 2 Informatique, le suivi d’un mooc à été imposé.Le sujet du mooc étant libre, chaque étudiant était libre de choisir le cours quilui plairait.

Pour ma part, travaillant durant mon stage sur une technologie inconnu j’ai dupour pouvoir effectuer le travail demandé, me former sur les technologies utilisées.

Pour cela plusieurs Mooc ont été suivis, dont voici la liste.

Site OpenClassrooms :

— Développez une application mobile React Native

— Gérez votre code avec Git et GitHub

— Apprenez à coder avec JavaScript

— Des applications ultra-rapides avec Node.js

Site Udemy :

— React Native pour débutants

26

Conclusion

Ce stage au LE2P a été très enrichissant car il m’a permit dans un premiertemps de faire face aux enjeux d’un laboratoire de recherche, dans les domainesde l’informatique et des sciences. Et dans un deuxième temps de confronter mesconnaissances théoriques acquises durant mon parcours universitaire avec un en-vironnement professionnel.Le stage lui-même m’a permit de travailler sur des notions informatiques quitouchent aux matériels (les réseaux de capteurs) mais surtout logiciel (dévelop-pement d’une application mobile). Il m’a aussi permit d’aborder des concepts plusou moins éloignés de l’informatique comme la gestion énergétique des réseaux decapteurs.

De nombreux sujets ont été traités tout au long de ce stage. Certains sont prêtstandis que d’autres continuent encore à évoluer. L’application n’est à ce jour pasterminée, mais elle sera au moins dans une première version d’ici la fin de ce stage.

Sur le plan personnel, ce stage a été une très grande expérience. En effetme retrouver en autonomie pendant presque six mois m’a permis d’assumer desresponsabilités mais également d’acquérir une rigueur et une certaine maturité.

27

Bibliographie

[1] Node.js mobile.https://code.janeasystems.com/nodejs-mobile.

[2] Site Web LE2P.http://www.le2p.fr.

[3] Site Web React Native.https://facebook.github.io/react-native/.

[4] Site Web OpenClassrooms.http://openclassrooms.com.

28

A Charte Graphique

29

B Planning et Diagramme de Gantt

30