Beruflich Dokumente
Kultur Dokumente
:
Réalisation
Introduction
Après avoir élaboré et détaillé la conception adaptée à notre module, nous abordons dans ce chapitre le
dernier volet de ce rapport, qui a pour objectif de présenter l’environnement matériel et logiciel de
développement et d’exposer la phase de réalisation et validation en se basant sur les interfaces réalisés.
1. Environnement de travail
1.1. Les outils de développement utilisés par Magento :
La structure modulaire de Magento inclut les technologies à source ouverte suivantes qui nous utilisons
pour développer notre module.
1.2 Environnement matériel :
Pour la réalisation de notre projet, nous avons utilisé un PC portable ASUS caractérisé par:
Mémoire vive 8 Go
Disque Dur 1 To
Utilisation du langage PHP: Magento 2 est une application essentiellement écrit en PHP.
Ce langage bénéficie d'une grande communauté de développeurs ainsi que d'un grand
nombre de fonctionnalités disponibles [18].
Etude de Framework:
Framework PHP utilisé pour Magento 2 est le Zend. Zend Framework est souvent
appelé une "bibliothèque de composants" car ses composants sont faiblement couplés
et vous pouvez les utiliser de manière plus ou moins indépendante. Mais Zend Framework
propose aussi une solution avancée Model-View-Controller (MVC) qui peut être utilisée pour
monter des structures de base pour vos applications [19].
JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un format
léger d'échange de données. Il est facile à lire ou à écrire pour des humains et aisément
analysable ou généré par des machines [20].
❖ XML :
❖ CSS3 :
Les feuilles de style en cascade CSS (Cascading Style Sheets) forment un langage
informatique qui décrit la présentation des documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de
sites web et bien pris en charge par les navigateurs web [22].
❖ HTML5 :
Pour mettre en place notre application, nous avons choisi d’exposer l’environnement de
développement qui a permis l’aboutissement de notre module et qui a assuré le bon déroulement
de la phase de son implémentation.
Tableau : L’environnement utilisé
Outil Présentation
La notion du « Back-office » repose sur la partie web qui n’est visible que par un utilisateur
ayant un rôle administrateur dans l’application. En effet, cette partie est dédiée pour le
contrôle et la gestion du contenu et des fonctionnalités.
Dans le cadre de notre projet, nous avons besoin de cette partie évidemment pour une variété de raisons
dont : gérer les vendeurs, les clients, les sociétés, les boutiques, les commandes, les produits, les catégories,
les commissions, les prix et les promotions etc.
Lorsque l’application se lance, une interface d’authentification comme présenté sur la figure ci-dessous se
lance.
Une fois que l’utilisateur saisit son login et mot de passe, il sera acheminé vers son espace Dashboard
d’administrateur.
Figure : Capture d'écran du panneau d'administration
Le Back-office de notre application est doté de plusieurs menus (navbar) qui englobent toutes les
fonctionnalités offertes par l’interface d’accueil de notre application. Chaque menu représente un
module et une fonctionnalité spécifique et nous y sommes amenés à évoquer par la suite les trois menus
(trois modules) spécifiques qui sont réalisés lors du stage :
Marketplace
Company
Store pickup
Une Marketplace est définie comme un site internet sur lequel des vendeurs indépendants, professionnels
ou particuliers, ont la possibilité de vendre leurs produits ou services en ligne moyennant, une commission
prélevée par le site sur chaque vente.
En effet l’admin a le droit de gérer tous les vendeurs et leurs boutiques et de définir des commissions sur
chaque vente etc.
Si l’utilisateur veut accéder aux fonctionnalités du Marketplace, il suffit de cliquer sur le menu
« Marketplace ».
Si l’administrateur veut consulter les commissions prélevées pour chaque vendeur selon la catégorie
après chaque commande, il suffit de cliquer sur commission de vendeur à partir de menu des éléments
comme indiqué sur la figure ci-dessous.
Figure : Capture d'écran de l’interface commission vendeur
Si l’administrateur veut consulter les avis des clients pour chaque vendeur, il suffit de cliquer sur avis
vendeur à partir du menu des éléments comme indiqué sur la figure ci-dessous.
L’administrateur peut gérer les catégories, il peut donc attribuer ou bien déattribuer une catégorie
pour chaque vendeur tel que ajouter une catégorie, supprimer une catégorie, il suffit de choisir une
ou plusieurs catégories, par la suite les catégories choisies serons enregistrer et définit lors de la
création d’un nouveau produit par le vendeur comme indiqué sur la figure ci-dessous.
Si l’administrateur veut affecter des produits pour chaque vendeur, il suffit de sélectionner les
produits et de cliquer sur affecter les produits sélectionnés à partir de menu des éléments comme
indiqué sur la figure ci-dessous, l’affectation des produits entraine une mise à jour de magasin de
vendeur cible et l’ajout de ces produits dans son magasin.
Figure : Capture d'écran de l’interface Affecter produits au vendeur
A la sélection de l’élément supprimer vendeur, une interface s’affiche au-dessus de l’élément comme
le présente sur la figure ci-dessous, cette étiquète nous permet de supprimer un vendeur.
Et à travers ce menu déroulant il peut consulter les commandes pour un chaque vendeur, alors
l’administrateur doit cliquer sur l’item « commandes vendeur » une liste des commandes s’ouvre
comme indiquée sur la figure ci-dessous.
On passe maintenant à l’élément « produits vendeur » comme présenté sur la figure ci-dessous, Cet
élément contient la liste des produits disponibles dans les magasins de vendeur, se créant par défaut
lors de l’ajout du vendeur de ses propres produits.
Figure : Capture d'écran de l’interface les produits de vendeurs
On passe maintenant au sous menu gérer les commandes, il suffit d’appuyer sur « Gérer les
commandes », une interface apparait comme le présente la figure * ci-dessous. Il peut par la suite
consulter la liste des produits triés par le nom de boutique de chaque vendeur.
L’administrateur doit valider l’ajout du produit de vendeur, changer le statut ainsi que consulter les détails
des commandes. Il doit appuyer sur l’item « View » et une boite s’ouvre comme indiquer sur la figure
** ci-dessous.
Figure : Capture d'écran de l’interface gérer les commandes
L’utilisateur peut configurer ses éléments à partir du menu de configuration et peut modifier les
propriétés de son module comme présenté sur la figure ci-dessous.
Figure : Capture d'écran de l’interface configuration
2.1.2. Réalisation de Back_office Company :
Dans notre Marketplace le client peut être un client particulier ou bien un client professionnel ou un
employé qui appartient à une société , s’agissant d’un commerce entre entreprises. La gestion des sociétés
et des employés se fait depuis le back office par l’administrateur.
Et à travers ce menu déroulant , l’administrateur peut gérer les sociétés ,définir des promotions et des
prix spéciaux pour chaque société et peut aussi faire des configurations, alors il doit cliquer sur le menu
« Company » , une liste de 3 sous menus s’ouvre comme indiquée sur la figure * ci-dessous.
L’administrateur choisi de consulter les sociétés ainsi que leurs informations en ayant le choix d’ajouter
de nouvelles sociétés moyennant la commande . « ajouter une nouvelle société » ce qui fait apparaitre
un formulaire contenant les informations de société à remplir par l’administrateur et à enregistrer
minutieusement comme indiqué sur la figure ** ci-dessous.
Figure : Capture d'écran de l’interface liste des sociétés
Nous sommes arrivés à la tâche de gérer des sociétés. Maintenant il reste à assurer le lien entre une
société et ses employés. L’administrateur peut importer un fichier CSV afin d’ajouter des employés
dans la base de données des ressources humaines de la société en accédant l’interface d’import des
entités, il choisit le type de l’entité qu’il veut importer, le fichier d’import, clique sur le bouton
« vérifier » les données puis clique sur le bouton "Importer", si les données sont vérifiées donc le
fichier sera importé correctement comme illustré dans les figures si dessous.
Maintenant, l’administrateur peut définir des différents types de promotions selon les besoins de
chaque société, Pour faire ceci il appui sur le sous menu règle de prix de catalogue, une interface
s’ouvre avec la liste des règles de promotions déjà définie par l’administrateur comme le présente sur
la figure ci-dessous *.
Si l’administrateur veut ajouter une nouvelle règle de prix de promotion, il appui sur le bouton
« ajouter une nouvelle règle », une interface s’affiche comme indiqué par la figure **ci-dessous ,
Une fois que l’interface est chargée, l’administrateur rempli les informations nécessaires.
l’administrateur peut définir d’autres règles de prix de la même façon que celle de’ajout d’une
nouvelle règle ; Mais cette fois les règles ne sont appliquées que dans le panier comme illustré par
la figure ci-dessous.
Figure : Capture d'écran de l’interface règle de prix panier
Des configurations peuvent être appliquées au module Company B2B tel que : Dans le B2B le
prix ne s’affiche que pour les utilisateurs connectés, et l’administrateur sera invité à appliquer les
configurations nécessaires comme indiqué par la figure si dessous.
Figure : Capture d'écran de l’interface Configuration Company
Store Pickup est un module permettant aux clients de commander des produits en ligne et les récupérer dans les
magasins ainsi la géolocalisation des vendeurs et de leurs boutiques , De plus, il nous permet d’ajouter
plusieurs emplacements de magasin via Google Maps pour permettre aux clients de trouver facilement le
magasin physique le plus proche possible.
Dans cette partie du chapitre, nous présentons les différentes interfaces de l’application.
Dans le cas où l’utilisateur choisit de faire un compte «Vendeur» sa demande ne sera pas
confirmée directement mais elle doit être vérifiée par l’administrateur en Back-office.
Si l’utilisateur décide de se connecter avec un compte existant alors il sera redirigé vers
l’interface du login et là où il introduira son login et mot de passe.
A mentionner que dans le cas où l’utilisateur est un vendeur, il doit valider la case à cocher
«Devenir un vendeur».
Figure : Capture d'écran d’interfaces Login/inscription vendeur.
Une authentification de vendeur réussite mène à notre fil d’actualité filtré et ne contenant
que les interfaces visibles au vendeur après avoir approuvée par l’administrateur. Le
vendeur connecté reçoit un mail de validation de compte.
Une fois que le compte vendeur est approuvé par l’administration, Le vendeur peut choisir de
consulter son compte et remplir les informations de son magasin. Ainsi après la
confirmation de validité de toutes informations saisis, il peut par la suite se diriger vers
l’espace « Magasin » a traves le lien «Voir magasin». En cliquant sur le lien « voir magasin
« l’interface de détails de cette dernière s’affichera mais le magasin est vide sans
produits.
Figure : Capture d'écran d’interfaces informations magasin
Maintenant, les vendeur veulent créer leurs propres produits qui sont disposés auprès dans son
magasin.
Pour créer un produit vendeur, il suffit de cliquer sur le menu « Produits », une interface de création de
produits s’affiche contenant la liste des produits déjà crée par le vendeur et un bouton « Ajouter un
nouveau produit ». Si le vendeur veut ajouter ses propres produits à la page magasin il lui suffit de
cliquer sur le bouton « Ajouter produit », l’interface de détails de cette dernière s’affichera par
la suite le vendeur sera invité de taper les informations nécessaires et valider
l’ajout sa demande ne sera pas confirmée directement mais elle doit être vérifiée par
l’administrateur en Back-office une fois qu’il est approuvée la magasin est mettre à jour et le produit
est disposé sur le magasin du vendeur. les produits des vendeurs peuvent être aussi affectés par
l’administrateur depuis le back-office comme nous avons expliqué dans la partie précédente .
Figure : Capture d'écran d’interfaces ajouté produit vendeur
Une fois que les produits des vendeurs seront disposés dans leurs magasins, un tunnel de vente
s’établi entre vendeurs et des professionnelles (sociétés) , des vendeurs et des clients particuliers.
Le client, qu’il soit employé d’une société ou bien particulier doit tout d’abord s’authentifier, pour
cela il sera dirigé vers l’interface d’authentification, dans le cas où l’utilisateur est un employé
qui appartient à une société sa demande sera traité après avoir vérifié que cet employé existe
dans le fichier csv crée auparavant par l’administrateur dans le back_office,il introduira son
login et mot de passe sa demande sera instantanément confirmée s’il n’y aura pas du
contenu invalide.
Dans le cas où l’utilisateur est un client particulier, il doit s’y inscrire en tant que utilisateur simple
«Client» et sa demande sera instantanément confirmée s’il n’y aura pas du contenu invalide.
A cet égard, il peut :
Consulter vendeurs et leurs magasins.
Chercher vendeurs plus proches et produits chez l’un des vendeurs.
Commander des produits auprès des vendeurs.
Consulter leurs commandes.
Consulter et imprimer des facture.
Figure : Capture d'écran d’interface login/inscription client
Maintenant le client (employé d’une société ou bien client particulier) cherche un magasin proche de
sa position ou bien un produit chez l’un des vendeurs dans un périmètre donné, il lui suffit de cliquer
sur le menu « Store locator »par la suite il sera donc redirigé vers les interfaces suivantes :
**************************************************************
Une interface présentant la liste des magasins et ses adresses s’affichent, les clients puissent localiser
l’ensemble des boutiques ainsi de consulter les vendeurs et leurs magasins, obtenir leurs adresses,
ainsi créer une relation de proximité avec les vendeurs. Ils peuvent aussi voir une approximation du
rue de magasin à partir d’une carte « Google Maps ».
Une fois le client se dirige vers cette interface, il sera invité à taper sur le lien « direction »
Le client peut aussi entrer sa position , il choisit le véhicule de déplacement pour calculer la distance en
kilométrage et tape sur le bouton « Aller », et par la suite une interface de détails sur la distance, la
route, kilométrage et le temps passé pour arriver à cette position est affiché comme illustreé par la
figure ci-dessous.
Figure : Capture d'écran d’interface localisation magasin
Maintenant pour visualiser une vue approximative sur l’emplacement et la rue du magasin,
le client sera dirigé vers le lien « Street View » une vue 3D s’affiche au-dessous comme le
présente la figure ci-dessous.
Le client peut par la suite consulter leurs commandes effectuées après avoir confirmé
par le vendeur, il peut également suivre les détails sur les commandes comme indiqué par la
figure si dessous.
Figure : Capture d'écran d’interface commande client
Pour chaque commande du vendeur effectuée et passée par le client, une commission sera prélevée
par l’administrateur et le vendeur peut donc consulter les commissions à travers le menu
« commission»,. Une fois que le vendeur clique sur ce menu , une interface de détails de
commissions pour chaque produit commandé s’affiche comme le montre la figure ci-dessous.
Conclusion
Dans ce chapitre nous avons présenté l’environnement technique et logiciel utilisé lors du
projet. Nous avons ensuite présenté l'application proprement dite à travers une sélection des
interfaces les plus significatives que nous avons développées.
A présent nous passerons dans la partie suivante à la conclusion générale de notre projet et aux
perspectives que nous souhaitons achever dans un futur proche.
Conclusion générale
Au terme de ce rapport, nous dressons le bilan complet du travail qui s’inscrit dans le cadre
d’un projet de fin d’études et qui a comme objectif de concevoir et développer une extension
Multi vendeurs « Marketplace B2B » regroupant un ou plusieurs modules sur Magento 2.
Pour accomplir cette mission, nous avons débuté notre stage par une phase de formation sur
les différentes notions théoriques en relation avec le sujet, telles qu’une formation sur le
domaine de l’E-commerce suivie d’une formation sur les nouvelles technologies dans le
développement d’une telle solution sur la plateforme Magento. En second lieu, nous avons
dégagé les limites de la solution existante ainsi que les différents besoins fonctionnels et
techniques auxquels notre projet doit répondre et nous avons planifié le travail selon la
méthodologie 2TUP.
Une fois que nos objectifs ont été fixés, nous avons enchaîné avec la conception afin de
mener à bien notre projet. Nous avons procédé à la phase de réalisation au cours de laquelle nous
nous sommes familiarisés avec le langage de programmation utlisé à l’élaboration de ce présent
projet. Enfin nous avons fait passer notre projet à un test intégral de fonctionnalité .
Nous sommes heureux d’avoir passé le stage au sein de la société eNanotech Tunisie qui
nous a été bénéfique sur tous les plans et nous a permis d’améliorer nos compétences techniques
et communicatives interpersonnelles et professionnelles . Nous avons aussi essayé de faire briller
d’avantage l’image de notre école ISSATSo en nous éfforçant de laisser une bonne impression
digne de son nom.
Par la fin nous souhaitons que la lecture de ce mémoire ait été agréable et claire et que ce
modeste travail retienne l’attention des membres du jury et se récompense par leur appréciation
et qu’il soit d’une certaine utilité scientifique à toute personne intéressée de près ou de loin .
Bibliographie
[1] eNanoTech.URL : http://enano-tech.com/
[2]E-commerce : https://actu-ecommerce.fr/quels-sont-les-differents-types-de-e-commerce
[3] B2C : Sami I MÄKELÄINEN. From B2C to C2C e-commerce, 2016, 18p.
[4] Business to Business (B2B) : DR. VINOD KUMAR et 5p. BUSINESS TO CONSUMER
(B2C) MANAGEMENT 2012. B2C.
[5]C2C : 2016 18p SAMI I MÄKELÄINEN From B2C to C2C e-commerce. B2G.
[6] Prestashop. URL : https://www.prestashop.com/.
[7] Woo commerce. URL : https://woocommerce.com/.
[8] Magento.URL: https:// www. cms. fr/ cms/ magento/ description/#:~: text=
Magento%20est%20un%20logiciel%20de,assurer%20le%20d%C3%A9veloppem%
20du% 20logiciel.
[9] Santis, Maëlys De. « [Comparatif] 6 plateformes e-commerce pour créer votre
boutiqueenligne».Text.appvizerMagazine,11septembre2018.https://www.appvizer.fr/
magazine/marketing/ecommerce/plateforme-e-commerce.
[10] Charlyne.«Qu’est-ce qu’une marketplace ?»Wizaplace (blog),3 avril 2018.
https://www.wizaplace.com/fr/definition-marketplace/.
[11] B2B Company Accounts for Magento 2. URL : https : / / ecommerce. aheadworks. com/
magento-2-extensions/company-accounts.
[12]2UTP :Zakaria Bouazza. « Méthodologie 2 Track Unified Process ». Formation,
14:43:16 UTC. https://fr.slideshare.net/preemptif/mthodologie-2-track-unified-process.
Scribd. « rapport_PFA Processus 2tup.pdf | Architecture de logiciel | Développement de logiciel
». Consulté le 18 novembre 2019. https://fr.scribd.com/document/229859954/rapport-PFA-
Processus-2tup-pdf.
[13]IDE PHPStorme : ‘A la rencontre d’une architecture méconnue : CQRS’, Le blog de
Clever Age <https://blog.clever- age.com/fr/2012/01/05/a-la-rencontre-d-une-architecture-
meconnue-cqrs/>[accessed23January 2020]/
http://www-cs-faculty.stanford.edu/\~{}uno/abcde.html.
[14] Contexte dynamique « Snapshot ». Consulté le 18 novembre 2019.
https://prezi.com/rb8vrfgnnndf/2tup/.
[15]UML : https://www.lucidchart.com/pages/fr/langage-uml
[16]MVC : Julie FORTIN. Developpement Web Le modele MVC, 2011, 56p.
[17]MySQL : https://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-mysql/
[18] PHP. URL : https : / / www. journaldunet. fr / web- tech/ dictionnaire- du-
webmastering/1203597-php-hypertext-preprocessordefinition/#:~:text=D%C3%A9finition
%20du%20mot%20PHP,conception%20de%20sites%20web%20dynamiques..
[19] Zend Framework.URL : « Manual - Documentation - Zend Framework ».Consulté
le novembre 2019.
https://framework.zend.com/manual/1.11/fr/learning.quickstart.intro.html.
[20]JSON.URL : https://www.json.org/json-fr.html
[21]XML.URL : https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203615-
xml-extensible-markup-language-definition-traduction/
[22] CSS : https://www.futura-sciences.com/tech/definitions/internet-css-4050/
[23]HTML.URL : https://developer.mozilla.org/fr/docs/Web/HTML.
[24]Visual paradigm. URL : https://online.visual-paradigm.com/fr/.
[25]WampServer : http://dictionnaire.sensagent.leparisien.fr/wampserver/fr-fr/