Faculté des sciences De Tunis

Département Informatique
Rapport De Stage Ingénieur

Développement d’une application web L'Art en Vente

Developpement d’une application
chez
web Réalisé
BEEpar :
Coders
Ben Rhouma Hana

Encadré par :
Mr. Neffati Ahmed
Période de stage :
Du 01/07/2023 jusqu’à 31/08/2023

Année Universitaire 2023 – 2024

1
Table des matières
Introduction Générale.........................................................................................................5
Chapitre I : Présentation générale l’entreprise..........................................................................6
I.1 Introduction...............................................................................................................6
I.2 Présentation de l’organisme de l’acceuil....................................................................6
I.2.1 Fiche d’identité...........................................................................................................6
I.2.2 Secteurs d’activités.....................................................................................................6
I.3 Conclusion..................................................................................................................6
Chapitre II : Spécification des besoins.................................................................................7
II.1 Introduction...............................................................................................................7
II.2 Présentation du projet...............................................................................................7
II.3 Objectifs globaux du projet........................................................................................7
II.4 Identification des besoins fonctionnels......................................................................8
II.4.1 Besoins fonctionnels...........................................................................................8
II.4.2 Besoins non-fonctionnels....................................................................................8
Conclusion.......................................................................................................................8
Chapitre III : Architecture et Conception..............................................................................9
III.1 Introduction.............................................................................................................9
III.2 Conception générale.....................................................................................................9
III.2.1 Architecture générale............................................................................................9
III.2.2 Architecture technique.......................................................................................9
III.2.2.1 Architecture du BackEnd...............................................................................10
III.2.2.2 Architecture du FrontEnd..............................................................................11
III.3 Conception détaillée...............................................................................................11
III.3.1 Diagramme de classes......................................................................................12
Conclusion.....................................................................................................................12
Chapitre IV : Développement et Réalisation.................................................................13
IV.1 Introduction...........................................................................................................13
VI.2 Environnement logiciel...........................................................................................13
VI.2.1 Outils de développement.................................................................................13
VI.2.2 Framework et langages de programmation......................................................14
VI.2.3 Choix techniques..............................................................................................15
VI. 3 Présentation de l’application.......................................................................................16
VI. 3 .1 Interface d’accueil................................................................................................16

2
 VI. 3 .2 Interface du Login..........................................................................................16
VI. 3. 4 Interface administrateur................................................................................18
La capture présente l'interface administrateur du site, qui est la partie réservée aux
administrateurs du site. Cette interface est conçue pour faciliter la gestion efficace des
opérations liées au site e-commerce
...........................................................................................................................................
18
VI. 3. 5 Interface Add New Product............................................................................18
VI. 3.6 Interface de Show Product Details...................................................................19
VI. 3.7 Interface de View Photo..................................................................................19
VI. 3.8 Interface de Update Product...........................................................................20
Conclusion Générale..........................................................................................................21

3
Remerciements

Nous tenons par cette humble occasion à présenter nos profonds sentiments de
remerciements les plus dévoués et notre gratitude la plus sincère à notre
encadreur Mr, Naffeti Ahmed pour l’aide et le support tout au long de ce projet,
vos précieux conseils ont été d’un grand apport, autant sur le plan professionnel
que personnel et qui a gardé un oeil attentif sur le déroulement et l’avancement
de ce projet en ayant toujours des remarques .

4
Introduction Générale
Le commerce électronique, ou E-commerce, a connu une croissance exponentielle ces
dernières années, transformant radicalement la façon dont les consommateurs
interagissent avec les produits et les services. Grâce à Internet, les frontières
géographiques sont abolies et les transactions peuvent être réalisées à tout moment et
depuis n'importe quel endroit.

Notre projet vise à créer une plateforme de commerce en ligne complète, offrant aux
utilisateurs une expérience d'achat pratique, sécurisée et personnalisée. Nous croyons
fermement que le succès d'une entreprise dans le domaine de l'E-commerce repose sur
la facilité d'utilisation de son site web, la qualité de son design, la pertinence de ses
fonctionnalités et la fiabilité de son système de paiement.

5
 Chapitre I : Présentation générale
l’entreprise

I.1 Introduction
Ce chapitre a pour objectif de situer le stage dans son contexte général à savoir
l’organisme d’accueil : sa création et ses services.

I.2 Présentation de l’organisme de l’acceuil

Je préssente dans ce paragraphe l’organisme d’accueil ainsi que les secteurs
d’activités dans lesquels il agit. Toutes les informations dans ce chapitre sont pris de
site web de la société d’informatique .

I.2.1 Fiche d’identité

Beecoders, fondée en 2020, est une entreprise de services du numérique spécialisée
dans le développement web et mobile (Android et IOS), le design web, le consulting
IT et les formations à distance.

I.2.2 Secteurs d’activités

Beecoders , l’agence de développement web et mobile met à votre disposition la
compétence de ses experts pour développer le produit digital qui vous correspond : un
site internet, une application mobile, un logiciel, etc. Nous offrons aussi des services
de consulting pour booster les performances de vos employés dans le secteur d’IT.

I.3 Conclusion
Ce chapitre a donné l’occasion de présenter l’entreprise accueillante Wimobi.
Dans le
chapitre suivant, je vais présenter le projet du stage et parler des outils et des
languages nécessaires pour effectuer les tâches de développement.

6
 Chapitre II : Spécification des besoins

II.1Introduction
Dans ce chapitre composé de trois parties, nous exposons en premier lieu la
présentation du projet. La deuxième partie est consacré aux objectifs globaux du projet
et finalement identification des besoins (fonctionnel et non fonctionnel) .

II.2Présentation du projet
Mon projet consiste à la conception et le développement d’une application web de
E-commerce .
Notre application crée pour chaque acteur (utilisateur et administrateur) un espace sur
lequel il peut bénéficier des fonctionnalités qui lui ai accordé selon son rôle.
Ces fonctionnalités sont principalement les suivants :
• Consulter les produits dans le site (utilisateur) .
• Gérer les commandes (utilisateur + administrateur).
• Gérer les catégories et les produits (administrateur) .
• Gérer les produits (administrateur) .
II.3Objectifs globaux du projet

• Développer une plateforme robuste et fonctionnelle qui permettra aux commerçants

de présenter leurs produits de manière attrayante et aux consommateurs de naviguer
facilement à travers les différentes catégories de produits.

7
• Offrir une expérience d'achat conviviale : Nous souhaitons mettre l'accent sur la
convivialité de l'interface utilisateur, en veillant à ce que les utilisateurs puissent
facilement rechercher, filtrer et comparer les produits, et passer commande de manière
intuitive.

II.4Identification des besoins fonctionnels

II.4.1Besoins fonctionnels
• Un utilisateur peut créer, modifier un compte.

• Un utilisateur peut créer, modifier, ou annuler une commande.

• Un utilisateur peut visualiser les produits et mettre son review pour chaque
produit.

• Un utilisateur peut contacter un assistant.

• Un administrateur peut créer, modifier, ou annuler une catégorie.

• Un administrateur peut créer, modifier, ou annuler un produit.

II.4.2Besoins non-fonctionnels
• Performance : Le site web doit être rapide et réactif, avec des temps de chargement
rapides pour offrir une expérience utilisateur fluide. Il doit pouvoir gérer efficacement
un grand nombre de requêtes simultanées et maintenir une bonne performance même
en cas de trafic élevé.

• Sécurité : La sécurité est primordiale pour un site de commerce électronique. Il est

essentiel de mettre en place des mesures de protection pour garantir la confidentialité
des informations sensibles des utilisateurs, telles que les données de paiement.

Conclusion
Ce premier chapitre a été consacré à la présentation et la mise du projet dans son cadre
général avec l’analyse de besoin.

8
 Chapitre III : Architecture et Conception

III.1 Introduction
Dans ce chapitre nous allons présenter les différents types de conception du projet:
• conception de l’architecture
• conception détaillée
En conséquence, on va présenter les architectures utilisés dans BackEnd et le
FrontEnd, le diagramme de classes .

III.2 Conception générale

III.2.1 Architecture générale
L'architecture générale de notre projet d'application web e-commerce repose sur une
combinaison de technologies modernes pour assurer une
performance optimale et une expérience utilisateur exceptionnelle. Au cœur de notre
système, nous utilisons Spring Boot, un framework Java qui simplifie le
développement d'applications robustes et évolutives. Spring Boot gère la logique
métier de notre application, tandis qu'Angular, un framework JavaScript, est utilisé
pour créer une interface utilisateur interactive et réactive. Les données sont stockées
dans une base de données MySQL, offrant une grande fiabilité et une extensibilité
significative. Cette architecture en couches assure une séparation claire des
préoccupations, permettant une maintenance plus facile, une scalabilité fluide et une
évolutivité future de notre site e-commerce.

III.2.2 Architecture technique

L’architecture technique est une vue tournée vers les différents éléments matériels et
l'infrastructure dans laquelle le système informatique s'inscrit, les liaisons physiques
et logiques entre ces éléments et les informations qui y circulent.

9
III.2.2.1 Architecture du BackEnd
L'architecture typique d'une application Spring Boot suit souvent le modèle MVC
(Modèle-Vue-Contrôleur), bien que Spring Boot encourage la séparation claire des
préoccupations et offre une flexibilité considérable. Voici comment chaque composant
s'intègre dans l'architecture d'une application Spring Boot :

Modèle (Model) :

Dans une application Spring Boot, le modèle représente généralement les données et
la logique métier. Les classes d'entité, souvent annotées avec @Entity (si vous utilisez
JPA), définissent la structure des données stockées dans la base de données.

Contrôleur (Controller) :

Les contrôleurs sont responsables de la gestion des requêtes HTTP. Ils reçoivent les
demandes des clients, interagissent avec le modèle pour obtenir les données requises
et renvoient une réponse appropriée.

Service (Service) :

Les services contiennent la logique métier de l'application. Ils encapsulent des

opérations complexes liées à la manipulation des données et fournissent une interface
entre les contrôleurs et le modèle.

10
III.2.2.2 Architecture du FrontEnd
L'architecture d'une application Angular suit un modèle de conception basé sur les
composants. Angular est un framework JavaScript populaire pour le développement
d'applications web monopages (SPA) et suit une architecture modulaire qui facilite la
gestion et la maintenance de l'application. Voici une vue d'ensemble des principaux
composants de l'architecture d'une application Angular :

Modules :

Les modules sont des regroupements de composants, de services et d'autres

fonctionnalités connexes. Chaque application Angular est constituée d'au moins un
module racine, appelé le "AppModule". Les modules permettent de découper
l'application en morceaux logiques, favorisant la modularité, la réutilisation et la
maintenabilité.

Composants :

Les composants sont les éléments de base de l'interface utilisateur d'une application
Angular. Chaque composant est responsable d'une partie spécifique de l'interface
utilisateur et est généralement constitué d'un fichier de modèle (HTML), d'un
fichier de style (CSS) et d'une classe de contrôleur (TypeScript).

Les composants interagissent les uns avec les autres pour construire l'ensemble de
l'application.

Services :

Les services sont des classes qui contiennent la logique métier de l'application,
notamment la gestion des données, les appels d'API, la gestion de l'état, etc. Les
services sont souvent injectés dans les composants pour partager des données et des
fonctionnalités communes.

III.3 Conception détaillée

Dans cette partie on présente la conception technique de la vue statique de notre
application. La vue statique est représentée par des diagrammes de classe

11
III.3.1 Diagramme de classes
Ce diagramme est composé 6 classes qui sont : User ,Role, OrderDetail , Product
et ProductImages .

Conclusion :
Dans ce chapitre nous avons présenté l’architecture générale et l’architecture
technique de notre application. Aussi nous avons développé le diagramme de classes

12
 Chapitre IV : Développement et Réalisation

IV.1 Introduction
Dans ce chapitre, on va décrire la manière de réalisation de notre projet. Nous
présentons, tout d'abord, l'environnement logiciel utilisé. Ensuite, nous
présentons quelques interfaces graphiques contenant des fonctionnalités qui
correspondent au système que nous avons développé.

VI.2 Environnement logiciel

Dans cette section, nous présentons les différents langages de programmation
utilisés, ainsi queles outils de développement adoptés pour l’implémentation de
notre application.

VI.2.1 Outils de développement

Visual Studio Code est un éditeur gratuit de code extensible open
source, développé par Microsoft. Il inclut la prise en charge du
débogage, du contrôle Git intégré, de la coloration syntaxique et de la
complétion intelligente du code.

MySQL est un système de gestion de bases de données relationnelles.

XAMPP est une distribution Apache entièrement gratuite et facile

à installer contenant MySQL, PHP et Perl. Le paquetage open
source XAMPP a été mis au point pour être incroyablement facile
à installer et à utiliser.

13
VI.2.2 Framework et langages de programmation

Spring Boot est un framework open-source basé sur Spring

Framework, conçu pour simplifier et accélérer le développement
d'applications Java. Il offre un ensemble d'outils et de conventions
pour créer rapidement des applications Java

Angular est un framework open-source développé par

Google, qui est largement utilisé pour la création
d'applications web monopages (Single Page Applications,
SPA) et d'applications web dynamiques.

HTML est un langage de balisage dont le rôle est de

formaliser l'écriture d'un document avec des balises de
formatage.

CSS est un langage informatique qui permet de mettre en

forme le contenudes fichiers HTML ou XML.

JavaScript est un langage de programmation orienté

objet principalement utilisé pour développer des pages
html interactive.

14
 Bootstrap est une bibliothèque frontale composée d'un
ensemble d'outils permettant de concevoir la conception
des applications et des sites Web. Elle contient des codes
HTML, CSS, JavaScript, des composantes graphiques
(boutons, formulaires...) et des extensions JavaScript pour
simplifier le développement des interfaces côté client.

VI.2.3 Choix techniques

L'utilisation de Spring Boot et Angular ensemble est une combinaison puissante pour
le développement d'applications web. Voici quelques raisons courantes pour lesquelles
ces deux technologies sont souvent choisies conjointement :

Architecture Full Stack : Spring Boot est idéal pour le développement côté
serveur, tandis qu'Angular est un excellent choix pour le développement côté client.
Cette séparation des préoccupations permet de créer une architecture full stack où
chaque technologie se concentre sur sa propre sphère de compétence.

Séparation des Préoccupations : La combinaison de Spring Boot et Angular

favorise la séparation claire des préoccupations entre le Back-End et le Front- End.
Cela rend le code plus propre, plus facile à maintenir et permet aux développeurs de
travailler indépendamment sur chaque partie de l'application.

Performances et Réactivité : Angular permet de créer des applications web

monopages (SPA) réactives qui offrent une expérience utilisateur fluide, tandis que
Spring Boot garantit un Back-End performant et évolutif.

Sécurité : Spring Boot propose des fonctionnalités de sécurité robustes, telles que
Spring Security, pour protéger l'application. Angular offre une protection contre les
failles de sécurité courantes, notamment la protection contre les attaques XSS (Cross-
Site Scripting) et CSRF (Cross-Site Request Forgery), par défaut.

15
VI. 3 Présentation de l’application
On présentera notre application à travers une série de captures d’écran, chacune
représentant une fonctionnalité du système.

VI. 3 .1 Interface d’accueil

La capture présente l'interface d'accueil d'un site e-commerce E shopper, qui est la
page principale où les utilisateurs arrivent lorsqu'ils visitent le site.
L'interface est soigneusement conçue pour attirer l'attention et offrir une expérience
conviviale aux visiteurs.

VI. 3 .2 Interface du Login

La capture d'écran précédente montre l’interface de connexion qui permet
àl'utilisateur de se connecter à l'application. Cette interface fournit un
mécanisme de sécurité qui empêche les utilisateurs non autorisés d'accéder
au système. La connexion n'est établie que si l'utilisateur a correctement
saisit les données nécessaires (courriel et
mot de passe).

16
VI. 3.3 Interface de Product details
La capture présente l'interface de "Product Details" du site , qui est la page dédiée à la
présentation détaillée d'un produit spécifique. L'interface est conçue pour fournir aux
utilisateurs toutes les informations essentielles dont ils ont besoin pour prendre une
décision d'achat éclairée et aussi l’apparition d’autres produits au dessous de
description.

17
VI. 3. 4 Interface administrateur :
La capture présente l'interface administrateur du site, qui est la partie réservée aux
administrateurs du site. Cette interface est conçue pour faciliter la gestion efficace
des opérations liées au site e-commerce .

VI. 3. 5 Interface Add New Product :

L'interface "Add New Product" dans notre projet de vente de tableaux de peinture est
un élément essentiel pour l'enrichissement de notre catalogue.

18
VI. 3.6 Interface de Show Product Details :
L'interface "Show Product Details" dans notre projet de vente de tableaux de peinture
offre aux visiteurs et aux clients une expérience immersive pour explorer nos œuvres
d'art.

VI. 3.7 Interface de View Photo :

19
VI. 3.8 Interface de Update Product :

L'interface "Update" dans notre projet de vente de tableaux de peinture est un outil essentiel
pour les administrateurs ou les vendeurs afin de maintenir notre catalogue à jour. Cette
interface intuitive permet de modifier facilement les informations liées à un tableau, que ce
soit pour corriger des détails, mettre à jour des prix, ou ajouter de nouvelles œuvres à notre
collection.

2
Conclusion Générale
Ce stage m'a offert une précieuse opportunité d'approfondir mes compétences dans l'analyse,
la recherche et le développement web. Le projet sur lequel j'ai travaillé consistait à concevoir
et développer le site web l’art en vente, une plateforme permettant aux utilisateurs de créer
et gérer des demandes de services, indépendamment de la catégorie ou du domaine de
travail.
Au cours de mon stage, j'ai eu l'occasion de m'initier à de nouveaux langages de
programmation et d'explorer de nouveaux outils de développement. Cette expérience m'a
permis d'élargir mes connaissances théoriques en matière de développement web. J'ai
également acquis une expertise technique précieuse, notamment en matière de recherche et de
communication au sein de l'entreprise