Analyse technique
[Schéma représentant l'architecture de l'application Web]
[Explication textuelle du schéma]
[Technologie choisie]
- Justification du choix
1. Justification du choix [Cette justification doit être argumentée avec indication des sources utilisées. Elle doit mentionner les technologies concurrentes et indiquer en quoi celle choisie se démarque des autres. Le choix effectué ne doit pas être trivial
Express est un framework sortit en 2010, qui permet de construire des applications web basé 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.
- NodsJs-Express travaille en asynchrone se 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
- 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
- Diagramme de classes UML
[Diagramme de classes] [Explication textuelle du diagramme de classes]
- 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]
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
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/getCars
| Name | Type | Dans | Description |
|---|
Frontend (@Axios)
Axios.get("https://localhost:3001/api/cars/getCars")
.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
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/getSlotCars
Frontend (@Axios)
Axios.get("https://localhost:3001/api/cars/getSlotCars")
.then((res)=>{
console.log(res)
}).catch((err)=>{
console.err(err)
})| Name | Type | Dans | Description |
|---|---|---|---|
accept |
string | headers |
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/getBrandCars
| 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)
})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/getSlotBrandCars
| 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)
})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/cars/addCars
| 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/cars/addCars', 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
POST /api/cars/updateCars
| Name | Type | Dans | Description |
|---|---|---|---|
accept |
string | 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
- Justification du choix
Comme les informations que nous allons manipuler auront un format bien précis, il est plus intéressant d'utiliser une base de données relationnelle afin d'être plus strict sur les données à stocker. Il y aura également des relations entre les diverses tables et quelques validations du côté BDD.
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.
Schéma de notre base de données :
- Diagrammes
[Schémas EA / Relationnel de la DB] [Texte expliquant les diagrammes et justifiant les choix de conception]
[Technologie(s) choisie(s)]
- Justification du choix du framework JS
ReactJS:
- On travaille avec des composants indépendants
- Programmation orienté composant
- Fortement utilisé en entreprise
- Large communauté => source
-
Justification du choix pour la mise en oeuvre du CSS (Framework?)
-
Organisation du code
[Présentation de la structure/hiérarchie des fichiers et dossiers du code source du frontend]
- Apparence
[Quelques screenshots pour montrer le résultat + discussion sur l'évolution depuis les premières maquettes]
- 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]