Analyse technique
React va, si besoin, discuter grâce à des POST et des GET avec Express JS qui fait le lien avec le backend: NodeJS. Node ira ensuite récupérer, si besoin, des infos dans la base de donné et les renverra avec les autres infos qu'a besoin React.
Express
- Justification du choix
Dans un soucis de facilité et de cohérence du code nous avons décidé de réaliser une application Full-Stack JS. Les deux grands piliers des frameworks Backend JS sont Express et KOA. Les avantages de KOA:
- Flexible et personnalisable
- Intégration de middleware et services tiers facile
- Léger
Les avantages d'Express:
- Minimaliste
- Très flexible
- Configuration considérer comme "standard" dans un environnement nodeJs
- Grande documentation
Nous avons choisi Express car sa grande documentation et sa popularité nous aiderons dans le développement de notre application. De plus notre application étant relativement simple les nouvelles technologies apporté par KOA ne nous serviront pas.
- Organisation du code
├───config ├───middleware ├───models └───routes
- Diagramme de classes UML
[Diagramme de classes] [Explication textuelle du diagramme de classes]
- Fonctionnement
Pour le backend nous nous sommes aider de Sequelize qui est un ORM JS pour (entre autre) MySQL. Lorsque la requête arrive nous la traitons dans la route et grâce aux fonctions fournit par Sequelize nous récupérons les informations de la DB et les renvoyons vers le backend
- Justification du choix
La base de données est faite en MySQL car c'est un gestionnaire de base de données relationnelles qui est populaire et facile d'accès. Il a une documentation qui est assez développée et son utilisation est intuitive et ressemble beaucoup au gestionnaire utilisé en première année.
- Diagrammes
Les tables sont au nombre de 7, il y a une table pour les users, une pour les cours avec une qui fait la liaison et une pour les commandes avec une qui fait la liaison. Grâce aux tables agenda_users et commande_users on garantit l'atomicité des données.
De plus il y a deux tables, galerie_site et galerie qui stockent les images du site. La galerie sert à garder toutes les images upload sur le server et galerie_site, celles qui sont affichées sur le site.
Les trois grands framework frontend sont Vue.js, React et angular.
Avantages Angular:
Nous avons choisi React comme librairie/framework car il est simple d'utilisation, permet de facilement rajouter d'autres librairies si il y a besoins d'étoffé ses fonctionnalités et est le framework sur lequel l'équipe avait le plus d'expérience se qui réduira les "couts".
Pour le CSS nous avons décider d'intégrer React-Bootstrap qui nous permet d'intégrer pleins de composant stylisé Bootstrap et notamment le carrousel qui a été utilisé pour l'accueil.
├───public
└───src
├───assets
├───components
├───pages
├───styles
└───tests
Chaque dossier contient se qu'on attends de lui:
- le dossier assets contient toutes les photos utilisé
- le dossier components, tous les composants
- le dossiers pages, toutes les pages
- le dossier styles, toutes les pages css
- le dossier tests, tous les tests du frontend
Toutes les pages (à l'exception de connexion et inscription) sont constitués de composants et ont leur propre feuilles css (en plus de la feuille index.css qui est responsable du style global).
L'entièreté du site est responsive et le style final est relativement proche de celui des maquettes même si plus épurer et plus claire.
[Explication du fonctionnement du frontend depuis une action utilisateur (clic sur un bouton, envoi de formulaire, ...) jusqu'à l'affichage du résultat. Prendre comme illustration une action qui nécessite un échange avec le backend]