Introduction

Afin de pouvoir adminsitrer toute le système du suivi d'affluence, nous avons besoin d'une application web qui récupère les données souhaitées comme les statistiques des événements, zones, stands et caméras. Cette application doit également permettre de pouvoir créer, modifier et paramétrer tous ces éléments nécessaires au fonctionnement du suivi d'affluence. Cette application web communique directement et uniquement avec l'API Front-End Koa.

Elle utilise l'ensemble des routes GET sur l'API permettant de récupérer des informations sur les différentes entités (évènement, zone, stand, caméra, etc.) ainsi que de récupérer les statistiques associées à ces entités. De plus, les routes POST, PATCH et DELETE sont utilisées afin d'ajouter, mettre à jour, configurer ou supprimer ces entités.

Elle est développée en Angular 16. Angular est un framework de développement d'applications web open-source, largement utilisé pour créer des applications web riches et dynamiques. Il a été développé par Google et écrit en TypeScript. Angular suit le modèle d'architecture de conception MVVM (Modèle-Vue-VueModèle) et est largement utilisé pour créer des applications frontales.

Afin de rendre cette application web simple d'utilisation et de mise en place, nous avons utilisé le Dessign System Material en version 16.1. Material est un système de conception développé par Google qui a été introduit pour la première fois en 2014. C'est un ensemble de lignes directrices, de composants et de motifs de conception visuelle destinés à créer une expérience utilisateur cohérente, attrayante et conviviale sur les différentes plateformes et appareils. Le Material Design est conçu pour être utilisé sur diverses plateformes, telles que les applications mobiles, les sites web et les applications de bureau. Il repose sur des principes de conception clairs et des règles pour créer des interfaces réactives et dynamiques. Voici quelques caractéristiques clés du Material Design :

• Interface visuelle propre et moderne : Le Material Design utilise des surfaces en papier, des ombres et des animations pour donner une apparence propre et moderne à l'interface utilisateur.
• Utilisation d'éléments tactiles : Il met l'accent sur l'utilisation d'effets tactiles pour donner aux utilisateurs un retour d'information immédiat lorsqu'ils interagissent avec les éléments de l'interface.
• Animation fluide : Des transitions d'animation douces et fluides sont utilisées pour créer une expérience utilisateur agréable et naturelle.
• Couleurs et typographie : Le Material Design utilise une palette de couleurs vives et des polices lisibles pour améliorer la lisibilité et l'accessibilité.

Le "Material Design" est également associé au développement de bibliothèques de composants qui suivent les principes du Material Design. La bibliothèque que nous avons utilisé est "Angular Material", qui fournit une collection de composants Angular préconstruits basés sur les directives et les styles du Material Design. Ces composants peuvent être facilement intégrés dans notre application Angular, ce qui permet d'économiser du temps et des efforts lors du développement.