École Supérieure d'Ingénierie en

Sciences Appliquées - Fès

Site web: [Link]

RAPPORT DE FIN D'ETUDES POUR L’OBTENTION DU DIPLÔME DE

L’ÉCOLE SUPÉRIEURE D'INGÉNIERIE EN SCIENCES APPLIQUÉES
BAC+3 (Filière : Ingénierie Logicielle)

FILIÈRE : INGÉNIERIE LOGICIELLE NIVEAU : 3ÉME ANNÉE

Sous le thème

CONCEPTION D’UNE APPLICATION WEB POUR LE SUIVI

DES PORTE-CONTENEURS

CAS D’APM TERMINALS TANGER TC01

RÉALISÉ PAR : MAHOU Mohamed El Mehdi

ENCADRANT PÉDAGOGIQUE ENCADRANT PROFESSIONEL

Mr. IBRIZ Abdelali Mr. Anas Daif
Professeur Universitaire Shift manager
ESISA APM TERMINAL TC1 Tanger

JURY :
Mr. MEKOUAR Khalid Président
Mr. BENABBOU Abderrahim Encadrant
Mr. IBRIZ Abdelali Encadrant

Encadrent ANNÉE UNIVERSITAIRE : 2021 - 2022

 Dédicace :

En toutes choses que la Gloire revienne à DIEU, le TOUT PUISSANT et

CRÉATEUR de Toutes Choses pour Sa GRACE, Sa MISERICORDE.

Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui,

quels que soient les termes embrassés, je n’arriverais jamais à leur exprimer
mon amour sincère.

À l’homme, mon précieux offre du dieu, qui doit ma vie, ma réussite et tout mon
respect : mon cher père MAHOU Youssef.

À la femme qui a souffert sans me laisser souffrir, qui n’a jamais dit non à mes
exigences et qui n’a épargné aucun effort pour me rendre heureux : mon
adorable mère BELAHRACH Mounia.

À mon frère MAHOU Salah-Eddine qui n’a pas cessé de me conseiller,

encourager et soutenir tout au long de mes études. Que Dieu lui protège et
l’offre la chance et le bonheur.

À ceux qui m’ont accordé leur amour et leur confiance.

Que ce travail soit le témoignage d’une fraternité indéfectible et d’amour

éternel.

Merci.

2
 Remerciements :

Ce travail n’aurait jamais pu se concrétiser sans l’aide et le soutien de plusieurs

personnes que je souhaite vivement remercier et à qui je dédie ce travail.

Monsieur IBRIZ Abdelali mon enseignant et encadrant, qui n'a pas cessé de me
prodiguer ses conseils et qui n'a épargné aucun effort pour contribuer à la
réussite de mon travail. Je lui remercie pour sa patience et sa disponibilité.

Mes remerciements les plus cordiaux s’adressent à mon encadrant professionnel

Mr. DAIF Anass, Business Analyst pour ses directives, ses explications, ses
conseils précieux, ses critiques constructives et ses suggestions pertinentes.

Ma gratitude à l’ensemble du personnel de l’entreprise « APM Terminals TC1 »,

pour l’expérience enrichissante et pleine d’intérêt qu’ils m’ont fait vivre.

Je remercie tout le cadre administratif et professoral de l’Ecole supérieure

d'ingénierie en Sciences Appliquées qui m’ont fourni les outils nécessaires à la
réussite de mes études universitaires et plus particulièrement les membres de
jury qui ont accepté de juger mon travail.

Mon école qui a donné l'occasion d'acquérir une formation professionnelle.

3
Table des matières
CHAPITRE 1 : PRÉSENTATION GÉNÉRALE .................................................................................................. 10
I- PRÉSENTATION DU PORT TANGER MED : ......................................................................................... 11
1- Introduction :............................................................................................................................... 11
2- Structure du complexe : ............................................................................................................... 12
3- Bilan de l’activité portuaire et industrielle : ................................................................................. 14
4- Le groupe A.P. Moller – Maersk :................................................................................................ 15
4-1- Présentation du groupe A.P. Moller-Maersk : ................................................................................. 15
4-2- Secteur d’activité : ............................................................................................................................ 16
4-3- La ligne Maersk au Maroc : ............................................................................................................. 16
II- PRÉSENTATION D’APM TERMINALS : .............................................................................................. 17
1- APM Terminals à l’échelle mondiale ........................................................................................... 17
1-1- Histoire de création d’APM Terminals : .......................................................................................... 17
1-2- Secteur d’activité : ............................................................................................................................ 18
2- APM Terminals Tanger : ............................................................................................................. 18
2-1- Création d’APM Terminals Tanger : ............................................................................................... 18
2-2- Productivité d’APM Terminals Tanger : ......................................................................................... 19
2-3- Structure organisationnelle d’APMT Tanger : ................................................................................ 21
2-4- Création de la différence : ................................................................................................................ 22
2-5- Disposition physique du terminal : ................................................................................................... 22
III- PRÉSENTATION DU SUJET : ............................................................................................................... 25
1- Présentation du projet :................................................................................................................ 25
2- Objectif à atteindre : .................................................................................................................... 25
3- Travail demandé : ........................................................................................................................ 25
CHAPITRE 2 : ANALYSE ET SPÉCIFICATIONS DES BESOINS : ....................................................................... 26
I- ETUDE PRÉALABLE : ......................................................................................................................... 27
1- Etude de l’existant : ..................................................................................................................... 27
1-1- Description de l’existant : ................................................................................................................. 27
1-2- Critique de l’existant : ...................................................................................................................... 27
2- Solutions envisagées : .................................................................................................................. 27
3- Présentation du concept des APIs : .............................................................................................. 28
3-1- Les différents types d’API : .............................................................................................................. 28
3-2- Les avantages de l’utilisation des APIs :........................................................................................... 29
4- Architecture de l’application :...................................................................................................... 29
II- PLANIFICATION DU PROJET : ............................................................................................................ 29
III- MÉTHODOLOGIE ET TECHNOLOGIES ADAPTÉS : ............................................................................... 31
1- Méthodologie de collecte de données adoptée : ............................................................................ 31
2- Démarche du projet : ................................................................................................................... 32
3- La méthode Kanban :................................................................................................................... 32
4- Example du tableau de Kanban : ................................................................................................. 33
CHAPITRE 3 : ETUDE CONCEPTUELLE : ....................................................................................... 34
I- CYCLE DE VIE DE DÉVELOPPEMENT DE PROJET :.............................................................................. 35
II- SPÉCIFICATION DES BESOINS ............................................................................................................ 36
1- Les besoins fonctionnels : ............................................................................................................ 36
2- Les besoins non fonctionnels : ..................................................................................................... 36
4-1- Contraintes ergonomiques : ............................................................................................................. 37
4-2- Contraintes techniques : ................................................................................................................... 37
III- CONCEPTION AVEC UML : ............................................................................................................... 38
1- Présentation du langage UML : ................................................................................................... 38
2- Modélisation avec les diagrammes de cas d’utilisation : .............................................................. 38
2-1- Acteurs.............................................................................................................................................. 39
2-2- Diagramme de cas d’utilisation du directeur des opérations : ......................................................... 40
2-3- Diagramme de cas d’utilisation du planificateur.............................................................................. 41
3- Diagramme de séquence : ............................................................................................................ 42
3-1- Définition : ........................................................................................................................................ 42

4
 3-2- Diagramme de séquence « Demande des données des navires » : .................................................... 43
3-3- Diagramme de séquence « Afficher la météo » :............................................................................... 44
4- Diagramme d’activité :................................................................................................................. 45
CHAPITRE 4 : ETUDE TECHNIQUE ET RÉALISATION : .............................................................. 46
I- ENVIRONNEMENT DE DÉVELOPPEMENT ............................................................................................ 47
1- Environnement du travail : .......................................................................................................... 47
1-1- Environnement logiciel :................................................................................................................... 47
1-2- Outils de développement : ................................................................................................................ 49
1-2-1. Backend : ..................................................................................................................................... 49
1-2-2. Frontend : .................................................................................................................................... 50
1-3- Technologies : ................................................................................................................................... 52
II- PRÉSENTATION DE L’APPLICATION : ................................................................................................ 53
Interfaces graphiques : ......................................................................................................................... 53
CONCLUSION GENERALE :..................................................................................................................... 61

5
 Liste des figures :

FIGURE 1 : LANCEMENT DU PORT TANGER-MED ......................................................................................................... 11

FIGURE 2 : HISTORIQUE ........................................................................................................................................ 12
FIGURE 3 : PLAN D'ENSEMBLE DU COMPLEXE .............................................................................................................. 13
FIGURE 4 : BILAN D'ACTIVITÉ PORTUAIRE ET INDUSTRIELLE 2022 ..................................................................................... 14
FIGURE 5: PRINCIPAUX ARMATEURS DU GROUPE ......................................................................................................... 15
FIGURE 6 : MAERSK LOGO ..................................................................................................................................... 15
FIGURE 7 : ETAPES DE CRÉATION D'APM TERMINALS TANGER ........................................................................................ 19
FIGURE 8 : FICHE TECHNIQUE D’APM TERMINALS TANGER ............................................................................................ 21
FIGURE 9 : STRUCTURE ORGANISATIONNELLE .............................................................................................................. 22
FIGURE 10 : VUE AÉRIENNE DU TERMINAL À CONTENEURS TANGER MED 1 ........................................................................ 23
FIGURE 11 : STRUCTURE PHYSIQUE D’UN TERMINAL À CONTENEURS ................................................................................. 24
FIGURE 12 : ARCHITECTURE DE L'APPLICATION ............................................................................................................ 29
FIGURE 13 : DIAGRAMME DE GANTT ........................................................................................................................ 30
FIGURE 14 : TABLEAU KANBAN DES TACHES DÉVELOPPÉES ............................................................................................. 33
FIGURE 15 : CYCLE DE DÉVELOPPEMENT DU PROJET ...................................................................................................... 36
FIGURE 16 : ACTEURS ........................................................................................................................................... 39
FIGURE 17 : DIAGRAMME DE CAS D'UTILISATION DES OPS.............................................................................................. 40
FIGURE 18 : DIAGRAMME DE CAS D'UTILISATION DU TIMER ............................................................................................ 41
FIGURE 19 : DIAGRAMME DE SÉQUENCE [VESSELS API] ................................................................................................ 43
FIGURE 20 : DIAGRAMME DE SÉQUENCE [SHOW WEATHER] .......................................................................................... 44
FIGURE 21 : DIAGRAMME D'ACTIVITÉ [API CALL] ........................................................................................................ 45
FIGURE 22 : VISUAL STUDIO LOGO ........................................................................................................................... 47
FIGURE 23 : ENTREPRISE ARCHITECT LOGO ................................................................................................................. 48
FIGURE 24 : CLICKUP LOGO ................................................................................................................................... 48
FIGURE 25 : NODEJS + EXPRESS LOGO ...................................................................................................................... 49
FIGURE 26 : COMPARATIVE DES FRAMEWORK FRONTEND. ............................................................................................. 50
FIGURE 27 : VUEJS LOGO ...................................................................................................................................... 51
FIGURE 28 : NPM LOGO ........................................................................................................................................ 52
FIGURE 29 : BOOTSTRAP LOGO ............................................................................................................................... 52
FIGURE 30 : VUEX LOGO ....................................................................................................................................... 53
FIGURE 31 : CAPTURE D'ÉCRAN DE L'INTERFACE DE CHARGEMENT DES DONNÉES ................................................................. 54
FIGURE 32 : CAPTURE D'ÉCRAN DE L'INTERFACE PRINCIPALE ........................................................................................... 55
FIGURE 33 : LEAFLET LOGO .................................................................................................................................... 55
FIGURE 34 : VUE3-EASY-DATA-TABLE LOGO ............................................................................................................... 57
FIGURE 35 : MÉTÉO DE TYPE 'ENSOLEILLÉ' ................................................................................................................. 58
FIGURE 36 : MÉTÉO DE TYPE 'PLUVIEUX' ................................................................................................................... 58
FIGURE 37 : MÉTÉO DE TYPE 'NEIGEUX' .................................................................................................................... 59

6
 Liste des acronymes :
Acronyme Désignation Signification

APMTT APM Terminals Tangier APM Terminals Tanger

TOS Terminal Operation System Système de gestion informatisé du terminal

International ship and port Code international pour la sureté des navires et
ISPS
security des installations portuaire
QC Quay Crane Grue de quai

RTG Rubber Tired Gantry Portiques à roues

TT Terminal Truck Camion du terminal

Application Programming Protocoles qui facilitent la création et
API
Interface l'intégration de logiciels d'applications.

7
 INTRODUCTION GENERALE :

Face aux défis du secteur maritime et portuaire liés à la montée de la concurrence au phénomène
de la mondialisation, à l'importance des évolutions organisationnelles, technologiques et
commerciales et à l'introduction de systèmes de communication plus rapides, il est vital pour
les entreprises de ce secteur de mettre en œuvre des actions qui leur permettent de s'améliorer
continuellement pour se démarquer et augmenter leur efficacité.

À la hauteur de la mondialisation et à la concurrence accrue des pays émergents, les entreprises

sont tenues à s’adapter rapidement et à optimiser leurs performances. Dans ce contexte, le
management visuel, un outil fondamental et une manière de gérer une activité par la vue ; tout
ce qui se passe dans une entité peut être vu immédiatement, notamment la moindre anomalie.
Cet outil qui s'appuie sur l'utilisation d'indications visuelles pour assurer le bon déroulement
des activités, s’est imposée comme une solution idéale.

La performance d'une entreprise est souvent le résultat de son histoire. Pas à pas, APM
Terminal Tanger Med a fait du management visuel son cheval de bataille afin de rester
compétitif en répondant de manière satisfaisante aux exigences de ses clients, l'entreprise
élabore des processus et les amène à progresser. Toutefois, les hommes évoluent dans ce
système et il est donc nécessaire, malgré tout, de mesurer le progrès vers les objectifs prévenus,
ce qui explique l'importance des indicateurs de performances.

C'est dans cette perspective que s'inscrit mon projet de fin d'étude qui s'est déroulé au
sein d'APM Terminal, dont l'objectif principal est d'évaluer l'effet du visuel management sur la
pérennisation de l'organisation et son rôle dans le renforcement de l'amélioration continue.

Pour ce faire, j'ai réalisé une application de la digitalisation pour le visuel management
au sein d’APM Terminals.

À titre de précision, le sujet de mon projet de fin d’études sera intitulé : « Conception
d’une Application Web pour le suivi des porte-conteneurs »

8
 Afin d'atteindre mon objectif de création de cette application, j’ai suivi la méthode
de travail « Kanban » qui s’inspire de l’approche Lean centrée sur l'amélioration continue des
processus de production. La méthode Kanban vise à améliorer la production en se basant sur le
juste-à-temps et sur des processus évolutifs

La méthode Kanban fonctionne à partir d’un système de cartes qui vont représenter les
tâches à accomplir en vue de répondre à la commande de l’entreprise. Une méthode qui se
concentre non seulement sur une meilleure compréhension du problème, mais qui tente
également de contribuer à la résolution du problème étudié en visualisant l'état d'avancement
du projet.

Ainsi, ce travail sera organisé autour de quatre chapitres :

Le premier chapitre vise à présenter l’organisme d’accueil APM Terminal

Le deuxième tend à faire une étude de l’existant et à faire une présentation de la méthodologie
de recherche et de collecte des données adoptées.

Le troisième chapitre résume la partie conception et modélisation de notre projet.

Le dernier chapitre concerne le cadre pratique du projet où il s'agira de présenter

l’environnement matériel et logiciel ainsi que les interfaces principales de l’application
réalisée au sein de l'APMT de Tanger.

9
 Chapitre 1 :
Présentation générale

10
Introduction
Dans ce chapitre nous mettons notre travail dans son contexte général, Tout d’abord, nous
décrivons l’environnement du stage à travers une présentation de l’organisme d’accueil
ensuite on parlera de la méthodologie du Lean et nous présentons le cadre général de notre
projet.
I- Présentation du port Tanger Med :

1- Introduction :

Nous procédons au lancement d’un des plus grands projets économiques dans l’histoire de

notre pays. Il s’agit du nouveau port Tanger-Méditerranée que Nous considérons comme le

noyau d’un grand complexe portuaire, logistique, industriel, commercial et touristique[..]

Le Maroc consolide ainsi son ancrage dans l’espace euro-méditerranéen et dans son

environnement maghrébin et arabe. Il valorise sa vocation de pôle d’échanges entre

l’Europe et l’Afrique, la Méditerranée et l’Atlantique, et renforce, en même temps, son rôle

central en tant que partenaire actif dans les échanges. Une ossature économique solide, de

niveau international, et des zones franches, lui permettant ainsi de valoriser ses riches

potentialités et d’en faire un mode de développement régional intégré.

« Extrait du discours de Sa Majesté le Roi Mohammed VI, Février 2003 »

Figure 1 : Lancement du port Tanger-Med

11
 Le Port Tanger Med est situé à Ksar Al Majaz dans le nord du Maroc, à 22 km à

l'est de Tanger et à 46 km au nord de Tétouan. Sur le détroit de Gibraltar en Méditerranée, il

est situé à 14 km à peine des côtes espagnoles et se trouve sur la voie de passage du

commerce maritime mondial Est-Ouest entre l’Asie, l'Europe et l'Amérique du Nord.

Grâce à cette position stratégique, Tanger Med est devenu une plateforme logistique

aux portes de l'Europe en jouant sur le fonctionnement de la production en juste-à-temps. Il

assure à travers plusieurs armateurs, des liaisons régulières desservant près de 180 ports et 70

pays dans les 5 continents. Le port Tanger Med est à titre d’exemple à 10 jours de l’Amérique

et à 20 jours de la Chine. Le Hub d’Afrique, il dessert près de 35 ports et 21 pays en Afrique

de l’Ouest grâce à des liaisons hebdomadaires.

Figure 2 : Historique

2- Structure du complexe :

Ce 1er bassin maritime compte dans ses rangs les plus grands armements mondiaux

(Maersk, CMA CGM, MSC…) et est exploité par deux opérateurs internationaux en matière

de gestion des terminaux portuaires a conteneurs (APM TERMINALS et EUROGATE). Ce

complexe portuaire s’étend sur 1000 ha et englobe :

12
 Figure 3 : Plan d'ensemble du complexe

• Port Tanger Med 1 : qui comprend deux terminaux à conteneurs (TC1et TC2),
un terminal ferroviaire, un terminal hydrocarbures, un terminal marchandises
diverses, et un terminal véhicules
• Port Tanger Med 2 : qui comprend deux terminaux à conteneurs (TC3et TC4)
• Port Tanger Med Passagers : qui comprend les zones d’accès et d’inspections
frontalières, les quais d’embarquements passagers et TIR, les zones de
régulations, et la gare maritime
• Med hub : Société gestionnaire de la zone franche logistique du port Tanger
Med
• Tanger Med Port Center : dédié à l’accueil des entreprises et la localisation
des activités sous-jacentes, nécessaires à la gestion de l’ensemble du port
Tanger Med.

13
3- Bilan de l’activité portuaire et industrielle :

Figure 4 : bilan d'activité portuaire et industrielle 2022

14
 Figure 5: Principaux armateurs du groupe

4- Le groupe A.P. Moller – Maersk :

4-1- Présentation du groupe A.P. Moller-Maersk :

A.P. Moller - Maersk est une société de logistique intégrée de transport de conteneurs et
membre du groupe A.P. Moller qui connecte et simplifie le transport pour permettre à ses
clients de prospérer et se développer. Avec une équipe de plus de 80 000 personnes, opérant
dans 130 pays, cette société met tout en œuvre pour promouvoir le commerce mondial dans
un monde en pleine croissance.
Le groupe est impliqué dans un large éventail d’activités : la construction navale, la
prospection pétrolière et gazière, le commerce de détail, le transport aérien avec Maersk Air et
dans d’autres activités industrielles.
En plus de la possession de l’une des plus grandes compagnies maritimes du monde, le
groupe AP Moller-Maersk est également actif dans l’exploration pétrolière le long de la côte
marocaine, depuis qu’elle a signé un contrat d’exploration en 2004 avec l’Office National des
Hydrocarbures et de Mines (ONHYM)

.
Figure 6 : Maersk logo

15
4-2- Secteur d’activité :

Le Groupe A.P. Moller - Maersk est organisé autour de 4 secteurs d’activités majeurs :
• Transport maritime de conteneurs et activités liées qui constituent le cœur du
métier du Groupe.
• Exploration, production et transport d’hydrocarbures
• Industries et activités de construction (chantiers navals, conteneurs
frigorifiques. . .)
• Distribution et autres activités

4-3- La ligne Maersk au Maroc :

Le début du partenariat entre le Groupe “A.P. Moller – Maersk” et le Royaume du Maroc

remonte à 1991. Depuis, le Groupe a cherché à accompagner les efforts d’ouverture de
l’économie nationale et de rapprochement du Maroc des marchés internationaux en mettant en
œuvre son leadership dans les domaines du transport maritime, du portuaire et de la
logistique.
En lançant le complexe portuaire Tanger- Med qui s’articule autour du Port, des zones
franches industrielles et logistiques, et des infrastructures de connexions, l’Etat Marocain a
voulu donner une nouvelle dimension au développement de la Région du Nord et a créé à cet
effet l’Agence Spéciale Tanger – Méditerranée qui a été chargée de la réalisation de ce nouvel
espace économique à la croisée des grandes routes maritimes internationales.
La volonté des Autorités marocaines d’asseoir le succès de cette stratégie de développement
au travers de partenariats de premier plan, a débouché sur l’octroi en janvier 2005 au
Consortium formé entre le Groupe “A.P. Moller – Maersk” et son partenaire local “AKWA
Group”, de la Concession relative à la conception, la réalisation et l’exploitation du premier
terminal à conteneurs du nouveau Port Tanger Med. Port de transbordement par excellence,
en raison de la position stratégique du Détroit de Gibraltar et Port de haute mer, Tanger Med
peut accueillir les plus grands navires de la flotte mondiale.
Maersk Line exploite plus de 550 navires avec une capacité de 2,2 millions EVP (équivalent
vingt pieds). Elle est actuellement la plus grande compagnie maritime au monde. En 2006, le
plus grand navire à conteneurs au monde à ce jour, le navire de classe EEmma Maersk, a été
livré à Maersk Line de Odense Steel Ship yard.

16
 II- Présentation d’APM Terminals :

1- APM Terminals à l’échelle mondiale

1-1- Histoire de création d’APM Terminals :

Les opérations du terminal patrimonial d'APM Terminals ont commencé il y a plus

d'un demi-siècle avec une installation de fret général au port de New York en 1958. Son
histoire dans la conteneurisation remonte à Sea-Land et aux toutes premières opérations
internationales de conteneurs lorsque le Sea-Land Fairland a été chargé de 236 conteneurs à
destination de Rotterdam à Port Elizabeth en 1966.
APM Terminals opère 56 terminaux avec environ 19.000 collaborateurs dans 71 pays
et cinq continents, et emploie 24.000 personnes. APM Terminals avec plus de 3 milliards de
dollars de revenus en 2008 a investi 723 millions USD dans nouveaux ports et des projets
portuaires, complétant les investissements de 2007 à 850 millions d’euros. Avec son réseau de
Terminaux, APM Terminals tisse avec ses clients des relations sur le long terme basé sur la
qualité et la fiabilité des prestations techniques et commerciales offertes, leur permettant ainsi
de générer davantage de valeur ajoutée à leurs activités.
Stimulée par la pandémie de COVID-19 qui a balayé le monde, 2020 a connu une
certaine digitalisation d'APM Terminals. La société a lancé un API & Data Services Store,
pour fournir des flux de données en temps réel depuis les systèmes d'exploitation de
terminaux de la société directement dans les propres systèmes de gestion des transports des
clients.
En termes d'investissements, APM Terminals a signé des contrats pour l'extension
d'APM Terminals Poti, le nouveau terminal Vado Gateway a été inauguré, la construction du
nouveau terminal Côte d'Ivoire a démarré, les services ferroviaires ont été rétablis à APM
Terminals Apapa, l'extension du port de Tema a été terminé deux mois plus tôt que prévu et le
terminal à conteneurs de l'Afrique de l'Ouest a commencé son expansion pour gérer des
volumes croissants au Nigeria.

17
 1-2- Secteur d’activité :

APM Terminals est aussi impliqué dans les domaines touchant à :

• La manutention portuaire (aconage)
• La fourniture de différents services à valeur ajoutée
• Le Développement de zones franches
• La fonction d’Autorité Portuaire

Bureaux d’APM Terminales à travers le Monde :

• Siège Monde (La Haye)
• Siège Asie (Shanghai)
• Siège Afrique, Moyen-Orient et Inde (Dubaï)
• Siège Amériques (Virginie)
• Siège Europe (Rotterdam)

Les Terminaux à conteneurs d’APM Terminals font partie intégrante du commerce mondial,
ainsi son business sert à globaliser la croissance et le développement du commerce.
2- APM Terminals Tanger :

2-1- Création d’APM Terminals Tanger :

APM Terminals Tanger est une S.A. a été créée en 17 mars 2005 en partenariat entre
le Groupe A.P. Moller – Maersk et le groupe marocain AKWA.
Les travaux de construction ont débuté en mai 2006, les opérations commerciales complètes
ont commencées en novembre 2007, le consortium entre APM Terminales et l’AKWA
marocaine Groupe a obtenu une concession de 30 ans pour développer, exploiter et gérer le
terminal.
La société compte un effectif de plus de 800 personnes qui sont essentiellement des jeunes
marocains et marocaines ayant bénéficié d’un important effort de formation tant localement
qu’à l’international grâce au levier que constitue le réseau de terminaux du Groupe.

APM Terminals Tanger a franchi, le 25 août 2012, le seuil de 5 millions de conteneur

EVP, traité depuis sa mise en service. D’une capacité de 1,8 million d’EVP/an principalement
tournée vers le transbordement, le terminal dispose de 800 mètres linéaires de quai et de 40

18
hectares de terre-plein ainsi que des équipements répondant aux meilleurs standards lui
permettant d’assurer un traitement rapide des escales des navires.
Le terminal 1 a été concédé à Maersk pour une durée de 30 ans, tandis que le terminal
2 est revenu au consortium Eurogate-Contship / MSC / CMA-CGM pour la même durée.
APM Terminals œuvre à la réalisation et au développement d’un terminal à conteneurs de
classe mondiale, leader dans le bassin méditerranéen et s’inscrivant en parfaite
complémentarité avec APM Terminales Algesiras en Espagne. C’est le fruit d’une convention
de partenariat entre le groupe AP Moller-Maersk et le royaume du Maroc. APM Terminals
Tanger a investi plus de 150 millions d’Euros pour la concessionnaire afin d’exploiter le
terminal pour une période de 30 ans et de capter une partie de 200 navires traversant chaque
jour le détroit de Gibraltar. Ce capital est reparti entre 90 à AP Moller Maersk et 10 au groupe
AKWA.

• Établissement d’APM Terminals Tanger S.A.

17 mars
2005
• Début des travaux de construction
2 mai
2006
• Mise en service partielle
Juillet
2007

Octobr • Mise en service

e 2007

Figure 7 : Etapes de création d'APM Terminals Tanger

2-2- Productivité d’APM Terminals Tanger :

La participation de l’opérateur au programme national Plages Propres a permis la mise

à niveau de la plage d’Oued Alian (1,5 km) et l’obtention du label Bleu de cette même plage
en 2016 et ce, pour la deuxième année consécutive.
L’engagement du terminal a également été récompensé par l’obtention du label RSE de la
CGEM.

19
Le terminal a également obtenu la certification ISO 55001, qui vient s’ajouter à une longue
liste de certificats. En septembre 2012, il décroche le triplet QSE (ISO 9001 pour la qualité,
ISO 14001 pour l’environnement et OHSAS 18001 pour la sécurité).
L’année d’après, le terminal obtenait la certification ISO 28000, pour la sûreté. Le terminal est
également certifié ISO 27001 pour la sécurité de l’information, avant d’ajouter cette nouvelle
certification ISO 55001 à son palmarès.
Cette démarche s’inscrit dans une logique visant à maîtriser les systèmes de gestion et à
améliorer la qualité des services, ayant pour seul objectif la satisfaction des clients (externes,
mais aussi internes).

Les ambitions de APM Terminals Tanger ne s’arrêtent pas là. En mai 2017, le terminal
a fait l’acquisition de deux portiques Super Post Panamax, qui s’ajoutent aux huit déjà
présents sur le quai et cela pour renforcer sa capacité. L’étape suivante sera de procéder, dans
les mois à venir, à l’élévation de quatre portiques, pour être en mesure de répondre aux
exigences des clients, mais aussi pour pouvoir accueillir et traiter les nouvelles générations de
porte-conteneurs, de plus en plus grands, et dont la capacité dépasse les 20.000 conteneurs.
Le terminal a aussi servi d’hôte à un géant des mers. Le Munich Maersk, un navire de la 2ème
génération de la série Triple-E de Maesrk Line, a rendu visite à APM Terminals Tanger le 28
juillet 2017, dans le cadre de sa tournée inaugurale, et aussi pour célébrer le 10ème anniversaire
du terminal. Le Munich Maersk, à l’image de ses semblables, fait 399 m de longitude et plus
de 60 de hauteur. Il a une capacité de 20.000 conteneurs. Le Munich Maersk est l’un des plus
grands navires à faire escale dans un port africain de façon régulière, ce qui ne fait
qu’augmenter la fierté d’APM Terminals Tanger.

Il a été sélectionné « Terminal de l’Année 2021 », parmi 75 autres terminaux dans plus
de 40 pays. En effet, malgré la pandémie mondiale (covid19) APM Terminals Tanger, en
s’appuyant sur ses 14 ans d’expérience et d’expertise a continué sur son essor et son dynamisme
en réalisant un volume de plus de 2 millions d’EVP sur 800m de quai et sur plus de 900 escales
dans les meilleures conditions opérationnelles et de sécurité.

20
 Figure 8 : Fiche technique d’APM Terminals Tanger

2-3- Structure organisationnelle d’APMT Tanger :

L’organigramme d’APM Terminals Tanger est constitué de 8 départements. Le

premier département c’est celui d’Opérations, il est responsable de la création de valeur, il
représente ainsi 70% du personnel d’APMTT. Sa principale mission est d’assurer la
planification et l’exécution des opérations en améliorant les indicateurs de performances. Le
deuxième c’est le « Way of working », département de Lean management, ce dernier sert à
améliorer tout le processus. Alors que les autres départements Techniques, Informatique,
Ressources Humaines, Finance, Achat et HSSE sont des unités supports.

21
 Figure 9 : Structure organisationnelle

2-4- Création de la différence :

a- Matériel et technologie de pointe :

• Système de gestion informatisé du Terminal (TOS)

• Haute Technologie Les grues Portiques à quai Post-Panamax et Eco-RTGs
• Capacité de traitement des conteneurs réfrigérés et qualité des systèmes de suivi.
b- Personnel :
Personnel hautement compétent et motivé Investissement très important pour la Formation
(sur base locale et sites externes)
c- Sécurité :

Un élément clé de leur culture, érigé en haute priorité sur tous leurs Terminaux. Objectif
‘0’ damage, et ‘0’ tolérance pour tout leur-respect des principes et procédures de sécurité.
d- Sureté :

Stricte conformité au Code ISPS (Code International régissant les navires et installations
portuaires).

2-5- Disposition physique du terminal :

L’architecture d’APMTT est caractérisée par l’existence de trois zones chacune au service
d’un objectif spécifié :

▪ La zone maritime : Le quai est la zone fonctionnelle du bord de mer d’un

terminal à conteneurs. Sur cette zone les navires accostent pour pouvoir être
servis. Ce service est sous forme de chargement ou déchargement de

22
 conteneurs à l’aide des QC.
▪ La zone de système de transport : Le transport interne sert à déplacer les
conteneurs entre les zones fonctionnelles. APMTT utilise les camions de
transport interne (TT).
▪ La zone de stockage : cette zone est l’espace du terminal réservé à
l’emplacement des conteneurs. Elle est divisée horizontalement et
verticalement en un ensemble de lignes et de colonnes. Grâce à cette division,
chaque conteneur a une position unique. Pour APMTT, la zone de stockage
est divisée en 5 colonnes de 1 à 5 et de 12 lignes d’A (Alpha) à M (Mike)
donnant lieu à 59 Blocks d’une forme rectangulaire en plus de la Zone des
vides Z (Zolo).

Figure 10 : Vue aérienne du terminal à conteneurs Tanger Med 1

23
Figure 11 : Structure physique d’un terminal à conteneurs

24
 III- Présentation du sujet :
1- Présentation du projet :

Le travail demandé consiste à réaliser, dans le cadre du stage de fin d'études, la conception et
le développement d'une application Web pour le suivi des navires au sein du terminal APM.
L'application permet aux opérateurs de lire plus facilement les données, afin d'améliorer leurs
performances de travail.

2- Objectif à atteindre :

Le but du projet est de créer et développer une application Web pour :

• Faciliter le travail des directeurs des opérations.
• Gagner du temps et atteindre la satisfaction des clients.
• Digitalisation des résultats de l’AIS (automatic identification system)

3- Travail demandé :

Notre tâche permet de :

• Apprendre le concept des APIs.
• Réaliser l’interface graphique facile à comprendre pour l’application.
• Établir la connexion entre l’application et les serveurs APIs.
• Mettre à l’exécution l’application dans le réseau local de l’entreprise.
• Développer une application fonctionnant sur mobile.

Conclusion :
Dans ce chapitre, nous avons mis notre projet dans son contexte général. Nous avons
commencé par une description générale de l’entreprise « APM Terminals ». Nous avons
exposé son historique, sa structure puis ses armateurs et principales activités et ses
organigrammes ensuite nous avons présenté le cadre général de notre projet, une brève
présentation, le but à atteindre en finissant par le travail demandé.

25
 Chapitre 2 :
Analyse et
spécifications des
besoins :

26
Introduction

Dans ce deuxième chapitre, nous commençons par la description de management visuel

existant au sein de APM Terminals Tanger. L’étude réalisée soulignera quelques problèmes
au niveau du rendement et de satisfaction totale des employés. Cela nous permettra de
proposer une solution totalement automatisée pour améliorer la qualité de service.

I- Etude préalable :

Pour assurer les buts à atteindre, il est nécessaire que nous commencions par une énumération
concise des différents besoins relevés. C’est pour cela qu’une étude du système existant est
nécessaire.

1- Etude de l’existant :
1-1- Description de l’existant :

Actuellement APM Terminals ne dispose d’aucun outil informatique automatiser permettant

l’observation des navires au sein du port, les directeurs des opérations contacte directement
les équipes qui ont accès au équipements AIS, puis ajoute les données nécessaires
manuellement.

1-2- Critique de l’existant :

Le processus fait, repose sur un système manuel, chaque navire signale l’heure d'arrivée
estimée en plus de ses propres données ; nom, ID, Pays d’origine, et c’est le travail du
département d’Operations d’inséré ces données manuellement.

Ce processus a prouvé des limites en termes de flexibilité et dynamisme. Pour ceci APM
Terminals prévoit de migrer cet outil afin de pallier ces problèmes.

2- Solutions envisagées :

Pour bien résoudre les problèmes dégagés au sein de l’entreprise APM Terminals.
Le département IT intervient afin de répondre aux besoins des départements.

Après une étude approfondie de la situation existante, et dans le but de surmonter les limites
du processus existant, ainsi que dans un souci de performances, l’équipe IT a décidé de faire
une automatisation du processus afin de surmonter les problèmes engendrés.

27
Pour cela on doit concevoir et développer une application qui englobe tout navire entrant
qui garantit la rapidité d’affichage des données.

C’est dans ce cadre que s’inscrit le projet de fin d’études.

3- Présentation du concept des APIs :

Le terme API signifie Application Programming Interface ou interface de

programmation d’applications en français. Comme son nom l’indique, une API c’est une
interface de programmation qui permet d’accéder à une assistance (données ou
fonctionnalités) fourni par un système tiers.

3-1- Les différents types d’API :

Les organisations utilisent différents types d'API à diverses fins, notamment pour exposer
en interne la fonctionnalité d'un système stratégique ou encore pour mettre en place une
application mobile orientée client. On distingue quatre catégories d'API :

a- Les API internes (ou privées) :

Sont destinées à être utilisées exclusivement au sein d’une entreprise pour

connecter des systèmes et des données.

b- Les API composites :

Combinent plusieurs interfaces de programmation pour établir une séquence d’opérations
connexes ou interdépendantes. Elles peuvent être utiles dans le traitement des
comportements complexes et peuvent améliorer la vitesse et les performances d’un
logiciel.
c- Les API publiques :

Qui sont ouvertes et disponibles à tous, notamment lorsqu’une entreprise prévoit

de partager ses applications et données avec d’autres organisations.

d- Les API partenaires :

Sont disponibles pour une élite composée de développeurs et de consommateurs

spécifiques pour faciliter les activités inter-entreprises.

28
 3-2- Les avantages de l’utilisation des APIs :

Lorsque nous parlons du monde du développement web, les APIs ou

Application Programming Interface font partie des composants des différents
programmes. Utile pour permettre à un produit ou un service d’être en
interaction avec d’autres éléments, l’API sert à simplifier le processus de
développement d’une application. Malgré que les internautes ne soient pas en
relation directe avec les APIs, ils participent activement grâce à l’utilisation de
services web.

4- Architecture de l’application :

La figure ci-dessous représente l’architecture de l’application proposée.

Figure 12 : Architecture de l'application

II- Planification du projet :

La répartition du temps est un ensemble de techniques claires et d'outils pratiques

d’aménagement personnelle et de planification qui permet de diminuer le temps perdu au
minimum et d'améliorer la performance personnelle très rapidement ce qui est présenté dans
la figure ci-dessous.

29
Figure 13 : Diagramme de Gantt

30
 III- Méthodologie et technologies adaptés :

Maintenant, nous pouvons nous pencher sur la méthodologie à privilégier pour

répondre à notre question de recherche. Cette section présente les moyens que nous utiliserons
pour répondre aux besoins de l’entreprise et dans quelle mesure notre application peut être
considérée comme étant un enjeu stratégique pour l’entreprise vers une démarche de Lean
Management.

1- Méthodologie de collecte de données adoptée :

Afin de répondre à notre question de recherche, nous avons décidé de nous adresser
aux différents membres des différents départements d’APMT Tanger (TC1). Tout au long du
processus, il est essentiel de rester factuel en s’appuyant sur des observations réelles et des
remarques précises. Cela nous permet d’être totalement crédibles par rapport à des personnes
qui connaissent parfaitement le contexte.

En effet, c’est principalement à travers les observations directes durant mon assistance aux
différentes réunions que le sujet a été appréhendé. La décision d’opter pour l’observation
directe a sans doute été perçue comme une volonté de transparence permettant d’accéder à des
informations pertinentes, de construire une vision globale et de comprendre la situation
existante. Cette approche permet une réelle vue d’ensemble et la collecte immédiate de
nombreuses informations instantanées.

Au-delà de ces impressions et des faits sur lesquels elle s’appuie, nous avons dans un
deuxième temps creusé la question en profondeur, par tout autre moyen adéquat. Des réunions
ont été menés avec les responsables afin d’apporter des précisions et de recueillir les besoins.

A cet égard, nous avons privilégié la réunion du département « opérations » car c’est utilisé
quotidiennement par une large communauté au sein d’APM Terminals. Cette méthode permet
un équilibre entre les départements afin de finaliser notre application et de laisser une liberté
aux clients (employés).

Pendant les réunions, notre rôle était d’écouter le participant le mieux possible, en étant prêt à
entendre tout ce qu’il pouvait avoir à dire sur le sujet en question.

31
 2- Démarche du projet :

Le choix entre un modèle de processus de développement et un autre, dépend de la

nature du projet et de sa taille. Lorsqu’il s’agit d’un projet où les données ne sont pas réunies
dès le départ, où les besoins sont incomplets voire floues, il est recommandé de s’orienter vers
une méthode itérative ou orientée prototypes.
Parmi les méthodes itératives, nous pouvons citer les méthodes Agile largement
utilisés de nos jours à travers le monde. Une méthode Agile est menée dans un esprit
collaboratif et s’adapte aux approches incrémentales. Elle engendre des produits de haute
qualité tout en tenant compte de l’évolution des besoins du client. Elle permet aussi de gérer
la qualité en continu et de détecter des problèmes le plus tôt au fur et à mesure. Pour notre
projet, nous nous sommes orientés vers une méthode de type Agile et plus particulièrement
Kanban.

3- La méthode Kanban :

Kanban est une méthode de travail qui s’inspire de l’approche Lean centrée sur
l'amélioration continue des processus de production. Introduite chez Toyota dans les années
50, la méthode Kanban visait à améliorer la production en se basant sur le juste-à-temps et sur
des processus évolutifs. Aujourd’hui, elle est à la fois une méthode de gestion de projet et un
outil, guidée par deux principes : le visuel et le temps-réel.

La méthode Kanban fonctionne à partir d’un système de cartes. Kanban signifie

étiquettes en langue japonaise. Les cartes ou étiquettes vont représenter les tâches à accomplir
en vue de répondre à la commande d'un client.

Ces objets graphiques constituent un outil simple à comprendre et rapide à déchiffrer.

Pour visualiser l'état d'avancement d'une commande ou d'un projet, elles seront réparties dans
un tableau Kanban généralement divisé en trois parties : "A faire", "En cours" et "Réalisé".
Chacun sait ainsi ce qu’il doit faire, quand et comment.

32
 4- Example du tableau de Kanban :

Figure 14 : Tableau Kanban des taches développées

Conclusion :
Cette deuxième partie de notre rapport nous a permet d’avoir une vision d’ensemble sur le
projet en décrivant la méthodologie de collecte de données et la démarche de projet. Il est
temps maintenant d’entamer l’étude du sujet et la mise en œuvre du projet.

33
Chapitre 3 : Etude conceptuelle :

34
Introduction

Découvrir le produit, planifier le processus de conception, concevoir, développer et tester.

C’est la démarche qui doit être suivie lors du développement d’une application avec
laquelle on peut réussir n’importe quel projet.

En effet, La conception d’un système informatique est une étape très importante qui va
influencer la qualité et la fiabilité de toute l’application.

D’abord, nous allons commencer ce chapitre par l’explication du modèle de cycle de vie
de projet qu’on a choisi.

Ensuite nous allons passer à la partie de conception détaillée où nous présentons

l’architecture globale de l’application.

Enfin nous citons les différents diagrammes de cas d’utilisation, de séquences et le

diagramme de classes.

I- Cycle de vie de développement de projet :

Le cycle de vie d’un logiciel désigne toutes les étapes du développement d’un logiciel, de sa
création à sa disparition. Cela va nous permettre de définir des bornes intermédiaires
permettant la confirmation du développement logiciel.

Pour fournir une meilleure réalisation, nous avons présenté le modèle en cascade (a été mis au
point dès 1996). Il est décrit par la figure ci-dessous.

Dans ce modèle le principe est très simple : chaque phase se termine à une date précise par la
production de certains documents ou logiciels.

Les résultats sont définis sur la base des interactions entre étapes, ils sont soumis à une revue
approfondie et on ne passe à la phase suivante que s’ils sont jugés satisfaisants.

35
 Figure 15 : Cycle de développement du projet

II- Spécification des besoins

1- Les besoins fonctionnels :

Le futur système permet à :

« Le directeur d’opérations » de :

• Voir l’ensemble des navires au sein du terminal

• Consulter la qualité de la météo dans la localisation du navire
• Consulter l’heure d’arriver estimer des navires entrants

2- Les besoins non fonctionnels :

Les besoins non fonctionnels représentent les règles à respecter

afin d’assurer une bonne qualité de l’application à achever et le
bon fonctionnement du futur système.

36
Quant aux besoins non fonctionnels, ils se récapitulent en :

4-1- Contraintes ergonomiques :

Le système doit :

• Être simple et compréhensible.

• Permettre aux utilisateurs de se familiariser rapidement avec le contenu.
• Maintenabilité : L’architecture de l’application doit être évolutive et
extensible vu que les besoins des clients ne sont pas fixés.

4-2- Contraintes techniques :

• Tolérance aux pannes : L’application doit fonctionner même en cas de
défaillance des différents services.
• Temps de réponse : L’application doit rendre une réponse dans un
temps minimal.

37
III- Conception avec UML :

1- Présentation du langage UML :

UML (en anglais Unified Modeling Language, « langage de modélisation unifié »)

est un langage graphique de modélisation des données et des traitements.

UML spécifie plusieurs objectifs qui font un outil exact de communication :

• Comprendre et décrire les besoins.

• Spécifier un système.
• Établir l’architecture logicielle.
• Réutilisation des composants.

2- Modélisation avec les diagrammes de cas d’utilisation :

Le diagramme de cas d’utilisation permet de déterminer les possibilités

d'interférence entre le système et les acteurs.

C'est-à-dire déterminer toutes les fonctionnalités que doit fournir le système, il

permet aussi de délimiter ce dernier.

• Chaque usage effectué par les acteurs est représenté par un cas d'utilisation.
• Chaque cas d'utilisation symbolise une fonctionnalité qui leur est offerte
afin d’engendrer le résultat attendu.
• Le diagramme de cas d'utilisation décrit l'interaction entre le système et
l'acteur en déterminant les besoins de l'utilisateur et tout ce que doit faire le
système pour l'acteur.

38
 2-1- Acteurs

Un acteur est une entité qui définit le rôle joué par un utilisateur, ou par un système qui
interagit avec le system modélisé.

Dans cette application, il existe deux acteurs :

1. Le planificateur
2. Le directeur d’opérations

Figure 16 : Acteurs

39
2-2- Diagramme de cas d’utilisation du directeur des opérations :

Figure 17 : Diagramme de cas d'utilisation des Ops

Cette figure représente le diagramme de cas d’utilisation du directeur des

opérations et nous montre les diffèrent interactions entre le directeur des
opérations et le système.

40
2-3- Diagramme de cas d’utilisation du planificateur

Nous avons intégré le planificateur en tant qu’acteur, puisque le system

déclenche un cas d’utilisation sur une base périodique 1

Figure 18 : Diagramme de cas d'utilisation du Timer

Le planificateur est une fonctionnalité interne, mais il a été pris en dehors du

système en tant qu’acteur principale, a la seule cause qu’il refait l’action de la
demande des données d’une façon périodique.

41
3- Diagramme de séquence :

3-1- Définition :

Le diagramme de séquence, décrit les scénarios de chaque cas d'utilisation en

mettant l'accent sur la chronologie des opérations en interaction avec les objets.

Un diagramme de séquence montre une interférence présentée en séquence dans

le temps.

En particulier, il montre aussi les objets qui participent à l'interaction par leur
"ligne de vie" et les messages qu'ils échangent présentés en séquence dans le
temps.

Voici quelques notions de base du diagramme :

• Scénario : une liste d'actions qui décrivent une interaction entre un acteur et
le système.
• Interaction : un comportement qui comprend un ensemble de messages
échangés par un ensemble d'objets dans un certain contexte pour accomplir
une certaine tâche.
• Message : Un message définit une communication particulière entre des
lignes de vie (objets ou acteurs)

42
 3-2- Diagramme de séquence « Demande des données des navires » :

Figure 19 : Diagramme de séquence [Vessel API]

Le planificateur fait un appel GET a l’API, qui sera vérifier s’il y a une erreur, si c’est le cas,
on réinitialise le planificateur, sinon on teste si les donner apporter existent déjà, et dans ce
cas, on ne fait pas de mise à jour des données

Le même processus pour le diagramme de séquence « Demande des données de la météo »

43
3-3- Diagramme de séquence « Afficher la météo » :

Figure 20 : Diagramme de séquence [Show Weather]

Lorsque le directeur des opérations ouvre la page principale, le système récupère les données
qui sont déjà récupérer et traiter.

L’acteur reçoit comme réponse l’une des deux possible interfaces,

La première interface, donc le cas où il n’y pas d’erreurs, cite les différentes informations
apportées.

La deuxième interface, donc le cas où il y a des erreurs, affiche un modèle d’erreur.

Le même processus pour le diagramme de séquence « Affichage des navires »

44
4- Diagramme d’activité :

Le diagramme d’activité présente plusieurs avantages, parmi les avantages clé on trouve :

• Démontrer la logique d'un algorithme

• Décrire les étapes effectuées dans un cas d'utilisation d'UML
• Illustrer un processus métier ou un flux de travail entre les utilisateurs et le système
• Simplifier et améliorer n'importe quel processus en clarifiant les cas d'utilisation complexes
• Modéliser des éléments de l'architecture de logiciels, tels que la méthode, la fonction et
l'utilisation

Le diagramme d’activité ci-dessous montre la logique de l’appel des données des

navires :

Figure 21 : Diagramme d'activité [API Call]

45
 Chapitre 4 :
Etude technique et réalisation :

46
Introduction :

Cette dernière partie est la plus importante puisqu’elle met en réalité toute la théorie
précédente. Dans un premier temps nous présentons l’environnement de réalisation sur le plan
logiciel. Dans un second temps nous présentons quelques interfaces de notre application web.

I- Environnement de développement
1- Environnement du travail :
1-1- Environnement logiciel :

• Visual Studio Code

Figure 22 : Visual Studio logo

Visual Studio Code est un éditeur de code source qui peut être utilisé avec
une variété de langages de programmation, notamment Java, JavaScript, Go,
[Link] et C++. Il est basé sur le cadre Electron, qui est utilisé pour
développer des applications Web [Link] qui s'exécutent sur le moteur de
présentation Blink. Visual Studio Code utilise le même composant d'éditeur
(nom de code Monaco) utilisé dans Azure DevOps (anciennement appelé
Visual Studio Online et Visual Studio Team Services). Le logiciel prend en
charge le Windows Subsystem for Linux et, permet ainsi par exemple, de
programmer facilement en C/C++ depuis un ordinateur Windows 10

47
• Entreprise Architect

Figure 23 : Entreprise Architect logo

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.

• ClickUp

Figure 24 : ClickUp logo

ClickUp est une plateforme en ligne de gestion de projet avec une

personnalisation adaptée à chaque projet et à chaque équipe.
Elle permet aux utilisateurs d'utiliser de nombreuses fonctionnalités,
notamment : des listes de tâches, création des tableaux de Kanban, création
du diagramme de Gantt, et bien d'autres fonctionnalités.

48
1-2- Outils de développement :

1-2-1. Backend :

Figure 25 : NodeJS + Express logo

Par définition, NodeJS est une plateforme de développement JavaScript

intégrant un serveur HTTP. Son fonctionnement se base sur une boucle
événementielle qui lui permet le support de fortes montées en charge.

Voici les facteurs clé pour avoir choisir NodeJS come backend :

• NodeJS est un excellent choix pour les API Rest :

NodeJS est un système « single thread » non bloquant, donc il est

capable de gérer une multitude de requêtes sans attendre que la
requête lancée précédemment soit terminée.

• Excellentes performances :

NodeJS est léger et la technologie est basée sur le très puissant

moteur V8 de Chromium ce qui offre des performances
incroyables aux applications web

49
 Express est une infrastructure d'applications Web [Link] minimaliste
et flexible qui fournit un ensemble de fonctionnalités puissante pour les
applications Web et mobiles.

Grâce à une foule de méthodes utilitaires HTTP et de middleware met à

la disposition, la création d'une API robuste est simple et rapide.

1-2-2. Frontend :

Après avoir choisi le Framework pour le backend, nous devons

maintenant choisir une plateforme pour notre application frontend.

Plusieurs technologies se présentent, mais notre comparaison va être

restreinte sur Angular, ReactJs et VueJs puisque ces plateformes sont
open source et elles sont les plus populaires et les plus utilisées.

Nous voyons une petite comparaison entre les trois dans la figure ci-
dessous.

Figure 26 : Comparative des Framework frontend.

50
 D’après une comparaison sur les facteurs clé de chaque Framework, et selon
le besoin de la société nous avons choisis VueJs, d’après sa flexibilité, sa
simplicité et sa meilleure gestion d’état des données entre les interfaces à
l’aide de la technique Virtual dom.

Figure 27 : VueJS logo

[Link] (aussi appelé plus simplement Vue), est un Framework JavaScript open-
source utilisé pour construire des interfaces utilisateur et des applications web
monopages.

Vue a été créé par Evan You et est maintenu par lui et le reste des membres actifs de
l'équipe principale travaillant sur le projet et son écosystème.

Voici quelque facteurs clé qui nous a permis de choisir VueJs comme notre frontend
Framework pour ce projet :

• Flexibilité : l’écriture d’une application à l’aide de VueJS est rapide dû au fait

qu’il est possible de l’exécuter via son navigateur, qui facilite également le
processus de test.
• Intégration simple : VueJS offre également de grandes possibilités
d’intégration avec les applications existantes
• Communauté vaste et plein de bibliothèque disponible pour plus de
fonctionnalités nécessaires.

51
1-3- Technologies :
1-3-1. npm :

Figure 28 : npm logo

npm est le gestionnaire de paquets par défaut pour l'environnement

d'exécution JavaScript de [Link].

npm se compose d'un client en ligne de commande, également appelé npm,

et d'une base de données en ligne de paquets publics et privés (payants),
appelée le registre npm. Le registre est accessible via le client, et les paquets
disponibles peuvent être parcourus et recherchés via le site Web de npm. Le
gestionnaire de paquets et le registre sont gérés par npm, Inc.

Depuis la version 0.6.3 de [Link], npm fait partie de l'environnement et est

donc automatiquement installé par défaut3. npm fonctionne avec un
terminal et gère les dépendances pour une application. Il permet également
d'installer des applications [Link] disponibles sur le dépôt npm.

1-3-2. Bootstrap :

Figure 29 : Bootstrap logo

Bootstrap est un Framework destiné aux applications web. Développé par

Twitter et distribué sous licence Apache 2, c'est un outil à considérer lors
du développement rapide d'applications web. L'utilisation combinée du

52
 HTML, du CSS, et du JavaScript propose Bootstrap dépasse les
Framework CSS classiques et propose carrément des éléments graphiques
complets avec une garantie maximale de compatibilité entre les divers
navigateurs.

1-3-3. Vuex :

Figure 30 : Vuex logo

Vuex est un modèle de gestion d'état + une bibliothèque pour les

applications [Link]. Il sert de magasin centralisé pour tous les composants
d'une application, avec des règles garantissant que l'état ne peut être muté
que de manière prévisible.

II- Présentation de l’application :

Interfaces graphiques :

L’interface graphique est une partie très importante pour la réalisation d’une
application convenable offrant un certain plaisir à l’utilisateur lors de sa navigation.

Ainsi, ce critère peut faire la différence entre une application et un autre bien qu’elles
aient les mêmes fonctionnalités.

Voici un ensemble de captures d’écrans sur les principaux services de l’application :

53
a- Interface de chargement des données :

Cette interface signifie que l’application établie une connexion avec le serveur,
et charge les données reçues par les APIs, cette interface prend généralement
moins d’une seconde s’il n’y a pas d’erreurs.

Figure 31 : Capture d'écran de l'interface de chargement des données

b- Interface principale :

Cette interface a 3 composantes principales :

1. La carte du port.
2. Le tableau des navires dans le port.
3. La fenêtre de la météo

Cette interface permet au directeur des opérations de voir les navires au terminal en
temps réel, à l’aide des APIs.

Il lui permet aussi de voir la qualité de la météo en même instant.

54
 Figure 32 : Capture d'écran de l'interface principale

a. Carte du port :

La carte du port est faite à l’aide d’une bibliothèque JavaScript open-source

moderne adaptée aux mobiles, permettant l'intégration de cartes interactives
et est un choix populaire pour déployer sa propre carte glissante.

La bibliothèque est extrêmement customisable.

Figure 33 : Leaflet logo

55
La composante de la carte du port est faite par trois types de carte, avec trois
services API de cartographie en ligne :

Figure 34 : Capture d'écran montant les différents services

ESRI, OpenStreetMap et Google Map sont des bases de données géographiques

du monde.

Exemples de types de cartes :

• ESRI Aerial : (de type satellite)

Figure 35 : ESRI Aerial Map

• OpenStreetMap (de type plan)

Figure 36 : OpenStreetMap Map type

56
 • Google Map Sat (de type satellite)

Figure 37 : Google Map Satellite map

b. Tableau des navires dans le port :

Le tableau est un package JavaScript qui est open source, fait en VueJS

Le package permet au développeur :

• Ajouter une table facilement à l’aide de VueJS

• Intégrer aisément les données dans le tableau
• Altérer la structure du tableau sans difficulté

Le package est aussi performant, et peut se connecter directement au côté serveur.

Figure 38 : Vue3-easy-data-table logo

57
c. Modèle de la fenêtre de la météo :
La fenêtre de la météo est réalisée principalement en VueJS, elle a de différents
styles, qui dépendent des différents types de météo :
Ensoleillé, nuageux, pluvieux, venteux et neigeux
Les figures ci-dessous sont un Example des différents types de météos :
• Ensoleillé

Figure 39 : Météo de type 'Ensoleillé'

• Pluvieux

Figure 40 : Météo de type 'Pluvieux'

58
 • Neigeux.

Figure 41 : Météo de type 'Neigeux'

c- Interface principale (Mobile) :

Cette application Web est développée aussi pour les périphériques mobiles :

Figure 32 : Interface mobile [Top] Figure 33 : Interface mobile (Bottom)

59
Conclusion :

Ce quatrième chapitre de notre rapport nous a permis de présenter notre projet qui à porter sur
la réalisation de l’application. Il a pour objet de présenter l’environnement logiciel et matériel
de réalisation, et de décrire les principales fonctionnalités implémentées pour donner suite au
développement par des captures écrans présentant les principes interfaces des applications.

60
 CONCLUSION GENERALE :

Ce stage de fin d’études, effectué au sein de l’entreprise « APM Terminals », m’a

permis d’avoir un aperçu de ce que c’est la vie professionnelle, avec toutes les contraintes et
les limites imposées dans le travail à accomplir. J’ai découvert que l’aspect pratique dépasse
souvent les connaissances acquises et qu’il constitue une formation rapide.

Le projet en lui-même a également représenté une bonne expérience pour moi.

La programmation d’une application a l’aide des APIs est une tendance de plus en plus
adoptée par les entreprises par ses nombreux avantages. Cette application arrive comme la
conclusion de ma formation, avec une mise en pratique de tous les aspects de la
programmation que j’ai pu rencontrer au cours de mon cursus.

Au terme de ce travail, la solution développée répond aux objectifs fixés. En effet, elle donne
au département d’opérations d’avoir une vision globale et de suivre l’état de leurs fonctions.

Afin de pousser plus loin les résultats du présent projet, plusieurs perspectives sont
envisageables dans la deuxième version de l’application :

• Intégration des systèmes d’authentification, pour permettre l’accès à l’application

même en dehors du réseau local
• Intégration de l’application avec Wow App (Application global d’APM Terminals)

61
 Références :

[Link]
[Link]
[Link]
[Link]
content/uploads/2021/04/Rapport_Annuel_Tangermed_VF-[Link]
[Link]
[Link]
danois-maersk-avec-2-3/
[Link]
[Link]
[Link]
du-groupe
[Link]
[Link]
86942/
[Link]

1
[Link]

62