Skip to content

Description Technique

Ludwig SILVAIN edited this page May 11, 2022 · 10 revisions

Choix technologiques

Notre application étant une application Web avec une logique métier complexe, nous avons fait le choix de la scinder en deux :

  • une partie pour la partie métier : API,
  • une seconde pour l'interface utilisateur : Frontend. Ce choix nous permet de diviser la complexité et facilitée la maintenance à long terme.

Concernant le choix des technologies, nous avons fait le choix de .Net Core pour l'API et le framework javascript React pour le projet frontend.

React

Nous avons fait le choix de ce framework, car un de nos membres connaissait déjà cette bibliothèque, et qu'un second souhaité apprendre et approfondir celle-ci. Nous sommes donc partis sur un projet Node JS avec Vite.js comme regroupeur de modules statiques. Nous avons choisi ce dernier au lieu de Webpack , car Vite.js offre une plus grande rapidité de compilation et un meilleur système de rechargement à chaud.

Nous avons également mis en place des bibliothèques comme :

  • Typescript : aussi bien pour forcer la cohérence dans nos composants, que pour découvrir ce module
  • eslint : pour maintenir une certaine qualité de code
  • postcss et autoprefixer : pour rendre compatible notre site sur plusieurs navigateurs, pour ces deux modules nous supportons les deux dernières versions des navigateurs qui sont utilisés par plus de 1% de la population.
  • Redux : pour la gestion des états globaux à notre application

Conception du design

Pour concevoir le design nous avons utilisé l'application en ligne Figma : voir notre projet.

Vous pouvez également retrouver notre projet de brainstorming sur Figma : voir le projet de brainstorming

On peut également consulter les différents éléments de design en allant sur la route /_ui du projet frontend.

.Net core

Ce choix technique est motivé par notre bonne connaissance du langage C# et par le fait que l'un nos membres habitué à .net Core 3.1 souhaite approfondir .Net Core 6.0.

Nous avons également utilisé une division en mode n-tiers (6 couches) pour le développement de notre application :

  • Statutis.Entity : contenant les classes représentant les concepts de base notre application (exemple : Service, Utilisateur, ...)
  • Statutis.Core : regroupant les interfaces de nos services destinées à la couche buisness et repository
  • Statutis.DbRepository : couche où se trouve l'implémentation des respository destinés à la base de données, ainsi que l'implémentation pour EntityFrameworkCore. Nous avons fait le choix d'utiliser cet ORM pour la partie base de données car nos membres connaissent très bien cette technologie.
  • Statutis.Buisness : contenant l'implémentation de la logique métier de notre application
  • Statutis.Cron : c'est dans ce projet que se trouvent les tâches planifiées de notre application (exemple : vérification de l'état des services, ...)
  • Statutis.API : cette couche contient la partie API Rest de notre application.

Concernant la qualité de code nous avons décidé de suivre les conseils fournis par le compilateur (les warnings). Pour la documentation de notre API, nous avons utilisé Open API (et Swagger UI pour l'affichage) qui est le format de documentation le plus connu pour les API Rest.

Environnement de développement

Fontend

Voir le dépôt

API

Voir le dépôt

Déploiement

Comme serveur de production, nous avons opté pour un serveur VPS (Virtual Private Server) chez l'hébergeur Français OVH à 3,49 € par mois avec 1 cœur CPU, 2 Go de ram, 40 Go en SSD NVMe et 250 Mbits/s de bande passante. Au niveau de l'architecture de déploiement, nous avons opté pour Docker, car c'est une technologie éprouvée et que nous connaissons bien. Pour déployer notre logiciel, nous utilisons le logiciel d'automatisation Ansible avec notamment le rôle Ansistrano. Et pour lancer ces actions de déploiement, nous utilisons les Github actions qui se déclenchent automatiquement lors de la modification de la branche principale. À noter que toutes ces instructions liées au déploiement sont contenues dans le projet docker-compose.

Clone this wiki locally