Interface web pour centrale de détection d'eau Dragonfly250

Pour valider ma seconde année de BUT GEII, j'ai réalisé un stage d'une durée de 12 semaines au sein de l'entreprise Adema REI. Cette entreprise est spécialisée dans la conception et la fabrication de plusieurs produits, dont la centrale de détection d'eau Dragonfly250.

Présentation du projet

La centrale Dragonfly250 permet de centraliser la détection d'eau dans un bâtiment. Elle communique avec plusieurs modules de détection d'eau. Ces modules sont reliés à la centrale par un bus RS485 et une communication en MODBUS.

La configuration de la centrale se fait par un écran tactile et une interface faite en WinForms. Cette interface ne permet pas de configurer la centrale à distance. L'objectif de mon stage était donc de créer une interface web permettant de configurer la centrale à distance, et de configurer plusieurs centrales en même temps.

Présentation de l'interface web

Capture d'écran de la page d'accueil

L'interface web est composée de plusieurs pages. La page d'accueil est accessiblement sans connexion, et permet de voir l'état de la centrale. L'appui sur le bouton "Connexion", ou n'importe où sur la page permet d'accéder à la page de connexion. C'est un comportement similaire à celui de la page d'accueil de la centrale.

Capture d'écran de la page de connexion

Un clavier numérique est affiché pour entrer le code. Il est plus agréable de taper le code à l'écran tactile plutôt que sur le clavier virtuel en pop-up. C'est une adaptation nécessaire pour adapter l'utilisation de l'interface web à l'utilisation sur la centrale.

Capture d'écran de la page "réseau"

Cette page permet de lister les modules connectés à la centrale. Des boutons permettent de configurer ou supprimer les différents modules, ou de lancer un scan du bus pour détecter les modules non configurés.

Capture d'écran de la page "configuration"

Technologies utilisées

L'interface web est développée en Vue.js 3, avec le framework Oruga et le framework CSS Bulma. L'interface communique avec la centrale par une API REST, développée en C# avec le framework ASP.NET Core.

Authentification

L'authentification est réalisée avec un token JWT. Ce token est généré par la centrale lors de la connexion, et est stocké dans la mémoire de la centrale. Lors de la connexion, le token est envoyé à l'interface web, qui le stocke dans le local storage du navigateur. Lors de chaque requête, le token est envoyé dans le header de la requête. La centrale vérifie la validité du token, et renvoie une erreur si le token n'est pas valide.

Ce projet m'a fait découvrir le fonctionnement des tokens JWT, et de ce qu'il faut et ne faut pas faire avec. J'ai également découvert le fonctionnement des middlewares dans ASP.NET Core, qui permettent de vérifier le token à chaque requête.

Stocker le token dans le local storage n'est pas une bonne pratique, car il est accessible depuis le code JavaScript. Il est préférable de stocker le token dans un cookie, qui n'est pas accessible depuis le code JavaScript.

Communication avec la centrale

Ce projet m'a fait découvrir le C# et ASP.NET Core. Étant donné que l'application doit fonctionner avec Mono, je ne pouvais malheureusement pas utiliser .NET Core. J'ai donc utilisé ASP.NET Core 2.2, qui est la dernière version compatible avec Mono.

Il est très simple de créer une API REST avec ASP.NET Core. Il suffit de créer un contrôleur, et d'ajouter des attributs aux méthodes pour définir les routes et les méthodes HTTP. Par exemple, la méthode suivante permet de récupérer la liste des modules connectés à la centrale :

[HttpGet("modules")]
public ActionResult<List<Module>> GetModules()
{
    return _centrale.Modules;
}

Conclusion

J'avais déjà de l'expérience avec le framework Vue.js 2, mais ce projet m'a permis de découvrir la version 3. Il a fallu s'adapter à différents patterns de développement, mais le projet a été très intéressant à réaliser. J'ai également découvert le C# et ASP.NET Core, qui sont des technologies très intéressantes.