Cette page résume les décisions prises pour le projet.

IDE

Nous avons décider de chacun partir sur un ide différent afin de voir si nos 2 ide serait suffisamment complet pour réaliser le projet. Un changement d'ide peut être fait pendant le projet si le besoin se fait sentir.

Atom

Atom est un éditeur de texte libre pour macOS, GNU/Linux et Windows développé par GitHub. Il prend en charge des plug-ins écrits en Node.js et implémente Git Control. La plupart des extensions sont sous licence libre et sont maintenues par la communauté.

Pourquoi Atom ? Car atom permet d'installer une multitude de packages crée par la communauté, qui est actif, se qui permet d'avoir des extensions à jour et utilisable.

Packages nécessaires à Atom

Package pour react

Package pour debug le javascript

VS Code

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré.

Pourquoi VSCode ? Car VSCode possède beaucoup d'extensions installables dont une extension pour React développée par Microsoft

Extension nécessaire pour vscode

Extension React

Framework

React a été choisi puisqu'il fait parti des langages les plus utilisés (à la mode) et aimés, et que nous sommes intéressé à l'apprendre.

Cela nous permettra de comparer avec vue.js, qui a été utilisé au cours du module GUI2.

Bonnes pratiques

Structure du projet

Standards React

CSS

Pour le CSS nous avons choisi d'utiliser Bootstrap 4.6 sans utiliser la libraire React-Bootstrap. Nous ne voyons pas la nécessité des fonctionnalités proposées par React-Bootstrap.

Si le besoin de CSS personnalisé se fait ressentir, nous avons décidé d'utiliser styled-components styled-components. (Référence pour les différentes possibilités)

Templates

Template de login

Template de l'application

Documentation technique

Pour générer la documentation technique (javascript) on vas utiliser jsdoc, si nous voyons que les besoins ne sont pas satisfait, on testera autre chose en cours de projet.

Pour la mise en place on a suivi un tuto.

Il suffit de lancer npm run docs pour générer la documentation. Cela crée un dossier "docs" ou l'on a juste à exécuter l'index.html pour voir le documentation générée.

Documentation de conception

Pour générer la documentation de conception (diagramme uml classe et séquence) on vas utiliser astah, afin de pouvoir avoir des fonctionnalités entre les différentes pages ainsi qu'afin de découvrir une nouvelle application. Nous avons pensé à draw.io, mais astah a des fonctionnalités en plus que nous voulons tester. Il est par contre moins intuitif que draw.io et moins facile d'accès (besoin d'utiliser la version communauté ainsi que d'installer l'application)