RAPPORT DE STAGE

5 ème année

Digitalisation de processus de gestion des commandes

Pour le port de MARSA MAROC

PERIODE :

Du 21 Février 2022 au 10 Juin 2022

Nom & Prénom de l’étudiant : SOUKAINA ISMAILI

Classe ; Filière et option de l’étudiant : SRDI5, Ingénierie de l’information,

Systèmes Réseaux et Développement informatiques

ENCADRANT ENTREPRISE :
Nom et prénom : MAROUANE AMRAOUI

Visa de la validation :

Année universitaire : 2021 / 2022

1
Remerciement

Je tiens à remercier toutes les personnes qui ont contribué au succès de mon
stage et qui m'ont aidé lors de la rédaction de ce rapport.

Tout d'abord, j'adresse mes sincères remerciements à tous les professeurs,

intervenants et toutes les personnes qui par leurs paroles, leurs conseils et leurs
critiques ont guidé mes réflexions et ont accepté de me rencontrer et de répondre
à mes questions durant mes recherches.

Je tiens à remercier vivement mon maitre de stage, Mr Marouane Amraoui,

pour son encadrement et le partage de son expertise au quotidien. Grâce aussi à sa
confiance et ses conseils instructifs j'ai pu m'accomplir totalement dans mes
missions.
Je remercie également toute l'équipe de la société ValueIT pour leur accueil et
leur esprit d'équipe.

Mes plus vifs remerciements s’adressent aussi au cadre professoral et

administratif de l’Estem pour leur contribution à ma formation. Veuillez trouver
dans ce travail, le témoignage de ma gratitude et l’expression de mes sentiments
les plus respectueux.

2
Résumé

Dans le cadre d’un projet de fin d’étude. On a été appelé à réaliser un projet qui
consiste à mettre en place un système de gestion des commandes pour Marsa
Maroc.

De ce fait, notre solution permet de mettre en place un système qui doit permettre
une digitalisation du processus commercial de la collecte des commandes, à la
disponibilité des services en passant par la visibilité des stocks et des livraisons
ainsi que la gestion des prestations liées au navire, manutention et marchandise.
Pour mettre en place ce système et vu sa complexité, nous avons opté pour la
méthode de gestion de projet SCRUM qui suit un processus itératif.

Pour y arriver, il a fallu d’abord une analyse et une conception détaillée des
différents modules en utilisant le langage UML. Ensuite la réalisation du front-end
à base du Framework Angular et le partie back-end conçue autour de la plateforme
Spring Cloud Boot. Enfin nous avons utilisé les systèmes de gestion de base de
données MYSQL.

Le présent document rapporte l’essentiel de ma mission accomplie dans le

cadre de ce projet.

Mots clés: ANGULAR, SPRING BOOT, gestion des projets, SCRUM, UML.

3
Abstract

As part of a graduation project. We were called upon to carry out a project

which consists of setting up an order management system for Marsa Maroc.

As a result, our solution makes it possible to set up a system which must allow a
digitalization of the commercial process from the collection of orders, to the
availability of services, including the visibility of stocks and deliveries as well as
the management of services related to the vessel, handling and merchandise. To set
up this system and given its complexity, we opted for the SCRUM project
management method which follows an iterative process.

To achieve this, it was first necessary to analyze and design the various modules in
detail using the UML language. Then the realization of the front-end based on the
Angular Framework and the back-end part designed around the Spring Cloud Boot
platform. Finally, we used MYSQL database management systems.

This document reports the essentials of my mission accomplished within the

framework of this project.

Keywords: ANGULAR, SPRING BOOT, project management, SCRUM, UML.

4
Liste des abreviations

Abréviation Désignation

UML Unified Modeling Language

MVC Model Vue Controler

CLI Common Language Infrastructure

SGBD Système de gestion base de données

CP Chef de projet

DP Directeur de projet

UML Unified Modeling Language

API Application Presentaion Interface

App Application

JSP JavaServer Pages

JSON JavaScript Object Notation

XML Extensible Markup Language

http HyperText Transfer Protocol

URL Uniform Resource Locator

GET Requête de la ressource située à l'URL spécifiée

POST Envoi de données au programme situé à l'URL

spécifiée

5
Liste des figures

Figure 1 : logo de l'entreprise..................................................................................................................12

Figure 2 : Organigramme de l'entreprise..................................................................................................13
Figure 3 : architecture de la solution........................................................................................................16
Figure 4 : Cycle de développement de Scrum...........................................................................................17
Figure 5 : Planning du projet.....................................................................................................................19
Figure 6: Acteurs du système....................................................................................................................22
Figure 7: Package d'analyse.....................................................................................................................27
Figure 8 : usine logicielle...........................................................................................................................32
Figure 9 : Jira software..............................................................................................................................33
Figure 10 : Dashboard...............................................................................................................................33
Figure 11 : Jenkins.....................................................................................................................................35
Figure 12 : Docker, Kubernetes et OpenShift............................................................................................37
Figure 13 : logo de UML............................................................................................................................39
Figure 14 : diagramme de cas d'utilisation administrateur.......................................................................40
Figure 15 : diagramme de cas d'utilisation lié à la manutention...............................................................41
Figure 16 : diagramme de cas d'utilisation de chef d'escale, technicien et magasinier............................42
Figure 17 : diagramme de cas d'utilisation lié à la manutention...............................................................43
Figure 18 : diagramme de séquence s'authentifier...................................................................................44
Figure 19 : diagramme de classe...............................................................................................................45
Figure 20 : processus lié au navire...........................................................................................................51
Figure 21 : processus lié à la manutention...............................................................................................52
Figure 22 : Processus lié au marchandise: Cas d'export.........................................................................54
Figure 23 : Processus lié au marchandise: Cas d'import + Navire vers magasin....................................55
Figure 24 : Processus lié au marchandise: Cas d'import + Magasin vers client......................................56
Figure 25 : Structure IHM..........................................................................................................................64

6
Liste des tableaux

7
Table des matières

CHAPITRE 1...........................................................................................................................................11

Contexte générale du projet..........................................................................................................11

I. Contexte du projet.....................................................................................................................12

1. Présentation de l’organisme d’accueil..........................................................................................12

1.1 Environnement de l’entreprise.................................................................................................12

1.2 Taille de l’entreprise.................................................................................................................13

1.3 Organigramme de l’entreprise..................................................................................................13

1.4 Valeurs de l’entreprise..............................................................................................................13

2. Problématique générale................................................................................................................14

3. But du projet.................................................................................................................................14

4. Missions du projet........................................................................................................................16

5. Livrables du projet........................................................................................................................16

6. Méthodologies de développement...............................................................................................17

7. Détermination des risques............................................................................................................18

8. Planning du projet.........................................................................................................................18

9. Conclusion.....................................................................................................................................19

CHAPITRE 2...........................................................................................................................................20

Etudes des besoins............................................................................................................................20

1. Expression des besoins fonctionnels...................................................................................21

4.1. Organisation des acteurs.................................................................................................21

4.1.1. Diagramme organisationnel.......................................................................................21

4.1.2. Diagramme des rôles.............................................................................................................21

4.2. Exigences fonctionnelles :.........................................................................................................23

2. Expression des besoins non fonctionnels..........................................................................26

8
3. Package d’analyse.....................................................................................................................26

4. Quelques Règles de gestion...................................................................................................27

4. Conclusion...................................................................................................................................28

CHAPITRE 3...........................................................................................................................................29

Etude Technique.................................................................................................................................29

1. Architecture technique.........................................................................................................30

 API Gateway Layer...................................................................................................................31

 Microservice Layer...................................................................................................................31
 Technical transversal Layer......................................................................................................31
Conclusion............................................................................................................................................37

CHAPITRE 4...........................................................................................................................................38

Conception............................................................................................................................................38

1. Description de la méthode de conception utilisée.....................................................39

Administrer et garantir le fonctionnement et l'exploitation d'un ou plusieurs éléments matériels ou

logiciels (outils, bases de données, messagerie, ...) de l'entreprise ou d'une organisation est assurée par
l’administrateur c’est celui qui veille à la cohérence, à l'accessibilité et à la sécurité des informations.
..............................................................................................................................................................40

 Authentification : permet d’identifier chaque utilisateur, et de lui donner l’accès aux

fonctionnalités propices........................................................................................................................40

 Gérer les utilisateurs et les droits d’accès : permet à l’administrateur d’ajouter ou supprimer ou
modifier ou consulter un user. De plus chaque utilisateur lui est associé un droit dans cette application.
40

 Gérer les fonctionnalités du système : gérer la totalité des fonctions du métier et ajouter des
nouvelles au cas de besoin....................................................................................................................40

CHAPITRE 5...........................................................................................................................................58

Implémentation...................................................................................................................................58

1. Présentation des outils de travail.........................................................................................59

2. Présentation des langages de travail :...........................................................................62

3. Principes d’ergonomie..........................................................................................................64

3.1. Structure de l’IHM.....................................................................................................................64

3.2. Rubriquage................................................................................................................................65

3.3. Navigation principale................................................................................................................66

9
 3.4. Navigation secondaire...............................................................................................................66

3.5. Affichage des messages et des erreurs......................................................................................66

Bibliographie - Webographie....................................................................................................................69

Introduction générale
10
 Aujourd’hui, la digitalisation prend de l’ampleur et commence d’ailleurs
probablement déjà à bouleverser nos habitudes et celles des entreprises, cette
transition qui, elle, peut paraître parfois un peu brusque peut apporter des
collaborateurs efficaces, des clients heureux et plus de rentabilité.

Le concept de processus commercial englobe une suite d’interventions pour

convertir un prospect d’un lead à un client, ce qui joue un rôle essentiel dans la
réussite d'une entreprise en influençant de façon directe l'accroissement du chiffre
d'affaires, la stabilité financière ainsi que l'analyse de futurs marchés et de résultats
potentiels. Dans cette perspective et vue l’importance de cette administration dans
le fonctionnement des entreprises, se présente l’application de mon stage qui a
duré 4 mois et qui permet de digitaliser le processus de gestion des commandes
pour Marsa Maroc avec tous les aspects à prendre en charge, essentiellement la
mise en œuvre de la base de données et l’interactivité entre les différents acteurs
de la société afin interagir avec ses clients et ses prospects pour leur fournir des
produits et des services adéquats au bon moment.

Hormis l'introduction générale et la conclusion, mon travail est subdivisé en six

chapitres, il sera réparti comme suit, le premier chapitre pour la présentation de
l’organisme d’accueil et le contexte général du projet, le deuxième fera l’objet
d’une étude détaillée des besoins fonctionnels et non fonctionnels. Le troisième
sera dédié pour l’architecture technique, ensuite le quatrième englobera les
différents diagrammes du projet et les deux dernier seront consacrés aux outils de
travail choisis et son implémentation avec les interfaces des principales
fonctionnalités. Enfin une conclusion pour dresser le bilan de travail.

11
 CHAPITRE 1
Contexte générale du projet
Dans ce chapitre, nous présentons notre projet de fin
d’étude, à savoir l’organisme d’accueil, la problématique,
les objectifs et les résultats attendus

12
I. Contexte du projet
1. Présentation de l’organisme d’accueil

1.1 Environnement de l’entreprise

Figure 1 : logo de l'entreprise

Créé en 2008, ValueIT est une société de conseil et d’ingénierie en système

d’information. Elle accompagne la croissance des clients en leur proposant des
solutions adaptées à leurs besoins et alignés sur leurs objectifs stratégiques.

ValueIT est structurée en trois pôles d’activité :

 Conseil & Formation

 Développement & Intégration
 Solutions

Dans un contexte où prédomine la rationalité économique et ou le capital

immatériel de l’entreprise jouit d’un rôle prépondérant, nous pensons que le
système d’information représente la pierre angulaire d’une bonne stratégie de
développement. Notre mission est donc de valoriser votre système d’information et
le mettre au service de votre métier.

1.2 Taille de l’entreprise

Secteur d’information Services d’information

Taille de l’entreprise 51-200 employés

Siège sociale Grand Casablanca, Casablanca

Fondée en 2008

Spécialisation Conseil en Ingénierie et système

d'information

Chiffre d’affaire 1 000 000 DHS

13
 1.3 Organigramme de l’entreprise

La structure générale de Value IT est représentée par l’organigramme suivant :

DIRECTEUR GENERAL

SERVICE SERVICE ADMINISTRATIVE SERVICE

EQUIPE IT MARKETING /FINANCIER SUPPORT

CHEF DE TECHNICIENS
DEVELOPPEURS TESTEURS CONSULTANTS COMPTABLE MANAGER ASSITANTE RH
PROJET INFORMATIQUES

Figure 2 : Organigramme de l'entreprise

1.4 Valeurs de l’entreprise

 Créativité : La créativité est au cœur de notre métier. Elle est source de

dynamisme, d’aspiration, de créativité et d’émulation. Mieux encore, elle
nous offre une longueur d’avance sur la concurrence.
 Proactivité : Notre mission première est de rendre service à nos clients. Cela
passe par une réflexion commune sur leurs besoins. Nous anticipons leurs
besoins et leurs attentes afin de nouer des partenariats durables, qui profitent
à chacun.
 Engagement : Notre engagement se nourrit de la satisfaction de nos clients
et de la fierté que nous avons pour notre métier. Nous exerçons notre

14
 activité avec compétence et conscience, et nous nous engageons à honorer
notre parole et nos idées.
 Respect et confiance : Dans toutes nos actions, nous sommes respectueux
envers nos membres, clients, partenaires
 La compétence et non pas la concurrence : la satisfaction client, le savoir-
faire, l’esprit d’équipe, l’excellence, la qualité…

2. Problématique générale

Plébiscitée par de plus en plus d’entreprises, la gestion du processus commercial

s’impose dans des structures de toutes tailles comme un mode d’organisation
particulièrement efficace.
Si elles veulent demeurer concurrentielles, les entreprises n’ont pas le choix, elles
doivent constamment améliorer leur performance et mettre en place un système de
gestion et suivi de processus métier. Ceci a l’avantage de faire gagner du temps
grâce au respect des délais prescrits et de ce fait, il épargne à l’entreprise les
risques et les conflits litigieux qu’elle pourra rencontrer vis-à-vis de
ses partenaires et ses clients contractuels.

3. But du projet

L’objectif de la mise en œuvre d’un système de gestion des commandes, est

d’instaurer une nouvelle plateforme destinée aux collaborateurs et qui aura comme
avantages majeurs :

 Une architecture applicative ouverte et évolutive basée sur les meilleures

technologies du Web

 Des interfaces ergonomiques et conviviales

15
  L’expression des commandes selon le type de prestation (Navire,
manutention ou marchandise)

 Transformation de ces commandes en des bulletins de prestations

 Envoie des bulletins de prestations au service facturation en le notifiant.

 Un suivi des bulletins de prestations

4. Missions du projet

La mission du projet couvre les prestations suivantes :

Etude préalable
Analyse fonctionnelle des besoins fonctionnels et non fonctionnels
Rédaction du cahier de charge
Conception générale
Réalisation des modules
Développement du front-end et back-end
Intégration et déploiement
Tests et recette

5. Livrables du projet

Phases Livrables Date de Livraison Date de validation

Analyse Spécification 01/03/2022 03/03/2022

fonctionnelle fonctionnelle détaillée

Spécification 15/03/2022 18/03/2022

technique

Dossier des maquettes 21/03/2022 25/03/2022

du projet

Dossier de conception 28/03/2022 31/03/2022

16
 Cahier des charges 04/04/2022 10/04/2022

Développement Interfaces utilisateurs 15/04/2022 17/04/2022

du front end

Développement Les services, les 18/04/2017

du back end requêtes, alimentation
de la BD.....

Mise en place Exécutable du module En cours

d’un système de suivi tache et code
test source

Tableau 1 : Tableau des livrables

6. Méthodologies de développement

La méthode adoptée dans de ce projet est la méthode agile SCRUM. Le principe

de base de Scrum est de focaliser l'équipe de façon itérative sur un ensemble de
fonctionnalités à réaliser, dans des itérations de durée fixe de deux à quatre
semaines, appelées Sprints. Chaque Sprint possède un but à atteindre, défini par le
Directeur de produit, à partir duquel sont choisies les fonctionnalités à
implémenter dans ce sprint.

Figure 3 : Cycle de développement de Scrum

7. Détermination des risques

17
 Avant de toucher à une anomalie ou un besoin, une phase primordiale doit
précéder le travail qui va avoir lieu, c'est le fait de prendre connaissance des
risques qu’on peut rencontrer au cours de la réalisation du projet et prévoir des
actions correctives.
Les risques Le type Impact Probabilité Action correctives

1- la contrainte de Risque non Le projet ne sera pas Moyenne -Doubler l’effort et

temps : la gestion du Bloquant achevé dans la date ajuster le planning pour
temps est mal faite prévue respecter la planification
faite au départ.

2-Absence ou Risque non Ralentissement des Faible -Doubler l’effort et

maladie Bloquant travaux travailler un temps extra.

8. Planning du projet
Ci-dessous le planning estimé du projet découpé en 7 itérations

Figure 4 : Description des risques

Figure 5 : Planning du projet

9. Conclusion
Dans ce chapitre, nous avons présenté le cadre général du projet, le chapitre suivant visera la
phase de démarrage du projet, la démarche et planification suivie pour la réalisation,
l’architecture technique et les outils utilisés.

18
 CHAPITRE 2
Etudes des besoins
Dans ce chapitre, nous présentons les besoins
fonctionnels et non fonctionnels du projet ainsi que les
règles de gestion

19
1. Expression des besoins fonctionnels
4.1. Organisation des acteurs

Un acteur représente l’abstraction d’un rôle joué par des entités

externes qui interagissent directement avec le système étudié.

4.1.1. Diagramme organisationnel

Le diagramme organisationnel a pour objectif d’identifier et de comprendre la

structure organisationnelle qui va supporter les processus objet du présent
document.

Cette compréhension est importante pour appréhender le système à travers une

perspective plus large et est fort utile lorsqu’il s’agit de conduire le changement
induit par l’implantation du nouveau système. Le diagramme organisationnel est
détaillé dans l’annexe 1 de ce document.

4.1.2. Diagramme des rôles

20
A la différence du diagramme organisationnel (organigramme), il s’agit ici
d’identifier les rôles joués par les différents acteurs de l’organisation dans leur
interaction avec le nouveau système.

Pour ce faire, le système est considéré comme une boîte noire et l’ensemble des
entités qui interagissent avec lui sont identifiés et structurés selon la nature de leur
interaction. Une même entité externe concrète peut jouer successivement différents
rôles par rapport au système étudié, et par conséquent être modélisée par plusieurs
acteurs. Réciproquement, le même rôle peut être joué simultanément par plusieurs
entités externes concrètes, qui seront alors modélisées par le même acteur.

Figure 6: Acteurs du système

On distingue les acteurs suivants :

Acteur Description

21
Chef d’escale Ce profil s’occupe de la validation des bons de commande
internes coté quai (navire) et l’envoie de ces bons au service
de pré facturation (pour les commandes de type lié à la
marchandise)

Magasinier Ce profil s’occupe de la validation des bons de commande

externes coté magasin et l’envoie de ces bons au service de
pré facturation (pour les commandes de type lié à la
marchandise)

Technicien Ce profil prépare les devis pour les prestation de location du

ressources matériel et humaine

Responsable pré Ce profil crée les commandes/bulletin de prestation, les

facturation valides et les envois au service facturation

Agent maritime Généralement c’est le profil qui valide le devis et envoie le

bon de commande internes

Transitaire C’est le représentant de l’importateur. Il a pour mission de

valider le devis et envoyer le bon de commande externe

Importateur C’est le client final. Il a pour mission de valider le devis et

envoyer le bon de commande externe

Responsable Ce profil reçoit la liste des bulletins de prestation paie non

facturation facturés. Il peut préciser le statut de chaque bulletin de
prestation paie

PortNet Une interface existe déjà avec Portnet (entre Portnet et

AS400)

AS400 Interfaçage pour récupération des données navire, manifeste,

DUM, DAP,…

22
4.2. Exigences fonctionnelles :

L’identification des exigences fonctionnelles démarre dès la phase d’avant-

vente et se poursuit en phase de cadrage et de spécifications.

Nous avons procédé durant toutes ces phases à l’analyse des processus
métier pour en déduire les interactions souhaitées avec le futur système que nous
appellerons cas d’utilisation dans la suite du document.

Ci-après la liste des cas d’utilisation identifiées au démarrage du projet et

développées lors des ateliers fonctionnels en correspondance avec les exigences
fonctionnelles de MARSA MAROC.

Cas d’utilisation Exigence

Administration

UC_ADM_01 Gestion des profils (Ajout/Modification/Suppression)

UC_ADM_02 Gestion des utilisateurs (Ajout/ Modification/Suppression)

UC_ADM_03 Gérer les données de référence

UC_ADM_04 Gérer les paramètres fonctionnels du système

Gestion des prestations liées au navire

UC_PN_01 Lister les bulletins de prestation

UC_PN_02 Valider les bulletins de prestation

UC_PN_03 Envoyer les bulletins de prestations

UC_PN_04 Ajouter les commandes au bulletin de prestation

UC_PN_05 Consulter l’historique des navires

UC_PN_06 Consulter l’historique des bulletins de prestation

Gestion des prestations liées au manutention

UC_PMT_01 Lister les bulletins de prestation

23
UC_PMT_02 Valider les bulletins de prestation

UC_PMT_03 Envoyer les bulletins de prestations

UC_PMT_04 Ajouter les commandes au bulletin de prestation

UC_PMT_05 Consulter l’historique des navires

UC_PMT_06 Consulter l’historique des bulletins de prestation

Gestion des prestations liées au marchandise

UC_PMD_01 Demander un devis informatif lié à la marchandise

UC_PMD_02 Valider/ Annuler/ Réclamer un devis informatif lié à la

marchandise

UC_PMD_03 Modifier le devis informatif lié à la marchandise

UC_PMD_04 Confirmer la commande liée à la marchandise

UC_PMD_05 Envoyer la commande liée à la marchandise

UC_PMD_06 Lister les bulletins de prestations

UC_PMD_07 Valider le bulletin de prestation au service de facturation

UC_PMD_08 Envoyer le bulletin de prestation au service de facturation

Gestion des bulletins de prestation

UC_BP_01 Changer le statut du bulletin de prestation lié au navire,

manutention ou marchandise

UC_BP_02 Lister les bulletins de prestation lié au navire, manutention

ou marchandise avec leurs statuts

24
2. Expression des besoins non fonctionnels

Ce sont des exigences qui ne concernent pas spécifiquement le comportement du

système mais plutôt identifient des contraintes internes et externes du système. Les
principaux besoins non fonctionnels de notre application se résument dans les
points suivants :

 Fiabilité : L’application doit fonctionner de façon cohérente sans erreurs et

doit être satisfaisante.

 Les erreurs : Les ambigüités doivent être signalées par des messages
d’erreurs bien organisés pour bien guider l’utilisateur et le familiariser avec notre
application.

 Ergonomie et bonne Interface : L’application doit être adaptée à

l’utilisateur sans qu’il ne fournisse aucun effort (utilisation claire et facile) de point
de vue navigation entre les différentes pages, couleurs et mise en textes utilisés.

 Sécurité : Notre solution doit respecter surtout la confidentialité des

données personnelles qui reste l’une des contraintes les plus importantes dans les
applications web.

 Une solution ouverte et évoluée : l’application peut être améliorée par

l’ajout d’autres modules pour garantir la souplesse, l’évolutivité et l’ouverture de
la solution.

3. Package d’analyse

L’ensemble des cas d’utilisation listés dans le paragraphe 2.3 ont été structurés en
package d’analyse (module).

25
Un package d’analyse est un espace de nommage qui permet de regrouper des cas
d’utilisation fortement cohérents (qui concernent les mêmes objets ou processus
métiers).

Figure 7: Package d'analyse

Package « Administration » : Ce module garantit le maintien des paramètres

globaux qui régissent le fonctionnement du système, il inclut la gestion des
utilisateurs, des profils, ainsi que la gestion du référentiel métier (Ajout,
modification, archivage).

Package « Prestations » : Ce module centralise la gestion des commandes.

Package « Navire » : Ce module inclut l’ensemble des cas d’utilisation nécessaire

pour la gestion des commandes liées au navire.

Package « Manutention » : Ce module inclut l’ensemble des cas d’utilisation

nécessaire pour la gestion des commandes liées à la manutention.

Package « Marchandise » : Ce module inclut l’ensemble des cas d’utilisation

nécessaire pour la gestion des commandes liées à la marchandise.

4. Quelques Règles de gestion

26
Le tableau qui suit, présente la liste globale des règles de gestion des différents
modules :

Référence Description

RG 01 Chaque profil doit s’authentifier pour accéder au système

RG 02 Seul l’administrateur qui a le droit de créer de nouveaux projets et

clients

RG 03 Deux profils ne peuvent pas avoir le même code.

RG 04 Un utilisateur ne peut avoir deux profils.

RG 05 Une prestation ne peut avoir plusieurs tarifs.

RG 06 Deux clients ne peuvent avoir le même nom, mail et téléphone.

RG 07 Deux entités ne peuvent avoir le même libelle.

RG 08 Un navire peut concerner un ou plusieurs bulletin de prestation.

RG 09 Une commande peut avoir une ou plusieurs prestations.

RG 10 Si le statut des navires est « non-facturé » , on doit notifier le

responsable facturation pour créer une nouvelle facture.

RG 11 Si le client n’a pas validé le devis dans le délai imparti, le

prestataire n’est plus engagé par les termes du devis.

RG 12 Le montant TTC est la somme des tarifs des prestations.

RG 13 Un devis peur concerner un seul client

Tableau 2: Tableau des règles de gestion

4. Conclusion
Dans ce chapitre nous avons étudier les besoins fonctionnels du projet, A
travers cette étude, nous avons soulevé la problématique détectée ainsi que les
objectifs définis. Le chapitre sera dédié pour la présentation de l’étude technique
du projet.

27
 CHAPITRE 3
Etude Technique
Dans ce chapitre, nous présentons les outils de
développement adopté ainsi que l’architecture
technique et applicative du projet

28
1.Architecture technique

1.1 Vue globale de l’architecture :

 Partie front-end

Pour la couche de présentation nous proposons une architecture modulaire

respectant le modèle « component-base UI » à base du Framework Angular.
Angular est un Framework JavaScript qui permet de créer des application web
dynamiques.

Il offre les outils pour développer du code bien organisé, modulaire, basé sur
l'injection de dépendances et prêt pour les tests unitaires (avec Jasmine par
exemple). Ses fonctionnalités techniques portent sur le data-binding bidirectionnel,
l'utilisation de Template, la consommation de services REST et l'extension du
HTML
29
  Partie back-end

La partie back-end repose sur une architecture Micro service cloud native.
Elle est conçue autour de la plateforme Spring Cloud Boot :

 API Gateway Layer

API Gateway permet de créer, de publier, de gérer, de superviser et de
sécuriser tous les API Rest exposées par les micro services de la couche
business et technique.

 Microservice Layer
Les micro services fonctionnels et techniques reposent sur le stack spring
boot et spring cloud pour implémenter les patterns du développement
micro service cloud native (Load balancing, Resilience, Service
discovery, Externalisation de la configuration, …).

 Technical transversal Layer

La couche transverse regroupe l’ensemble des services techniques
réutilisables et transverses pour tous les microservices, la liste non
exhaustive des services :

1. Les services de validation des données pour assurer la bonne

qualité des données et les transformations necessaires.
2. Les services de gestion des transactions pour garantir la cohérence
e l’intégrité des données.
3. Les services de gestion des exceptions, pour assurer un traitement
centralisé et efficace pour toutes les exceptions remontées par les
diffirentes couche d’un microservice.
4. Les services de journalisation, pour assurer une tracabilité avec une
granularité très fine. Les evenements générés sont exploitables par
le système ELK (Elasticsearch, Logstash et Kibana)

30
 1.2 Usine logicielle :

L’usine logicielle se positionne au cœur des approches d’industrialisation du

développement. Elle permet d’améliorer la productivité des développements,
et mettre en œuvre les bonnes pratiques de développement de façon
automatisé.

Une usine logicielle a pour finalité d’automatiser le processus de construction

du logicielle en passant par la compilation, la vérification de la qualité
statique du code, l’exécution des tests unitaires et la génération du package
finale. Nos équipes ont l’habitude de travailler avec les outils de l’usine
logicielle et tirent profit de la puissance d’aumotisation des tâches d’audit et
de build qu’offre celle-ci sur leurs projets. Le schéma ci-dessous illustre
l’architecture de l’usine logicielle utilisée au sein de nos projets :

Figure 8 : usine logicielle

31
Jira Software :

Jira Software est un outil de gestion de projet Agile qui prend en charge toute
méthodologie Agile, qu'il s'agisse d'un Scrum, d'un kanban ou de votre propre
création. Grâce à un seul outil, vous pouvez planifier, suivre et gérer tous vos projets
de développement logiciel en Agile, des tableaux aux rapports Agile. Les équipes
Agiles restent concentrées sur la livraison de valeur itérative et incrémentielle, aussi
rapidement que possible, avec des tableaux Scrum personnalisables.

Figure 9 : Jira software

Sprint après sprint, les équipes bénéficient d'informations en temps réel,

instantanément exploitables, grâce à plus d'une douzaine de rapports prêts à
l'emploi.

Figure 10 : Dashboard
GitLab :

Figure 11 : logo de GitLab

Git est un gestionnaire de version

décentralisée. Il a été créé par Linus Torvarlds également créateur du noyau Linux.
A l'origine, Linus Torvarlds a développé Git pour proposer une alternative libre a un
gestionnaire de version décentralisée baptisé BitKeeper. Grâce à git, n'importe qui
est en mesure de :
 Cloner un repository
 Effectuer/Commiter des changements en local
 Générer des patchs
 Envoyer ses changements "upstream" s’il en a les droits
 Suivre le développement "upstream"

Parmi ses autres avantages, nous pouvons également citer :

 Les identifiants universels de commits (SHA1), permettant ainsi d'identifier

un objet git de façon unique. Que ce soit un fichier, un répertoire, un commit
etc.
 Il est multi-protocole, les échanges entre repository peuvent se faire via
http(s), ssh, rsync, ou encore en utilisant le protocole Git lui-même.
 Un stockage des objets efficace grâce à la compression. Permettant ainsi de
sauver beaucoup d'espace disque
 Tout le monde dispose du repository entier, et peut ainsi consulter les logs
et/ou changements entre les révisions sans qu'il soit nécessaire de se
connecter à un serveur maître.
 Et enfin, git est très efficace pour la gestion de branches de développement.

33
Jenkins :

Jenkins est un outil d’intégration continue permettant entre autres d’améliorer

la qualité d’un logiciel en accélérant et en automatisant aussi bien les processus
de contrôle du code que le déploiement dans les environnements de test, de recette
et pré-production/production. La plateforme Jenkins est extensible via une
marketplace de plugins.

Figure 12 : Jenkins

SonarQube :

Sonar est un serveur de contrôle de qualité logiciel, développé par la société Hortis.
Le but principal de Sonar est de proposer une synthèse des résultats de différents
outils de contrôle de qualité existants. À cela viennent s’ajouter plusieurs méthodes
de calcul permettant d’évaluer la qualité globale du projet. Pour cela, Sonar utilise
les outils suivants :

 JavaNCSS, pour les métriques de code source.

 Checkstyle, pour les mesures de règle de codage.
 PMD, pour détecter des problèmes comme le code dupliqué, les méthodes
trop complexes, etc.
 Surefire, pour lancer les tests unitaires
 Cobertura, pour calculer la couverture des tests unitaires

34
Sonatype Nexus :

C’est un gestionnaire de référentiel c’est à dire une application serveur dédié conçu
pour gérer les référentiels des composants binaires. L'utilisation d'un gestionnaire de
dépôt est considérée comme une meilleure pratique essentielle pour toute utilisation
importante de Maven, il a pour but de fournir :

 Un hébergement des artéfacts de projets dans des dépôts dédiés

Un hébergement des librairies tierces non disponibles dans des dépôts Maven
publiques :
 Soit parce que ce sont des librairies commerciales ou à accès restreint,
 Soit parce que le projet Open Source le supportant ne l’a pas déployé sur un
dépôt public
 Un accès plus rapide aux dépôts Maven publics en fournissant un niveau de
cache garantissant la stabilité de la construction des projets

Figure 13 : SonarQube

35
Harbor :

C’est un annuaire (registry) d’images de conteneurs open source qui sécurise les
images à l’aide de contrôles d’accès basés sur des rôles, d’analyses des images à la
recherche de vulnérabilités et de signature d’images comme étant de confiance.
Harbor a comme but d’aider à gérer de manière cohérente et sécurisée les images
sur des plates-formes cloud comme Kubernetes et Docker.

Il permet donc de stocker vos images privées en local ou d’en faire un cache pour
éviter des problèmes de réseau au téléchargement. Il permet aussi d’analyser des
images pour vérifier qu’elles ne contiennent pas de failles de sécurité connues et de
vérifier les signatures pour ne distribuer que des images signées.

Figure 14 : Harbor

OpenShift :

36
C’est une plateforme de conteneurs d’applications open source, principalement
basée sur Docker et orchestrée à l’aide de la gestion des clusters de conteneurs
Kubernetes, qui est en charge du démarrage et du « scaling » des conteneurs.

OpenShift propose également des objets de configuration comme :

 Construire des images

 Intégrer un registre privé paramétrable pour séparer les images par projet
 Proposer une interface utilisable par un « non-administrateur »
 Proposer des routeurs vers les applications
 Gérer les droits, restriction, authentification, etc…
 La gestion d’environnements cloisonnés (Dev/Test/Pré-Prod/Prod)

La figure suivante illustre la relation d’encapsulation entre les trois technologies :

Docker, Kubernetes et OpenShift

Figure 15 : Docker, Kubernetes et OpenShift

Conclusion
Après avoir présenté les outils de développement, l’architecture technique et
applicative du projet, le chapitre suivant concerne le sprint 1 de gestion des
projets.

37
 CHAPITRE 4
Conception
Dans ce chapitre, nous présentons la conception détaillée de
l’application, commençant par la description de la méthode
utilisée puis l’analyse et conception et l’élaboration des
diagrammes

38
1. Description de la méthode de conception
utilisée

Figure 16 : logo de UML

De la même façon qu'il vaut mieux dessiner une maison avant de la

construire, il vaut mieux modéliser un système avant de le réaliser c’est pour
cela, on va commencer notre projet avec la conception qui représente une phase
primordiale et déterminante pour produire une application de haute qualité.

Dans ce stade, je vais détailler mon choix conceptuel en un utilisant le langage

UML, un langage visuel qui me fournit des diagrammes qui donne une vision
différente du projet à traiter J’ai choisi cet outil grâce à ces points forts qu’je cite
ci-dessous :

 Un support de communication performant

 Un cadre l'analyse qui facilite la compréhension
 Son caractère polyvalent et sa souplesse en font un langage universel.
 Sa notation graphique permet d'exprimer visuellement une solution objet

2. Diagramme de cas d’utilisation

Ils sont des diagrammes UML utilisés pour donner une vision globale du
comportement fonctionnel d'un système logiciel. Ils décrivent les
fonctionnalités employées par les utilisateurs et permettent de structurer les
besoins des utilisateurs et les objectifs correspondants d'un système.

Dans les figures qui suit, je présenterais les cas d’utilisation qui mettent en
évidence les principales fonctionnalités de chaque acteur dans le système.

39
2.1. Diagramme de cas d’utilisation d’administration
du système :

Administrer et garantir le fonctionnement et l'exploitation d'un ou plusieurs

éléments matériels ou logiciels (outils, bases de données, messagerie, ...) de
l'entreprise ou d'une organisation est assurée par l’administrateur c’est celui
qui veille à la cohérence, à l'accessibilité et à la sécurité des informations.
 Authentification : permet d’identifier chaque utilisateur, et de lui donner
l’accès aux fonctionnalités propices.
 Gérer les utilisateurs et les droits d’accès : permet à l’administrateur d’ajouter
ou supprimer ou modifier ou consulter un user. De plus chaque utilisateur lui
est associé un droit dans cette application.
 Gérer les fonctionnalités du système : gérer la totalité des fonctions du métier
et ajouter des nouvelles au cas de besoin

Figure 17 :
diagramme de cas d'utilisation administrateur

40
2.2. Diagramme de cas d’utilisation du responsable
pré facturation :

Par définition, la pré-facturation détermine l’action de facturer un bien ou un

service avant que ce dernier soit payé ou effectué. Son rôle est purement
informationnel, mais permet de poser la base de la relation client. Elle est
très utilisée pour le commerce international, car commode pour sa flexibilité.
Le responsable de pré facturation c’est celui qui encadre l’équipe de saisie et
pré-facturation. Il fait l’interface avec différentes entités : rédaction,
technique, recouvrement, exécution. Il traite les réclamations.

 Gérer les bulletins de prestations : permet d’afficher, ajouter, supprimer la

liste des bulletins de prestations non facturés.
 Consulter l’historique : permet d’accéder aux archives des navires et des
BP.
 Valider et envoyer les bulletins de prestations : Après la vérification du
master et détails, il permet de valider le BP et l’envoyer au service de
facturation.

41
2.3. Diagramme de cas d’utilisation de chef d’escale,
technicien et magasinier :

Figure 19 : diagramme de cas d'utilisation de chef d'escale, technicien et magasinier

42
2.4. Diagramme de cas d’utilisation du responsable de
facturation :

Par définition la facturation est obligatoire pour toute vente de marchandises

ou de prestations de services dans le cadre d’une activité professionnelle, la
facture est le document établi par un entrepreneur, ou un prestataire de
services. Il s’adresse à un client. La facture permet de demander le paiement
à la suite de la réalisation de la prestation. Elle engage le débiteur à régler le
montant déterminé. Il est d’usage de demander un accord sur la base d’un
devis ou d’un bon de commande, avant d’éditer une facture.

Le responsable de la facturation est chargé de mettre en œuvre, de suivre et

de contrôler le cadre budgétaire, en collaboration avec ses interlocuteurs
internes et externes. Il assure notamment le management d'une équipe qui
assure notamment le suivi du traitement des factures, vérifie les coordonnées
des clients dans leurs dossiers... Enfin, il gère directement la relation clients
sur l’ensemble des problématiques propre à la facturation (réglée, non payée,
payement en cour...).

Figure 20 : diagramme de cas d'utilisation lié à la manutention

43
3. Diagramme de séquence

Pour mieux concrétiser les interactions entre les acteurs du système vis-
àvis de l’application et la base de données, je suis amenée à traduire mes
scénarios en diagrammes de séquence. Les diagrammes de séquence servent
à illustrer les cas d’utilisation à travers des messages échangés entre les
lignes de vie, présentés dans un ordre chronologique. Ils permettent de
représenter des collaborations entre les objets selon un point de vue
temporel, on y met l'accent sur la chronologie des envois de deux types
messages, le premier est dit synchrone utilisé pour représenter des appels de
fonction ordinaires dans un programme, le deuxième est appelé message
asynchrone, étant utilisé pour représenter la communication entre des threads
distincts.
sd s'authentifier

systeme BD

Utilisateur

saisir login et password puis validation()

vérification()

alt

pas de résultat()

notification d'echec et
réaffichage de formulaire()

pas de résultat()

Direction vers la page principale()

Figure 21 : diagramme de44

séquence s'authentifier
4. Diagramme de classe

Les diagrammes de classes expriment de manière générale la structure statique

d’un système, en termes de classes et de relations entre elles. De même qu’une
classe décrit un ensemble d’objets, une association décrit un ensemble de liens ;
les objets sont des instances de classes et les liens sont des instances de relation

Nous avons procédé durant toutes les phases de la conception à l’analyse de

toutes les classes pour en déduire les interactions entre les différents composants
du système.

La figure ci-dessous englobe toutes les classes avec leurs attributs.

Figure 22 : diagramme de classe

45
 5. Dictionnaire de données

Un dictionnaire des données est une collection de données de référence

nécessaire à la conception d'une base de données relationnelle. Il décrit des
données aussi importantes que les clients, les nomenclatures de produits et de
services, les annuaires...

Le tableau ci-dessous regroupe les noms des entités et de leurs propriétés ainsi
que leur type et obligation. Cette étape permet de répertorier toutes les données
que la base de données doit contenir.

Entité Propriété Description Type Obligatoire

Navire id L’Identifiant du navire Long Oui

Name Le nom du navire String Oui

N_escale Le numéro d’escale Double Oui

Consignataire L’armateur du navire String Oui

Date_navire La date sortie du navire Date Oui

Etat L’état du navire String Oui

Marchandise id L’identifiant de marchandise Long Oui

Designation Le nom de la marchandise String Oui

Reference La référence de la marchandise String Oui

Quantity La quantité de la marchandise Double Oui

Escale id L’identifiant de l’escale Long Oui

N_escale Le numéro d’escale Int Oui

Mouvement id L’identifiant du mouvement Int Oui

description La description du mouvement String Oui

46
 Date_mouvement La date du mouvement Date Oui

Unite id L’identifiant de l’unité Long Oui

Organisationnelle
Label Le nom de l’unité String Oui

Type Le type de l’unité String Oui

Description La description de l’unité String Oui

Client id L’identifiant du client Long Oui

Name Le nom du client String Oui

Email L’adresse mail du client String Oui

Phone Le numéro téléphone du client String Oui

TypeClient id L’identifiant de type client Long Oui

Name Le nom du type client String Oui

Devis id L’identifiant du devis Long Oui

Nom_navire Le nom du navire String Oui

Date La date du devis Date Oui

BL Le connaissement maritime Int Oui

Nombre_colis Le nombre du colis Int Oui

Poids Le poids du colis Double Oui

Designation Le nom du devis String Oui

Import_Export Le type du vente Enum Oui

MM_MC Le type d’entrée Enum Oui

N_Mafi Le numéro de mafi Int Oui

Engin_Colis Engin ou colis Enum Oui

Num_Bon_Comma Le numéro du bon de commande Int Oui

nde

Nom_client Le nom du client String Oui

Date_facturation La date de facturation client Date Oui

Date_sortie La date sortie du navire Date Oui

47
LigneDevis Designation Le nom de la marchandise String Oui

Quantity La quantité de la marchandise Int Oui

Nombre_Unite Le nombre d’unité Double Oui

Total Le total du devis Double Oui

Commande id L’identifiant de la commande Int Oui

N_credit Le numéro du crédit Int Oui

N_commande Le numéro de commande Int Oui

Navire Le nom du navire String Oui

Connaissement Le numéro de connaissement Int Oui

Bulletin_reception Le numéro du bulletin de réception Int Oui

N_escale Le numéro d’escale Int Oui

Consignataire L’armateur du navire String Oui

Date_amarage La date d’arrivée du navire au port Date Oui

Date_désamarrage La date de début de la traversée Date Oui

LHT La longueur hors-tout Int Oui

Jauge_brute La capacité de transport du navire Double Oui

LigneCmd Prestation Le nom de la prestation String Oui

Date La date de prestation Date Oui

Heure L’heure de prestation Date Oui

Sens_trafic Le sens du trafic :I/E/T Enumme Oui

ration

Produit Le nom du produit String Oui

Tc_suppl Le type du client : Suppl. String Oui

Tc_conv Le type du client : Conv. Boolean Oui

Nombre Le nombre de prestation Int Oui

Tonnage_reel Le poids réel Int Oui

Tonnage_minimum Le poids minimum Int Oui

48
 Description La description de la commande String Oui

Prestation id L’identifiant de la prestation Long Oui

Designation Le nom de la prestation String Oui

Type_prestation Le type de la prestation String Oui

Type_tarif Le type du tarif Int Oui

TypePrestation id L’identifiant de type prestation Long Oui

Name Le nom de type prestation String Oui

Sous-type id L’identifiant de sous type Long Oui

Prestation prestation

Name Le nom de sous type prestation String Oui

Tarif id L’identifiant du tarif Long Oui

TarifHT Le tarif hors taxe Double Oui

TarifTTC Le tarif tout taxe compris Double Oui

BulletinPrestation id L’identifiant de bulletin de Long Oui

prestation

Description Le nom de la prestation String Oui

Date La date de bulletin de prestation Date Oui

Heure L’heure de bulletin de prestation Date Oui

N_dossier_prestati Numéro dossier de prestation Int Oui

on

Comptant_credit Comptant/credit Enumme Oui

ration

Code_client Le code du client Int Oui

Nom_client Le nom du client String Oui

Escale Le numéro d’escale Int Oui

Moyen_odep_clien Moyen ODEP/client(o/c) Boolean Oui

t

Code_nature Numéro dossier de prestation Int Oui

49
 Pre_validation Pre validation Boolean Oui

Date_depot La date du depot Date Oui

Date_execution La date d’execution Date Oui

Texte Escale String Oui

N_Bon_commande Le numéro du bon de comande Int Oui

N_Commande Le numéro de la commande Int Oui

LigneBP Prestation Le nom de la prestation String Oui

Date La date de prestation Date Oui

Heure L’heure de prestation Date Oui

Sens_tranfic Le sens du trafic :I/E/T Enumme Oui

ration

Produit Le nom du produit String Oui

Tc_suppl Le type du client : Suppl. String Oui

Tc_conv Le type du client : Conv. Boolean Oui

Nombre Le nombre de prestation Int Oui

Tonnage_reel Le poids réel Int Oui

Tonnage_minimum Le poids minimum Int Oui

6. Diagramme d’activité

Les diagrammes d'activités permettent de mettre l'accent sur les

traitements. Ils sont donc particulièrement adaptés à la modélisation du
cheminement de flots de contrôle et de données. Ils permettent ainsi de
représenter graphiquement le déroulement d'un cas d'utilisation. Dans la
phase de conception, ils sont particulièrement adaptés à la description
textuelle. De plus, leur représentation sous forme d'organigrammes les rend
dynamiques.

50
 6.1 Processus lié au navire

Ce type de commande à une relation avec toutes les prestations du navire

comme lamanage, déhalage …

La figure suivante décrit le processus d’une commande liée aux prestations du

navire :

Proces
s

P01-05

P01-06

P01-07

P01-08

P01-09

P01-10

Figure 23 : processus lié au navire

6.2 Processus lié à la manutention

Les commandes liées à la manutention désignent tous ce qui a un rapport

avec le déplacement chargement/déchargement de la marchandise depuis les
navires.

51
La figure suivante décrit le processus d’une commande liée aux prestations de la
manutention :

Figure 24 : processus lié à la manutention

Processu Description Cas d’utilisation

s correspondant

P02-01 Recevoir la dernière version validée du UC_PMT_01

fichier manifeste

P02-02 Vérifier les informations du manifeste UC_PMT_02

avec ceux du bordereau de pointage

P02-03 Notifier que les informations sont UC_PMT_03

différentes

P02-04 Générer les commandes UC_PMT_04

P02-05 Lister les bulletins de prestation UC_PMT_05

P02-06 Envoyer les bulletins de prestation UC_PMT_06

P02-07 Valider Le bulletin de prestation UC_PMT_07

P02-08 Ajouter les commandes au bulletin de UC-PMT_08

prestation

P01-09 Consulter les bulletins de prestation UC_BP_01

52
 P01-10 Facturer les bulletins de prestation UC_BP_02

6.3 Processus lié à la marchandise

Pour les commandes liées à la marchandise, elles permettent la location

des ressources matérielles et humaines nécessaires pour la manipulation de la
marchandise.

Il existe 3 processus :

 Le premier cas est celui de l’export de la marchandise

 Le deuxième cas concerne l’import de la marchandise et sa
manipulation depuis le navire vers le magasin
 Et le dernier s’intéresse à l’import de la marchandise et sa
manipulation depuis le magasin vers le client

6.3.1 Cas d’export

53
 La figure suivante décrit le processus d’une commande liée aux
prestations à la marchandise dans le cas d’export :

Figure 25 : Processus lié au marchandise: Cas d'export

Processu Description Cas d’utilisation
s correspondant

P03-01 Demander un devis UC_PMD_01

P03-02 Elaboration du devis UC_PMD_01

P03-03 Validation du devis UC_PMD_02

P03-04 Générer les commandes UC_PMD_03

P03-05 Générer les bulletins de prestation UC_PMD_04

P03-06 Lister les bulletins de prestation UC_PMD_05

P03-07 Valider les bulletins de prestation UC_PMD_06

P03-08 Envoyer les bulletins de prestation UC_PMD_07

P01-09 Consulter les bulletins de prestation UC_BP_01

6.3.2 Cas d’import et la manipulation de la marchandise depuis le

navire vers le magasin

54
 La figure suivante décrit le processus d’une commande liée aux
prestations à la marchandise dans le cas d’import et la manipulation de la
marchandise depuis le navire vers le magasin :

Figure 26 : Processus lié au marchandise: Cas d'import + Navire vers magasin

Processu Description Cas d’utilisation

s correspondant

P03-12 Demander un devis UC_PMD_01

P03-13 Valider le devis UC_PMD_01

P03-14 Envoyer le devis UC_PMD_01

P03-15 Elaboration du devis UC_PMD_02

P03-15 Générer les commandes UC_PMD_03

P03-16 Générer les bulletins de prestation UC_PMD_04

P03-17 Lister les bulletins de prestation UC_PMD_05

P03-18 Valider les bulletins de prestation UC_PMD_06

55
 P03-19 Envoyer les bulletins de prestation UC_PMD_07

P03-20 Consulter les bulletins de prestation UC_BP_01

P03-21 Facturer les bulletins de prestation UC_BP_02

6.3.3 Cas d’import et la manipulation de la marchandise depuis le

magasin vers le client
La figure suivante décrit le processus d’une commande liée aux prestations à la
marchandise dans le cas d’import et la manipulation de la marchandise depuis le magasin vers le
client :

Figure 27 : Processus lié au marchandise: Cas d'import + Magasin vers client

Processu Description Cas d’utilisation

56
 s correspondant

P03-22 Demander un devis UC_PMD_01

P03-22 Valider le devis UC_PMD_01

P03-22 Envoyer le devis UC_PMD_01

P03-23 Elaboration du devis UC_PMD_02

P03-24 Générer les commandes UC_PMD_03

P03-25 Générer les bulletins de prestation UC_PMD_04

P03-26 Lister les bulletins de prestation UC_PMD_05

P03-27 Valider les bulletins de prestation UC_PMD_06

P03-28 Envoyer les bulletins de prestation UC_PMD_07

P03-29 Consulter les bulletins de prestation UC_BP_01

P03-30 Facturer les bulletins de prestation UC_BP_02

7. Diagramme de déploiement

Dans UML, les diagrammes de déploiement modélisent l'architecture physique

d'un système. Les diagrammes de déploiement affichent les relations entre les
composants logiciels et matériels du système, d'une part, et la distribution
physique du traitement, d'autre part.

Les diagrammes de déploiement présentent la disposition physique des noeuds

dans un système réparti, les artefacts qui sont stockés sur chaque noeud et les
composants et autres éléments que les artefacts implémentent. Les noeuds
représentent des périphériques matériels tels que des ordinateurs, des détecteurs
et des imprimantes, ainsi que d'autres périphériques qui prennent en charge
l'environnement d'exécution d'un système. Les chemins de communication et les
relations de déploiement modélisent les connexions dans le système.

57
 Figure 28 : diagramme de déploiement

8. Conclusion

Dans le chapitre en cours, nous avons décrit le backlog du sprint « gestion des
projets », la modélisation ainsi que la phase de réalisation.
Les chapitres qui suivent reprendront les mêmes étapes pour les activités
restantes : tâches, ressources, suivi taches

58
 CHAPITRE 5
Implémentation
Dans ce chapitre, nous présentons les outils de
développement ensuite les captures de chaque
interface du projet

59
 1. Présentation des outils de travail

Adobe xd :

Adobe XD est un outil de conception d’expérience

utilisateur vectoriel pour les applications Web et les applications mobiles,
développé et publié par Adobe Inc. Il existe des versions pour iOS et Android
pour aider à prévisualiser le résultat du travail directement sur les appareils
mobiles. Adobe XD permet le wireframing de sites Web et la création de
prototypes cliquables.

Entreprise Architecte :

Enterprise Architect est un logiciel de modélisation et de conception UML,

édité par la société australienne Sparx Systems. Couvrant, par ses
fonctionnalités, l'ensemble des étapes du cycle de conception d'application, il est
l'un des logiciels de conception et de modélisation les plus reconnus.

WebStorm :

WebStorm est un IDE pour les langages Web (HTML, CSS et

JavaScript), il améliore la productivité et offre une expérience de développement
agréable grâce un éditeur intelligent avec l'autocomplétion, la détection d'erreur
à la volée, les refactorisations et le formatage de code, etc. Il offre un support
avancé pour Node.js et les frameworks populaires comme Angular, React.
60
Intellij IDE :

Intellij IDEA est un environnement de développement intégré (destiné au

développement de logiciels informatiques reposant sur la technologie Java. Il est
développé par JetBrains et disponible en deux versions, l'une communautaire,
open source et l'autre propriétaire, protégée par une licence commerciale. Tous
deux supportent les langages de programmation Java, Kotlin, Groovy et Scala.

PostgreSQL :

PostgreSQL est un système de gestion de base de données relationnelle et objet,

Ce système est comparable à d'autres systèmes de gestion de base de données,
qu'ils soient libres (comme Maria DB), ou propriétaires (comme Oracle,
MySQL, et Microsoft SQL Server). PostgreSQL n'est pas contrôlé par une seule
entreprise, mais est fondé sur une communauté mondiale de développeurs et
d'entreprises.

MySQL Workbench :

MySQL Workbench est un logiciel de gestion et d'administration de bases de

données MySQL créé en 2004. Via une interface graphique intuitive, il permet,
entre autres, de créer, modifier ou supprimer des tables, des comptes utilisateurs,

61
et d'effectuer toutes les opérations inhérentes à la gestion d'une base de données.
Pour ce faire, il doit être connecté à un serveur MySQL.

Apache :

Apache est un logiciel qui s’exécute sur un serveur. Son travail

consiste à établir une connexion entre un serveur et les navigateurs des
visiteurs du site web (Firefox, Google Chrome, Safari, etc.) tout en délivrant
des fichiers entre eux. Apache est un logiciel multiplateforme, il fonctionne
donc à la fois sur les serveurs Unix et Windows.

Bootsrap :

Bootsrap est une collection d'outils utiles à la création du design (graphisme,

animation et interactions avec la page dans le navigateur, etc.) de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des
formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi
que des extensions JavaScript en option.

Docker :

62
Docker permet de faciliter les déploiements d'application et la gestion
du dimensionnement de l'infrastructure. Cette technologie s'appuie sur une
brique d'API standard (LXC sur Linux) afin de fournir une couche d'abstraction
permettant aux conteneurs de s'exécuter sur n'importe quelle machine

2. Présentation des langages de travail :

Angular :

Angular est un framework côté client, open source, basé

sur TypeScript, il permet la création d’applications Web accessibles via une
page web unique qui permet de fluidifier l’expérience utilisateur et d’éviter les
chargements de pages à chaque nouvelle action. Le Framework est basé sur une
architecture du type MVC et permet donc de séparer les données, le visuel et les
actions pour une meilleure gestion des responsabilités.

Parmi ces caractéristiques on trouve la vitesse et la performance, il transforme

les modèles en code hautement optimisé pour les machines virtuelles JavaScript
actuelles et la productivité, on peut créer rapidement des vues d'interface
utilisateur grâce à une syntaxe de modèle simple et puissante.

Java :

Java est une technique informatique développée par

Sun Microsystems puis acquise par Oracle à la suite du rachat de l'entreprise.
Défini à l'origine comme un langage de programmation, Java a évolué pour
devenir un ensemble cohérent d'éléments techniques et non techniques, il est
utilisé dans une grande variété de plates-formes depuis les systèmes embarqués
et les téléphones mobiles, les ordinateurs individuels, les serveurs, les
applications d’entreprise...

63
Grâce aux technologies Java, les développeurs peuvent écrire des logiciels sur
une plate-forme, les exécuter sur d’autres plateformes, créer des programmes qui
peuvent être exécutés dans un navigateur web, développer des applications côté
serveur. Cette multiplicité de support est avantageuse, car cela permet aux
développeurs de créer un programme et de le faire fonctionner sur plusieurs
ordinateurs sans devoir recréer un nouveau programme.

Springboot :

Spring Boot est un framework de développement JAVA. C'est une déclinaison

du framework classique de Spring qui permet essentiellement de réaliser des
micro services (ce sont la majeure partie du temps des services web qui sont
Parmi ces avantages on trouve la légèreté pour faire tourner votre service.,
l’intégration facilitée puisqu’il s'intègre particulièrement bien dans une
architecture orientée micro services et la simplicité de prise en main car il
permet donc de créer une API de services très simplement.

SQL :

SQL est un langage informatique normalisé

servant à exploiter des bases de données relationnelles. La partie langage de
manipulation des données de SQL permet de rechercher, d'ajouter, de modifier
ou de supprimer des données dans les bases de données relationnelles. Ce
langage est complet. Il va être utilisé pour lire, écrire, modifier et supprimer les

64
L’un des principaux intérêts du SQL est la portabilité. Cela veut dire qu’un
logiciel qui utilise une base de données peut fonctionner avec n’importe quelle
base de données. Il suffira de lui indiquer avec quelle base de données il doit
dialoguer.

3. Principes d’ergonomie
3.1. Structure de l’IHM

Chaque page de l’application

Figure 29 : Structure IHM
est composée de 4 zones dont le contenu peut varier selon le contexte d’appel et
la page choisie :

1 => L’entête qui contient le logo permettant de revenir à la page

d’accueil, la zone des notifications qui permet d’afficher les dernières
notifications, et une troisième zone qui affiche le nom de l’utilisateur connecté
et permet l’accès aux informations du compte.

2 => La barre de menus qui permettra d’accéder aux fonctionnalités

autorisées pour l’utilisateur connecté. La liste des rubriques est développée dans
le paragraphe suivant.

65
 3 => Le fil d’Ariane qui sera présent sur toutes les pages de l’application
et qui permettra aux utilisateurs de se situer dans l’arborescence des
fonctionnalités du système et de lui donner un aperçu du chemin parcouru
depuis la page d’accueil pour arriver à la page en cours.

4 => La zone principale de la page qui affiche selon le contexte le contenu

de la page choisie. Cette zone est dynamiquement élaborée à partir des actions
menées.

3.2. Rubriquage
L’objectif du travail de Rubriquage est de permettre un accès structuré et
aisé aux fonctionnalités offertes par le futur système. Ci-après le Rubriquage
retenu :

Niveau 1 Niveau 2 Niveau 3

Administration Utilisateurs

Profils

Compte personnel

Prestation Navire Gestion bulletin prestation

Historique navires

Historique bulletins de prestation

Manutention Gestion bulletin prestation

Historique navire

Historique bulletin prestation

Marchandise Gestion devis

Gestion commande

Gestion bulletin prestation

Historique devis/commande/BP

Paramétrage Cahier des tarifs

66
 Info navires

Gestion clients

Gestion Entités

3.3. Navigation principale

Un bloc de navigation vertical sera affiché constamment sur les pages de
l’application. Ce bloc de navigation reproduira dynamiquement toutes les
rubriques de niveau 1 selon le profil connecté.

3.4. Navigation secondaire

La navigation secondaire permettra de reproduire, sur la base du
rubriquage défini, l’arborescence de la rubrique de niveau 1 dans laquelle se
situe l’utilisateur.

L’arborescence du niveau 2 se déploie au moment du clic sur une rubrique

de niveau 1.

3.5. Affichage des messages et des erreurs

Un message d’information ou d’erreur apparaît durant quelques secondes
à l'écran avant de disparaître sans intervention de l'utilisateur. Les erreurs
doivent être sauvegardées dans un fichier log.

67
Conclusion

Rappelons que l'objectif de ce travail était d'informatiser la gestion des

commandes pour le port marsa maroc. Pour cela, j’ai réalisé une plateforme
permettant à l’utilisateur d’évaluer avec plus de souplesse l’exécution de ses
taches avec plus de fluidité dans la circulation de l’information et moins de
contraintes dans le traitement automatique. Au cours de ce travail, j’ai
présenté les différentes étapes ayant conduit à la mise en œuvre d’une
solution dédiée à la gestion des commandes. Mon travail a débuté par une
étude préalable axée principalement sur la présentation de l’entreprise alors
que la deuxième partie comprend et une étude détaillée sur la spécification
fonctionnelle. J’ai développé l’étude des besoins dans le troisième chapitre,
définissant ainsi les différents modèles de données, et c’est à partir de là que
j’ai pu entamer les 3 dernière parties, à savoir le choix des outils et les étapes
de l’implémentation. Ce projet a fait l’objet d’une expérience intéressante,
très bénéfique pour moi. En effet, il m’a permis d’enrichir mes connaissances
théoriques et compétences dans le domaine de l’environnement de travail et
de la vie professionnelle. Il m’a encore donné l'occasion d’acquérir des
nouvelles connaissances indispensables dans le marché. Et de me familiariser
avec la conduite des projets informatiques. De plus j’ai su rapidement nous
intégrer dans une équipe ou dans un nouvel environnement de travail. J’ai
également essayé tout au long de la réalisation de ce projet d'assurer un
équilibre entre structuration du recueil des données, ergonomie logicielle et
efficacité du traitement de l'information. Ainsi la portabilité des données,
sans oublier la sécurité et la confidentialité des données. Cependant des
perspectives restent envisageables

68
Bibliographie - Webographie

Bibliographie
 [1] Documentation domaine de gestion des projets
 [2] Support de cours gestion des projets
 [3] Documentation technique MVC 4
 [4] Documentation technique Bootstrap

Webographie
Site web Consulté le

[5 https://en.wikipedia.org/wiki/
] ASP.NET_MVC

[6 https://docs.microsoft.com/en-us/
] aspnet/mvc/mvc4

[7 https://fr.wikipedia.org/wiki/
] Gestion_de_projet

[8 https://jqueryui.com/
]

[9 https://fr.wikipedia.org/wiki/
] Ajax_(informatique)

Tableau 3 : Webographie

69