Compte rendu_BOUGUEN

Compte rendu de stage
Entreprise : DIATEAM - 31 Rue Yves Collet, 29200 Brest (distanciel)
Tuteur : Phillipe BRUNOT
Téléphone : 02 98 050 050
Mail : philippe.brunot@diateam.net
Sommaire
Sommaire .................................................................................................... 1
1/Contexte :................................................................................................... 2
2/Mission confiée :......................................................................................... 2
3/Tâches effectuées ....................................................................................... 3
1-Introduction : ........................................................................................... 3
2-La liste :.................................................................................................... 4
3-La Carte :.................................................................................................. 5
4-La Fiche : .................................................................................................. 6
5-Les détails : .............................................................................................. 7
I/Splashscreen .................................................................................................... 7
II/Barre de navigation : ...................................................................................... 7
4/Outils utilisés .............................................................................................. 8
6-Bilan global ................................................................................................. 9
Josselin BOUGUEN,
Stagiaire chez DIATEAM
Page 1 sur 9

1/Contexte :
DIATEAM, est une société d’ingénierie Brestoise en cybersécurité composée de 27
employés. Depuis 2002, DIATEAM conçoit et développe des solutions innovantes en cyber
sécurité, en particulier sa solution « phare » de cyber range dédié à l’entraînement
opérationnel. L’innovation de DIATEAM dans le domaine du Cyber Range en fait un
partenaire de choix pour les grandes entreprises, les entités gouvernementales de défense,
les universités et l’industrie, en particulier pour les Opérateurs d’Importance Vitale, aussi
bien en France qu’à l’étranger. Cette entreprise met donc en place quatre services :
-RÉPONSE À INCIDENT :
A l’occasion d’un incident déclaré (rançongiciel, fuite de données, …) ou d’une nécessaire
levée de doute, une équipe d’experts intervient dans l’urgence pour accompagner la gestion
et la coordination de votre situation de crise (technique, organisationnel, humain).
-AUDIT TECHNIQUE :
Qu’il s’agisse de briques logicielles, de composants matériels, d’architectures, DIATEAM
accompagne dans l’évaluation de la sécurité de vos actifs. Les capacités d’audit aident à
identifier les points d’amélioration nécessaires à la transformation numérique et par
conséquent à la croissance d’une organisation.
-RECHERCHE & DÉVELOPPEMENT (le service de mon stage):
Chez DIATEAM la curiosité et la passion sont dans l’ADN, depuis toujours, notamment
quand il s’agit d’innover. Ils consacrent 50% de leur activité en R&D, en mode projet ou en
conseil technologique.
-CAPTURE THE FLAG :
Des concours/jeu de capture de drapeaux sont mis en place. Le but étant d’infiltrer un
réseau ou un site afin de s’entrainer et s’améliorer en cybersécurité.
2/Mission confiée :
Ma mission durant ces six semaines de stages sera de créer une application mobile Android
et IOS basée sur Flutter, c’est un kit de développement de logiciel d'interface utilisateur
open-source créé par Google. Cette application reprendra les données affichées dans le site
web nommé « Diabox », qui affiche en temps réel des données météos grâce à des jauges
et des graphiques (vent, température, pression …) ainsi que des webcams si il y en a. Les
données sont accessibles après avoir cliqué sur le nom d'une localisation dans une liste ou
sur une carte (souvent des plages). Le but est de faire une application mobile reprenant les
données affichées dans le site web, grâce à Flutter (une ancienne application était aussi
disponible mais elle n’est plus accessible). Je devrai donc vérifier si Flutter peut convenir aux
besoins de l’application, puis la réaliser. L’application serait destiné au grand public comme à
des Institution comme L’IFREMER qui utilise parfois le site web. Je pourrai aussi avoir à
réaliser des documentations techniques pour l’entreprise, comme par exemple un tutoriel
l’installation de Flutter. La difficulté dans ce projet est que le langage utilisé est nouveau , et
donc qu’il ne comporte pas beaucoup de solutions en ligne, et des documentations
uniquement en Anglais.
Page 2 sur 9

3/Tâches effectuées
1-Introduction :
Tout d’abord je devais en connaître plus sur Flutter et son fonctionnement avant de pouvoir
réaliser n’importe quel programme, pour cela j’utilisais la plupart du temps la documentation
du site web de flutter et ses exemples de codes pour chaque librairie :
https://flutter.dev/docs/
Les forums comme https://stackoverflow.com/ ou https://github.com/ peuvent aussi aider à
comprendre comment ce langage de programmation fonctionne.
Pour utiliser flutter j’ai dû premièrement installer git et flutter sur ma machine ,puis faire une
documentation d’installation pour l’entreprise. Afin de pouvoir tester mes codes j’ai dû
installer Android Studio ,c’est un environnement de développement incluant le SDK Android
et qui permet d’émuler des smartphones pour pouvoir directement visualiser tester des
applications dans un environnement presque réel. J’ai personnellement utilisé le logiciel
Visual Studio Code pour réaliser mes codes :
Page 3 sur 9

2-La liste :
L’application se compose de plusieurs pages ,la première est la liste des Diabox ,se sont les
points qui comportent des données météo à afficher (la plupart du temps des plages, des
camping, etc...).
Premièrement j’ai cherché comment réaliser une liste avec un simple tableau test et qui
puisse être cliquable ,car cette liste devait pouvoir renvoyer vers la fiche de cette Diabox ,qui
est la partie qui comporte les widgets météo et toutes les informations. Une fois compris
comment faire, je devais maintenant récupérer la vraie liste des Diabox.
Pour cela je devais réaliser une API (Application Programming Interface) en code en PHP
qui était hébergé sur un serveur de l’entreprise et dont j’accéderais grâce une connexion
Secure File Transfer Protocol (SFTP) et à ma clé SSH ,que j’utilisais personnellement avec
le logiciel Filezilla.
Le choix de Slim Framework a été fait afin de pouvoir créer des routes spécifiques pour le
serveur PHP (création d’url’), et du fait de sa légèreté :https://www.slimframework.com/. Ce
Framework facilitera une partie du travail car nous aurons besoins de plusieurs routes sur ce
serveur.
Pour récupérer les données ,mon code PHP devait interroger un serveur qui contient toutes
les données sur les Diabox, qui lui est codé en C++. Il est accessible via une URL et renvoi
toutes les données au format JSON. Sur le serveur PHP j’ai dû récupérer et filtrer les
données pour ne garder que celles qui nous intéressent. Une fois ce filtre fait il fallait
maintenant que l’application les récupères.
Sur l’application j’ai donc dû faire un appel HTTP sur le serveur PHP pour récupérer toutes
les informations de chaque Diabox. J’ai dû créer une classe d’objets pour pouvoir uniformiser
et stocker toutes les données.
J’ai ensuite dû adapter le système de liste aux vraies données. Cela à été assez compliqué
car les données qui sont reçues sont des données de type « Future » (asynchrones) ,donc
on ne peut pas forcément les utiliser directement dans le code. J’ai finalement trouvé des
solutions grâce aux forums et à mon maître de stage M. Philippe BRUNOT que je pouvais
contacter par messagerie direct ou par appel.
Il fallait finalement renvoyer les informations nécessaires vers chaque fiche pour pouvoir les
utiliser ensuite.
Page 4 sur 9

3-La Carte :
La deuxième page principale est la carte, elle représente tous les points GPS qui
contiennent des informations. Elle peut donc être plus pratique et plus compréhensible que
une liste.
Plusieurs librairies permettent d’afficher une carte sur Flutter ,comme le classique Google
Maps, qui est en plus lui aussi développé par Google. Mais la librairie de Google Maps
nécessite une clé d’API ,qui au bout d’un certain nombre de connexions ou de requêtes
devient payant. Et comme l’application devait être gratuit, il fallait une librairie gratuite. Après
plusieurs test c’est la librairie Flutter_map qui sera utilisé, et qui utilise OpenStreetMap.
Une fois la libraire choisie ,j’ai dû aller récupérer les données grâce à la première route créée
en PHP (toutes les Diabox et leurs informations). Pour cette fois ci utiliser chaque longitude
et latitude pour afficher chaque point sur la carte.
Pour cette partie j’ai eu encore des problèmes avec les données « Future » qui ne
s’affichaient pas directement ,je n’arrivais à ne les afficher que seulement grâce à un bouton.
M. Philippe BRUNOT m’a finalement apporté la solution que je ne trouvais pas.
J’ai ensuite dû définir les fenêtres de popup qui renvoient
vers chaque élément (chaque fiche). Pour cela j’ai utilisé
une fonction intégré dans Flutter_map qui gère les popup et
aussi le clustering (regrouper les points quand ils sont
proches). J’ai mis pas mal de temps sur cette partie, mais
elle m’a permis de mieux comprendre la structure et
l’organisation du code Flutter ainsi que sur la POO car j’ai du
créer des classes pour les markers et les diaboxs. Cette
fonction permet aussi de regrouper les points quand ils sont
proches. Et grâce à mon maître de stage j’ai pu réussir à
renvoyer vers chaque fiche :
Page 5 sur 9

4-La Fiche :
La fiche représente donc la page de l’application qui contient toutes les informations et
données de chaque Diabox grâce à des jauges ou des widgets.
Premièrement j’ai dû créer une nouvelle route sur le serveur PHP afin de créer une page qui
récupère toutes les données grâce à l’ID de la Diabox qui sera inséré dans l’URL (Ex :
…diabox/11/lastData) pour la Diabox avec l’ID=11. Coté appli, cela va servir dans un premier
temps à afficher sur la fiche les valeurs en texte ,ensuite il faudra afficher des gauges.
Cette fois ci la tâche est plus compliqué car il faut d’abord déterminer l’ID de la métadonnée
qui nous intéresse en fonction de son type (température, vent, etc.), puis grâce à cet ID le
nom du « produit » pour la Diabox concernée dans la liste Ces données sont encore une fois
accessible via une des URL qui renvoient un JSON qu’il faut parcourir en PHP. Puis une fois
cet ID trouvé il faut le comparer à chaque ID de tous les produits de la toute première
requête (toutes les Diabox et leurs informations).
Une fois tous les produits bien comparés et définis, leurs nom et leur ID devait être
urlencodé pour l’appel au serveur diabox afin de récupérer les données temps réel. Sur cette
route je devais uniformiser les données pour pouvoir les utiliser sans problèmes dans
l’application en Flutter (ex : ‘temp’ => ‘temperature’). Car tous les produits n’ont pas le même
nom dans le serveur parce que la base de données est complexe.
Cette partie était assez complexe ,mais M. Philippe BRUNOT m’a envoyé plusieurs mail
pour m’indiquer les différentes étapes à réaliser.
Ensuite j’ai du réaliser les widgets météos, pour cela j’ai utliser un framework Javascript
appelé Echarts qui gère plein d’affichages de widgets ,diagrames, shéma 3D...Nous avons
utilisé ce framework car c’était celui utilisé sur la première version de l’application (qui n’est
plus disponible aujourd’hui. Il est compatible avec flutter avec une simple librarie. Cela
permet de gagner du temps car des templates de widgets sont déjà créés sur leur
documentation. On peut voir ci-dessous différents widgets qui affichent les données en
temps réel pour le Phare du Minou :
Page 6 sur 9

5-Les détails :
I/Splashscreen
Lors de l’arrivée sur l’application ,une image doit être affichée le temps que les données soient
récupérés, et donc éviter un écran blanc. Pour cela je pouvais utiliser une librairie mais j’ai découvert
qu’en changeant les paramètres XML du fichier flutter on pouvait redéfinir cet écran appelé
splashscreen. Ce qui prend moins de place dans le code, et donc économise quelques performances.
J’ai également changé le logo de l’application de la même manière.
(Splashscreen à afficher)
II/Barre de navigation :
Pour passer d’une fenêtre à une autre (ex : de la liste à la carte) l’application nécessite d’avoir une
barre de navigation qui sera placée en bas de l’écran. Au départ je pensais que je devrais coder la
barre pour chaque page, mais finalement en l’insérant dans le fichier ‘main’ du projet et en appelant
les pages par-dessus, il est possible de laisser cette barre pour toutes les pages.
Page 7 sur 9

4/Outils utilisés
Flutter ,le kit de développement de logiciel d'interface
utilisateur open-source créé par Google permettant de créer
des applications mobiles.
Git est un outil qui permet de gérer différents projets en les
envoyant sur un serveur. Ce dernier est connecté à d'autres
développeurs qui envoient leur code et récupèrent le vôtre.
Cela permet de sauvegarder et partager le code.
Android Studio est un environnement de développement pour
développer des applications mobiles Android en permettant
d’émuler des smartphones pour tester ses codes.
WampServer la plateforme de développement Web, que j’utilise pour
son interpréteur de script, et donc pour tester en local mes codes PHP
avant de les envoyer sur le serveur de production.
Visual Studio Code est un éditeur de code extensible développé par
Microsoft pour Windows, Linux et MacOs. C’est un choix personnel
,mais j’aime travailler sur ce logiciel. Je peux tout aussi bien l’utiliser
pour coder du Flutter comme du PHP.
Gajim est un logiciel libre client de messagerie instantanée pour le
réseau standard ouvert Jabber. Il permet de communiquer via un tchat
à mon maître de stage.
Le logiciel Filezilla est un client FTP, FTPS et SFTP. Il me permet
d’envoyer les codes en PHP sur le serveur via une connexion SFTP.
Grâce à son gestionnaire de site on peut sauvegarder le serveur et s’y
connecter en deux clics
Google Chrome, un des navigateur le plus populaire, basique mais il
me permet de faire mes test en PHP, mais aussi de faire toutes les
recherches dont j’ai besoin pour me permettre de réaliser des bons
programmes.
Page 8 sur 9

6-Bilan global
Pour moi ce stage a été très enrichissant, il ma permit de comprendre comment réaliser une
application ainsi qu’une API pour lui fournir des données. L’API étant codé en PHP cela m’a
montré une nouvelle utilisation de ce langage. Ainsi que la découverte d’un nouveau langage
et frameworks (Flutter,Echarts,Slim) donc j’ai aussi progresser en anglais technique car la
majorité des forums qui en parlent sont presque exclusivement en anglais, de même pour la
documentation elle-même de flutter. Ce langage peut être aussi une compétence
intéressante car si il est recherché par les entreprises plus tard cela peut être un point en
plus sur le CV. J’ai aussi pu comprendre comment pouvait se dérouler un projet en
entreprise et de ne pas hésiter à aller poser des questions à des personnes de l’entreprise.
Cela m’a aussi apporter beaucoup d’autonomie du fait que je sois exclusivement en
télétravail dû au conditions actuelles. M’intéressant aussi sur le travail freelance
(autoentrepreneur) ça m’a aussi parfois montrer ce que pouvait-être ce mode de travail
malgré que je ne sois quand même en contact de temps en temps avec mon maître de stage
ce qui est un grand avantage.
Ce que j’aurais aimé faire différemment ce serait peut-être d’apprendre à mieux planifier ce
que je dois faire, car sur certaines parties cela m’a pris plus de temps que ce dont j’aurais
pensé et à cause de ça je n’ai pas forcément eu le temps de tout finir. Comme par exemple
tous les détails des widgets (marge trop grande...) ou encore la partie webcam de chaque
fiche.
L’application n’est malheureusement pas encore finie, mais les aspects principaux de cellesci
ont été quand même abordé. Je n’ai non plus pas forcément eux le temps de faire la partie
IOS ,préférant me concentrer d’abord sur la partie Android.
Page 9 sur 9