Téléchargé 42 fois
PFE MASTER en Développement d’une Application E-commerce avec la Technologie Spring Boot et Angular
- 1. Elaboré par : ➢Mouhamadou 1 Malick DIALLO ➢ Ayoub ANBARA ➢ Rachid ASSOUANI Thème : Développement d’une Application E-commerce avec la Technologie Spring Boot et Angular Pour l’obtention du titre Master Universitaire de l’ENSET de Mohammadia SPECIALITE : Ingénierie Informatique- Big Data et Cloud Computing (II-BDCC) Soutenu le : 17/09/2023 Année Universitaire : 2022-2023 RAPPORT DE PROJET DE FIN D’ETUDE Encadré par : Encadrant universitaire ➢ Pr. Bouchra BOUIHI ENSET, Avenue Hassan II - B.P. 159 - Mohammedia - Maroc 05 23 32 22 20 / 05 23 32 35 30 – Fax : 05 23 32 25 46 - Site Web: www.enset-media.ac.ma E-Mail : enset-media@enset-media.ac.ma
- 2.
- 3. 3 ْ ال ْ ح ْ م ْ د ْ ْهلل ْ ْه الذ ْ ي ْ ْ ه ْ د ْ ان ْا ْهل ْ ه ْ ذ ْ ا ْ ْ و ْ م ْ اْك ْ ن ْهاْل ْ ن ْ ه ْ ت ْه د ْ ي ْ ْ ل ْ و ْ ل ْ ْأ ْ ن ْ ْ ه ْ د ْ ان ْ اْللا ْ َ ص َ د َ ق َ َهللا َ َ ال َ ع َ ظ َ يم َ َََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََ َ ه س َ ه ة َ َ ْ ال َ ْ ع َ ر َ اف ْ ْ ْ ْ ْ ر ْ ب ْ ْ اش ْ ح ْ ْهل ـ ْ يْص ْ د ْ ر ْ يْو ْ ي ْ ّس ْ ْهل ــ ْ يْأ ْ م ْ ر ْ يْو ْ اح ْ ل ْ ل ْ ْ ع ْ ق ْ د ْ ة ْ ْه م ْ ن ْ ْهل ْ س ْهان ــ ْي ْ ي ْ ف ْ ق ْ ه ْ او ْ ْ ق ْ و ْهل ـــ ي ْ َ ص َ د َ ق َ َهللا َ َ ال َ ع َ ظ َ يم َ َََََََََََََ َََََََََََََََََََََََََََََََ َ َ ه س َ ه ة َ َ هط ْ َ الل َه ه َ م َ َ أ َ ل َ ه َْم َ ن َ اَع َ ل َ م َ اَن َْع َ ر َ ه ف َ َ ب َ ه َ َ أ َ و َ ام َ ر َ ك َ َ و َ ن َْع َ ر َ ه ف َ َ ب َ ه َ َ ن َ و َ اه ــــ ي ــــ َ ك َ، َ و َْ ار َ ه ز َ ْ ق ــ َ ن َ ا َ َ َ الل َه ه َ م َ َ ب َ ل َ غ َ ة َ َ ف َْ ه َ م َ َ الن َ ب َ ي َ ي ، َ َ و َ ف َ ص ا َ ح َ ة َ َ ح َ ْ ف َ ظ َ َ ال َهم َْ ر َ س ــــــ َ ل ـــــ ي ـــــــ َ ن ، َ َ و َه س ـــــ َْ ر َ ع َ ة َ َ إ َ ل َ ه ـ َ ام َ َ ال َ م َ ل َ ئ َ ك َ ة َ َ َ ال َهم َ ق َ ر َ ب َ ي ، َ َ و َأ َ ك َ ر َْم َ ن َ ا َ َ الل َه ه َ م َ َ ب َ ه ن َ ور َ َ ا َ ل َ ع َ ل َ م ، َ َ و َْه س َ ع َ ة َ َ ال َ ف َْ ه َ م َ َ َ و َ أ َ ْ خ َ ر َْ ج َ ن َ اَم َْ ن َ َ ظ َ ل َ م َ ات َ َ ال َ و َ ْ ه َ م ، َ َ َ و َ ْ اف َ ت َ ْ ح َ َ ل َ ن َ ا َ َ أ َْب َ و َ اب َ َ ر َْ ح َ م َ ت َ ك ، َ َ و َ ع ــــــ َ ل ـــ َْم ــــــ َ ن َا َ أ َ ْ س َ ار َ َ ح َ ك ــ َ م ـــ َ ت ـــــ َ ك َ َ ي َ اَأ َْ ر َ ح َ م َ َ الر َ اح َ م َ ي َ . َ ر َ ب َ ن َ ا َ َ ع َ ل َْم َ ن َ اَم َ اَي َ ْ ن َ ف َهع َ ن َ اَو َ ْ ن َ ف َ ع َ ن َ اَب َ م َ اَع َ ل َْم َ ت َ ن َ اَإ َ ن َ ك َ َ أ َ ْ ن َ ت َ َ ال َ ع َ ل َه يم َ َ ال َ ح َ ك ي ــــ َه م َ . َََََََََََََََََََََََََََ ََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََ َ ه د َ ع َهاء َ َ الن َ ب َ و َ ي
- 4. 1 Dédicace Au nom duDieu clément et miséricordieux Nous dédions cet humble travail à : Nos chers parents Pour les sacrifices déployés à nos égards ; pour leur patience Leur amour et leur confiance en nous, Ils ont tout fait pour notre bonheur et notre réussite. Qu'ils trouvent dans ce modeste travail, le témoignage de notre Profonde affection et de notre attachement indéfectible. Nulle dédicace ne puisse exprimer ce que nous leur devons. Que dieu leur réserve la bonne santé et une longue vie. A nos chers frères et sœur Pour leur encouragement leur soutien et leur aide pendant tout au long de ce cursus. A nos amis En témoignage de nos sincères reconnaissances pour les efforts Qu'ils ont consentis pour nous soutenir au cours de nos études. Que dieu nous garde toujours unis A Toute personne qui nous à aider à faire notre projet.
- 5. 2 Remerciements Au moment deconclure ce chapitre de notre vie académique avec la réalisation de notre projet de fin d'études, nous tenons à exprimer nos profondes gratitudes envers chacun d'entre vous. Votre soutien, vos conseils et vos encouragements ont été les pierres angulaires de ce projet qui a maintenant atteint son aboutissement. À nos encadrants, Nous vous somme extrêmement reconnaissant pour vos orientations avisées, vos idées stimulantes et votre disponibilité constante. Vos commentaires constructifs nous ont permis de façonner notre travail et de le porter à un niveau supérieur. Un remerciement particulier à Professeur BOCHRA BOUIHI qui à accorder un temps spécial pour suivre ce travail et dont le mentorat a été une source d'inspiration et d'apprentissage, nous vous en sommes infiniment reconnaissant. À nos amis, votre présence et vos échanges animés ont apporté de la couleur à nos journées de travail. Vos encouragements et votre soutien moral ont été une bouffée d'air frais dans les moments de stress. Nous sommes honorés d'avoir des amis aussi incroyables à nos côtés. À ma famille, vos encouragements constants, vos prières et votre croyance en nous ont été un moteur inestimable tout au long de ce parcours. Votre amour inconditionnel a été notre source de force et de motivation. À tous ceux qui ont joué un rôle, même petit, dans ce projet, je vous adresse mes plus sincères remerciements. Vos contributions ont contribué à façonner ce travail et à le rendre significatif. Je suis impatient de continuer à grandir, à apprendre et à contribuer, portant avec moi les leçons précieuses de ce projet de fin d'études.
- 6. 3 Liste des acronymes AcronymesSignification AWS Amazon web service PRIO Priorité de la fonctionnalité REF Référence de la fonctionnalité SEO Search engine optimization (Optimisation pour les moteurs de recherche) JEE Java entreprise édition API Application programming interface IHM Interface home machine IDE Integrated developement environment HTTP HyperText transfer protocol TCP Transmission control protocol SQL Structured query language DTO Data transfert object DAO Data access object REST Representational state transfer JWT Json web token SPA Single page application
- 7. 4 Résumé L'application E-commerce quenous avons créé est une plateforme en ligne robuste et sécurisée qui permet aux utilisateurs de parcourir, rechercher et acheter une variété de produits. Elle a été développée en utilisant une combinaison de technologies modernes pour assurer une expérience utilisateur fluide et sécurisée. Elle couvre un ensemble de fonctionnalités Clés tel que catalogue de produits, panier d'achat, authentification et Autorisation, paiement sécurisé, gestion des commandes, Support Client. Nous avons utilisé Spring Boot pour la partie backend de l'application. Cela nous a permis de rapidement développer des services RESTful et de gérer efficacement la logique métier et le frontend de l'application a été construit en utilisant le Framework Angular et le PrimeNG. Cela a permis de créer une interface utilisateur interactive et réactive qui offre une expérience utilisateur fluide. La sécurité étant une priorité majeure dans une application E-commerce. Spring Security a été intégré pour gérer l'authentification et l'autorisation des utilisateurs et l'application a été déployée sur AWS pour garantir une disponibilité et une évolutivité maximales. En réalité cette application est conçue pour s'adapter à une croissance future.
- 8. 5 Abstract The E-commerce applicationthat we have created is a robust and secure online platform that allows users to browse, search, and purchase a variety of products. It has been developed using a combination of modern technologies to ensure a smooth and secure user experience. It encompasses a set of key features such as a product catalog, shopping cart, authentication and authorization, secure payment, order management, and customer support. We used Spring Boot for the backend of the application, Spring Boot helped us to develop quickly RESTful services and to implement the business requirements. We used for the front end the Angular framework and PrimeNG to create an interactive and responsive user interface that provides a seamless user experience. Security being a top priority in any E-commerce application, we integrated Spring Security to handle user authentication and authorization. The application is deployed on AWS to ensure maximum availability and scalability. In reality, this application is designed to adapt to future growth and expansion.
- 9. 6 Dédicace …………………………………………………………………………………………………..1 Remerciement …………………………………………………………………………………………….2 Listedes acronymes……………………………………………………………………………………….3 Résumé…………………………………………………………………………………………………….4 Abstract …………………………………………………………………………………………………...5 Liste des figures…………………………………………………………………………………………...7 Liste des tableaux………………………………………………………………………………………….8 Introduction générale……………………………………………………………………………………....9 CHAPITRE I : CONTEXTE GENERAL DU PROJET…………………………………………………………10 1. Introduction………………………………………………………………………………………11 2. Description du problème…………………………………………………………………………11 3. Planification (Diagramme GANTT) et méthodologie……………………………………………12 4. Conclusion………………………………………………………………………………………..15 CHAPITRE II : CONCEPTION FONCTIONNELLES…………………………………………………………16 1. Introduction………………………………………………………………………………………17 2. Tableaux des exigences fonctionnelles…………………………………………………………..17 3. Les diagrammes des cas d’utilisation…………………………………………………………….18 3.1 Définition……………………………………………………………………………………18 3.2 Diagrammes de cas d’utilisation de notre application………………………………………18 3.2.1 Identification des acteurs…………………………………………………………...18 3.2.2 Diagramme de déploiement…………………………………………………………18 3.2.3 Diagramme de cas utilisation administrateur……………………………………….19 3.2.4 Diagramme de cas utilisation client…………………………………………………19 3.2.5 Diagramme de cas utilisation visiteur……………………………………………….20 4. Diagramme de classes…………………………………………………………………………….20 4.1 Définition…………………………………………………………………………………20 4.2 Diagrammes de classes de notre application……………………………………………..21 5. Conclusion………………………………………………………………………………………...21 CHAPITRE III : CONCEPTION TECHNIQUES………………………………………………………………..22 1. Introduction……………………………………………………………………………………….23 2. Tableaux des exigences techniques……………………………………………………………….23 3. L’architecture technique…………………………………………………………………………..24 4. L’architecture applicative…………………………………………………………………………25 5. Les outils du développement……………………………………………………………………...26 6. Conclusion………………………………………………………………………………………...29 CHAPITRE IV : REALISATION DE L’APPLICATION……………………………………………………….30 1 Introduction……………………………………………………………………………………...31 2 Présentation de l’application…………………………………………………………………….31 3 Conclusion………………………………………………………………………………………36 Conclusion générale et perspectives………………………………………………………………………37 TABLE DES MATIERES
- 10. 7 Liste des figures Figure1 : schéma de Scrum..................................................................................................................................................12 Figure 2 : schéma de QQOQCP ...........................................................................................................................................13 Figure 3 : diagramme de GANTT ........................................................................................................................................15 Figure 4 : diagramme d’identification des acteurs..............................................................................................................18 Figure 5 : diagramme de package.........................................................................................................................................18 Figure 6 : diagramme des cas d’utilisations pour l’administrateur ..................................................................................19 Figure 7 : diagramme des cas d’utilisations pour client.....................................................................................................19 Figure 8 : diagramme des cas d’utilisations pour visiteur .................................................................................................20 Figure 9 : Diagramme de classe............................................................................................................................................21 Figure 10 : schéma architecture technique 1.......................................................................................................................24 Figure 11 : schéma architecture technique 2 .......................................................................................................................24 Figure 12 : schéma architecture logicielles 1 .......................................................................................................................25 Figure 13 : schéma architecture logicielles 2 .......................................................................................................................25 Figure 14 : aperçu formulaire inscription sans erreur .......................................................................................................31 Figure 15 : aperçu formulaire inscription avec erreur .......................................................................................................31 Figure 16 : aperçu formulaire d’authentification ...............................................................................................................32 Figure 17 : aperçu page accueil visiteur...............................................................................................................................32 Figure 18 : aperçu page accueil administrateur..................................................................................................................33 Figure 19 : Aperçu formulaire ajouter produit par administrateur .................................................................................33 Figure 20 : aperçu supprimer produit par administrateur................................................................................................34 Figure 21 : aperçu formulaire ajouter catégorie par administrateur................................................................................34 Figure 22 : aperçu supprimer catégorie par administrateur .............................................................................................35 Figure 23 : aperçu formulaire ajouter administrateur.......................................................................................................36
- 11. 8 Liste des tableaux Tableau1: Tableau de répartition des taches de l’équipe………………………………………………………… 13 Tableau 2 : Tableau de planification des taches du projet par phase………….………………………………… 14 Tableau 3 : Tableau des exigences fonctionnelles…………………………………………………………………. 17 Tableau 4 : Tableau des exigences techniques ………………………………………………………………………23
- 12. 9 Introduction générale Dans unmonde en constante évolution, le commerce électronique émerge comme un phénomène incontournable qui redéfinit la manière dont les entreprises se connectent avec les consommateurs et comment ces derniers font leurs achats. Le paysage commercial d'aujourd'hui est façonné par la révolution numérique, une transformation profonde qui a révolutionné la façon dont nous vivons, travaillons et consommons. Le commerce électronique, ou e-commerce, est au cœur de cette révolution, offrant une multitude d'opportunités aux entreprises et aux consommateurs. À une époque où les technologies de l'information sont omniprésentes et où Internet est devenu un outil de communication et de transaction mondial, le commerce électronique s'est imposé comme un moteur de croissance économique et de perturbation positive. Les magasins en ligne, les applications mobiles et les plateformes de commerce électronique ont ouvert de nouvelles voies pour l'achat, la vente et l'interaction avec les produits et les services. Plus que jamais, les entreprises peuvent atteindre un public mondial, les consommateurs peuvent accéder à une variété de produits inégalée, et le commerce électronique a contribué à l'essor de petites entreprises innovantes aux côtés de géants établis. Dans cette ère numérique, le commerce électronique a également été un facteur de résilience et d'adaptation. Les bouleversements économiques mondiaux, les défis logistiques et les changements de comportement des consommateurs ont été rencontrés avec agilité par les entreprises du e-commerce. Les modèles commerciaux ont évolué pour répondre aux besoins changeants, les canaux de distribution se sont diversifiés, et la personnalisation est devenue la norme pour offrir une expérience d'achat exceptionnelle. Cependant, au-delà des opportunités, le commerce électronique suscite également des questions importantes concernant la sécurité, la confidentialité des données et l'impact environnemental. À mesure que le commerce électronique continue de croître et de se développer, il est essentiel de mettre en place des pratiques responsables qui garantissent la protection des consommateurs et la durabilité à long terme. Dans ce contexte, cette plateforme de commerce électronique aspire à jouer un rôle significatif en vous offrant une expérience d'achat enrichissante, en mettant en avant des produits de qualité et en respectant les valeurs de responsabilité et d'innovation qui définissent l'ère actuelle du commerce électronique. Introduction générale
- 13.
- 14. 11 Introduction : Leprojet que nous allons explorer dans cette documentation revêt d’une importance significative dans le contexte actuel. Il s'inscrit dans une époque marquée par des changements rapides et des défis constants. Cette introduction a pour but de vous donner un aperçu du contexte global dans lequel ce projet prend place. Il est a noté que ce projet a été réaliser dans un cadre académique et non dans un cadre d’entreprise. 1. Description du problème "Comment concevoir une application E-commerce moderne qui offre une expérience utilisateur exceptionnelle, garantit la sécurité des transactions, personnalise les recommandations de produits, optimise la gestion des stocks et de la logistique, tout en favorisant la fidélisation de la clientèle pour prospérer dans un environnement concurrentiel en constante évolution ? " Solution à apporter : L’expérience utilisateur : Les clients potentiels doivent trouver facilement les produits qui les intéressent, avec une navigation fluide et intuitive. La confiance est un élément essentiel. Les utilisateurs doivent se sentir en sécurité lorsqu'ils effectuent des paiements en ligne. L'application doit donc mettre en œuvre des normes de sécurité strictes, telles que le chiffrement des données, la protection contre la fraude et la conformité aux réglementations en matière de protection des données. La personnalisation : Les clients attendent des recommandations de produits pertinentes en fonction de leurs précédents achats et de leur comportement de navigation en utiliser l'apprentissage automatique et l'analyse de données pour offrir une expérience personnalisée qui incite à l'achat. La gestion des stocks et de la logistique : est également cruciale. Les applications e- commerce modernes doivent gérer efficacement les niveaux de stock, coordonner la livraison et suivre les commandes en temps réel pour garantir une expérience client sans accroc. La fidélisation de la clientèle est un défi constant : Les applications doivent mettre en place des programmes de fidélité, des remises attrayantes et un service clientèle réactif pour encourager les clients à revenir et à recommander l'application à d'autres. Contexte général du projet Chapitre I
- 15. 12 2. Méthodologie etplanification (Diagramme GANTT) 2.1 Méthodologie Agile La méthodologie agile est une approche de gestion de projet qui met l'accent sur la collaboration, l'adaptabilité et la livraison continue de valeur. Elle se base sur des itérations courtes, appelées "sprints" ou "cycles", où les équipes travaillent en étroite collaboration avec les clients pourlivrer des fonctionnalités de haute valeur. 2.2 Définition de la méthode Scrum est une méthodologie de gestion de projet agile qui se base sur des itérations courtes appelées "sprints". Chaque sprint dure généralement de 1 à 4 semaines et vise à livrer des fonctionnalités spécifiques du projet. Les équipes travaillent en étroite collaboration avec le client et se réunissent régulièrement pour évaluer les progrès et ajuster les priorités en fonction des besoins changeants. SCRUM favorise la transparence, l'adaptabilité et la livraison continue de valeur, ce quien fait une méthode populaire pour le développement de logiciels et d'autres projets 2.3 Cycle de vie Scrum est considéré comme un cadre ou « Framework » de gestion de projet. Ce cadre est constitué d'une définition des rôles, de réunions et d'artefacts. Scrum définit 3 rôles : ➢ Le « Product Owner » qui porte la vision du produit à réaliser (représentant généralement leclient) ➢ Le « Scrum Master » garant de l'application de la méthodologie Scrum. ➢ L'équipe de développement qui réalise le développement des user stories du back Log. La vie d'un projet Scrum est rythmée par un ensemble de réunions clairement définies et strictement limitées dans le temps (time boxing) : ➢ Planification du Sprint (Sprint = itération) ➢ Revue de Sprint ➢ Rétrospective de Sprint ➢ Mêlée quotidienne Figure 1 : schéma de Scrum Contexte général du projet Chapitre I
- 16. 13 Tableau 1 :Répartition des taches de l’équipe Diagramme de QQOQCP : 2.4Organisation d’équipe : a) Équipe Core : PRENOM et NOM FONCTIONS TÉLÉPHONE EMAIL Mr. Ayoub ANBARA Scrum Master, Testeur et DevOps +212688191635 anbara.ayoub@gmail.com Mr. Mouhamadou 1 Malick DIALLO Product Owner, Testeur et designers +224 622887447 m.diallo@etu.ensetmedia.ac.ma Mr Rachid ASSOUANI Developers full Stack et Testeur +212668655755 rachidassouani@gmail.com b) Les rôles : Le propriétaire de produit (« Product Owner ») • Définir la Vision du Produit • Gérer le Backlog Produit • Élaborer les User Stories • Prioriser les Tâches • Collaborer avec les Parties Prenantes • Prendre des Décisions • Validation et Acceptation • Itérations et Améliorations Continues • Communication Figure 2 : schéma de QQOQCP Contexte général du projet Chapitre I Pour offrir aux utilisateur un espace d’achat très simple et sécurisé pour faire des achats Déploiement sur AWS Du 07 juillet au 16 Octobre 2023 En gérant l’authentification et l’autorisation des utilisateur, paiement bien sécuriser. Outils facilitant le développent et le déploiement logiciel Encadrant pédagogique Les clients et visiteurs
- 17. 14 • Analyse desDonnées • Adaptabilité Le maître SCRUM (« Scrum Master ») • Facilitation des réunions • Protection de l'Équipe • Suppression des Obstacles • Coaching de l'Équipe • Gestion du Backlog • Facilitation de la Rétrospective • Communication • Suivi de la Qualité • Adoption des Meilleures Pratiques L’équipe de développement • Développement des Fonctionnalités • Auto-organisation • Collaboration avec le Product Owner • Estimation et Planification • Qualité et Tests • Résolution des Obstacles • Transparence • Participation à la Rétrospective de Sprint • Auto-améliorassions • Livraison Continue 2.5Tableau de planification des taches du projet par phase Dans ce tableau nous listons les différentes taches du projet par phase ainsi que la durée de chaque tache et le responsable tout en mentionnant la durée des de chaque phase N0 PHASES DU PROJET TACHES DES PHASES DUREE DES TACHES DUREE DES PHASES RESPONSABLE 1 Planification Analyse des besoins et des objectifs 6 jours 14 jours Mouhamadou 1 Malick Elaboration des charges 5 jours Planification du projet 3 jours 2 Conception Conception de l’interface utilisateur 4 jours 9 jours Mouhamadou 1 Malick/ Rachid Assouani Définition de l’architecture de base 3 jours Sélection des technologies 2 jours 3 Développement Développement du backend 11 jours 21 jours Rachid assouani Développement du Frontend 9 jours Intégration de la base de données 1 jour Tableau 2 : Planification des taches du projet par phase
- 18. 15 Figure 3 :Diagramme de GANTT 4 Test et débogage Test unitaire 4 jours 10 jours Ayoub anbara Test d’intégration 4 jours Correction des bugs 2 jours 5 Sécurité et performances Audit de sécurité 4 jours 7 jours Rachid Assouani/ Ayoub Anbara/ Mouhamadou 1 Malick Optimisation des performances 3 jours 6 Lancement Préparation du déploiement 4 jours 5 jours Ayoub Anbara/ Rachid Assouani Lancement de l’application 1 jour 7 Suivi et maintenance Surveillance des performances 6 jours 13 jours Mouhamadou 1 Malick/ Ayoub Anbara/ Rachid Assouani Mise à jour régulières 6 jours Support utilisateur 5 jours 8 Marketing Campagne publicitaires 10 jours 20 jours Mouhamadou 1 Malick/ Ayoub Anbara/ Rachid Assouani Réseau sociaux 7 jours Création de contenu 3 jours 4.6 Diagramme de GANTT Le diagramme de Gantt qui visualise l’enchainement et la durée de chaque tache effectuer pendant la période de réalisation du projet Conclusion : Dans un monde en constante évolution, ce projet est un exemple de notre engagement à faire face aux défis, à saisir les opportunités et à travailler ensemble pour un avenir meilleur. Nous vous invitons à explorer cette documentation/présentation pour en savoir plus sur les détails du projet et son impact potentiel.
- 19.
- 20. 17 Tableau 3 :exigences fonctionnelles Introduction : La conception fonctionnelle est une étape fondamentale dans le processus de développement de tout projet. Elle se repose sur la définition minutieuse des fonctions et des caractéristiques qui constituent le cœur du projet. Le présent chapitre est consacré pour la partie analyse du projet où l’étude des besoins fonctionnelles des utilisateurs est évoqué. En supplément, ce chapitre présente les détails d’interactions entre les différents acteurs dans le fonctionnement de l’application. Tableaux des exigences fonctionnelles Légende : Réf : Référence, identifiant unique de l’exigence dans les différentes étapes du projet. Prio : Priorité, reflète le degré d’importance de l’exigence… Type : technique Réf Type Module Description Prio EF-01 Fonctionnel Inscription des utilisateurs L’application doit permettre aux utilisateurs de créer leurs comptes en fournissant leurs informations (nom, prénoms, email et mot de passe) pour se connecter à l’application en tant que administrateurs ou autres. 1 EF-02 Fonctionnel Connexion des utilisateurs Les utilisateurs enregistrés doivent pouvoir se connecter à l’application en utilisant leurs identifiants 1 EF-03 Fonctionnel Navigation par catégories Les utilisateurs doivent pouvoir parcourir les produits en fonction de catégories 1 EF-04 Fonctionnel Recherche de produits Les utilisateurs doivent pouvoir rechercher des produits specifique en utilisant des mots-clé 1 EF-05 Fonctionnel Affichage des détails du produit Les utilisateurs doivent pouvoir consulter les détails d’un produit, y compris son prix, sa description et ses images 1 EF-06 Fonctionnel Gestion du panier Les utilisateurs doivent pouvoir ajouter des produits au panier, afficher le contenu de leurs paniers, ajuster les quantités et supprimer des produits 1 EF-07 Fonctionnel Processus de paiement Les utilisateurs doivent pouvoir passer des commandes en fournissant des informations de livraison et de paiement 1 EF-08 Fonctionnel Suivi des commandes Les utilisateurs doivent pouvoir l’état de leurs commandes en cours de traitement et de livraison. 1 EF-09 Fonctionnel Gestion de compte Les utilisateurs doivent pouvoir modifier leurs informations personnelles, y compris l’adresse de livraison 1 Conception fonctionnelle Chapitre II
- 21. 18 1. Les diagrammesdes cas d’utilisation 1.1 Définition : Un diagramme de cas d'utilisation (Use Case Diagram en anglais) est l'un des types de diagrammes UML (Unified Modeling Language) utilisés pour modéliser les interactions entre les acteurs (utilisateurs externes ou systèmes) et un système logiciel. Il permet de décrire les fonctionnalités ou les services offerts par le système du point de vue de ses utilisateurs. 1.2 Diagrammes de cas d’utilisation de notre application ✓ Diagramme de cas d’utilisation Général Figure 4 : Identification des acteurs Figure 5 : Diagramme de package Conception fonctionnelle Chapitre II
- 22. 19 Figure 6 :Diagramme de cas d’utilisation administrateur Figure 7 : Diagramme de cas d’utilisation client ✓ Diagramme de cas d’utilisation Administrateur ✓ Diagramme de cas d’utilisation Client Conception fonctionnelle Chapitre II
- 23. 20 ✓ Diagramme decas d’utilisation Visiteur 2. Diagramme de classes 2.1 Définition : Un diagramme de classe est une représentation visuelle d'une structure de classes et de leurs relations au sein d'un système logiciel ou d'une application. Il fait partie des diagrammes UML (Unified Modeling Language) largement utilisés dans le domaine de l'ingénierie logicielle pour la modélisation et la conception de logiciels. Figure 8 : Diagramme de cas d’utilisation visiteur Conception fonctionnelle Chapitre II
- 24. 21 2.2 Diagrammes declasses de notre application Conclusion : ce chapitre est une étape cruciale qui nous à permet de définir clairement ce que l’application doit accomplir, comment il le fera et comment ses différentes parties interagiront. Ce chapitre également contribue de manière significative à la réussite et à l'efficacité du projet, car préciser les objectifs et les fonctionnalités du système avant d’entamer la phase de réalisation semble une étape primordiale visant à reconnaitre les frontières de l’utilisation, les services ainsi que les solutions que présente ce système à l’utilisateur. A la fin de ce chapitre nous avons pu modéliser le fonctionnement du système. Ceci est fait à travers différents diagrammes permettant de bien spécifier la composition et le comportement du système. Figure 9 : Diagramme de classe Conception fonctionnelle Chapitre II
- 25.
- 26. 23 Tableau 4 :exigences techniques Introduction : La conception technique, dans le contexte du développement de logiciels ou d'applications, est une phase clé du processus de création. Elle consiste à planifier et à définir comment le système sera construit sur le plan technique pour répondre aux besoins et aux exigences fonctionnelles du projet. Dans le présent chapitre, nous abordons l'aspect technique de notre projet en mettant en évidence l'architecture technique, les architectures applicatives et les outils de développement utilisés. Tableau des exigences techniques Légende : Réf : Référence, identifiant unique de l’exigence dans les différentes étapes du projet. Prio : Priorité, reflète le degré d’importance de l’exigence… Type : technique Réf Type Module Description Prio ET-01 Technique Compatibilité et responsivité L’application doit être compatible avec les navigateurs les plus communs (Mozilla, Chrome …) mais aussi responsive à pouvoir s’adapter aux différentes tailles d’écrans 1 ET-02 Technique IDE L’application doit être développée en En utilisant l’IDE intelliJ 1 ET-03 Technique Backend L’application doit être développée en En utilisant l’architecture JEE avec son Framework Spring boot 1 ET-04 Technique Solution Les technologies utilisées doivent être totalement gratuites et /ou open source 1 ET-05 Technique Interface IHM L’application doit être développée en utilisant Angular, PrimeNG, HTML, SCSS, JavaScript et Type Script 1 TEC-06 Technique Sécurité L’application doit être sécurisé en utilisant Spring Security JWT 1 TEC-07 Technique DevOps Le déploiement de l’application sera dans des containers Docker, AWS et GitHub Actions 1 TEC-08 Technique Test Les tests unitaires doivent être régulièrement effectuer grâce à JUnit 5 TEC-09 Technique Qualité Le code source de l’application doit répondre aux bonnes pratiques de la POO et de l’ingénierie logicielle en utilisant SONARQUBE 1 Conception technique Chapitre III
- 27. 24 1. L’ARCHITECTURE TECHNIQUE L’architectureTechnique présente les composants physiques du système et la nature de la relation entre eux. Le schéma ci-dessous explique l’architecture physique de l’application Figure 10 : schéma architecture technique 1 Figure 11 : schéma architecture technique 2 Conception technique Chapitre III
- 28. 25 1. L’ARCHITECTURE APPLICATIVEOU LOGICIELLE L’architecture applicative d’une application Web décrit les interactions entre les applications, les bases de données et les systèmes. C’est-à-dire, il s’agit d’un cadre qui comprend des relations entre tous les composants de l’application internes et externes. Figure 12 : schéma architecture logicielle 1 Figure 13 : schéma architecture logicielle 2 Conception technique Chapitre III
- 29. 26 2. LES OUTILSDU DEVELOPPEMENT Définition : Les outils de développement sont essentiels pour simplifier le processus de création de logiciels, améliorer la collaboration au sein des équipes de développement et assurer la qualité du code produit. Le choix des outils dépend souvent du langage de programmation, de la plateforme cible et des préférences individuelles des développeurs En ce qui concerne ce projet voici les outils utilisés. a) Modélisation ✓ UML : Unified Modeling Language Un langage de modélisation graphique à base de pictogrammes. Il est apparu dans le monde du génie logiciel, dans le cadre de la « conception orientée objet ». Couramment utilisé dans les projets logiciels, il peut être appliqué à toutes sortes de systèmes ne se limitant pas au domaine informatique. C’est l'accomplissement de la fusion de précédents langages de modélisation objet : Booch, OMT, OOSE. Principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar Jacobson, UML est à présent un standard défini par l'Object Management Group (OMG). b) Logiciel de développement IntelliJ IDEA : est un environnement de développement intégré (IDE) très populaire utilisé principalement pour le développement de logiciels en langage Java. Cet IDE est développé par JetBrains et offre une suite complète d'outils pour les développeurs, facilitant ainsi le processus de développement d'applications Java et d'autres langages de programmation. c) Base de données ✓ SGBD choisie : MySQL. MySQL est un système de gestion de base de données (SGBD). Selon le type d'application, sa licence est libre ou propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde, autant par le grand public (applications web principalement) que par des professionnels, en concurrence avec Oracle et Microsoft SQL Server. Conception technique Chapitre III
- 30. 27 d) Framework Front-end ANGULAR: est un Framework de développement d'applications web open-source créé par Google. Il est largement utilisé pour la création d'applications web monopages (Single Page Applications ou SPA) interactives et dynamiques. PRIMENG : PrimeNG est une bibliothèque de composants d'interface utilisateur (UI) open source pour Angular, un framework JavaScript largement utilisé pour le développement d'applications web. PrimeNG est conçu pour simplifier la création d'interfaces utilisateur interactives et est principalement utilisé dans le développement d'applications web modernes. e) Framework Back-end ✓ SPRING BOOT : est un Framework open-source basé sur Java qui simplifie le développement d'applications Java en fournissant un ensemble de fonctionnalités et de conventions prédéfinies. Il est particulièrement adapté au développement d'applications basées sur des micro services et de projets web rapidement évolutifs. f) Technologie coté DevOps ✓ DOCKER : est une plateforme open-source conçue pour simplifier le développement, le déploiement et la gestion d'applications. Elle repose sur la technologie des conteneurs, qui permet d'empaqueter une application et toutes ses dépendances dans un environnement isolé appelé conteneur. Conception technique Chapitre III
- 31. 28 ✓ GITHUB ACTIONS: GitHub Actions est un service intégré à la plateforme de développement collaboratif GitHub. Il permet d'automatiser divers aspects du processus de développement logiciel et facilite la création d'une chaîne d'outils automatisée qui améliore la qualité et la fiabilité de votre code. Elle est largement utilisée par les développeurs pour rationaliser leur flux de travail de développement logiciel. ✓ AWS : AWS, ou Amazon Web Services, est une plateforme de cloud computing (informatique en nuage) proposée par Amazon.com. Elle offre une gamme complète de services informatiques à la demande via Internet. AWS permet aux entreprises et aux individus de louer des ressources informatiques, telles que des serveurs, des bases de données, du stockage, des services de calcul, des réseaux, des outils de développement et bien plus encore, sans avoir à investir dans une infrastructure matérielle coûteuse. g) Technologie coté securité ✓ SPRING SECURITY JWT (JSON WEB TOKEN) est une extension du Framework Spring Security qui permet d'ajouter des fonctionnalités d'authentification et d'autorisation basées sur des jetons JWT dans une application Spring. Les jetons JWT sont un moyen populaire de gérer l'authentification dans les applications web modernes, car ils sont sécurisés, compacts et faciles à utiliser. h) Gestion de projet ✓ GANTT PROJECT : Gantt Project est un logiciel de gestion de projet open source et gratuit qui permet de créer, planifier et gérer des projets en utilisant des diagrammes de Gantt. Les diagrammes de Gantt sont un outil visuel couramment utilisé dans la gestion de projet pour représenter graphiquement les tâches d'un projet, leurs durées, leurs dépendances et leur séquence. Conception technique Chapitre III
- 32. 29 ✓ ATLASIAN JIRA: Jira est une plateforme de gestion de projet développée par la société Atlassian. Elle est principalement utilisée pour la gestion de projet, la gestion des tâches, le suivi des problèmes (bug tracking) et la gestion des projets logiciels, bien que ses applications puissent être adaptées à une variété d'autres cas d'utilisation. Jira est largement utilisé dans le domaine du développement logiciel, mais il peut également être utilisé dans d'autres domaines tels que le marketing, les ressources humaines, la gestion de produits, et plus encore. i) Gestion des versions ✓ GIT et GITHUB : Git est un système de gestion de versions (SGV) open source largement utilisé pour le suivi des modifications apportées aux fichiers et aux projets logiciels. j) Autres ✓ POSTMAN : est une extension Google Chrome permettant d’interagir avec les API HTTP. Il présente une interface graphique conviviale pour la création de requêtes et la lecture des réponses. Conclusion : Dans ce chapitre, nous avons abordé les différentes structures techniques et applicatives, ainsi que les outils et technologies employés pour réaliser notre projet accompagné par leur utilité et importance. Conception technique Chapitre III
- 33.
- 34. 31 Introduction : Aprèsavoir défini le contexte, les objectifs, la conception fonctionnelle et technique, dans ce chapitre nous allons détailler l’implémentation de la solution proposée en donnant un aperçu de quelques captures d’écran. Présentation de l’application 1.1 Inscription Cet écran d’inscription elle a été implémenté pour faciliter la création de compte aux différents acteurs du système plus précisément le visiteur. NB : on ne peut pas utiliser le même mail pour créer deux comptes, chaque compte pour un email. Réalisation de l’application Chapitre IV Figure14 : Aperçu formulaire inscription sans erreur Figure15 : Aperçu formulaire inscription avec erreur
- 35. 32 1.2 Authentification Pour accéderaux différentes fonctionnalités de l’application, l’utilisateur doit passer par une fenêtre d’authentification s’il est de nature administrateur ou client. L’authentification se fera par la saisie d’un email et un mot de passe 1.3 Page accueil visiteur Après authentification de l’administrateur ou le client il sera dirigé vers la « Page Accueil », Cette page d’accueil joue un rôle crucial en fournissant une vision globale de ce que ces deux acteurs doivent faire dans le système. k) Page accueil client et visiteur simple Figure16 : Aperçu formulaire authentification Figure17 : Aperçu page d’accueil visiteur
- 36. 33 l) Page accueiladministrateur 1.3 Ajout produit par l’administrateur Dans cet écran nous offrons la possibilité à l’administrateur de pouvoir ajouter des produits Figure18 : Aperçu page d’accueil administrateur Figure19 : Aperçu formulaire ajouter produit par administrateur
- 37. 34 1.4 Supprimer produitpar l’administrateur Dans cet écran nous offrons la possibilité à l’administrateur de pouvoir supprimer des produits 1.5 Ajout catégorie par l’administrateur Dans cet écran nous offrons la possibilité à l’administrateur de pouvoir ajouter des catégories Figure20 : Aperçu supprimer produit par administrateur Figure21 : Aperçu supprimer catégorie par administrateur
- 38. 35 1.6 Supprimer catégoriepar l’administrateur Dans cet écran nous offrons la possibilité à l’administrateur de pouvoir supprimer des catégories 1.7 Ajout d’un administrateur Cette partie st un espace qui nous permettra de faciliter l’ajout d’un nouveau admin dans l’application. NB : on ne peut pas utiliser le même mail pour créer deux comptes administrateur (voire l’écran ) , chaque compte pour un email, sans oublier que un user ne peut pas créer un administrateur. Figure22 : Aperçu supprimer catégorie par administrateur
- 39. 36 Conclusion : Laréalisation de l'application est une phase cruciale qui à transformer les concepts en réalité. Ce une étape majeure vers la concrétisation des objectifs fixés. Donc ce chapitre nous à permis de parcourir les écrans de certaines fonctionnalités de l’application. NB : Pour pouvoir tester les autres fonctionnalités de l’application et voir les écrans voici les liens GitHub pour le backend, frontend et déploiement à utiliser Liens :https://github.com/rachidassouani/ecom-project https://github.com/ayoubAnbara/front-ecommerce http://forartifact.s3-website.eu-west-3.amazonaws.com Figure23 : Aperçu formulaire ajouter administrateur
- 40. 37 Conclusion générale etperspectives 1) Conclusion générale En conclusion, le commerce électronique (e-commerce) occupe une place centrale dans notre monde actuel et a profondément transformé la manière dont les entreprises et les consommateurs interagissent sur le marché. Il a apporté une série d'innovations et d'avantages qui ont redéfini la façon dont les transactions commerciales sont menées. Le e-commerce continue de façonner l'économie mondiale et de changer notre façon de vivre et de consommer. Bien que de nouveaux défis et des questions liées à la sécurité et à la confidentialité des données se posent, le e-commerce reste un moteur clé de l'innovation et de la croissance économique. Il est destiné à évoluer davantage à mesure que les technologies et les habitudes de consommation continuent de se développer. 2) Perspectives Les perspectives de ce travail sont les trois points suivants : ➢ Intégration d’une architecture micro service L'intégration d'une architecture micro services dans une application e-commerce peut ouvrir de nouvelles perspectives et améliorer considérablement les performances, la flexibilité et la gestion de l'application. ➢ La recommandation automatique de produit La recommandation automatique de produits basée sur ChatGPT (ou une autre technologie de traitement du langage naturel), peut offrir des avantages significatifs de l’application. ➢ La réalisation d’une application mobile avec Flutter pour la version web Vu que l’appareil mobile est le plus utilisé par les utilisateurs d’une application à l’heure actuelle, nous proposons de réaliser une version mobile de la version web pour assurer une facilité d’accès à tout type d’utilisateur. ➢ L’optimisation de SEO Le SEO (Search Engine Optimization en anglais), étant un ensemble de techniques et de pratiques visant à améliorer la visibilité d'un site web, d'une page web ou d'une application dans les résultats organiques (non payants) des moteurs de recherche tels que Google, Bing, Yahoo, etc. Nous souhaiterons utiliser cette technique pour notre application E-commerce Conclusion générale et perspectives
- 41. 38 dans l'objectif d'obtenirun classement plus élevé dans les résultats de recherche pour des mots-clés pertinents, ce qui peut conduire à une augmentation du trafic organique (non payant) vers l’application web. NB : L'optimisation SEO est un processus continu, car les moteurs de recherche mettent à jour régulièrement leurs algorithmes de classement. Les entreprises investissent dans le SEO pour attirer un trafic qualifié, améliorer leur visibilité en ligne et, finalement, augmenter leur visibilité et leurs ventes. Voici quelques perspectives d'une application e-commerce basée sur une architecture micro services avec recommandations automatiques de produit par ChatGPT : 1. Personnalisation accrue : L'architecture micro services permet de segmenter les données et les fonctionnalités, ce qui permet une personnalisation plus précise de l'expérience client. 2. Amélioration de la convivialité : Les recommandations automatiques par ChatGPT peuvent rendre l'expérience utilisateur plus intuitive en fournissant des conseils instantanés, en répondant aux questions des clients, en facilitant la recherche de produits et offrir des suggestions de produits hautement personnalisées en fonction du comportement, des préférences et des interactions de l'utilisateur. 3. Engagement accru : Les recommandations intelligentes peuvent inciter les clients à explorer davantage le catalogue de produits, augmentant ainsi l'engagement et les chances de conversion. 4. Optimisation des ventes : Les recommandations basées sur le traitement du langage naturel peuvent s'adapter aux conversations des utilisateurs en temps réel, en comprenant leurs besoins et en suggérant des produits pertinents, ce qui peut stimuler les ventes et les revenus. 5. Intégration omni-canal : Une architecture micro services bien conçue facilite l'intégration des fonctionnalités de chatbot alimenté par ChatGPT sur divers canaux, notamment les sites web, les applications mobiles, les réseaux sociaux et les chatbots autonomes. 6. Collecte de données améliorée : Avec une architecture micro services, il est plus facile de collecter et d'analyser des données précises sur le comportement des clients, ce qui peut être utilisé pour améliorer en permanence les recommandations. 7. Évolutivité et maintenance simplifiée : L'architecture micro services permet de mettre à jour et de maintenir indépendamment les services, y compris ceux liés aux recommandations automatiques. Cela simplifie les mises à jour et les évolutions sans affecter l'ensemble de l'application. 8. Gestion de la charge de travail : Une architecture micro services permet de répartir la charge de travail sur plusieurs services, ce qui améliore les performances de l'application et la rend plus résiliente aux pics de trafic. 9. Formation du personnel : Formez votre équipe pour comprendre et gérer efficacement les systèmes de recommandation automatique, ainsi que l'architecture micro services dans son ensemble.
- 42. 39 10.Surveillance continue :Mettez en place des outils de surveillance pour suivre les performances de votre système de recommandation automatique et ajustez-le en fonction des retours d'expérience et des données d'utilisation. En résumé : une architecture micro services avec des recommandations automatiques par ChatGPT, vous pouvez créer une expérience e-commerce hautement personnalisée et engageante pour vos clients, tout en bénéficiant de la flexibilité et de la gestion simplifiée offertes par une architecture modulaire et évolutive. Cette approche peut stimuler les ventes, renforcer la fidélité des clients et améliorer la satisfaction globale des utilisateurs.
- 43. 40 Références Bibliographiques ➢ PROFESSEURMOHAMED YOUSFI : sur YouTube - JEE et Ecosystèmes Spring Angular JWT -Application E-commerce sur YouTube - How to secure Spring and Angular App using Spring Security and JWT - Docker, Docker Compose, Doker Swarm, Kubernetes-by Sources de l’informaticien - Spring boot 3 AWS LAMBDA Servlerless Architecture - Micro services avec Spring Boot et Spring Cloud ➢ PROFESSEUR BOUCHRA BOUIHI : - UML sur YouTube ➢ UDEMY : - BOUALI ALI : Devenir Full Stack (Spring boot/Angular) par la pratique. - NADHEM BELHADJ : Devenir Full Stack avec Spring boot3 et Angular upd 2023. - CODE DECODE : Master Spring boot Micro service & Angular K8s CICD AWS ➢ MUDEY : - AKPOLI ESPERO : Apprendre Angular par la création d’un site E-commerce Références bibliographiques