RETOUR

Organisation du projet

Situation

Dans le cadre de mon BTS SIO option SLAM, j’ai réalisé seul un projet nommé StockSeeker, une application web de gestion de stock.

Ce projet s’inscrit dans un contexte fictif mais réaliste : celui d'une entreprise ayant besoin d’un outil moderne, rapide et réactif pour gérer efficacement ses produits et entrepôts.

L'objectif principal était de concevoir un site en Single Page Application (SPA), avec une interface fluide, intuitive et rapide d’utilisation, tout en respectant les contraintes technologiques du BTS.

Étude des solutions

Dès le départ, mon cahier des charges était clair :

• L'application devait permettre de créer, modifier et supprimer des entrepôts et des produits.
• Elle devait inclure un système de gestion des utilisateurs.
• Les ajouts de produits devaient être rapides, pour garantir une utilisation fluide au quotidien.
• L’interface devait mettre en avant les informations essentielles : produits en stock, seuils critiques, alertes visuelles en cas de stock insuffisant.

Pour cela, j’ai fait le choix d’une architecture REST, qui permet de séparer clairement le front-end du back-end tout en assurant une communication efficace entre les deux.

Le back-end serait développé en Django, couplé avec Django REST Framework, une solution puissante et flexible pour exposer des API RESTful. Django offre de nombreux avantages :

• Une structure robuste et bien organisée.
• Une grande communauté, facilitant la résolution des problèmes.
• Une bonne sécurité dès l’installation.

Enfin, pour la base de données, mon choix s’est porté sur PostgreSQL, une solution open source, fiable et performante, très adaptée aux traitements de données complexes.

Contraintes

Ce projet a été réalisé avec un budget nul, en respectant l’environnement technologique imposé par le BTS SIO :

• Utilisation de logiciels libres ou gratuits.
• Aucune dépense autorisée.
• Respect du calendrier scolaire avec une date butoir imposée.

Je me suis appuyé sur des outils comme :

• Django et Django REST Framework pour le back-end.
• PostgreSQL pour la gestion des données.
• Un client SPA léger pour le front-end (détaillé dans la partie "Réalisation").

L’ensemble du projet devait rester simple à installer, rapide à utiliser, et suffisamment ergonomique pour être utilisable même par des personnes non techniques.

---

Pour la partie back-end, j’ai choisi Django avec son extension Django REST Framework (DRF) afin de créer une API RESTful structurée, sécurisée et évolutive. Django offre une grande rapidité de mise en œuvre grâce à ses modèles et sa gestion de l’authentification intégrée.

Routing (urls.py)

Je commence par organiser mes routes.

J’utilise le routeur de Django REST Framework qui me permet de déclarer automatiquement toutes les routes CRUD (Create, Read, Update, Delete) pour mes vues.

J’ajoute également une route spécifique pour l’obtention et la mise à jour des tokens JWT, indispensable pour l’authentification sécurisée des utilisateurs.

---

Modélisation (models.py)

J’utilise le modèle User natif de Django pour gérer les comptes, puis je crée deux modèles principaux :

• Product
• Warehouse

Voici le schéma UML de mon application, représentant les relations entre les différents modèles.

---

Chaque produit est rattaché à un utilisateur via une clé étrangère, et peut être stocké dans plusieurs entrepôts grâce à une relation many-to-many.

Cela permet :

• à un utilisateur de gérer plusieurs produits,
• à un produit d’être présent dans plusieurs entrepôts pour une gestion plus souple du stockage.

---

Vues (views.py)

J’utilise des vues basées sur ViewSets pour centraliser les opérations CRUD.

À chaque appel, je vérifie si l’utilisateur est authentifié via son token JWT grâce à la permission IsAuthenticated.

J’utilise :

• des querysets globaux pour accéder aux données,
• une méthode différente selon le type d'action (create, update, destroy).

Pour destroy, il suffit de supprimer l’objet, mais pour create et update, je passe par les serializers pour effectuer des validations métier précises.

---

Serializers

Un serializer sert à valider et transformer les données entre Python et JSON.

Dans mon ProductSerializer :

• La méthode validate() vérifie que tous les champs essentiels sont présents.
• Par exemple, si "alerte activée" est cochée, une quantité seuil doit obligatoirement être fournie.
• Si des entrepôts sont associés à un produit, la quantité totale disponible est contrôlée.

En cas de problème, je renvoie une ValidationError explicite en JSON.

---

Création / Mise à jour – atomicité

Lors de la création (create) et de la mise à jour (update) d’un produit ou entrepôt, j’utilise un bloc @transaction.atomic. Cela garantit que toutes les modifications sont :

• enregistrées ensemble si tout se passe bien,
• annulées d’un coup en cas d’erreur, évitant les incohérences.

Django est en autocommit par défaut. Ici, j’ai eu besoin de transactions explicites car je dois gérer la quantité actuelle et la capacité restante dans plusieurs entrepôts :

Par exemple, si je mets à jour une quantité à 1000 alors qu’elle était à 100, je ne veux pas l’additionner, mais bien la remplacer.

---

Stock bas & validation continue

À chaque appel API, je vérifie si un produit est en stock bas (inférieur au seuil défini).

Si c’est le cas, l’attribut low_stock devient True, ce qui est ensuite transmis au front pour afficher une alerte visuelle.

Je répète une logique similaire pour les entrepôts : validation, transaction, mise à jour.

---

Sécurité (settings.py)

J’intègre plusieurs mesures de sécurité dans mon settings.py :

• configuration du HTTPS,
• sécurisation des tokens JWT,
• gestion du CORS pour autoriser uniquement mon front Vue.js à communiquer avec l’API (Cross-Origin Resource Sharing = sécurité entre domaines différents).

---

Partie Front-End – Vue.js & PrimeVue

Vue.js, un choix moderne

Pour créer une application réactive et moderne, j’ai utilisé Vue.js, un framework JavaScript progressif.

Il est idéal pour :

• Créer des composants réactifs facilement,
• Organiser les vues logiquement avec Vue Router,
• Gérer les états et formulaires simplement.

C’est un excellent compromis entre productivité et performance, parfait pour une SPA.

---

Stack front

Voici les outils que j’ai utilisés pour renforcer Vue :

• Vite.js : création rapide de projet avec hot-reload et build ultra rapide.
• PrimeVue : bibliothèque UI complète pour Vue, avec boutons, formulaires, tableaux prêts à l’emploi.
• Chart.js : pour les graphiques dynamiques (visualisation du stock, seuils critiques…).
• Axios : pour les requêtes HTTP vers mon API.
• js-cookie : gestion des cookies côté client (ex : sauvegarde du JWT).

---

Arborescence des vues

Dashboard.vue (Accueil)

• Affiche tous les produits et entrepôts.
• Montre les alertes de stock critique.
• Barre d’ajout rapide de produit.

Login.vue

• Vue utilisée pour la connexion et la création de compte.
• Automatiquement appelée si un token expire ou est absent.

Products.vue

• Tableau des produits.
• Ajout, édition et suppression d’un ou plusieurs produits.

Warehouses.vue

• Tableau des entrepôts.
• Ajout, édition et suppression d’un ou plusieurs entrepôts.

---

Authentification (useAuth.js)

J’ai créé un composable useAuth() qui :

• Vérifie la validité du token JWT.
• Déconnecte l’utilisateur si nécessaire (suppression du cookie, réinitialisation des données).
• Utilise ref() pour que les valeurs soient réactives à tout moment.

---

Requêtes vers l’API (api.js)

Je centralise tous les appels API dans api.js :

• baseURL dynamique via une variable .env.
• Ajout automatique du token dans les headers.
• Timeout et gestion d’erreurs intégrés.

Export de fonctions (login, createUser, getProducts, etc.) pour simplifier leur utilisation dans les composants Vue.

---

Conclusion

Ce projet m’a permis de :

• Maîtriser un stack fullstack moderne (Vue.js + Django REST),
• Implémenter des transactions atomiques, de la validation métier avancée,
• Créer une SPA performante et responsive avec une gestion de stock en temps réel.

J’ai particulièrement appris à faire le lien entre interface utilisateur, logique métier, et cohérence base de données, tout en sécurisant l’authentification avec JWT et en optimisant la fluidité des échanges front/back.

---

Annexes :

Site web : stock.orabis.fr

Compte invité + mot de passe : invite1

Github Backend : github.com/Orabis/E6-BStockSeeker

Github Front : github.com/Orabis/E6-FStockSeeker

---