Introduction

Nous allons voir durant ce chapitre la phase de la réalisation du livrable qui

répondra aux différents besoins des utilisateurs pour surveiller et contrôler le robot
MiR. Ce chapitre sera consacré à l'exposition de la structure du projet final ainsi
que les différentes interfaces qui composent notre Dashboard.

1. Structure du projet

Le projet contient deux dossiers principaux : client (qui représente la partie

Frontend) et server (qui contient les dossiers du Backend).

1.1 Structure Backend

La capture d'écran ci-dessous représente

l'architecture des dossiers côté backend (dans le dossier
serveur). Nous avons organisé nos fichiers en cinq
dossiers pour respecter le design pattern MVC, ce qui
nous a permis de développer une application facile à
maintenir.
Les trois dossiers principaux de notre structure sont les
suivants :

• Le dossier "Controllers" : il contient toutes nos

classes de contrôleurs chargées du traitement des
entrées utilisateur et de la génération des
réponses.
• Le dossier "Models" : il regroupe l'ensemble des
fichiers qui définissent la structure de notre base
de données.
• Le dossier "Routes" : il rassemble tous les
fichiers qui définissent les routes reconnues par
notre API.
De plus, il y a le fichier server.js contient le code
nécessaire pour démarrer et configurer le serveur web
et inclure des dépendances nécessaires pour créer
Dashboard et définir les routes, ainsi que d'autres
modules ou bibliothèques nécessaires pour la gestion
des requêtes, des bases de données, des sessions, etc.
Et d’autres dossiers et fichiers des configurations …

50
1.2 Structure Frontend

Nous avons opté la structure standard des dossiers généré par le service vue
CLI du framework vue JS qui facilite le développement et la gestion des différents
aspects du projet. Cette structure contient :

-Le dossier `public` : qui contient les fichiers statiques de votre application qui
seront directement servis par le serveur sans être modifiés
par le processus de construction.

-Le dossier `src` : qu'est le cœur de votre application Vue.js.

Il contient tous les fichiers sources de votre projet. Voici
une description des sous-dossiers les plus courants à
l'intérieur de `src` :

➢ `assets` : Ce dossier est destiné à stocker des

ressources statiques spécifiques à votre application,
telles que des images, des polices ou des fichiers
CSS.
➢ `components` : est l'endroit où vous stockez les
composants réutilisables de votre application Vue.js.
Vous pouvez organiser les composants en sous-
dossiers selon votre préférence ou votre architecture.
➢ `views` : contient les composants de vue de niveau
supérieur qui représentent les différentes pages ou
vues de votre application.
➢ `router` : contient les fichiers liés à la configuration
du routage dans votre application Vue.js. Vous y
trouverez généralement un fichier `index.js` qui
définit les routes de votre application et les associe
aux composants de vue correspondants.
De plus on a les fichiers :

App.vue : Ce fichier représente le composant racine de l'application. Il contient

la structure de base de l'application et sert de conteneur principal pour les autres
composants.

main.js : Ce fichier est le point d'entrée principal de l'application. Il est

responsable de l'initialisation de l'application Vue.js et de la configuration initiale.
Et bien d’autres fichiers de configurations …

51
2. Interfaces graphiques

2.1 Page d’authentification

Cette page est une interface utilisateur conçue pour permettre aux utilisateurs
d'accéder au Dashboard après avoir entré un e-mail et un mot de passe valides
(qui leur sont donnés par les administrateurs du Dashboard).

Figure 25 : page d’authentification

2.2 Page d’accueil

Après la connexion au Dashboard vous trouvez la page d’accueil. Cette page

contient les différents outils pour contrôler et surveiller les robots.

On va décrit chaque outil séparément pour une meilleure compréhension.

52
 Connecter à un robot
Après avoir cliqué sur le bouton "Choisir un robot", une carte s'affichera
présentant une sélection de robots parmi lesquels vous pourrez choisir. Lorsque
vous cliquez sur l'un des robots, les données correspondantes seront transmises
aux autres outils afin de contrôler ce robot.

Figure 26 : carte de choix du robot

Surveillance de la batterie, live et contrôler l’état du robot

Une fois que vous avez sélectionné un robot, la page d'accueil s'affichera l'état
de la batterie du robot ainsi qu'une diffusion en direct de sa caméra. De plus, vous
aurez la possibilité d'allumer ou d'éteindre le robot depuis cette page.

Figure 26 : la page d’accueil ‘1’

53
 Faire un trajet
La page d'accueil offre aux utilisateurs la possibilité d'effectuer un trajet ou
une mission spécifique.

Figure 27 : la page d’accueil ‘2’

Compteur de missions
Une fois qu'ils ont spécifié la station de départ, la station d'arrivée et le nom de
la mission, le robot se mettra en mouvement pour effectuer ce trajet. De plus,
chaque fois qu'une mission est accomplie avec succès, le compteur de missions
sera incrémenté comme vous voyez à l’image ci-dessous.

Figure 28 : la page d’accueil ‘3’

54
 Afficher un alerte
Lorsque le capteur TOR détecte un obstacle devant le robot qui l'empêche de
compléter sa mission, un message d'alerte s'affiche sur le tableau de bord pour
informer les utilisateurs qu'ils doivent se rendre auprès du robot afin de vérifier et
de corriger le problème.

Figure 29 : la page d’accueil « Afficher un alerte »

2.3 Page Utilisateur

La page de gestion des utilisateurs comprend un tableau affichant les données

de tous les utilisateurs, ainsi que des actions de modification et de suppression
associées à chaque utilisateur.

Figure 30 : la page utilisateur

55