UNIVERSITE DE FIANARANTSOA

ECOLE NATIONAL D’INFORMATIQUE

MEMOIRE DE FIN D’ETUDES POUR L’OBTENTION DU DIPLOME DE LICENCE

PROFESSIONNELLE

Mention : INFORMATIQUE
Parcours : Génie logiciel et Base de Données
Intitulé :

CONCEPTION ET REALISATION DU
MODULE D’ACHAT D’UNE SUPER
APPLICATION
Présenté le mercredi 18 Janvier 2023 par :
Monsieur RAZAFINJATOVO Nambinina

Membre du Jury :
- Président : Monsieur RAKOTOASIMBAHOAKA Cyprien Robert, Maitre de
conférences

- Examinateur : Monsieur TAREHY Brice Evrard, Docteur en informatique.

- Rapporteurs : Monsieur RABETAFIKA Louis Haja, Maitre de conférences

Monsieur RAZANAMIHOATRA Jean Christian, Chef de Projet

Année Universitaire : 2021-2022

 CURRICULUM VITE

ETAT CIVIL
RAZAFINJATOVO Nambinina
Né le 26 Mars 2000 a Fianarantsoa
Lot : 294 II/ 3706
Téléphone : 0341518895
E-mail : [email protected]
FORMATIONS ET DIPLOMES :
 2020-2021 : Etudiant en troisième année de formation en Licence professionnelle à
l’Ecole Nationale de l’informatique, Université de Fianarantsoa.
 2019-2020 : Deuxième année de formation en Licence professionnelle à l’Ecole
Nationale de l’informatique, Université de Fianarantsoa.
 2018-2019 : Première année de formation en Licence professionnelle à l’Ecole
Nationale de l’informatique, Université de Fianarantsoa.
EXPERICENCE ET FORMATIONS PROFESSIONNELLES
 2021-2022 : Stagiaire au sein de RELIA consulting Ambohimiandra Antananarivo.
Thème : Conception et réalisation du module d’achat d’une super application.
 Aout 2022 : Réalisation d’un projet au sein de l’ENI sur le thème « Gestion des
Loyers » (Android).
 Février 2022 : Réalisation d’un projet au sein de l’ENI sur le thème « Gestion des
notes » (Java).
 2020-2021 : Stagiaire au sein de la Bank Of Africa (BOA) Agence Antsirabe
Thème : Conception et réalisation d’un projet Gestion des tickets
 Janvier 2021 : Réalisation d’un projet au sein de l’ENI sur le thème « Gestion
d’hôtel » (PHP).
 Décembre 2019 : Réalisation d’un projet au sein de l’ENI sur le theme « Gestion de
train » (Qt).
 Mai 2019 : Réalisation d’un site web au sein de l’ENI comme mini-projet (HTML,
CSS, JavaScript et Jquerry)
COMPETENCE EN INFORMATIQUE :
 Systemes d’exploitation : Windows, Linux.
 Langages de programmation : C, Java, python, JavaScript
 Framework : Angular Js, Next Js, Nest Js, Laravel
 Librairie : React Js
 Méthode de conception : MERISE, 2TUP
 Langage de conception : UML.
I
  Système de gestion de base de données : Mongo DB, MySQL, Laragon.
 Outils bureautique : Collection Microsoft office.
CONNAISSANCES LINGUISTIQUES
 Malagasy : langue maternelle
 Français : lu, écrit, parlé
 Anglais : lu, écrit, parlé
CENTRE D’INTERET
 Sport : Foot, Natation.
 Loisir : Chanter, Jeux vidéo, jeux de carte

II
 SOMMAIRE GENERALE
CURRICULUM VITE................................................................................................................................... I
SOMMAIRE GENERALE ........................................................................................................................... III
REMERCIEMENTS .................................................................................................................................... V
LISTE DES FIGURES................................................................................................................................. VII
LISTE DES TABLEAUX ............................................................................................................................ VIII
LISTE DES ABREVIATIONS ....................................................................................................................... IX
INTRODUCTION GENERALE ..................................................................................................................... 1
PARTIE I : PRESENTATION GENERALE ...................................................................................................... 2
Chapitre 1. Présentation de l'Ecole Nationale d’Informatique ...................................................... 3
1.1. Information d’ordre général................................................................................................ 3
1.2. Missions et historique ......................................................................................................... 3
1.3. Organigramme institutionnel de l’ENI ................................................................................. 6
1.4. Domaine de spécialisation................................................................................................... 8
1.5. Architecture des formations pédagogiques ........................................................................ 8
1.6. Relations de l’ENI avec les entreprises et les organismes ................................................. 12
1.7. Partenariat au niveau international .................................................................................. 13
1.8. Débouchés professionnels avec des diplômés .................................................................. 15
1.9. Ressources humaines ........................................................................................................ 17
Chapitre 2. Présentation de la société d’accueil .......................................................................... 18
2.1. Historique de RELIA ........................................................................................................... 18
2.2. Situation géographique de RELIA ...................................................................................... 18
2.3. Mission de RELIA ............................................................................................................... 19
2.4. Organisation et fonctionnement de RELIA ........................................................................ 19
Chapitre 3. Description du projet................................................................................................. 21
3.1. Formulation ....................................................................................................................... 21
3.2. Objectif et besoins de l'utilisateur..................................................................................... 21
3.3. Moyens nécessaires à la réalisation du projet .................................................................. 22
3.4. Résultats attendus ............................................................................................................. 23
3.5. Chronogramme du projet .................................................................................................. 23
PARTIE II : ANALYSE ET CONCEPTION .................................................................................................... 25
Chapitre 4. Analyse préalable ...................................................................................................... 26
4.1. Analyse de l'existant .......................................................................................................... 26
4.2. Critique de l'existant.......................................................................................................... 27

III
 4.3. Conception avant-projet ................................................................................................... 27
Chapitre 5. Analyse Conceptuelle ................................................................................................ 57
5.1. Dictionnaire des données .................................................................................................. 57
5.2. Règles de gestion ............................................................................................................... 57
5.3. Représentation et spécification des besoins ..................................................................... 58
5.4. Spécification des besoins techniques ................................................................................ 65
5.5. Modélisation du domaine ................................................................................................. 67
Chapitre 6. Conception détaillée ................................................................................................. 69
6.1. Architecture du système ................................................................................................... 69
6.2. Diagramme de séquence de conception pour chaque cas d'utilisation ........................... 70
6.3. Diagramme de classe de conception pour chaque cas d'utilisation ................................. 72
6.4. Diagramme de classe de conception global ...................................................................... 77
6.5. Diagramme de paquetages ............................................................................................... 78
6.6. Diagramme de déploiement.............................................................................................. 80
PARTIE III : REALISATION ....................................................................................................................... 81
Chapitre 7. Mise en place de l'environnement de développement ............................................ 82
7.1. Installation et configuration des outils .............................................................................. 82
7.2. Architecture de l'application ............................................................................................. 84
Chapitre 8. Développement de l'application ............................................................................... 85
8.1. Création de la base de données ........................................................................................ 85
8.2. Codage de l'application ..................................................................................................... 85
8.3. Présentation de l'application............................................................................................. 93
CONCLUSION .......................................................................................................................................... XI
BIBLIOGRAPHIE ...................................................................................................................................... XII
WEBOGRAPHIE ..................................................................................................................................... XIII
GLOSSAIRE ............................................................................................................................................ XIV
ANNEXES................................................................................................................................................ XV
TABLE DS MATIERES ............................................................................................................................. XVI
RESUME .............................................................................................................................................. XVIII
ABSTRACT ........................................................................................................................................... XVIII

IV
 REMERCIEMENTS

Je tiens à exprimer ma reconnaissance et mon profond respect à Dieu, qui a guidé mes
pas tout au long de cette étude et m'a donné la force et la persévérance nécessaires
pour mener à bien ce projet. Sans sa bénédiction et sa grâce, je n'aurais pas pu arriver
jusqu'ici.
 Monsieur HAJALALAINA Aimée Richard, Docteur HDR, Président de
l’Université de Fianarantsoa qui a bien organise l’année universitaire.

 Monsieur LOVATIANA Jean Andréas qui est le CEO et cofondateur de Relia

et, de m’avoir accueilli au sein de sa société et pour tous ses conseils et ses
orientations ;

 Monsieur MAHATODY Thomas, Docteur HDR et Directeur de l’ENI et

Maître de conférences à l’université de Fianarantsoa qui s’est dévoué à assurer
le bon fonctionnement de la formation à l’ENI et d’avoir organisé le stage pour
la fin du cycle de formation ;

 Tous les membres du corps professoral au sein de l’ENI pour toutes les
connaissances qu’ils m’ont transmises durant ces trois années de formations au
sein de l’école ;

 Monsieur RAZANAMIHOATRA Jean Christian, mon encadreur

professionnel, pour ces efforts qu’il a fournis pour me permettre de bénéficier
amplement de ce stage et pour tous ses conseils, ses orientations durant le stage
en tant qu’encadreur professionnel ;

 Monsieur FARANIARIJAONA Fety qui est le CTO et cofondateur de Relia,

même s’il n’était pas mon encadreur professionnel pendant ce stage, il m’a tout
de même offert des conseils précieux ;

 Monsieur RABETAFIKA Haja Louis, Maitre de conférences,

Responsable de mention à l’Ecole Nationale d’Informatique.
 Monsieur RALAIVAO Jean Christian, Assistant
d’Enseignement Supérieur et de Recherche, Responsable de
parcours Génie logiciel et Base de données.
 Monsieur RABETAFIKA Haja Louis, Maitre de conférences,
pour ses précieux conseils durant les différents suivis en tant
qu’encadreur pédagogique.

 Tous les enseignants de l’Ecole Nationale d’Informatique pour

V
 les connaissances qu’ils nous ont transmis durant notre
formation théorique.

 Monsieur RAKOTOASIMBAHOAKA Cyprien Robert, Maitre de

Conférences, d’avoir honoré de sa présence en tant que Président des membres
de jury ;
 Enfin, à mes parents et aux membres de la famille de m’avoir soutenu
moralement et surtout financiers durant ce stage.

VI
 LISTE DES FIGURES
Figure 1. Organigramme de l’Ecole Nationale d’Informatique .............................................................. 7
Figure 2: Localisation de RELIA .......................................................................................................... 18
Figure 3 Méthode Agile ........................................................................................................................ 31
Figure 4 Le processus de développement en Y ..................................................................................... 33
Figure 5 Interaction entre acteur et cas d'utilisation .............................................................................. 59
Figure 6 Relations entre cas d'utilisation ............................................................................................... 60
Figure 7 Cas d'utilisation du système .................................................................................................... 61
Figure 8 Formalisme du système ........................................................................................................... 64
Figure 9 Diagramme de séquences "voir les listes des produits" .......................................................... 64
Figure 10 Diagramme de séquence "ajouter au panier" ....................................................................... 65
Figure 11 Diagramme de séquence "supprimer un produit au panier" .................................................. 65
Figure 12 Modèle de domaine ............................................................................................................... 68
Figure 13 Architecture du système[4] ................................................................................................... 70
Figure 14 Diagramme de séquence de conception "voir les listes des produits" ................................. 71
Figure 15 Diagramme de séquence de conception "ajouter au panier" ................................................ 72
Figure 16 Diagramme de séquence de conception "supprimer un produit du panier" .......................... 72
Figure 17 Diagramme de classe du futur système "voir les listes des produits" ................................... 74
Figure 18 Diagramme de classe du futur système "ajouter un produit au panier" ................................ 75
Figure 19 Diagramme de classe du futur système "supprimer un produit du panier" ........................... 76
Figure 20 Diagramme de paquetages[1]................................................................................................ 79
Figure 21 Diagramme de déploiement .................................................................................................. 80
Figure 22 Mongo DB compass ............................................................................................................... 85
Figure 23 Page d'accueil ........................................................................................................................ 93
Figure 24 Détails d'un produit ............................................................................................................... 94
Figure 25 Page panier ............................................................................................................................ 95

VII
 LISTE DES TABLEAUX

Tableau 1. Architecture des études correspondant au système LMD ...................................................... 9

Tableau 2. Liste des formations existantes à l’ENI ............................................................................... 10
Tableau 3: Débouchés professionnels éventuels des diplômés ............................................................. 16
Tableau 4 Moyens Humains .................................................................................................................. 22
Tableau 5 Moyens matériels.................................................................................................................. 22
Tableau 6 Diagramme de Gantt ............................................................................................................. 23
Tableau 7 Inventaire des moyens matériels........................................................................................... 26
Tableau 8 Solutions proposées .............................................................................................................. 27
Tableau 9 Méthode AGILE et traditionnelle ......................................................................................... 29
Tableau 10 langages de programmations .............................................................................................. 37
Tableau 11Choix de framework frontend............................................................................................. 39
Tableau 12 Choix de framework backend ............................................................................................. 44
Tableau 13 Choix de SGBD .................................................................................................................. 49
Tableau 14 Choix d'outils de modélisations .......................................................................................... 53
Tableau 15 Dictionnaires des données .................................................................................................. 57
Tableau 16 Identificateurs des acteurs .................................................................................................. 60
Tableau 17 Identifications des cas d'utilisations ................................................................................... 60
Tableau 18 Cas d'utilisation voir liste des produits ............................................................................... 61
Tableau 19 Cas d'utilisation ajouter au panier ....................................................................................... 62
Tableau 20 Cas d'utilisation supprimer un produit du panier ................................................................ 63

VIII
 LISTE DES ABREVIATIONS
2TUP : Two Track Unified Process
BDM : Business Development Manager
BTS : Brevet de Technicien Supérieur
CEO : Chief Executive Officer
CNH : Commission Nationale d’Habilitation
CPU : Central Processing Unit
CSRF : Cross-Site Request Forgery
CSS : Cascading Style Sheets
CSSF : Commission de Surveillance du Secteur Financier
CTO : Chief Technology Officer
CUR : Centre Universitaire Régional
DEA : Diplôme d’Etudes Approfondies
DI : Dependancies Injection
DOM : Document Object Model
DTS : Diplôme de Technicien Supérieur
DUT : Diplôme Universitaire de Technologie

ENI : Ecole Nationale d’Informatique

ESN : Entreprise de Services Numériques
GHz : Gigahertz
Go : Gigaoctet
HDR : Habilitation à Diriger des Recherches

HP : Hewlett Packard
HTML : HyperText Markup Language
IDE : Integrated Development Environment
L1 : Licence 1
L2 : Licence 2
L3 : Licence 3
LMD : Licence Master Doctorat
M1 : Master 1
M2 : Master 2
MIT : Massachusetts Institute of Technology

IX
MVC : Model View Controller
NIF : Numéro d’Identification Fiscale
ORM : Object-Relational Mapping
OS : Operating System
RAM : Random Access Memory
RG : Règle de gestion
SGBD : Système de Gestion de Base de Données
TCP/IP : Transmission Control Protocol / Internet Protocol

UML : Unified Modeling Language

UP : Unified Process
WPS : Word Programming System

X
III
 INTRODUCTION GENERALE

L'informatique est une discipline très large qui englobe de nombreux domaines, tels
que le développement de logiciels, la gestion de réseaux informatiques, la gestion de bases de
données, l'analyse de données, l'intelligence artificielle, la robotique et bien d'autres encore.

Ici on va présenter le module d’achat d’une application. L'achat peut se faire en ligne,
en utilisant un module d'achat intégré à une application. Un module d'achat est une partie
d'une application qui permet aux utilisateurs d’effectuer des achats en ligne de produits ou de
services. Cela peut inclure la sélection et l'ajout de produits au panier, la saisie des
informations de paiement, la vérification des disponibilités et la finalisation de l'achat.

Le module d'achat est généralement conçu pour être intuitif et facile à utiliser afin que
les utilisateurs puissent passer des commandes rapidement et sans frustration. Cependant, il
est important de s'assurer d’avoir les bons outils et de pratiquer une bonne méthode pour
concevoir l’application. Et choisir le langage de programmation adapté aux besoins.

Pour que cela puisse se faire nous allons divise ce mémoire en trois grandes parties. La
présentation générale, l’analyse et conception pour finir la partie réalisation.

1
PARTIE I : PRESENTATION GENERALE

2
 Chapitre 1. Présentation de l'Ecole Nationale d’Informatique
1.1. Information d’ordre général
L’Ecole Nationale d’Informatique, en abrégé ENI, est un établissement
d’enseignement supérieur rattaché académiquement et administrativement à l’Université de
Fianarantsoa.
Le siège de l’Ecole se trouve à Tanambao- Antaninarenina à Fianarantsoa.
L’adresse pour la prise de contact avec l’Ecole est la suivante : Ecole Nationale
d’Informatique (ENI) Tanambao, Fianarantsoa. Le numéro de sa boîte postale est 1487
avec le code postal 301. Téléphone : 034 05 733 36 ou 033 42 302 02. Son adresse
électronique est la suivante :
 site : www.eni.mg
 adresse e-mail : [email protected]

1.2. Missions et historique

L’ENI se positionne sur l’échiquier socio-éducatif malgache comme étant le plus
puissant secteur de diffusion et de vulgarisation des connaissances et des technologies
informatiques.

Cette Ecole Supérieure peut être considérée aujourd’hui comme la vitrine et la

pépinière des élites informaticiennes du pays.

L’Ecole s’est constituée de façon progressive au sein du Centre Universitaire Régional

(CUR) de Fianarantsoa.

De façon formelle, l’ENI était constituée et créée au sein du (CUR) par le décret
N° 83185 du 24 Mai 1983, comme étant le seul établissement Universitaire
Professionnalisé au niveau national, destiné à former des techniciens et des Ingénieurs de
haut niveau, aptes à répondre aux besoins et exigences d’Informatisation des entreprises,
des sociétés et des organes implantés à Madagascar.

L’ENI a pour conséquent pour mission de former des spécialistes informaticiens

compétents et opérationnels de différents niveaux notamment :

• En fournissant à des étudiants des connaissances de base en informatique ;

3
 • En leur transmettant le savoir-faire requis, à travers la professionnalisation des
formations dispensées et en essayant une meilleure adéquation des formations par
rapport aux besoins évolutifs des sociétés et des entreprises ;
• En initiant les étudiants aux activités de recherche dans les différents domaines
des technologies de l’information et de la communication (TIC).
L’implantation de cette Ecole Supérieure de technologie de pointe dans un pays en
développement et dans une Province (ou Faritany) à tissu économique et industriel
faiblement développé ne l’a pourtant pas défavorisée, ni empêchée de former des
spécialistes informaticiens de bon niveau, qui sont recherchés par les entreprises, les
sociétés et les organismes publics et privés sur le marché de l’emploi.

La filière de formation d’Analystes Programmeurs a été mise en place à l’Ecole en 1983,

et a été gelée par la suite en 1996, tandis que la filière de formation d’ingénieurs a été
ouverte à l’Ecole en 1986.

Dans le cadre du Programme de renforcement en l’Enseignement Supérieur

(PRESUP), la filière de formation des Techniciens Supérieurs en Maintenance des
Systèmes des informatiques a été mise en place en 1986 grâce à l’appui matériel et
financier de la Mission Française de coopération auprès de l’Ambassade de France à
Madagascar.

Une formation pour l’obtention de la certification CCNA et / ou NETWORK +

appelée « CISCO Networking Academy » a été créée à l’Ecole en 2002-2003 grâce au
partenariat avec CISCO SYSTEM et l’Ecole Supérieure Polytechnique d’Antananarivo
(ESPA). Cependant, cette formation n’avait pas duré longtemps.

Une formation de troisième cycle a été ouverte à l’Ecole a été ouverte à l’Ecole depuis
l’année 2003 – 2004 grâce à la coopération académique et scientifique entre l’Université de

Fianarantsoa pour le compte de l’ENI et l’Université Paul Sabatier de Toulouse (UPST).

Cette filière avait pour objectif de former certains étudiants à la recherche dans les
différents domaines de l’Informatique, et notamment pour préparer la relève des
Enseignants-Chercheurs qui étaient en poste.

4
 Pendant l’année 2007-2008, la formation en vue de l’obtention du diplôme de
Licence Professionnelle en Informatique a été mise en place à l’ENI avec les deux
options suivantes de formation :

- Génie Logiciel et base de Données ;

- Administration des Système et réseaux.

5
 La mise en place à l’Ecole de ces deux options de formation devait répondre au
besoin de basculement vers le système Licence – Master – Doctorat (LMD).

Mais la filière de formation des Techniciens Supérieurs en Maintenance des Systèmes

Informatiques a été gelée en 2009.

En vue de surmonter les difficultés de limitation de l’effectif des étudiants

accueillis à l’Ecole, notamment à cause du manque d’infrastructures, un système de «
Formation Hybride » a été mise en place à partir de l’année 2010. Il s’agit en effet d’un
système de formation semi présentielle et à distance avec l’utilisation de la
visioconférence pour la formation à distance. Le système de formation hybride a été ainsi
créé à Fianarantsoa ainsi qu’Université de Toliara.

1.3. Organigramme institutionnel de l’ENI

Cet organigramme de l’Ecole est inspiré des dispositions du décret N° 83-185 du 23
Mai 1983.

L’ENI est administrée par un conseil d’Ecole, et dirigée par un directeur nommé par un décret
adopté en conseil des Ministres.

Le Collège des enseignants regroupant tous les enseignants-chercheurs de l’Ecole est

chargé de résoudre les problèmes liés à l’organisation pédagogique des enseignements
ainsi que à l’élaboration des emplois du temps.

Le Conseil Scientifique propose les orientations pédagogiques et scientifiques de

l’établissement, en tenant compte notamment de l’évolution du marché de travail et de
l’adéquation des formations dispensées par rapport aux besoins des entreprises.

Trois départements de formation caractérisent l’organigramme :

- Le département de formation théorique à l’intérieur de l’Ecole ;

- Le département de formation pratique pour la coordination et la supervision
des stages en entreprise et des voyages d’études.
Le département de formation doctorale pour l’organisation de la formation de 3ème cycle.

La figure 1 présente l’organigramme actuel de l’Ecole.

6
 Conseil d'école

Conseil Direction
Collège des enseignants
Scientifique
Secrétariat Service
Principal Pédagogique

Parcours : Génie Logiciel et Base de

Service de scolarité
Données

Parcours : Administration des

Service de comptabilité
Systèmes et Réseaux

Service intendance Parcours : Informatique Générale

Figure 1. Organigramme de l’Ecole Nationale d’Informatique

Sur cet organigramme, l’Ecole placée sous la tutelle académique et administrative de

l’Université de Fianarantsoa, et dirigée par un Directeur élu par les Enseignants – Chercheurs
permanents de l’Etablissement et nommé par un décret pris en Conseil des ministres pour un
mandat de 3 ans.

 Le Conseil de l’Ecole est l’organe délibérant de l’Ecole.

 Le Collège des Enseignants propose et coordonne les programmes d’activités
pédagogiques.
 Le Conseil scientifique coordonne les programmes de recherche à mettre en œuvre à
l’Ecole.
 Le Secrétariat principal coordonne les activités des services administratifs (Scolarité,
Comptabilité, et Intendance).
Conformément aux textes en vigueur régissant les Etablissements malgaches
d’Enseignement Supérieur, qui sont barrés sur le système LMD, les Départements de
Formation pédagogique ont été ainsi remplacés par des Mentions et des parcours. Et les

7
chefs des Départements ont été ainsi remplacés par des responsables des mentions et les
responsables des parcours.

Un administrateur des Réseaux et Systèmes gère le système d’information de l’Ecole et

celui de l’Université.

1.4. Domaine de spécialisation

Les activités de formation et de recherche organisées à l’ENI portent sur les domaines
suivants :

- Génie logiciel et Base de Données ;

- Administration des Systèmes et Réseaux ;
- Informatique Générale ;
- Modélisation informatique et mathématique des Systèmes complexes.

D’une manière plus générale, les programmes des formations sont basés sur
l’informatique de gestion et sur l’informatique des Systèmes et Réseaux. Et les modules de
formation intègrent aussi bien des éléments d’Informatique fondamentale que des éléments
d’Informatique appliquée.

Le Tableau 1 décrit l’organisation du système de formation pédagogique de

l’Ecole.

Tableau 1 Organisation du système de formation pédagogique de l'école

Formation Théorique Formation Pratique

- Enseignement théorique - Etude de cas
- Travaux dirigés - Travaux de réalisation
- Travaux pratiques - Projets/ Projets tutoriels
- Voyages d’Etudes
- Stages en entreprise

1.5. Architecture des formations pédagogiques

Le recrutement des étudiants à l’ENI se fait uniquement par voie de concours
d’envergure nationale en première année.

8
 Les offres de formation organisées à l’Ecole ont été validées par la Commission

Nationale d’Habilitation (CNH) auprès du Ministères de l’Enseignement Supérieur et de

la Recherche Scientifique selon les dispositions de l’Arrêté N°31.174/2012-MENS en
date du 05 Décembre 2012.

Au sein de l’ENI, il existe une seule mention (INFORMATIQUE) et trois

parcours :

o Génie logiciel et Base de Données ;

o Administration des Systèmes et Réseaux ;
o Informatique Générale
L’architecture des études à trois niveaux conforment au système Licence- Master-
Doctorat (LMD) permet les comparaisons et les équivalences académiques des diplômes
au niveau international.

• L = Licence (Bac + 3) = L1, L2, L3 = 6 semestres S1 à S6

• M = Master (Bac + 5) = M1, M2 = 4 semestres S7 à S10
Le diplôme de licence est obtenu en 3 années des études après Baccalauréat. Et le
diplôme de Master est obtenu en 2 ans après obtenu du diplôme de LICENCE.
Le MASTER PROFESSIONNEL est un diplôme destiné à la recherche emploi au
terme des études.

Le MASTER RECHERCHE est un diplôme qui remplace l’ancien Diplôme

d’Etudes Approfondies (DEA), et qui permet de s’inscrire directement dans une
Ecole Doctorale.au terme des études.

• D = Doctorat (Bac +8)

Le Doctorat est un diplôme qu’on peut obtenir en 3 ans après l’obtention du diplôme
de

MASTER RECHERCHE.

Le tableau 2 présente l’architecture des études correspondant au système LMD.

Tableau 1. Architecture des études correspondant au système LMD

9
 BTS : Brevet de Technicien Supérieur

DUT : Diplôme Universitaire de Technicien

La licence peut avoir une vocation générale ou professionnelle.

Le master peut avoir une vocation professionnelle ou de recherche.

Tableau 2. Liste des formations existantes à l’ENI

FORMATION EN

LICENCE MASTER
PROFESSIONNELLE ET

HYBRIDE

Condition Par voie de concours

d’admissio
Formation
n
Professionnelle : 100 candidats

Formation hybride : 150

candidats

10
Condition Bac de série C, D ou Technique Etre titulaire de licence
d’accès professionnelle

Durée de 3 années 2 années

formation

Diplôme à Diplôme de Licence Diplôme de Master

délivrer Professionnelle en Informatique Professionnel

Diplôme de Master
Recherche

11
 L’accès en première année de MASTER se fait automatiquement pour les étudiants de
l’Ecole qui ont obtenu le diplôme de Licence Professionnelle.

Le Master Recherche permet à son titulaire de poursuivre directement des études en

doctorat et de s’inscrire directement dans une Ecole Doctorale.

Les Ecoles Doctorales jouissent d’une autonomie de gestion par rapport aux Etablissements
de formation universitaire.

Il convient de signaler que par arrêté ministériel N° 21.626/2012 – MESupRES publié le

9 Août 2012 par la Commission National d’habilitation (CNH), l’Ecole Doctorale «
Modélisation – Informatique » a été habilitée pour l’Université de Fianarantsoa.

Depuis l’année universitaire 2010-2011, l’ENI s’est mise à organiser des

formations hybrides en informatique dans les différentes régions (Fianarantsoa, Toliara)
en raison de l’insuffisance de la capacité d’accueil des infrastructures logistiques.

En effet, le système de formation hybride semi - présentielle utilise la

visioconférence pour la formation à distance.

Bien qu’il n’existe pas encore au niveau international de reconnaissance écrite et formelle
des diplômes délivrés par l’ENI, les étudiants diplômés de l’Ecole sont plutôt bien
accueillis dans les instituts universitaires étrangères (CANADA, Suisse, France…)

1.6. Relations de l’ENI avec les entreprises et les organismes

Les stages effectués chaque année par les étudiants mettent l’Ecole en rapport
permanent avec plus de 300 entreprises et organismes publics, semi-publics et privés,
nationaux et internationaux.
L’Ecole dispose ainsi d’un réseau d’entreprises, de sociétés et d’organismes publics et
privés qui sont des partenaires par l’accueil en stage de ses étudiants, et éventuellement
pour le recrutement après l’obtention des diplômes par ces derniers.
Les compétences que l’Ecole cherche à développer chez ses étudiants sont l’adaptabilité,
le sens de la responsabilité, du travail en équipe, le goût de l’expérimentation et
l’innovation.
En effet, la vocation de l’ENI est de former des techniciens supérieurs de niveau
LICENCE et des ingénieurs de type généraliste de niveau MASTER avec des qualités

12
scientifiques, techniques et humaines reconnues, capables d’évoluer professionnellement
dans des secteurs d’activité variés intégrant l’informatique.
Les stages en milieu professionnel permettent de favoriser une meilleure adéquation entre les
formations à l’Ecole et les besoins évolutifs du marché de l’emploi.
Les principaux débouchés professionnels des diplômés de l’Ecole concernent les
domaines suivants :
✔ L’informatique de gestion d’entreprise
✔ Les technologies de l’information et de la communication (TIC)
✔ La sécurité informatique des réseaux
✔ L’administration des réseaux et des systèmes
✔ Les services bancaires et financiers, notamment le Mobile Banking
✔ Les télécommunications et la téléphonie mobile
✔ Les Big Data
✔ Le commerce, la vente et l’achat, le Marketing
✔ L’ingénierie informatique appliquée
✔ L’écologie et le développement durable Parmi les sociétés, entreprises et organismes
partenaires de l’Ecole, on peut citer : ACCENTURE Mauritius, Air Madagascar,
Ambre Associates, Airtel, Agence Universitaire de la Francophonie (AUF), B2B,
Banque Centrale, BFG-SG, BIANCO, BLUELINE, CNaPS, Bureau National de
Gestion des Risques et des Catastrophes (BNGRC), CEDII-Fianarantsoa,
Data Consulting, Central Test, Centre National Antiacridien, CNRE, CHU, CNRIT,
COLAS, Direction Générale des Douanes, DLC, DTS/Moov, FID, FTM, GNOSYS,
IBONIA, INGENOSIA, INSTAT, IOGA, JIRAMA, JOUVE, MADADEV, MAEP,
MEF, MEN, MESupRES, MFB, MIC, MNINTER, Min des postes/Télécommunications
et du Développement Numérique, NEOV MAD, Ny Havana, Madagascar National Parks,
OMNITEC, ORANGE, OTME, PRACCESS, QMM Fort-Dauphin, SMMC, SNEDADRS
Antsirabe, Sénat, Société d’Exploitation du Port de Toamasina (SEPT), SOFTWELL,
Strategy Consulting, TELMA, VIVETEC, Société LAZAN’I BETSILEO, WWF …
L’organisation de stage en entreprise continue non seulement à renforcer la
professionnalisation des formations dispensées, mais elle continue surtout à accroître de
façon exceptionnelle les opportunités d’embauche pour les diplômés de l’Ecole.

1.7. Partenariat au niveau international

Entre 1996 et 1999, l’ENI avait bénéficié de l’assistance technique et financière de la
Mission Française de Coopération et d’action culturelle dans le cadre du Programme de

13
Renforcement de l’Enseignement Supérieur (PRESUP) consacré à l’Ecole a notamment
porté sur :
• Une dotation en logiciels, micro-ordinateurs, équipements de laboratoire de
maintenance et de matériels didactiques
• La réactualisation des programmes de formation assortie du renouvellement du fonds
de la bibliothèque
• L’appui à la formation des formateurs
• L’affectation à l’Ecole d’Assistants techniques français
De 2000 à 2004, l’ENI avait fait partie des membres du bureau de la Conférence
Internationale des Ecoles de formation d’Ingénieurs et Technicien d’Expression
Française (CITEF).
Les Enseignants-Chercheurs de l’Ecole participent régulièrement aux activités organisées
dans le cadre du Colloque Africain sur la Recherche en Informatique (CARI).
L’ENI avait également signé un accord de coopération interuniversitaire avec l’Institut
de Recherche en Mathématiques et Informatique Appliquées (IREMIA) de l’Université
de la Réunion, l’Université de Rennes 1, l’INSA de Rennes, l’Institut National
Polytechnique de Grenoble (INPG).
A partir du mois de Juillet 2001, l’ENI avait abrité le Centre de Réseau Opérationnel
(Network Operating Center) du point d’accès à Internet de l’Ecole ainsi que de
l’Université de Fianarantsoa. Grâce à ce projet américain qui a été financé par l’USAID
Madagascar, l’ENI de l’Université de Fianarantsoa avait été dotées d’une ligne
spécialisée d’accès permanent au réseau Internet.
L’ENI avait de même noué des relations de coopération avec l’Institut de Recherche pour le
Développement (IRD).
L’objet du projet de coopération avait porté sur la modélisation environnementale du
Corridor forestier de Fandriana jusqu’à Vondrozo (COFAV). Dans ce cadre, un atelier
scientifique international avait été organisé à l’ENI en Septembre 2008. Cet atelier
scientifique avait eu pour thème de modélisation des paysages.
Et dans le cadre du programme scientifique PARRUR, l’IRD avait financé depuis 2010
le projet intitulé « Forêts, Parcs et Pauvreté dans le Sud de Madagascar (FPPSM). Des
étudiants en DEA et des Doctorants issus de l’ENI avaient participé à ce Programme.
Par ailleurs, depuis toujours la même année 2010, l’ENI de Fianarantsoa avait été
sélectionnée pour faire partie des organismes partenaires de l’Université de Savoie dans
le cadre du projet TICEVAL relatif à la certification des compétences en TIC ;

14
Le projet TICEVAL avait été financé par le Fonds Francophone des Inforoutes pour la
période allant de 2010 à 2012, et il avait eu pour objectif de généraliser la certification
des compétences en Informatique et Internet du type C2i2e et C2imi.
Dans le cadre du projet TICEVAL, une convention de coopération avec l’Université de
Savoie avait été signée par les deux parties concernées. La mise en œuvre de la
Convention de Coopération avait permis d’envoyer des étudiants de l’ENI à Chambéry
pour poursuivre des études supérieures en Informatique.
Enfin et non des moindres, l’ENI avait signé en Septembre 2009 un protocole de
collaboration scientifique avec l’ESIROI – STIM de l’Université de la Réunion.
Comme l’ENI constitue une pépinière incubatrice de technologie de pointe, d’emplois et
d’entreprises, elle peut très bien servir d’instrument efficace pour renforcer la croissance
économique du pays, et pour lutter contre la Pauvreté.
De même que le statut de l’Ecole devrait permettre de renforcer la position concurrentielle de
la Grande Ile sir l’orbite de la modélisation grâce au développement des nouvelles
technologies.

1.8. Débouchés professionnels avec des diplômés

Le chômage des jeunes diplômés universitaires fait partie des maux qui gangrènent
Madagascar. L’environnement socio-politique du pays depuis 2008 jusqu’ à ce jour a fait que
le chômage des diplômés est devenu massif par rapport aux établissements de formation
supérieure existants.
Cependant, les formations proposées par l’Ecole permettent aux diplômés d’être
immédiatement opérationnels sur le marché du travail avec la connaissance d’un métier
complet lié à l’informatique aux TIC.
L’Ecole apporte à ses étudiants un savoir-faire et un savoir-être qui les accompagnent tout au
long de leur vie professionnelle. Elle a une vocation professionnalisante.
Les diplômés en LICENCE et en MASTER issus de l’ENI peuvent faire carrière dans
différents secteurs.
L’Ecole bénéficie aujourd’hui de 34 années d’expériences pédagogiques et de
reconnaissance auprès des sociétés, des entreprises et des organismes. C’est une Ecole
Supérieure de référence en matière informatique.
Par conséquent, en raison de fait que l’équipe pédagogique de l’Ecole est
expérimentée, les enseignants-chercheurs et les autres formateurs de l’Ecole sont dotés
d’une grande expérience dans l’enseignement et dans le milieu professionnel.

15
 L’Ecole est fière de collaborer de façon régulière avec un nombre croissant
d’entreprises, de sociétés et d’organismes publics et privés à travers les stages des
étudiants. Les formations dispensées à l’Ecole sont ainsi orientées vers le besoin et les
attentes des entreprises et des sociétés.
L’Ecole fournit à ses étudiants de niveau LICENCE et MASTER des compétences
professionnelles et métiers indispensables pour les intégrer sur le marché du travail.
L’Ecole s’efforce de proposer à ses étudiants une double compétence à la fois
technologique et managériale combinant l’informatique de gestion ainsi que
l’administration des réseaux et systèmes.

D’une manière générale, les diplômés de l’ENI n’éprouvent pas de difficultés

particulières à être recrutés au terme de leurs études. Cependant, l’ENI recommande à ses
diplômés de promouvoir l’entrepreneuriat en TIC et de créer des cybercafés, des SSII ou
des bureaux d’études.

Tableau 3: Débouchés professionnels éventuels des diplômés

LICENCE - Analyste
- Programmeur
- Administrateur de site web/de
portail web
- Assistant informatique et internet
- Chef de projet web ou multimédia
- Développeur Informatique ou
multimédia
- Intégrateur web ou web designer
- Hot liner/Hébergeur Internet
- Agent de référencement
- Technicien/Supérieur de help desk
sur Informatique
- Responsable de sécurité web
- Administrateur de réseau
MASTER - Administrateur de réseau et
système
- Architecture de système
d’information
- Développeur d’applications
- Ingénieur réseau
- Webmaster/web designer
- Concepteur Réalisateur

16
 d’applications
- Directeur du système de formation
- Directeur de projet informatique
- Chef de projet informatique
- Responsable de sécurité
informatique
- Consultant ou freelance

1.9. Ressources humaines

• Directeur de l’Ecole : Docteur MAHATODY Thomas, Docteur HDR
• Responsable de Mention : Monsieur RABETAFIKA Louis Haja, Maître de
Conférences
• Responsable de Parcours « Génie Logiciel et Base de Données » : Monsieur
RALAIVAO Jean Christian, Assistant d’Enseignement Supérieur et de Recherche
• Responsable de Parcours « Administration Systèmes et Réseaux » : Monsieur SIAKA,
Assistant d’Enseignement Supérieur et de Recherche
• Responsable de Parcours « Informatique Générale » : Monsieur GILANTE Gesazafy,
Assistant d’Enseignement Supérieur et de Recherche
• Nombre d’Enseignants permanents : 12 dont un (01) Professeur Titulaire, deux (02)
Professeurs, cinq (05) Maîtres de Conférences et quatre (04) Assistants
d’Enseignement Supérieur et de Recherche
• Nombre d’Enseignants vacataires : 10
Personnel Administratif : 23

17
 Chapitre 2. Présentation de la société d’accueil
2.1. Historique de RELIA
RELIA est une entreprise de service numérique spécialisée dans le développement
web, mobile et logiciel sur mesure.

Relia visionne de devenir une ESN de référence à Madagascar en vivant dans la valeur
de partage, proximité et excellence au sein de son équipe en interne ainsi que ses clients et
partenaires.

Chez RELIA nous travaillons avec des clients locaux ainsi que des clients partout dans
le monde. Parmi ses visions, RELIA envisage de divulguer la technologie dans tous les
domaines à Madagascar comme l’Education, la santé, le commerce, le transport, l’hôtellerie et
tourisme... etc.

Si jeune qu’elle soit, née en 2020, RELIA a connu une forte croissance dû à ses succès
auprès des clients et les valeurs partagés en interne avec ses collaborateurs. La société compte
actuellement une trentaine de collaborateurs .

2.2. Situation géographique de RELIA

RELIA se situe à Ambohimiandra, Antananarivo Madagascar. Elle est limitée, au Sud
par Ambanidiha, au Nord-Est par Mandroseza et au Nord-Ouest par Mahazoarivo.

Figure 2: Localisation de RELIA

18
 2.3. Mission de RELIA
Relia a pour but de :

- Apporter de nouvelles technologies dans tous les domaines à Madagascar d’ici 5 ans

- Se développer au niveau international pour pérenniser l’entreprise

- Créer des sites web, applications et logiciels selon les demandes existantes

2.4. Organisation et fonctionnement de RELIA

RELIA est une entreprise en phase de startup. Néanmoins, elle est déjà composée de
plusieurs équipes de développeurs expérimentés, et suit la méthodologie AGILE pour gérer
les projets.

Elle fonctionne en suivant les principes suivants :

 Les individus et les interactions, plus que les outils et les processus ;

 Des logiciels opérationnels, plus qu’une documentation exhaustive ;

 La collaboration avec le client, plus que la négociation contractuelle ;

 L’adaptation au changement, plus que le suivi d’un plan ;

Ces principes mettent en avant la valeur du produit délivré au client, ainsi que la
relation.

Il existe des animateurs et qui facilitent la communication avec le client, et qui sont
chargés de résoudre les problèmes de compréhension entre les deux entités. De courtes
réunions se font régulièrement pour valider les avancées et communiques la progression du
projet selon des termes acceptables.

Les rôles sont repartis pour assurer le bon fonctionnement de l’entreprise, et des
projets qu’elle reçoit. Il y a les responsables de la compréhension, de l’adhésion et de la mise
en œuvre de la méthode appropriée applicable aux divers projets. Ils veillent à ce que les
principes et les valeurs de la méthode suivie soient respectés. Ils facilitent la communication
au sein de l’équipe et cherchent à maximise la productivité.

Les propriétaires de projets qui portent la vision du produit à réaliser. Ils travaillent en
interaction avec l’équipe de développement qui doit suivre leurs instructions. C’est eux qui
établissent la priorité des fonctionnalités à développer ou à corriger, et qui valident les
fonctionnalités terminées.

19
Les équipes de développement qui se chargent de réaliser les demandes exprimées par les
propriétaires de projets

20
 Chapitre 3. Description du projet

3.1. Formulation
Une super application est une application qui propose un large éventail de fonctionnalités et
de services. Le module achat d’une super application est une fonctionnalité qui permet aux
utilisateurs d’acheter un produit ou des services en ligne, directement vers l’application.

3.2. Objectif et besoins de l'utilisateur

On va regarder le but qui a poussé à la réalisation du projet.
3.2.1. Objectif du projet
L’objectif de créer une module d’achat dans une super application est de permettre aux
utilisateurs d’acheter en ligne des produits ou des services. C’est très pratique pour les
utilisateurs, qui n’ont toujours pas le temps ou la possibilité de se rendre en magasin.

3.2.2. Besoins fonctionnels

Les besoins fonctionnels représentent les fonctionnalités que le système doit avoir pour
satisfaire les utilisateurs. Les fonctionnalités sont :

 Explorer les produits : voir les produits récemment ajoutes, les produits qui peuvent
intéresser les utilisateurs, voir les détails d’un produit et les informations sur le produit
sélectionne.
 Ajouter un produit au panier en un seul clic.
 Supprimer un produit du panier.
 Voir le nombre total de produits au panier.
 Voir le montant total du produit au panier.

3.2.3. Besoin non fonctionnels

Les besoins non fonctionnels sont des exigences qui ne concernent pas l’application
directement. Mais c’est tout de même important des savoirs :

 L’application doit être facile à comprendre et à manipuler pour les utilisateurs même
pour ce qui n’ont pas encore des notions sur l’application.
 L’application doit être rapide et performante.
 L’application doit être sécurise.
 L’application doit avoir de l’esthétique, agréable à manipuler.

21
 3.3. Moyens nécessaires à la réalisation du projet
Pour la réalisation du projet ; on dispose des moyens humains, matériels et logiciels afin
qu’on puisse répondre aux attentes des utilisateurs

3.3.1. Moyen humains

Nous avons besoin de quelques moyens humains pour la réalisation des projets qui figurent
dans le tableau 5

Tableau 4 Moyens Humains

Désignation Rôles
Encadreur professionnel Qui est le chef de projet chargé de mener le
projet et de gérer son bon fonctionnement

Product Owner (PO) Qui est le chef de projet en mode agile qui
supervise et coordonne le développement.
Stagiaire Concepteur et réalisateur du projet en
analysant, en étudiant et en ensuite en le
développant.

3.3.2. Moyens matériels

Le tableau 6 représente le matériel informatique utilisé comme moyen matériels pour la
réalisation du projet :

Tableau 5 Moyens matériels

Marque Processeur RAM HDD Système

d’exploitation
LENOVO y50 Intel(R) 8192MB 929Go Windows 10
Core(TM) i5- 64 bits
4200h CPU
@2.80GHz (4
CPUs)

3.3.3. Moyens logiciels

Plusieurs logiciels ont été utilisés durant le développement du projet :

- IDE : Visual Studio Code version 1.71.2

- Outils de modelisation : Visual paradigme
- Git version 2.31.0
- Mongo DB version 6.0.2

22
 - Node 14.20.1
- Next
- Nest

3.4. Résultats attendus

L’application doit répondre aux attentes suivantes :

 Une bonne navigation sur l’exploration des produits

 Avoir une interface sur le détail d’un produit sélectionné
 Avoir une interface du panier

3.5. Chronogramme du projet

Le tableau représente le chronogramme de travail sous forme de diagramme de Gantt

Tableau 6 Diagramme de Gantt

Tâche Durée (jours) Début Fin

Acceuil et formation 16 19/09/2022 02/10/2022
Sprint 0, analyse des 14 03/10/2022 14/10/2022
besoins et conception
de l’application
Mise en place des 5 17/10/2022 23/10/2022
environnements de
développements
Sprint planing 2 24/10/2022 26/10/2022
meeting
Réalisation du sprint 12 27/10/2022 11/11/2022
1
Rétrospective des 2 14/11/2022 15/11/2022
points positifs et
points faibles du
sprint 1 et sprint
planing meeting 2
Réalisation du sprint 11 16/11/2022 29/11/2022
2

23
Rétrospective des 3 30/11/2022 01/12/2022
points positifs et
points faibles du
sprint 1 et sprint
planing meeting 2
Réalisation du sprint 11 02/12/2022 16/12/2022
2
points faibles du 2 19/12/2022 20/12/2022
sprint 1 et sprint
planing meeting 2
Maintenance et 2 18/12/2022 19/12/2022
validation

24
PARTIE II : ANALYSE ET CONCEPTION

25
 Chapitre 4. Analyse préalable
4.1. Analyse de l'existant
L’analyse de l’existant consiste à étudier et à évaluer les éléments existants qui ont un
lien avec le projet.

4.1.1. Organisation actuelle

Il y a de nombreux sites e-commerce qui proposent une grande variété de produits. Les sites
e-commerce sont de plus en plus populaires car ils permettent aux gens de faire des achats en
ligne.

4.1.2. Inventaire des moyens matériels et logiciels

4.1.2.1. Inventaire des moyens matériels
Le tableau 7 représente les moyens utilisés par les utilisateurs du module achat de la super
application.

Tableau 7 Inventaire des moyens matériels

Utilisateurs Caractéristiques Nombres

Clients -Ordinateur bureau ou 1
portable ayant un navigateur
web
-Connexion internet
-Intel(R) core(TM) i5 @
2,53GHz
-RAM 8Go
-système d’exploitation
windows
4.1.2.2. Inventaire des moyens logiciels

Les moyens logiciels consistent sur des matériels utilisés pour le déploiement.
SGBD : Mongo DB

Environnement de développement : Visual Studio Code

Navigateurs : Microsoft Edge, Google Chrome

Outils de conception : Visual Paradigm

Système d’exploitation : Windows 21H2

26
 4.2. Critique de l'existant

Il existe déjà plusieurs sites e-commerce qui proposent des achats en ligne. Mais parfois le
processus d’achat est longue et ne donne pas les produits que l’on veut voir vraiment. Et qui
ne sont pas accessible pour tous.
Points forts : Accessibilité, pratique (les utilisateurs n’ont pas besoin de se déplacer)
Point faibles : Manque de contact physique, manipulation du site difficile

4.3. Conception avant-projet

4.3.1. Proposition de solution

Deux possibilités pour y remédier et résoudre le problème :

 Utilisation d’une application déjà existant.
 Conception et réalisation du module achat d’une super application

4.3.1.1. Solution retenu et justification

Le tableau 8 représente la comparaison des deux solutions par rapport aux besoins des
utilisateurs.
Tableau 8 Solutions proposées

Solution Avantages Inconvénients

Solution 1 -peut assurer un bon nombre -concurrence vive
de fonctionnalités -processus longue
-un site déjà opérationnel qui -peut avoir des problèmes de
peut être utilise sécurités
Solution 2 -peut répondre aux attentes -beaucoup de temps pour
des utilisateurs. pouvoir la mettre en place
-facilite la manipulation -conçu et réalisé par peu de
-facilite la mise à jour en cas personne
d’une nouvelle fonctionnalité

Sur le tableau, les deux solutions ont des avantages et des inconvénients. On constate que la
solution 2 serait plus envisageable pour résoudre les problèmes « La conception et réalisation

27
du module d’achat d’une super application ». Avoir une application qui sera mieux que les
antécédents.

4.3.2. Méthodes et outils proposes

Il est nécessaire de pratiquer une bonne méthode pour bien concevoir l’application et savoir
utiliser les bons outils à la réalisation du projet.

4.3.2.1. Choix de la méthodologie de gestion du projet

La gestion du projet joue un rôle important dans la réalisation de ce dernier. Durant le
développement on a utilisé la méthode AGILE pour la gestion de projet.

Présentation de la méthode AGILE [1]

Aucune source spécifiée dans le document actif.
AGILE est une méthode de développement de logiciel qui met l’accent sur la
flexibilité, la collaboration et la livraison continue.

Elle a été développée dans les années 1990 en réponses aux méthodes plus rigides de
développement de logiciels telles que la méthode en cascade.

AGILE repose sur quelques principes fondamentaux, tels que :

 Les individus et les interactions sont plus importants que les processus et les outils
 Les logiciels fonctionnels sont plus importants que la documentation exhaustive
 La collaboration avec les clients est essentielle
 Les changements de besoins sont naturels et bienvenus, même tars dans le
développement
 Les projets se déroulent en cycles de développement rapides, appelés sprints

Il existe plusieurs framework d’implémentation pour la méthode Agile, dont les plus
connus sont Scrum, Kanban, Lean Developement… Chacun de ces frameworks met en
place des pratiques et des rôles spécifiques pour aider les équipes à travailler de manière
Agile. Cette approche permet aux equipes de s’adapter rapidement aux changements de
besoins et aux incertitudes, tout en garantissant que les utilisateurs finaux ont un logiciel
opérationnel dès que possible.

28
 Agile et modélisation

Les processus agiles et la modélisation sont :

 L’utilisation d’UML ;

 La modélisation vise avant tout à comprendre et à communiquer ;

 La modélisation pour les parties inhabituelles, difficiles ou délicates de la

conception ;

 La modélisation en groupe ;

 Les outils simples et adaptés aux groupes ;

 Les développeurs créent les modèles de conception qu’ils développeront.

Comparaison entre méthode agile et méthode traditionnelle

Tableau 9 Méthode AGILE et traditionnelle

Thème Approche traditionnelle Approche agile

En cascade ou en V, sans Itératif et incrémental.
Cycle de vie rétroaction possible, Phases
séquentielles.

Prédictive, caractérisée par Adaptative avec plusieurs

Planification des plans plus ou moins niveaux de planification
détaillés sur la base d’un (macro et micro-
périmètre et d’ planification) avec
Exigences définies et stables ajustements si nécessaires au
au début du projet. fil de l’eau en fonction des
changements survenus.

Produite en quantité Réduite au strict nécessaire

Documentation importante comme support au profit d’incréments
de communication, de fonctionnels opérationnels
validation et de pour obtenir le feedback du
contractualisation. client.

Une équipe avec des Une équipe responsabilisée

Équipe ressources spécialisées, où l’initiative et la
dirigées par un chef de communication sont
projet. privilégiées, soutenue par le
chef de projet.

29
Thème Approche traditionnelle Approche agile

Contrôle qualité à la fin du Un contrôle qualité précoce

Qualité
cycle de développement. Le et permanent, au niveau du
client découvre le produit produit et du processus. Le
fini. client visualise les résultats
tôt et fréquemment.

Résistance voire opposition Accueil favorable au

Changement au changement. Processus changement inéluctable,
lourds de gestion des intégré dans le processus.
changements acceptés.

Mesure de la conformité aux Un seul indicateur

Suivi de l’avancement plans initiaux. Analyse des d’avancement : le nombre de
écarts. fonctionnalités
implémentées et le travail
restant à faire.

Processus distinct, Gestion des risques intégrée

Gestion des risques rigoureux, de gestion des dans le processus global,
risques. avec responsabilisation de
chacun dans l’identification
et la résolution des risques.
Pilotage par les risques.

Respect des engagements Satisfaction client par la

Mesure du succès initiaux en termes de coûts, livraison de valeur ajoutée.
de budget et de niveau de
qualité.

On a choisi la méthode agile Scrum pour satisfaire les clients en leurs donnant une bonne
qualité de développement.

Scrum est un framework d'implémentation de la méthode AGILE qui est largement

utilisé pour gérer les projets de développement de logiciels. Il met en place une structure de
gestion de projet qui permet aux équipes de travailler de manière collaborative et efficace,
tout en livrant régulièrement des versions incrémentielles du logiciel.

Les principaux éléments de Scrum comprennent :

 Le Product Owner : Il est responsable de définir les besoins et les objectifs du projet,
de prioriser les fonctionnalités à développer et de décider de la livraison.

30
 L'équipe de développement : C'est l'équipe qui est chargée de développer le logiciel.
Elle est composée d'un ensemble de compétences diverses, telles que les
développeurs, les testeurs, les designers, etc.
 Le Scrum Master : Il est chargé de faciliter la mise en œuvre de Scrum au sein de
l'équipe, de résoudre les problèmes qui pourraient perturber l'avancement du projet et
de garantir que les règles de Scrum sont respectées.
 Sprint : Période de temps fixe (généralement entre 1 à 4 semaines) pendant lequel
l'équipe travaille sur une sélection de fonctionnalités pour livrer une version
incrémentielle.
 Réunion quotidienne de l'équipe : Une courte réunion quotidienne au cours de laquelle
les membres de l'équipe se réunissent pour discuter de leur avancement, de leurs
blocages et de leurs besoins en termes de ressources.
 Réunion de planification : Réunion qui se déroule en début de sprint et au cours de
laquelle l'équipe planifie les fonctionnalités à développer pendant le sprint à venir.
 Réunion de revue : Réunion qui se déroule en fin de sprint et au cours de laquelle
l'équipe présente les fonctionnalités développées pendant le sprint et recueille les
commentaires des clients.
 Réunion de rétrospective : Réunion qui se déroule en fin de sprint et au cours de
laquelle l'équipe discute de ce qui s'est bien passé et de ce qui a moins bien fonctionné
pendant le sprint et décide des actions à prendre pour améliorer les processus.

Figure 3 Méthode Agile

31
 4.3.2.2. Choix de méthode de conception
Une méthode de conception est un procédé permettant de construire un modèle le plus
correct et efficacement possible. Une méthode d’analyse et de conception a pour objectif
de permettre de formaliser les étapes préliminaires du développement d’un système
d’information afin de rendre le développement plus fidèle aux besoins du client.

Méthode Avantages Inconvénients

2TUP  Processus oriente  Plutôt superficielle
sur les
objet
phases situées en
 Itérative, incrémental amont et en
aval du
 Fait une large place à développement :
la technologie et à la Capture des besoins,
support,
gestion des risques maintenance, gestion
 flexibilité du
changement, …
 Complexité
MERISE  Base sur un modèle  Non orienté objet
de donnée simple et  Rigidité (pour les
facile à comprendre projets de grande
 Méthode orientée envergure)
fonction  Prend beaucoup de
temps pour la
modélisation et la
description des
données

Nous avons utilisé 2TUP car elle est souvent utilisée pour les projets de grande envergure et
de haute complexité, il peut être adapté selon les besoins, et il est crucial de bien évaluer si
l'utilisation de cette méthode est la plus adaptée pour les projets de l'entreprise.

Présentation de 2TUP

Il s'agit d’une méthode de développement de logiciels qui est basé sur l'UP (Unified Process)
qui ajoute une seconde voie parallèle à celle de l'équipe de développement. Cette seconde

32
voie se concentre sur l'exploration de nouvelles idées et la recherche de nouvelles
opportunités pour le projet.

En suivant les deux chemins simultanément, le 2TUP permet aux entreprises de mieux
répondre aux besoins changeants des clients, de mieux anticiper les tendances et les
opportunités futures, et de maximiser les avantages de l'équipe de développement, tout en
maintenant un haut niveau de qualité dans le produit final. Il renforce également le contrôle
sur les capacités d’évolution et de correction des systèmes d'information de l'entreprise, afin
de mieux gérer les contraintes de changement continuel imposées.

Figure 6 représente le processus de développement en Y. [1]

Figure 4 Le processus de développement en Y

La branche gauche (fonctionnelle) comporte :

La capture des besoins fonctionnels, qui produit un modèle des besoins

focalisé sur le métier des utilisateurs. Elle qualifie au plus tôt le risque de produire un
système inadapté aux utilisateurs. De son côté, la maîtrise d’œuvre consolide les

33
 spécifications et en vérifie la cohérence et l’exhaustivité l’analyse, qui consiste à
étudier précisément la spécification fonctionnelle de manière à obtenir une idée de ce
que va réaliser le système en termes de métier. Les résultats de l’analyse ne dépendent
d’aucune technologie particulière.

La branche droite (architecture technique) comporte :

La capture des besoins techniques, qui recense toutes les contraintes et les
choix dimensionnant la conception du système. Les outils et les matériels sélectionnés
ainsi que la prise en compte de contraintes d’intégration avec l’existant conditionnent
généralement des prérequis d’architecture technique ;
La conception générique, qui définit ensuite les composants nécessaires à la
construction de l’architecture technique. Cette conception est la moins dépendante
possible des aspects fonctionnels. Elle a pour objectif d’uniformiser et de réutiliser les
mêmes mécanismes pour tout un système.

L’architecture technique construit le squelette du système informatique et écarte la plupart des

risques de niveau technique. L’importance de sa réussite est telle qu’il est conseillé de réaliser
un prototype pour assurer sa validité.

La branche du milieu comporte :

La conception préliminaire, qui représente une étape délicate, car elle intègre le
modèle d’analyse dans l’architecture technique de manière à tracer la cartographie des
composants du système à développer ;
La conception détaillée, qui étudie ensuite comment réaliser chaque composant ;
L’étape de codage, qui produit ces composants et teste au fur et à mesure les unités de
code réalisées ;
L’étape de recette, qui consiste enfin à valider les fonctions du système développé.

2TUP et UML

Il nous paraît difficile d’envisager le processus 2TUP sans recourir à UML comme
support.
Certes, les concepts présentés jusqu’à présent ne sont pas spécifiquement liés à une notation
particulière. Nous avons cependant omis de préciser le rôle central et fondamental de la
modélisation objet tout au long du développement d’une solution logicielle.

34
 Le recours à la modélisation est depuis longtemps une pratique indispensable au
développement, car un modèle est prévu pour anticiper les résultats du développement.

Un modèle est en effet une abstraction du résultat, dont le but est de documenter, de
prévoir, d’étudier, de collecter ou d’estimer les informations d’un système.

Associé au processus de développement, un modèle représente la vue sur une

spécification ou sur une solution de système, pris à un niveau de détail pertinent pour
exprimer ou concevoir la cible de l’étape en cours.

Le modèle sert donc des objectifs différents suivant l’étape de développement et sera
construit avec des points de vue de plus en plus détaillés.

Le modèle en tant qu’abstraction d’un système s’accorde parfaitement bien avec le

concept orienté objet. L’objet représente en effet l’abstraction d’une entité utilisée dans le
système en analyse, puis le modèle d’un composant de solution logicielle en conception. La
correspondance est encore plus flagrante, et le modèle encore plus précis, lorsque les outils
de développement sont eux-mêmes orientés objet. Aujourd’hui, le standard industriel de
modélisation objet est UML.

Présentation d’UML

UML se définit comme un langage de modélisation graphique et textuel destiné à

comprendre et décrire des besoins, spécifier et documenter des systèmes, esquisser des
architectures logicielles, concevoir des solutions et communiquer des points de vue.

UML unifie à la fois les notations et les concepts orientés objet. Il ne s’agit pas d’une
simple notation, mais les concepts transmis par un diagramme ont une sémantique précise et
sont porteurs de sens au même titre que les mots d’un langage. UML a une dimension
symbolique et ouvre une nouvelle voie d’échange de visions systémiques précises. Ce
langage est certes issu du développement logiciel, mais pourrait être appliqué à toute science
fondée sur la description d’un système. Dans l’immédiat, UML intéresse fortement les
spécialistes de l’ingénierie système.

UML unifie également les notations nécessaires aux différentes activités d’un
processus de développement et offre, par ce biais, le moyen d’établir le suivi des décisions
prises, depuis la spécification jusqu’au codage. Dans ce cadre, un concept appartenant aux
besoins des utilisateurs projette sa réalité dans le modèle de conception et dans le codage. Le

35
fil tendu entre les différentes étapes de construction permet alors de remonter du code aux
besoins et d’en comprendre les tenants et les aboutissants. En d’autres termes, on peut
retrouver la nécessité d’un bloc de codes en se référant à son origine dans le modèle des
besoins.

UML dans sa version [3] 2 propose treize diagrammes qui peuvent être utilisés dans la
description d’un système. Ces diagrammes sont regroupés dans deux grands ensembles :

Les diagrammes structurels : Ces diagrammes, au nombre de six, ont vocation à représenter
l’aspect statique d’un système (classes, objets, composants…).

o Diagramme de classe : Ce diagramme représente la description statique du système

en intégrant dans chaque classe la partie dédiée aux données et celle consacrée aux
traitements.
C’est le diagramme pivot de l’ensemble de la modélisation d’un système.

o Diagramme d’objet : Le diagramme d’objet permet la représentation d’instances des

classes et des liens entre instances. – Diagramme de composant : Ce diagramme
représente les différents constituants du logiciel au niveau de l’implémentation d’un
système.
o Diagramme de déploiement : Ce diagramme décrit l’architecture technique d’un
système avec une vue centrée sur la répartition des composants dans la
configuration d’exploitation.
o Diagramme de paquetage : Ce diagramme donne une vue d’ensemble du système
structuré en paquetage. Chaque paquetage représente un ensemble homogène
d’éléments du système (classes, composants…).
o Diagramme de structure composite : Ce diagramme permet de décrire la structure
interne d’un ensemble complexe composé par exemple de classes ou d’objets et de
composants techniques. Ce diagramme met aussi l’accent sur les liens entre les
sous-ensembles qui collaborent.
• Les diagrammes de comportement : Ces diagrammes représentent la partie
dynamique d’un système réagissant aux événements et permettant de produire les
résultats attendus par les utilisateurs. Sept diagrammes sont proposés par UML :
o Diagramme des cas d’utilisation : Ce diagramme est destiné à représenter les
besoins des utilisateurs par rapport au système. Il constitue un des diagrammes les
plus structurants dans l’analyse d’un système.

36
 o Diagramme d’état-transition (machine d’état) : Ce diagramme montre les
différents états des objets en réaction aux événements.
o Diagramme d’activités : Ce diagramme donne une vision des enchaînements des
activités propres à une opération ou à un cas d’utilisation. Il permet aussi de
représenter les flots de contrôle et les flots de données.
o Diagramme de séquence : Ce diagramme permet de décrire les scénarios de
chaque cas d’utilisation en mettant l’accent sur la chronologie des opérations en
interaction avec les objets.
o Diagramme de communication (anciennement appelé collaboration) : Ce
diagramme est une autre représentation des scénarios des cas d’utilisation qui met
plus l’accent sur les objets et les messages échangés.
o Diagramme global d’interaction : Ce diagramme fournit une vue générale des
interactions décrites dans le diagramme de séquence et des flots de contrôle
décrits dans le diagramme d’activités.
o Diagramme de temps : Ce diagramme permet de représenter les états et les
interactions d’objets dans un contexte où le temps a une forte influence sur le
comportement du système à gérer.
4.3.2.3. Choix de langage de programmation
Un langage de programmation est un moyen de communiquer avec un ordinateur n utilisant
une notion conventionnelle. Il offre des outils tels que des instructions, des variables, des
types de données et des procédures pour écrire qui peut être exécutés par un ordinateur pour
résoudre des problèmes. Il existe de nombreux langages de programmation différents qui
peuvent être utilisés pour différents types de projets et de plateformes.

Le tableau représente quelques langages de programmations.

Tableau 10 langages de programmations

Langage JavaScript Java

Avantages  Il est intégré au  Multiplateforme (peut
navigateur web s’exécuter sur des
 Un langage de script nombreux types de
côté client systèmes
 Réduction de temps d’exploitation)
de charge sur les  Compatible avec des

37
 serveurs et rendre nombreuses
l’application plus bibliothèques et
rapides et plus frameworks
réactives.  Forte communauté de
 Compatible avec de développeurs.
nombreux framework
 Un langage
multiplateforme
inconvénients  Difficile à apprendre  Complexité en raison
pour les débutants en de sa syntaxe et de sa
programmation, grande quantité de
surtout en raison de classes et de
flexibilité bibliothèques
 Problème de sécurité  Exigence de
si les développeurs ne ressource requis
prennent pas les  Gestion de la
précautions mémoire peut parfois
appropriées causer des problemes
de performances

D’après le tableau comparatif ci-dessus nous avons utilisé JavaScript comme langage de
programmation pour le développement du projet.

Présentation du JavaScript

JavaScript est un langage de programmation de script léger, populaire et multiplateforme

utilisé pour créer des applications web interactives, des expériences utilisateur riches et des
interfaces utilisateur. Il est intégré aux navigateurs web, ce qui signifie qu'il peut s'exécuter
directement dans le navigateur de l'utilisateur sans avoir besoin d'installer des logiciels
supplémentaires.

Il est souvent utilisé conjointement avec HTML et CSS pour créer des pages web dynamiques
et interactives. Il permet aux développeurs d'ajouter des fonctionnalités telles que des
animations, des formulaires interactifs et des scripts côté client à des pages web statiques.

38
JavaScript est un langage de script côté client, cela signifie qu'il s'exécute directement dans le
navigateur de l'utilisateur, cela permet de réduire la charge sur les serveurs et de rendre les
applications plus rapides et plus réactives. Il est également utilisé pour développer des
applications côté serveur en utilisant des frameworks tels que Node.js, qui permettent
d'exécuter du JavaScript sur le serveur.

JavaScript est un langage à type dynamique, cela signifie qu'il n'a pas de types de données
déclarés pour les variables. Il supporte des concepts de programmation tels que la
programmation orientée objet, les fonctions anonymes et les closures. Il existe de nombreux
frameworks et bibliothèques populaires disponibles pour JavaScript, tels que jQuery,
AngularJS, ReactJS et VueJS, qui facilitent la création d'applications web plus complexes.

Il est également en évolution constante avec de nouvelles fonctionnalités ajoutées

régulièrement, comme l'ajout de fonctionnalités de programmation fonctionnelle, de nouvelles
API comme celles pour le développement de jeux, pour l'accès à des ressources système.

En résumé, JavaScript est un langage de programmation populaire et puissant qui est utilisé
pour créer des applications web interactives et des expériences utilisateur riches. Il présente
de nombreux avantages, tels que sa facilité d'utilisation, sa flexibilité et sa compatibilité
multiplateforme. Cependant, il peut également présenter des inconvénients tels que la sécurité
et les problèmes de performance si il n'est pas utilisé correctement.

4.3.2.4. Choix du framework

Frontend :
Tableau 11 Choix de framework frontend

Framework avantages inconvénients

React JS • La facilité de création • Une courbe
de composants d'apprentissage
réutilisables et relativement raide
indépendants. pour les développeurs
• La possibilité de débutants.
développer des • Une certaine
applications côté complexité
client et côté serveur supplémentaire par
avec React.js grâce à rapport à d'autres
des outils tels que bibliothèques ou
React DOM pour le frameworks pour la
côté client et React gestion de l'état et la
Native pour le mise à jour du rendu.

39
 développement • Les applications
mobile. React.js nécessitent
• La performance généralement un peu
accrue grâce à un plus de configuration
mécanisme de mise à et de planification
jour de rendu efficace que les autres
appelé la « frameworks pour
vérification de obtenir les meilleurs
différence de résultats.
composant » (ou • il y a un certain
"diffing" en anglais). nombre de concepts
• La communauté et de terminologies à
active et en maîtriser pour utiliser
croissance, avec de React efficacement
nombreux paquets et (comme les «
bibliothèques composants », «
disponibles pour propriétés » et « état
étendre les »)
fonctionnalités de
base de React.js
• La facilité de mise en • Une certaine
place de serveur de complexité
Next JS
rendu côté serveur supplémentaire par
(SSR) pour les rapport à d'autres
applications React.js. bibliothèques ou
• La prise en charge frameworks pour la
des applications à gestion de l'état et la
page unique (SPA) mise à jour du rendu.
avec une gestion • Une certaine courbe
automatique de la d'apprentissage pour
navigation. les développeurs qui
• La possibilité de n'ont pas l'expérience
développer des de développer avec
applications côté des SSR.
serveur et côté client • Les applications
avec un seul Next.js nécessitent
codebase. généralement un peu
• Intégration facile plus de configuration
avec les outils de et de planification
développement que les autres
modernes tels que frameworks pour
Webpack, Babel, et obtenir les meilleurs
les outils résultats.
d'authentification. • Il peut y avoir une
• Le support des certaine complexité
fonctionnalités de débogage en cas

40
 avancées telles que la de problème, en
précharge de raison des différents
données, la contextes (côté
génération de pages serveur et côté client)
statiques. dans lesquels
• La communauté l'application peut être
active et en exécutée.
croissance, avec de
nombreux paquets et
bibliothèques
disponibles pour
étendre
lefonctionnalités de
base de Next.js.
• Architecture solide : • Apprentissage :
Angular utilise une Angular a une courbe
Angular JS
architecture de d'apprentissage assez
composants qui raide, il peut donc
permet de être difficile pour les
décomposer une développeurs de s'y
application en petites adapter rapidement.
parties indépendantes
et réutilisables. • Taille de l'application
: Les applications
• MVC intégré : Angular peuvent
Angular intègre le devenir très lourdes si
modèle de conception elles sont mal
MVC (modèle-vue- conçues, cela peut
contrôleur), ce qui ralentir les temps de
facilite la séparation chargement.
des responsabilités et
la gestion de l'état de • Le coût : angular
l'application. étant un framework
complexe, peut
• Outils de prendre un temps de
développement : développement plus
Angular fournit une long, il peut donc être
série d'outils et de plus coûteux de
bibliothèques pour construire une
aider les application en
développeurs à créer utilisant Angular.
des applications de
qualité. • Apprentissage
continu : Angular est
• Communauté active : un framework en
Angular est un projet constante évolution, il

41
 open-source qui est donc nécessaire
bénéficie d'une pour les développeurs
communauté active de rester à jour avec
de développeurs. Cela les nouvelles versions
signifie qu'il y a une et les nouvelles
forte probabilité que fonctionnalités pour
vous trouviez de pouvoir en tirer
l'aide pour résoudre pleinement parti.
les problèmes que
vous rencontrez.

• Meilleures
performances :
Angular offre de
meilleures
performances que les
frameworks de même
catégorie grâce à son
utilisation de zone
d'angulaire et son
système de change
détection
• Facilité d'utilisation : • Moins de ressources :
Vue.js a une courbe Vue.js est un
Vue JS
d'apprentissage framework
relativement faible, il relativement jeune
est donc facile pour comparé à d'autres
les développeurs de framework populaire
commencer à utiliser tel qu’Angular ou
le framework. React, il y a donc
moins de ressources
• Taille légère : Le disponibles pour les
coeur de Vue.js est développeurs qui
très petit, ce qui rencontrent des
permet de charger problèmes.
rapidement les
applications et de • Moins de
conserver de bonnes bibliothèques : Vue.js
performances même a une communauté
lorsque l'application moins développée par
est devenue plus rapport à d'autres
complexe. frameworks, il y a
donc moins de
• Composants bibliothèques et de
réutilisables : Vue.js plugins disponibles
utilise des pour les

42
 composants pour développeurs.
construire des
applications, ce qui • Manque de
permet une meilleure standardisation :
réutilisation du code. Vue.js n'a pas de
conventions établies
• Intégration facile : pour la gestion des
Vue.js peut être états et des
facilement intégré à composants, cela peut
des applications rendre difficile pour
existantes, ce qui en les développeurs de
fait un choix travailler sur des
populaire pour les projets en équipe et
développeurs qui de maintenir une
souhaitent ajouter des application complexe.
fonctionnalités
interactives à des • Apprentissage
sites existants. continu : Vue.js est
en constante
• Flexibilité : Vue.js évolution, il est donc
vous donne la nécessaire pour les
possibilité de choisir développeurs de
la façon dont vous rester à jour avec les
voulez structurer nouvelles versions et
votre application, les nouvelles
vous avez une liberté fonctionnalités pour
pour choisir pouvoir en tirer
l'architecture de votre pleinement parti.
projet

On a opté pour Next.js en tenant des avantages et inconvénients de chaqu’un de ces

frameworks.

Next.js est un framework open-source basé sur React qui vous permet de créer des
applications web universeles (SSR) en utilisant JavaScript. Il est développé par Vercel
(anciennement connu sous le nom de ZEIT). Il est conçu pour faciliter la mise en place de
serveur-side rendering (SSR) pour vos applications React, et offre une variété de
fonctionnalités pour vous aider à créer des applications web rapides et performantes.

Principales caractéristiques de Next.js:

43
Server-Side Rendering (SSR) : Next.js permet de rendre vos composants React côté serveur,
ce qui améliore considérablement les performances de votre application en réduisant les
temps de chargement pour les utilisateurs.

Routage automatique : Next.js utilise un système de routage automatique qui vous permet de
définir facilement les routes pour vos pages. Il gère également la navigation entre les pages de
manière transparente.

Code splitting : Next.js utilise un système de "code splitting" automatique pour charger
uniquement les composants nécessaires pour chaque page, ce qui permet de réduire la taille de
l'application et de charger les pages plus rapidement.

Outils de développement : Next.js fournit un ensemble complet d'outils pour vous aider à
développer, déboguer et déployer des applications web rapidement.

Intégration facile avec des bibliothèques existantes : Next.js est facilement intégrable avec
d'autres bibliothèques et outils couramment utilisés dans le développement web, tels que
React Router, Redux, etc.

Déploiement simple : Next.js est intégré à l'écosystème de Vercel, ce qui permet des
déploiements rapides et faciles. Il est possible de déployer sur les serveurs de Vercel ou en
utilisant un serveur personnalisé ou sur des services cloud comme AWS ou GCP.

En résumé, Next.js est un framework puissant et polyvalent pour créer des applications web
universeles avec React. Il facilite la mise en place de SSR, fournit un système de routage
automatique et de Code Splitting, de nombreux outils de développement et une intégration
facile avec les bibliothèques couramment utilisées, ce qui en fait un choix populaire pour les
développeurs web.

Backend :

Tableau 12 Choix de framework backend

Framework Avantage Inconvénients

Nest.js • Basé sur TypeScript : • Courbe d'apprentissage :
Nest.js est basé sur Nest.js utilise une
TypeScript, un langage architecture complexe qui

44
 de programmation de peut être difficile à
Microsoft qui ajoute des comprendre pour les
fonctionnalités de développeurs qui n'ont pas
programmation orientée l'expérience avec les
objet à JavaScript. Cela architectures en couches.
permet une meilleure
productivité et une • Taille de l'application : Les
meilleure qualité du applications Nest.js
code. peuvent devenir lourdes si
elles sont mal conçues,
• Architecture en couches : cela peut ralentir les temps
Nest.js utilise une de chargement.
architecture en couches
qui permet de • Apprentissage continu :
décomposer une Nest.js est un framework
application en petites en constante évolution, il
parties indépendantes et est donc nécessaire pour
réutilisables. Cela facilite les développeurs de rester
la maintenance et la mise à jour avec les nouvelles
à échelle de l'application. versions et les nouvelles
fonctionnalités pour
• Support pour les pouvoir en tirer pleinement
dernières technologies : parti.
Nest.js prend en charge
les dernières • La dépendance à
technologies telles que TypeScript : Nest.js est
WebSockets, GraphQL, basé sur TypeScript, il est
et microservices. Cela donc nécessaire de
permet aux développeurs comprendre les concepts
de créer des applications de TypeScript pour
modernes et évolutives. pouvoir utiliser pleinement
les fonctionnalités de
• Intégration facile avec Nest.js, cela peut causer

45
 d'autres technologies : des difficultés pour les
Nest.js est facilement développeurs qui ne sont
intégrable avec d'autres pas familier avec
technologies populaires TypeScript.
telles que MongoDB,
Express, et GraphQL.

• Communauté active:
Nest.js est un projet
open-source qui
bénéficie d'une
communauté active de
développeurs. Cela
signifie qu'il y a une forte
probabilité que vous
trouviez de l'aide pour
résoudre les problèmes
que vous rencontrez.
Express.js • Flexibilité : Express.js • Pas d'architecture définie :
est un framework Comme Express.js est un
minimaliste qui vous framework minimaliste, il
donne une grande liberté n'a pas d'architecture
pour organiser votre code définie. Cela peut rendre
et construire des difficile la maintenance et
applications de la la mise à échelle de
manière qui vous l'application si elle devient
convient le mieux. complexe.

• Large communauté : • Manque de standardisation

Express.js est un des : Il n'y a pas de
frameworks les plus conventions établies pour
populaire pour Node.js, il organiser le code, cela peut
y a donc une grande rendre difficile pour les

46
 communauté de développeurs de travailler
développeurs qui peuvent en équipe et de maintenir
aider à résoudre les une application complexe.
problèmes et fournir des
outils et des • La sécurité : Express.js ne
bibliothèques fournit pas de
supplémentaires. fonctionnalités de sécurité
intégrées, il est donc
• Intégration facile avec nécessaire pour les
d'autres technologies : développeurs de mettre en
Express.js est facilement place des mesures de
intégrable avec d'autres sécurité supplémentaires
technologies populaires ou d'utiliser des
telles que MongoDB, bibliothèques tierces.
Socket.io, et GraphQL.
• Performance : Certaines
• Simplicité : Express.js opérations de Express.js
est conçu pour être peuvent entraîner des
simple à utiliser, il est performances réduites pour
donc facile de démarrer des utilisations à grande
rapidement et de créer échelle. Il est donc
des applications web important de surveiller et
performantes. de mettre en place des
améliorations pour
 Le Middleware : maintenir les
Express.js utilise le performances.
concept de middleware
qui permet de créer des
fonctionnalités
modulaires et
réutilisables qui
s'exécutent à différents
moments d'une requête

47
 HTTP

Nous avons opté d’utiliser Nest.js en tenant compte de ces avantages ci-dessus.

Presentation de Nest.js [7]

Nest.js est un framework open-source basé sur Node.js pour créer des applications web
modernes. Il est basé sur TypeScript, un sur-ensemble de JavaScript qui ajoute des
fonctionnalités de programmation orientée objet, et est influencé par Angular. Il vise à fournir
une architecture robuste pour les applications à grande échelle, en combinant les avantages
des bibliothèques et des frameworks existants avec les dernières tendances en matière
d'architecture d'applications.

Principales caractéristiques de Nest.js :

Architecture en couches : Nest.js utilise une architecture en couches qui permet de

décomposer une application en petites parties indépendantes et réutilisables. Cela facilite la
maintenance et la mise à échelle de l'application.

Support pour TypeScript : Nest.js est basé sur TypeScript, ce qui permet un meilleur contrôle
du type, une meilleure qualité du code et une meilleure productivité pour les développeurs.

Support des dernières technologies : Nest.js prend en charge les dernières technologies telles
que WebSockets, GraphQL, et les microservices.

Intégration facile avec d'autres technologies : Nest.js est facilement intégrable avec d'autres
technologies populaires telles que MongoDB, Express, et GraphQL.

Pattern Modulable : Nest.js utilise un pattern modulable pour construire ses applications,
permettant d'organiser efficacement son code et de le rendre facile à maintenir.

Middleware : Nest.js utilise les middlewares, des fonctionnalités modulaires et réutilisables

qui s'exécutent à différents moments d'une requête HTTP, pour ajouter des fonctionnalités à
son application.

Ecosysteme complet : Nest.js inclut un ensemble complet d'outils pour vous aider à
développer, déboguer et déployer des applications web rapidement.

48
En résumé, Nest.js est un framework puissant pour créer des applications web modernes en
utilisant Node.js. Il utilise TypeScript pour ajouter des fonctionnalités de programmation
orientée objet et une architecture en couches pour faciliter la maintenance et la mise à échelle
de l'application. Il prend en charge les dernières technologies et est facilement intégrable avec
d'autres technologies populaires. Nest.js est également soutenu par une communauté active et
possède un écosystème complet pour faciliter le développement d'application.

4.3.2.5. SGBD
SGBD signifie Système de Gestion de Base de Données, ou Database Management System
(DBMS) en anglais. Il s'agit d'un logiciel qui permet de créer, de gérer et de maintenir des
bases de données. Les SGBD permettent aux utilisateurs de stocker, de récupérer et de gérer
des informations de manière efficace et sécurisée. Les exemples de SGBD sont MySQL, SQL
Server, Oracle, PostgreSQL and SQLite.

Tableau 13 Choix de SGBD

SGBD Avantages Inconvénients

Mysql • MySQL est open • MySQL a des limites
source, ce qui signifie de performance pour
qu'il est gratuit à les très grandes bases
utiliser et à modifier. de données (dépasse
• Il est compatible avec les 100TB)
de nombreux • Il a moins de
systèmes fonctionnalités
d'exploitation, y avancées que les
compris Windows, autres SGBD
Linux et macOS. commerciales tels que
• Il est largement Oracle ou SQL
utilisé dans les Server.
applications web, y • La sécurité des
compris les sites de données peut être
commerce limitée si les
électronique, les utilisateurs ne
blogs et les forums. configurent pas

49
 • MySQL est stable, correctement les
fiable et rapide, ce paramètres de
qui en fait un bon sécurité.
choix pour les • Les transactions
grandes bases de distribuées sont plus
données. compliquées à mettre
• Il est compatible avec en place
de nombreux • A moins de prévoir
systèmes de gestion un support adéquat, le
de contenu (CMS) et support technique est
systèmes de gestion limité par rapport à
d'entreprise (ERP) des solutions
populaires. propriétaires
commerciales

• Il fournit un grand
nombre de
fonctionnalités
avancées telles que
les vues, les
procédures stockées
et les déclencheurs.
Mongo DB • Mongo DB est un • Mongo DB ne
système de gestion de supporte pas les
base de données transactions multi-
NoSQL qui permet de documents
stocker des données atomiques, cela peut
sous forme de poser des problèmes
documents JSON, ce pour les applications
qui est souvent plus nécessitant des
facile à utiliser pour transactions très
les développeurs. précises
• Il supporte un grand • Mongo DB est moins

50
 nombre d'opérations mature que les
en parallèle et offre systèmes de gestion
une haute de base de données
performance pour les relationnels
grandes bases de traditionnels, il y a
données. donc moins de
• Il est adapté pour les fonctionnalités
applications web, les disponibles
jeux en ligne, les • Mongo DB n'est pas
applications mobiles, toujours adapté pour
les analyses de les besoins de
données, les outils de données très
développement IoT. structurées, comme
• Mongo DB offre des les systèmes ERP, les
fonctionnalités systèmes de gestion
avancées telles que de la chaîne
les agrégations, les d'approvisionnement
indexes, la réplication • Il peut y avoir un
et la haute apprentissage en
disponibilité. cours pour les
• Mongo DB est développeurs
évolutif et peut être habitués aux bases de
étendu pour prendre données
en charge des charges relationnelles
de travail de plus en • La sécurité des
plus importantes données peut être
limitée si les
utilisateurs ne
configurent pas
correctement les
paramètres de
sécurité

51
Nous avons utilisé Mongo DB en prenant compte de ces avantages.

Présentation de Mongo DB :

Mongo DB est un système de gestion de base de données NoSQL open-source

populaire qui permet de stocker des données de manière efficace. Il a été développé en 2007
par 10gen (maintenant Mongo DB Inc.).

Contrairement aux systèmes de gestion de bases de données relationnelles (RDBMS)

tels que MySQL ou SQL Server, qui stockent les données dans des tables avec des schémas
définis, Mongo DB utilise un modèle de données orienté document. Cela signifie que les
données sont stockées sous forme de documents JSON, appelés BSON (Binary JSON). Ces
documents peuvent avoir des structures différentes et peuvent être imbriqués les uns dans les
autres. Cela permet une flexibilité accrue pour stocker des données qui ont des structures
différentes.

Mongo DB offre des fonctionnalités telles que:

Les Index : pour améliorer les performances des requêtes

La réplication : pour assurer la haute disponibilité et la tolérance aux pannes

Les agrégations : pour les opérations d'analyse de données

Les transactions : opérations atomiques dans un document unique

La scalabilité horizontale : en utilisant la répartition des données sur plusieurs serveurs

Mongo DB s'exécute sur de nombreux systèmes d'exploitation, y compris Windows,

Linux et macOS, et il est compatible avec de nombreux langages de programmation, tels que
JavaScript, Python, C#, Java, et C++. Il est largement utilisé dans les applications web, les
jeux en ligne, les applications mobiles, les analyses de données, les outils de développement
IoT. Il est également utilisé par de nombreuses grandes entreprises pour stocker et gérer leurs
données.

En résumé, Mongo DB est un système de gestion de base de données NoSQL open-

source populaire qui permet de stocker des données de manière efficace et flexible, Il permet
une scalabilité élevée, une haute disponibilité, des fonctionnalités d'analyse de données et de
soutien de nombreux langages de programmation. Il peut ne pas être le meilleur choix pour
les applications nécessitant des transactions très précises ou des besoins de données très

52
structurées, mais reste un outil populaire pour les applications nécessitant une flexibilité et
une scalabilité élevées.

4.3.2.6. Choix de l’outil de modélisation UML

En utilisant des outils de modélisation UML, les développeurs peuvent créer des
modèles de système précis qui peuvent être utilisés pour comprendre les exigences
fonctionnelles et non fonctionnelles d'un système, planifier les tâches de développement et de
test, et documenter les décisions de conception. Il est également un outil précieux pour les
équipes de développement pour les aider à communiquer efficacement avec les utilisateurs et
les autres parties prenantes pour l'élaboration d'un projet.

Ces outils permettent aux utilisateurs de créer des diagrammes UML tels que des
diagrammes de classes, des diagrammes de séquence, des diagrammes d'activité, des
diagrammes de cas d'utilisation, des diagrammes de déploiement et des diagrammes de
composants. Les outils de modélisation UML ont des fonctionnalités avancées telles que la
génération automatique de code, l'intégration avec des outils de gestion de versions et la
possibilité de partager et de collaborer sur des modèles.

Tableau 14 de comparaison d’outils de modélisation

Tableau 14 Choix d'outils de modélisations

Outils de modélisation Avantages Inconvénients

entreprise Architect de sparx • Il est capable de gérer • Il peut être complexe
systems des grandes quantités pour les utilisateurs
de données de débutants, car il
manière efficace, ce possède de
qui en fait un bon nombreuses
choix pour les projets fonctionnalités
de grande envergure. avancées.
• Il possède une grande • Il est un outil payant,
variété de ce qui peut être un
diagrammes UML, inconvénient pour les
avec des diagrammes utilisateurs qui
de séquences, de cherchent des outils
classes, de cas gratuits ou à faible
d'utilisation, de coût.

53
 déploiement, etc. • Il peut y avoir des
• Il supporte un grand problèmes de
nombre de langages performance pour les
de programmation, projets de très grande
permettant un code envergure.
génération • Il est moins populaire
• Il offre une que les autres outils
fonctionnalité de de modélisation UML
gestion des exigences tels que IBM Rational
qui permet de gérer Software Architect ou
les besoins des Visual Paradigm,
utilisateurs. donc il peut être
• Il est compatible avec difficile de trouver de
de nombreux la documentation ou
systèmes des utilisateurs
d'exploitation, y expérimentés.
compris Windows,
Linux et macOS.
• Il est facile à utiliser
pour les utilisateurs
déjà familiarisés avec
les outils de
modélisation UML.
Visual Paradigm • Il est facile à utiliser, • Il peut être un peu
même pour les coûteux pour les
débutants qui n'ont utilisateurs
pas d'expérience en individuels.
modélisation. • Il peut être un peu
• Il offre une grande complexe pour les
variété d'options de utilisateurs qui n'ont
personnalisation pour pas beaucoup
les diagrammes. d'expérience en
• Il prend en charge de modélisation.

54
 nombreux types de • Il peut être un peu
diagrammes lourd pour les
couramment utilisés. utilisateurs avec des
• Il intègre des ordinateurs à faible
fonctionnalités de puissance.
collaboration pour les
équipes de
développement.
• Il offre une
intégration avec de
nombreux outils de
développement tels
que Eclipse,
NetBeans, et Visual
Studio.

Nous avons choisi Visual Paradigm for UML comme outils de conception car il offre déjà
tant de fonctionnalités. Cette version est largement suffisante pour établir les différents types
de diagrammes nécessaires au bon déroulement de notre projet.

Presentation de Visual paradigm :

Visual Paradigm est un outil de développement logiciel qui fournit une suite d'applications
pour créer et gérer des projets de développement logiciel. L'outil comprend une variété de
fonctionnalités pour la modélisation logicielle, telles que des diagrammes de classes, des
diagrammes de cas d'utilisation et des diagrammes d'activités, ainsi que des fonctionnalités
pour la gestion de projet, telles que la gestion des exigences, les tests et la collaboration
d'équipe.

Certaines des fonctionnalités clés de Visual Paradigm incluent :

Prise en charge de plusieurs langages de modélisation, notamment UML, BPMN, ERD, etc.

Un générateur de code intégré qui peut créer du code dans une variété de langages de
programmation, y compris Java, C# et C++.

55
Un environnement collaboratif permettant aux membres de l'équipe de travailler ensemble sur
le même projet.

Un système de contrôle de version qui vous permet de suivre les modifications apportées à
votre projet au fil du temps.

Une large gamme d'outils de création de diagrammes pour visualiser et concevoir des
systèmes logiciels.

56
 Chapitre 5. Analyse Conceptuelle
5.1. Dictionnaire des données

Tableau 15 Dictionnaires des données

Rubrique Description Type Taille Format

_Banner_description Description de la bannière AN 10

_Banner_id Identifiant d’une bannière AN 10
Banner_image_path Chemin d’une image d’une AN 10
bannière
Banner_is_active Statu d’une bannière Boolean 1
Banner_name Nom d’une bannière AN 50

Banner_url Url d’une bannière AN 10

Category_description Description d’une catégorie AN 50

Category_id Identifiant d’une catégorie AN 10
Category_image_url Chemin d’une image d’une AN 10
catégorie
Category_parent_category Parent d’une category AN 10

Product_after_sales_service Service après-vente d’un AN 50

produit comme la livraison
Prix d’un produit AN 10
Product_ general_price
Product_id Identifiant d’un produit AN 10

Product_long_description Description longue d’un AN 100

produit
Nom d’un produit AN 50
Product_name
Product_owner_id Identifiant du propriétaire AN 10
Product_quantity Quantité d’un produit AN 10

Product_short_description Description courte d’un AN 10

produit

5.2. Règles de gestion

RG1: un produit est disposé par un ou plusieurs prix

RG2: un produit peut avoir plusieurs commentaires

57
RG3: un produit est affiché par plusieurs bannières

RG4: une catégorie contient un ou plusieurs caractéristiques

RG5: une caractéristique possède plusieurs options de caractéristique

RG6: une option de caractéristique est présentée par plusieurs produits

5.3. Représentation et spécification des besoins

5.3.1. Diagrammes des cas d'utilisation
Le diagramme de cas d’utilisation représente la structure des grandes fonctionnalités
nécessaires aux utilisateurs du système. C’est le premier diagramme du langage UML, il
assure la relation entre l’utilisateur et les objets que le système met en œuvre.

Un cas d'utilisation peut être divisé en diagrammes de séquence qui détaillent les différentes
fonctions du cas d'utilisation. Il permet d'identifier les possibilités d'interaction entre le
système et les acteurs (intervenants extérieurs au système), c'est-à-dire toutes les
fonctionnalités que doit fournir le système.

- Acteur : représente un rôle joué par une entité externe « utilisateur humain, dispositif
matériel ou autre système » qui interagit directement avec le système étudié.
- L’interaction : Une interaction permet de décrire les échanges entre un acteur et un
cas d’utilisation. L’interaction entre un acteur et un cas d’utilisation se représente
comme une association. Elle peut comporter des multiplicités comme toute association
entre classes.
- Cas d’utilisation : représente un ensemble de séquences d'actions qui sont réalisées
par le système et qui produisent un résultat observable intéressant pour un acteur
particulier. Un cas d'utilisation est une description du système étudié privilégiant le
point de vue de l'utilisateur. Il permet une meilleure structuration des besoins des
utilisateurs qui définissent clairement la manière dont ils interagissent avec le système.
Les cas d'utilisation sont liés par des relations de plusieurs types.
la figure 5 représente la formalisation d’interaction entre un acteur et un cas d’utilisation.

58
 Figure 5 Interaction entre acteur et cas d'utilisation

5.3.1.1. Relation entre cas d’utilisation

Dans le développement de logiciels, les cas d'utilisation sont utilisés pour décrire les
interactions entre un utilisateur et un système. Ils sont un moyen de capturer les exigences
d'un système d'une manière à la fois facilement compréhensible et testable. Un cas
d'utilisation décrit un scénario spécifique dans lequel un utilisateur interagit avec le système
pour atteindre un objectif spécifique.

Plusieurs types de relations peuvent exister entre les cas d'utilisation, notamment :

- Relation d'inclusion : ce type de relation indique qu'un cas d'utilisation inclut un autre
cas d'utilisation dans le cadre de son flux. Une relation d'inclusion est indiquée par une
flèche pointant du cas d'utilisation inclus vers le cas d'utilisation inclus avec l'étiquette
<<include>> ;
- Relation d'extension : ce type de relation indique qu'un cas d'utilisation peut étendre le
flux d'un autre cas d'utilisation. Une relation d'extension est indiquée par une flèche
pointant du cas d'utilisation étendu vers le cas d'utilisation étendu avec l'étiquette "<
<extend> >" ;
- Relation de généralisation : ce type de relation indique qu'un cas d'utilisation est une
forme plus générale d'un autre cas d'utilisation. Une relation de généralisation est
indiquée par une flèche pointant du cas d'utilisation spécialisé vers le cas d'utilisation
général avec une pointe de flèche ouverte.
- Relation d'association : ce type de relation indique qu'un cas d'utilisation est associé à
un autre cas d'utilisation. Une relation d'association est indiquée par une ligne continue
reliant deux cas d'utilisation.

59
 Figure 6 Relations entre cas d'utilisation
5.3.1.2. Identification des acteurs
L’acteur de notre système est :
 Le client
Tableau 16 Identificateurs des acteurs

Acteur Description
- Voir les listes des produits
Client - Ajouter un produit au panier
- Supprimer un produit du panier

5.3.1.3. Identifications des cas d’utilisations

Tableau 17 Identifications des cas d'utilisations

Cas d’utilisation Acteur Message emis/messa

Voir les listes des produits Client Demande de page d’accueil
Affichages des lites de
produits
Ajouter un produit au panier Client Demande d’ajout au panier
Ajout au panier réussi
Supprimer un produit au Client Demande de suppression au
panier panier
Suppression réussie

La figure représente le cas d’utilisation du système :

60
 Figure 7 Cas d'utilisation du système

5.3.2. Descriptions textuelle de chaque cas d’utilisation

La description textuelle d’un cas d’utilisation permet de clarifier le déroulement de la
fonctionnalité et de décrire la chronologie des actions qui doivent être réalisées.
5.3.2.1. Le cas d’utilisation « voir liste des produits »
Ici le client va explorer les produits :
Tableau 18 Cas d'utilisation voir liste des produits

Acteur Client
Objectif facilite d’explorer les produits sans pertes
de temps
Précondition ouvrir la page d’accueil de l’application.

Post-condition listes des produits (inspirer de votre

dernière visite, susceptible de vous
intéresser, produit du moment)

61
 Scenario normal : 1 L’acteur ouvre l’application
2 Le système affiche la page
d’accueil

Scenario alternative Le système affiche un message d’erreur.

5.3.2.2. Le cas d’utilisation « ajouter un produit au panier »

Ici le client va ajouter un produit au panier.
Tableau 19 Cas d'utilisation ajouter au panier

Acteur Client
Objectif réussir l’ajout de produit
Précondition sélectionné un produit
Post-condition le client reçois une notification de réussie

Scenario normal : 1 L’acteur sélection un produit et

l’ajoute au panier
2 le système affiche une notification de
ressui de l’ajout

Scenario alternative l’acteur peut revenir au page

d’accueil

62
 5.3.2.3. Le cas d'utilisation « supprimer un produit du panier »
Ici le client va supprimer un produit du panier.
Tableau 20 Cas d'utilisation supprimer un produit du panier

Acteur Client
Objectif réussir la suppression d’un produit.
Précondition avoir un produit au panier
Post-condition suppression d’un produit avec succès.
Scenario normal : 1 L’acteur clique sur le bouton panier
2 Le système affiche la page du panier
3 L’acteur supprime le produit
Le système enregistre l’action et envoi une
notification
Scenario alternative : l’acteur peut revenir au page précédant sans
faire de suppression.

5.3.3. Diagramme des séquences du système pour chaque cas d’utilisation

Un diagramme de séquence est un type de diagramme UML (Unified Modeling

Language) utilisé pour représenter les interactions entre les objets ou les composants d'un
système. Il permet de visualiser les étapes chronologiques d'une interaction ou d'un scénario
d'utilisation spécifique. Les différents éléments d'un diagramme de séquence incluent :

Les objets ou les composants : représentés par des boîtes horizontales qui contiennent le nom
de l'objet ou du composant.

Les messages : représentés par des flèches qui indiquent les interactions entre les objets ou les
composants.

Les moments : représentés par des marques verticales le long du temps sur la ligne du bas du
diagramme.

Un diagramme de séquence est utile pour comprendre comment différents objets ou

composants d'un système interagissent les uns avec les autres dans un scénario donné, ainsi
que pour identifier les cas où il y a des séquences d'interactions inutiles ou des interactions
manquantes.

La figure montre le formalisme de diagramme de séquence

63
 Figure 8 Formalisme du système
Pour les cas plus complexes, on peut intégrer des algorithmes dans les diagrammes de
séquences. Par le biais des cadres d'interaction, on peut préciser les spécificités de l’ensemble
des messages :
 alt : fragment multiple alternatifs (si, alors, sinon)
 opt : fragment optionnel
 par : fragment parallèle (traitements concurrents)
 loop : le fragment s’exécute plusieurs fois
 region : région critique (un seul thread à la fois)
 neg : une interaction non valable
 ref : référence à une interaction dans un autre diagramme
 sd : fragment du diagramme de séquence en entier

5.3.3.1. Diagramme de séquence de cas d’utilisation « voir les listes des

produits »
Voici le diagramme de séquence :

Figure 9 Diagramme de séquences "voir les listes des produits"

64
 5.3.3.2. Diagramme de séquence de cas d’utilisation « ajouter au panier »
Voici le diagramme de séquence :

Figure 10 Diagramme de séquence "ajouter au panier"

5.3.3.3. Diagramme de séquence de cas d’utilisation « supprimer un produit au

panier »
Voici le diagramme de séquence :

Figure 11 Diagramme de séquence "supprimer un produit au panier"

5.4. Spécification des besoins techniques

Les besoins non fonctionnels ou techniques qui perfectionnent la qualité logicielle du
système sont des exigences qui ne concernent pas spécifiquement le comportement du

65
système, mais plutôt les caractéristiques qui contribuent à la qualité globale du système. Ces
exigences peuvent être classées en différentes catégories :

Qualité de service : Exigences relatives à la disponibilité, à la scalabilité, à la performance, à

la récupération en cas de panne, etc.

Sécurité : Exigences relatives à la sécurité des données, à la confidentialité, à l'intégrité, à

l'authentification, à l'autorisation, etc.

Maintenabilité : Exigences relatives à la facilité d'utilisation, à la flexibilité, à l'évolutivité, à

la documentaliste, à l'évolutivité, à la compatibilité, etc.

Conformité : Exigences relatives à la conformité aux normes et aux réglementations en

vigueur, par exemple en matière de sécurité, de protection des données, d'accessibilité, etc.

Ces besoins non fonctionnels sont souvent exprimés en termes qualitatifs ou quantitatifs
et peuvent être difficiles à mesurer ou à vérifier. Il est donc important de définir clairement
ces exigences dans la spécification des besoins techniques, pour s'assurer que le système
répond à tous ces besoins pour garantir la qualité attendue.

66
 5.5. Modélisation du domaine

La modélisation du domaine en informatique est une technique utilisée pour représenter

les concepts et les relations d'un domaine d'application spécifique sous forme de modèles
conceptuels. Il s'agit d'une étape importante dans le processus de développement de logiciels,
car elle permet de comprendre le domaine d'application et de définir les exigences
fonctionnelles et non fonctionnelles du système.

Il existe différentes méthodes de modélisation du domaine en informatique, mais les plus

courantes sont :

- La modélisation orientée objet (UML, Merise...) : utilise des classes, des objets et des
relations pour représenter les concepts et les relations du domaine.
- La modélisation des données : utilise des schémas conceptuels pour représenter les
structures de données et les relations entre elles.
- La modélisation des processus : utilise des diagrammes pour représenter les différents
processus d'affaires et les flux de données.
- Les modèles ainsi créés permettent de décrire les concepts, les règles métier, les
relations entre les concepts, les cas d'utilisation et les besoins. Ils sont souvent utilisés
pour communiquer les exigences avec les développeurs, pour définir les tests et pour
la documentation du système.
- L'utilisation de ces méthodes de modélisation permet de mieux comprendre les besoins
des utilisateurs et de développer des solutions plus efficaces. Elle permet également de
s'assurer que les concepts et les relations représentés dans les modèles sont cohérents
et respectent les règles métier.

67
Figure 12 Modèle de domaine

68
 Chapitre 6. Conception détaillée

La conception détaillée est la phase du processus de développement de logiciels où les

détails de la solution sont planifiés et spécifiés. C'est la phase où les exigences du système
sont transformées en une architecture et en une implémentation détaillées. Il s'agit d'une étape
clé de la mise en œuvre de la solution car c'est là que les décisions de conception cruciales
sont prises.

6.1. Architecture du système

L'architecture MVC (Model-View-Controller) est un modèle de conception logiciel qui

sépare les données d'un système (le modèle), la présentation des données (la vue) et la logique
de contrôle (le contrôleur) en trois composants distincts. Cette architecture est souvent utilisée
pour développer des applications web et des applications mobiles.

Le modèle représente les données de l'application et les règles métier qui s'appliquent à
ces données. Il est généralement indépendant de la vue et du contrôleur, et peut être utilisé par
plusieurs vues différentes.

La vue représente la présentation des données pour l'utilisateur. Elle est responsable de
l'affichage des données et de la réception des entrées utilisateur. Elle est généralement
indépendante du modèle et du contrôleur.

Le contrôleur est responsable de la coordination entre le modèle et la vue. Il reçoit les

entrées utilisateur de la vue, met à jour le modèle en conséquence et met à jour la vue en
fonction des modifications apportées au modèle.

L'architecture MVC permet de séparer clairement les responsabilités de chaque

composant, ce qui rend le code plus facile à maintenir et à évoluer. Elle permet également de
faciliter le développement par équipe en séparant les tâches de développement et en réduisant
les risques d'interférences entre les différents composants. Enfin, elle facilite la réutilisation
de code en permettant à différentes vues d'utiliser le même modèle et à différents modèles
d'être utilisés par différentes vues.

69
 Figure 13 Architecture du système[4]

6.2. Diagramme de séquence de conception pour chaque cas

d'utilisation
Un diagramme de séquence de conception est un outil de modélisation utilisé pour
représenter les interactions entre les différents composants d'un système. Il permet de montrer
les séquences d'événements qui ont lieu entre les objets au cours du temps. Il est souvent
utilisé pour décrire les interactions entre les objets dans une application en utilisant une
notation graphique, pour faciliter la compréhension des séquences d'opérations

6.2.1. Diagramme de séquence de conception de CU « voir les lites des

produits »

70
Figure 14 Diagramme de séquence de conception "voir les listes des produits"

71
 6.2.2. Diagramme de séquence de conception de CU « ajouter au panier »

Figure 15 Diagramme de séquence de conception "ajouter au panier"

6.2.3. Diagramme de séquence de conception de CU « supprimer un produit au

panier »

Figure 16 Diagramme de séquence de conception "supprimer un produit du panier"

6.3. Diagramme de classe de conception pour chaque cas

d'utilisation
Un diagramme de classe de conception est un outil de modélisation utilisé pour
représenter les différents objets et classes d'un système, ainsi que les relations entre eux. Il
permet de montrer les interactions et les déchanges d'informations entre les objets et les

72
classes dans un système. Il est souvent utilisé pour décrire les concepts et les relations dans
une application en utilisant une notation graphique, pour faciliter la compréhension de la
structure du système.

Les éléments présents dans un diagramme de classe de conception sont :

Les classes: qui représentent les différents types d'objets dans le système.

Les attributs: qui représentent les propriétés d'une classe.

Les méthodes: qui représentent les actions que peut réaliser une classe.

Les relations: qui représentent les liens entre les différentes classes, comme l'héritage,
l'agrégation ou la composition.

Les diagrammes de classe de conception permettent de visualiser de manière claire la

structure du système et les interactions entre les classes, et de comprendre comment les
différentes classes coopèrent. Ils sont souvent utilisés pour la conception détaillée d'une
application pour faciliter la compréhension et la communication avec les développeurs et les
utilisateurs. Ils aident également à identifier les cas d'utilisation, les scénarios et les tests pour
s'assurer que le système fonctionne correctement.

73
Voir les listes des produits

Figure 17 Diagramme de classe du futur système "voir les listes des produits"

74
Ajouter un produit au panier

Figure 18 Diagramme de classe du futur système "ajouter un produit au panier"

75
Supprimer un produit au panier

Figure 19 Diagramme de classe du futur système "supprimer un produit du panier"

76
6.4. Diagramme de classe de conception global
6.4.1. Réalisation du diagramme de classe du future système

77
 6.5. Diagramme de paquetages
Un diagramme de package, également appelé diagramme de paquetage, est un outil de
modélisation utilisé pour représenter les différents composants d'un système en utilisant des
paquets ou des modules logiques. Il permet de montrer les relations de dépendance et les
interactions entre les différents paquets ou modules d'un système. Il est souvent utilisé pour
décrire la structure de l'application et la manière dont les différents composants sont organisés
et interagissent.

Les éléments présents dans un diagramme de package sont :

Les paquets : qui représentent les différents composants d'un système groupés par
fonctionnalité ou par niveau de granularité.

Les classes: qui représentent les différents types d'objets dans le système.

Les relations : qui représentent les déchanges de données et les déchanges de contrôle entre
les différents paquets.

Les diagrammes de paquetage permettent de visualiser de manière claire la structure de

l'application et les relations de dépendance entre les différents composants, ainsi que les
interactions entre eux. Ils sont souvent utilisés pour la conception détaillée d'une application
pour faciliter la compréhension et la communication avec les équipes de développement et les
utilisateurs. Ils aident également à identifier les cas d'utilisation, les scénarios et les tests pour
s'assurer que le système fonctionne correctement.

78
Figure 20 Diagramme de paquetages[1]

79
 6.6. Diagramme de déploiement
Un diagramme de déploiement est un outil de modélisation utilisé pour représenter
la configuration physique des différents composants d'un système, ainsi que les
interactions entre eux. Il permet de montrer comment les différents composants d'un
système sont disposés et configurés dans un environnement donné. Il est souvent utilisé
pour décrire la topologie physique des composants d'un système et comment ils sont
connectés entre eux.

Figure 21 Diagramme de déploiement

80
PARTIE III : REALISATION

81
 Chapitre 7. Mise en place de l'environnement de développement
7.1. Installation et configuration des outils
7.1.1. Installation de Visual code studio

Pour installer Visual Studio Code (VS Code) sur votre ordinateur, vous devez suivre les
étapes suivantes :

Téléchargez le fichier d'installation approprié pour votre système d'exploitation à partir du site
web de VS Code : https://code.visualstudio.com/download

Une fois le téléchargement terminé, exécutez le fichier d'installation.

Suivez les instructions de l'assistant d'installation pour installer VS Code sur votre ordinateur.
Il vous demandera de choisir l'emplacement d'installation et les options d'intégration avec le
système.

Après l'installation, lancez VS Code à partir du menu Démarrer ou du raccourci sur votre
bureau.

Vous pouvez personnaliser les préférences de VS Code en utilisant l'onglet des paramètres en
ouvrant le menu Préférences. Il est possible d'ajouter des extensions pour ajouter des
fonctionnalités supplémentaires

Vous pouvez maintenant commencer à utiliser VS Code pour écrire, déboguer et déployer
votre code.

7.1.2. Installations des frameworks [11]

Pour installer NestJS, vous devez disposer de Node.js et npm (Node Package Manager)
installés sur votre ordinateur. Vous pouvez les télécharger à partir du site web officiel de
Node.js : https://nodejs.org/fr/download/

Une fois Node.js et npm installés, vous pouvez utiliser npm pour installer NestJS en
ouvrant une fenêtre de commande (ou un terminal) et en tapant la commande suivante :

npm install @nestjs/cli

Cela installera la CLI (interface en ligne de commande) de NestJS qui vous permettra
de créer et gérer des projets NestJS à partir de la ligne de commande.

82
 Pour installer Next.js, vous devez utiliser npm pour installer le package next.js. Vous
pouvez le faire en tapant la commande suivante dans votre terminal :

npm install next

Ensuite, pour initialiser un nouveau projet Next.js, vous pouvez utiliser la commande :

npx create-next-app [nom_du_projet]

7.1.3. Installation de Mongo DB

Windows :
Téléchargez la dernière version de MongoDB sur le site officiel.

Extrayez les fichiers de l'archive téléchargée.

Créez un répertoire "data" à la racine de votre lecteur système (C:\data).

Ouvrez une invite de commande et accédez au répertoire dans lequel vous avez extrait les
fichiers MongoDB.

Exécutez la commande suivante pour démarrer le serveur MongoDB : "mongod.exe --dbpath

C:\data".

Mac OS :

Vous pouvez utiliser Homebrew pour installer MongoDB sur macOS. Tout d'abord, ouvrez un
terminal et exécutez la commande : "brew tap mongodb/brew".

Ensuite, exécutez la commande : "brew install [email protected]" pour installer

MongoDB.

Pour démarrer le serveur MongoDB, exécutez la commande : "mongod"

Linux :

Vous pouvez installer MongoDB sur Linux en utilisant le gestionnaire de packages de votre
distribution. Par exemple, sur Ubuntu, vous pouvez utiliser la commande suivante pour
installer MongoDB : "sudo apt install mongodb"

Une fois l'installation terminée, vous pouvez démarrer le serveur MongoDB en lançant la
commande : "sudo service mongod start"

7.1.4. Installation Visual paradigm

Windows :

83
Téléchargez le programme d'installation Windows de Visual Paradigm sur le site officiel.
Double-cliquez sur le programme d'installation pour lancer le processus d'installation.
Suivez les invites pour installer Visual Paradigm sur votre système.
Mac OS :
Téléchargez le programme d'installation macOS de Visual Paradigm sur le site officiel.
Double-cliquez sur le programme d'installation pour lancer le processus d'installation.
Faites glisser Visual Paradigm dans le dossier Applications
Suivez les invites pour installer Visual Paradigm sur votre système.
Linux :
Téléchargez le programme d'installation Linux de Visual Paradigm sur le site officiel.
Ouvrez un terminal, accédez au répertoire où vous avez téléchargé le programme
d'installation, puis exécutez la commande "chmod +x <installer_file_name>"
Exécutez le programme d'installation en exécutant "./<installer_file_name>"
Suivez les invites pour installer Visual Paradigm sur votre système.

7.2. Architecture de l'application

Les micro services sont une approche d'architecture logicielle qui consiste à décomposer
une application en plusieurs services indépendants, chacun gérant une fonctionnalité
spécifique. Ces services communiquent entre eux via des API pour offrir des fonctionnalités
plus complexes.

84
 Chapitre 8. Développement de l'application
8.1. Création de la base de données
Pour la creation de base de donnees avec Mongo DB compass :
1. Assurez-vous que MongoDB Compass est installé sur votre système. Si ce n'est pas le
cas, vous pouvez le télécharger et l'installer à partir du site web de MongoDB.
2. Lancez MongoDB Compass
3. Connectez-vous à un serveur MongoDB en saisissant les informations de connexion
appropriées (adresse IP, port, nom d'utilisateur, mot de passe) dans les champs de
connexion.
4. Une fois connecté, vous verrez une liste de toutes les bases de données existantes sur
le serveur.
5. Cliquez sur le bouton "Create Database" pour créer une nouvelle base de données.
6. Entrez un nom pour la nouvelle base de données dans la boîte de dialogue qui
s'affiche, puis cliquez sur "Create"

Voici une figure pour un exemple :

Figure 22 Mongo DB compass

85
 8.2. Codage de l'application
Extrait de codes :

mport { Logger } from '@nestjs/common';

import { Body, Controller, Get, Param } from '@nestjs/common';
import { Req } from '@nestjs/common/decorators';
import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
import { CategoryService } from
'src/category/services/category/category.service';

@ApiTags('Categories Module')
@Controller('category')
export class CategoryController {
constructor(private readonly categoryService: CategoryService) {}

@Get('/all_categories')
@ApiOperation({ summary: 'Get all categories' })
@ApiResponse({
status: 200,
description: 'All categories',
})
@ApiResponse({
status: 403,
description: 'Forbidden',
})
@ApiResponse({
status: 500,
description: 'Internal Server Error',
})
async findall() {
try {
const listOfAllCategories = await
this.categoryService.getAllCategories();
return {
data: listOfAllCategories,
status: true,
message: 'All categories list',
};
} catch (error) {
return {
data: null,
status: true,
message: 'An error occured',
};
}
}

86
@Get('/top_categories')
@ApiOperation({ summary: 'Get the top categories, Or Random of 10 ' })
@ApiResponse({
status: 200,
description: 'All Top categories',
})
@ApiResponse({
status: 403,
description: 'Forbidden',
})
@ApiResponse({
status: 500,
description: 'Internal Server Error',
})
async getTopCategories() {
try {
const listTopCategories = await this.categoryService.getTopCategories();
return {
data: listTopCategories,
status: true,
message: 'All top categories list',
};
} catch (error) {
return {
data: null,
status: false,
message: 'An error occured',
};
}
}

@Get('/all_subcategories/:parent_id')
@ApiOperation({
summary: 'Get the subcategories of a category or of a subcategory',
})
@ApiResponse({
status: 200,
description: 'All subcategories of a category or of a subcategory',
})
@ApiResponse({
status: 403,
description: 'Forbidden',
})
@ApiResponse({
status: 500,
description: 'Internal Server Error',
})
async getAllSubcategories(@Param('parent_id') parentId: string) {
// eslint-disable-next-line prettier/prettier

87
 // const categoryName = await
this.categoryService.getCategoryDescriptionById(parentId);

try {
// eslint-disable-next-line prettier/prettier
const listSubcategories = await
this.categoryService.getAllSubcategories(parentId);
return {
data: listSubcategories,
status: true,
message: 'All subcategories list ',
};
} catch (error) {
return {
data: null,
status: false,
message:
'An error occured while fetching subcategories ',
};
}
}

@Get('get_one_category/:idCategory')
async getOneCategoriesByLabel(@Param('idCategory') idCategory: string) {
// eslint-disable-next-line prettier/prettier
// const categoryName = await
this.categoryService.getCategoryDescriptionById(parentId);

try {
// eslint-disable-next-line prettier/prettier
const listSubcategories = await
this.categoryService.getOneLabelCategorie(idCategory);
return {
data: listSubcategories,
status: true,
message: 'find Category by label succes ',
};
} catch (error) {
return {
data: null,
status: false,
message:
'An error occured while find category by label ',
};
}

88
 @Get('search_category/:label')
async searchCategoriesByLabel(@Param('label') myLabel: string) {
try {
const listSubcategories = await
this.categoryService.searchCategorie(myLabel);
return {
data: listSubcategories,
status: true,
message: 'find Category succes ',
};
} catch (error) {
return {
data: null,
status: false,
message:
'An error occured while find category by label ',
};
}
}

@Get('search_sub_category/:label/:idCategory')
async searchSubCategoriesByLabel(@Param('label')
label:string,@Param('idCategory') categoryParentId:string) {

try {
const listSubcategories = await
this.categoryService.searchSousCategorie(label,categoryParentId);
return {
data: listSubcategories,
status: true,
message: 'find subCategory succes ',
};
} catch (error) {
return {
data: null,
status: false,
message:
'An error occured while find subcategory',
};
}
}

@Get('get_caracteristic_by_category/:idCategory')
async getCaracteristic(@Param('idCategory') idCategory:string) {

try {
const listSubcategories = await
this.categoryService.getCaracteristicByCategory(idCategory);
return {

89
 data: listSubcategories,
status: true,
message: 'find caracteristic succes ',
};
} catch (error) {
return {
data: null,
status: false,
message:
'An error occured while find category',
};
}
}
}

import Image from "next/image";

import P from "../../assets/images/1.png";
import styles from "../../styles/product.module.scss";
import React, { useRef, useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Pagination, Navigation } from "swiper";
import config from "../../configs/api.config.json";
import Link from "next/link";

export const ProductsInterest: React.FC<{}> = () => {

const [loading, setLoading] = useState(true);
const [products, setProducts] = useState<any[]>([]);

useEffect(() => {
setLoading(true);
fetch(`${config.apiUrl}/product/can_interest`)
.then((res) => res.json())
.then((response) => {
setProducts(response.data);
setLoading(false);
});
}, []);

return (
<>
<div className="container">
<div className={styles.titleCategory}>

90
 Susceptible de vous intéresser
<div className={styles.line}> </div>
</div>
<div>
<Swiper
slidesPerGroup={1}
slidesPerView="auto"
breakpoints={{
374: {
slidesPerView: 2,
spaceBetween: 20,
},
620: {
slidesPerView: 3,
spaceBetween: 30,
},
750: {
slidesPerView: 4,
spaceBetween: 30,
},
975: {
slidesPerView: 5,
spaceBetween: 40,
},
1184: {
slidesPerView: 6,
spaceBetween: 30,
},
}}
loop={true}
loopFillGroupWithBlank={true}
navigation={true}
modules={[Pagination, Navigation]}
className={styles.mySwiper + " categorySwiper"}
>
{loading ? (
<p>Loading</p>
) : (
<>
{products?.map((product, index) => {
return (
<SwiperSlide key={index}>
<div>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstr
ap-icons/1.10.2/font/bootstrap-icons.min.css"
></link>
<div className={`${styles.card} card`}>

91
 <Link
href={{
pathname: `/product/${product?._id}`,
}}
>
<Image
src={P}
className={`${styles.cardimage} card-img-top`}
alt="..."
/>
</Link>

<div className={`${styles.cardbody} card-body`}>

<Link
href={{
pathname: `/product/${product?._id}`,
}}
className={`${styles.cardtitle} card-title`}
>
{product?.name}
</Link>
<p className={styles.cardprice}>
{product.general_price} Ariary
</p>
<div className={styles.cardreview}>
<div className={styles.stars}>
<i className="bi bi-star-fill"></i>
<i className="bi bi-star-fill"></i>
<i className="bi bi-star-fill"></i>
<i className="bi bi-star-fill"></i>
<i className="bi bi-star"></i>
</div>
<a className={styles.review}>14 avis</a>
</div>
<div>
<a
href=""
className={`${styles.cardbutton} btn btn-
orange btn-sm card-button`}
>
<i className="bi bi-cart-fill"></i>
<span> Ajouter au panier</span>
</a>
</div>
</div>
</div>
</div>
</SwiperSlide>
);

92
 })}
</>
)}
</Swiper>
</div>
</div>
</>
);
};

8.3. Présentation de l'application

Page d’accueil

Figure 23 Page d'accueil

93
Detail produit

Figure 24 Détails d'un produit

94
Page Panier

Figure 25 Page panier

95
 CONCLUSION

La mise en place d'un module d'achat dans une application peut apporter de nombreux
avantages pour les utilisateurs et les développeurs.

Du coté utilisateur, un module d'achat permet d'acheter des produits ou des services de
manière simple et rapide, via un processus d'achat intuitif. Il peut également offrir des
fonctionnalités telles que la gestion des paniers d'achat, la sauvegarde des informations de
paiement, et les suggestions de produits similaires ou complémentaires.

Du coté développeur, un module d'achat peut offrir de nombreuses opportunités

commerciales, telles que la vente de produits numériques ou de services en ligne. Il peut
également permettre l'intégration avec des systèmes de paiement tiers, tels que les processeurs
de paiement en ligne, pour faciliter les transactions.

Cependant, il est important de noter qu’on a utilisé les bons outils pour concevoir ce projet
comme le choix de SGBD : Mongo DB, langage de programmation : Javascrpit, et surtout la
méthode de conception UML.

En conclusion, un module d'achat peut être un ajout très utile pour une application, à
condition de le mettre en place de manière sécurisée et de s'assurer que l'expérience utilisateur
est satisfaisante. Il est nécessaire de bien comprendre les avantages et les défis liés à la mise
en place d'un module d'achat avant de le développer pour une application.

XI
 BIBLIOGRAPHIE
[1] Joseph Gabay – David Gabay, 2008. UML 2 ANALYSE ET CONCEPTION. Paris, DUNOD,
242 p.

[2] Pascal Roques, 2006. UML 2. Modéliser une application web. Paris, Eyrolles, 236 pages.

[3] Pascal Roques – Franck Vallée, 2007. UML2 en action. Paris, Eyrolles, 394 pages.

[4] Pascal Roques, 4ième Edition, « Les cahiers du programmeur UML 2, Modéliser une
application Web », Groupe Eyrolles 2008, 247p.

[5] Pascal Roques, 5ième Edition, « UML 2 Par la pratique », Groupe Eyrolles 2006, 357p.

XII
 WEBOGRAPHIE

[7] https://nextjs.org/ consulte le 14 Octobre 2022

[8] https://docs.docker.com/get-started/overview/ consulte le 28 octobre 2022

[9] https://learn.microsoft.com/en-us/dotnet/architecture/microservices/architect-microservice-
container-applications/direct-client-to-microservice-communication-versus-the-api-gateway-
pattern consulte 19 Octobre 2022
[10] https://www.codemag.com/Article/2203081/A-Deep-Dive-into-the-Back-End-for-Front-
End-Pattern consulte le 24 Octobre 2022
[11] https://www.npmjs.com/package/oidc-provider consulte le 15 Octobre 2022

[12] https://nx.dev/more-concepts/micro-frontend-architecture consulte le 12 Octobre 2022

[13] https://microservices.io/ consulte le 16 Octobre 2022

XIII
 GLOSSAIRE
Super Application : Une super application web est une application qui répond aux besoins
des utilisateurs de manière efficace, qui est facile à utiliser, qui est performante, qui est
esthétique, qui est innovante et qui s'adapte aux différents types d'écrans. Elle peut offrir des
fonctionnalités avancées telles que l'intégration d'IA, des fonctions de personnalisation, une
sécurité renforcée, une facilité de maintenance, une scalabilité et une disponibilité élevée. En
général, une application web super est une application qui est conçue pour offrir une
expérience utilisateur exceptionnelle, qui est facile à utiliser et qui est constamment mise à
jour pour répondre aux besoins des utilisateurs.

Processus : En informatique, un processus est une instance d'un programme en cours

d'exécution. Il représente l'activité d'un programme et utilise les ressources système telles que
la mémoire et les entrées/sorties pour effectuer des tâches spécifiques. Un processus est
généralement composé de plusieurs threads d'exécution qui peuvent s'exécuter en parallèle
pour augmenter les performances.

Middleware : Un middleware est un logiciel qui sert d'intermédiaire entre une application
cliente et un système d'information serveur. Dans Nest.js, les middlewares sont utilisés pour
ajouter des fonctionnalités telles que l'authentification et la validation de données à une
application. :

SSR : SSR signifie Rendu côté serveur. Il s'agit d'une technique permettant de rendre les
pages web côté serveur avant de les envoyer au navigateur web du client. Cela permet
d'améliorer les performances et le référencement, ainsi que la possibilité de fournir du contenu
aux clients sans JavaScript.

Banner : Un "banner" est une bannière publicitaire, c'est un format de publicité en ligne qui
est souvent utilisé pour promouvoir un produit ou un service. Il est généralement utilisé pour
attirer l'attention des utilisateurs sur un site web ou une application. Les bannières sont
généralement des images ou des animations qui peuvent être cliquées pour accéder à une page
de destination. Les formats de bannières varient en taille et en apparence, mais ils ont tous
pour objectif de promouvoir une entreprise ou une marque.

XIV
ANNEXES

XV
 TABLE DS MATIERES

CURRICULUM VITE................................................................................................................................... I
SOMMAIRE GENERALE ........................................................................................................................... III
REMERCIEMENTS .................................................................................................................................... V
LISTE DES FIGURES................................................................................................................................. VII
LISTE DES TABLEAUX ............................................................................................................................ VIII
LISTE DES ABREVIATIONS ....................................................................................................................... IX
INTRODUCTION GENERALE ..................................................................................................................... 1
PARTIE I : PRESENTATION GENERALE ...................................................................................................... 2
Chapitre 1. Présentation de l'Ecole Nationale d’Informatique ...................................................... 3
1.1. Information d’ordre général................................................................................................ 3
1.2. Missions et historique ......................................................................................................... 3
1.3. Organigramme institutionnel de l’ENI................................................................................. 6
1.4. Domaine de spécialisation................................................................................................... 8
1.5. Architecture des formations pédagogiques ........................................................................ 8
1.6. Relations de l’ENI avec les entreprises et les organismes ................................................. 12
1.7. Partenariat au niveau international .................................................................................. 13
1.8. Débouchés professionnels avec des diplômés .................................................................. 15
1.9. Ressources humaines ........................................................................................................ 17
Chapitre 2. Présentation de la société d’accueil .......................................................................... 18
2.1. Historique de RELIA ........................................................................................................... 18
2.2. Situation géographique de RELIA ...................................................................................... 18
2.3. Mission de RELIA ............................................................................................................... 19
2.4. Organisation et fonctionnement de RELIA ........................................................................ 19
Chapitre 3. Description du projet................................................................................................. 21
3.1. Formulation ....................................................................................................................... 21
3.2. Objectif et besoins de l'utilisateur..................................................................................... 21
3.3. Moyens nécessaires à la réalisation du projet .................................................................. 22
3.4. Résultats attendus ............................................................................................................. 23
3.5. Chronogramme du projet .................................................................................................. 23
PARTIE II : ANALYSE ET CONCEPTION .................................................................................................... 25
Chapitre 4. Analyse préalable ...................................................................................................... 26
4.1. Analyse de l'existant .......................................................................................................... 26
4.2. Critique de l'existant.......................................................................................................... 27

XVI
 4.3. Conception avant-projet ................................................................................................... 27
Chapitre 5. Analyse Conceptuelle ................................................................................................ 57
5.1. Dictionnaire des données .................................................................................................. 57
5.2. Règles de gestion ............................................................................................................... 57
5.3. Représentation et spécification des besoins ..................................................................... 58
5.4. Spécification des besoins techniques ................................................................................ 65
5.5. Modélisation du domaine ................................................................................................. 67
Chapitre 6. Conception détaillée ................................................................................................. 69
6.1. Architecture du système ................................................................................................... 69
6.2. Diagramme de séquence de conception pour chaque cas d'utilisation ........................... 70
6.3. Diagramme de classe de conception pour chaque cas d'utilisation ................................. 72
6.4. Diagramme de classe de conception global ...................................................................... 77
6.5. Diagramme de paquetages ............................................................................................... 78
6.6. Diagramme de déploiement.............................................................................................. 80
PARTIE III : REALISATION ....................................................................................................................... 81
Chapitre 7. Mise en place de l'environnement de développement ............................................ 82
7.1. Installation et configuration des outils.............................................................................. 82
7.2. Architecture de l'application ............................................................................................. 84
Chapitre 8. Développement de l'application ............................................................................... 85
8.1. Création de la base de données ........................................................................................ 85
8.2. Codage de l'application ..................................................................................................... 85
8.3. Présentation de l'application............................................................................................. 93
CONCLUSION .......................................................................................................................................... XI
BIBLIOGRAPHIE ...................................................................................................................................... XII
WEBOGRAPHIE ..................................................................................................................................... XIII
GLOSSAIRE ............................................................................................................................................ XIV
ANNEXES................................................................................................................................................ XV
TABLE DS MATIERES ............................................................................................................................. XVI
RESUME .............................................................................................................................................. XVIII
ABSTRACT ........................................................................................................................................... XVIII

XVII
 RESUME
Le stage effectue au sein de RELIA Consulting a permis la conception et la réalisation du
module d’achat d’un super application web de gérer dynamiquement l’exploration des
produits et de gestion de panier.

L’application a été développer en pratiquant une méthode de gestion de projet AGILE

Scrum en l’associant avec la méthode de conception 2TUP qui est basée par UML, le langage
de programmation JavaScript reconnu pour sa performance, les framework Nest.js et Next.js,
le SGBD Mongo DB reconnu par sa puissance, Visual Studio Code comme éditeur de texte.

Pour le moment l’application est encore en cours de phase de développements donc

one ne peut pas encore dire si elle répond à l’attente de l’utilisateur en ce moments.

Mots clé : Super Application, Framework, Mongo DB, Module, Processus.

ABSTRACT
The internship carried out within RELIA Consulting allowed the design and the realization of
the purchase module of a super web application to dynamically manage the exploration of
products and basket management.

The application was developed by practicing an AGILE Scrum project management method
by associating it with the 2TUP design method which is based on UML, the JavaScript
programming language recognized for its performance, the Nest.js and Next frameworks. js,
the Mongo DB DBMS recognized by its power, Visual Studio Code as a text editor.

For the moment the application is still in the development phase so we cannot yet say if it
meets the expectations of the user at this time.

Keywords : Super Application, Framework, Mongo DB, Module, Process.

XVIII