STAGE D’ETE

2022 / 2023

Conception et réalisation d’une application web pour la gestion

d’une agence de livraison.

Ingénierie Informatique et Réseaux

Réalisé par :

RAISSI ZAKARIA.

MOHAMED TAHA ZENJARI.

Encadré par :

Hanane Aznaoui.
 Dédicace

Tout d'abord, nous voudrons remercier le dieu tout puissant et miséricordieux qui nous a
donné la force, l'intelligence et la patience pour accomplir ce travail

À NOS CHERS PARENTS

Nulle dédicace n’est susceptible de vous exprimer nos profondes affections et immenses
gratitudes pour tous les sacrifices que vous n’avez consentis pour notre éducations et
études. Puisse dieu vous prêter bonne santé et longue vie afin que nous puissions, à
notre tour, vous combler.

À NOS AMIS

En souvenir de notre sincère et profonde amitié et des moments agréables que nous
avons passés ensemble. Veuillez trouver dans ce travail l’expression de mon respect le
plus profond et mon affection la plus sincère.

En souvenir de notre sincère et profonde amitié et des moments agréables que nous
avons passés ensemble. Veuillez trouver dans ce travail l’expression de mon respect le
plus profond et mon affection la plus sincère.

2
 Remerciements

Tout d'abord, nous tenons à remercier toutes les personnes qui ont contribué à la
réussite de notre stage et qui nous ont aidé lors de la rédaction de ce rapport.

Ensuite, nous tenons à remercier tous nos professeurs, qui ont contribué à la réalisation
de ce modeste projet, qui m'ont encadré et aidé tout au long de mon parcours.

Nous tenons à remercier nos professeurs de l'école EMSI Marrakech qui nous ont
beaucoup aidé dans notre recherche de stage et nous ont permis de postuler dans cette
entreprise. Leur écoute et leurs conseils nous ont permis de cibler nos candidatures et
de trouver ce stage qui était en totale adéquation avec nos attentes.

Notre carrière aujourd’hui se résume chez Green Communication Agency, avec ce projet
qui nous a garanti une bonne atmosphère de travail, et un très bon environnement de
collaboration et de partage. Nous remercions tous les membres de l’équipe pour leur
bienveillance, nous ne remercions en personne notre encadrant Mme Hanane Aznaoui
pour le temps qui nous a accordé malgré ses occupations, nous lui remercie aussi pour
son sens d’écoute, de partage, et pour sa générosité.

3
 Résumé

Le projet présenté dans ce document fait partie du stage de la 3ème année de

notre cursus en Ingénierie Informatique et Réseaux à l'Ecole Marocaine des Sciences de
l'Ingénieur.

Il s'agit d'une application web qui offre un service de livraison à des clients qui sont dans
le domaine du commerce électronique.

L'objectif principal de ce projet est de donner aux clients un portail pour externaliser le
processus de livraison de leur entreprise.

Pour mener à bien notre projet, nous avons opté pour une approche agile pour concevoir
et développer l'application. La conception du projet s’appuie sur le formalisme de
modélisation UML

La réalisation de cette dernière s'appuie sur des outils et technologies tels que
XampServer, HTML5, TailwindCSS, Laravel, CSS3, MySQL, FIGMA.

4
 Abstract

The project presented in this document is part of the internship of the 3rd year of
our course in Computer and Network Engineering at the Moroccan School of
Engineering Sciences.

It is a web application that offers a delivery service to customers who are in the field of
e-commerce.

The main objective of this project is to give customers a portal to outsource the delivery

Process of their business.

To carry out our project, we opted for an agile approach to design and develop the
application. The project design is based on the UML modeling formalism

The realization of the application is based on tools and technologies such as

XampServer, HTML5, TailwindCSS, Laravel, CSS3, MySQL, FIGMA.

5
 LISTE DES FIGURES
Figure 1-1 Scrum discription .................................................. Erreur ! Signet non défini.
Figure 2-1 Volets de travaille ......................................................................................... 19
Figure 2-2 Diagramme de Gantt ……………………………………………………………...21

Figure 3-1 Diagramme de cas d'utilisation..................................................................... 27

Figure 3-2 Diagramme de Class ……………………………………………………………..25

Figure 3-3 Diagramme de Séquence de la création des clients ………………………….26

Figure 3-4 Diagramme de Séquence des bons de ramassages ………………………….27

Figure 3-5 Diagramme de Séquence des bons de livraisons ...………………………….28

Figure 5-1 Creation compte …………………………………………………………………. 41

Figure 5-2 Login ………………………………………………………………………………..42

Figure 5-3 Modification du compte …………………………………………………………..43

Figure 5-4 Ajout Colis ………………………………………………………………………….44

Figure 5-5 Liste de colis ……………………………………………………………………….44

Figure 5-6 Modification de colis ……………………………………………………………...45

Figure 5-7 Insertion de colis par feuille Excel ……………………………………………….45

Figure 5-8 Effectuer une réclamation ………………………………………………………..46

Figure 5-9 Liste de réclamation ………………………………………………………………46

Figure 5-10 Ajout bon ramassage ……………………………………………………………47

Figure 5-11 Modifier bon de ramassage …………………………………………………….47

Figure 5-12 Création de bon livraison ………………………………………………………..48

Figure 5-13 Liste des bons de livraison ……………………………………………………...48

Figure 5-14 Modification de bon de livraison ……………………………………………….49

6
 Table des matières
INTRODUCTION GENERALE ...................................................................................... 11

Chapitre 1 ...................................................................................................................... 12

PRESENTATION DE L’ENTREPRISE ...................................................................... 13

Fiche signalétique de l’agence .................................................................................. 13

METHODE DE TRAVAIL : ......................................................................................... 14

1. La Méthode SCRUM : ..................................................................................... 14

2. Les Cérémonies agiles (SCRUM) ................................................................... 15

a) Le Daily Meeting : ........................................................................................ 15

b) Le sprint planning meeting : ........................................................................ 16

c) La sprint review ........................................................................................... 16

d) Le Sprint rétrospective ................................................................................ 16

CONCLUSION :......................................................................................................... 16

CHAPITRE 2 : ............................................................................................................... 17

INTRODUCTION : ..................................................................................................... 18

PROBLEMATIQUE.................................................................................................... 18

OBJECTIF DU PROJET ET SOLUTION ................................................................... 18

La partie qui nous a été attribuée .......................................................................... 18

ANALYSE FONCTIONNELLE : ................................................................................. 19

3. Besoin fonctionnel :......................................................................................... 19

 Clients ........................................................................................................ 19

 Colis ........................................................................................................... 19

i Etats des colis ........................................................................................... 20

7
  Gestion des Bons de ramassage consiste à : ............................................. 20

Créer un bon de ramassage ........................................................................... 20

i Etats des bons de ramassages : ............................................................... 21

Mettre à jour les bons de ramassage créés. ................................................... 21

Annuler un bon de ramassage. ....................................................................... 21

 La gestion des bons de livraison consiste à : .............................................. 21

Créer un bon de livraison. ............................................................................... 21

i Etats des bons de livraison : ...................................................................... 22

Mettre à jour les bons de livraison créés. ........................................................ 22

Annuler un bon de livraison. ............................................................................ 22

 Traitement des réclamations : ..................................................................... 22

Etablir des réclamations. ................................................................................. 22

Consulter les réclamations. ............................................................................. 22

4. PLANIFICATION DU PROJET : ...................................................................... 23

a) Diagramme de Gantt ................................................................................... 23

CONCLUSION :......................................................................................................... 24

CHAPITRE 3 : ............................................................................................................... 25

INTRODUCTION ....................................................................................................... 26

Diagrammes des cas d’utilisation : ............................................................................ 26

Objectif .................................................................................................................. 26

Diagrammes des classes : ........................................................................................ 28

Objectif .................................................................................................................. 28

Diagrammes de Séquence : ...................................................................................... 29

Objectif .................................................................................................................. 29

b) Création des clients : ................................................................................... 29

8
 b) Bons de ramassages : ................................................................................. 30

c) Bons de livraisons ...................................................................................... 31

CONCLUSION :......................................................................................................... 32

CHAPITRE 4 ................................................................................................................. 33

OUTILS ET TECHNOLOGIES UTILISES .................................................................. 33

INTRODUCTION ....................................................................................................... 34

Les technologies adoptées à la réalisation ................................................................ 34

 Laravel : .............................................................................................. 34

 Php :.................................................................................................... 34

 Visual Studio Code :............................................................................ 35

 My Sql : ............................................................................................... 35

 XAMPP Server : .................................................................................. 36

 PhpMyAdmin : ..................................................................................... 37

 GitHub : ............................................................................................... 37

 HTML et CSS : .................................................................................... 38

 TailWindCSS ....................................................................................... 38

 FIGMA :............................................................................................... 39

 PowerAmc : ......................................................................................... 39

CONCLUSION........................................................................................................... 40

CHAPITRE 5 : ............................................................................................................... 41

INTRODUCTION ....................................................................................................... 41

Présentation des interfaces ....................................................................................... 42

CONCLUSION........................................................................................................... 50

Les difficultés rencontrées ............................................................................................. 51

Changer la plateforme de flutter à laravel : ................................................................ 51

9
 Travailler sur la gestion des délais serrés : ............................................................... 51

La lisibilité du code .................................................................................................... 51

CONCLUSION .............................................................................................................. 52

CONCLUSION(eng) ...................................................................................................... 53

Références .................................................................................................................... 55

10
 INTRODUCTION GENERALE

L'évolution rapide des technologies de l'information et de la communication a entraîné,

ces dernières années, une augmentation significative du nombre d'applications
disponibles dans la vie quotidienne et sur le lieu de travail. En particulier dans le domaine
du commerce électronique, où l'on tente toujours d'automatiser les parties ennuyeuses
de l'activité.

L'objectif principal est de réaliser une application web qui sert à alléger les charges de
livraison qui accompagnent l'activité de vente, en fournissant une plate-forme qui permet
à ses utilisateurs de vendre facilement leurs produits d'une manière beaucoup plus rapide
tout en augmentant leur gamme et leur portée.

Le présent rapport a pour objectif de décrire les différentes étapes menant à bien la
réalisation de notre projet.

11
 Chapitre 1

ENVIRONNEMENT DE STAGE

Ce chapitre présentera l'environnement du stage, l'organisme d’accueil ainsi que la

méthode de travail et résumé de période de notre formation.

12
 PRESENTATION DE L’ENTREPRISE

Green Communication a 11 ans d'expérience dans la conception et le développement

des applications et sites Web, le marketing numérique, les réseaux sociaux, le
référencement et le développement d'applications mobiles.

L’équipe de l’agence Green Communication est considéré comme une équipe créative
qui valorise l’innovation, la transparence et la communication, ainsi que l’équipe a un
meilleur savoir-faire dans le domaine informatique.

Fiche signalétique de l’agence

• Nom de l’entreprise : Green Communication.

• Adresse: Appartement 1, étage 1, Abouab Marrakech, Marrakech 4000.

• Durée du stage : 1 mois.

• Nature : développement informatique.

• Année de création : 2011.

•Forme juridique : Société à Responsabilité Limitée à associé unique.

• Horaire de travail : 9.00h—17.00h.

13
Agence : Green Communication

Le Genre d’Agence : Agence de communication

Chiffre d’affaires : 180.000 DH

E-mail : GreenCommunication@gmail.com

Salariés : 5 Personnes

METHODE DE TRAVAIL :
1. La Méthode SCRUM :
En opposition aux méthodes de gestion de projet traditionnelles, les
méthodes agiles prônent une organisation plus souple et adaptable et
c’est la méthode de travail adopté par Green Communication pour une
meilleure gestion de ces projets.

La méthode agile permet de s’adapter aux besoins évolutifs du marché

grâce à une approche apprenante itérative et incrémentale, elle permet
de se concentrer sur ce qui a le plus de valeur en privilégiant une culture
de la mesure et la proximité avec le client final pour améliorer en continu
ses solutions, favoriser l’engagement et l’alignement des équipes au
travers une approche collaborative de bout en bout et en favorisant la co-
construction et bien sûr pour construire le bon produit et le confronter
régulièrement à son marché en s’appuyant sur la culture, les pratiques ,
les outils Agiles et DevOps.

Dans ce projet on a travaillé par la méthode Agile SCRUM qui met en

œuvre un ensemble de règles simples pour réaliser des projets

14
complexes à l’aide une approche itérative et incrémentale, qui est menée
dans un esprit collaboratif avec juste ce qu’il faut de formalisme. Elle
génère un produit de haute qualité tout en prenant en compte l’évolution
des besoins des clients.

Figure 1-Erreur ! Utilisez l'onglet Accueil pour appliquer 0 au

texte que vous souhaitez faire apparaître ici.-1

La figure montre le processus agile avec SCRUM comme fonctionne, en

se basant sur des sprints.

Sprint : un sprint est un rassemblement de personnes impliquées dans

un projet afin de se concentrer sur le développement de ce projet. Un
sprint dure en général de deux à sept jours.

Backlog du produit (ou Product Backlog) : c’est une liste priorisée des
fonctionnalités à réaliser, et qui est mise à jour par le Référent Produit.

2. Les Cérémonies agiles (SCRUM)

a) Le Daily Meeting : est un événement de 15 minutes pour les

développeurs de l'équipe Scrum. Pour réduire la complexité.

15
 b) Le sprint planning meeting : c’est la première réunion de chaque
sprint, ou cycle de développement, qui dure en général de deux
semaines à un mois et pendant lequel les développeurs vont
concevoir et tester de nouvelles fonctionnalités.

c) La sprint review : ou revue de sprint en français, est la réunion

destinée à évaluer les résultats obtenus par l'équipe SCRUM après
un sprint. Elle permet d'analyser les progrès réalisés par le
développement afin d'atteindre l'objectif fixé.

d) Le Sprint rétrospective : Dans le langage agile, la sprint

rétrospective s'inscrit dans le principe d'amélioration continue.
L'objectif est que le prochain sprint soit plus efficace que le
précédent et ainsi de suite. C'est une méthode empirique, c'est-à-
dire basée sur l'expérience et sur l'autoapprentissage.

Notre projet adopte la méthode Scrum donc, chaque jour du sprint, tous les membres de
l’équipe assistent à la réunion SCRUM quotidienne. Cette dernière ne dépasse pas 15
minutes, et permet aux membres de l’équipe de partager avec les autres ce qu’ils ont fait
la veille, ce sur quoi ils travaillent le jour même, ainsi que l’identification de tout problème
pouvant entraver le bon déroulement du sprint. Cette réunion permet ainsi de
synchroniser tous les membres de l’équipe.

CONCLUSION :
Nous avons vu au niveau de ce chapitre, la présentation de l’organisme d’accueil, son
organisation et la méthode de travail adoptée. Le chapitre suivant portera sur le contexte
général de notre projet et abordera l'analyse de l'existant, l'analyse fonctionnel et aussi
des risques.
16
 CHAPITRE 2

CONTEXT GENERAL DU PROJET

Ce chapitre présentera l’objectif du projet, les besoins fonctionnels et non

fonctionnels, la solution et la planification avec le diagramme de GANT.

17
 INTRODUCTION :

Dans ce chapitre on présentera notre problématique, les besoins fonctionnels et non

fonctionnels et la planification de notre période de stage de manière à pouvoir satisfaire
l’ensemble des besoins.

PROBLEMATIQUE

Au cours des 5 dernières années, le monde de l'e-commerce a connu une croissance

fulgurante et une attention particulière, ce qui signifie beaucoup de travail et de stress
pour les propriétaires d'entreprises qui travaillent seuls pour gérer le renouvellement des
produits, les campagnes de marketing, les livraisons et les réclamations, rendant tout le
processus à risque de surcharge de travail.

OBJECTIF DU PROJET ET SOLUTION

L'objectif principal de ce projet est de construire un site web fonctionnel en utilisant

le Framework Laravel, qui gère le processus de livraison pour nos clients, qui comprend
le retrait des produits et le paiement.

Avant de commencer à utiliser la plateforme, les clients doivent signer un contrat avec
l’agence.

La partie qui nous a été attribuée

En raison de l'ampleur du projet, l'équipe de développement a été divisée en 3
groupes, géolocalisation et paiement, partie livreur et la partie sur laquelle nous avons
travaillé, gestion des bons, colis, clients et réclamations.
18
 ANALYSE FONCTIONNELLE :
Les volets sur lesquels nous allons travailler :

Figure 2-Erreur ! Utilisez l'onglet Accueil pour appliquer 0 au texte

que vous souhaitez faire apparaître ici.-2 Volets de travaille

3. Besoin fonctionnel :
 Clients
Devenir / valider un client :
Ce processus sera utilisé pour la création d'un nouveau client.
Modifier les informations :
Ce procédé sera utilisé pour modifier les données.
Suppression d’un client :
Ce processus sera utilisé pour la suppression d’un client.
 Colis
Ajouter un coli :
Ajouter un coli soit manuellement, soit avec une feuille Excel.

19
La nature du coli ne doit pas rompre les termes de l'accord afin qu'il puisse être accepter.

i Etats des colis

Code d'état Nom de l'état

CAT Colis en attente

CR Colis rejetée

CP Colis prête

CER Colis en cours de ramassage

CAS Colis ramassée

CSR Coli info de suivi reclus

CT Coli en transit

CL Coli en livraison

CEL Coli échoué de livraison

CXX Coli exception

Modification des colis :

Modifier les informations des colis

Suppression des colis :

Supprimer les colis.

 Gestion des Bons de ramassage consiste à :

Créer un bon de ramassage

Le client sélectionne les colis et crée ensuite un bon de livraison avec tous les
détails nécessaires.

20
 i Etats des bons de ramassages :

Code d'état Nom de l'état

BrM Bon r_ Modifiable

BrAt Bon r_ en attente

BrA Bon r_ accepter

Brt Bon r_ Traiter

Mettre à jour les bons de ramassage créés.

Les modifications ne sont possibles qu'avant l'acceptation du bon.

Annuler un bon de ramassage.

Le client peut annuler le bon de ramassage dans un délai de 12 heures.
Si le bon de ramassage a dépassé la limite de 12h, le client a le choix de forcer
l’annulation en payent une amende.

 La gestion des bons de livraison consiste à :

Créer un bon de livraison.

Apres l’acceptation du bons de ramassage, le client a le choix de créer un bon de
livraison avec les colis ramasser, aussi modifiable dans un délai de 12h.

21
 i Etats des bons de livraison :
Code d'état Nom de l'état

BLM Bon L_ Modifiable

Bled Bon L_ en_délivrance

BLd Bon L_ délivré

Brer Bon L_ en_retard

Brp Bon L_ payé

Mettre à jour les bons de livraison créés.

Les modifications ne sont possibles qu'avant l'acceptation du bon.

Annuler un bon de livraison.

Le client peut annuler le bon de livraison dans un délai de 12 heures.

 Traitement des réclamations :

Etablir des réclamations.

Le client peut déposer des plaintes, qui seront examinées par les administrateurs,
sur n'importe quelle partie du processus.

Consulter les réclamations.

Le client peut vérifier ses évaluations et les filtrer par objet.

L'administrateur ou le technicien peut également les consulter

22
 4. PLANIFICATION DU PROJET :

Conduire un projet, c’est assurer le pilotage d’un processus de changement avec des
ressources dédiées en optimisant les compétences, l’organisation, les systèmes et les
outils de conduite.

Une approche managériale réactive, souple et systématique pour mener à bien des
changements importants, complexes, ciblés sur le but à atteindre. Il y a trois niveaux de
gestion du projet : la gestion de la production, des ressources et du temps. Afin de
satisfaire à ce dernier critère qu’est la gestion du temps, il est nécessaire d’établir un
planning prévisionnel.

a) Diagramme de Gantt
Le diagramme de GANTT est un outil permettant de modéliser la planification des tâches
nécessaires à la réalisation d'un projet. Il permet de visualiser dans le temps ces diverses
tâches

23
 CONCLUSION :
Nous avons vu au niveau de ce chapitre, la problématique du projet Europcar, les besoins
fonctionnels et non fonctionnels, la solution et la planification avec le diagramme GANT.
Ainsi, nous nous sommes positionnés dans le contexte de notre projet, ceci va nous
permettre d’entamer la prochaine étape consiste à présenter la phase de conception.

24
 CHAPITRE 3

ANALYSE ET CONCEPTION DU PROJET

Pour une meilleure maîtrise d'un projet informatique, il est important de suivre une
démarche ou une méthodologie rigoureuse. L'approche adoptée dans ce projet consiste
en un processus de développement unifié construit autour d'UML (Unified Modeling
Language). Ce chapitre présentera la partie conceptualisation de ce projet utilisant UML
comme outil.

25
 INTRODUCTION

L’analyse conceptuelle est une phase indispensable d’un projet en

développement logiciel, ça montre une meilleure compréhension de la
problématique projet et une maitrise des exigences client.

Dans ce chapitre nous présentons les diagrammes : de classes, de cas

d’utilisation et de séquences.

Diagrammes des cas d’utilisation :

Objectif :

L'objectif d'un diagramme de cas d'utilisation UML est de représenter les

différentes façons dont un utilisateur peut interagir avec un système.

26
Figure 3-3 Diagramme de cas d'utilisation

27
 Diagrammes des classes :
Objectif :

Ce diagramme de classe représente l’ensemble de classe que nous avons travaillé

avec dans notre partie du projet.

Figure 3-2 : Diagramme de classe

28
 Diagrammes de Séquence :
Objectif :

Le diagramme de séquence modélise la collaboration des objets sur la base d'une

séquence temporelle.
b) Création des clients :

Figure 3-3 Diagramme de séquence de la création des clients

29
b) Bons de ramassages :

Figure 3-4 Diagramme de séquence des bons de ramassages

30
c) Bons de livraisons

Figure 3-5 Diagramme de séquence des bons des livraisons

31
 CONCLUSION :
Dans ce chapitre, nous avons présenté les différents diagrammes de modélisation
élaborés qui synthétisent les différentes fonctionnalités du système ainsi l’architecture
globale du projet. Dans le chapitre suivant, nous présenterons les outils et les
technologies utilisées pour réaliser cette application à la fois dans le backend et le
frontend ainsi que dans la partie configuration des deux.

32
 CHAPITRE 4

OUTILS ET TECHNOLOGIES UTILISES

Sans les outils et les frameworks déjà créés, il sera extrêmement difficile de créer
une application aussi petite soit-elle à partir de zéro. Ce chapitre parlera des outils et
frameworks qui ont été utilisés pour réaliser notre application.

33
 INTRODUCTION

Ce chapitre traite des contraintes techniques, et comprend une présentation des

différentes technologies et outils utilisés.

Les technologies adoptées à la réalisation

 Laravel :

Laravel est un framework web open-source écrit en PHP1 respectant le

principe modèle-vue-contrôleur et entièrement développé en programmation orientée
objet. Laravel est distribué sous licence MIT, avec ses sources hébergées sur GitHub.

 Php :

PHP est un langage de programmation libre6, principalement utilisé pour produire

des pages Web dynamiques via un serveur HTTP5, mais pouvant également fonctionner
comme n'importe quel langage interprété de façon locale. PHP est un langage
impératif orienté objet.

PHP a permis de créer un grand nombre de sites web célèbres,

comme Facebook et Wikipédia7. Il est considéré comme une des bases de la création
de sites web dits dynamiques mais également des applications web.
34
  Visual Studio Code :

Visual Studio Code [15] est un éditeur de code extensible développé par Microsoft
pour Windows, Linux et macOS2. Les fonctionnalités incluent la prise en charge du
débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les
snippets, la refactorisation du code et Git intégré. Les utilisateurs peuvent modifier le
thème, les raccourcis clavier, les préférences et installer des extensions qui ajoutent des
fonctionnalités supplémentaires. Le code source de Visual Studio Code provient du projet
logiciel libre et open source VS Code de Microsoft publié sous la licence MIT permissive,
mais les binaires compilés constituent un freeware, c'est-à-dire un logiciel gratuit pour
toute utilisation mais privateur.

 My Sql :

35
 MySQL est un système de gestion de bases de données relationnelles
(SGBDR). Il est distribué sous une double licence GPL et propriétaire. Il fait partie des
logiciels de gestion de base de données les plus utilisés au monde2, autant par le grand
public (applications web principalement) que par des professionnels, en concurrence
avec Oracle, PostgreSQL et Microsoft SQL Server.

 XAMPP Server :

XAMPP est un ensemble de logiciels permettant de mettre en place un serveur

Web local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne
souplesse d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la
portée d'un grand nombre de personnes puisqu'il ne requiert pas de connaissances
particulières et fonctionne, de plus, sur les systèmes d'exploitation les plus répandus

36
  PhpMyAdmin :

Il s'agit de l'une des plus célèbres interfaces pour gérer une base de données MySQL sur
un serveur PHP. De nombreux hébergeurs, gratuits comme payants, le proposent ce qui
évite à l'utilisateur d'avoir à l'installer.
Les requêtes SQL restent possibles, ce qui permet de les tester interactivement lors de
la création d'un site pour les utiliser ensuite en batch (c'est-à-dire en différé) une fois au
point.

 GitHub :

GitHub est un service web d'hébergement et de gestion de développement de

logiciels, utilisant le logiciel de gestion de versions Git. Ce site est développé en Ruby on
Rails et Erlang par Chris Wanstrath, PJ Hyett et Tom Preston-Werner.
C’est un gestionnaire de version facilitant le partage du travail entre les membres de
l’équipe, par la création d’un repository local qui est connecté au repository distant.

37
  HTML et CSS :

L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour
créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui signifie
en français "langage de balisage d'hypertexte". Cette signification porte bien son nom
puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure
de balisage.

Le CSS pour Cascading Style Sheets, est un langage informatique utilisé sur Internet
pour la mise en forme de fichiers et de pages HTML. On le traduit en français par feuilles
de style en cascade.

 TailWindCSS

Tailwind CSS est un framework permettant aux développeurs de personnaliser

totalement et simplement le design de leur application ou de leur site web. Avec
ce framework CSS, il est possible de créer un design d’interface au sein même du fichier

38
HTML. Cette façon de programmer n’interfère pas avec les pratiques recommandées par
le W3C comme celle de séparer le HTML des feuilles de style CSS.

 FIGMA :

Figma est une application web d’édition graphique qui permet le partage en temps
réel sur le même fichier, ce qui signifie que toutes les parties prenantes du projet peuvent
interagir ensemble et travailler en collaboration sur un projet qui prend en compte chaque
mise à jour et les modifications. C’est évidemment un gain de temps et un facteur
d’efficacité.

 PowerAmc :

39
 PowerAMC est un logiciel de conception créé par la société SAP, qui permet de
modéliser les traitements informatiques et leurs bases de données associées.
Il permet de réaliser tous les types de modèles informatiques. Power AMC permet de
travailler avec la méthode Merise. Cela permet d'améliorer la modélisation, les processus,
le coût et la production d'applications.

CONCLUSION
Ce chapitre a été consacré à la partie étude technique et les outils de la réalisation du
projet.

40
 CHAPITRE 5

MISE EN OEUVRE DU PROJET

Ce chapitre parlera des phases de la réalisation du projet et présentera les principales

interfaces de l'application

INTRODUCTION
Dans ce chapitre on va découvrir le fruit de notre travail durant toute la période de stage
en présentant les interfaces de l’application.

41
 Présentation des interfaces

1. Client :

Figure 5-1 Creation compte

Cette interface permet à l’utilisateur de créer un compte.

42
 Figure 5-2 Login

Pour s’authentifier l’utilisateur de l’application saisit le nom d’utilisateur ou bien l’email

et le mot de passe.

43
 Figure 5-3 Modification du compte

Cette interface permet à l'utilisateur de modifier ses informations, voir le sessions ouverte
ou bien supprimer son compte.

44
 2. Colis :

Figure 5-4 Ajout Colis

Ici, l'utilisateur peut ajouter des colis à son inventaire virtuel pour qu'ils soient vérifiés et
approuvés ultérieurement pour le processus.

Figure 5-5 Liste de colis

45
Cette interface montre à l'utilisateur son inventaire de colis et lui permet d'accéder
facilement aux modifications et aux suppressions.

Figure 5-6 Modification de colis

Cette interface permet à l'utilisateur de modifier les détails de ses colis.

Figure 5-7 Insertion de colis par feuille Excel

Ici, le client peut ajouter ses colis en utilisant une feuille Excel s'il le préfère.

46
 3. Réclamations :

Figure 5-8 Effectuer une réclamation

Cette interface permet à l'utilisateur de réclamer de tout problème qu'il a rencontré lors
de son utilisation de notre application.

Figure 5-9 Liste de réclamation

Cette interface permet à l'utilisateur d’effectuer des réclamations à notre support.

47
 4. Bons de ramassage :

Figure 5-10 Ajout bon ramassage

Après avoir ajouté ses colis dans le système, l'utilisateur peut ajouter un bon de
ramassage pour que l'agence puisse ramasser les colis à son entrepôt.

Figure 5-11 Modifier bon de ramassage

Ici, l’utilisateur peut modifier les bons de ramassage.

48
 5. Bons de livraison :

Figure 5-12 Création de bon livraison

Ici, l’utilisateur peut sélectionner des colis ramassés et créer un bon de livraison.

Figure 5-13 Liste des bons de livraison

Cette interface permet à l'utilisateur de gérer ces bons de livraison.

49
 Figure 5-14 Modification de bon de livraison

Cette interface permet à l'utilisateur de modifier son bon de livraison, ajouter des
nouveaux colis ou bien supprimer des colis.

CONCLUSION

Le travail sur la partie frontale est toujours en cours d’amélioration dans le but de
livrer un travail très satisfaisant que ça soit pour nous, notre manager ou le client dans le
cas si on lui propose l’application.

50
 Les difficultés rencontrées
Ce stage a apporté une grande valeur et de nouvelles expériences, mais il a aussi été
accompagné d'un certain nombre de difficultés que nous avons surmontées :

Changer la plateforme de flutter à laravel :

Pendant les premières étapes du développement, le client a décidé de changer la

plateforme de son application pour laravel, ce qui nous a mis sous pression pour
apprendre à utiliser le framework et repartir de zéro.

Travailler sur la gestion des délais serrés :

En raison de la dernière difficulté mentionnée, tous les délais qui avaient été assignés ont
dû être raccourcis et nous avons dû faire des efforts supplémentaires pour les respecter,
mais aussi, la société a assigné un employé senior qui nous a aidé chaque fois que nous
avons demandé son avis.

La lisibilité du code
S'assurer que notre code peut être lisible et compréhensible par d'autres équipes était
une nouvelle tâche que nous n'avions pas prise en compte au départ, mais qui nous a
permis par la suite d'améliorer notre façon de penser et de rédiger notre code.

51
 CONCLUSION

L'expérience joue un rôle très important dans le développement et l'amélioration

des compétences d'un individu car elle est considérée comme une connaissance pratique
acquise après une longue période d'efforts et de travail.
Ainsi, cette démonstration a été pour nous une occasion précieuse de découvrir le monde
du travail, de clarifier certains problèmes, d'enrichir et d'améliorer les connaissances
acquises au cours de nos études, tant sur le plan théorique que pratique.
Le point de départ de ce projet a été de collecter les informations nécessaires sur les
technologies qui seront utilisées, de présenter un aperçu de la problématique et de
l'architecture.
Ensuite, nous nous sommes intéressés à l'analyse et à la spécification des besoins qui
nous ont permis de distinguer les différents acteurs interagissant avec l'application visée.
L'objectif de la partie suivante était la conception détaillée, dans laquelle nous avons
établi la structure globale de l'application. La dernière partie de notre projet était la partie
réalisation, qui était consacrée à la présentation des outils de travail et des interfaces les
plus significatives de notre application.
L'apport de ce travail a été d'une importance considérable, en effet, il nous a permis de
suivre une méthodologie de travail bien étudiée et d'approfondir nos connaissances dans
le monde du développement d'applications. Cette expérience nous a permis de maîtriser
le langage UML, le framework Laravel, sous lequel le développement n'était pas une
tâche facile, mais nous n'avons pas hésité à y participer.
En perspective, cette application pouvait être améliorée et enrichie de fonctionnalités
mais en raison du budget restreint du client nous avons dû déclasser et répondre aux
Exigences demandées par notre superviseur.

52
 CONCLUSION(eng)

Experience plays a very important role in the development and improvement of an

individual's skills as it is considered practical knowledge acquired after a long period of
effort and work.
Thus, this demonstration was a valuable opportunity for us to discover the world of work,
to clarify some problems, to enrich and improve the knowledge acquired during our
studies, both in theory and practice.
The starting point of this project was to collect the necessary information about the
technologies that will be used, to present an overview of the problem and the architecture.
Then, we focused on the analysis and specification of the requirements that allowed us
to distinguish the different actors interacting with the targeted application. The objective
of the next part was the detailed design, in which we established the overall structure of
the application. The last part of our project was the realization part, which was devoted to
the presentation of the most significant working tools and interfaces of our application.
The contribution of this work was of considerable importance, in fact, it allowed us to
follow a well-studied work methodology and to deepen our knowledge in the world of
application development. This experience allowed us to master the UML language, the
Laravel framework, under which the development was not an easy task, but we did not
hesitate to participate.
In perspective, this application could be improved and enriched with features but due to
the limited budget of the client we had to downgrade and meet the
Requirements requested by our supervisor.

53
 ‫)‪CONCLUSION(ar‬‬

‫دورا مه ًما للغاية في تطوير وتحسين مهارات الفرد حيث تعتبر المعرفة العملية المكتسبة بعد فترة‬
‫تلعب الخبرة ً‬
‫طويلة من الجهد والعمل‪.‬‬

‫وبالتالي‪ ،‬كان هذا العرض فرصة ثمينة بالنسبة لنا الكتشاف عالم العمل‪ ،‬وتوضيح بعض المشاكل‪ ،‬وإثراء وتحسين‬
‫المعرفة المكتسبة أثناء دراستنا‪ ،‬من الناحية النظرية والتطبيقية‪.‬‬

‫كانت نقطة البداية في هذا المشروع هي جمع المعلومات الضرورية حول التقنيات التي سيتم استخدامها‪ ،‬لتقديم لمحة‬
‫عامة عن المشكلة والهندسة المعمارية‪.‬‬

‫بعد ذلك‪ ،‬ركزنا على تحليل وتحديد المتطلبات التي سمحت لنا بتمييز الجهات الفاعلة المختلفة التي تتفاعل مع التطبيق‬
‫المستهدف‪ .‬كان الهدف من الجزء التالي هو التصميم التفصيلي‪ ،‬حيث أنشأنا الهيكل العام للتطبيق‪ .‬كان الجزء األخير‬
‫من مشروعنا هو جزء اإلنجاز‪ ،‬والذي تم تخصيصه لعرض أهم أدوات العمل وواجهات تطبيقنا‪.‬‬

‫كانت مساهمة هذا العمل ذات أهمية كبيرة‪ ،‬في الواقع‪ ،‬سمحت لنا باتباع منهجية عمل مدروسة جيدًا وتعميق معرفتنا‬
‫في عالم تطوير التطبيقات‪ .‬سمحت لنا هذه التجربة بإتقان لغة ‪ ،UML‬إطار عمل ‪ ،Laravel‬الذي لم يكن التطوير‬
‫بموجبه مهمة سهلة‪ ،‬لكننا لم نتردد في المشاركة‪.‬‬

‫نظرا لميزانية العميل المحدودة‪ ،‬اضطررنا إلى الرجوع‬

‫في المنظور‪ ،‬يمكن تحسين هذا التطبيق وإثرائه بالميزات ولكن ً‬
‫إلى إصدار سابق وتلبية‬

‫المتطلبات التي طلبها مشرفنا‪.‬‬

‫‪54‬‬
 Références

[1] https://laravel.com/docs « consultation de documentation du

framework »

[2] Stackoverflow « consultation des solutions de code information en

cas de besoin pour se débloquer »

[3] https://tailwindcss.com/docs « consultation du documentation pour

les class CSS utilisées »

55
56