Soutenance CDA

01

Soutenance titre Concepteur Développeur d'Application

Ledoux Julien

15 Septembre 2023

Illustrateur V2

Alternance chez Rubicode

02

Abstract

I spent my work-study year as a web developer at Rubicode, a subsidiary of the Brepoma group in Orvault. This company focuses on developing solutions for the online personalization of cups for another subsidiary of the group, Atelier du Gobelet. My main project was the design of an API for an advanced symbol manager to enhance Atelier du Gobelet's configurator. The aim was to optimize symbol management and provide a better user experience when customizing cups.

03

Sommaire

1.

9.

Développement du Back-End

Présentation entreprise

2.

10.

Développement du Front-End

Présentation des missions

3.

11.

Contexte du projet

Docker

12.

4.

Documentation

Cahier des Charges

13.

5.

Démonstration

Analyse du besoin

14.

6.

Compétences non couvertes

Gestion de projet

15.

7.

Conclusion

Conception

16.

8.

Remerciement

Outils et Technologies

04

Présentation entreprise

BREPOMA

Je suis ravi de vous présenter aujourd'hui les entreprises qui m'ont accueilli au sein du groupe Brepoma : Rubicode et Imprim et Com. Le groupe Brepoma est un acteur majeur dans les domaines du développement web et de l'imprimerie sur divers supports. Rubicode, spécialisée dans le développement web innovant, est reconnue pour son approche centrée sur le client et sa synergie avec les autres filiales du groupe. D'un autre côté, Imprim et Com, basée à Orvault en Loire Atlantique, s'est distinguée dans le secteur de l'impression et de la publicité par l'objet, avec un focus sur la responsabilité sociétale et environnementale. Ces deux entreprises complémentaires me permettent de travailler dans un environnement riche en expertise et en opportunités.

Chiffres Clés :- Chiffre d'affaires d'Imprim et Com en 2019 : 4,000,000 €.- Prévision de croissance pour Imprim et Com : 40% d'ici fin 2023.

05

Présentation des missions

Formulaire de recherche de commande à thème personnalisable Défi : Permettre une recherche flexible basée sur des traits personnalisés. Solution : Développement d'une fonction de recherche de commande à thème personnalisable. Fonction de recherche de commande selon problèmes de livraison ou qualité d'impression Défi : Résoudre les problèmes de qualité et de livraison. Solution : Fonction de recherche avancée pour identifier ces commandes. Fonction pour trouver le nombre de jours ouvrés dans une année Défi : Calculer le nombre de jours ouvrables pour la planification. Solution : Création d'une fonction dédiée. Système de Feedback pour les Clients Défi : Mesurer la satisfaction client. Solution : Développement d'un système de feedback par email. Formulaire d'entrée de nouveau employé Défi : Faciliter le processus d'intégration des nouveaux employés. Solution : Développement d'un formulaire d'entrée pour les nouveaux employés.

Durant l'année écoulée, j'ai joué un rôle clé dans plusieurs projets axés sur l'optimisation et l'efficacité au sein de notre organisation. Mes responsabilités étaient diversifiées et couvraient plusieurs aspects, allant de la gestion des commandes à la relation client, en passant par des outils utilitaires spécifiques et les ressources humaines. Ces contributions ont eu un impact significatif, aidant notre entreprise à améliorer ses opérations quotidiennes, à rehausser la qualité de notre service client et à simplifier les processus internes pour notre équipe. Mon travail a été une combinaison d'initiatives stratégiques et de développement technique, et a impliqué une collaboration étroite avec divers départements pour s'assurer que les solutions mises en place étaient à la fois efficaces et alignées sur les objectifs à long terme de l'entreprise.

06

Contexte du Projet

Contexte du Projet - Illustrateur V2

Problématique : - Manque d'intuitivité et de flexibilité dans l'interface utilisateur pour la gestion des symboles. - Absence d'un système de gestion efficace des symboles pour les administrateurs. Impact Commercial : - Moins d'utilisation de la fonctionnalité des symboles par les utilisateurs. - Limitation de la capacité de l'entreprise à ajouter ou modifier rapidement les symboles. Objectif Général : - Améliorer l'expérience utilisateur et la gestion administrative des symboles pour augmenter les ventes de gobelets personnalisés.

L'entreprise Imprim et Com est confrontée à un enjeu majeur : l'absence d'outil interne(backoffice) avec une interface utilisateur intuitive et d'un système de gestion efficace des symboles limite notre capacité à évoluer dans le marché des gobelets personnalisés. Cette problématique a un impact commercial considérable, affectant à la fois la satisfaction des utilisateurs et les ventes. L'objectif général de ce projet est donc de moderniser l'expérience utilisateur et la gestion des symboles pour augmenter notre compétitivité.

07

Cahier des Charges et Contraintes

Cahier des Charges et Contraintes - Illustrateur V2

Amélioration de l'expérience utilisateur : - Interface plus intuitive - Meilleure navigation et utilisation des symboles Optimisation de la gestion des symboles : - Outils pour la création, la modification, et la gestion des symboles Sécurité et Indépendance : - Accès sécurisé à l'interface d'administration - Compatibilité avec les autres technologies de l'entreprise Paramétrage : - Facilité de paramétrage du chemin du dossier où sont stockés les symboles et des noms des tables utilisées. Contraintes : - Respect des standards SVG pour les symboles. - Compatibilité multilingue (anglais, allemand, espagnol, français, italien et portugais). - php5.6.40, MariaDB10.6.5 et pas de framework.

Pour aborder ces défis, plusieurs critères ont été établis. D'une part, l'interface utilisateur doit être revue pour être plus intuitive, avec une meilleure navigation. D'autre part, un ensemble d'outils pour la création, la modification, et la gestion des symboles sera développé pour les administrateurs. En termes de sécurité, un accès sécurisé à l'interface d'administration est impératif. Le système doit également être indépendant des autres technologies utilisées au sein de l'entreprise pour garantir une meilleure intégrabilité. Enfin, le projet est soumis à des contraintes techniques, comme le respect des standards SVG pour les symboles et la nécessité d'une compatibilité multilingue

08

Analyse du besoin

Identification des Besoins de l'Entreprise

Les principaux besoins de l'entreprise concernent l'inefficacité de l'expérience utilisateur actuelle, la complexité de la gestion administrative des symboles et les impacts négatifs sur les performances commerciales. Il est donc crucial de créer une solution qui améliore l'interface utilisateur, facilite la gestion administrative et, en fin de compte, stimule les ventes de gobelets personnalisés.

Expérience Utilisateur Inefficace

Les utilisateurs trouvent l'interface actuelle difficile à naviguer, en particulier lorsqu'il s'agit de chercher et d'ajouter des symboles aux gobelets.

Gestion Administrative Complexe

Il n'existe pas d'outil de backoffice permettant la gestion efficace des symboles, ce qui complique les tâches administratives.

Pertes de Performances Commerciales

Le manque d'efficacité et de fonctionnalités limite l'usage des symboles par les utilisateurs, affectant les ventes de gobelets personnalisés.

09

Analyse du besoin

Comment le Projet Répond à ces Besoins

Ce projet vise à adresser ces besoins en introduisant une interface utilisateur plus intuitive et un backoffice simplifié, tout en étant développé en PHP 5.6.40 sans l'usage de frameworks pour assurer une parfaite compatibilité avec les technologies existantes de l'entreprise. Nous prévoyons que ces améliorations mèneront à une utilisation accrue des symboles et, par conséquent, à une augmentation des ventes.

Amélioration de l'Expérience Utilisateur

Interface plus intuitive avec un système de recherche et de filtrage des symboles avancé, tout en respectant les contraintes technologiques de PHP 5.6.40 sans frameworks.

Optimisation de la Gestion Administrative

Implémentation d'un système de backoffice pour une gestion simplifiée des symboles, compatible avec les technologies actuelles de l'entreprise.

Augmentation des Performances Commerciales

En améliorant l'expérience utilisateur et en rendant la gestion plus simple, nous prévoyons une utilisation accrue des symboles, ce qui pourrait entraîner une augmentation des ventes.

10

Analyse du besoin

Fonctionnalités Principales

Gestion des symboles

- Ajout de nouveaux symboles via une interface d'administration- Vérifications automatiques pour conformité (ex : couleur, format) - Nommage et classification automatiques pour chaque symbole - Fonctionnalité de mots-clés multilingues pour faciliter la recherche

Gestion des catégories

- Création et gestion via l'interface d'administration - Système de drag-and-drop pour une expérience utilisateur améliorée - Disponibilité des noms de catégories en plusieurs langues

Recherche et filtrage

- Barre de recherche par mots-clés - Filtrage par catégorie - Actions en un clic pour une gestion efficace des symboles

11

Gestion de projet

Méthode Kanban

Liste des tâches

12

Gestion de projet

Diagramme de GANTT

13

Gestion de projet

Méthodologie

Seul responsable des différentes phases = Cycle en V

14

Conception

Design Pattern

Architecture et Modèle architectural

Multicouche

Monolithique

Modèle - Vue - Contrôleur (MVC)

• Couche de présentation (front-end) qui gère les interactions avec l'utilisateur.
• Couche de logique métier (back-end) qui implémente la logique de l'application.
• Couche de données (base de données) qui gère la persistance des données.

• Projet de petite envergure.
• Compatibilité (pas de framework et php5 imposé).
• Développement simple et direct.

• Modèle : Gestion les données.
• Vue : Présente les données à l'utilisateur.
• Contrôleur : Agit comme un intermédiaire entre la Vue et le Modèle. Reçoit les interactions utilisateur depuis la Vue, les traite, et met à jour la Vue en conséquence.

15

Conception

Diagramme de cas d'utilisation

4 Principaux cas d'utilisations :

• Gestion des symboles
• Ajout de symboles
• Gestion des catégories
• Gestion des mots-clés

Nécessitant tous les 4 l'Authentification.

16

Conception

Diagramme de classes

• Symbol est la classe centrale, responsable de la gestion des symboles et de leurs attributs.
• User gère l'authentification, la classe à partir de laquelle toutes les interactions utilisateur commencent.
• validateSvgFile() dans Symbol comme méthodes clés pour la conformité de l'upload des fichiers svg.
• Les classes Category et Keyword pour la classification et la recherche.

17

Conception

Diagramme d'Activité

Ajout d'un Nouveau Symbole

Importance de la vérification côté client pour l'efficacité et la rapidité- Réalisée dans le navigateur de l'utilisateur et permet un feedback instantané. - Permet d'éviter les allers-retours inutiles avec le serveur, ce qui améliore la réactivité et l'expérience utilisateur. - Économise du temps et des ressources serveur. Rôle de la vérification côté serveur pour la sécurité et la conformité - Vérification côté client est rapide mais pas totalement fiable. Un utilisateur malveillant peut contourner ces vérifications. - Vérification côté serveur nécessaire pour garantir que les données soient sécurisées et conformes aux exigences du système (Par exemple, le serveur peut s'assurer que le fichier SVG uploadé ne contient pas de code malveillant). Les points de décision comme moments cruciaux dans le flux de l'activité Ce sont des étapes clés dans le flux du processus, et il est essentiel de les gérer correctement pour assurer un bon fonctionnement de l'application. Dans notre cas, ces points de décision sont là où le système décide si les vérifications ont réussi ou échoué et oriente le flux d'activité en conséquence.

18

Conception

Modèle Conceptuel des Données (MCD)

Le MCD est la première phase de la conception d'une base de données. Ce modèle permet de définir la structure globale de la base de données en identifiant les entités clés, leurs attributs et les relations entre elles. Dans notre MCD, nous avons des entités comme 'Symbols' ou 'Users', et des relations comme 'est_dans_la_catégorie' qui décrivent comment ces entités interagissent entre elles. Les cardinalités, comme '0,n' et '1,n', apportent une flexibilité dans les associations et soulignent l'importance de chaque relation. Ce modèle est essentiel pour assurer que la base de données est bien organisée, scalable et capable de gérer efficacement les données.

19

Conception

Modèle Logique des Données (MLD)

Le MLD permet de traduire le modèle conceptuel en un schéma plus technique, apte à être mis en œuvre dans un système de gestion de bases de données. Dans cette phase, j'ai d'abord créé un MLD textuel qui a ensuite été généré automatiquement en utilisant MySQL Workbench. Ce MLD généré a été modifié selon les besoins spécifiques du projet pour optimiser la structure de la base de données. Le MLD détaille les types de données, les contraintes d'intégrité, et formalise les relations entre les tables, constituant ainsi la charpente sur laquelle la base de données sera construite.

20

Conception

Modèle Physique des Données (MPD)

Le Modèle Physique des Données (MPD) est représenté ici comme le schéma directement implanté dans notre système de gestion de base de données, illustré par l'interface de PhpMyAdmin. Dans notre cas, le MLD s'est avéré être suffisamment robuste et bien conçu pour servir de base au MPD.

Cela a simplifié le processus de mise en œuvre et a assuré que les relations et les types de données sont optimisés pour des requêtes performantes. Par exemple, les choix de types de données du MLD ont été méticuleusement réalisés pour minimiser l'utilisation de l'espace de stockage tout en garantissant la précision des données. En outre, le passage du MLD au MPD a également été l'occasion d'examiner et d'appliquer des mesures de sécurité, telles que des contraintes d'intégrité, pour préserver l'intégrité des données.

21

Conception

Plan du site

Le plan du site offre une cartographie visuelle de la structure de l'application. Pour assurer une navigation fluide et intuitive, nous avons conçu notre site avec une structure claire et bien définie. Ce plan a été élaboré pour optimiser la navigation, réduire la complexité et améliorer l'expérience utilisateur. Il permet également aux développeurs et aux parties prenantes de comprendre clairement comment les différentes composantes de l'application sont interconnectées. Cette structure a été conçue pour offrir un maximum d'interactions avec le moins de clics possible, permettant ainsi aux utilisateurs de gérer facilement les symboles, les catégories et les mots-clés.

22

Conception

Maquette

Page Symboles

Cette maquette présente l'interface principale de l'application, servant de point central pour les interactions avec le système. Elle a été conçue pour optimiser la fonctionnalité et l'efficacité, permettant ainsi une gestion rapide et simple des symboles, catégories, et mots-clés. Ce design donne un aperçu de la manière dont les opérations quotidiennes seront gérées, tout en visant à offrir un maximum d'interactions avec le moins de clics possible pour améliorer l'expérience utilisateur.

23

Outils et Technologies

Outils

Technologies

24

Développement du Back-End

Structure Dossier

Le dossier back de ce projet incarne toute la logique du back-end et est organisé suivant le modèle MVC, une architecture qui facilite la maintenance et l'évolutivité du code. Le développement du back-end s'est effectué en PHP 5.6.40, en adéquation avec les besoins de mon entreprise.

• Le point d'entrée de mon API est index.php, qui orchestre les interactions entre les différents composants.
• Les controllers et models sont logiquement séparés dans des dossiers distincts pour gérer la logique métier et les interactions avec la base de données.
• Les vues, quant à elles, sont dans la partie front-end de l'application, assurant un couplage lâche.

25

Développement du Back-End

PDO

Pour la gestion de la base de données, j'ai choisi d'utiliser l'interface PDO (PHP Data Objects). Cette décision repose sur plusieurs avantages clés :

• Connexion à la base de données : Le DSN (Data Source Name) permet une connexion facile et rapide à la base de données MySQL. Dans ce cas, les variables $host, $db, et $charset contiennent les informations nécessaires pour établir cette connexion.
• Sécurité : PDO permet d'utiliser des requêtes préparées, ce qui aide à prévenir les injections SQL, améliorant ainsi la sécurité de l'application.
• Gestion des Erreurs : Avec l'option ERRMODE_EXCEPTION, les erreurs seront traitées sous forme d'exceptions, facilitant leur gestion et leur débogage.
• Flexibilité et Maintenabilité : Les options de récupération des données et de préparation des requêtes sont facilement configurables, permettant une plus grande flexibilité.

L'utilisation de PDO contribue donc non seulement à la performance et à la flexibilité de l'application, mais aussi à sa sécurité.

26

Développement du Back-End

Modèles

• Les modèles sont responsables de l'interaction avec la base de données. Ils récupèrent, insèrent, mettent à jour et suppriment les données. Grâce à l'architecture MVC, cette logique complexe de base de données est bien isolée dans le modèle, rendant le code plus propre et plus facile à maintenir.
• Sécurité : Utilisation de la méthode prepare() de l'objet PDO pour créer des requêtes SQL sécurisées. Cette méthode rend les requêtes résistantes aux attaques par injection SQL.
• Le code utilise également execute() pour exécuter la requête préparée, ce qui ajoute une couche supplémentaire de protection.
• Cette fonction utilise une requête SQL avec des jointures pour récupérer les données nécessaires.

27

Développement du Back-End

Contrôleurs

• Les contrôleurs agissent comme des intermédiaires entre les modèles et les vues. Ils reçoivent les requêtes, effectuent des traitements et renvoient les données appropriées.
• Validation : Avant de mettre à jour le fichier SVG, la méthode checkSvgFile est appelée pour valider le fichier. C'est un exemple de logique de contrôle, permettant de s'assurer que les données sont valides avant toute interaction avec la base de données.
• Gestion des erreurs : Le contrôleur est également responsable de vérifier l'existence du symbole en utilisant getSymbolById. En cas d'erreur, un message approprié est renvoyé.
• Cohésion : Le contrôleur fait appel à plusieurs modèles (symbolModel, symbolCategoryModel, symbolKeywordModel) pour effectuer une mise à jour complète, montrant un bon niveau de séparation des préoccupations.
• Finalité : Après toutes ces étapes, un message de succès est renvoyé, confirmant que le fichier SVG a été mis à jour avec succès.

28

Développement du Back-End

L'API

• Endpoints de l'API: Les "endpoints" sont les routes spécifiques de l'API qui fournissent différentes fonctionnalités. Dans ce cas, nous avons des endpoints pour la connexion ('login'), le statut de l'authentification ('auth/status'), et la déconnexion ('logout').
• Routing API: Le code montre comment les différentes routes d'API sont gérées. Par exemple, pour l'endpoint 'login', la méthode HTTP doit être POST, et le contrôleur d'utilisateur ($userController) est appelé pour gérer la logique.
• Validation de la Méthode HTTP: Chaque endpoint attend une méthode HTTP spécifique (GET, POST, etc.). Si une méthode non autorisée est utilisée, une erreur 405 est renvoyée.
• Gestion des Statuts: L'endpoint 'auth/status' fournit l'état actuel de l'authentification de l'utilisateur, ce qui est crucial pour gérer les sessions utilisateur.
• Format de Réponse: Toutes les réponses sont en JSON, offrant une intégration fluide avec le front-end et des réponses standardisées.

29

Développement du Back-End

Token

• Enregistrement et Token: Après un enregistrement réussi, un token JWT est généré. Ce token sert à authentifier l'utilisateur pour les sessions futures.
• Stockage du Token: Le token est stocké dans un cookie. Selon le protocole (HTTP ou HTTPS), différents paramètres de sécurité sont appliqués au cookie.

• Sécurité: L'utilisation de JWT ajoute une couche de sécurité en assurant que chaque requête est accompagnée d'un token valide.
• Renouvellement et Expiration: Le token expire après 24 heures, nécessitant ainsi un renouvellement pour des sessions plus longues. Ce mécanisme limite les risques associés à un token potentiellement compromis.

• Détails du Token: Le token contient plusieurs champs comme iat (temps d'émission), exp (date d'expiration), et data (informations sur l'utilisateur). Ces champs sont encodés en utilisant une clé secrète.

30

Développement du Back-End

Postman

Inscription et Tokenisation Illustration d'une requête POST vers l'endpoint 'register'. Après une inscription réussie, l'API retourne un token JWT. cURL et Authentification Réponse requête cURL comprenant des headers spécifiques pour l'authentification. Le token JWT est inclus dans l'en-tête d'autorisation et en tant que cookie. Sécurité et Tests Utilisation de Postman pour tester les requêtes de l'API. Le token JWT dans les headers assure que l'utilisateur est correctement authentifié. Possibilité d'automatiser des tests d'intégration.

31

Développement du Back-End

Tests Unitaires

Introduction aux tests unitaires

Outils utilisésPHPUnit pour PHP 5.6.40.

Rôle de la méthode setUp()Configurer l'environnement de test en utilisant des mocks pour les classes User et CookieSetter.

Objectif des tests unitaires - S'assurer que chaque unité de code fonctionne comme prévu. - Détecter les problèmes dès le début du cycle de développement.

32

Développement du Back-End

Tests Unitaires

Test de réussite

Assertions utilisées- assertTrue pour vérifier que le résultat est un tableau. - assertArrayHasKey pour vérifier que les clés nécessaires sont présentes. - assertEquals pour vérifier que les valeurs sont correctes.

Objectif du test - Vérifier que la méthode register() renvoie les bonnes valeurs lorsque tout se passe bien.

Résultat attendu- Le test doit passer avec succès et toutes les assertions doivent être vraies.

Que fait le test ?- Il appelle la méthode register() avec un nom d'utilisateur, une adresse e-mail et un mot de passe comme arguments.

33

Développement du Back-End

Tests Unitaires

Test d'échec

Objectif du test- Vérifier que la méthode register() renvoie une erreur appropriée lorsqu'il y a un problème d'inscription. Que fait le test ?- Utilise un mock pour forcer la méthode register() à échouer. Assertions utilisées- assertTrue pour vérifier que le résultat est un tableau. - assertArrayHasKey pour vérifier que la clé error est présente dans le tableau. - assertEquals pour vérifier que la valeur de l'erreur est "Registration failed". Résultat attenduLe test doit passer avec succès et toutes les assertions doivent être vraies.

34

Développement du Back-End

Tests Unitaires

Structure des testsLes fichiers de tests sont rigoureusement organisés pour correspondre aux contrôleurs, assurant que chaque fonctionnalité a un test associé. Détails de la structureLe dossier controllers/ et le dossier tests/ sont parfaitement alignés: chaque contrôleur a son fichier de test correspondant. Cela simplifie la localisation des tests relatifs à une fonctionnalité particulière.

Exécution des tests et Organisation

Commande à utiliser pour exécuter les tests- Ouvrir le terminal et naviguer vers le dossier tests. - Utiliser la commande ..\vendor\bin\phpunit UserControllerTest.php. Interprétation des résultats- Tous les 6 tests ont réussi en 178 millisecondes. - 23 assertions ont été validées, ce qui signifie que le code fonctionne comme prévu.

AvantagesCette organisation favorise une meilleure compréhensibilité et une maintenance plus aisée. Elle permet également une meilleure collaboration entre les développeurs.

35

Développement du Front-End

Structure Dossier

Points Clés - Organisation modulaire pour une meilleure maintenance. - Séparation claire des responsabilités : style (CSS), logique (JavaScript) et affichage (PHP). Détails- /css : Un fichier CSS pour chaque page, permettant une gestion plus aisée des styles. - /js : Chaque fonctionnalité a son propre fichier JS. api.js est crucial pour les appels API. - /views : Fichiers PHP pour chaque page, organisés pour faciliter la gestion. - index.php : La page d'accueil qui gère également le routage.

36

Développement du Front-End

index.php

Gestion du Routage - Utilise le tableau $allowedPages pour vérifier les pages autorisées - Redirige vers 'symbols' si la page demandée n'est pas autorisée Structure de Base (Layout)- Fournit la barre de navigation, le logo, et le contenu principal de chaque page Interactions Utilisateur - Gère la mise en évidence de la page active, l'affichage du nom d'utilisateur, etc.

37

Développement du Front-End

JavaScript

api.js

Paramétrage de l'URL de l'API- var apiBaseURL = 'http://localhost:8000/index.php'; Fonction apiGet() - Requêtes GET simplifiées vers l'API - Utilise $.ajax() de jQuery Gestion des Succès et Erreurs - En cas de succès, la fonction callback est appelée avec les données - En cas d'erreur, un message est affiché dans la console

38

Développement du Front-End

JavaScript

Upload de SVG et Drag and Drop

Fonctionnalités clés (- Interface de glisser-déposer pour l'upload de fichiers SVG avec jqueryUI) - Vérifications automatiques côté client et côté serveur pour s'assurer que les fichiers sont conformes - Possibilité pour l'utilisateur de renommer le fichier avant l'envoi - Affichage d'une barre de progression pendant le téléchargement Critères de validation côté client - Le fichier doit être au format SVG - Doit contenir une seule couleur : Noir (#000000) Sécurité et Conformité - Les vérifications initiales sont suivies d'une validation supplémentaire côté serveur en PHP - Approche multi-niveaux pour garantir que seuls les fichiers SVG valides et conformes sont téléchargés Avantages - Expérience utilisateur améliorée - Renforce la sécurité de l'application - Conforme aux exigences du cahier des charges

39

Développement du Front-End

JavaScript

Upload de SVG (Back-End)

Rôle du Backend - Valide que chaque fichier SVG téléchargé respecte les critères spécifiques de l'application Méthodologie de vérification - Utilisation de l'expression régulière pour vérifier les attributs 'fill' et 'stroke' - Si une couleur autre que #000000 est trouvée, le fichier est refusé Sécurité et Conformité - Approche en deux étapes : Vérification côté client et côté serveur - Assure que tous les fichiers SVG sont conformes et sécurisés Avantages - Cohérence et qualité de l'application garanties - Niveau supplémentaire de sécurité et de conformité

40

Docker

Service BackendIl est construit à partir du Dockerfile dans le répertoire back et dépend du service de base de données pour son fonctionnement. Service FrontendConstruit à partir du Dockerfile dans le répertoire front. Il dépend du service backend pour son fonctionnement. Service phpMyAdminUtilise l'image officielle de phpMyAdmin pour fournir une interface utilisateur à la base de données. Ports ExposésLes ports 3306, 8000, 80 et 8081 sont exposés pour MariaDB, le backend, le frontend et phpMyAdmin, respectivement, permettant des communications externes.

docker-compose.yml

Mise en Place de la Base de Données (db)Utilise l'image MariaDB version 10.6.5. Les variables d'environnement définissent la base de données, l'utilisateur, le mot de passe, et le plugin d'authentification. Des volumes sont également configurés pour le script d'initialisation SQL et la persistance des données.

41

Docker

Dockerfile

backend

Image de BasePart de l'image php:5.6-apache comme base pour la construction. Installation des DépendancesInstalle diverses extensions PHP et outils nécessaires pour l'application. Extension PDO MySQLNécessaire pour interagir avec la base de données MySQL. Installation de ComposerUtilisé pour gérer les dépendances PHP de l'application. Répertoire de TravailDéfinit /var/www/html/ comme le répertoire de travail dans le conteneur.

42

Docker

Dockerfile

frontend

Image de BaseUtilise l'image php:5.6-apache comme base pour la construction du conteneur. Installation des DépendancesInstalle diverses extensions PHP et outils nécessaires, notamment pour le rendu graphique avec gd. Configuration ApacheActive des modules Apache comme proxy, proxy_http, rewrite et ssl pour personnaliser le comportement du serveur web. Répertoire de TravailCopie le code source de l'application dans /var/www/html/ dans le conteneur. Commande d'ExécutionUtilise apachectl -D FOREGROUND pour démarrer Apache en avant-plan, permettant ainsi au conteneur de rester en fonctionnement.

43

Docker

Dockerfile

000-default.conf

- Définit le dossier racine du serveur web comme /var/www/html. - Les logs d'erreur et d'accès sont enregistrés pour le débogage. - Toutes les requêtes HTTP sont redirigées vers HTTPS. - Utilise le même dossier racine que la configuration HTTP. - SSL est activé pour une connexion sécurisée. - Les chemins vers les fichiers de certificat SSL sont spécifiés. - Les requêtes vers /back sont également redirigées vers le serveur backend.

Ce fichier 000-default.conf permet la mise en place des réglages nécessaires du serveur Apache pour le service frontend.

44

Docker

Dockerfile

.htaccess

Limitation des Adresses IPPar défaut, toutes les adresses IP sont bloquées (Deny from all), sauf 127.0.0.1 (Allow from 127.0.0.1). Cette configuration peut être modifiée pour autoriser l'accès à des employés spécifiques. Redirection des RequêtesUtilise le module mod_rewrite pour rediriger toutes les requêtes vers index.php, en vérifiant préalablement si le fichier ou le répertoire existe déjà.

Le fichier .htaccess permet la mise en place des règles de sécurité et de redirection pour l'application.

45

Documentation

Documentation pour l'API

Où peut-on trouver la documentation ? - Directement dans le dépôt GitHub: docs/illustrator2-1.0.0-resolved.json - SwaggerHub pour une visualisation et interaction en ligne. - Un badge Swagger dans le README.md.

Swagger

La documentation de l'API est essentielle pour une meilleure compréhension et facilité d'utilisation de l'API, elle donne des informations sur les endpoints, les méthodes HTTP, les paramètres d'entrée, et plus encore.

Couverture exhaustiveDétails complets sur les opérations CRUD pour chaque entité de notre API.Schémas de requêtes Pour chaque point de terminaison, des schémas précis décrivent la structure des données requises et les réponses attendues.

Guides d'utilisation Exemples concrets pour faciliter l'intégration et l'utilisation par les développeurs.

46

Compétences non couvertes

Documentation

README.md

DescriptionUne introduction claire au projet "Illustrator2", soulignant son objectif principal et ses fonctionnalités. Prérequis- Liste des outils et logiciels nécessaires. - Instructions pour l'installation sur différentes plateformes, y compris Mac, Windows et Linux. Installation- Instructions étape par étape pour la configuration de l'environnement.- Astuces pour alterner entre le mode local et Docker. Documentation API- Lien direct vers la documentation Swagger de l'API.- Badge Swagger pour validation. Tests- Guide pour exécuter les tests unitaires de l'application.

47

Démonstration

48

Compétences non couvertes

Responsive

Pourquoi?- L'entreprise n'a pas exprimé le besoin d'une version mobile. - L’omission n'est pas un manquement, mais une conséquence des spécificités du projet. Approche responsive envisagée- Utilisation de media queries pour une adaptation aux différentes tailles d'écran. - Priorité à une expérience utilisateur fluide et intuitive. CSS "mobile-first"- Philosophie "mobile-first" pour l'optimisation des appareils mobiles. - Adaptations distinctes pour les écrans tablette et desktop.

49

En cours

HTTPS

Pourquoi ?Le principal défi est lié à l'utilisation de PHP 5.6.40. Cette version qui commence à être obsolète peut rencontrer des problèmes lors de l'interaction avec des services modernes qui utilisent les normes SSL/TLS les plus récentes. Bien que cela ne soit pas directement lié à la mise en place d'HTTPS pour le site lui-même, cela peut poser des problèmes lors de la communication avec des services externes sécurisés.Nom de domainePosséder un nom de domaine est essentiel pour la mise en place d'HTTPS, car les certificats SSL/TLS sont émis pour des domaines spécifiques.

Obtention d'un certificat SSLUtiliser Let's Encrypt ou un autre fournisseur pour obtenir un certificat SSL. Ce certificat doit être lié à votre nom de domaine spécifique. Configuration du serveurAjuster la configuration du serveur web pour inclure les chemins vers les fichiers du certificat SSL et la clé privée. Forcer les connexions à utiliser HTTPS, redirigeant ainsi tout trafic HTTP vers HTTPS. ValidationAprès la mise en œuvre, vérifier la validité du certificat et la configuration SSL en utilisant des outils en ligne comme SSL Labs.

50

Conclusion

Conclusion

Défis techniquesUtilisation imposée de PHP 5.6.40 sans framework moderne.Défis organisationnels Gestion du temps et des ressources. Utilisation d'outils tels que Docker et GitHub pour la gestion du code et l'environnement de développement. Nécessité d'une attention particulière à la planification, l'organisation du code et la documentation. Apprentissages et réalisations Malgré les contraintes, approfondissement de la compréhension de diverses technologies. Familiarisation avec de nombreux outils essentiels. Gain en maturité, endurance et résilience dans le développement logiciel. Regard rétrospectif Chaque défi a offert une opportunité d'apprentissage et de croissance. Les compétences techniques et organisationnelles acquises lors de ce projet seront inestimables pour l'avenir.

51

Thanks

Merci de m'avoir accordé votre temps et votre attention

Any questions?