Skip to content

Analyse technique

Jump to bottom
Pourbaix edited this page Mar 19, 2022 · 36 revisions

Architecture

[Schéma représentant l'architecture de l'application Web]

test

Explication du schéma de l'application web.

1. Le client intéragit avec le Frontend (point 1 et 2):

Les pages de l'application web permettent d'informer le client en fournissant la page web proprement dite (point 2) et également de récupérer des informations qu'il aura données comme pour la réservation d'une voiture par exemple (point 1).

2. L'admin interragit avec le Frontend (point 9 et 10):

Les pages utilisateurs sont visibles à l'admin pour des raisons de maintenance mais également des pages administratives qui lui permettent de maintenir l'état du site à jour. L'administrateur peut donner des informations au frontend (point 10) comme pour l'ajout de voiture par example et aussi en reçevoir comme l'affichage des pages (point 9).

3. Le frontend interragit avec l'API (point 3 et 4):

Le frontend peut , grâce à l'API, interragir avec le Backend , via le biai de endpoint ou point de terminaison, pour permettre au frontend d'initier des appels de ressources et des envois de ressources vers la DB.

4. L'API interragit avec le backend (point 5 et 6):

L'API peut rediriger les requêtes initiées par le frontend avec le endpoint (et donc par un utilisateur du site) , et les transformer en requête SQL proprement dites.

5. Le backend interragit avec la DB (point 7 et 8):

Le backend peut, via des requêtes SQL insérer des données dans la DB (point 7) ou seulement en récupérer (point 8).

Backend : NodeJS-Express

1. Justification du choix

Express est un framework sortit en 2010, qui permet de construire des applications web basées sur nodeJS. Grâce aux méthodes utilitaires http et de middleware qui sont à disposition, la création d'une API est simple et rapide.

Comparaison avec PHP:

  • NodsJs-Express travaille en asynchrone ce qui lui permet de continuer son exécution et de ne pas devoir attendre qu'un module ai fini,
  • Cette caractéristique lui procure une vitesse d'exécution et des performances plus importante que PHP,
  • Il est fort utilisé dans les grandes entreprises,
  • Il possède une communauté très active de développeurs,
  • Il peut prendre en charge plusieurs requêtes du à sa caractéristique asynchrone,
  • Il intègre un serveur,
  • Un seul et même langage en Backend et en Frontend.

2. Organisation du code

  • /backend : accueillera tous les fichiers js et sql du backend de notre application
  • /controllers : accueillera tous les fichiers js qui vont effectuer les requêtes vers la base de données et obtenir les reponses
  • /middlewares : acceuillera tous les fichiers js qui vont vérifier les requêtes (ex authentification de l'utilisateur via token )
  • /routes : acceuillera tous les fichiers js qui vont contenir nos routes et faire la liaison avec le dossier controller
  • /app.js : fichier d'initialisation de l'application express contient tous les middlewares pour effectuer des requêtes vers des routes
  • /server.js : Fichier d'initialisation du server http
  • /db.sql : Fichier sql de creation de la base de données postgresql
  • /db_dump.sql : Fichier sql qui contient toutes les modifications effectué depuis le départ sur la base de données postgresql
    /backend
        /controllers
            car.js
        /middleware
        /routes
            car.js
        app.js
        db.js
        db.sql
        db.dump.sql
        package.json
        package-lock.json
        server.js

3. Diagramme de classes UML

[Diagramme de classes] [Explication textuelle du diagramme de classes]

4. Fonctionnement

[Explication du fonctionnement du backend. Par exemple : Explication du "voyage" d'une requête entre la réception de la requête sur une route donnée et l'envoi d'une réponse]

API

L'API contient des points de terminaisons pour les utilisateurs et les voitures Les Points de terminaison suivant déclenchent des requêtes vers la base de données. Dans le cas d'un problème, L'API renvoie une erreur 400. Ci-dessus les différents points de terminaison

Point de terminaison pour les voitures

1. Recupérer toutes les voitures

  • Description

Tous les utilisateurs inscris ou non inscris pourra visualiser la liste de toutes les voitures disponible dans la base de données.

Le point de terminaison suivant déclenche une requête allant chercher toutes les voitures dans la DB et sera utilisé lors du chargement de la page /cars.

Get /api/cars
Name Type Dans Description

Frontend (@Axios)

Axios.get("https://localhost:3001/api/cars")
  .then((res)=>{
   console.log(res)
}).catch((err)=>{
   console.err(err)
})

Réponse

Status: 200 OK

{
    "name" : "Audi RS3",
    "price" : 500,
    "brand": "Mercedes",
    "model": "Class A",
    "color": "Gray",
    "doors": 4,
    "boot_size": 150,
    "type": "suv",
    "energy": "essence",
    "is_automatic": true,
    "passengers": 5,
    "air_conditioning" : true,
    "description" : "exemple de description de voiture"
}

Ressource introuvable

Status: 404 Not Found

2. Recupérer des voitures sur base de la plage horaire

  • Description

Tous les utilisateurs inscris ou non inscris pourront filter les voitures sur base de la plage horaire de location.

Le point de terminaison suivant déclenche une requête allant chercher toutes les voitures dans la DB et sera utilisé lors du chargement de la page /cars.

Get /api/cars-slot?startDate="2022-04-12"&startHours="11:15"&endDate="2022-04-13"&endHours="12:20"

Frontend (@Axios)

Axios.get("https://localhost:3001/api/cars-slot")
  .then((res)=>{
   console.log(res)
}).catch((err)=>{
   console.err(err)
})
Name Type Dans Description
accept string headers

3. Recupérer des voitures sur base de la marque et du modèle

  • Description

Tous les utilisateurs inscris ou non inscris pourront filtrer les voitures sur base de la marque et du modèle de la voiture.

Le point de terminaison suivant déclenche une requête allant filtrer les voitures dans la DB sur base des critères reçus il sera utilisé lors dans la page /cars lorsque seul la marque et le modèle ont été ajuster par l'utilisateur au niveau du pannel des filtres dans la page /cars.

Get /api/cars-brand?brand="mercedes"&model="classe 1"
Name Type Dans Description
accept string headers

Frontend (@Axios)

Axios.get("https://localhost:3001/api/cars/getBrandCars")
  .then((res)=>{
   console.log(res)
}).catch((err)=>{
   console.err(err)
})

4. Recupérer des voitures sur base de la plage horaire, de la marque et du modèle

  • Description

Tous les utilisateurs inscris ou non inscris pourront filtrer les voitures sur base de la plage horaire de location en plus de la marque et du modèle.

Le point de terminaison suivant déclenche une requête filtrant les voitures dans la DB sur base des critères entré par l'utilisateur il sera utilisé lors du clique sur le bouton de filtre dans la page /cars (L'utilisateur ayant ajusté la marque, le modèle et la plage de location).

Get /api/cars-slot-brand?startDate="2022-04-12"&startHours="11:15"&endDate="2022-04-13"&endHours="12:20"&brand="mercedes"&model="classe 1"
Name Type Dans Description
accept string headers

Frontend (@Axios)

Axios.get("https://localhost:3001/api/cars/getSlotBrandCars")
  .then((res)=>{
   console.log(res)
}).catch((err)=>{
   console.err(err)
})

4. Ajouter une voiture

  • Description

L'insertion des voitures n'est effectué que par l'administrateur du site

Le point de terminaison suivant déclenche une requête inserant une voiture dans la DB et sera utilisé lors du clique sur le bouton de soumission du formulaire d'insertion dans la la page /addCars visible que par l'administrateur.

POST /api/car

  • Paramètres

Name Type Dans Description
accept string headers Le type de contenu qu'accepte la requête Application/json
name string query Nom descriptif du véhicule
price float query obligatoire Prix de location par jour
brand string query obligatoire Marque du véhicule
model string query obligatoire Modèle du véhicule
color string query obligatoire Coloration du véhicule
doors integer query obligatoire Nombre de porte du véhicule
boot_size integer query obligatoire La taille du coffre de la voiture en kg
type string query obligatoire Ex : SUV, Electrique , etc..
energy string query obligatoire Le type d'energie que consomme le vehicule (Essence, diesel, ...)
is_automatic boolean query obligatoire Permet de spécifier si la voiture est automatique ou manuel
passengers integer query obligatoire Nombre de passager que peut supporter le véhicule
air_conditionning boolean query obligatoire Spécifie si le véhicule est doté d'une air conditionné
description string query Texte permettant de décrire brievement le véhicule a rajouter

Frontend

axios.post('/api/car', data {
    headers : { '
    "Content-Type": 'Application/json'
    }
  })
  .then((response)=> {
    console.log(response);
  })
  .catch((error)=> {
    console.log(error);
  });

Réponse

Status: 200 OK

Ressource introuvable

Status: 404 Not Found

5. Ajouter des images de véhicule

  • Description

L'insertion des images de véhicules n'est effectué que par l'administrateur du site

Le point de terminaison suivant déclenche une requête inserant des images de véhicules dans la table des images et sera utilisé lors du clique sur le bouton de soumission du formulaire d'insertion dans la la page /addCars visible que par l'administrateur.

POST /api/car-images/

  • Paramètres

Name Type Dans Description
accept string headers Le type de contenu qu'accepte la requête multipart/form-Data
name string query Nom descriptif du véhicule

6. Mise à jour d'une voiture dans la base de données

POST /api/cars/updateCars

  • Paramètres

Name Type Dans Description
accept form headers Precision sur le type de contenu qu'accepte la requête

Frontend

Axios.post("https://localhost:3001/api/cars/updateCars").then((res)=>{
  //console.log(res) 
}).catch((err)=>{
  //console.err(err)
})

Réponse

Lien vers la liste des endpoints documentés

Base de données : PostgreSQL

  1. Justification du choix
  • DB Relationnelle : Puisque les données doivent être ordonnées et structurées et que des relations doivent exister entre les différentes données, il est essentiel d’utiliser une base de données SQL afin de garantir l’organisation de ces dernières.

Ainsi nous avons dû choisir entre MySQL et PostgreSQL, ce sont les deux BDD relationnelles les plus utilisées, nous avons fini par choisir PostgreSQL pour les raisons suivantes:

  • Type de données avancé : PostgreSQL supporte les types MySQL et ajoute des types plus avancés tels que JSON, Array, ... Alors que pour avoir une relation 1-N, on devrait normalement créer une table supplémentaire.
  • Réplication : PostgreSQL permet d'avoir 2 ou plusieurs bases de données répliquées, pour avoir le Load-Balancing et la redondance.
  • Performance en concurrence: PostgreSQL est optimisée pour les requêtes parallèles, notamment la lecture par index. Étant donné que sur une application web on aurait des connexions simultanées pour chaque utilisateur, cette optimisation est nécessaire.
  • Légèreté & performance : une base de données légère convient plus à notre hébergement client et mutualisé. PostgreSQL est moins vorace que ses concurrents, tant pour la RAM que pour le CPU. Malgré sa faible consommation de RAM, il demeure très performant par rapport à MySQL. Source
  • Odoo l'utilise ;)

PostgreSQL jouit d’une solide réputation en matière de fiabilité, de robustesse des fonctionnalités et des performances.

Schéma de notre base de données :

  1. Diagrammes

[Schémas EA / Relationnel de la DB] [Texte expliquant les diagrammes et justifiant les choix de conception]

Frontend : ReactJS

  1. Justification du choix du framework JS

Permet de créer des interfaces utilisateur ou des composants d’interface utilisateur rapides et interactifs pour les utilisateurs d’applications web et mobiles.

DOM Virtuel : générer le DOM ("Document Object Model", structure des éléments qui sont générés dans le navigateur web lors du chargement d’une page) de manière dynamique, ce qui nous permet de visualiser les changements de données sans devoir recharger/render à nouveau la page entière, mais seulement le composant qui a été mis à jour.

Grande communauté : soutenu par une large communauté, ce qui nous permet d’avoir un grand nombre de libraires disponibles.

Composants réutilisables : Elle est constituée de composants qui sont réutilisables, ce qui rend l’application plus évolutive et plus facile à maintenir car les erreurs se produisent dans la fonctionnalité du composant lui-même.

Ces avantages permettent d’améliorer l’expérience de l’utilisateur lors de la navigation dans l’application web, la rapidité du chargement des pages et facilitent la maintenance de l’application.

  • On travaille avec des composants indépendants
  • Programmation orienté composant
  • Fortement utilisé en entreprise
  • Large communauté => source

  1. Justification du choix pour la mise en oeuvre du CSS (Framework?)

  2. Organisation du code

[Présentation de la structure/hiérarchie des fichiers et dossiers du code source du frontend]

  1. Apparence

[Quelques screenshots pour montrer le résultat + discussion sur l'évolution depuis les premières maquettes]

  1. Fonctionnement

[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]

Table des matières

  1. Accueil
  2. Analyse des besoins
  3. Analyse technique
  4. Implémentation
  5. Tests de l'application
  6. Déploiement
  7. Sécurisation
  8. Bilan du projet
  9. Bibliographie

Clone this wiki locally