Rapport de Stage

Société Tangeroise de Maintenance
1ère année du Cycle d’Ingénieur
Tanger, Septembre 2023

Filière Ingénierie Informatique et Réseaux
Rapport Stage D’ Initiation
Titre Du Stage :
Conception et Réalisation
des sites web en utilisant
React
Réalise par : Randa El Maazouza
Encadré Par : Doae Mansouri (Encadrante pédagogique)
Alae Moudni (Encadrant professionnelle)
Membres du jury :
Dédicace
Je tiens à exprimer ma gratitude profonde envers ma famille pour leur soutien inébranlable tout au
long de mon parcours. Votre encouragement constant a été ma source inestimable d'inspiration.
Votre soutien a été la force motrice qui m'a permis d'atteindre ces réalisations. Du fond du cœur,
merci.
8/22/2023 1
Remercîment
Je souhaite sincèrement remercier toutes les personnes qui ont joué un rôle crucial dans la réussite
de mon stage et dans la création de ce rapport. En particulier, je tiens à exprimer ma reconnaissance
envers mon maître de stage, Monsieur Alae Moudni, pour son accueil chaleureux, ses précieux
conseils et la confiance qu'il m'a accordée dès mon entrée dans l'entreprise.
Mes remerciements s'étendent également à M. Hamza Jabour et Mme Nada Stittou, développeurs
web au sein de la société, pour leur disponibilité, leur temps précieux et leur précieuse assistance
qui ont grandement contribué à mon apprentissage.
J'adresse également mes remerciements les plus sincères aux équipes pédagogiques et
administratives de l'École Marocaine des Sciences de l'Ingénieur qui ont facilité les démarches et
ont soutenu mon parcours éducatif. Votre engagement envers l'excellence a été un élément clé de
ma formation.
8/22/2023 2
Table de Matières:
Résume............................................................................................................................................ 6
Abstract ........................................................................................................................................... 6
Introduction ..................................................................................................................................... 8
Chapitre 1: Presentation de l’entreprise ........................................................................................ 10
Chapitre 2 : Département IT et mission ........................................................................................ 18
Chapitre 3 : Méthodologie de travaille et technologies utiliser .................................................... 23
Chapitre 4 : Projet I : Gestion Parking .......................................................................................... 30
Chapitre 5 : Projet II : Labelling picture ....................................................................................... 51
Chapitre 6 : Compétences acquises et apprentissages .................................................................. 70
Conclusion .................................................................................................................................... 75
8/22/2023 3
Table de figures:
Figure 1:Logo de La société tangéroise de maintenance ............................................................................ 12
Figure 2:Organigramme de STM . .............................................................................................................. 13
Figure 3:Mr Tarik Moudni, Président Directeur Général de STM Group. ................................................. 14
Figure 4:STM Tanger Showroom. .............................................................................................................. 15
Figure 5:Liste des entreprises et organismes publics qui leur font confiance............................................. 16
Figure 6:Partenaires Métiers et Techniques et les Principaux Éditeurs et Constructeurs du Secteur
Informatique................................................................................................................................................ 17
Figure 7:Figure représente le projet de parking .......................................................................................... 21
Figure 8:Figure représente le projet de labelling picture. ........................................................................... 22
Figure 9:Représentation simplifiée du principe de la méthode Agile. ........................................................ 24
Figure 10:Diagramme de Gantt................................................................................................................... 26
Figure 11:Diagramme de cas d'utilisation du 1er projet ............................................................................. 33
Figure 12:Diagramme de séquence de connexion. ..................................................................................... 34
Figure 13:Diagramme de séquence d'ajout. ................................................................................................ 35
Figure 14:Diagramme de séquence de surpression. .................................................................................... 36
Figure 15:Diagramme de séquence de modification................................................................................... 37
Figure 16:Diagramme de séquence de filtrage. .......................................................................................... 38
Figure 17:Diagramme de classe du 1er projet ............................................................................................ 39
Figure 18:Capture de fichier db.json .......................................................................................................... 40
Figure 19:Capture Exemple 1 d'utilisation des requêtes HTTP(GET)........................................................ 41
Figure 20:Capture Exemple 2 d'utilisation des requêtes HTTP(DELET). .................................................. 41
Figure 21:Capture de page de login. ........................................................................................................... 42
Figure 22:Capture de page qui gère l'historique des véhicules. .................................................................. 43
Figure 23:Capture représenté l'ajout d’un véhicule. ................................................................................... 43
Figure 24:Capture représente la table après l'ajout. .................................................................................... 44
Figure 25:Capture représenté modification d’un véhicule. ......................................................................... 44
Figure 26:Capture représenté la table après les modifications.................................................................... 45
Figure 27:Capture représente les véhicules en cours. ................................................................................. 45
Figure 28:Capture représente la page de recherche. ................................................................................... 46
Figure 29:Capture représente un exemple de recherche. ............................................................................ 46
Figure 30:Capture représente un autre exemple de recherche. ................................................................... 47
Figure 31:Capture représente page profile. ................................................................................................. 47
Figure 32:Capture représente profile. ......................................................................................................... 48
Figure 33:Capture représente les véhicules en cours. ................................................................................. 48
Figure 34:Capture représente l'historique d’un user. .................................................................................. 49
Figure 35:Diagramme cas d’utilisation. ...................................................................................................... 54
Figure 36:Diagramme de séquence. ............................................................................................................ 55
Figure 37:Diagramme de classe. ................................................................................................................. 56
Figure 38: Structure de dossier src.............................................................................................................. 56
Figure 39:Fast API et Swagger ................................................................................................................... 57
8/22/2023 4
Figure 40:Capture code utiliser pour Connexion (Login). .......................................................................... 58

Figure 41:Capture de code utiliser pour Récupération des Utilisateurs. ..................................................... 58
Figure 42:Page login. .................................................................................................................................. 59
Figure 43:Message de bienvenue. ............................................................................................................... 60
Figure 44:Barre de navigation. ................................................................................................................... 60
Figure 45:CRUD des utilisateurs. ............................................................................................................... 61
Figure 46:Capture représente un exemple de recherche. ............................................................................ 61
Figure 47:Capture représenté l'ajout d’un utilisateur. ................................................................................. 62
Figure 48:Capture représente table des utilisateurs après ajout. ................................................................. 62
Figure 49:Capture représenté modification d’un utilisateur. ...................................................................... 63
Figure 50:Capture représenté la table après les modifications.................................................................... 63
Figure 51 : CRUD des clients. .................................................................................................................... 64
Figure 52:CRUD des projets. ...................................................................................................................... 64
Figure 53:CRUD des images. ..................................................................................................................... 65
Figure 54:CRUD des labels. ....................................................................................................................... 65
Figure 55:Page d’annotation. ...................................................................................................................... 66
Figure 56:Page d’annotation 2. ................................................................................................................... 66
Figure 59: Page d’annotation 5. .................................................................................................................. 68
Figure 60:Table des images après l'annotation. .......................................................................................... 68
Figure 61:Capture représentant l'utilisation de react-router-dom. .............................................................. 71
Figure 62:Capture représentant les bibliothèques utilisées dans l'un des composant. ................................ 72
Figure 63:Capture représentantes Une erreur. ............................................................................................ 73
Figure 64:Swagger. ..................................................................................................................................... 74
8/22/2023 5
Résume
Ce rapport de stage d'un mois au sein de l'entreprise STM synthétise notre immersion au sein de
l'univers informatique. Il rassemble les facettes de notre expérience en explorant la présentation
de l'entreprise STM, notre participation au département IT avec ses missions, les méthodologies
et technologies employées, ainsi que la concrétisation de deux projets : la gestion de parking et le
labelling d'images. Ce document est le fruit de nos efforts durant ce mois, visant à embrasser tous
les aspects pertinents. Notre ambition était de partager notre expérience de manière complète, sans
omission, et nous avons abordé chaque chapitre avec soin. Nous ressortons de cette expérience
fière de notre travail et enthousiastes à l'idée de poursuivre dans le domaine de l'informatique.
8/22/2023 6
Abstract
This one-month internship report within STM encapsulates my immersion within the realm of
information technology. It brings together the facets of my experience by delving into the
presentation of STM as a company, my engagement within the IT department with its assignments,
the methodologies and technologies employed, as well as the realization of two flagship projects:
parking management and image labelling. This document is the outcome of my efforts over the
course of this month, with the aim of encompassing all relevant aspects. My intention was to
comprehensively share my experience without omission, and I approached each chapter with care.
I emerge from this experience proud of my work and enthusiastic about continuing in the field of
computer science.
8/22/2023 7
Introduction
Au fil de nos études en développement informatique, nous avons toujours été passionnés par les
technologies modernes et les innovations numériques. Cette quête de connaissances nous a
naturellement conduits à chercher une expérience professionnelle pour affiner nos compétences et
approfondir notre compréhension du développement web dans un contexte réel. C'est ainsi que
nous avons saisi l'opportunité de réaliser un stage d'un mois chez STM, un acteur majeur des
technologies de l'information et des communications ainsi que des services professionnels et de
conseil.
Nos objectifs pour ce stage étaient variés. Avant tout, nous aspirions à établir des relations
professionnelles et à collaborer au sein d'une équipe compétente. Nous désirions également
découvrir la vie quotidienne en entreprise pour mieux appréhender les réalités concrètes du monde
professionnel, différemment de l'environnement académique. En outre, notre ambition était
d'acquérir de nouvelles connaissances, en explorant des concepts et compétences non abordés en
classe.
Les résultats obtenus durant ce stage ont répondu à nos attentes, même si nous n'avions pas pour
but ultime d'atteindre la perfection. Nous ressentons une grande fierté envers ces réalisations,
d'autant plus qu'il s'agit de notre première expérience professionnelle. Deux projets web se sont
particulièrement distingués : le premier a consisté en un test d'évaluation de nos compétences en
développement web et de notre familiarisation avec les technologies propres à l'entreprise,
notamment dans le cadre de la gestion d'un parking. Le second projet, plus ambitieux, visait à créer
une application web d'annotation d'images pour un client de STM.
Ce stage a marqué une étape cruciale dans notre parcours académique, nous permettant de plonger
concrètement dans le fonctionnement d'une entreprise évoluant dans le domaine des technologies.
Nous avons pu mettre en pratique les compétences théoriques acquises pendant nos études, tout en
découvrant les méthodes de travail en entreprise, les exigences professionnelles et les défis
spécifiques au développement web dans un environnement professionnel.
Ce rapport de stage vise à détailler notre expérience professionnelle chez STM, en mettant en
évidence les projets auxquels nous avons contribué, les compétences que nous avons développées
et les enseignements tirés de cette immersion. Nous décrirons différents aspects de notre stage, de
la conception au déploiement, en mettant en avant les défis techniques rencontrés et les solutions
mises en œuvre pour les surmonter.
8/22/2023 8
Nous demeurons convaincus que ce stage chez STM a été une étape déterminante dans notre
cheminement en tant que développeurs web. Il a renforcé notre passion pour le développement
web et nous a confortés dans notre volonté de continuer à évoluer dans ce domaine en constante
mutation. Nous exprimons notre gratitude envers STM pour cette opportunité de croissance
professionnelle et attendons avec enthousiasme de partager les détails de cette expérience
enrichissante à travers ce rapport de stage.
8/22/2023 9
Chapitre 1: Presentation de l’entreprise

Résumé
Ce chapitre établit les bases du contexte opérationnel de l'entreprise.

Nous présenterons l'entreprise, ses produits et son historique, ainsi que
son organisation interne. De plus, nous explorerons son environnement
en analysant sa clientèle et ses fournisseurs.
8/22/2023 10
1. Presentation de l’ enterprise
STM Group, créée en 1998, est spécialisée dans les services informatiques pour les entreprises.
Avec cinq agences et une équipe qualifiée de cinquante ingénieurs et techniciens, STM Group est
un interlocuteur de référence dans l'intégration des infrastructures et des systèmes d'information.
Grâce à son expertise pointue, elle offre des solutions à forte valeur ajoutée et s'engage dans
l'optimisation et l'industrialisation des infrastructures et des applications. En tant que partenaire
des principaux éditeurs de logiciels, STM Group construit une relation de confiance réciproque
avec ses clients et partenaires, garantissant ainsi le succès durable des projets. Elle propose
également des prestations de conseil opérationnel et technologique à haute valeur ajoutée.
1.1. Fiche technique:

Nom de l’entreprise La société tangéroise de maintenance (STM)
Siège social Tanger, Tanger-Tetouan
Forme juridique Société à Responsabilité Limitée à Associé
Unique
Capitale 3 000 000 DHS
Fondée en 1998
Secteurs Services et conseil informatiques
Type Société civile/Société commerciale
/Autres types de sociétés
Taille de l’entreprise 51-200 employés
Domaines Engineernig, Infrastructure, Préstation
de service, Intégration de système
d'information, Software Engineering
et IoT
Site web https://www.stmgroupe.ma
E-mail info@stm.ma
Adresse (Principale) Résidence Soukna Mouriha, Rue Jamal
Eddine Al Afghani 90000 Tanger, Tanger-
Tetouan, MA
Numero de telephone 05-39-32-41-71
Fax 05-39-32-39-57
La Figure 1 présente le logo distinctif de la Société Tangéroise de Maintenance (STM), ce logo

capture l'identité et l'histoire de l'entreprise.
8/22/2023 11
Figure 1:Logo de La société tangéroise de maintenance
1.2. Histoire de enterprise:

Depuis son inauguration le 23 juillet 1998, la Société Tangéroise de Maintenance (STM) a tracé
un parcours marquant dans le panorama des nouvelles technologies. Établie pour répondre aux
besoins spécifiques du marché marocain et africain, STM a émergé comme une réponse proactive
à l'évolution rapide du secteur.
Dès ses débuts, STM Group a défini une approche distinctive en mettant en place une stratégie de
services ancrée dans l'accompagnement client. Cette stratégie, habilement conçue pour allier
disponibilité et expertise, a servi de pierre angulaire à la croissance et au succès continu de
l'entreprise.
L'année 2018 marque un jalon significatif dans le cheminement de STM Group. Avec cinq agences
stratégiquement réparties, l'entreprise s'est étendue pour englober diverses régions et répondre à
une clientèle de plus en plus exigeante. Cette expansion s'est accompagnée d'un renforcement de
l'équipe, composée aujourd'hui de cinquante ingénieurs et techniciens hautement qualifiés. Chaque
membre de cette équipe possède des certifications qui englobent les produits et solutions les plus
en vogue du marché, offrant ainsi un ensemble diversifié de compétences.
Portée par près de quarante certifications et soutenue par la confiance accordée par les acteurs
économiques majeurs de la région, STM Group occupe une position de proue dans le secteur prisé
de l'intégration des infrastructures et des systèmes d'information. Cette position privilégiée
témoigne de l'engagement constant envers l'excellence et de la quête d'une innovation continue.
L'histoire de STM Group est une narration de persévérance et de transformation. Une présence
affirmée sur le marché a donné lieu à une expertise pointue en matière de conception, d'intégration
et d'exploitation de solutions technologiques. Le voyage jusqu'à présent témoigne d'une entreprise
8/22/2023 12
en constante évolution, façonnée par des valeurs solides et portée par l'ambition de repousser les
limites de l'innovation dans le domaine des nouvelles technologies et de l'intégration informatique.
1.3. Organisation interne:

L'organigramme de la Figure 2 représente la structure hiérarchique de l'entreprise. La Figure 3 met
en lumière M. Tarik Moudni, Directeur Général, qui guide les orientations stratégiques de
l'entreprise. Sous sa direction, Adel Moudni, Directeur Adjoint, coordonne les départements et
supervise des projets spécifiques.
Le Département Logistique gère les chaînes d'approvisionnement et la distribution, tandis que le

Département Commercial gère les relations clients et les négociations. Le Département Marketing
conçoit des stratégies promotionnelles et renforce la visibilité de la marque. Le Département
Finance prend des décisions économiques judicieuses. Le Département Achats optimise
l'approvisionnement. Le Département Ressources Humaines s'occupe du personnel. Le
Département Technique gère la technologie et la R&D. D'autres départements spécialisés
répondent à des besoins spécifiques. Chaque département joue un rôle clé dans le succès global de
l'entreprise.
Figure 2:Organigramme de STM .
8/22/2023 13
Figure 3:Mr Tarik Moudni, Président Directeur Général de STM Group.
1.4. STM Agences :

STM est une entreprise comptant plusieurs agences opérant dans différents secteurs. Actuellement,
il y a cinq agences STM réparties dans Tanger et une a Kenitra . Tout d'abord, nous avons le
showroom principal situé à Tanger représenté dans la Figure 4 , offrant une vaste gamme de
matériel informatique et de solutions technologiques innovantes. Ensuite, STM Offshore se trouve
également à Tanger, spécialisée dans la maintenance et les services de proximité pour les clients
de la Zone Franche. À Tanger également, STM Computer propose des formations pour les PME
et PMI, visant à les accompagner dans leur développement technologique. Une autre agence, STM
Services, se situe également à Tanger et se concentre sur des services personnalisés à forte valeur
ajoutée grâce à leur expertise technique. Enfin, STM Kenitra dessert les clients de la Zone franche
AFZ de Kenitra, offrant des services de haute qualité et des conseils techniques. Chaque agence
de STM contribue à l'engagement de l'entreprise envers l'excellence et la satisfaction du client dans
le domaine des nouvelles technologies et de l'informatique.
8/22/2023 14
Figure 4:STM Tanger Showroom.
1.5. Piliers stratégiques:

La STM veille à répondre aux attentes de ses partenaires, en apportant un support aux équipes en
place et en mettant à leur disposition le personnel adapté à leurs besoins. Ainsi, le développement
du portefeuille de la STM est articulé autour de rands métiers, pour lesquels la société est devenue
une référence nationale :
Ingénierie :
• Etude • Développement • Conseil • Accompagnement • Délégation de maîtrise d’ouvrage
Infrastructure :
• Précâblage • Réseaux Télécom • Vidéoconférence • Télésurveillance •Détection d’incendie
Prestation de services :
• Contrat préventif et curatif • Imprimante • Outsoursing IT • Photocopieur
Intégration SI :
• Matériel Informatique • Bureautique • Téléphonie • Solutions de gestion
2. Environment de l’entreprise
2.1. Clientèle:
8/22/2023 15
Depuis ses débuts, la STM met en œuvre des moyens techniques et organisationnels pour garantir
un service ininterrompu. Elle accompagne ses clients dans tous les secteurs professionnels, tant
publics que privés. Forte de plus de 5800 clients satisfaits, la STM a acquis une connaissance
approfondie des métiers de ses clients. comme illustré dans la Figure 5.
Figure 5:Liste des entreprises et organismes publics qui leur font confiance
2.2. Partenaires Métiers et Techniques et les Principaux Éditeurs et Constructeurs du

Secteur Informatique :
Les Partenaires Métiers et Techniques représentent des entreprises spécialisées dans divers
secteurs d'activité. Ces collaborations étroites permettent à STM Group d'adapter ses solutions
technologiques aux besoins spécifiques de chaque domaine. Cette approche sur mesure renforce
la capacité de l'entreprise à relever les défis variés de ses clients, tout en garantissant une pertinence
et une qualité optimales.
D'un autre côté, les Principaux Éditeurs et Constructeurs du Secteur Informatique sont des acteurs
clés dans le paysage technologique. Ces partenariats prestigieux offrent à STM Group un accès
privilégié aux dernières innovations, aux meilleures pratiques et aux solutions à la pointe de
8/22/2023 16
l'industrie. Grâce à ces collaborations étroites, STM Group peut consolider son expertise en
intégration et en déploiement des technologies les plus avancées.
La figure 6 illustre la richesse et l'étendue de ces partenariats cruciaux. Elle représente le réseau
interconnecté des relations de STM Group avec ses Partenaires Métiers et Techniques ainsi
qu'avec les Principaux Éditeurs et Constructeurs du Secteur Informatique.
Figure 6:Partenaires Métiers et Techniques et les Principaux Éditeurs et Constructeurs du Secteur Informatique.
8/22/2023 17
Chapitre 2 : Département IT et mission
Résumé
Ce chapitre offre un aperçu détaillé du département IT où s'est déroulé

mon stage. Il expose le contexte et les objectifs de cette expérience, de
plus, il présente deux projets majeurs sur lesquels j'ai travaillé.
8/22/2023 18
1. Le département IT :
Le département IT au sein de STM Group joue un rôle essentiel dans la réalisation de solutions
technologiques avancées pour les entreprises. Ce département est responsable de la conception, du
développement, de l'intégration et de la gestion des infrastructures informatiques et des systèmes
d'information. Voici un aperçu des principales caractéristiques de ce département et de ses activités
au sein de l'entreprise.
1.1.Description des Étapes du Processus de Production / Principales Missions :
Analyse et Conception : Le département d'Ingénierie et d'Infrastructure démarre par une phase

d'analyse approfondie des besoins de chaque client. Il conçoit ensuite des solutions sur mesure, en
tenant compte des exigences spécifiques en matière d'infrastructure et de système d'information.
Développement et Intégration : Une fois la conception validée, l'équipe d'ingénieurs et de

techniciens développe et intègre les systèmes, les logiciels et les technologies nécessaires. Cela
inclut la mise en place de réseaux, de serveurs, de stockage et d'autres composants.
Optimisation et Sécurité : Le département veille à l'optimisation continue des infrastructures pour

garantir des performances élevées et une évolutivité. La sécurité est également une préoccupation
majeure, avec la mise en place de mesures de protection avancées.
Maintenance et Support : Une fois les solutions déployées, le département assure la maintenance
continue, la surveillance proactive et le support technique pour résoudre rapidement les problèmes
éventuels.
1.2.Lien fonctionnel avec le reste de l’entreprise :
Le département IT est au cœur des opérations de STM Group. Il collabore étroitement avec les
équipes commerciales pour comprendre les besoins des clients, avec les équipes de conseil pour
offrir des solutions adaptées et avec les équipes de gestion de projet pour garantir la réalisation
réussie des projets. La communication fluide avec les autres départements permet une intégration
efficace des solutions informatiques au sein de l'entreprise.
1.3.Description de métiers du département :
Ingénieurs en Informatique et Réseau : Les ingénieurs en informatique et réseau au sein de STM

Group sont les architectes des infrastructures technologiques. Ils conçoivent des environnements
informatiques sécurisés et évolutifs, en planifiant la mise en réseau, la virtualisation et en
8/22/2023 19
choisissant les meilleures technologies pour répondre aux besoins spécifiques des clients. Leur
expertise garantit une connectivité fluide et une performance optimale des systèmes.
Techniciens Réseau : Les techniciens réseau sont les gardiens de la stabilité et de l'efficacité des
réseaux informatiques. Ils s'occupent de la configuration, de la surveillance et de la maintenance
des équipements réseau essentiels. En collaborant étroitement avec les ingénieurs, ils assurent que
les communications internes et externes se déroulent sans heurts et que les données sont sécurisées.
Développeurs : Les développeurs de STM Group sont les artisans du code. Ils transforment les
idées en applications fonctionnelles en écrivant des lignes de code dans divers langages de
programmation. Certains développeurs, connus sous le nom de techniciens en développement
informatique, sont également responsables du maquettage, de la conception, de la programmation
et des tests des applications.
Techniciens en Développement Informatique : Les techniciens en développement informatique

sont des experts multitâches qui combinent le maquettage, la programmation et les tests. Ils
travaillent en étroite collaboration avec les ingénieurs et les développeurs pour traduire les
conceptions en code fonctionnel. Ils sont responsables de la création de prototypes interactifs, du
développement de fonctionnalités et de la résolution de problèmes techniques.
Experts IoT : Les experts en IoT sont les connecteurs du monde physique et numérique. Ils
conçoivent et mettent en place des réseaux de capteurs, des dispositifs intelligents et des
plateformes d'analyse pour collecter des données en temps réel à partir d'objets du monde réel. Ces
données alimentent les analyses et aident les entreprises à prendre des décisions plus éclairées.
Cette équipe diversifiée de professionnels au sein du département IT de STM Group travaille en

synergie pour créer des solutions technologiques innovantes, sécurisées et personnalisées,
répondant ainsi aux besoins variés des clients et de l'entreprise.
2. Contexte du stage et objectif au sein du département IT :
Au sein de l'entreprise STM, nous avons eu l'opportunité de réaliser un stage de développement

web d'une durée d'un mois. Pendant cette période, nous avons été intégrés à l'équipe de
développement et avons occupé le poste de Stagiaires en Développement Web.
Le stage comportait deux projets distincts : le premier était un test d'évaluation pour mes
compétences en développement web et ma familiarisation avec les technologies de l'entreprise. Le
deuxième projet, plus vaste, visait à développer une application web d'annotation d'images pour
un client de STM.
8/22/2023 20
Notre rôle pendant ce stage était de contribuer activement au développement de ces deux projets.
Nous avons eu l'occasion de mettre en pratique nos compétences en développement web et
d'acquérir de nouvelles connaissances en utilisant des technologies telle que React.
Cette expérience de stage chez STM nous a non seulement permis d'améliorer nos compétences
techniques en développement web, mais nous a également offert une perspective précieuse sur le
fonctionnement d'une entreprise technologique et l'importance du développement de solutions
personnalisées pour les clients.
Dans la section suivante, nous détaillerons les deux projets sur lesquels nous avons travaillé.
3. Vue d’ensemble des projets réalises :
3.1.Premier projet : Gestion d’un parking :
Le premier projet que nous avons entrepris lors de notre stage au sein de la Société Tangeroise de
Maintenance (STM) était un défi visant à évaluer nos compétences en développement web. Ce
projet consistait à concevoir une application web React dédiée à la gestion d'un parking, en utilisant
la reconnaissance des plaques d'immatriculation pour suivre les entrées et sorties des véhicules.
L'objectif était de créer une application qui affiche en temps réel l'état du parking et offre aux
utilisateurs la possibilité de consulter l'historique des mouvements des véhicules.En relevant ce
défi, nous avons eu l'opportunité de mettre en avant nos compétences en développement front-end
avec React. Nous avons également eu l'occasion de concevoir une interface utilisateur à la fois
attrayante et fonctionnelle, tout en comprenant les exigences spécifiques liées à la gestion d'un
parking.
Figure 7:Figure représente le projet de parking
Cette figure 7 est une illustration graphique qui offre une représentation visuelle du projet de
parking.
8/22/2023 21
3.2.Deuxième projet : Labeling picture :
Le deuxième projet sur lequel nous avons travaillé concernait la création d'un système complet de
gestion du labeling d'images et de création de galeries. L'objectif principal de ce système était de
simplifier le processus de sélection et d'ajout d'éléments sur des images, permettant ainsi aux
utilisateurs de créer des galeries d'images et de définir des zones spécifiques sur chaque image à
des fins d'analyse, de classification ou de visualisation. Ce projet offrait des fonctionnalités CRUD
pour gérer les galeries(projet), les images les utilisateurs … tout en proposant une interface
utilisateur intuitive. De plus, ce projet prenait en charge la gestion des autorisations pour garantir
un accès sécurisé aux fonctionnalités spécifiques du système. En travaillant sur ce projet, nous
avons eu l'opportunité de participer à toutes les étapes du développement, ce qui a renforcé nos
compétences en développement web tout en contribuant à la création d'une solution robuste et
fonctionnelle pour la gestion du labeling d'images et la création de galeries.
Figure 8:Figure représente le projet de labelling picture.
Cette figure est une illustration graphique qui offre une représentation visuelle du projet de
labelling picture.
8/22/2023 22
Chapitre 3 : Méthodologie de travaille et

technologies utiliser
Résumé
Dans ce chapitre nous découvrirons les outils essentiels et les solutions

qui ont contribué au développement réussi des projets web avec React
durant notre stage chez la société STM.
8/22/2023 23
1. Méthodologie de travaille :
1.1.Méthode Agile dans développement web :
Lors de notre stage en développement web, nous avons adopté la méthodologie Agile pour la
gestion de nos projets.
L'approche Agile est une méthode itérative et collaborative qui convient particulièrement aux
projets de développement où les exigences peuvent évoluer. Elle offre la flexibilité nécessaire pour
répondre aux besoins changeants du client ou de l'organisation. Nous avons guidé notre travail en
nous appuyant sur les principes fondamentaux de l'Agile , notamment:
 Communication et collaboration : Nous avons encouragé une communication ouverte et

régulière au sein de l'équipe de développement, ainsi qu'avec les parties prenantes externes.
Des réunions quotidiennes de type "stand-up" ont été organisées pour discuter de
l'avancement, des obstacles et des prochaines étapes.
 Itérations et livraisons continues : Plutôt que de concevoir des projets dans leur
intégralité, nous avons privilégié des itérations courtes et incrémentielles. Cela nous a
permis de livrer des versions fonctionnelles à intervalles réguliers, facilitant ainsi le
feedback et l'adaptation rapide.
 Adaptabilité face aux changements : L'Agile nous a permis de nous adapter rapidement
aux changements des exigences et des priorités. Les ajustements ont été intégrés dès que
nécessaire, évitant ainsi de lourdes révisions en fin de projet.
La Figure 9 représente de manière simplifiée le principe fondamental de la méthode Agile. Cette

illustration visuelle met en évidence la flexibilité et la progression incrémentielle inhérentes à cette
approche.
Figure 9:Représentation simplifiée du principe de la méthode Agile.
8/22/2023 24
1.2.Méthode 2TUP : Méthode Y:
Au-delà de l'approche Agile, nous avons exploré des méthodes complémentaires pour répondre à
des besoins spécifiques de certains projets. Le 2TUP (Two-Track Unified Process) s'est révélé être
une extension efficace de notre méthodologie de travail. Le 2TUP combine les pratiques Agiles
avec les principes du Processus Unifié (UP), visant à fusionner flexibilité et réactivité de l'Agile
avec une approche structurée et planifiée de l'UP.
Tracks du 2TUP : Dans le cadre du 2TUP, nous avons opéré avec deux pistes parallèles :
Piste Agile : Cette piste était dédiée aux fonctionnalités et tâches nécessitant une approche itérative
et souple. Les fonctionnalités étaient livrées par incréments, permettant un retour rapide des parties
prenantes et des ajustements en temps réel.
Piste UP : Cette piste était dédiée aux aspects plus structurés et planifiés du développement,
incluant la mise en place d'une architecture solide, la modélisation, les phases de conception
détaillée ainsi que les activités de vérification et de validation.
Intégration des pistes : Les deux pistes étaient constamment intégrées tout au long du projet. Les
fonctionnalités développées dans la piste Agile étaient alignées avec l'architecture et les
spécifications établies dans la piste UP, garantissant ainsi la cohérence globale du projet.
Avantages du 2TUP : L'utilisation du 2TUP nous a permis de bénéficier des atouts de l'Agile
tout en maintenant une vision globale et structurée du développement web. Ceci s'est avéré
particulièrement avantageux pour les projets exigeant des exigences claires et un contrôle plus
rigoureux.
2. Planification :
2.1.Gestion du temps :
Pendant notre stage au sein de l'entreprise de développement web, la gestion du temps a été une
composante cruciale de notre expérience. Dès le début, nous avons consacré le premier jour à nous
imprégner de l'environnement de travail et à rencontrer les membres de l'équipe. Après cette
première journée, nous avons entamé une auto-formation ciblée sur le framework React,
investissant deux jours pour acquérir les compétences nécessaires pour travailler efficacement avec
cette technologie clé. Une fois lancés sur nos projets, nous avons adopté une approche itérative,
en consacrant du temps à la conception soigneuse de chaque projet avant de passer à la mise en
œuvre. Nous avons veillé à garder une communication ouverte avec l'équipe et les parties
prenantes, en organisant régulièrement des réunions pour partager les progrès et obtenir des
8/22/2023 25
retours. Cette approche nous a permis de livrer les projets dans les délais impartis et de nous
adapter aux changements de priorités tout en maintenant un haut niveau de qualité dans notre
travail. La gestion efficace du temps nous a ainsi permis de maximiser notre productivité et de
contribuer de manière significative aux projets de développement web de l'entreprise.
2.2.Diagramme de Gantt:
Le diagramme de Gantt est un outil de gestion de projet visuel qui permet de représenter les
différentes tâches du projet, leur durée, et leur séquence dans le temps.
Figure 10:Diagramme de Gantt.
La Figure 10 représente le diagramme de Gantt sur une période étalée sur plusieurs mois. Durant
le mois de juillet, notre temps a été dédié à un stage. Nous avons commencé le 3 juillet et terminé
le 4 août. Au cours de ce mois, nous avons réalisé deux projets. Le premier a demandé une semaine
et quelques jours pour être achevé. Le deuxième a occupé le reste du mois, impliquant des phases
de conception, de développement et de tests. Chaque projet a abouti à une livraison.
Le mois d'août a été consacré à la rédaction du rapport ainsi qu'à la préparation de la présentation
pour la soutenance. Cette période de préparation de la soutenance s'est étendue jusqu'en septembre.
C'est en septembre que la soutenance a eu lieu.
8/22/2023 26
3. Les technologies utilisées :
Pendant notre stage en développement web, nous avons eu l'opportunité de travailler avec un
ensemble diversifié de technologies qui ont été essentielles pour la réussite de nos projets. Voici
un aperçu des principales technologies que nous avons utilisées :
3.1.Front-end technologie
React: La bibliothèque JavaScript React a été le

moteur principal de nos projets front-end.
Grâce à React, nous avons pu créer des
interfaces utilisateur réactives, modulaires et
conviviales. L'utilisation de composants
réutilisables a accéléré le développement et
facilité la maintenance de nos applications
web.
JavaScript, HTML et CSS: Ces technologies fondamentales ont été

utilisées pour créer la structure, le contenu et le
style des pages web. JavaScript nous a permis
d'ajouter des fonctionnalités interactives à nos
applications, tandis que HTML et CSS ont été
utilisés pour définir la structure et l'apparence
de l'interface utilisateur.
Bootstrap: Le framework CSS Bootstrap a été utilisé pour

créer des mises en page réactives et
attrayantes. Grâce à ses composants prêts à
l'emploi et à son système de grille, nous avons
pu concevoir des interfaces esthétiques et
adaptées aux différents appareils.
Figma: Pour la phase de maquettage et de prototypage,

nous avons utilisé Figma, un outil de
conception d'interface utilisateur basé sur le
cloud. Figma nous a permis de créer des
maquettes interactives et de collaborer
efficacement avec les membres de l'équipe.
8/22/2023 27
3.2.Back-end technologies :
Node.js : En tant que plateforme JavaScript côté serveur,

Node.js a été utilisé pour créer des applications
back-end performantes et évolutives. Nous
avons utilisé Node.js pour gérer les requêtes
HTTP, manipuler les bases de données et créer
des API pour notre application front-end.
FastAPI et Swagger : Pour accéder aux ressources du serveur, nous

avons utilisé l'API fournie par FastAPI. Cette
API, développée par l'équipe back-end, nous a
permis d'obtenir les données nécessaires pour
alimenter notre application front-end en temps
réel. La documentation interactive générée par
Swagger a été très utile pour comprendre
facilement les différentes ressources
disponibles et faciliter les tests lors de la
consommation de cette API.
JSON Server : Pendant la phase de développement du premier

projet, nous avons utilisé JSON Server pour
simuler un backend en fournissant une API à
partir de fichiers JSON. Cela nous a permis de
développer et de tester notre application sans
avoir besoin d'un serveur backend complet.
8/22/2023 28
3.3.Outils de gestion de projet et de développement :
Jira : Jira a été notre principal outil de gestion de

projet, utilisé pour planifier et suivre nos
activités de développement. Jira nous a permis
de créer des tâches, de suivre les progrès et de
collaborer efficacement en équipe.
UML: Les diagrammes UML ont été utilisés pour

modéliser la structure et les interactions entre
les différentes composantes de nos
applications. Ces diagrammes UML nous ont
permis de visualiser et de représenter de
manière claire et systématique l'architecture de
nos projets.
Power AMC : Power AMC a été utilisé pour la creation de

nos diagramme, Cette application nous a
permis de concevoir des représentations
visuelles de nos données et de nos processus,
ce qui a grandement facilité la compréhension.
Visual Studio Code : En tant qu'environnement de développement

intégré principal, Visual Studio Code nous a
fourni des fonctionnalités avancées pour
écrire, déboguer et tester notre code.
GitHub : Nous avons utilisé GitHub comme système de

contrôle de version pour stocker, organiser et
collaborer sur notre code source. Les
fonctionnalités de suivi des problèmes (issues)
et des pull requests ont facilité la gestion des
tâches et la révision du code.
8/22/2023 29
Chapitre 4 : Projet I : Gestion Parking
Résumé
Dans ce chapitre, nous présenterons en détail notre premier projet de

développement web, qui consistait en la conception et la réalisation
d'une application de gestion de parking. Nous décrirons le processus de
conception, les fonctionnalités mises en œuvre, et les défis rencontrés
tout au long du projet.
8/22/2023 30
1. Description du projet :
Le défi consiste à créer une application web React pour la Société Tangéroise de Maintenance, un
parking utilisant la reconnaissance automatique des plaques d'immatriculation pour suivre les
entrées et sorties des véhicules. L'objectif est de concevoir une application qui affiche l'état actuel
du garage et permet aux utilisateurs de consulter l'historique des entrées et sorties de véhicules.
Les données fournies comprennent un tableau "vehicles" contenant les enregistrements des
véhicules entrants et sortant du garage, avec des informations telles que l'identifiant unique du
véhicule, le numéro de plaque d'immatriculation, l'heure d'entrée et l'heure de sortie (ou nulle si le
véhicule n'est pas encore sorti).
2. Analyse des besoins et spécifications :
L'analyse des besoins et spécifications techniques est une étape essentielle dans le processus de
développement de tout projet informatique. Il est primordial de comprendre en détail les exigences
et les attentes des utilisateurs pour concevoir une solution efficace et adaptée.
2.1.Analyse de besoins :
 Affichage de l'état actuel du parking : L'application doit fournir un aperçu en temps réel
du nombre de véhicules actuellement dans le parking ainsi que de la capacité totale du
garage.
 Liste des véhicules entrants : Une liste des véhicules ayant entré le parking doit être
affichée, avec des informations détaillées telles que le numéro de plaque d'immatriculation,
l'heure d'entrée et l'heure de sortie (s'il y a lieu).
 Filtrage par numéro de plaque d'immatriculation : Les utilisateurs doivent pouvoir
filtrer la liste des véhicules par numéro de plaque d'immatriculation, facilitant ainsi la
recherche de véhicules spécifiques.
 Journal complet des entrées et sorties : L'application doit enregistrer et afficher un
journal complet des entrées et sorties de véhicules, permettant aux super admins d'accéder
à toutes les informations passées.
 Base de données : Le système doit stocker toutes les données relatives aux véhicules, y
compris les enregistrements d'entrées et sorties, dans une base de données sécurisée et
fiable.
 Rôles d'utilisateurs : Les rôles "super admin" et "user" doivent être définis avec des
autorisations spécifiques. Les super admins auront un accès complet au journal des entrées
et sorties, ainsi que la possibilité d'ajouter, de modifier et de supprimer des enregistrements.
8/22/2023 31
Les utilisateurs "user" auront uniquement accès à la liste actuelle des véhicules présents
dans le parking.
2.2.Spécifications techniques :
 Technologies : L'application est développée en utilisant le framework React pour la partie

front-end, et une technologie appropriée pour le backend, Node.js, en fonction des
préférences et compétences de l'équipe de développement.
 Base de données : Il n’y a pas une base donnes et l'enregistrement a été fait dans un fichier
JSON car React est un langage pour front-end.
 Interface Utilisateur : L'interface utilisateur est conçue de manière intuitive et réactive,
permettant aux utilisateurs de naviguer facilement dans l'application et d'accéder
rapidement aux informations souhaitées.
 Sécurité : Des mesures de sécurité, le cryptage doivent être mises en place pour protéger
les données sensibles des utilisateurs et empêcher tout accès non autorisé.
3. Conception UML :
Ces diagrammes graphiques fournissent une vue d'ensemble clair et concise du système, facilitant
ainsi la communication et la compréhension des interactions entre les composants du projet.
3.1.Diagramme cas d’utilisation :
Un cas d'utilisation est un outil de modélisation qui permet de décrire les interactions entre
un utilisateur et un système informatique.
8/22/2023 32
Figure 11:Diagramme de cas d'utilisation du 1er projet
La figure 11 présente une vue synthétique et structurée des interactions entre les acteurs clés du
projet : user et admin. Ce diagramme met en évidence les principales fonctionnalités associées à
chaque rôle, en accordant une attention particulière à l'authentification en amont. Cette étape
garantit que seules les personnes autorisées peuvent accéder aux fonctionnalités spécifiques qui
leur sont attribuées, assurant ainsi un environnement sécurisé.
3.2.Diagrammes de séquences :
Un diagramme de séquence illustre les échanges de messages entre objets d'un système au fil du
temps. Il montre comment les interactions se déroulent entre les lignes de vie des objets.
Ces diagrammes permettent de représenter de manière séquentielle les interactions entre les objets
du système.
3.2.1. Pour S’authetifier:
8/22/2023 33
Figure 12:Diagramme de séquence de connexion.
Ce schéma de la figure 12 illustre la vérification séquentielle des informations fournies par

l'utilisateur, en commençant par la validation de l'adresse e-mail. Si l'adresse e-mail existe, le
diagramme poursuit en vérifiant le mot de passe. En cas d'erreur, un message d'erreur est affiché.
Si les informations sont correctes, l'application détermine le type d'utilisateur et effectue une
redirection appropriée vers la page utilisateur ou admin.
3.2.2. Pour Ajouter :
8/22/2023 34
Figure 13:Diagramme de séquence d'ajout.
Ce schéma de la figure 13 illustre le déroulement étape par étape de l’ajout d’un véhicule, débutant
avec l'administrateur qui remplit le formulaire requis. Ensuite, le système procède à la vérification
complète pour s'assurer que toutes les informations nécessaires ont été correctement saisies. Si
toutes les conditions sont remplies, le véhicule est ajouté avec succès à l'application.
3.2.3. Pour supprimer :
8/22/2023 35
Figure 14:Diagramme de séquence de surpression.
Ce schéma de la figure 14 illustre le processus de suppression, où l'administrateur sélectionne le

véhicule à supprimer, puis confirme la demande de suppression. Une fois la confirmation
obtenue, le véhicule est effacé avec succès de l'application.
3.2.4. Pour modifier :
8/22/2023 36
Figure 15:Diagramme de séquence de modification.
Ce schéma de la figure 15 illustre comment la modification d'un véhicule s'effectue, en

commençant par la sélection de l'élément à modifier. Une fois la sélection effectuée, le
diagramme montre que le changement souhaité est appliqué si toutes les informations nécessaires
ont été correctement remplies.
3.2.5. Pour filtree :
8/22/2023 37
Figure 16:Diagramme de séquence de filtrage.
La figure 16 montre comment le système effectue un filtrage basé sur la plaque d'immatriculation
fournie.
3.3.Diagrammes de classe :
Le diagramme de classe est un élément fondamental de la modélisation UML qui permet de

représenter la structure statique du système et les relations entre les différentes classes. Dans le
contexte du premier projet, ce diagramme offre une vue globale des entités du système, leurs
attributs et leurs associations.
8/22/2023 38
Figure 17:Diagramme de classe du 1er projet
Dans la figure 17 vous trouver qu’on a inclut trois classes principales : "User", "VehiculeEnCours"
et "Historique". "User" représente les utilisateurs et il porte attribut type, pour distingue entre user
normale et admin du système, tandis que "CurrentVehicle" et "VehicleLog" sont des sous-classes
qui héritent des propriétés de la classe parent "Vehicle". Cette approche permet de modéliser
efficacement les différentes entités du projet et de capturer les relations entre les utilisateurs, les
véhicules en cours d'utilisation et l'historique des véhicules sortis du parking.
4. Développent :
4.1.Composants principaux :
 App (App) : Se composant assure une gestion fluide des routes et de la connexion pour les
utilisateurs du système, en les dirigeant vers les espaces appropriés en fonction de leur type
(utilisateur ou administrateur)
 Barre de Navigation (Navbar) : Le composant Barre de Navigation est un élément
essentiel de l'interface utilisateur. Il fournit une navigation facile entre les différentes
sections du système et assure une expérience cohérente pour les utilisateurs.
 Tableau de Bord CRUD (Create, Read, Update, Delete) : Le composant Tableau de
Bord CRUD permet aux administrateurs d'effectuer des opérations basiques sur la table des
véhicules qui sont a l'historique. Ils peuvent ajouter de nouveaux véhicules, mettre à jour
les informations existantes et supprimer des enregistrements.
 Composant Véhicules en Cours (CurrentVec) : Le composant Véhicules en Cours
affiche la liste des véhicules actuellement stationnés dans le parking. Il indique également
le nombre de places restantes et le nombre de places occupées pour que les utilisateurs
puissent vérifier facilement la disponibilité.
8/22/2023 39
 Composant Historique Personnel (OwnHisto) : Le composant Historique Personnel

affiche l'historique des entrées/sorties de véhicules pour l'utilisateur connecté. Cela permet
aux utilisateurs de suivre leurs activités passées dans le parking.
 Profil Utilisateur (Profile) : Le composant Profil Utilisateur permet aux utilisateurs de
consulter leurs informations personnelles.
4.2.Interaction avec API:
Dans la partie "Interaction avec l'API", nous avons adopté une approche simple mais efficace pour
simuler un serveur API. Nous avons créé un fichier JSON nommé "db.json" contenant les
données nécessaires pour le fonctionnement de l'application. Pour mettre en place ce serveur
factice, nous avons utilisé le package npm "json-server", que nous avons installé en exécutant la
commande "npm install -g json-server" pour une installation globale.
Ensuite, nous avons lancé le serveur en utilisant la "npx json-server --watch db.json --port
5000". Cela a permis au serveur de surveiller le fichier "db.json" et de fournir les données via
une API à l'adresse http://localhost:5000.
Figure 18:Capture de fichier db.json .
Cette figure 18 représente comment le fichier db.json est organisé. Cette représentation graphique
permet d'appréhender de manière claire et complète la manière dont les données sont agencées et
structurées au sein de ce fichier.
Pour effectuer les opérations CRUD (Create, Read, Update, Delete) avec le serveur API, nous
avons utilisé la bibliothèque Axios, qui permet de réaliser des requêtes HTTP depuis l'application
8/22/2023 40
React. Cela nous a permis d'envoyer des requêtes POST, GET, PUT et DELETE au serveur API
pour créer, récupérer, mettre à jour et supprimer des données.
Figure 19:Capture Exemple 1 d'utilisation des requêtes HTTP(GET).
Dans cet exemple spécifique, l'objectif est de récupérer les informations des utilisateurs ainsi que
les détails des véhicules en cours d'utilisation.
Figure 20:Capture Exemple 2 d'utilisation des requêtes HTTP(DELET).
Dans ce cas d'exemple spécifique, l'objectif est de visualiser comment ces requêtes sont utilisées
pour effectuer des suppressions ciblées de données.
8/22/2023 41
En utilisant cette approche, nous avons pu interagir avec le serveur factice pour ajouter de
nouveaux enregistrements de véhicules, récupérer la liste des véhicules en cours, mettre à jour les
informations existantes et supprimer des enregistrements. L'utilisation de json-server comme
serveur API de simulation a été très bénéfique, car cela nous a permis de développer et de tester
les fonctionnalités de l'application sans avoir à déployer un vrai serveur. Cela a accéléré le
processus de développement et nous a offert un moyen pratique d'interagir avec les données tout
en restant cohérent avec les principes de développement d'applications modernes.
4.3.Les résultats :
Les captures d'écran ci-dessous reflètent les résultats obtenus dans le cadre du premier projet, à la
fois du côté de l'utilisateur et de l'administrateur. Elles offrent un aperçu visuel des fonctionnalités
concrètes développées et des résultats concrets obtenus.
 Login :
Figure 21:Capture de page de login.
Cette figure 21 représente la première page qui s'affiche, à savoir la page de connexion.
L'authentification est réalisée à l'aide de l'adresse e-mail et du mot de passe.
 Admin :
8/22/2023 42
Figure 22:Capture de page qui gère l'historique des véhicules.
Cette figure 22 représente le tableau des véhicules dans l'historique. L'email de l'utilisateur, ainsi
que le matricule et les dates d'entrée et de sortie, y sont affichés. Ici, l'administrateur a la possibilité
d'ajouter, de modifier ou de supprimer un véhicule.
Figure 23:Capture représenté l'ajout d’un véhicule.
Comme vous pouvez le constater, lorsque l'administrateur clique sur "Add vehicle", un formulaire
s'ouvre. Il doit le remplir après il peut ajouter ou annuler l'opération. Si toutes les informations
sont correctement saisies, le véhicule est ajouté. Cependant, si la date d'entrée ou de sortie est
postérieure à la date actuelle, ou si la date de sortie est antérieure à la date d'entrée, un message
d'erreur doit s'afficher.
8/22/2023 43
Figure 24:Capture représente la table après l'ajout.
Cette figure 24 démontre l'ajout du véhicule dans le tableau. À présent, nous pouvons passer à la
phase de modification.
Figure 25:Capture représenté modification d’un véhicule.
La même logique d'ajout d'un véhicule est mise en œuvre.
8/22/2023 44
Figure 26:Capture représenté la table après les modifications.
Cette figure 26 démontre que les modifications ont été effectuées.
Figure 27:Capture représente les véhicules en cours.
Dans cette figure 27, vous pouvez observer la liste des véhicules actuellement présents dans le
garage, ainsi que le nombre total de véhicules et le nombre de places restantes. La capacité du
garage est de 4 places (Juste pour faire des tests).
8/22/2023 45
Figure 28:Capture représente la page de recherche.
Cette figure 28 représente la page où le filtrage est effectué par le biais de la recherche basée sur
le matricule des véhicules.
Figure 29:Capture représente un exemple de recherche.
Dans cette figure 29, nous pouvons simplement constater que la recherche a été effectuée
correctement et que le véhicule recherché existe.
8/22/2023 46
Figure 30:Capture représente un autre exemple de recherche.
Dans cette situation, la matricule a été modifiée par une autre qui n'existe pas, et en effet,
l'application affiche un message indiquant que ce véhicule n'existe pas.
Figure 31:Capture représente page profile.
Cette figure 31 représente la page de profil qui affiche les informations de cet utilisateur, telles que
l'identifiant et le type. Dans ce cas, il s'agit d'un administrateur. Il est important de noter que le mot
de passe devrait normalement être crypté.
8/22/2023 47
 User :
Figure 32:Capture représente profile.
Dans ce scénario, le compte a été changer et il s'agit maintenant d'un utilisateur normal, ce qui
explique pourquoi que le type a été changer.
Figure 33:Capture représente les véhicules en cours.
La même chose qu’avant mais maintenant le garage est plein.
8/22/2023 48
Figure 34:Capture représente l'historique d’un user.
Dans ce contexte, il est possible d'observer l'historique des entrées et sorties de l'utilisateur nommé
"user2".
5. Les problèmes rencontres :

Au cours de la phase de développement du site web de gestion de parking, plusieurs défis ont
émergé, notamment en raison de notre première expérience avec React et de la complexité associée
à la manipulation des données. Ces difficultés ont constitué des points d'apprentissage significatifs
tout au long du projet.
 Familiarisation avec React : Étant donné que c'était notre première expérience avec
React, nous avons dû consacrer du temps pour apprendre les concepts fondamentaux de la
bibliothèque. La transition du développement web traditionnel vers un paradigme basé sur
les composants a nécessité une courbe d'apprentissage. Bien que React offre des avantages
notables, tels que la réutilisabilité des composants, l'état local et la gestion des mises à jour
de l'interface utilisateur, nous avons mis plus de temps que prévu à nous habituer à ces
concepts.
 Gestion des Données : Au départ, nous avons sous-estimé la complexité de la gestion des
données dans une application React. Nous avons constaté qu'il n'était pas possible d'accéder
directement à une base de données depuis React en raison de son architecture côté client.
Cette limitation nous a amenés à repenser notre manière de concevoir le flux de données
et de gérer les changements. Trouver une solution adéquate pour stocker et gérer les
données a été un défi majeur.
8/22/2023 49
 Choix de la Technologie pour les Données : Après des recherches approfondies, nous
avons découvert qu'utiliser une base de données directement à partir de React n'était pas la
meilleure pratique. Cela nous a amenés à rechercher des alternatives appropriées. Nous
avons finalement opté pour l'utilisation de JSON Server, une solution qui simule une API
REST en utilisant un fichier JSON comme source de données. Bien que cette solution ait
résolu le problème, elle a également nécessité du temps pour la compréhension, la
configuration et l'intégration au projet.
En conclusion, le processus de développement du site web de gestion de parking a été marqué par
des défis significatifs, notamment en raison de notre familiarité limitée avec React et de la nécessité
de trouver une solution adéquate pour la gestion des données. Cependant, ces difficultés nous ont
offert l'opportunité d'apprendre, de développer de nouvelles compétences et d'acquérir une
meilleure compréhension des meilleures pratiques en matière de développement d'applications
web modernes.
8/22/2023 50
Chapitre 5 : Projet II : Labelling picture
Résumé
Dans cette section, nous explorerons en profondeur notre deuxième

projet de développement web, centré sur la création d'une application
permettant l'annotation d'images tout en intégrant la gestion de divers
composants de l'application. Nous détaillerons le processus de
conception, les fonctionnalités implémentées et les obstacles surmontés
tout au long de ce projet.
8/22/2023 51
1. Description du projet :
Le projet consiste en la conception et le développement d'une application web utilisant la

technologie React. Cette application a pour objectif de faciliter l'annotation. L'équipe de
développement a été divisée en deux parties : le front-end, où j'ai joué un rôle actif, et le back-end,
géré par une équipe dédiée. Le back-end a fourni une API pour interagir avec la base de données
et manipuler les données nécessaires au bon fonctionnement de l'application.
L'application se compose de plusieurs modules clés, notamment :
Authentification et Gestion des Utilisateurs : L'application permet à différents utilisateurs de

se connecter et d'accéder à des fonctionnalités spécifiques. Chaque utilisateur dispose d'un profil
avec des informations personnelles et d’authentification.
Gestion des Clients : Les utilisateurs disposent d'un espace dédié pour gérer leurs clients. Ils
peuvent créer, mettre à jour et supprimer des clients, ce qui facilite la gestion des projets pour des
entités distinctes.
Gestion des Projets : À l'intérieur de chaque client, les utilisateurs peuvent créer plusieurs projets.
Chaque projet est associé à un ensemble d'images qui doivent être annotées. Les projets permettent
une segmentation claire des tâches d'annotation.
Gestion des Labels : Les utilisateurs ont la possibilité de définir des étiquettes pour les images,
ce qui permet de catégoriser efficacement les données. Ces étiquettes sont associées aux images
annotées pour une recherche et une organisation ultérieure.
Gestion des images : Au sein de chaque projet, l'utilisateur peut créer un ensemble d'images, qui
seront ensuite à annoter.
Annotation d'Images : L'aspect central de l'application est la capacité d'annoter des images. Sur
la page de marquage, les images non annotées sont présentées aux utilisateurs pour annotation.
Une fois qu'une image est annotée, elle passe à l'état annoté et est retirée de la liste des images à
annoter.
2. Analyse des besoins et spécifications :
Comme précédemment mentionné, cette étape essentielle dans le développement de projets

informatiques garantit une compréhension approfondie des besoins des utilisateurs et guide
efficacement le processus de développement.
8/22/2023 52
2.1.Analyse de besoins :
 Authentification et Gestion des Utilisateurs : La capacité pour les utilisateurs de

s'inscrire, de se connecter et de gérer leurs profils.
 Gestion des Clients : Les utilisateurs peuvent créer, mettre à jour et supprimer des clients,
avec la possibilité de lier des projets à des clients spécifiques.
 Gestion des Projets : Les utilisateurs peuvent créer, éditer et supprimer des projets.
Chaque projet est associé à un ensemble d'images et de labels.
 Annotation d'Images : Les utilisateurs doivent pouvoir annoter des images en leur
attribuant des labels, et les images annotées doivent être correctement gérées.
 Gestion des Labels : Les utilisateurs peuvent définir et gérer des labels pour catégoriser
les images annotées.
 Gestion des Images : Les utilisateurs peuvent définir et gérer des images pour les annotées.
2.2.Spécifications techniques :
 Front-End : Utilisation de la bibliothèque React pour créer une interface utilisateur

réactive et dynamique. Mise en place d'une navigation fluide entre les différentes pages et
fonctionnalités de l'application. Intégration avec l'API back-end pour récupérer et envoyer
des données, notamment les images, les labels et les informations utilisateur.
Implémentation de mécanismes d'interaction conviviaux pour l'annotation d'images,
comme le glisser et sélection d’une zone.
 Back-End : Utilisation d'un langage de programmation adapté pour créer une API robuste
et évolutive. Conception d'une architecture de base de données adéquate pour stocker les
informations sur les utilisateurs, les clients, les projets, les images et les annotations. Mise
en place d'un système d'authentification sécurisé pour contrôler l'accès aux ressources de
l'application. Implémentation d'une logique métier pour gérer les opérations CRUD
(Create, Read, Update, Delete) liées aux clients, aux projets, aux images et aux labels.
Gestion efficace des requêtes de l'application front-end et envoi de réponses JSON
appropriées.
 Sécurité : Utilisation de pratiques de sécurité recommandées, telles que l'encodage des

données, la validation des entrées et la protection contre les attaques de sécurité courantes.
Implémentation d'un mécanisme d'autorisation pour s'assurer que les utilisateurs n'accèdent
qu'aux fonctionnalités auxquelles ils ont le droit d'accéder.
8/22/2023 53
3. Conception UML :
Dans cette section, notre attention sera portée sur le diagramme de la partie centrale du projet, à
savoir la page d'annotation d'images. Les autres composantes du projet suivent la même logique
que celle présentée dans les diagrammes des chapitres précédents.
3.1.Diagramme cas d’utilisation :
Figure 35:Diagramme cas d’utilisation.
Dans ce diagramme représenté dans cette figure 35, les fonctionnalités que l'utilisateur peut
exécuter sur la page d'annotation sont illustrées. Parmi ces fonctionnalités, on a "Choisir un label"
qui peut être effectué, à condition qu'il ait déjà sélectionné une image et une zone.
3.2.Diagrammes de séquences :
8/22/2023 54
Figure 36:Diagramme de séquence.
La figure 36 représente le processus suivi lors de l'annotation. Tout d'abord, l'utilisateur doit choisir
une image dans la galerie. Une fois cette image affichée à part, il peut débuter l'annotation en
sélectionnant une zone. Une liste de labels correspondant au projet sur lequel il travaille s'affiche
alors. Ensuite, il enregistre le processus. Cette séquence se répète jusqu'à ce que l'utilisateur
soumette l'image, entraînant ainsi la modification de son statut et sa suppression de la galerie.
3.3.Diagrammes de classe :
8/22/2023 55
Figure 37:Diagramme de classe.
Le diagramme de classes de la figure 37 représente l'existence de trois éléments principaux :

galerie, image et élément (label). Cela signifie qu'une galerie est composée d'un ensemble d'images
et d'un ensemble d'éléments (labels).
4. Développement :
4.1.Composants principaux :
Dans la stratégie élaborée pour le développement de l'application web

de labeling, une structuration méthodique a été adoptée pour garantir
une gestion efficace et un développement cohérent des
fonctionnalités. La figure 38 illustre la hiérarchie de fichiers
soigneusement organisée dans le répertoire source (src).
Cette approche modulaire repose sur la création d'un dossier de

composants de base, nommé simplement components, qui abrite
plusieurs sous-dossiers correspondant aux aspects clés de
l'application, notamment users, clients, projects, images, labels, et
labeling. Chacun de ces sous-dossiers suit une structure similaire,
comportant un fichier JavaScript (.js) dédié au rendu visuel des
données spécifiques à ce domaine. Cette structure homogène facilite
la compréhension et la navigation dans le code, tout en favorisant une
gestion simplifiée et une évolutivité accrue.
Figure 38: Structure de dossier
src.
8/22/2023 56
Par exemple, dans le dossier clients, il existe trois fichiers distincts : client.js, edit.js, et add.js.
Chacun de ces fichiers est responsable de l'affichage des informations relatives aux clients, de la
possibilité de les éditer et d'ajouter de nouveaux clients, respectivement. Cette approche de
compartimentalisation permet une séparation claire des responsabilités et une maintenance plus
aisée.
Cependant, dans le dossier labeling, la complexité des fonctionnalités exige une approche
spécifique. Ici, un composant nommé gallery a été créé pour afficher les images non étiquetées
d'un projet sélectionné. Dans le contexte de cette galerie, le composant image offre la capacité de
recadrage (cropping) des images, tandis que les coordonnées de la zone recadrée (top, left, right et
bottom) sont capturées pour une utilisation ultérieure.
En outre, le composant box a été développé pour récupérer toutes les étiquettes associées à un
projet. Cette fonctionnalité permet aux utilisateurs de sélectionner des étiquettes existantes,
simplifiant ainsi le processus d'annotation.
En dehors de ces composants spécifiques, le dossier layout joue un rôle crucial en fournissant une
structure cohérente pour les éléments d'interface récurrents, tels que la barre de navigation (navbar)
et la barre latérale (sidebar), contribuant ainsi à l'ergonomie et à la convivialité de l'application.
4.2.Interaction avec API :
Figure 39:Fast API et Swagger
L'intégration avec le backend a été simplifiée grâce à l'API FastAPI, représentée dans la figure39.
Cette API offre une documentation claire et détaillée via Swagger, facilitant ainsi la
communication entre les équipes de développement frontend et backend. L'utilisation d'un token
8/22/2023 57
d'authentification a été adoptée pour sécuriser les interactions avec l'API. Voici des exemples
d'interactions avec l'API en utilisant JavaScript et Axios.
Pour assurer l'authentification des utilisateurs, une requête POST a été mise en place pour obtenir
un token d'accès. Le code de la figure 40 montre comment cela a été réalisé :
Figure 40:Capture code utiliser pour Connexion (Login).
Pour récupérer la liste des utilisateurs, une requête GET avec un token d'autorisation a été utilisée.
Le code de la figure 41 montre comment les utilisateurs ont été récupérés :
Figure 41:Capture de code utiliser pour Récupération des Utilisateurs.
8/22/2023 58
Ces exemples illustrent comment l'API FastAPI avec Swagger a été intégrée dans le frontend pour
faciliter l'interaction avec le backend. L'utilisation du token d'accès assure la sécurité et
l'authenticité des requêtes, tandis que les mécanismes de traitement des réponses et des erreurs
permettent de fournir une expérience utilisateur fluide et informative.
4.3.Les résultats :
Les captures d'écran ci-dessous reflètent les résultats obtenus dans le cadre du premier projet, à la
fois du côté de l'utilisateur et de l'administrateur. Elles offrent un aperçu visuel des fonctionnalités
concrètes développées et des résultats concrets obtenus.
 Login :
Figure 42:Page login.
Cette figure 42 illustre la page de connexion, et la figure suivante représente le message de

bienvenue destiné à l'utilisateur qui vient de se connecter.
8/22/2023 59
Figure 43:Message de bienvenue.
 Barre de navigation :
Figure 44:Barre de navigation.
Cette figure 44 représente les barres de navigation. Initialement, nous avons la "nav bar" qui
comprend un bouton permettant de consulter et de modifier son propre profil (non développé car
ce n'est pas notre tâche), un bouton pour se déconnecter, et un bouton de menu. Lorsque l'on clique
sur le bouton de menu, la "side bar" s'ouvre, contenant "Dashboard" (également non développé car
ce n'est pas notre tâche), ainsi que les sections "Clients" et "Users".
 User :
8/22/2023 60
4
2 3
1
Figure 45:CRUD des utilisateurs.
La figure met en avant l'interface de gestion des utilisateurs qui offre les fonctionnalités de
création, lecture, mise à jour et suppression (CRUD). Cette interface présente la liste des
utilisateurs accompagnée de boutons dédiés à chaque action, en plus d'une barre de recherche pour
filtrer les résultats. De plus, elle propose des boutons pour ajuster la taille de la table, permettant
d'agrandir ou de réduire l'affichage (1), ainsi qu'une option pour déterminer le nombre d'utilisateurs
à afficher par page (2). Un bouton supplémentaire est prévu pour afficher le reste du tableau(3).
Un indicateur de la taille totale de la table est également présent(4).
Figure 46:Capture représente un exemple de recherche.
8/22/2023 61
La figure 46 illustre un exemple de recherche. Dans cet exemple, le terme "ran" a été saisi dans la
barre de recherche, ce qui a entraîné une recherche globale sur l'ensemble des colonnes de la table
des utilisateurs. Les résultats affichés représentent la ligne où le terme "ran" a été trouvé.
Figure 47:Capture représenté l'ajout d’un utilisateur.
La figure 47 illustre le pop-up qui s'ouvre lorsqu'on clique sur le bouton "+" pour ajouter un nouvel
utilisateur. Ce pop-up offre un formulaire de saisie comprenant des champs pertinents tels que le
nom, l'adresse e-mail, le rôle, etc.
Figure 48:Capture représente table des utilisateurs après ajout.
Cette figure 48 démontre l'ajout d’utilisateur dans le tableau.
8/22/2023 62
Figure 49:Capture représenté modification d’un utilisateur.
La figure 49 représente le pop-up qui apparaît dès que le bouton d’éditer est activé en vue de
modifier un utilisateur.
Figure 50:Capture représenté la table après les modifications.
Cette figure 50 démontre que les modifications ont été effectuées.
 Cliente :
8/22/2023 63
Figure 51 : CRUD des clients.
La présente représentation met en évidence le CRUD pour les clients, offrant des fonctionnalités
similaires à celles énoncées dans la gestion des utilisateurs, de plus, une caractéristique unique est
introduite : un bouton supplémentaire spécifique aux clients. En cliquant sur ce bouton, une
nouvelle fenêtre s'ouvre, révélant l'ensemble des projets liés à ce client.
5 7
Figure 52:CRUD des projets.
La figure 52 illustre la mise en œuvre du CRUD pour les projets, comportant les boutons
nouvellement introduits "Labels", "Images" et "Labeling". Les figures suivantes fournissent des
détails sur la manière dont ces boutons affectent l'interface.
8/22/2023 64
Figure 53:CRUD des images.
Cette figure 53 représente la mise en œuvre du CRUD pour les images, en utilisant les
fonctionnalités fournies par le bouton (5). Les deux premières images de la liste sont déjà annotées,
d'où leur état "Labeled". Cependant, il est à noter qu'une erreur s'est produite au niveau de
l'endpoint fourni par l'équipe backend, ce qui a entraîné l'absence d'ID de labels dans le champ
correspondant.
Figure 54:CRUD des labels.
Cette figure 54 représente la mise en œuvre du CRUD pour les labels, en utilisant les
fonctionnalités fournies par le bouton (6).
8/22/2023 65
Le bouton (7) incarne la facette centrale du projet, se consacrant à l'annotation. Les figures
subséquentes détaillent le processus en exposant son déroulement étape par étape.
Figure 55:Page d’annotation.
Lorsque le bouton 7 est activé, il déclenche l'affichage de la galerie d'images spécifique au projet
en question. Cette galerie présente uniquement les images qui n'ont pas encore été annotées, c'est-
à-dire celles qui ne sont pas encore "labeled". Comme c’est illustré.
Figure 56:Page d’annotation 2.
Dans ce contexte, une image a été choisie et une zone particulière a été délimitée à l'intérieur de
cette image. Le processus d'annotation est maintenant sur le point de débuter.
8/22/2023 66
Dans cette étape, après avoir cliqué sur "Start", une boîte de sélection apparaît, Cette dernière
permet d'annoter précisément la zone que vous sélectionnée.
Dans cette situation, une deuxième annotation a été ajoutée à l'image. Une fois que toutes les
annotations ont été appliquées, l'étape suivante consiste à soumettre cette image.
8/22/2023 67
Figure 59: Page d’annotation 5.
Dans cette figure 59 , il est évident que l'image ne figure plus dans la galerie. Cela est dû au fait
que son état a été modifié pour indiquer qu'elle est désormais "labeled". Lorsqu'une image est
annotée avec succès et que son état est changé en "labeled", elle est retirée de la galerie des images
non annotées. Cependant, la figure suivante mettra en évidence un problème persistant. Bien que
plusieurs éléments aient été envoyés depuis le front-end, le backend n'a récupéré que le dernier
élément. Cela est principalement dû au fait que endpoint fourni ne parvient à récupérer qu'un seul
élément, même si l'objectif est d'annoter une image avec plusieurs annotations distinctes.
Figure 60:Table des images après l'annotation.
5. Les problèmes rencontres :
8/22/2023 68
Lors de la phase de développement, nous avons été confrontés à plusieurs défis majeurs. Tout
d'abord, la mise en place de la sélection des zones à annoter s'est avérée être un obstacle important.
Nous avons expérimenté diverses bibliothèques pour cette fonction, notamment "react-annotate".
Cependant, nous avons rencontré des problèmes lors de l'installation de certaines bibliothèques, ce
qui a entraîné des retards. De plus, nous avons également essayé de créer une solution
personnalisée en utilisant uniquement des styles CSS, mais le résultat obtenu ne répondait pas
pleinement à nos attentes en termes d'expérience utilisateur.
Suite à ces difficultés, nous nous sommes tournés vers la bibliothèque "react-crop", qui s'est
finalement avérée être la solution appropriée pour notre besoin de sélection précise des zones à
annoter. Cependant, même avec cette bibliothèque, nous avons rencontré des problèmes lors de
son implémentation. Grâce à une approche méthodique et à des efforts persistants, nous avons pu
surmonter ces difficultés et intégrer avec succès la fonction de sélection des zones à annoter dans
notre application.
Un autre défi majeur a été la consommation de l'API. Nous avons constaté que certaines requêtes
que nous utilisions n'étaient pas toujours compatibles avec l'API fournie. De plus, nous avons
identifié deux problèmes dans l'API elle-même, ce qui a nécessité une exploration et une analyse
approfondies de la part de notre équipe front-end pour résoudre ces problèmes et assurer une
communication fluide entre le front-end et le back-end.
Enfin, la récupération des zones de sélection a également posé des difficultés. Cependant, une fois
que nous avons compris le fonctionnement de la bibliothèque "react-crop", nous avons réussi à
résoudre ce problème et à mettre en œuvre cette fonctionnalité de manière efficace.
Ces obstacles ont été surmontés grâce à une approche collaborative pour résoudre les problèmes
rencontrés. On a finalement abouti à une meilleure compréhension des technologies utilisées et à
une application plus robuste.
8/22/2023 69
Chapitre 6 : Compétences acquises et

apprentissages
Résumé
Au sein de ce chapitre, nous mettrons en lumière les compétences que

nous avons acquises au cours de notre stage, notamment notre maîtrise
de React, notre aptitude à travailler en équipe pour la gestion de projets,
ainsi que notre capacité à résoudre des problèmes techniques
complexes. Ces apprentissages ont considérablement enrichi notre
expertise en tant qu'étudiant ingénieur en informatique.
8/22/2023 70
1. Développement en React :
Pendant notre stage, nous avons utilisé React, une bibliothèque JavaScript très répandue pour la
création d'interfaces utilisateur dynamiques et réactives. Grâce à cette expérience, nous avons
développé une solide maîtrise des concepts fondamentaux de React et acquis une compréhension
approfondie de son rôle essentiel dans le développement côté client.
Parmi les compétences clés que nous avons développées, la gestion de l'état de l'application à l'aide
des hooks de React tels que useState et useEffect occupe une place centrale. Cette aptitude nous a
permis de maintenir efficacement l'état des composants et de gérer les mises à jour, contribuant
ainsi à l'amélioration notable de la réactivité et des performances de nos applications.
Un autre aspect crucial du développement avec React a été la gestion des routes à l'aide de
bibliothèques comme react-router-dom. Cette compétence nous a permis de créer des applications
à plusieurs pages et de garantir une navigation fluide entre les différentes vues de l'application.
Figure 61:Capture représentant l'utilisation de react-router-dom.
Cette figure 61 illustre de manière visuelle et concise la façon dont la bibliothèque react-router-
dom est mise en œuvre dans nos projets. Cette capture met en évidence comment les routes sont
gérées dans une application React, permettant ainsi une navigation fluide et structurée entre les
différentes pages et vues de l'application.
Nous avons également eu l'opportunité de travailler avec des APIs pour intégrer des données
provenant de serveurs externes dans nos applications. Cela nous a permis de comprendre comment
communiquer avec des serveurs via des requêtes HTTP et de manipuler les données reçues pour
les afficher de manière appropriée dans l'interface utilisateur.
8/22/2023 71
En cours de notre parcours, nous avons découvert de nombreuses bibliothèques et outils

complémentaires qui ont facilité notre travail en React. Certains d'entre eux ont été utilisés dans
nos projets, tandis que d'autres ont été explorés et testés sans être réellement intégrés dans nos
applications. Parmi ces bibliothèques, nous avons rencontré react-bcryptjs, mais ne l'avons pas
utilisée car le cryptage était géré côté back-end. De plus, nous avons employé js-cookie pour la
gestion des cookies dans notre application, ainsi que react-modal pour créer des modales
interactives et conviviales.
La figure 62 , intitulée "Capture représentant les bibliothèques utilisées dans l'un des composants,"
offre un aperçu visuel des diverses bibliothèques qui ont été intégrées dans l'un de nos composants
React.
Figure 62:Capture représentant les bibliothèques utilisées dans l'un des composant.
Enfin, cette expérience nous a également permis de naviguer efficacement dans la structure des
fichiers de projet React, notamment dans le répertoire src, où se trouvent les principaux fichiers
sources, ainsi que dans node_modules, qui contient les dépendances externes du projet.
2. Gestion de projet et collaboration en équipe :
La gestion de projet et la collaboration en équipe ont joué un rôle crucial dans notre deuxième
projet en tant que travail d'équipe. L'adoption de méthodes et d'outils appropriés a assuré une
planification et une exécution fluides tout au long du projet. En utilisant la méthodologie Agile,
nous avons planifié des sprints, revu les tâches terminées et priorisé les prochaines étapes lors de
réunions régulières. Cette approche itérative a favorisé la flexibilité et la réactivité aux
changements.
Pour la gestion des tâches, GitHub a été notre choix pour le contrôle de version et la coordination
du code. Cette plateforme a permis une collaboration harmonieuse sur diverses fonctionnalités,
minimisant les conflits et permettant des fusions ordonnées.
La communication s'est avérée essentielle. L'utilisation de canaux de messagerie instantanée

comme Discord a facilité les échanges rapides et les résolutions immédiates des problèmes.
8/22/2023 72
Travailler avec d'autres développeurs a été formateur. Cela a renforcé notre aptitude à
communiquer, partager des idées et résoudre collectivement des défis, compétences précieuses
pour notre avenir professionnel.
3. Résolution de problèmes et prise de décision :
Pendant ce stage, nous avons été confrontés à divers problèmes techniques lors de la compilation
et du développement de nos projets. Cependant, au fil du temps, nous avons développé des
compétences en résolution de problèmes qui nous ont permis de surmonter ces obstacles.
Face aux erreurs de compilation et aux problèmes rencontrés, nous avons appris à analyser
attentivement les messages d'erreur et à identifier les causes sous-jacentes. En nous efforçant de
comprendre les erreurs, nous avons acquis la capacité de détecter plus facilement la source du
problème.
Au fur et à mesure de nos apprentissages, nous avons également renforcé notre confiance en
prenant des décisions techniques pour résoudre les problèmes. Nous avons appris à évaluer
différentes approches et à choisir la meilleure solution en fonction du contexte et des exigences du
projet.
Figure 63:Capture représentantes Une erreur.
L'erreur 422, aussi connue sous le nom de "Unprocessable Entity" (Entité non traitable), survient
lorsque le serveur comprend la requête mais ne peut pas la traiter en raison de problèmes liés aux
données transmises. Cette situation se manifeste fréquemment lors de la validation des données,
par exemple lorsque les informations transmises dans une requête POST, PUT ou PATCH sont
8/22/2023 73
mal formatées, manquantes ou ne respectent pas les contraintes de validation du serveur. En effet,
si vous observez la Figure 64 dans la documentation API (Swagger), elle demande prénom, nom,
e-mail ,rôle et mot de passe mais nous avons omis de fournir prénom.
Figure 64:Swagger.
8/22/2023 74
Conclusion
La période de stage au sein de l'entreprise STM a été une expérience très bénéfique pour nous.
Au cours de cette période, nous avons eu l'occasion d'approfondir et d'appliquer les notions
théoriques que nous avions acquises lors de notre formation à L’Ecole Marocaine des Sciences
de l'Ingénieur de Tanger. Cette mise en pratique concrète nous a permis de consolider nos
connaissances et de mieux appréhender les défis du monde professionnel.
Dès nos premiers jours de stage, nous avons pu constater à quel point le domaine théorique et le
domaine pratique sont complémentaires. Il ne suffit pas d'avoir des connaissances théoriques
solides, il est essentiel de savoir les mettre en œuvre dans des situations réelles. Ce stage nous a
offert cette opportunité précieuse, en nous permettant de mettre en pratique nos compétences et
de développer notre savoir-faire dans un environnement professionnel stimulant.
L'une des leçons les plus importantes que nous avons apprises pendant notre stage est
l'importance de la sociabilité et de la coopération dans le milieu du travail. Travailler en équipe
et collaborer avec nos collègues nous a permis de comprendre comment le succès des projets
dépend souvent de la collaboration entre les membres de l'équipe. Nous avons appris à
communiquer efficacement, à partager des idées et à résoudre des problèmes de manière
collective. Cette expérience a renforcé notre capacité à travailler en équipe.
En conclusion, malgré la durée relativement courte du stage, cette expérience a eu un impact

significatif sur notre développement personnel et professionnel. Elle nous a permis de renforcer
nos compétences techniques, de développer des qualités essentielles telles que la sociabilité et la
coopération en équipe, et de mieux comprendre le monde du travail. Nous sommes
profondément reconnaissants envers l'entreprise STM de nous avoir offert cette opportunité
d’apprentissage. Ce stage restera à jamais dans notre cœur, car c'était le premier de notre vie et
dans notre parcours professionnel, et nous avons beaucoup appris de cette expérience.
8/22/2023 75
Bibliographie
https://docs/Presentation_STM.pdf
https://www.stm.ma/
https://www.w3schools.com/REACT
https://www.ideematic.com/actualites/2015/01/methodes-agiles-definition/
https://www.techno-science.net/definition/670.html
https://www.gantt.com/fr/
https://uml.developpez.com/cours/
https://perso.liris.cnrs.fr/christine.solnon/coursUML.pdf
https://reactjsexample.com/a-complete-crud-of-a-camera-store-made-with-reactjs/
https://react-bootstrap.netlify.app/
https://www.1min30.com/developpement-web-mobile/figma-1287540804
https://www.w3schools.com/nodejs/nodejs_npm.asp
8/22/2023 76

Rapport de Stage

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport de Stage

Transféré par

Droits d'auteur :

Formats disponibles

Société Tangeroise de Maintenance

1ère année du Cycle d’Ingénieur

Tanger, Septembre 2023

Rapport Stage D’ Initiation

Réalise par : Randa El Maazouza

Encadré Par : Doae Mansouri (Encadrante pédagogique)

Alae Moudni (Encadrant professionnelle)

Figure 40:Capture code utiliser pour Connexion (Login). .......................................................................... 58

Chapitre 1: Presentation de l’entreprise

Ce chapitre établit les bases du contexte opérationnel de l'entreprise.

1.1. Fiche technique:

La Figure 1 présente le logo distinctif de la Société Tangéroise de Maintenance (STM), ce logo

Figure 1:Logo de La société tangéroise de maintenance

1.2. Histoire de enterprise:

1.3. Organisation interne:

Le Département Logistique gère les chaînes d'approvisionnement et la distribution, tandis que le

Figure 2:Organigramme de STM .

Figure 3:Mr Tarik Moudni, Président Directeur Général de STM Group.

1.4. STM Agences :

Figure 4:STM Tanger Showroom.

1.5. Piliers stratégiques:

• Etude • Développement • Conseil • Accompagnement • Délégation de maîtrise d’ouvrage

• Précâblage • Réseaux Télécom • Vidéoconférence • Télésurveillance •Détection d’incendie

• Contrat préventif et curatif • Imprimante • Outsoursing IT • Photocopieur

• Matériel Informatique • Bureautique • Téléphonie • Solutions de gestion

2.2. Partenaires Métiers et Techniques et les Principaux Éditeurs et Constructeurs du

Chapitre 2 : Département IT et mission

Ce chapitre offre un aperçu détaillé du département IT où s'est déroulé

1.1.Description des Étapes du Processus de Production / Principales Missions :

Analyse et Conception : Le département d'Ingénierie et d'Infrastructure démarre par une phase

Développement et Intégration : Une fois la conception validée, l'équipe d'ingénieurs et de

Optimisation et Sécurité : Le département veille à l'optimisation continue des infrastructures pour

1.2.Lien fonctionnel avec le reste de l’entreprise :

1.3.Description de métiers du département :

Ingénieurs en Informatique et Réseau : Les ingénieurs en informatique et réseau au sein de STM

Techniciens en Développement Informatique : Les techniciens en développement informatique

Cette équipe diversifiée de professionnels au sein du département IT de STM Group travaille en

2. Contexte du stage et objectif au sein du département IT :

Au sein de l'entreprise STM, nous avons eu l'opportunité de réaliser un stage de développement

3. Vue d’ensemble des projets réalises :

3.1.Premier projet : Gestion d’un parking :

Figure 7:Figure représente le projet de parking

3.2.Deuxième projet : Labeling picture :

Figure 8:Figure représente le projet de labelling picture.

Chapitre 3 : Méthodologie de travaille et

Dans ce chapitre nous découvrirons les outils essentiels et les solutions

1.1.Méthode Agile dans développement web :

 Communication et collaboration : Nous avons encouragé une communication ouverte et

La Figure 9 représente de manière simplifiée le principe fondamental de la méthode Agile. Cette

Figure 9:Représentation simplifiée du principe de la méthode Agile.

1.2.Méthode 2TUP : Méthode Y:

Figure 10:Diagramme de Gantt.

3. Les technologies utilisées :

React: La bibliothèque JavaScript React a été le

JavaScript, HTML et CSS: Ces technologies fondamentales ont été

Bootstrap: Le framework CSS Bootstrap a été utilisé pour

Figma: Pour la phase de maquettage et de prototypage,

Node.js : En tant que plateforme JavaScript côté serveur,

FastAPI et Swagger : Pour accéder aux ressources du serveur, nous

JSON Server : Pendant la phase de développement du premier

3.3.Outils de gestion de projet et de développement :

Jira : Jira a été notre principal outil de gestion de

UML: Les diagrammes UML ont été utilisés pour