nisation des outils de configuration du CAP4000 Transition vers une nouvelle application web Auteur Joshua JOURDAM Date de publication 17 juillet 2024 Résumé au dos ou au début du mémoire synthèse carte de visite anglais / français ~15 lignes 3 à 5 mot clés Le renouvellement constant des technologies dans l’industrie est un phénomène de plus en plus marquant de nos jours. Les entreprises qui souhaitent rester compétitives sur le marché doivent s’adapter à ces changements et innover en permanence. Dans ce contexte, le présent projet a pour objectif de développer une nouvelle solution pour répondre aux besoins actuels des industriels. Le projet s’inscrit dans la conception et la réalisation d’une plateforme web permettant de faciliter la gestion des opérations de maintenance et de suivi des équipements SDEL Contrôle Commande. Mots clés Calculateur, Développement WEB, API REST, Authentification Table des matières 1 Environnement et Contexte 1.1 Entreprise, service et position 1.1.1 Vinci 1.1.2 Vinci Energies 1.1.3 Hiérarchie et Fonctionnement de l’Entreprise 1.1.4 SDEL Contrôle Commande 1.1.5 Le service Recherche et Développement 1.2 Contexte du projet 2 Problématique 3 Buts et Objectifs 3.1 Objectifs Stratégiques et Opérationnels 3.1.1 Sélectionner un Cadre de Développement Optimal 3.1.2 Préparer la Transition Technologique 3.1.3 Développer la Nouvelle Application Web 3.1.4 Objectif 4 : Développer les Compétences en Gestion de Projet et Techniques 4 Démarche 4.1 Démarche générale 4.2 Méthodologie, techniques et technologies 4.3 Analyse des risques 4.4 Acteurs 4.5 Lotissements 4.6 Planning prévisionnel 4.7 Planning effectif 4.7.1 Jalons 4.7.2 Livrables 4.8 Budget 5 Résultats 5.1 Evaluation des technologies du marché 5.2 Transition 5.2.1 OpenAPI 5.2.2 Authentification 5.2.3 POC supervision stage 5.3 Développement 5.3.1 Spécification de l’application 5.3.2 Fonctionnement de la solution 5.3.3 Architecture/Workspace (expliquer comment fonctionne un monorepo) 5.3.4 Bibliothèques (zod, react-hook-form, react-query, react-router, orval, react-testing-library, vitest) 5.3.5 Gestion des erreurs et des chargements 5.3.6 Authentification et autorisation 5.3.7 Application 5.3.8 Modules 5.3.9 Tests 5.3.10 Performances 5.3.11 Application 6 Conclusion 6.1 Bilan 7 Annexes 7.1 Références 7.2 Grille des compétences Acronymes HSP PRP REST API SDELCC JWT HTTP HTTPS HMAC WBS CSR SPA Remerciements Ce projet s’intègre dans le cadre de mon apprentissage au sein de l’entreprise SDEL Contrôle Commande. SDEL Contrôle Commande appartient à la filiale Energies du groupe VINCI. Grâce à son expertise technique, SDEL Contrôle commande propose son accompagnement auprès des gestionnaires de réseaux de transport et de distribution d’énergie. J’ai intégré l’entreprise en tant qu’apprenti ingénieur en informatique. J’ai été affecté au service Recherche et Développement, sous la responsabilité de Monsieur Sébastien BARRE, responsable du développement logiciel. Le service Recherche et Développement est en charge de la conception et du développement de calculateurs utilisés principalement dans le domaine de l’énergie notamment dans les postes de transformation du réseau électrique français. Il est également en charge de la maintenance des produits existants. Cette maintenance peut s’effectuer sur de longues périodes, de l’ordre de 20 ans. Le projet s’inscrit dans une dynamique globale qui vise à moderniser les logiciels et les outils que nos équipements embarquent. Cette modernisation à pour objectif de proposer des outils plus ergonomiques et de répondre à des contraintes de cybersécurité plus strictes. Le projet à pour objectif de développer une nouvelle application d’administration et de configuration des automates SDEL. IL se déroule sur la dernière année de ma formation d’ingénieur en apprentissage sur la période de Juin 2023 à août 2024. Ce rapport est découpé en 3 parties : Environnement et contexte : Dans un premier temps, je présenterai le contexte de mon entreprise, puis mon poste et mes rôles au sein de celle-ci. Je présenterai également le contexte, la problématique spécifique ainsi que les buts et objectif du projet. Mise en œuvre et analyse des résultats : Dans cette partie, j’aborderai la méthodologie de travail choisie et les outils utilisés pour assurer son bon déroulement. Je présenterai ensuite les résultats obtenus en évoquant les écarts avec les objectif établis. Bilan et perspectives : Enfin, je ferai un bilan et j’évoquerai les perspectives d’évolution du projet. Je présenterai également les compétences acquises et les apports de ce projet dans mon parcours de formation. Pour finir, je présenterai mes perspectives futures pour ma carrière professionnelle. 1 Environnement et Contexte développer contexte entreprise, Vinci et hiérarchie (energies, omexom), nos marchés (où) ce qu’il faut retenir de chaque chapitre (bullet list) 1.1 Entreprise, service et position 1.1.1 Vinci image/svg+xml Figure 1: Logo VINCI Vinci est une entreprise multinationale française spécialisée dans la construction et les concessions. Fondée en 1899 sous le nom de Société Générale d’Entreprises (SGE), elle est devenue Vinci en 2000. Vinci est l’une des plus grandes entreprises de construction et de concessions dans le monde, avec des activités diversifiées dans le domaine de la construction, des infrastructures, des services énergétiques et de la gestion des infrastructures. Secteurs d’activité : Construction : Vinci Construction est spécialisée dans le bâtiment, les travaux publics, le génie civil, les fondations et les infrastructures de transport. Concessions : Vinci Autoroutes et Vinci Airports gèrent des réseaux autoroutiers et des aéroports dans plusieurs pays. Énergie : Vinci Energies intervient dans les domaines des infrastructures d’énergie, des industries, des technologies de l’information, et de la transition énergétique. Immobilier : Vinci Immobilier est active dans le développement immobilier résidentiel, tertiaire et commercial. #mermaid-1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#mermaid-1 .error-icon{fill:#a44141;}#mermaid-1 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1 .edge-thickness-normal{stroke-width:2px;}#mermaid-1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1 .marker.cross{stroke:lightgrey;}#mermaid-1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1 .edge{stroke-width:3;}#mermaid-1 .section--1 rect,#mermaid-1 .section--1 path,#mermaid-1 .section--1 circle,#mermaid-1 .section--1 polygon,#mermaid-1 .section--1 path{fill:#1f2020;}#mermaid-1 .section--1 text{fill:lightgrey;}#mermaid-1 .node-icon--1{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge--1{stroke:#1f2020;}#mermaid-1 .edge-depth--1{stroke-width:17;}#mermaid-1 .section--1 line{stroke:#e0dfdf;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-0 rect,#mermaid-1 .section-0 path,#mermaid-1 .section-0 circle,#mermaid-1 .section-0 polygon,#mermaid-1 .section-0 path{fill:#0b0000;}#mermaid-1 .section-0 text{fill:lightgrey;}#mermaid-1 .node-icon-0{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-0{stroke:#0b0000;}#mermaid-1 .edge-depth-0{stroke-width:14;}#mermaid-1 .section-0 line{stroke:#f4ffff;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-1 rect,#mermaid-1 .section-1 path,#mermaid-1 .section-1 circle,#mermaid-1 .section-1 polygon,#mermaid-1 .section-1 path{fill:#4d1037;}#mermaid-1 .section-1 text{fill:lightgrey;}#mermaid-1 .node-icon-1{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-1{stroke:#4d1037;}#mermaid-1 .edge-depth-1{stroke-width:11;}#mermaid-1 .section-1 line{stroke:#b2efc8;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-2 rect,#mermaid-1 .section-2 path,#mermaid-1 .section-2 circle,#mermaid-1 .section-2 polygon,#mermaid-1 .section-2 path{fill:#3f5258;}#mermaid-1 .section-2 text{fill:lightgrey;}#mermaid-1 .node-icon-2{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-2{stroke:#3f5258;}#mermaid-1 .edge-depth-2{stroke-width:8;}#mermaid-1 .section-2 line{stroke:#c0ada7;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-3 rect,#mermaid-1 .section-3 path,#mermaid-1 .section-3 circle,#mermaid-1 .section-3 polygon,#mermaid-1 .section-3 path{fill:#4f2f1b;}#mermaid-1 .section-3 text{fill:lightgrey;}#mermaid-1 .node-icon-3{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-3{stroke:#4f2f1b;}#mermaid-1 .edge-depth-3{stroke-width:5;}#mermaid-1 .section-3 line{stroke:#b0d0e4;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-4 rect,#mermaid-1 .section-4 path,#mermaid-1 .section-4 circle,#mermaid-1 .section-4 polygon,#mermaid-1 .section-4 path{fill:#6e0a0a;}#mermaid-1 .section-4 text{fill:lightgrey;}#mermaid-1 .node-icon-4{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-4{stroke:#6e0a0a;}#mermaid-1 .edge-depth-4{stroke-width:2;}#mermaid-1 .section-4 line{stroke:#91f5f5;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-5 rect,#mermaid-1 .section-5 path,#mermaid-1 .section-5 circle,#mermaid-1 .section-5 polygon,#mermaid-1 .section-5 path{fill:#3b0048;}#mermaid-1 .section-5 text{fill:lightgrey;}#mermaid-1 .node-icon-5{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-5{stroke:#3b0048;}#mermaid-1 .edge-depth-5{stroke-width:-1;}#mermaid-1 .section-5 line{stroke:#c4ffb7;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-6 rect,#mermaid-1 .section-6 path,#mermaid-1 .section-6 circle,#mermaid-1 .section-6 polygon,#mermaid-1 .section-6 path{fill:#995a01;}#mermaid-1 .section-6 text{fill:lightgrey;}#mermaid-1 .node-icon-6{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-6{stroke:#995a01;}#mermaid-1 .edge-depth-6{stroke-width:-4;}#mermaid-1 .section-6 line{stroke:#66a5fe;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-7 rect,#mermaid-1 .section-7 path,#mermaid-1 .section-7 circle,#mermaid-1 .section-7 polygon,#mermaid-1 .section-7 path{fill:#154706;}#mermaid-1 .section-7 text{fill:lightgrey;}#mermaid-1 .node-icon-7{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-7{stroke:#154706;}#mermaid-1 .edge-depth-7{stroke-width:-7;}#mermaid-1 .section-7 line{stroke:#eab8f9;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-8 rect,#mermaid-1 .section-8 path,#mermaid-1 .section-8 circle,#mermaid-1 .section-8 polygon,#mermaid-1 .section-8 path{fill:#161722;}#mermaid-1 .section-8 text{fill:lightgrey;}#mermaid-1 .node-icon-8{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-8{stroke:#161722;}#mermaid-1 .edge-depth-8{stroke-width:-10;}#mermaid-1 .section-8 line{stroke:#e9e8dd;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-9 rect,#mermaid-1 .section-9 path,#mermaid-1 .section-9 circle,#mermaid-1 .section-9 polygon,#mermaid-1 .section-9 path{fill:#00296f;}#mermaid-1 .section-9 text{fill:lightgrey;}#mermaid-1 .node-icon-9{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-9{stroke:#00296f;}#mermaid-1 .edge-depth-9{stroke-width:-13;}#mermaid-1 .section-9 line{stroke:#ffd690;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-10 rect,#mermaid-1 .section-10 path,#mermaid-1 .section-10 circle,#mermaid-1 .section-10 polygon,#mermaid-1 .section-10 path{fill:#01629c;}#mermaid-1 .section-10 text{fill:lightgrey;}#mermaid-1 .node-icon-10{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-10{stroke:#01629c;}#mermaid-1 .edge-depth-10{stroke-width:-16;}#mermaid-1 .section-10 line{stroke:#fe9d63;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-root rect,#mermaid-1 .section-root path,#mermaid-1 .section-root circle,#mermaid-1 .section-root polygon{fill:hsl(180, 1.5873015873%, 48.3529411765%);}#mermaid-1 .section-root text{fill:#2c2c2c;}#mermaid-1 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1 .edge{fill:none;}#mermaid-1 .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}VINCIVinci EnergiesVinci ConstructionVinci AutoroutesVinci AirportsVinci Immobilier 1.1.2 Vinci Energies Vinci Energies, une filiale de Vinci, est spécialisée dans les services énergétiques et les technologies de l’information. Elle propose des solutions dans les domaines de l’énergie, des technologies de l’information, et des télécommunications. Ses principales activités incluent : Infrastructure Énergie : Gestion des réseaux électriques et des infrastructures de distribution d’énergie. Industrie : Optimisation des processus industriels et amélioration de l’efficacité énergétique. TIC (Technologies de l’Information et de la Communication) : Solutions pour les systèmes d’information et les télécommunications. Transition Énergétique et Environnementale : Développement de solutions pour une énergie plus durable et respectueuse de l’environnement. Vinci Energies, une division du groupe VINCI, regroupe plusieurs marques spécialisées dans divers domaines des services énergétiques et des technologies de l’information. Les cinq principales marques de Vinci Energies sont : Actemium : Spécialisée dans les solutions et les services pour les processus industriels, couvrant l’ensemble du cycle de vie des installations industrielles. Axians : Focalisée sur les technologies de l’information et de la communication (TIC), offrant des solutions pour les infrastructures IT, la cybersécurité, le cloud, les réseaux et la collaboration. Cegelec : Fournit des services et des solutions en ingénierie électrique et maintenance pour les infrastructures et les bâtiments. Omexom : Se concentre sur les infrastructures énergétiques, notamment les réseaux de transport et de distribution d’électricité, les énergies renouvelables et les systèmes de stockage d’énergie. VINCI Facilities : Offre des services de gestion et de maintenance des bâtiments, incluant des solutions de facility management intégrées pour optimiser les performances des installations. 1.1.3 Hiérarchie et Fonctionnement de l’Entreprise 1.1.3.1 Organisation Vinci est organisée en plusieurs divisions opérationnelles, chacune ayant une structure hiérarchique propre. La hiérarchie de Vinci et de ses filiales, comme Vinci Energies, est généralement structurée de la manière suivante : Conseil d’Administration : Organe suprême de la société, responsable de la stratégie globale et de la surveillance de la direction exécutive. Direction Générale : Composée du Président-Directeur Général (PDG) et d’autres membres de la direction exécutive, responsables de la mise en œuvre de la stratégie et de la gestion quotidienne de l’entreprise. Directeurs de Divisions/Branches : Chacun responsable d’une branche spécifique (par exemple, Vinci Construction, Vinci Energies). Directeurs de Filières/Entités : Supervisent des sous-divisions ou entités spécifiques au sein de chaque branche, telles que des régions géographiques ou des domaines spécialisés. Chefs de Projet et Managers Opérationnels : Responsables de la gestion quotidienne des projets et des équipes sur le terrain. Équipes Opérationnelles : Constituent les employés qui travaillent directement sur les projets, incluant ingénieurs, techniciens, ouvriers, et autres professionnels spécialisés. 1.1.3.2 Fonctionnement Décentralisation : Vinci privilégie une approche décentralisée, permettant à ses différentes divisions et filiales de bénéficier d’une grande autonomie. Cela favorise la réactivité et l’adaptabilité aux marchés locaux. Innovation : L’entreprise met l’accent sur l’innovation technologique et l’efficacité énergétique, soutenant les projets de recherche et développement pour anticiper les besoins futurs. Responsabilité Sociétale et Environnementale : Vinci est engagée dans une démarche de développement durable, visant à réduire son empreinte écologique et à améliorer ses performances environnementales. En résumé, Vinci est une entreprise diversifiée avec une structure hiérarchique bien définie, soutenant une approche décentralisée et innovante pour répondre aux besoins de ses marchés dans le domaine de la construction, des concessions, et des services énergétiques. 1.1.4 SDEL Contrôle Commande Figure 2: Entrée principale de SDEL Contrôle Commande SDEL Contrôle Commande appartient à la filiale Energies du groupe VINCI. Elle est composée de plusieurs marques, comme Omexom, Actemium et Axians. Chaque marque est spécialisée dans un domaine d’activité précis. Ainsi VINCI Energies offre une gamme complète de services et de solutions dans le domaine de l’énergie. SDEL Contrôle Commande est une entreprise mono-site basée à Saint-Aignan-Grandlieu. Au sein du réseau Omexom, SDEL Contrôle Commande intervient dans la gestion de projets clé en main, la conception, l’ingénierie, l’intégration, l’installation, la configuration, les essais, la mise en service et la maintenance de systèmes de contrôle commande de postes électriques et d’automatismes. Figure 3: Tranches SDEL Composée de plus de 300 salariés, elle bénéficie de plus de 50 années d’expérience dans le contrôle commande. Ainsi, grâce à son expertise technique, SDEL Contrôle commande propose son accompagnement auprès des gestionnaires de réseaux de transport et de distribution d’énergie. Nos clients majeurs sont RTE et Enedis. Nous proposons une offre sur mesure de produits à destination des postes du réseau électrique français. Nous fournissons également des systèmes de contrôle commande à Thales pour le pilotage de batteries marines et à la RATP pour la supervision du système de ventilation du métro parisien. RTE Enedis Thales RATP EDF Nos principaux concurrents sont Actia Telecom, SCLE, Eiffage Energie. Ils proposent une gamme de produits similaire sur le marché de la distribution et du transport de l’énergie. Quelques entreprises du groupe VINCI sont également en compétition directe avec SDEL Contrôle Commande sur certains appels d’offre. #fig-market-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-market-mermaid .error-icon{fill:#a44141;}#fig-market-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-market-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-market-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-market-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-market-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-market-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-market-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-market-mermaid .marker.cross{stroke:lightgrey;}#fig-market-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-market-mermaid .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#fig-market-mermaid .pieOuterCircle{stroke:black;stroke-width:2px;fill:none;}#fig-market-mermaid .pieTitleText{text-anchor:middle;font-size:25px;fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);font-family:"trebuchet ms",verdana,arial,sans-serif;}#fig-market-mermaid .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#ccc;font-size:17px;}#fig-market-mermaid .legend text{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#fig-market-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}85%10%4%1%EnergieDéfenseTransportAutres industries Figure 4: Répartition des marchés de SDEL Contrôle Commande #fig-organisation-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-organisation-mermaid .error-icon{fill:#a44141;}#fig-organisation-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-organisation-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-organisation-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-organisation-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-organisation-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-organisation-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-organisation-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-organisation-mermaid .marker.cross{stroke:lightgrey;}#fig-organisation-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-organisation-mermaid .edge{stroke-width:3;}#fig-organisation-mermaid .section--1 rect,#fig-organisation-mermaid .section--1 path,#fig-organisation-mermaid .section--1 circle,#fig-organisation-mermaid .section--1 polygon,#fig-organisation-mermaid .section--1 path{fill:#1f2020;}#fig-organisation-mermaid .section--1 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon--1{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge--1{stroke:#1f2020;}#fig-organisation-mermaid .edge-depth--1{stroke-width:17;}#fig-organisation-mermaid .section--1 line{stroke:#e0dfdf;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-0 rect,#fig-organisation-mermaid .section-0 path,#fig-organisation-mermaid .section-0 circle,#fig-organisation-mermaid .section-0 polygon,#fig-organisation-mermaid .section-0 path{fill:#0b0000;}#fig-organisation-mermaid .section-0 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-0{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-0{stroke:#0b0000;}#fig-organisation-mermaid .edge-depth-0{stroke-width:14;}#fig-organisation-mermaid .section-0 line{stroke:#f4ffff;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-1 rect,#fig-organisation-mermaid .section-1 path,#fig-organisation-mermaid .section-1 circle,#fig-organisation-mermaid .section-1 polygon,#fig-organisation-mermaid .section-1 path{fill:#4d1037;}#fig-organisation-mermaid .section-1 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-1{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-1{stroke:#4d1037;}#fig-organisation-mermaid .edge-depth-1{stroke-width:11;}#fig-organisation-mermaid .section-1 line{stroke:#b2efc8;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-2 rect,#fig-organisation-mermaid .section-2 path,#fig-organisation-mermaid .section-2 circle,#fig-organisation-mermaid .section-2 polygon,#fig-organisation-mermaid .section-2 path{fill:#3f5258;}#fig-organisation-mermaid .section-2 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-2{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-2{stroke:#3f5258;}#fig-organisation-mermaid .edge-depth-2{stroke-width:8;}#fig-organisation-mermaid .section-2 line{stroke:#c0ada7;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-3 rect,#fig-organisation-mermaid .section-3 path,#fig-organisation-mermaid .section-3 circle,#fig-organisation-mermaid .section-3 polygon,#fig-organisation-mermaid .section-3 path{fill:#4f2f1b;}#fig-organisation-mermaid .section-3 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-3{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-3{stroke:#4f2f1b;}#fig-organisation-mermaid .edge-depth-3{stroke-width:5;}#fig-organisation-mermaid .section-3 line{stroke:#b0d0e4;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-4 rect,#fig-organisation-mermaid .section-4 path,#fig-organisation-mermaid .section-4 circle,#fig-organisation-mermaid .section-4 polygon,#fig-organisation-mermaid .section-4 path{fill:#6e0a0a;}#fig-organisation-mermaid .section-4 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-4{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-4{stroke:#6e0a0a;}#fig-organisation-mermaid .edge-depth-4{stroke-width:2;}#fig-organisation-mermaid .section-4 line{stroke:#91f5f5;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-5 rect,#fig-organisation-mermaid .section-5 path,#fig-organisation-mermaid .section-5 circle,#fig-organisation-mermaid .section-5 polygon,#fig-organisation-mermaid .section-5 path{fill:#3b0048;}#fig-organisation-mermaid .section-5 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-5{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-5{stroke:#3b0048;}#fig-organisation-mermaid .edge-depth-5{stroke-width:-1;}#fig-organisation-mermaid .section-5 line{stroke:#c4ffb7;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-6 rect,#fig-organisation-mermaid .section-6 path,#fig-organisation-mermaid .section-6 circle,#fig-organisation-mermaid .section-6 polygon,#fig-organisation-mermaid .section-6 path{fill:#995a01;}#fig-organisation-mermaid .section-6 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-6{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-6{stroke:#995a01;}#fig-organisation-mermaid .edge-depth-6{stroke-width:-4;}#fig-organisation-mermaid .section-6 line{stroke:#66a5fe;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-7 rect,#fig-organisation-mermaid .section-7 path,#fig-organisation-mermaid .section-7 circle,#fig-organisation-mermaid .section-7 polygon,#fig-organisation-mermaid .section-7 path{fill:#154706;}#fig-organisation-mermaid .section-7 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-7{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-7{stroke:#154706;}#fig-organisation-mermaid .edge-depth-7{stroke-width:-7;}#fig-organisation-mermaid .section-7 line{stroke:#eab8f9;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-8 rect,#fig-organisation-mermaid .section-8 path,#fig-organisation-mermaid .section-8 circle,#fig-organisation-mermaid .section-8 polygon,#fig-organisation-mermaid .section-8 path{fill:#161722;}#fig-organisation-mermaid .section-8 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-8{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-8{stroke:#161722;}#fig-organisation-mermaid .edge-depth-8{stroke-width:-10;}#fig-organisation-mermaid .section-8 line{stroke:#e9e8dd;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-9 rect,#fig-organisation-mermaid .section-9 path,#fig-organisation-mermaid .section-9 circle,#fig-organisation-mermaid .section-9 polygon,#fig-organisation-mermaid .section-9 path{fill:#00296f;}#fig-organisation-mermaid .section-9 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-9{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-9{stroke:#00296f;}#fig-organisation-mermaid .edge-depth-9{stroke-width:-13;}#fig-organisation-mermaid .section-9 line{stroke:#ffd690;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-10 rect,#fig-organisation-mermaid .section-10 path,#fig-organisation-mermaid .section-10 circle,#fig-organisation-mermaid .section-10 polygon,#fig-organisation-mermaid .section-10 path{fill:#01629c;}#fig-organisation-mermaid .section-10 text{fill:lightgrey;}#fig-organisation-mermaid .node-icon-10{font-size:40px;color:lightgrey;}#fig-organisation-mermaid .section-edge-10{stroke:#01629c;}#fig-organisation-mermaid .edge-depth-10{stroke-width:-16;}#fig-organisation-mermaid .section-10 line{stroke:#fe9d63;stroke-width:3;}#fig-organisation-mermaid .disabled,#fig-organisation-mermaid .disabled circle,#fig-organisation-mermaid .disabled text{fill:lightgray;}#fig-organisation-mermaid .disabled text{fill:#efefef;}#fig-organisation-mermaid .section-root rect,#fig-organisation-mermaid .section-root path,#fig-organisation-mermaid .section-root circle,#fig-organisation-mermaid .section-root polygon{fill:hsl(180, 1.5873015873%, 48.3529411765%);}#fig-organisation-mermaid .section-root text{fill:#2c2c2c;}#fig-organisation-mermaid .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#fig-organisation-mermaid .edge{fill:none;}#fig-organisation-mermaid .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#fig-organisation-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}SDEL Contrôle CommandeRecherche etDéveloppementIngénierieInnovationGestion affairesStratégie IndustrielleBureau d 'étudesIntégrationLogistiqueChaîne achatsApprovisionnementEssaisMise en serviceTravauxInterventions Figure 5: Les services de SDEL Contrôle Commande 1.1.5 Le service Recherche et Développement SDEL Contrôle Commande propose des solutions techniques adaptées aux besoins de ses clients grâce à ses services Recherche et Développement, Ingénierie et Innovation. En plus de notre connaissance approfondie des différents constructeurs, notre expertise dans le domaine d’application nous permet de répondre aux besoins en ingénierie, dimensionnement, configuration et déploiement d’équipements de protection et de contrôle pour les réseaux électriques de transport et de distribution d’énergie. Le service Recherche et Développement est composé de 16 personnes. Il est spécialisé dans la conception de calculateurs et d’équipements utilisés dans les réseaux de distribution électriques. #fig-software-team-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-software-team-mermaid .error-icon{fill:#a44141;}#fig-software-team-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-software-team-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-software-team-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-software-team-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-software-team-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-software-team-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-software-team-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-software-team-mermaid .marker.cross{stroke:lightgrey;}#fig-software-team-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-software-team-mermaid .edge{stroke-width:3;}#fig-software-team-mermaid .section--1 rect,#fig-software-team-mermaid .section--1 path,#fig-software-team-mermaid .section--1 circle,#fig-software-team-mermaid .section--1 polygon,#fig-software-team-mermaid .section--1 path{fill:#1f2020;}#fig-software-team-mermaid .section--1 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon--1{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge--1{stroke:#1f2020;}#fig-software-team-mermaid .edge-depth--1{stroke-width:17;}#fig-software-team-mermaid .section--1 line{stroke:#e0dfdf;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-0 rect,#fig-software-team-mermaid .section-0 path,#fig-software-team-mermaid .section-0 circle,#fig-software-team-mermaid .section-0 polygon,#fig-software-team-mermaid .section-0 path{fill:#0b0000;}#fig-software-team-mermaid .section-0 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-0{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-0{stroke:#0b0000;}#fig-software-team-mermaid .edge-depth-0{stroke-width:14;}#fig-software-team-mermaid .section-0 line{stroke:#f4ffff;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-1 rect,#fig-software-team-mermaid .section-1 path,#fig-software-team-mermaid .section-1 circle,#fig-software-team-mermaid .section-1 polygon,#fig-software-team-mermaid .section-1 path{fill:#4d1037;}#fig-software-team-mermaid .section-1 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-1{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-1{stroke:#4d1037;}#fig-software-team-mermaid .edge-depth-1{stroke-width:11;}#fig-software-team-mermaid .section-1 line{stroke:#b2efc8;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-2 rect,#fig-software-team-mermaid .section-2 path,#fig-software-team-mermaid .section-2 circle,#fig-software-team-mermaid .section-2 polygon,#fig-software-team-mermaid .section-2 path{fill:#3f5258;}#fig-software-team-mermaid .section-2 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-2{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-2{stroke:#3f5258;}#fig-software-team-mermaid .edge-depth-2{stroke-width:8;}#fig-software-team-mermaid .section-2 line{stroke:#c0ada7;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-3 rect,#fig-software-team-mermaid .section-3 path,#fig-software-team-mermaid .section-3 circle,#fig-software-team-mermaid .section-3 polygon,#fig-software-team-mermaid .section-3 path{fill:#4f2f1b;}#fig-software-team-mermaid .section-3 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-3{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-3{stroke:#4f2f1b;}#fig-software-team-mermaid .edge-depth-3{stroke-width:5;}#fig-software-team-mermaid .section-3 line{stroke:#b0d0e4;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-4 rect,#fig-software-team-mermaid .section-4 path,#fig-software-team-mermaid .section-4 circle,#fig-software-team-mermaid .section-4 polygon,#fig-software-team-mermaid .section-4 path{fill:#6e0a0a;}#fig-software-team-mermaid .section-4 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-4{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-4{stroke:#6e0a0a;}#fig-software-team-mermaid .edge-depth-4{stroke-width:2;}#fig-software-team-mermaid .section-4 line{stroke:#91f5f5;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-5 rect,#fig-software-team-mermaid .section-5 path,#fig-software-team-mermaid .section-5 circle,#fig-software-team-mermaid .section-5 polygon,#fig-software-team-mermaid .section-5 path{fill:#3b0048;}#fig-software-team-mermaid .section-5 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-5{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-5{stroke:#3b0048;}#fig-software-team-mermaid .edge-depth-5{stroke-width:-1;}#fig-software-team-mermaid .section-5 line{stroke:#c4ffb7;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-6 rect,#fig-software-team-mermaid .section-6 path,#fig-software-team-mermaid .section-6 circle,#fig-software-team-mermaid .section-6 polygon,#fig-software-team-mermaid .section-6 path{fill:#995a01;}#fig-software-team-mermaid .section-6 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-6{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-6{stroke:#995a01;}#fig-software-team-mermaid .edge-depth-6{stroke-width:-4;}#fig-software-team-mermaid .section-6 line{stroke:#66a5fe;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-7 rect,#fig-software-team-mermaid .section-7 path,#fig-software-team-mermaid .section-7 circle,#fig-software-team-mermaid .section-7 polygon,#fig-software-team-mermaid .section-7 path{fill:#154706;}#fig-software-team-mermaid .section-7 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-7{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-7{stroke:#154706;}#fig-software-team-mermaid .edge-depth-7{stroke-width:-7;}#fig-software-team-mermaid .section-7 line{stroke:#eab8f9;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-8 rect,#fig-software-team-mermaid .section-8 path,#fig-software-team-mermaid .section-8 circle,#fig-software-team-mermaid .section-8 polygon,#fig-software-team-mermaid .section-8 path{fill:#161722;}#fig-software-team-mermaid .section-8 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-8{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-8{stroke:#161722;}#fig-software-team-mermaid .edge-depth-8{stroke-width:-10;}#fig-software-team-mermaid .section-8 line{stroke:#e9e8dd;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-9 rect,#fig-software-team-mermaid .section-9 path,#fig-software-team-mermaid .section-9 circle,#fig-software-team-mermaid .section-9 polygon,#fig-software-team-mermaid .section-9 path{fill:#00296f;}#fig-software-team-mermaid .section-9 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-9{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-9{stroke:#00296f;}#fig-software-team-mermaid .edge-depth-9{stroke-width:-13;}#fig-software-team-mermaid .section-9 line{stroke:#ffd690;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-10 rect,#fig-software-team-mermaid .section-10 path,#fig-software-team-mermaid .section-10 circle,#fig-software-team-mermaid .section-10 polygon,#fig-software-team-mermaid .section-10 path{fill:#01629c;}#fig-software-team-mermaid .section-10 text{fill:lightgrey;}#fig-software-team-mermaid .node-icon-10{font-size:40px;color:lightgrey;}#fig-software-team-mermaid .section-edge-10{stroke:#01629c;}#fig-software-team-mermaid .edge-depth-10{stroke-width:-16;}#fig-software-team-mermaid .section-10 line{stroke:#fe9d63;stroke-width:3;}#fig-software-team-mermaid .disabled,#fig-software-team-mermaid .disabled circle,#fig-software-team-mermaid .disabled text{fill:lightgray;}#fig-software-team-mermaid .disabled text{fill:#efefef;}#fig-software-team-mermaid .section-root rect,#fig-software-team-mermaid .section-root path,#fig-software-team-mermaid .section-root circle,#fig-software-team-mermaid .section-root polygon{fill:hsl(180, 1.5873015873%, 48.3529411765%);}#fig-software-team-mermaid .section-root text{fill:#2c2c2c;}#fig-software-team-mermaid .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#fig-software-team-mermaid .edge{fill:none;}#fig-software-team-mermaid .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#fig-software-team-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}BARRE SebastienChef de groupeIngénieurBAUDOUIN Jean LouisIHMTechnicienJANNIERE SylvainCAP4000 /IHMIngénieurCECILLON LucasCAP4000 /CybersécuritéApprentiDUPONT DavidIHMIngénieurHELARD FlorentCAP4000IngénieurMINIER BertrandYocto /CAP4000IngénieurJOURDAM JoshuaYocto /IHMApprenti Figure 6: Organigramme équipe logiciel Monsieur Sébastien BARRE, est responsable du développement logiciel dans le service Recherche et Développement. L’équipe logiciel travaille les applicatifs et le système d’exploitation des équipements que nous développons. Ces matériels sont destinés à être commercialisés via l’intégration dans les produits et services fournis par SDEL contrôle commande. Par exemple lors de la vente d’armoires de contrôle commande ou lors de l’installation d’un poste électrique. Figure 7: DigiBOX, calculateur SDELCC dédié aux applications des postes électriques Applications : Système de supervision de poste Passerelle de téléconduite Synoptique de poste local Consignateur d’état Concrètement -> embarqué, linux, yocto En tant qu’apprenti j’ai pour rôle de contribuer au développement de nos logiciels. Je suis aussi mobilisé pour tester et étudier l’intégration de nouvelles technologies sur les produits. Mon travail comprends l’étude, l’analyse de données, la création de prototypes, la mise en place de tests et l’assistance aux techniciens et aux ingénieurs dans leur travail. Je suis également amené à rédiger de la documentation et la communiquer les résultats de mes travaux. J’ai l’occasion de travailler sur des projets concrets et de développer mes compétences dans le domaine de l’informatique embarquée principalement. Avec ma montée en compétences au fur et à mesure de ma formation, je suis maintenant amené à travailler sur des projets plus complexes et à diriger le présent projet. 1.2 Contexte du projet Le CAP4000 est une base logicielle modulaire qui est utilisée par tous les équipements développés par le service Recherche et Développement. C’est une application qui fonctionne en permanence. Elle gère les principales fonctionnalités de nos produits en s’interfaçant avec différents composants tels que : Système d’exploitation (réseau, alimentation, processus …) Périphériques (affichage, cartes d’extensions, clé usb, …) Moteur d’automatisme Panneau frontal (leds, boutons, …) Nos équipements sont hautement configurables. Pour simplifier l’utilisation par nos client, l’administration des équipements doit pouvoir être effectuée à distance. Ces tâches sont réalisées grâce à aux outils de configuration historiques qui sont inclus dans une application de bureau windows. Figure 8: Utilitaire de configuration Depuis 2020 l’équipe logiciel travaille sur le remplacement de cette application. L’objectif est de moderniser nos outils pour simplifier et intégrer des contraintes de cybersécurité plus strictes dans les processus de gestion et de maintenance des équipements. Pour moderniser les principes d’accès aux ressources d’un calculateur, une API de type REST à été implémentée dans le logiciel CAP4000. L’objectif est de mettre à disposition un système de dialogue fiable et sécurisé avec un équipement dans le but de créer des outils basés sur les technologies Web pour les produits SDELCC. API (Interface de Programmation d’Application) Les API pour Application Programming Interface permettent à 2 ordinateur de communiquer entre eux. Imaginez cela comme l’utilisation d’un site web, mais au lieu de cliquer sur des boutons, vous écrivez du code pour demander explicitement des données à un serveur. Une API dite RESTful, suit un ensemble de règles et contraintes imposées par l’architecture REST (REpresentational State Transfer). Une API REST fonctionne sur le protocole HTTP (Hypertext Transfer Protocol). Elle mets à disposition des ressources (données) accessible par des URL uniques. Une requête permet d’accéder aux ressources. Chaque requête (GET, POST, PATCH, DELETE) respecte le principe CRUD (Create, Read, Update, Delete) et suit un format spécifique : méthode, URL, en-têtes (métadonnées) et corps (données). Un client effectue une requête sur le serveur via une URL, le serveur exécute du code (généralement accède à une base de données), formate les données dans une réponse avec un code d’état (indiquant le succès, une erreur client ou serveur). Les API REST sont stateless, ce qui signifie que chaque interaction est indépendante des précédentes, rendant les applications prévisibles et fiables. Les API de type REST sont devenues le standard de facto pour le développement d’API web depuis le début des années 2000. #fig-rest-api-flow-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-rest-api-flow-mermaid .error-icon{fill:#a44141;}#fig-rest-api-flow-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-rest-api-flow-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-rest-api-flow-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-rest-api-flow-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-rest-api-flow-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-rest-api-flow-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-rest-api-flow-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-rest-api-flow-mermaid .marker.cross{stroke:lightgrey;}#fig-rest-api-flow-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-rest-api-flow-mermaid .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#fig-rest-api-flow-mermaid .cluster-label text{fill:#F9FFFE;}#fig-rest-api-flow-mermaid .cluster-label span,#fig-rest-api-flow-mermaid p{color:#F9FFFE;}#fig-rest-api-flow-mermaid .label text,#fig-rest-api-flow-mermaid span,#fig-rest-api-flow-mermaid p{fill:#ccc;color:#ccc;}#fig-rest-api-flow-mermaid .node rect,#fig-rest-api-flow-mermaid .node circle,#fig-rest-api-flow-mermaid .node ellipse,#fig-rest-api-flow-mermaid .node polygon,#fig-rest-api-flow-mermaid .node path{fill:#1f2020;stroke:#81B1DB;stroke-width:1px;}#fig-rest-api-flow-mermaid .flowchart-label text{text-anchor:middle;}#fig-rest-api-flow-mermaid .node .label{text-align:center;}#fig-rest-api-flow-mermaid .node.clickable{cursor:pointer;}#fig-rest-api-flow-mermaid .arrowheadPath{fill:lightgrey;}#fig-rest-api-flow-mermaid .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#fig-rest-api-flow-mermaid .flowchart-link{stroke:lightgrey;fill:none;}#fig-rest-api-flow-mermaid .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#fig-rest-api-flow-mermaid .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#fig-rest-api-flow-mermaid .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#fig-rest-api-flow-mermaid .cluster text{fill:#F9FFFE;}#fig-rest-api-flow-mermaid .cluster span,#fig-rest-api-flow-mermaid p{color:#F9FFFE;}#fig-rest-api-flow-mermaid div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#fig-rest-api-flow-mermaid .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#fig-rest-api-flow-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}OdrinateurÉquipementNavigateurCAP4000VisiteRequêteGET/POST/PUT/DELETERéponseJSONLit et écritExecuteApplication webAPIrestModule XBase de donnéesProcéduresUtilisateur Figure 9: Principe d’utilisation de l’API REST du CAP4000 Cette API à pour principal objectif de permettre la configuration et la gestion des équipements à distance. Elle permet de récupérer des informations sur l’état de l’équipement et de ses composants. Elle permet également la modification la configuration de l’équipement et le déclenchement de procédures comme le redémarrage. Par exemple, il est possible de récupérer la version du logiciel installé sur l’équipement en exécutant la requête HTTP GET suivante : http://<ip-equipement>/api/v1/identification. identification { "CAP4000": { "IndiceValidation": 0, "Nom": "DigiBOX", "VersionCorrectif": 1, "VersionMajeure": 6, "VersionMineure": 0, "VersionProtocole": 2 }, "OS": { "Nom": "digibox-debug-os", "VersionCorrectif": 5, "VersionMajeure": 0, "VersionMineure": 4 }, "Produit": { "Nom": "digibox-debug", "VersionCorrectif": 1, "VersionMajeure": 2, "VersionMineure": 0 } } Une expérimentation d’application à été développée. Cette application est disponible pour deux plateformes : Windows et Web. Elle dialogue avec l’API REST du CAP4000. L’application a été développée avec le framework Qt. C’est un framework que nous utilisons déjà sur d’autres projets. Il a donc été choisi afin de capitaliser sur l’expertise du service. L’application est découpée en modules qui représentent une fonctionnalité dans l’interface (debug, configuration réseau, import de configuration, …). Qt (prononcé “cute”) Qt est un framework de développement d’applications multi-plateformes basé sur le language C++. Il permet de créer des logiciels avec une interface utilisateur graphique. Les applications peuvent être exécutées sur différents systèmes d’exploitation tels que Windows, macOS, Linux, etc., mais aussi dans un navigateur sans nécessiter de modifications majeures du code source. Pour fonctionner dans un navigateur, une application Qt doit être compilée au format WebAssembly. WebAssembly est un format binaire qui permet d’exécuter du code bas niveau de manière portable et sécurisée dans les navigateurs web modernes. Il est conçu pour compléter les langages de programmation traditionnels utilisés sur le web, tels que JavaScript, en offrant des performances plus élevées pour les applications web. Cette application expérimentale est destinée à être utilisée en interne par les collaborateurs de SDEL Contrôle Commande ainsi que certains clients qui souhaitent l’évaluer. Figure 10: Interface web du produit DigiBox (menu principal) On retrouve des fonctionnalités comme : Configuration des interfaces réseau Gestion des certificats État des cartes entrées/sorties Affichage des informations de débogage Gestion de l’alimentation Import de configuration … L’application gère les utilisateurs du système d’exploitation et les rôles du CAP4000. Ainsi, il est possible de restreindre l’accès à certaines fonctionnalités. Par exemple, un utilisateur avec le rôle “observateur” ne pourra pas accéder à la configuration réseau de l’équipement. L’architecture du cette solution peut être représentée par la pile technologique suivante : Table 1: Pile technologique Frontend API Backend Qt API REST CAP4000 Pile technologique D’abord c’est quoi ? Une pile technologique peut être découpée en trois catégories : Frontend La couche frontend inclus les outils requis pour construire une interface homme machine pour les utilisateurs finaux. Elle peut être développée pour fonctionner dans un navigateur internet ou sur un système d’exploitation (windows, linux, macos, android, ios, …). Backend La couche backend inclus un runtime (environnement d’exécution) serveur généralement accompagné d’une base de données. Elle permet de gérer les données et la logique métier de l’application (gestion des utilisateurs, des droits, fonctionnalités …). API La couche APIs permet de connecter le frontend et le backend (REST, GraphQL). Elle gère aussi l’intégration avec des services tiers (paiement, gestion des identités, messagerie, …) L’application web est accessible localement en accédant à un équipement via son adresse ip depuis un navigateur internet. Elle est compatible avec les navigateurs modernes (Chrome, Firefox, Edge, Safari, …). L’application est donc distribuée directement dans le système d’exploitation d’un équipement et ne nécessite aucune installation sur les postes de travail de nos clients. Chaque type d’équipement dispose de sa propre version de l’application intégrant plus ou moins de fonctionnalités. Dans la suite du rapport, nous allons présenter les différentes étapes de la réalisation de ce projet. Nous commencerons par présenter la problématique et les objectifs du projet. Nous détaillerons ensuite la méthodologie utilisée pour réaliser le projet. Enfin, nous présenterons les résultats obtenus et les perspectives pour la suite du projet. Parler des licenses libres / open sources https://www.diatem.net/les-licences-open-source/ 2 Problématique Aujourd’hui, nous souhaitons intégrer l’application web sur l’ensemble des produits que nous commercialisons. En informatique, les logiciels sont distribués sous plusieurs types de licenses. Les licenses open-sources permettent aux développeurs de les utiliser, de les modifier et de les redistribuer en suivant certaines règles. Il existe beaucoup de licences open-sources et chacune dispose de ses propres règles d’utilisation. Il est important de prendre en compte ces conditions avant de commercialiser un produit qui intègre un composant open-source. Le framework Qt est la propriété de The Qt Company. Il est distribué sous plusieurs licenses. Jusqu’ici nous avons utilisé la version open-source de ce logiciel pour commercialiser nos produits. Cependant cette version ne permet pas de distribuer une application au format WebAssembly sans également distribuer le code source de celle-ci. La direction de VINCI ne souhaite pas publier les sources de ses applications. Nous avons également écarté la possibilité de payer des licenses commerciales. La commercialisation des produits intégrant de l’application web sous sa forme actuelle n’est donc pas envisageable. Le présent projet vise à développer une nouvelle application en se basant sur une autre technologie. Nous souhaitons une interface graphique web reposant sur le dialogue avec un calculateur via l’API REST. Nous souhaitons utiliser un framework open source et entièrement gratuit, adapté aux besoins de l’embarqué. Ce projet permettra également d’explorer et monter en compétences sur les technologies web ainsi que consolider notre solution en utilisant des technologies pérennes qui autorisent la diffusion de nos applications sous licence propriétaire. Problématique Comment choisir judicieusement un framework open source pour le développement d’une nouvelle application web intégrée à l’ensemble de la gamme de produits, tout en respectant les contraintes de confidentialité imposées par la direction de l’entreprise et en garantissant la possibilité de diffuser les applications sous licence propriétaire ? Ce projet aura un impact sur les utilisateurs de l’application Qt. Comme cette application était encore en phase expérimentale, seuls les développeurs du service recherche et développement et les intervenants internes divers (test, bureau d’études, etc …) seront impactés. Nos client qui profitent déjà de l’application seront limités à l’utilisation sur la plateforme Windows uniquement. Lorsque la prochaine application sera développée, ils pourront bénéficier d’une mise à niveau vers la nouvelle version système de leur produit. L’application Qt continuera à être développée par Jean-Louis Baudoin. Un autre groupe de travail a réussi à reproduire le fonctionnement de l’application web en explorant des solutions alternatives au WebAssembly. Cela est rendu possible en installant l’application de bureau directement sur les calculateurs et partageant l’environnement de bureau grace aux technologies de type VNC. Cette solution, rapide à mettre en place, restera cependant temporaire en raison de ses faible performances et sera à terme définitivement remplacée définitivement lorsque la future application sera publiée. 3 Buts et Objectifs Choisir un framework Établir une liste de minimum 10 critères permettant la comparaison des frameworks Évaluer et tester au moins trois frameworks alternatifs en fonction la liste de critères Réaliser un prototype (POC) fonctionnel comprenant un menu ainsi que 3 modules Préparer la transition Mettre à niveau la spécification de l’API pour répondre au standard OpenAPI 3 Modifier la méthode d’authentification des requêtes pour simplifier l’implémentation de l’API dans la nouvelle application Changer le système d’authentification afin de garantir la sécurité de l’API Effectuer une semaine d’auto-formation sur le framework choisi Établir une liste ordonnée de modules à porter, à créer ou à supprimer comprenant au minimum les modules existants Développer la nouvelle application web Développer au moins 20 modules Atteindre des performances au moins équivalentes (dégradation maximale de 5%) à l’application actuelle Acquérir les compétences d’un ingénieur débutant Mettre en place une démarche de gestion de projet permettant d’atteindre les buts et objectifs fixés Fournir l’ensemble des livrables demandés par l’ESEO Avoir une note supérieure à 14 aux 3 évaluations PING Bien sûr, voici une proposition de structure alternative pour les objectifs, avec des formulations plus étoffées et professionnelles : 3.1 Objectifs Stratégiques et Opérationnels 3.1.1 Sélectionner un Cadre de Développement Optimal Identifier et choisir un framework adapté aux besoins spécifiques du projet. Élaborer une Liste de Critères de Sélection : Objectif : Développer une liste détaillée d’au moins 10 critères pertinents pour la comparaison des frameworks. Délai : 2 semaines. Description : Inclure des critères tels que la performance, la scalabilité, la facilité d’intégration, le support communautaire, la documentation, et la sécurité. Évaluer et Tester des Frameworks Alternatifs : Objectif : Évaluer au moins trois frameworks alternatifs en fonction de la liste de critères établie. Délai : 4 semaines. Description : Effectuer des tests pratiques pour chaque framework afin de vérifier leur conformité aux critères et documenter les résultats. Développer un Prototype Fonctionnel : Objectif : Réaliser un Proof of Concept (POC) comprenant un menu principal et trois modules fonctionnels. Délai : 6 semaines. Description : Utiliser le framework sélectionné pour développer un prototype démontrant les capacités du framework à répondre aux exigences du projet. 3.1.2 Préparer la Transition Technologique Assurer une transition fluide et sécurisée vers le nouveau framework. Mettre à Niveau la Spécification de l’API : Objectif : Conformer la spécification de l’API au standard OpenAPI 3. Délai : 2 semaines. Description : Revoir et modifier la spécification actuelle pour garantir la compatibilité et les bonnes pratiques. Modifier le Système d’Authentification : Objectif : Mettre en place un système d’authentification robuste pour garantir la sécurité de l’API. Délai : 3 semaines. Description : Intégrer des méthodes modernes d’authentification (par exemple, OAuth2) pour renforcer la sécurité et simplifier l’implémentation. Former l’Équipe sur le Nouveau Framework : Objectif : Effectuer une semaine d’auto-formation pour l’ensemble de l’équipe sur le framework sélectionné. Délai : 1 semaine. Description : Utiliser des ressources en ligne et des formations internes pour acquérir les compétences nécessaires. Établir une Liste de Modules à Migrer : Objectif : Créer une liste ordonnée des modules existants à porter, créer ou supprimer. Délai : 2 semaines. Description : Prioriser les modules en fonction de leur importance et de leur complexité, en incluant une évaluation des efforts requis pour chaque module. Minimum viable product : Liste modules 3.1.3 Développer la Nouvelle Application Web Concevoir et déployer une nouvelle application web performante et fonctionnelle. Développer les Modules Nécessaires : Objectif : Concevoir et développer au moins 20 modules fonctionnels pour la nouvelle application. Délai : 3 mois. Description : Chaque module doit être testé et validé selon les critères de qualité et de performance. Optimiser les Performances de l’Application : Objectif : Assurer que les performances de la nouvelle application ne se dégradent pas de plus de 5% par rapport à l’application actuelle. Délai : 1 mois. Description : Effectuer des tests de performance réguliers et optimiser le code et l’infrastructure en conséquence. 3.1.4 Objectif 4 : Développer les Compétences en Gestion de Projet et Techniques But : Acquérir et démontrer les compétences nécessaires pour réussir dans le cadre du projet. Mettre en Place une Démarche de Gestion de Projet : Objectif : Développer une approche structurée de gestion de projet pour atteindre les objectifs fixés. Délai : 1 semaine. Description : Utiliser des outils de gestion de projet (comme Jira ou Trello) pour suivre les tâches, les progrès et les délais. Fournir les Livrables Requis : Objectif : Produire et livrer tous les livrables exigés par l’ESEO. Délai : Selon les échéances établies. Description : Assurer la qualité et la complétude de tous les documents et livrables. Obtenir des Notes Élevées aux Évaluations PING : Objectif : Obtenir une note supérieure à 14/20 aux trois évaluations PING. Délai : Prochaine session d’évaluations. Description : Préparer et réviser les matières évaluées pour garantir une performance optimale. 4 Démarche Comment fonctionne le service R&D de base outils de gestion de projet Redmine Fiche de développement Notes Outils - Gestion de projet - Gestion de version - Environnement de développement - Produits de développement - Langages de programmation 4.1 Démarche générale La démarché générale du projet est définie par le présent document. Ce document défini les buts et objectif attendus. Il établis également un plan d’action pour les atteindre. Il mets en place un processus de communication pour garantir la circulation de l’information. Enfin, il identifie les risques et problèmes potentiels qui pourraient survenir et établi des solutions pour y faire face. 4.2 Méthodologie, techniques et technologies Le développement logiciel suit plusieurs étapes essentielles pour assurer la création et le bon fonctionnement d’un logiciel. Analyse des besoins : Identifier et définir les besoins des utilisateurs et les objectifs du logiciel. Les exigences fonctionnelles et non fonctionnelles sont spécifiées, ainsi que les contraintes du projet. Conception : Créer une architecture logicielle en se basant sur l’analyse des besoins. Cela implique la création de diagrammes, de schémas et de modèles qui servent de guide pour la réalisation du logiciel. Tests : Vérifier la qualité et la conformité du logiciel. Des tests unitaires, d’intégration et de validation sont réalisés pour détecter et corriger les éventuelles erreurs et bugs. Intégration : Assembler les différentes parties du logiciel en un ensemble fonctionnel et cohérent. Cela inclut l’ajout de fonctionnalités supplémentaires et l’optimisation des performances. Déploiement : Rendre le logiciel disponible aux utilisateurs finaux. Cela peut impliquer l’installation sur des serveurs, la distribution de fichiers d’installation ou la mise à disposition sur des plateformes en ligne. Maintenance : Maintenir le logiciel en état de fonctionnement. Les erreurs sont corrigées, des mises à jour sont effectuées, des nouvelles fonctionnalités peuvent être ajoutées et des améliorations sont apportées pour répondre aux besoins changeants des utilisateurs. Dans le cadre de ce projet, une approche de gestion de projet agile sera utilisée. Cette approche permettra une meilleure gestion des changements et des imprévus, tout en limitant l’effet tunnel. Méthodologie agile La méthodologie agile est une approche de gestion de projet qui se caractérise par sa flexibilité, sa collaboration continue avec les parties prenantes et sa capacité à s’adapter aux changements tout au long du cycle de développement. Les méthodologies agiles mettent l’accent sur la livraison itérative et incrémentale du produit, favorisant des cycles de développement courts et des retours fréquents des utilisateurs. L’agilité est souvent utilisée dans le développement logiciel, mais elle peut également être appliquée à d’autres domaines. Pour plus d’informations sur les méthodologies agiles, voir https://www.atlassian.com/fr/agile. La phase de développement sera découpée en sprints. Chaque période entreprise (2 à 4 semaines) intégrera un unique sprint. Cette segmentation permettra d’effectuer des contrôles réguliers de l’avancement et favorisera un dialogue continu. Sprint Un sprint en développement agile est un cycle de travail itératif et incrémental qui permet à une équipe de développer et de livrer des fonctionnalités de manière régulière, tout en restant flexible et adaptative aux changements et aux retours client. Un sprint intègre généralement les étapes suivantes : Planification des tâches en début du sprint Développement et test continu Revues et rétrospectives en fin de sprint Livraison logicielle potentielle Le projet utilisera un backlog pour recueillir, organiser et hiérarchiser l’ensemble des travaux à réaliser dans le cadre du projet. Chaque fonctionnalité à développer sera spécifiée en une user story et ajoutée comme ticket dans le backlog. Une user story est une technique de description des besoins du client du point de vue de ce dernier. L’objectif de chaque user story est de décrire une fonctionnalité du logiciel de manière simple et compréhensible, tout en se concentrant sur la valeur apportée à l’utilisateur final. Chaque user story pourra dépendre de plusieurs tâches de développements, qui seront rattachés à ce ticket. Au début de chaque sprint, le backlog devra être complété en ajoutant les tâches à traiter pour les trois semaines à venir. Si nécessaire, une modélisation de la fonctionnalité à implémenter pourra être réalisée pour répondre aux spécifications établies précédemment. Chaque sprint devra intégrer la spécification, le développement, les tests et la documentation d’une ou plusieurs user story. Un réunion sera effectué à la fin de chaque sprint afin de suivre l’état d’avancement et d’exercer un esprit critique. Le but de ces réunions sera de replacer les tickets qui n’ont pas pu être traités et d’effectuer un bilan de ce qui à marché et ce qui n’a pas fonctionné pour mieux organiser les sprints futurs. Ces réunions seront basés sur un unique document de suivi, qui sera mis à jour durant chaque sprint. L’utilisation d’UML sera privilégiée pour la modélisation des différents aspects du projet, tels que les cas d’utilisation, les diagrammes de classes, les diagrammes de séquence, etc. Cela permettra de décrire plus précisément les besoins du projet et de mieux visualiser les différentes parties impliquées. 4.3 Analyse des risques Table 2: SWOT (Strengths Weaknesses Opportunities Threats) Atouts Handicapes Interne Forces Maintenir la confidentialité du code source Economies de coûts à long terme Étendre et renforcer les compétences techniques de l’équipe de développement Faiblesses Coûteux en termes de temps et de ressources Peut ne pas répondre aux besoins Difficultés à apprendre un nouveau framework Externe Opportunités Nouvelles opportunités de développement pour l’entreprise Élargir son champ d’expertise Bénéficier de l’expertise de la communauté open source Menaces Coûts de licence prohibitifs ou des restrictions d’utilisation Difficulté à trouver une alternative qui soit compatible avec la cible embarquée Retards dans le développement en raison de l’apprentissage d’un nouveau framework Manque de compétences sur le nouveau framework et les technologies associées Établir un calendrier pour l’apprentissage et la mise en œuvre du nouveau framework Offrir une formation à l’équipe de développement pour aider à l’apprentissage du nouveau framework Mobiliser des ressources supplémentaires pour maintenir les délais Communauté du framework limitée Effectuer une recherche sur les communautés de développeurs pour identifier les frameworks les plus populaires Évaluer la taille de la communauté et la fréquence des mises à jour Évaluer la qualité de la documentation et des exemples Manque de ressources Augmenter l’équipe de développement pour combler les manques Étendre les délais du projet Réduire les fonctionnalités à développer Incompatibilité avec la cible embarquée Examiner les exigences de la cible embarquée et les spécifications de l’alternative Effectuer des tests de compatibilité pour vérifier si l’alternative répond aux exigences de la cible embarquée Résistance au changement Communiquer sur les avantages du nouveau framework choisi Mettre en place une formation pour les développeurs qui ne connaissent pas le nouveau framework Difficulté à trouver une alternative viable Effectuer une analyse des besoins pour identifier les caractéristiques essentielles que l’alternative doit posséder Effectuer une recherche sur les coûts des licences pour les différentes alternatives Quadrant chart risk analysis 4.4 Acteurs Table 3: Acteurs Acteur Rôle Description Joshua Jourdam Chef de projet, Développeur Fourni le livrable du projet. Conduit et pilote le projet. Anime les différentes réunions. Principal développeur. Sébastien Barré Sponsor du projet, Client Responsable global du projet et est un soutien pour le chef de projet. Prend les décisions importantes et arbitre entre deux choix, notamment en situation de crise. Détermine les attendus du projet et les exigences liées. Validera la conformité du livrable à ses attentes et exigences. Opérateurs, testeurs, développeurs Utilisateurs finaux Personnes qui vont utiliser le produit ou le service au quotidien. Exprime leur soutien ou leur mécontentement vis à vis du projet. Jean-Louis Baudoin Utilisateur clé Référent métier, développeur de l’application Qt. Sera le principal interlocuteur pour collecter des informations sur l’application actuelle. David Dupond Utilisateur clé Référent licenses, pourra valider la license d’utilisation du nouvel outil. Lucas Cecillon Utilisateur clé Référent cybersécurité, pourra être consulté sur les problématiques de sécurité de l’application et de l’API. Stagiaires Support Peuvent intervenir en renfort sur le projet, notamment lors des périodes estivales. 4.5 Lotissements %%| label: fig-work-breakdown-structure %%| fig-cap: WBS (Work Breakdown Structure) %%| file: ./graphics/wbs.mmd 4.6 Planning prévisionnel #fig-forecast-schedule-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-forecast-schedule-mermaid .error-icon{fill:#a44141;}#fig-forecast-schedule-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-forecast-schedule-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-forecast-schedule-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-forecast-schedule-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-forecast-schedule-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-forecast-schedule-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-forecast-schedule-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-forecast-schedule-mermaid .marker.cross{stroke:lightgrey;}#fig-forecast-schedule-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-forecast-schedule-mermaid .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-forecast-schedule-mermaid .exclude-range{fill:hsl(52.9411764706, 28.813559322%, 48.431372549%);}#fig-forecast-schedule-mermaid .section{stroke:none;opacity:0.2;}#fig-forecast-schedule-mermaid .section0{fill:hsl(52.9411764706, 28.813559322%, 58.431372549%);}#fig-forecast-schedule-mermaid .section2{fill:#EAE8D9;}#fig-forecast-schedule-mermaid .section1,#fig-forecast-schedule-mermaid .section3{fill:#333;opacity:0.2;}#fig-forecast-schedule-mermaid .sectionTitle0{fill:#F9FFFE;}#fig-forecast-schedule-mermaid .sectionTitle1{fill:#F9FFFE;}#fig-forecast-schedule-mermaid .sectionTitle2{fill:#F9FFFE;}#fig-forecast-schedule-mermaid .sectionTitle3{fill:#F9FFFE;}#fig-forecast-schedule-mermaid .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-forecast-schedule-mermaid .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#fig-forecast-schedule-mermaid .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#ccc;}#fig-forecast-schedule-mermaid .grid path{stroke-width:0;}#fig-forecast-schedule-mermaid .today{fill:none;stroke:#DB5757;stroke-width:2px;}#fig-forecast-schedule-mermaid .task{stroke-width:2;}#fig-forecast-schedule-mermaid .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-forecast-schedule-mermaid .taskTextOutsideRight{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-forecast-schedule-mermaid .taskTextOutsideLeft{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);text-anchor:end;}#fig-forecast-schedule-mermaid .task.clickable{cursor:pointer;}#fig-forecast-schedule-mermaid .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-forecast-schedule-mermaid .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-forecast-schedule-mermaid .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-forecast-schedule-mermaid .taskText0,#fig-forecast-schedule-mermaid .taskText1,#fig-forecast-schedule-mermaid .taskText2,#fig-forecast-schedule-mermaid .taskText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);}#fig-forecast-schedule-mermaid .task0,#fig-forecast-schedule-mermaid .task1,#fig-forecast-schedule-mermaid .task2,#fig-forecast-schedule-mermaid .task3{fill:hsl(180, 1.5873015873%, 35.3529411765%);stroke:#ffffff;}#fig-forecast-schedule-mermaid .taskTextOutside0,#fig-forecast-schedule-mermaid .taskTextOutside2{fill:lightgrey;}#fig-forecast-schedule-mermaid .taskTextOutside1,#fig-forecast-schedule-mermaid .taskTextOutside3{fill:lightgrey;}#fig-forecast-schedule-mermaid .active0,#fig-forecast-schedule-mermaid .active1,#fig-forecast-schedule-mermaid .active2,#fig-forecast-schedule-mermaid .active3{fill:#81B1DB;stroke:#ffffff;}#fig-forecast-schedule-mermaid .activeText0,#fig-forecast-schedule-mermaid .activeText1,#fig-forecast-schedule-mermaid .activeText2,#fig-forecast-schedule-mermaid .activeText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-forecast-schedule-mermaid .done0,#fig-forecast-schedule-mermaid .done1,#fig-forecast-schedule-mermaid .done2,#fig-forecast-schedule-mermaid .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#fig-forecast-schedule-mermaid .doneText0,#fig-forecast-schedule-mermaid .doneText1,#fig-forecast-schedule-mermaid .doneText2,#fig-forecast-schedule-mermaid .doneText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-forecast-schedule-mermaid .crit0,#fig-forecast-schedule-mermaid .crit1,#fig-forecast-schedule-mermaid .crit2,#fig-forecast-schedule-mermaid .crit3{stroke:#E83737;fill:#E83737;stroke-width:2;}#fig-forecast-schedule-mermaid .activeCrit0,#fig-forecast-schedule-mermaid .activeCrit1,#fig-forecast-schedule-mermaid .activeCrit2,#fig-forecast-schedule-mermaid .activeCrit3{stroke:#E83737;fill:#81B1DB;stroke-width:2;}#fig-forecast-schedule-mermaid .doneCrit0,#fig-forecast-schedule-mermaid .doneCrit1,#fig-forecast-schedule-mermaid .doneCrit2,#fig-forecast-schedule-mermaid .doneCrit3{stroke:#E83737;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#fig-forecast-schedule-mermaid .milestone{transform:rotate(45deg) scale(0.8,0.8);}#fig-forecast-schedule-mermaid .milestoneText{font-style:italic;}#fig-forecast-schedule-mermaid .doneCritText0,#fig-forecast-schedule-mermaid .doneCritText1,#fig-forecast-schedule-mermaid .doneCritText2,#fig-forecast-schedule-mermaid .doneCritText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-forecast-schedule-mermaid .activeCritText0,#fig-forecast-schedule-mermaid .activeCritText1,#fig-forecast-schedule-mermaid .activeCritText2,#fig-forecast-schedule-mermaid .activeCritText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-forecast-schedule-mermaid .titleText{text-anchor:middle;font-size:18px;fill:#ccc;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-forecast-schedule-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 01/06 01/07 01/08 01/09 01/10 01/11 01/12 01/01 01/02 01/03 01/04 01/05 01/06 01/07 01/08 01/09Réunion de lancement Collecte informations Rapport avant projet Réunion premier choix OpenAPI Soutenance avant projet Authentification FormationPOC Réunion de validation Feuille de route Sprints Rapport intermédiaire Soutenance intermédiaire Réunion de clôture Rapport final Soutenance final EvaluationPréparationDéveloppementEseo Figure 11: Diagramme de GANTT prévisionnel 4.7 Planning effectif #fig-actual-schedule-mermaid{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#fig-actual-schedule-mermaid .error-icon{fill:#a44141;}#fig-actual-schedule-mermaid .error-text{fill:#ddd;stroke:#ddd;}#fig-actual-schedule-mermaid .edge-thickness-normal{stroke-width:2px;}#fig-actual-schedule-mermaid .edge-thickness-thick{stroke-width:3.5px;}#fig-actual-schedule-mermaid .edge-pattern-solid{stroke-dasharray:0;}#fig-actual-schedule-mermaid .edge-pattern-dashed{stroke-dasharray:3;}#fig-actual-schedule-mermaid .edge-pattern-dotted{stroke-dasharray:2;}#fig-actual-schedule-mermaid .marker{fill:lightgrey;stroke:lightgrey;}#fig-actual-schedule-mermaid .marker.cross{stroke:lightgrey;}#fig-actual-schedule-mermaid svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#fig-actual-schedule-mermaid .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-actual-schedule-mermaid .exclude-range{fill:hsl(52.9411764706, 28.813559322%, 48.431372549%);}#fig-actual-schedule-mermaid .section{stroke:none;opacity:0.2;}#fig-actual-schedule-mermaid .section0{fill:hsl(52.9411764706, 28.813559322%, 58.431372549%);}#fig-actual-schedule-mermaid .section2{fill:#EAE8D9;}#fig-actual-schedule-mermaid .section1,#fig-actual-schedule-mermaid .section3{fill:#333;opacity:0.2;}#fig-actual-schedule-mermaid .sectionTitle0{fill:#F9FFFE;}#fig-actual-schedule-mermaid .sectionTitle1{fill:#F9FFFE;}#fig-actual-schedule-mermaid .sectionTitle2{fill:#F9FFFE;}#fig-actual-schedule-mermaid .sectionTitle3{fill:#F9FFFE;}#fig-actual-schedule-mermaid .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-actual-schedule-mermaid .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#fig-actual-schedule-mermaid .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#ccc;}#fig-actual-schedule-mermaid .grid path{stroke-width:0;}#fig-actual-schedule-mermaid .today{fill:none;stroke:#DB5757;stroke-width:2px;}#fig-actual-schedule-mermaid .task{stroke-width:2;}#fig-actual-schedule-mermaid .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-actual-schedule-mermaid .taskTextOutsideRight{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-actual-schedule-mermaid .taskTextOutsideLeft{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);text-anchor:end;}#fig-actual-schedule-mermaid .task.clickable{cursor:pointer;}#fig-actual-schedule-mermaid .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-actual-schedule-mermaid .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-actual-schedule-mermaid .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#fig-actual-schedule-mermaid .taskText0,#fig-actual-schedule-mermaid .taskText1,#fig-actual-schedule-mermaid .taskText2,#fig-actual-schedule-mermaid .taskText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%);}#fig-actual-schedule-mermaid .task0,#fig-actual-schedule-mermaid .task1,#fig-actual-schedule-mermaid .task2,#fig-actual-schedule-mermaid .task3{fill:hsl(180, 1.5873015873%, 35.3529411765%);stroke:#ffffff;}#fig-actual-schedule-mermaid .taskTextOutside0,#fig-actual-schedule-mermaid .taskTextOutside2{fill:lightgrey;}#fig-actual-schedule-mermaid .taskTextOutside1,#fig-actual-schedule-mermaid .taskTextOutside3{fill:lightgrey;}#fig-actual-schedule-mermaid .active0,#fig-actual-schedule-mermaid .active1,#fig-actual-schedule-mermaid .active2,#fig-actual-schedule-mermaid .active3{fill:#81B1DB;stroke:#ffffff;}#fig-actual-schedule-mermaid .activeText0,#fig-actual-schedule-mermaid .activeText1,#fig-actual-schedule-mermaid .activeText2,#fig-actual-schedule-mermaid .activeText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-actual-schedule-mermaid .done0,#fig-actual-schedule-mermaid .done1,#fig-actual-schedule-mermaid .done2,#fig-actual-schedule-mermaid .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#fig-actual-schedule-mermaid .doneText0,#fig-actual-schedule-mermaid .doneText1,#fig-actual-schedule-mermaid .doneText2,#fig-actual-schedule-mermaid .doneText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-actual-schedule-mermaid .crit0,#fig-actual-schedule-mermaid .crit1,#fig-actual-schedule-mermaid .crit2,#fig-actual-schedule-mermaid .crit3{stroke:#E83737;fill:#E83737;stroke-width:2;}#fig-actual-schedule-mermaid .activeCrit0,#fig-actual-schedule-mermaid .activeCrit1,#fig-actual-schedule-mermaid .activeCrit2,#fig-actual-schedule-mermaid .activeCrit3{stroke:#E83737;fill:#81B1DB;stroke-width:2;}#fig-actual-schedule-mermaid .doneCrit0,#fig-actual-schedule-mermaid .doneCrit1,#fig-actual-schedule-mermaid .doneCrit2,#fig-actual-schedule-mermaid .doneCrit3{stroke:#E83737;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#fig-actual-schedule-mermaid .milestone{transform:rotate(45deg) scale(0.8,0.8);}#fig-actual-schedule-mermaid .milestoneText{font-style:italic;}#fig-actual-schedule-mermaid .doneCritText0,#fig-actual-schedule-mermaid .doneCritText1,#fig-actual-schedule-mermaid .doneCritText2,#fig-actual-schedule-mermaid .doneCritText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-actual-schedule-mermaid .activeCritText0,#fig-actual-schedule-mermaid .activeCritText1,#fig-actual-schedule-mermaid .activeCritText2,#fig-actual-schedule-mermaid .activeCritText3{fill:hsl(28.5714285714, 17.3553719008%, 86.2745098039%)!important;}#fig-actual-schedule-mermaid .titleText{text-anchor:middle;font-size:18px;fill:#ccc;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#fig-actual-schedule-mermaid :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 01/06 01/07 01/08 01/09 01/10 01/11 01/12 01/01 01/02 01/03 01/04 01/05 01/06 01/07 01/08 01/09Réunion de lancement Recherche technologies Rapport avant projet Soutenance avant projet POC Spécification API Spécification fonctionelle Présentation des frameworks Présentation application React / Choix définitif Création du projet Sprint 1 Point authentification Authentification Point stratégie de tests Validation specification API Fiche de développement V1 Test déploiement sur cible Sprint 2 Sprint 3 Soutenance intermédiaire Sprint 4 Formation React Introduction plateforme de développementSprint 5 Rapport final Soutenance finale EvaluationPréparationDéveloppementEseo Figure 12: Diagramme de GANTT effectif 4.7.1 Jalons Réunion de lancement : Cadre le projet, enjeux, objectifs, finalité, jalons projet, risques identifiés, calendrier projet, … Réunion premier choix : Choix du framework pour commencer le POC Réunion de validation : Validation définitive du choix du framework, planification des étapes de développement Réunion en début de sprint : Tri, organisation, revue des tâches à réaliser Réunion de fin de sprint: Bilan, présentation des tâches réalisés, revue des spécification, replanification des tâches non réalisées, … Réunion de clôture : Fin du projet, assure une transition pour la maintenance et l’exploitation du projet 4.7.2 Livrables Document de comparaison des frameworks avec une évaluation quantitative de chaque critère, basée sur une analyse détaillée. Document de spécification, détaillant les fonctionnalités, les exigences système, les ressources requises et les performances attendues. Prototype (POC) fonctionnel de l’interface web, respectant toutes les spécifications documentées. Feuille de route pour la mise en place du framework, détaillant les étapes à suivre pour la pour le développement des fonctionnalités, les ressources requises et les délais. Documentation développeur qui comprends un guide de démarrage et les bonnes pratiques de développement. Documentation utilisateur qui comprends un guide d’utilisation et les bonnes pratiques d’utilisation. Rapports et soutenances de projet. 4.8 Budget La durée du projet PING est estimée à 500 heures minimum. Ce projet devrait nécessiter plus de ressources. Le temps total nécessaire à la réalisation du projet est difficilement quantifiable pour le moment. Étant donné que le projet est cadré pour une seule personne, le coût peut être calculé en utilisant le tarif horaire du salaire brut annuel moyen d’un ingénieur débutant. Cela représente environ 10 000 €. Des coûts d’intervention de développement externes supplémentaires ponctuels peuvent s’ajouter, mais ils sont plus difficiles à chiffrer. La mobilisation de certains membres de l’équipe logiciel lors des réunions peut également être prise en compte. 5 Résultats 5.1 Evaluation des technologies du marché La première phase du projet visait à trouver une technologie alternative au framework Qt pour développer des application pour la plateforme web. Pour cela, j’ai établi une liste de critères permettant d’évaluer chaque solution. Besoins développement Besoins fonctionnels Langage de programmation Communauté et support Proximité avec l’existant Date de sortie Documentation Évolutivité Licence Outils Patron de conception Plateformes Popularité Possibles freins J’ai identifié l’ensemble des technologies qui permettent de développer des application pour la plateforme Web. Ces technologies peuvent être regroupées en 2 catégories, natif et multi-plateforme. La première catégorie comprends l’ensemble des frameworks basés sur le langage JavaScript. La seconde réuni quand à elle des solutions plus diverses qui ce basent sur différent langages comme le C#, le Dart ou le C++. Ces technologies peuvent permettre de cibler plusieurs plateformes (web, bureau, mobile) avec une base de code unique. Ce premier découpage m’a amener à tester 5 solutions. Natif : React Vue Angular Multi-plateforme : Flutter Uno platform J’ai établi une procédure de test unique. L’objectif était de comprendre le fonctionnement basique et l’architecture des frameworks ainsi que les langages sur lesquels ils sont basés. Le test consistait à réaliser une page affichant des données reçues par l’API REST et un formulaire permettant de modifier le nom d’hôte de l’équipement. A partir de cette petite étude, j’ai conclu que les frameworks multi-plateformes sont des solution moins adaptés à notre besoin. Elle sont plus complexes et n’ont pas une intégration complète avec le fonctionnalités d’un navigateur web. Les solutions natives semblaient plus simples à utiliser. La prochaine étape consistait à réaliser un POC plus complet qui intègre les fonctionnalités de certains modules de l’application Qt. J’ai opté pour l’utilisation de React, le framework les plus largement utilisé. J’ai supervisé activement la période de stage de Romain LeDivenah, qui a pris en charge la réalisation de ce POC. Malgré mon statut de débutant, j’ai pu guider Romain dans la prise en main de React. Au cours du mois de supervision, l’objectif était de développer un prototype fonctionnel, répondant aux critères définis, comprenant un menu ainsi que trois modules distincts. 5.2 Transition 5.2.1 OpenAPI La spécification de l’API est définie dans un document word qui évolue au fur et à mesure de l’ajout de fonctionnalités. Cette documentation peut être améliorée. Il existe des outils spécialisés respectant les standards de l’industrie. Ils permettent de générer la documentation, la modélisation et du code a partir d’un fichier de description. J’ai souhaité intégrer la migration vers une spécification de notre API REST basée sur la norme OpenAPI 3 pour avoir a disposition une spécification qui suis des règles appliquées au marché actuel. Il existe de nombreux outil qui utilisent cette norme que je voulais également intégrer. Le stage de Romain LeDivenah m’a permis de travailler sur d’autres aspects en parallèle comme la spécification de l’api, et l’intégration d’outils. J’ai rédigé la spécification de l’API REST en suivant la norme OpenAPI 3.0.0. J’ai également mis en place l’outil Swagger UI pour mettre à disposition une documentation interactive de l’API à partir de cette spécification. J’ai aussi utilisé OpenAPI Generator pour générer un SDK client en JavaScript. Cet étape permettra de simplifier l’utilisation de l’API REST dans l’application à développer. Enfin le dernier outil que j’ai déployé est Spotlight Prism. C’est un serveur simulé HTTP open source qui permet d’émuler le comportement de notre API à partir d’un jeu d’exemple qui peut être défini dans la spécification. Cet outil permet de tester l’API sans avoir d’équipement à disposition ou de développer la partie graphique avant ou en parallèle de l’intégration d’une nouvelle fonctionnalité dans le CAP4000. Exemple de documentation générée avec Swagger UI 5.2.2 Authentification L’authentification de l’API est basée sur un secret partagé. Cette solution pouvait être utilisé avec l’application Qt car celle-ci était compilée en un format binaire. Cela présente cependant des problématiques majeures, particulièrement dans le contexte du langage JavaScript. Étant un langage interprété, le code source JavaScript est généralement envoyé au client, exposant ainsi le secret partagé au sein du code. Cette exposition représente une menace sérieuse pour la sécurité de l’API, car un utilisateur malveillant pourrait potentiellement accéder au code source, récupérer le secret partagé et compromettre l’authentification. L’utilisation du protocole HTTP (non sécurisé) pour communiquer avec l’API représente un risque supplémentaire. En effet, les données envoyées sur le réseau ne sont pas chiffrées, ce qui permet à un attaquant d’intercepter les requêtes et d’obtenir le secret partagé. La vulnérabilité de cette approche souligne la nécessité de stratégies plus sécurisées, telles que l’utilisation de méthodes d’authentification basées sur des jetons et l’utilisation du protocole HTTPS pour communiquer avec l’API. Lucas CECILLON, référent cybersécurité, a pu travailler sur cette partie en spécifiant et en implémentant un nouveau mécanisme d’authentification basé sur l’utilisation d’un jeton JWT et l’utilisation du protocole HTTPS. Ce mécanisme à également introduit d’autres problématiques comme la gestion des certificats utilisés pour chiffrer la connexion HTTPS sur un équipement. Le protocole HTTP est utilisé pour communiquer avec l’API REST. L’authentification est basée sur un secret partagé. Ce secret est stocké dans le code source de l’application Qt. L’authentification est effectuée avec plusieurs sécurités : Signature des requêtes avec un HMAC (basé sur le secret partagé) Timestamp pour éviter les attaques de rejeu Contrairement à l’IHM Web en QT utilisant WebAssembly (projet compilé puis exécuté directement par le navigateur), React envoie les sources au navigateur (JS, HTML, CSS) pour y être exécutées. Le secret est donc facilement interceptable et visible par n’importe qui. Par conséquent, il est essentiel de mettre en place une gestion plus sécurisée de la session utilisateur. Plusieurs solutions ont été envisagées pour sécuriser l’authentification : - JWT - Bearer - Session Cookie - Basic La solution mise en place s’axe autour de trois points : Utilisation du protocole HTTPS pour sécuriser les échanges Utilisation de JWT (JSON Web Token) pour l’authentification Gestion des certificats pour chiffrer les communications Suivant les recommandations de l’anssi 5.2.2.1 Mesures de protection SSL CSRF CSP CORS Protection des cookies HSTS XSS Rafraîchissement du token Cryptographie Rejeux 5.2.2.2 HTTPS Selon l’étude [DR01] réalisée, il est essentiel d’établir une communication entre le client et l’API en utilisant le protocole HTTPS (HTTP sécurisé avec TLS). Cela signifie que chaque appel à l’API doit obligatoirement être effectué via le port HTTPS. Par exemple : https://192.168.0.1:3001/api/v3/test. De la même manière, il est impératif que l’utilisateur ne puisse accéder à l’application Web qu’en utilisant le protocole HTTPS. Aucun accès en HTTP ne pourra être fait. Tout cela nécessite une gestion appropriée des certificats sur le calculateur afin de prévenir d’éventuels problèmes d’accès en cas de certificats corrompus ou expirés. 5.2.2.3 JWT Dorénavant, l’authentification des requêtes sera basée sur l’utilisation de jetons d’accès. Ces jetons seront générés par l’API et renvoyés une fois l’authentification effectuée. Par la suite, pour chaque requête jusqu’à la déconnexion du client, le jeton devra être inclus dans la demande envoyée à l’API. Avant de traiter une demande, l’API vérifiera systématiquement le contenu et l’intégrité du jeton de la manière suivante : • Est-il valide ? ◦ SHA256(header + « . » + payload) == signature  • Est-il expiré ? ◦ Valeur « exp » • L’utilisateur a-t-il le droit d’effectuer cette requête ? ◦ Valeur « role » Selon l’étude [DR01] réalisée, l’API doit renvoyer le token dans un cookie sécurisé. Voici les paramètres à appliquer au cookie : • name : name (nom du cookie) • value : value (valeur du token) • domain : domain (nom de domaine du site, ou ip) • path : « / » (chemin du cookie) • sameSite : strict (politique de cloisonnement) • httpOnly : true (inaccessible côté client) • session : true (cookie de session) • secure : true (portée limitée aux canaux sécurisés) L’API doit spécifier le domaine du cookie en fonction de l’adresse IP à partir de laquelle elle a été sollicitée. 5.2.2.4 Certificats La mise en place d’une nouvelle version de l’IHM et d’API qui communiquent exclusivement via HTTPS soulève des questions concernant le gestion des certificats sur le calculateur. En effet, si l’utilisateur de l’IHM parvient à déposer sur le calculateur un couple de clé-privée/certificat corrompus, alors le serveur web ne sera pas joignable en HTTPS. Cela empechera toute configuration par le client, ce qui n’est pas souhaitable. Pour éviter cette situation, il est essentiel de mettre en œuvre une solution de gestion de la configuration TLS robuste, reposant sur trois piliers principaux : la génération automatique de certificats auto-signés de secours, la sécurisation de l’import des certificats et de leur utilisation. Flowchart fallback certificats 5.2.3 POC supervision stage 5.3 Développement 5.3.1 Spécification de l’application Figure 13: Redmine IHM Web CAP4000 Figure 14: User story : configuration des interfaces réseaux L’application Qt n’a pas de spécification propre. J’ai utilisé le logiciel Redmine pour créer un backlog de l’ensemble des fonctionnalités à développer. J’ai également utilisé ce logiciel pour créer des user stories qui décrivent les fonctionnalités à développer. Ces user stories sont utilisées pour définir les critères d’acceptation des fonctionnalités. Elles sont également utilisées pour suivre l’avancement du développement. Evolution spécification Avant / Après Comparaison Utilité Changements 5.3.2 Fonctionnement de la solution On garde le meme principe voir schema contexte Fonctionnement de React TODO 5.3.3 Architecture/Workspace (expliquer comment fonctionne un monorepo) CI/CD (commitlint, semantic versioning, changelog) Développement (branches, pull request) Comparaison SVN Git -> gitlab J’ai créé l’environnement du projet dans un “monorepo”. C’est un référentiel unique qui permet de contenir plusieurs projet. J’ai choisi cette approche car nous souhaitons développer une application par produit. Comme l’application Qt, le code sera découpé en modules qui pourront être intégrés ou non dans l’application d’un produit. J’ai également mis en place une démarche qualité du code et des méthodologies de développement. L’application adopte la norme semantic versioning pour gérer les versions des projets. J’ai préparé un changelog pour répertorier toutes le évolution de l’application. J’ai finalement intégré l’outil commitlint pour vérifier que les messages de commit suivent une convention de rédaction. Le projet est versionné avec l’outil de gestion de configuration Subversion. Le projet suivra une méthodologie de développement en branches. Chaque fonctionnalité sera développée dans une branche dédiée. Une fois la fonctionnalité terminée, la branche sera fusionnée dans la branche principale. Cette approche permet de travailler sur plusieurs fonctionnalités en parallèle et de garder une branche principale stable. #mermaid-8{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#mermaid-8 .error-icon{fill:#a44141;}#mermaid-8 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-8 .edge-thickness-normal{stroke-width:2px;}#mermaid-8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-8 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-8 .marker.cross{stroke:lightgrey;}#mermaid-8 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-8 .commit-id,#mermaid-8 .commit-msg,#mermaid-8 .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-8 .branch-label0{fill:#2c2c2c;}#mermaid-8 .commit0{stroke:hsl(180, 1.5873015873%, 48.3529411765%);fill:hsl(180, 1.5873015873%, 48.3529411765%);}#mermaid-8 .commit-highlight0{stroke:rgb(133.6571428571, 129.7428571428, 129.7428571428);fill:rgb(133.6571428571, 129.7428571428, 129.7428571428);}#mermaid-8 .label0{fill:hsl(180, 1.5873015873%, 48.3529411765%);}#mermaid-8 .arrow0{stroke:hsl(180, 1.5873015873%, 48.3529411765%);}#mermaid-8 .branch-label1{fill:lightgrey;}#mermaid-8 .commit1{stroke:hsl(321.6393442623, 65.5913978495%, 38.2352941176%);fill:hsl(321.6393442623, 65.5913978495%, 38.2352941176%);}#mermaid-8 .commit-highlight1{stroke:rgb(93.5483870969, 221.4516129033, 139.677419355);fill:rgb(93.5483870969, 221.4516129033, 139.677419355);}#mermaid-8 .label1{fill:hsl(321.6393442623, 65.5913978495%, 38.2352941176%);}#mermaid-8 .arrow1{stroke:hsl(321.6393442623, 65.5913978495%, 38.2352941176%);}#mermaid-8 .branch-label2{fill:lightgrey;}#mermaid-8 .commit2{stroke:hsl(194.4, 16.5562913907%, 49.6078431373%);fill:hsl(194.4, 16.5562913907%, 49.6078431373%);}#mermaid-8 .commit-highlight2{stroke:rgb(149.4437086091, 117.6092715231, 107.5562913906);fill:rgb(149.4437086091, 117.6092715231, 107.5562913906);}#mermaid-8 .label2{fill:hsl(194.4, 16.5562913907%, 49.6078431373%);}#mermaid-8 .arrow2{stroke:hsl(194.4, 16.5562913907%, 49.6078431373%);}#mermaid-8 .branch-label3{fill:#2c2c2c;}#mermaid-8 .commit3{stroke:hsl(23.0769230769, 49.0566037736%, 40.7843137255%);fill:hsl(23.0769230769, 49.0566037736%, 40.7843137255%);}#mermaid-8 .commit-highlight3{stroke:rgb(99.9811320754, 162.7735849057, 202.0188679245);fill:rgb(99.9811320754, 162.7735849057, 202.0188679245);}#mermaid-8 .label3{fill:hsl(23.0769230769, 49.0566037736%, 40.7843137255%);}#mermaid-8 .arrow3{stroke:hsl(23.0769230769, 49.0566037736%, 40.7843137255%);}#mermaid-8 .branch-label4{fill:lightgrey;}#mermaid-8 .commit4{stroke:hsl(0, 83.3333333333%, 43.5294117647%);fill:hsl(0, 83.3333333333%, 43.5294117647%);}#mermaid-8 .commit-highlight4{stroke:rgb(51.5000000001, 236.5, 236.5);fill:rgb(51.5000000001, 236.5, 236.5);}#mermaid-8 .label4{fill:hsl(0, 83.3333333333%, 43.5294117647%);}#mermaid-8 .arrow4{stroke:hsl(0, 83.3333333333%, 43.5294117647%);}#mermaid-8 .branch-label5{fill:lightgrey;}#mermaid-8 .commit5{stroke:hsl(289.1666666667, 100%, 24.1176470588%);fill:hsl(289.1666666667, 100%, 24.1176470588%);}#mermaid-8 .commit-highlight5{stroke:rgb(154.2083333334, 255, 132.0000000001);fill:rgb(154.2083333334, 255, 132.0000000001);}#mermaid-8 .label5{fill:hsl(289.1666666667, 100%, 24.1176470588%);}#mermaid-8 .arrow5{stroke:hsl(289.1666666667, 100%, 24.1176470588%);}#mermaid-8 .branch-label6{fill:lightgrey;}#mermaid-8 .commit6{stroke:hsl(35.1315789474, 98.7012987013%, 40.1960784314%);fill:hsl(35.1315789474, 98.7012987013%, 40.1960784314%);}#mermaid-8 .commit-highlight6{stroke:rgb(51.331168831, 135.1948051946, 253.6688311688);fill:rgb(51.331168831, 135.1948051946, 253.6688311688);}#mermaid-8 .label6{fill:hsl(35.1315789474, 98.7012987013%, 40.1960784314%);}#mermaid-8 .arrow6{stroke:hsl(35.1315789474, 98.7012987013%, 40.1960784314%);}#mermaid-8 .branch-label7{fill:lightgrey;}#mermaid-8 .commit7{stroke:hsl(106.1538461538, 84.4155844156%, 35.0980392157%);fill:hsl(106.1538461538, 84.4155844156%, 35.0980392157%);}#mermaid-8 .commit-highlight7{stroke:rgb(206.1818181817, 89.948051948, 241.051948052);fill:rgb(206.1818181817, 89.948051948, 241.051948052);}#mermaid-8 .label7{fill:hsl(106.1538461538, 84.4155844156%, 35.0980392157%);}#mermaid-8 .arrow7{stroke:hsl(106.1538461538, 84.4155844156%, 35.0980392157%);}#mermaid-8 .branch{stroke-width:1;stroke:lightgrey;stroke-dasharray:2;}#mermaid-8 .commit-label{font-size:10px;fill:rgb(183.8476190475, 181.5523809523, 181.5523809523);}#mermaid-8 .commit-label-bkg{font-size:10px;fill:hsl(180, 1.5873015873%, 28.3529411765%);opacity:0.5;}#mermaid-8 .tag-label{font-size:10px;fill:#e0dfdf;}#mermaid-8 .tag-label-bkg{fill:#1f2020;stroke:#cccccc;}#mermaid-8 .tag-hole{fill:#ccc;}#mermaid-8 .commit-merge{stroke:#1f2020;fill:#1f2020;}#mermaid-8 .commit-reverse{stroke:#1f2020;fill:#1f2020;stroke-width:3;}#mermaid-8 .commit-highlight-inner{stroke:#1f2020;fill:#1f2020;}#mermaid-8 .arrow{stroke-width:8;stroke-linecap:round;fill:none;}#mermaid-8 .gitTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#mermaid-8 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}mainfea-networkfix-log0-14645aa1-6fbbbf7V0.12-dfad1603-a9e8c90V0.25-dda00826-f304b18 5.3.4 Bibliothèques (zod, react-hook-form, react-query, react-router, orval, react-testing-library, vitest) 5.3.4.1 Routing Définition Modules Gestion “plug-in” multi-app 5.3.5 Gestion des erreurs et des chargements 5.3.6 Authentification et autorisation Utilisateurs et rôles principes Note Existant HTTP / Headers auth Problème Solutions HTTPS/JWT choix reauthentification flow dashboard lucas 5.3.6.1 RBAC 5.3.7 Application Primitives/Core Routing Navigation Layout Page d’accueil QtReact Empty Previous Next 5.3.8 Modules J’ai étudié l’application Qt pour comprendre son fonctionnement et son architecture. J’ai ensuite identifié les modules qui la composent et les fonctionnalités qu’ils offrent. J’ai regroupé certains modules qui partagent des fonctionnalités similaires. J’ai ensuite créé une liste permettant de prioriser les modules en fonction de leur importance. Cette liste est présentée dans le tableau ci-dessous. Table 4: Ordre de priorité des modules Priorité Module Qt Module React 0 IDENTIFICATION Shell REDEMARRAGE CALCULATEUR Shell DECONNEXION Shell 1 ETHERNET ADRESSES IP Réseau NODES CARTES ETAT DES CARTES Cartes ETAT DES E/S DATE/HEURE ETAT SYNCHRO Date et heure MODE SYNCHRO FUSEAU HORAIRE DATE / HEURE JOURNAL JOURNAL Journal RAZ DU JOURNAL 2 CONFIGURATION IMPORT CONFIGURATION Configuration EXPORT CONFIGURATION MOTS DE PASSE Utilisateurs CERT. EQUIPEMENT Certificats CERTIFICATS CA Autorités de certification 3 LISTE MNEMOS Mnémoniques SYS LOG SYSLOG SNMP SNMP 4 SERVEUR IEC 60870 IEC 61850 CLIENT IEC 61850 SERVEUR MODBUS MODBUS MAITRE MODBUS MODBUS ESCLAVE MQTT MQTT 5 FICHIER Fichier IMPRIMANTES Imprimantes DEBOGAGE Débogage 5.3.8.1 Réseau QtReact Previous Next Previous Next Le premier module sur lequel j’ai travaillé est le module réseau. Ce module permet de configurer les adresses IP des interfaces réseau de l’équipement. Il permet également de configurer les nœuds du réseau. Les nœuds sont des équipements distants qui peuvent être connectés à l’équipement principal. Ce module est essentiel pour la configuration de l’équipement et pour assurer la communication avec les autres équipements du réseau. HSR et PRP TODO : Expliquer HSR et PRP https://fr.belden.com/solutions/high-availability-seamless-redundancy 5.3.8.2 Journal QtReact Previous Next Previous Next 5.3.8.3 Date et heure QtReact Previous Next Previous Next 5.3.8.4 Cartes QtReact Previous Next Previous Next 5.3.8.5 Configuration QtReact Previous Next Previous Next 5.3.8.6 Utilisateurs QtReact Previous Next 5.3.8.7 Certificats QtReact Previous Next 5.3.8.8 Autorités de certification QtReact Empty Previous Next 5.3.8.9 Mnémoniques QtReact Previous Next 5.3.9 Tests 5.3.10 Performances Les performance des deux applications ont été évaluée avec l’outil lighthouse de chrome. C’est un outil automatisé open source permettant de mesurer la qualité des pages Web. Les rapports générés par cet outil permettent d’identifier les problèmes de performance, d’accessibilité et de compatibilité. Rapport application Qt Rapport application React Également, l’outil ne calcule pas correctement les temps de chargement initiaux au démarrage des application WebAssembly (Qt). Le temps de chargement de l’application Qt est d’environ 15 secondes tandis que le temps de chargement de l’application react est quasiment instantané (autour de 1 seconde). Finalement l’outil ne rends pas compte de l’expérience utilisateur. L’application React est plus fluide et plus réactive. L’intégration d’une couche de cache limite aussi le rechargement des données. L’interface de l’application Qt est plus simple mais ne permets pas de naviguer rapidement entre les pages. 5.3.11 Application 5.3.11.1 Sprint 1 Autoformation Développement de l’application Shell et layout Module réseau Recherche d’une suite de tests Intégration avec des bibliothèques pertinentes Routage et navigation : react-router Cache client : react-query 5.3.11.2 Sprint 2 Développement de l’application Module journal Module date et heure Module cartes Refactorisation des modules développés modules 1 à 4 Délégation de la gestion des formulaire Validation des données : zod Gestion des formulaires : react-hook-form Mise en place de la gestion multi-application Mise en place des principes d’authentification et d’autorisation avec la gestion multi-utilisateur Mise en place des tests de composants avec cypress Conformité Non régression 5.3.11.3 Sprint 3 Écriture des tests des modules 1 à 4 Test de déploiement sur cible avec un nouveau serveur web Problématiques liées au développement d’ihm Layout Front/back Authentification Echange de données Technologies Evolution rapide Cest quoi react ? fonctionnement => une seule responsabilité => affichage ecosystème très large, nécessité d’adopter d’autres bibliothèques pour étoffer les fonctionnalités et garantir la qualité du code 6 Conclusion En conclusion, le projet entamé en juin 2023, a permis de développer une application de configuration des automates SDEL plus ergonomique et sécurisée. Les nouvelles fonctionnalités et interfaces ont été conçues en collaboration avec les utilisateurs finaux. Les retours positifs attestent de l’efficacité de cette approche centrée utilisateur. Cette nouvelle application vient étoffer notre offre de services et renforce notre positionnement sur le marché de l’énergie qui nécessite l’intégration de contraintes de cybersécurité de plus en plus importantes au fils des années. La vigilance demeure de mise, et une gestion proactive post-implémentation est recommandée pour assurer une adaptation continue aux évolutions technologiques et aux nouvelles menaces. Ce projet constitue ainsi un jalon important dans notre trajectoire vers l’innovation et la pérennité de nos systèmes. Aujourd’hui, l’application est utilisée quotidiennement par les opérateurs de maintenance de nos clients et les équipes de test en interne. D’un point de vue personnel, ce projet vient clôturer ma formation d’ingénieur. Il marque un terme à mes études et m’a permis de mettre en pratique les connaissances acquises durant ces trois années d’apprentissage. Sur le plan technique et scientifique, le projet m’a permis de consolider mes compétences en informatique. J’ai pu découvrir de nouvelles technologies et approfondir mes connaissances en développement WEB. En termes de montée en compétences, j’ai constaté une nette amélioration de ma compréhension des applications WEB ainsi que les contraintes appliqués au domaine de l’embarqué et des réseaux privés. Du point de vue économique, le chiffrage du projet et la mise en place d’un feuille de route ont constitué une expérience pratique sur le fonctionnement et la nécessité des ces processus en entreprise. Cela m’a sensibilisé aux implications financières des choix effectués en tant que responsable et aiguillé ma vision vers une approche plus stratégique et pragmatique. Sur le plan organisationnel, la gestion du projet m’a confronté à certains défis en termes de coordination, de planification et de suivi des tâches. J’ai pu mettre en pratique les méthodes agiles apprises en cours. J’ai également pu progresser en autonomie. Au début parfois trop distant et au fur et à mesure de l’avancement du projet, j’ai amélioré la transmission d’informations vers les différentes parties du projet. Ces compétences organisationnelles acquises seront indéniablement bénéfiques dans ma future carrière professionnelle. Quant à mon projet professionnel, cette expérience a confirmé ma passion pour le développement logiciel et a éclairé les prochaines étapes de ma carrière. Mon objectif est de m’orienter vers le développement logiciel, en particulier dans le domaine WEB et fullstack. Pour finir, cette expérience a été formatrice et enrichissante à bien des égards. Elle a façonné mon identité professionnelle et renforcé ma détermination à exceller dans le domaine de l’informatique. Je suis prêt à relever de nouveaux défis et à contribuer de manière significative à des projets futurs. 6.1 Bilan Le projet a débuté par la mise en place de l’environnement de travail et l’apprentissage autonome des technologies, avec peu de références internes dans l’entreprise. Environ 600 à 700 heures ont été consacrées au projet, avec une moitié du projet déjà réalisée. La plupart des objectifs des premières phases du projet ont été atteints. L’authentification reste à valider lors du prochain sprint. Des refactorisations ont été nécessaires au fur et à mesure de l’apprentissage. Le projet a donc atteint des jalons significatifs, mais le chemin vers la finalisation nécessite encore des efforts substantiels. Il reste encore environ 600 heures de travail pour finir le développement des modules restant. 7 Annexes 7.1 Références 7.2 Grille des compétences 7.3 Acknowledgments I am grateful for the insightful comments offered by the anonymous peer reviewers at Books & Texts. The generosity and expertise of one and all have improved this study in innumerable ways and saved me from many errors; those that inevitably remain are entirely my own responsibility

llement constant des technologies dans l’industrie est un phénomène de plus en plus marquant de nos jours. Les entreprises qui souhaitent rester compétitives sur le marché doivent s’adapter à ces changements et innover en permanence. Dans ce contexte, le présent projet a pour objectif de développer une nouvelle solution pour répondre aux besoins actuels des industriels. Le projet s’inscrit dans la conception et la réalisation d’une plateforme web permettant de faciliter la gestion des opérations de maintenance et de suivi des équipements SDEL Contrôle Commande. Mots clés Calculateur, Développement WEB, API REST, Authentification Table des matières 1 Environnement et Contexte 1.1 Entreprise, service et position 1.1.1 Vinci 1.1.2 Vinci Energies 1.1.3 Hiérarchie et Fonctionnement de l’Entreprise 1.1.4 SDEL Contrôle Commande 1.1.5 Le service Recherche et Développement 1.2 Contexte du projet 2 Problématique 3 Buts et Objectifs 3.1 Objectifs Stratégiques et Opérationnels 3.1.1 Sélectionner un Cadre de Développement Optimal 3.1.2 Préparer la Transition Technologique 3.1.3 Développer la Nouvelle Application Web 3.1.4 Objectif 4 : Développer les Compétences en Gestion de Projet et Techniques 4 Démarche 4.1 Démarche générale 4.2 Méthodologie, techniques et technologies 4.3 Analyse des risques 4.4 Acteurs 4.5 Lotissements 4.6 Planning prévisionnel 4.7 Planning effectif 4.7.1 Jalons 4.7.2 Livrables 4.8 Budget 5 Résultats 5.1 Evaluation des technologies du marché 5.2 Transition 5.2.1 OpenAPI 5.2.2 Authentification 5.2.3 POC supervision stage 5.3 Développement 5.3.1 Spécification de l’application 5.3.2 Fonctionnement de la solution 5.3.3 Architecture/Workspace (expliquer comment fonctionne un monorepo) 5.3.4 Bibliothèques (zod, react-hook-form, react-query, react-router, orval, react-testing-library, vitest) 5.3.5 Gestion des erreurs et des chargements 5.3.6 Authentification et autorisation 5.3.7 Application 5.3.8 Modules 5.3.9 Tests 5.3.10 Performances 5.3.11 Application 6 Conclusion 6.1 Bilan 7 Annexes 7.1 Références 7.2 Grille des compétences Acronymes HSP PRP REST API SDELCC JWT HTTP HTTPS HMAC WBS CSR SPA Remerciements Ce projet s’intègre dans le cadre de mon apprentissage au sein de l’entreprise SDEL Contrôle Commande. SDEL Contrôle Commande appartient à la filiale Energies du groupe VINCI. Grâce à son expertise technique, SDEL Contrôle commande propose son accompagnement auprès des gestionnaires de réseaux de transport et de distribution d’énergie. J’ai intégré l’entreprise en tant qu’apprenti ingénieur en informatique. J’ai été affecté au service Recherche et Développement, sous la responsabilité de Monsieur Sébastien BARRE, responsable du développement logiciel. Le service Recherche et Développement est en charge de la conception et du développement de calculateurs utilisés principalement dans le domaine de l’énergie notamment dans les postes de transformation du réseau électrique français. Il est également en charge de la maintenance des produits existants. Cette maintenance peut s’effectuer sur de longues périodes, de l’ordre de 20 ans. Le projet s’inscrit dans une dynamique globale qui vise à moderniser les logiciels et les outils que nos équipements embarquent. Cette modernisation à pour objectif de proposer des outils plus ergonomiques et de répondre à des contraintes de cybersécurité plus strictes. Le projet à pour objectif de développer une nouvelle application d’administration et de configuration des automates SDEL. IL se déroule sur la dernière année de ma formation d’ingénieur en apprentissage sur la période de Juin 2023 à août 2024. Ce rapport est découpé en 3 parties : Environnement et contexte : Dans un premier temps, je présenterai le contexte de mon entreprise, puis mon poste et mes rôles au sein de celle-ci. Je présenterai également le contexte, la problématique spécifique ainsi que les buts et objectif du projet. Mise en œuvre et analyse des résultats : Dans cette partie, j’aborderai la méthodologie de travail choisie et les outils utilisés pour assurer son bon déroulement. Je présenterai ensuite les résultats obtenus en évoquant les écarts avec les objectif établis. Bilan et perspectives : Enfin, je ferai un bilan et j’évoquerai les perspectives d’évolution du projet. Je présenterai également les compétences acquises et les apports de ce projet dans mon parcours de formation. Pour finir, je présenterai mes perspectives futures pour ma carrière professionnelle. 1 Environnement et Contexte développer contexte entreprise, Vinci et hiérarchie (energies, omexom), nos marchés (où) ce qu’il faut retenir de chaque chapitre (bullet list) 1.1 Entreprise, service et position 1.1.1 Vinci image/svg+xml Figure 1: Logo VINCI Vinci est une entreprise multinationale française spécialisée dans la construction et les concessions. Fondée en 1899 sous le nom de Société Générale d’Entreprises (SGE), elle est devenue Vinci en 2000. Vinci est l’une des plus grandes entreprises de construction et de concessions dans le monde, avec des activités diversifiées dans le domaine de la construction, des infrastructures, des services énergétiques et de la gestion des infrastructures. Secteurs d’activité : Construction : Vinci Construction est spécialisée dans le bâtiment, les travaux publics, le génie civil, les fondations et les infrastructures de transport. Concessions : Vinci Autoroutes et Vinci Airports gèrent des réseaux autoroutiers et des aéroports dans plusieurs pays. Énergie : Vinci Energies intervient dans les domaines des infrastructures d’énergie, des industries, des technologies de l’information, et de la transition énergétique. Immobilier : Vinci Immobilier est active dans le développement immobilier résidentiel, tertiaire et commercial. #mermaid-1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#mermaid-1 .error-icon{fill:#a44141;}#mermaid-1 .error-text{fill:#ddd;stroke:#ddd;}#mermaid-1 .edge-thickness-normal{stroke-width:2px;}#mermaid-1 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1 .marker{fill:lightgrey;stroke:lightgrey;}#mermaid-1 .marker.cross{stroke:lightgrey;}#mermaid-1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1 .edge{stroke-width:3;}#mermaid-1 .section--1 rect,#mermaid-1 .section--1 path,#mermaid-1 .section--1 circle,#mermaid-1 .section--1 polygon,#mermaid-1 .section--1 path{fill:#1f2020;}#mermaid-1 .section--1 text{fill:lightgrey;}#mermaid-1 .node-icon--1{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge--1{stroke:#1f2020;}#mermaid-1 .edge-depth--1{stroke-width:17;}#mermaid-1 .section--1 line{stroke:#e0dfdf;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-0 rect,#mermaid-1 .section-0 path,#mermaid-1 .section-0 circle,#mermaid-1 .section-0 polygon,#mermaid-1 .section-0 path{fill:#0b0000;}#mermaid-1 .section-0 text{fill:lightgrey;}#mermaid-1 .node-icon-0{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-0{stroke:#0b0000;}#mermaid-1 .edge-depth-0{stroke-width:14;}#mermaid-1 .section-0 line{stroke:#f4ffff;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-1 rect,#mermaid-1 .section-1 path,#mermaid-1 .section-1 circle,#mermaid-1 .section-1 polygon,#mermaid-1 .section-1 path{fill:#4d1037;}#mermaid-1 .section-1 text{fill:lightgrey;}#mermaid-1 .node-icon-1{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-1{stroke:#4d1037;}#mermaid-1 .edge-depth-1{stroke-width:11;}#mermaid-1 .section-1 line{stroke:#b2efc8;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-2 rect,#mermaid-1 .section-2 path,#mermaid-1 .section-2 circle,#mermaid-1 .section-2 polygon,#mermaid-1 .section-2 path{fill:#3f5258;}#mermaid-1 .section-2 text{fill:lightgrey;}#mermaid-1 .node-icon-2{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-2{stroke:#3f5258;}#mermaid-1 .edge-depth-2{stroke-width:8;}#mermaid-1 .section-2 line{stroke:#c0ada7;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-3 rect,#mermaid-1 .section-3 path,#mermaid-1 .section-3 circle,#mermaid-1 .section-3 polygon,#mermaid-1 .section-3 path{fill:#4f2f1b;}#mermaid-1 .section-3 text{fill:lightgrey;}#mermaid-1 .node-icon-3{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-3{stroke:#4f2f1b;}#mermaid-1 .edge-depth-3{stroke-width:5;}#mermaid-1 .section-3 line{stroke:#b0d0e4;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-4 rect,#mermaid-1 .section-4 path,#mermaid-1 .section-4 circle,#mermaid-1 .section-4 polygon,#mermaid-1 .section-4 path{fill:#6e0a0a;}#mermaid-1 .section-4 text{fill:lightgrey;}#mermaid-1 .node-icon-4{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-4{stroke:#6e0a0a;}#mermaid-1 .edge-depth-4{stroke-width:2;}#mermaid-1 .section-4 line{stroke:#91f5f5;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-5 rect,#mermaid-1 .section-5 path,#mermaid-1 .section-5 circle,#mermaid-1 .section-5 polygon,#mermaid-1 .section-5 path{fill:#3b0048;}#mermaid-1 .section-5 text{fill:lightgrey;}#mermaid-1 .node-icon-5{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-5{stroke:#3b0048;}#mermaid-1 .edge-depth-5{stroke-width:-1;}#mermaid-1 .section-5 line{stroke:#c4ffb7;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-6 rect,#mermaid-1 .section-6 path,#mermaid-1 .section-6 circle,#mermaid-1 .section-6 polygon,#mermaid-1 .section-6 path{fill:#995a01;}#mermaid-1 .section-6 text{fill:lightgrey;}#mermaid-1 .node-icon-6{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-6{stroke:#995a01;}#mermaid-1 .edge-depth-6{stroke-width:-4;}#mermaid-1 .section-6 line{stroke:#66a5fe;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-7 rect,#mermaid-1 .section-7 path,#mermaid-1 .section-7 circle,#mermaid-1 .section-7 polygon,#mermaid-1 .section-7 path{fill:#154706;}#mermaid-1 .section-7 text{fill:lightgrey;}#mermaid-1 .node-icon-7{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-7{stroke:#154706;}#mermaid-1 .edge-depth-7{stroke-width:-7;}#mermaid-1 .section-7 line{stroke:#eab8f9;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-8 rect,#mermaid-1 .section-8 path,#mermaid-1 .section-8 circle,#mermaid-1 .section-8 polygon,#mermaid-1 .section-8 path{fill:#161722;}#mermaid-1 .section-8 text{fill:lightgrey;}#mermaid-1 .node-icon-8{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-8{stroke:#161722;}#mermaid-1 .edge-depth-8{stroke-width:-10;}#mermaid-1 .section-8 line{stroke:#e9e8dd;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-9 rect,#mermaid-1 .section-9 path,#mermaid-1 .section-9 circle,#mermaid-1 .section-9 polygon,#mermaid-1 .section-9 path{fill:#00296f;}#mermaid-1 .section-9 text{fill:lightgrey;}#mermaid-1 .node-icon-9{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-9{stroke:#00296f;}#mermaid-1 .edge-depth-9{stroke-width:-13;}#mermaid-1 .section-9 line{stroke:#ffd690;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-10 rect,#mermaid-1 .section-10 path,#mermaid-1 .section-10 circle,#mermaid-1 .section-10 polygon,#mermaid-1 .section-10 path{fill:#01629c;}#mermaid-1 .section-10 text{fill:lightgrey;}#mermaid-1 .node-icon-10{font-size:40px;color:lightgrey;}#mermaid-1 .section-edge-10{stroke:#01629c;}#mermaid-1 .edge-depth-10{stroke-width:-16;}#mermaid-1 .section-10 line{stroke:#fe9d63;stroke-width:3;}#mermaid-1 .disabled,#mermaid-1 .disabled circle,#mermaid-1 .disabled text{fill:lightgray;}#mermaid-1 .disabled text{fill:#efefef;}#mermaid-1 .section-root rect,#mermaid-1 .section-root path,#mermaid-1 .section-root circle,#mermaid-1 .section-root polygon{fill:hsl(180, 1.5873015873%, 48.3529411765%);}#mermaid-1 .section-root text{fill:#2c2c2c;}#mermaid-1 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1 .edge{fill:none;}#mermaid-1 .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}VINCIVinci EnergiesVinci ConstructionVinci AutoroutesVinci AirportsVinci Immobilier 1.1.2 Vinci Energies Vinci Energies, une filiale de Vinci, est spécialisée dans les services énergétiques et les technologies de l’information. Elle propose des solutions dans les domaines de l’énergie, des technologies de l’information, et des télécommunications. Ses principales activités incluent : Infrastructure Énergie : Gestion des réseaux électriques et des infrastructures de distribution d’énergie. Industrie : Optimisation des processus industriels et amélioration de l’efficacité énergétique. TIC (Technologies de l’Information et de la Communication) : Solutions pour les systèmes d’information et les télécommunications. Transition Énergétique et Environnementale : Développement de solutions pour une énergie plus durable et respectueuse de l’environnement. Vinci Energies, une division du groupe VINCI, regroupe plusieurs marques spécialisées dans divers domaines des services énergétiques et des technologies de l’information. Les cinq principales marques de Vinci Energies sont : Actemium : Spécialisée dans les solutions et les services pour les processus industriels, couvrant l’ensemble du cycle de vie des installations industrielles. Axians : Focalisée sur les technologies de l’information et de la communication (TIC), offrant des solutions pour les infrastructures IT, la cybersécurité, le cloud, les réseaux et la collaboration. Cegelec : Fournit des services et des solutions en ingénierie électrique et maintenance pour les infrastructures et les bâtiments. Omexom : Se concentre sur les infrastructures énergétiques, notamment les réseaux de transport et de distribution d’électricité, les énergies renouvelables et les systèmes de stockage d’énergie. VINCI Facilities : Offre des services de gestion et de maintenance des bâtiments, incluant des solutions de facility management intégrées pour optimiser les performances des installations. 1.1.3 Hiérarchie et Fonctionnement de l’Entreprise 1.1.3.1 Organisation Vinci est organisée en plusieurs divisions opérationnelles, chacune ayant une structure hiérarchique propre. La hiérarchie de Vinci et de ses filiales, comme Vinci Energies, est généralement structurée de la manière suivante : Conseil d’Administration : Organe suprême de la société, responsable de la stratégie globale et de la surveillance de la direction exécutive. Direction Générale : Composée du Président-Directeur Général (PDG) et d’autres membres de la direction exécutive, responsables de la mise en œuvre de la stratégie et de la gestion quotidienne de l’entreprise. Directeurs de Divisions/Branches : Chacun responsable d’une branche spécifique (par exemple, Vinci Construction, Vinci Energies). Directeurs de Filières/Entités : Supervisent des sous-divisions ou entités sp

dans

au dos ou au début du mémoire synthèse carte de visite anglais / français ~15 lignes 3 à 5 mot clés