PROJETS / RÉALISATIONS

Sur ce projet, j'ai créé un site web fictif et je l'ai mis en ligne dans le cadre d'une évaluation certifiante pour mon titre de concepteur développeur web. Ici, le but était de créer une page de Catalogue pour afficher des produits (et leurs promotions). J'ai également dû réaliser un panneau d'administration simple pour que le propriétaire puisse gérer ce site.

Nous étions assez libres sur les choix techniques pour réaliser ce projet. Néanmoins, notre client imposait l'utilisation du langage Java pour la partie Back-End et de la techno PostGreSQL pour la base de données.

J'ai codé le Back-End Java via le framework SpringBoot (exemples de dépendances Maven utilisées: Hibernate, JPA, Open Api Swagger, SpringBoot Starter Test, JUnit, Mockito...). Une architecture MVC me paraissait la plus adaptée. Une API interne gére donc la communication avec la Base de données (hébergée chez AlwaysData). Côté Front-End, je suis passé par le moteur de Templates Thymeleaf via Spring, les vues sont gérées en Html et Css. J'ai également ajouté un peu de Javascript pour un affichage dynamique des produits du catalogue (sans rechargement de page lorsque les utilisateurs trient par catégories de produits).

J'ai ajouté des pages de register et de login pour gérer les comptes utilisateurs. Pour sécuriser l'accès et les données, j'utilise notamment des fonctionnalités de SpringSecurity et les mots de passe sont encodés avec Bcrypt. Dans l'état actuel, la connexion n'apporte rien aux clients (ils n'ont pas besoin de s'identifier pour voir les produits du catalogue) mais la fonctionnalité est déjà prête si elle devait être utilisée ultérieurement.

Néanmoins, pour accéder au panneau administrateur, il faut s'identifier. Ainsi, seuls des utilisateurs à qui on aurait donné le role d'admin peuvent s'y connecter. Tout autre grade/role se verait l'accès refusé! Voici ci-dessous à quoi ressemble la page principale du panneau administrateur:

Ce panneau administrateur permet de gérer facilement les Produits du catalogue (les modifier ou les supprimer, en ajouter...). Dans ce panneau admin, nous pouvons également y gérer les Promotions d'un produit (ajouter ou supprimer une promo en choisissant juste les dates et le pourcentage de remise: le prix est alors automatiquement ajusté). Les produits sont classés par Catégories de produits (pour faciliter l'affichage en triant et choisissant des catégories). Ces catégories sont elles aussi gérables dans ce panneau admin.

Le template de notre API interne comporte des Services, des Repository et des Controlers (Rest...) pour gérer nos méthodes en lecture et en écriture des données: Cela fait le lien entre l'application et la BDD. Toute modification dans le panneau admin est automatiquement appliquée à la base de données du catalogue (persistance des données qui sont stockées en externe). Retrouvez ci-dessous quelques visuels de nos pages d'administration :

Sur ce projet, je suis resté sur un design relativement simpliste du site (comme demandé). Nous étions surtout évalués sur la partie BACK-END: la logique et la conception, les choix techniques, la sécurité et la qualité du code (tests...). Le Front-End et nos visuels étaient secondaires dans le barème!

Néanmoins, pour rester dans les standards actuels, cette application se devait d'être parfaitement Responsive (elle a d'ailleurs été pensée "mobile first"). Même si la disposition à l'écran offre un meilleur confort sur les écrans desktop de nos ordinateurs (plus de produits affichés sur une page), elle reste tout à faire adaptée aux différents mobiles et tablettes du marché.

Voici quelques visuels du catalogue ou de certaines pages du panneau administrateur sur smartphones:

Après la phase de développement, le site avait été mis en ligne (car le déploiement était également compté dans le barème de cette évaluation). Cependant 1an après, malgré la fierté d'avoir codé ce projet, j'ai stopé l'hébergement afin d'économiser sur l'abonnement Heroku souscrit puisque ce n'était qu'une site catalogue fictif. J'ai également stopé le compte AlwaysData où était stockée la base de donnée. Il n'est donc désormais plus possible de naviguer sur le site, de voir le catalogue ou d'utiliser les identifiants "Gestionnaire_Test" pour tester le panneau administrateur et ses fonctionnalités afin de modifier le catalogue.