MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

Année Universitaire : 2019-2020
Projet de Fin d’Études
En vue de l’obtention du
DIPLOME DE LICENCE PROFESSIONNELLE
Systèmes d’Information et Génie Logiciel
MISE EN PLACE D’UNE
Progressive Web App
Pour la Gestion des Rapports d’Audit
Réalisé par : Encadré par :
ZERRYI ANDALOUSSI Oussama Mr. SEGHIOUER Hamid
Pr. YAHYAOUY Ali
Membres de jury :
▪ Mr. SEGHIOUER Hamid Encadrant Société
▪ Pr. YAHYAOUY Ali Encadrant FSDM
▪ Pr. SABRI My Abdelouahed Enseignant FSDM
▪ Pr. RIFFI Jamal Enseignant FSDM
▪ Pr. MAHRAZ Med Adnane Enseignant FSDM

Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
2| Oussama ZERRYI ANDALOUSSI2019/2020
DÉDICACE
Toutes les lettres ne sauraient trouver les mots qu’il faut… Tous les
mots ne sauraient exprimer la gratitude, l’amour, le respect, la
reconnaissance…etc. Aussi, c’est tout simplement qu’on dédie ce
travail…
À mes chers parents
Aucune dédicace ne saurait exprimer mon respect, mon amour
éternel et ma considération pour les sacrifices que vous avez consenti
pour mon instruction et mon bien-être. Je vous remercie pour tout le
soutien et l’amour que vous me portez depuis mon enfance et j’espère
que votre bénédiction m’accompagne toujours. Puisse Dieu, le Très
Haut, vous accorder santé, bonheur et longue vie et faire en sorte que
jamais on ne vous déçoive.
À toutes les personnes qui ont participé à l’élaboration de ce
travail et à tous ceux que j’ai omis de citer.

REMERCÎMENT
En guise de reconnaissance, Je tiens à témoigner mes sincères
remerciements à toutes les personnes qui ont contribués de près ou de loin au bon
déroulement de mon projet fin d’étude malgré la difficile période de COVID 19, et
à l’élaboration de ce modeste travail.
Mes sincères gratitudes à notre professeur Mr SABRI pour la qualité de son
enseignement, ses conseils et son intérêt incontestable qu’il porte à tous les
étudiants.
Je tiens aussi à remercier tout le corps professoral de la Faculté des Sciences
Dhar El Mehraz (spécialement la licence professionnelle de Systèmes
d'Information et Génie Logiciel) pour le travail énorme qu’il effectue pour nous
créer les conditions les plus favorables pour le déroulement de nos études.
Dans l’impossibilité de citer tous les noms, mes sincères remerciements vont
à tous ceux et celles, qui de près ou de loin, ont permis par leurs conseils et leurs
compétences la réalisation de ce projet de fin d’études.
Enfin, je ne saurai oublier de remercier l’ensemble des personnes qui m’ont
aidé et précisément : le professeur Abdelouahed SABRI le coordinateur notre
filière et Mr YAHYAOUY Ali mon encadrant pédagogique de stage ainsi que mon
encadrant de stage Mr Hamid SEGHIOUER, pour leur patience, leurs conseils
pleins de sens et pour le suivi et l’intérêt qu’ils ont portaient à mes travaux.

RÉSUMÉ
L’objectif principal de ce projet est l’élaboration d’une application web
progressive fonctionnel sur la plateforme mobile qui permet
essentiellement à gérer les rapports d’audit et de contrôle, d’assurer la
sureté et la sécurité des données, de gérer les auditeurs et les clients, de
suivre les géolocalisations des rapports crées, la génération dynamique des
rapports en PDF et les statistiques de tous les processus précédents.
ABSTRACT
The main objective of this project is to develop a progressive web
application functional on the mobile platform which is mainly used to
manage audit and control reports, ensure data security and safety,
managing auditors, managing clients, tracking geolocations of reports
created, generate dynamic PDF reports and statistics of all previous
processes.

TBLE DE MATIÈRES
DÉDICACE..................................................................................................................................... 2
REMERCÎMENT ............................................................................................................................ 3
RÉSUMÉ ......................................................................................................................................... 4
Abstract ........................................................................................................................................... 4
Tble de matières ............................................................................................................................. 5
INTRODUCTION.......................................................................................................................... 8
CH – 1 : Contexte générale du projet .................................................................................................. 9
1) Présentation globale de l’entreprise........................................................................................ 9
a) Lieu de la société BSA CONSEIL............................................................................................ 9
b) Présentation de la société................................................................................................... 9
c) Les missions de l’entreprise............................................................................................... 10
d) Les valeurs de l’entreprise................................................................................................. 11
e) Les partenaires de BSA CONSEIL ........................................................................................ 11
f) Description des services de l’organisation.......................................................................... 13
2) L’étude de l’existant ............................................................................................................. 16
3) Plan suivi pour arriver à la solution ....................................................................................... 18
1) Les éléments intervenants ................................................................................................ 18
a) Diagramme de Gantt......................................................................................................... 18
CH – 2 : Analyse et Conception......................................................................................................... 19
1) Les exigences fonctionnelles ................................................................................................. 19
2) Les exigences techniques...................................................................................................... 19
3) La conception adoptée.......................................................................................................... 20
a) Diagram de cas ................................................................................................................. 20
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision
globale du comportement fonctionnel d'un système logiciel ..................................................... 20
b) Diagramme de classe ....................................................................................................... 21
c) Modèle Logique de Données ............................................................................................. 22

2) Structure de développement ................................................................................................ 24
d) Les outils et logiciels du développement............................................................................ 24
b) Les package utiliser........................................................................................................... 30
CH – 3 : Interfaces de l’application réalisée....................................................................................... 31
1) Logo d’application mobile et web ......................................................................................... 31
a) Logo site web et desktop................................................................................................... 31
b) Logo mobile...................................................................................................................... 31
2) Les interfaces d’identification et d’authentification............................................................... 31
a) Se connecter..................................................................................................................... 31
b) Récupération de mot de passe .......................................................................................... 32
c) L’email de récupération du compte ................................................................................... 33
3) L’espace de gestion de l’application. ..................................................................................... 34
a) Page accueil...................................................................................................................... 34
b) Page à-propos de l’application .......................................................................................... 34
c) Page de gestion de profile................................................................................................. 35
4) Les interfaces de gestion des utilisateurs et ses privilèges...................................................... 36
a) Page de gestion des administrateurs ................................................................................. 36
b) Page de gestion des auditeurs ........................................................................................... 37
c) Page de gestion des auditeurs ........................................................................................... 38
5) Les interfaces de gestion des rapports................................................................................... 39
a) Page de gestion des rapports............................................................................................. 39
b) Page d’ajout, modification et consultation du rapport ....................................................... 40
c) Les pièces jointes du rapport............................................................................................. 40
d) Page des remarques du rapport......................................................................................... 42
e) Page de trace des rapports................................................................................................ 43
f) Page de gestion des attachements des rapports................................................................. 43
g) Le rapport sous la forme PDF générer................................................................................ 44
h) L’email envoyer au client contenons le rapport.................................................................. 45
6) La progressive web app sur mobile et desktop....................................................................... 45
a) Desktop apparence........................................................................................................... 45
b) Mobile apparence............................................................................................................. 46

CH – 3 : Rapport de sécurité de l’application d’audit......................................................................... 48
1) Présentation de problématique ............................................................................................ 48
2) Les solutions implémenter.................................................................................................... 48
Conclusion et Perspective............................................................................................................ 50
Table de figures............................................................................................................................ 52
List des tables ............................................................................................................................... 54
Table d’acronymes ....................................................................................................................... 55
WEBOGRAPHIE / bibliographie ........................................................................................................ 56

INTRODUCTION
Dans le cadre de ma formation de la licence professionnelle de
Systèmes d'Information et Génie Logiciel, j’ai eu l’opportunité d'effectuer un
stage de fin d’études.
Ce dernier est pour l’objectif de faire synthèse de mes connaissances
théoriques, d'affiner ma Perception de l'entreprise, d’en retirer une
expérience ainsi qu'une analyse globale et approfondie de l'entreprise et de
son environnement, tout en me préparant dans les meilleures conditions à
la vie professionnelle.
Pour ce stage j'ai décidé d'orienter mon choix vers une entreprise
conseil, formation et audit, BSA CONSEIL – Rabat qui a besoin de développer
des applications web pour ses clients, malgré les conditions de confinement
causé par COVID 19, j’ai pu effectuer mon stage à distance en coordonnant
avec des visioconférences et des réunions en ligne. D’où j’ai eu l’occasion de
créer une application web progressive pour un client de l’entreprise.

CH – 1 : Contexte générale du projet
1) Présentation globale de l’entreprise
Dans le cadre de mon stage de fin d’études au sein de la société BSA
CONSEIL, que je l’ai effectué à distance. J’été chargé de développer une solution
informatique pour leur client Performance Qualité.
a) Lieu de la société BSA CONSEIL
b)Présentation de la société
BSA CONSEIL est une entreprise de conseil, formation et audit qui propose
de différentes prestations de conseil, elle a pour objectif d'accompagner ses
partenaires pour l'optimisation de leurs ressources, et la planification de leurs
projets jusqu'à l’aboutissement, elle propose son expertise qui couvre plusieurs
domaines à savoir :
• Systèmes de management de la qualité SMQ 9001
• Systèmes de management de l'environnement SME 14001
• Systèmes de management de la santé sécurité au travail SMSST 45001
• Systèmes de management de la sécurité de l'information SMSI 27001
Figure 1: lieu géographique de la société BSA CONSEIL

• Systèmes de management de la continuité d'activité SMCA 22301
c) Les missions de l’entreprise
Fondé en 2015, BSA CONSEIL prend en charge l'accompagnement de ces
clients pour la rationalisation et l'optimisation de leurs ressources. En utilisant
des outils et des techniques modernes et innovantes. Fort par son équipe
d'experts, BSA CONSEIL assiste depuis la planification de projet jusqu'à son
aboutissement.
Dénomination : BSA CONSEIL
Forme juridique : Société à responsabilité limitée
Date d'immatriculation : 09–02-2015
Tribunal : RABAT
Activité : Conseil, Formation ET Audit
N° RC : 108277
N° de ICE : 001869871000043
Capital : 100 000 MAD
Téléphone : +212 537 671 885
Figure 2: Logo de la société BSA CONSEIL
Tableau 1: Les information de société

d)Les valeurs de l’entreprise
Confiance, Proximité, Rigueur et Créativité reflètent l’entreprise
responsable que BSA CONSEIL aspire à devenir sur le plan professionnel. Ces
valeurs sont au cœur de chacune de ces décisions. Ainsi chez BSA CONSEIL tout
le monde se considère responsable de tout ce que l’entité entreprenne. BSA
CONSEIL a pour principe de s’impliquer totalement dans les projets qui lui sont
confiés et souvent au niveau même de leur définition. La relation entre
l’entreprise et ses clients dépasse le cadre purement commercial, elle se caractérise
plutôt comme un partenariat. Il est hors de question pour BSA CONSEIL de livrer
un service spécifique mal définie ou non viable. Les pratiques commerciales
obscures ne font pas partie de la culture de BSA CONSEIL. Cela passe
inévitablement par une forte implication et une très bonne connaissance
préalable du domaine d’activité de ses clients.
e) Les partenaires de BSA CONSEIL
Partenaires Logo Mission Description
AMENDIS
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI AMENDIS et
formation LI 27001
APM TERMINALS
FORMATION
THERMOGRAPHIE
ET ULTRASON
Formation
technique en
thermographie et
formation technique
en ultrasons
CALEX AUDIT À BLANC
9001
Préaudit 9001 pour
la préparation à la
certification (en
partenariat avec
Performance
Qualité)

CMS AUDIT À BLANC
9001
Préaudit 9001 pour
la préparation à la
certification (en
partenariat avec
Performance
Qualité)
DENSO FORMATION
THERMOGRAPHIE
Formation
technique en
thermographie
HORIZON AUDIT DE
CERTIFICATION
Audit de
certification 27001
:2013 (CertiTrust)
MAROC
TELECOM
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI LONACI et
formation
Certifiante LI 27001
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement)
MATIS FORMATION
Formation en
gestion de projets,
gestion du temps et
des priorités
MUGEF-CI
SMSI & FOR Mise en
place du SMSI et
SMCA MUGEF-CI et
formation
et LI 22301
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement
MATION 27001
:2013
OC¨P INGENIERIE DE
FORMATION
Refonte de
l'ingenierie de
formation (en
partenariat GIZ et
ValueStream)

f) Description des services de l’organisation
Système de Management de la Qualité SMQ ISO 9001
BSA CONSEIL accompagne ses clients à mettre en place leur
système de management de la qualité « SMQ » conformément à la
norme ISO 9001 afin de garantir une satisfaction totale de la
clientèle, et d'assurer la disposition à répondre aux exigences des
parties prenantes. L’entité assiste sa clientèle tout au long du
SAFRAN FORMATION
Formation en
gestion de projets,
gestion du temps et
des priorités
FORMATION
TBS FORMATION
Formation au profit
des filières semaine
et weekend
TIZIMAR REENGINEERING
ET FORMATION
Reengineering des
entrepôts de
stockage avec
recalcul des surfaces
techniques et
dimensionnement
du parc de
manutention et
formation en
management
LONACI
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI LONACI et
formation
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement)
Tableau 2: Les partenaire de la société BSA CONSEIL

déploiement de votre Système de Management jusqu'à l'obtention de la
certification ISO 9001.
Systèmes de Management de l'Environnement SME ISO 14001
BSA CONSEIL met en place un système de management de
l'environnement SME conforme à la norme ISO 14001, afin de
faciliter pour le Top Management la prise de décision importante
et à anticiper les problèmes liés aux impacts environnementaux
des activités de l'organisme. Le SME est la confirmation de
l'engagement de l'entreprise à respecter l'environnement et à se
conformer aux exigences de ses parties prenantes et de ses
collaborateurs.
Systèmes de Management de la Santé Sécurité au Travail SMSST ISO 45001
BSA CONSEIL vise l’accompagnement dans le déploiement du Système
de management de la santé et de la sécurité au travail (SMSST)
conformément à la norme ISO 45001. Cela permet de veiller à la
protection des collaborateurs internes et externes, de se
conformer aux exigences réglementaires et contractuelles, ainsi
qu’approuvé l'engagement de l'organisme pour une
amélioration continue.
Système de Management de la Sécurité de l'Information SMSI ISO/IEC 27001
BSA CONSEIL accompagne à mener votre projet de ses clients de la mise
en place ou de la certification d'un système de management de la
sécurité de l'information « SMSI » conformément à la norme ISO
27001 afin de garantir une maîtrise approfondie des risques et des
dispositifs normatifs, contractuels et légaux applicables. Un suivi
qui vous permet de vous assister tout au long du déploiement de
votre Système de Management de la Sécurité de l'Information qui

assure la mise en œuvre et le suivi de la sécurité de l'information dans votre
entreprise.
Systèmes de Management de la continuité d'activité SMCA ISO 22301
BSA CONSEIL assiste ses clients pour assurer la sauvegarde du
patrimoine de l'entreprise qui devient une nécessité stratégique pour tout
organisme. Avec l'avènement des systèmes d'information comme
acteurs majeurs dans l'activité, aucune entreprise n'est à l'abri
d'un arrêt d'activité de ses services vitaux. Le système de
management de la continuité d'activité (SMCA) est étroitement
lié à la sécurité du personnel et la protection du patrimoine, une
analyse profonde des risques liés à ses actifs est la solution pour
mener à bien cette démarche.
Management des risques liés à la Sécurité de l'Information SMSI ISO/IEC
27005
La norme ISO 27005 a pour objectif de procurer aux organisations un
guide pour la mise en place de la sécurité de l'information basée sur une
approche judicieuse de gestion du risque. Elle représente un appui aux
concepts généraux du SMSI 27001, ce qui complète les exigences concernant la
gestion des risques (clause 4.2). BSA CONSEIL accompagne ses collaborateurs
dans la mise en place de cette démarche de
gestion des risques liés à la sécurité de
l'information, avec une vision durable
permettant de faire face aux risques en
continu.

2) L’étude de l’existant
Dans cette partie, nous allons essayer de projeter la lumière sur les grandes
étapes de la réalisation de notre application web, commençant par l’étude de besoin
jusqu'à la réalisation des différentes fonctionnalités de l’application web d’audit.
J’ai été chargé de réaliser un projet, sous forme d’une application web
progressive pour la société performance qualité ; la société opère 2002 dans le
conseil, la formation et l'audit QHSE et RSE.
Dans le contexte de l’entreprise, l’auditeur vérifie les machines et leur qualité
ensuite il remplit un rapport papier (voir annexe 1) généralement à la maison avec
un risque d'oubli. La société Performance Qualité veut le forcer à remplir le rapport
au terrain du travail (vérification de la géolocalisation) par une tablette pour
l'objectif d'envoyer le rapport établi au client du cabinet d’audit après la validation
par un administrateur ou un auditeur en chef.
La société avait une application développée avec un Framework Laravel
(lumen) à propos de textile et elle a essayé de l’adopter à ce contexte d’audit et de
contrôle, le code source du projet contient des traces d’adaptation à ce sujet ainsi
quelque table dans la base de donner.
En fin la société a décidé d’orienter le choix vers une application native PHP
progressive pour que ça soit fonctionnel au différents plateforme desktop mobile
et web en se basant sur la même Template et en intégrant les différents
fonctionnalités nessecaire.
PWA : est une application web qui consiste en des pages ou des sites web, et qui
peuvent apparaître à l'utilisateur de la
même manière que les applications
natives ou les applications mobiles. Ce
type d'applications tente de combiner les
fonctionnalités offertes par la plupart des
Figure 3: PWA logo

navigateurs modernes avec les avantages de l'expérience offerte par les appareils
mobiles.
La base de données crée utilise un ancien moteur de stockage MyISAM de
MySQL qui s'appuie sur d'énormes tables qui ne modifient pas fréquemment les
données.
Ce dernier ne permet
pas de respecter les formes
normales du relationnel et
les contraintes d’intégrités
référentielles ainsi que les
relations One to One, One to
Many.
Figure 4: MLD donner par l'entreprise BSA CONSEIL
Figure 5: Comparaissent entre InnoDB et MyISAM

3) Plan suivi pour arriver à la solution
1) Les éléments intervenants
• Maître d'œuvre : Bureau d'études Performance Qualité
• Maître d'ouvrage : BSA Conseil
• Développeur de la solution : ZERRYI ANDALOUSSI Oussama
• Livrable : Progressive web App de Gestion des Rapports d’audit et contrôle
cross plateforme.
a) Diagramme de Gantt
Est un outil utilisé (souvent en complément d'un réseau PERT) en
ordonnancement et en gestion de projet et permettant de visualiser dans le temps
les diverses tâches composant un projet. Il s'agit d'une représentation d'un graphe
connexe, value et orienté, qui permet de représenter graphiquement l'avancement
du projet.
Figure 6: Diagramme de Gantt

CH – 2 : Analyse et Conception
1) Les exigences fonctionnelles
L’application doit assurer l’accéder aux quatre acteurs suivants : admin –
auditeur – auditeur chef – client. Chaque un de ces acteurs de system doit
s’authentification pour accéder à son espace.
L’administrateur de system doit avoir la possibilité de gérer les utilisateurs
de system et les rapports élaborer par les auditeurs et qui va s’envoyer aux clients
après la validation. L’admin aussi doit consulter le lieu d’élaboration du rapport
et la date de création ou modification. Les questions des pièce jointe des rapports
peux se gérer par ce dernier ainsi sa visibiliser.
. L’auditeur doit avoir la main de gérer ses rapports et consulter les
remarques écrites par le validateur du rapport.
L’auditeur chef doit gérer les rapports par sa spécialiser et doit avoir la
possibilité de valider les rapports et mette des remarques.
Le client doit avoir la main pour consoler ses rapports et leurs statuts et
recevoir des notifications et un email pour ses rapports valider ainsi de
télécharger le rapport dans son espace.
Le système doit envoyer des notifications aux auditeurs à propos les rapports
non valides depuis deux jours et aux validateurs après sept jours de sa création.
2) Les exigences techniques
• Récupération du mot de passe
• Récupération de la géolocalisation d’auditeur
• Générer PDF dynamiquement partir des données
• Envoyer le rapport établi par courriel
• Up/download des fichier (image - pdf)
• L’application doit être installable sur Android plateforme (PWA mobile)

3) La conception adoptée
a) Diagram de cas
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés
pour donner une vision globale du comportement fonctionnel d'un système
logiciel
Figure 7: use case d'administrateur

b) Diagramme de classe Figure 9: use case d'auditeur, auditeur en chef et client
Figure 8: Diagramme de classe

c) Modèle Logique de Données
MLD : est la modélisation logique des données qui tient compte du niveau
organisationnel des données. Il s'agit d'une vue logique en termes d'organisation
de données nécessaires à un traitement.
On a adopté les documents JSON avec le relationnel de MySQL qui nous
permet d’enregistrer cette forme dans la base de données et d’interroger le SGBD
avec le SQL pour faire le mapping des données. Cette fonctionnalité vient avec le
nouveau MySQL 5.7.0.
Document JSON : Un Document JSON comprend deux types d'éléments structurels :
• Des ensembles de paires « nom » (alias « clé ») / « valeur »
• Des listes ordonnées de valeurs Ces mêmes éléments représentent trois types de
données :
Figure 10: MLD réaliser

• Des objets
• Des tableaux
• des valeurs génériques de type tableau, objet, booléen, nombre, chaîne de
caractères ou null.
Le mapping des données se fait par des fonctions intégrées dans le SGBD MySQL
présenté dans le tableau suivant.
Figure 12: Type de données JSON en MySQL SGBD
Figure 13: La représentation de document JSON Figure 11: La représentation des pièces jointe du rapport

JSON Fonction Reference
2) Structure de développement
d)Les outils et logiciels du développement
HTML : L’HyperText Markup Langage, généralement abrégé HTML, est le
langage de balisage conçu pour représenter les pages web. C’est un langage
permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également
de structurer sémantiquement et logiquement et de mettre en forme le
contenu des pages, d’inclure des ressources multimédias dont des images,
des formulaires de saisie et des programmes informatiques.
CSS : Cascading Style Sheets, est un langage de feuille de style utilisé pour
décrire la présentation d'un document écrit en HTML ou en XML .CSS
décrit la façon dont les éléments doivent être affichés à l'écran, sur du
papier, en vocalisation, ou sur d'autres supports.
Figure 14: Fonction de manipulation des documents JSON dans MySQL
Figure 15: Logo HTML
Figure 16: Logo css

JavaScript : est un langage de programmation de scripts
principalement employé dans les pages web interactives mais aussi
pour les serveurs2 avec l'utilisation (par exemple) de Node.js.
JQuery : est une bibliothèque JavaScript libre et
multiplateforme créée pour faciliter l'écriture de scripts côté
client dans le code HTML des pages web.
Bootstrap : est une collection d'outils utiles à la création du design (graphisme,
animation et interactions avec la page dans le navigateur, etc.) de sites et
d'applications web. C'est un ensemble qui contient des codes
HTML et CSS, des formulaires, boutons, outils de navigation et
autres éléments interactifs, ainsi que des extensions JavaScript
en option.
Adobe Photoshop : est un logiciel de retouche d'image et de création graphique
édité par la société Adobe. Lancé à l'origine comme un simple logiciel
de retouche d'image, ses fonctionnalités se sont vues améliorées et
complétées au fil des années et des versions. Adobe Photoshop
constitue maintenant l'outil de base dans la plupart des secteurs de
l'industrie graphique.
PhpStorm : est un éditeur pour PHP3, HTML, CSS et JavaScript4, édité
par JetBrains ; Il permet d'éditer du code PHP pour les versions allant de
la 5.3 à la 7.4 (v-2020.4.0 ultimate).
PHP : HyperText Preprocessor, est un langage de programmation
libre, principalement utilisé pour produire des pages Web
dynamiques via un serveur http (v-7.4.0).
MySQL : est un système de gestion de bases de données relationnelles
(SGBDR) v-5.7.0.
Figure 17: Logo JavaScript
Figure 18: Logo JQuery
Figure 19: Logo get Bootstrap
Figure 20: Logo
Photoshop
Figure 21: Logo PHP Storm IDE
Figure 22: Logo PHP
Figure 23: Logo MySQL

Api : (Application Programming Interface) est un ensemble normalisé de
classes, de méthodes, de fonctions et de constantes qui sert de façade par
laquelle un logiciel offre des services à d'autres logiciels. Elle est offerte par
une bibliothèque logicielle ou un service web, le plus souvent
accompagnée d'une description qui spécifie comment des programmes
consommateurs peuvent se servir des fonctionnalités du programme
fournisseur.
JSON : (JavaScript Object Notation) est un format de données textuelles
dérivé de la notation des objets du langage JavaScript. Il permet de
représenter de l’information structurée comme le permet XML.
On développer un web service PHP sous forme d’une api charger de
gérer la couche métier de l’application et l’interaction avec base de
données. La communication avec l’api est assurée avec la forme
JSON.
Fetch API : fournit une interface pour récupérer des
ressources (y compris sur le réseau). Cela semblera familier
à tous ceux qui ont utilisé XMLHttpRequest, mais la nouvelle API fournit un
ensemble de fonctionnalités plus puissant et plus flexible.
Figure 24: Shema de fonctionement d'une api
Figure 25: Logo JSON

ES6 : est un ensemble de normes concernant les langages de programmation de
type script et standardisées par Ecma International dans le cadre de la
spécification ECMA-262. Il s'agit donc d'un standard, dont les
spécifications sont mises en œuvre dans différents langages de script,
comme JavaScript ou ActionScript. C'est un langage de programmation
orienté prototype.
Geolocation API : permet à l'utilisateur de fournir son emplacement aux
applications Web s'il le souhaite. Pour des raisons de confidentialité, il est
demandé à l'utilisateur l'autorisation de signaler les informations de localisation.
Les extensions Web qui souhaitent utiliser l'objet de géolocalisation doivent
ajouter l'autorisation "géolocalisation" à leur manifeste. Le système d'exploitation
de l'utilisateur invite l'utilisateur à autoriser l'accès à l'emplacement la première
fois qu'il est demandé.
.htaccess : (accès hypertexte) est un fichier de configuration de niveau
répertoire pris en charge par plusieurs serveurs Web, utilisé pour la
configuration des problèmes d'accès au site Web, tels que la redirection
d'URL, le raccourcissement d'URL, le contrôle d'accès (pour différentes
pages Web et différents fichiers), et plus. Le « point » (point ou point) avant
le nom de fichier en fait un fichier caché dans les environnements basés sur
Unix.
Figure 26: Logo ECMA SCRIPT

PWA : se consulte comme un site web classique, depuis une URL sécurisée mais
permet une expérience utilisateur similaire à
celle d'une application mobile, sans les
contraintes de cette dernière (soumission aux
App-Stores, utilisation importante de la
mémoire de l'appareil…).
Elles proposent de conjuguer rapidité,
fluidité et légèreté tout en permettant de limiter
considérablement les coûts de développement4 :
plus besoin de faire des développements
spécifiques pour les applications en fonction de
chacune des plateformes : iOS, Android,
Windows…
Comparaison entre native app, responsive web site and PWA
Manifeste : un fichier contenant des métadonnées pour un groupe de
fichiers d'accompagnement qui font partie d'un ensemble ou d'une unité
cohérente. Par exemple, les fichiers d'un programme informatique peuvent
Figure 27: Information sur PWA
Tableau 3: Comparaissent entre native app, responsive et progressive web app

avoir un manifeste décrivant le nom, le numéro de version, la licence et les
fichiers constitutifs du programme.
Service worker : est un fichier JavaScript qui fonctionne comme un type de
travailleur Web. Ils fonctionnent séparément du thread principal du
navigateur pour gérer les notifications push, synchroniser les données en
arrière-plan, mettre en cache ou récupérer les demandes de ressources,
intercepter les demandes réseau et recevoir des mises à jour centralisées.
Figure 28: Le fichier Manifest
Figure 29: Detection du service worker sur le navigateur

Les employés de service sont utilisés pour donner aux applications
Web progressives la capacité de fournir les hautes performances et la riche
expérience des applications mobiles natives, avec le faible espace de
stockage, les mises à jour en temps réel et une meilleure visibilité sur les
moteurs de recherche des applications Web traditionnelles.
b)Les package utiliser
Composer : est un logiciel gestionnaire de dépendances libre écrit en PHP.
Il permet à ses utilisateurs de déclarer et d'installer les bibliothèques dont
le projet principal a besoin.
PHP Mailer : est une bibliothèque logicielle d'envoi de courriels en PHP. En
effet, envoyer un courriel en code natif exige un haut niveau de
connaissance des normes SMTP1, du format des courriels (tels que
l'HTML et le retour chariot), et des vulnérabilités d'injection pour
spammer.
DOMPDF : permet de générer des fichiers PDF à partir d'une page HTML.
C'est une alternative à HTML2PDF, qui lui est basé sur TCPDF.
Figure 30: Logo Composer
Figure 31: Logo du package php Mailer

CH – 3 : Interfaces de l’application réalisée
1) Logo d’application mobile et web
a) Logo site web et desktop
b) Logo mobile
2) Les interfaces d’identification et d’authentification
a) Se connecter
Cette interface permet aux utilisateurs de
se connecter à l’espace de gestion.
Cette dernière génère des exceptions sous
forme d’alerte si les données non validé ou le
mot de passe est incorrect.
Cette interface donne aussi la possibilité
d’accès à la page de récupération de compte en
cas d’un le mot de passe oublier.
Figure 32: Logo desktop et web site de l'application réalisée
Figure 33: Logo d'application Android
Figure 34: Formulaire d'authentification

L’exception levée en cas d’erreur de mot de passe
b) Récupération de mot de passe
La récupération du compte en cas de perte du mot de passe se fait par l’envoi
de token à travers l’email si le compte est déjà existé, pour assurer une sécurisation
pour tous les utilisateurs de l’application.
Message d’information :
Figure 35: Alerte aux cases d'erreur
Figure 37: Formulaire de récupération du mot de passe
Figure 36: alerte d'envoie avec succès

c) L’email de récupération du compte
L’email contient un lien qui fait une redirection vers
la page de réinitialisation de mot de passe dans
l’application avec un token intégré dans la requête http.
Figure 38: L’apparence de courrier dans la boit
Figure 39: L'email de récupération du mot de passe
Figure 40: Formulaire de réinitialisation de mot de passe

3) L’espace de gestion de l’application.
a) Page accueil
À gauche de la page, il existe un bar de navigation personnalisé par
rapport à chaque rôle d’utilisateur.
En haut de page un bar contient un bouton de notification et un nom
d’utilisateur connecté, avec une liste des options pour consulter le profile
ou se déconnecter de votre espace.
Au centre du page, il existe des statistiques personnalisées de site pour
donner une vision sur état des actions fêtent dans l’espace.
b)Page à-propos de l’application
Figure 41: Accueil page
Figure 42: À-propos page

c) Page de gestion de profile
Elle Permet de gérer les données du compte et de changer le mot de passe
Figure 43: Profile page

4) Les interfaces de gestion des utilisateurs et ses privilèges
a) Page de gestion des administrateurs
Elle permet d’ajouter, éditer, supprimer et désactiver ou activer un
compte utilisateur.
Formulaire d’ajout d’un administrateur
Message de confirmation pour désactiver ou activer un utilisateur avec le
message de validation et de suppression
Figure 44: section de gestion des administrateurs
Figure 45: Formulaire d'ajout des admins
Figure 46: Alerte de confirmation

b)Page de gestion des auditeurs
En tant qu’administrateur vous pouvez gérer tous les comptes auditeurs
dans votre espace.
Formulaire d’ajout ou modification des auditeurs selon leurs spécialités.
Figure 47: Section de gestion des auditeurs
Figure 48: Formulaire d'ajout d'un auditeur

c) Page de gestion des auditeurs
En tant qu’administrateur vous pouvez gérer tous les comptes clients créent
dans l’espace.
Le Formulaire d’ajout et de modification des clients est élaboré selon des
différents statuts à savoir : confiance, attention et black listes.
Figure 49: Section de gestion des clients
Figure 50: Formulaire de manipulation de client

5) Les interfaces de gestion des rapports
a) Page de gestion des rapports
En tant qu’admin, auditeur, auditeur chef ou client vous pouvez accéder à
vos rapports par des privilèges qui limite l’accès où la faisabilité d’une opération.
En générale vous pouvez convertir cette liste en PDF, l’imprimer ou la copier
sous forme de texte en cliquant sur les boutons convenables.
Voilà la liste des opérations faisable par l’administrateur.
Figure 51: Section de gestion des rapports
Figure 52: Menu des options du rapport

b)Page d’ajout, modification et consultation du rapport
Cette page contient les données liées au rapport ainsi ses pièces à jointe.
c) Les pièces jointes du rapport
Les pièces attachées au rapport contiennent des questions d’audit et de
contrôle générés automatiquement d’apprêt un model sous forme d’un document
JSON.
Figure 53: Section de manipulation du rapport
Figure 54: Identification & CMU : Caractéristiques pièce jointe

Voilà les différentes pièces.
Figure 56:Inspection du Palan pièce jointe Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe
Figure 58: Aspect Documentaire pièce jointe
Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE
(Indiquer Conforme ou Non conforme) pièce jointe
Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe

d)Page des remarques du rapport
En tant qu’admin ou auditeur en chef vous pouvez laisser des remarques à
l’auditeur du rapport a fin de lès pris en compte.
Le formulaire d’ajout des remarques qui contient le titre est une description
avec des option de mise en forme le texte.
Figure 61: Espace des remarques
Figure 60: Formulaire d'ajout d'une remarque

e) Page de trace des rapports
Elle Permet de donner à l’admin des informations sur la date, le lieu,
l’utilisateur créer ou modifier le rapport.
f) Page de gestion des attachements des rapports
Cette page gère toutes les questions liées à chaque attachement du rapport
avec l’option de modification de la visibilité dans le rapport générer.
Figure 62: L'espace de trace des rapports
Figure 63: L'espace de gestion des questions des pièces jointes

Formulaire d’ajout des questions.
g) Le rapport sous la forme PDF générer
Voir l’annexe 2.

h) L’email envoyer au client contenons le rapport
Le courrier envoyer jointe un fichier PDF
6) La progressive web app sur mobile et desktop
a) Desktop apparence
La boite de dialogue pour installer sur le desktop
Figure 64: L'email envier au client
Figure 65: Boite de dialogue d'installation

b)Mobile apparence
Le processus d'installation de PWA sur Android.
Figure 66: PWA sur le Desktop
Figure 69: Boite de dialogue sur
Android de suggestion
Figure 68: Boite de dialogue sur
Android d'installation
Figure 67: Alerte d'information de
processus

Figure 71: Fenêtre d'installation Figure 72: Fenêtre d'ouverture Figure 70: Splash screen d'application
Figure 73: L'apparence de PWA dans l’Android

CH – 3 : Rapport de sécurité de l’application d’audit
1) Présentation de problématique
La sécurité des applications Web est devenue un enjeu stratégique aussi
important que les fonctionnalités ou l’ergonomie de toutes applications
élaborées, d’ailleurs les utilisateurs y attachent de plus en plus d’importance.
D’où la nécessité de la conception d’une partie sécurité de notre projet à vue le
jour.
2) Les solutions implémenter
• Développement d’un système d’authentification par le hachage des mots de
passe en gérant les exceptions lever.
• Système de réinitialisation des mots de passe par token envoyer par email à
l’utilisateur au cas d’oubli.
• Centralisation de la couche logique et DAO dans l’api à travers un seul
contrôleur qui gère les actions demandées.
• Limitation des actions fournies par API développé au cas d’un utilisateur non
authentifier.
• Implémentation d’un system de filtrage des champs personnalisés qui permet
d’assurer les données entrées par les utilisateurs.
• Assainir (sanitinzing) des données enregistrées dans la base de données pour
prévenir les vulnérabilités XSS.
• La préparation des requêtes SQL en communication avec la base de données
pour prévenir les vulnérabilités d’injection SQL.
• Le filtrage dynamique des champs (question et réponse) des rapports.
• Développement d’un système de routage sécurisé en restriction l’accès direct aux
pages.

• Redirection vers des pages des erreurs en cas d’une demande de page non
autorisé ou inexistante
• Le traçage d’emplacement des rapports rédigées.
• Implémentation de l’approche : action pas permission.
• La configuration de serveur pour retractionner l'accès au :
o Dossier et ficher des bibliothèques utiliser par l’application ‘/vondor’.
o Dossier et ficher de configuration de l’application ‘/config’.
o Dossier et ficher des pages de l’application ‘/views’ sauf le contrôleur
principal.
o Dossier et ficher de l’API développer ‘/api’ sauf le contrôleur principal.
• La redirection automatique des demandes http non sécurisées vers le protocole
https.

CONCLUSION ET
PERSPECTIVE
En guise de conclusion, la période du stage est une phase d’application
nécessaire et essentielle pour bien réaliser une liaison entre les connaissances
théoriques et la pratique professionnelle.
Ce stage est très intéressant pour moi puisqu’il m’a permis d’apprendre
le concept de travail de l’entreprise, de mettre en œuvre mes connaissances déjà
acquises au cours de mes études.
Enfin, je tiens à renouveler mes sincères reconnaissances, à toutes
personnes ayant participées de près ou de loin à la bonne réalisation de ce fruit.
Le développement de mon projet intitulé « La mise en place d’une PWA
Pour la Gestion des Rapports d’Audit et contrôle » m’a permis de répondre aux
besoins du client la société Performance Qualité.
Cette application web consiste à gérer les appels d’offres, les prestataires,
les infrastructures, les progiciels, le service et les abonnements. La mise en
place de cette application m’a permis de mettre en œuvre nos connaissances
théoriques acquises tout au long de notre formation à l’Université Université Sidi
Mohamed Ben Abdellah « USMBA ».
Ce travail m’a fourni également un grand apport au niveau de plusieurs
niveaux. Sur le plan technique, j’ai appris à crée une application web progressive,

gérer des comptes et ses privilèges d’accès, les services d’hébergement et de
déploiement d’application et le faire tourner en production et pleins d’autres
outils.
J’ai également eu l’opportunité de maîtriser la conception en utilisant UML.
Gérer plusieurs champs dans la base de données a aussi été pour moi une occasion
unique qui m’a apporté beaucoup d’enrichissement sur le plan relationnel de
MySQL et l’orienter document JSON.
Bien que les principaux objectifs de mon projet aient été atteints, le
système que j’ai développé pourrait être enrichi par d’autres fonctionnalités
avancées et améliorations selon des nouveaux besoins demandés par le client.
Aussi, Vu le grand volume de données de la direction, une extension de ce
travail pourra avoir lieu via l’utilisation de l’informatique décisionnelle qui englobe
les solutions IT et qui leur apporte une nouvelle vision contenant des rapports et
des tableaux de bord de suivi des activités de l’entreprise à la fois analytiques
et prospectifs.
En fin si j’avais le choix de technologie, je vais orienter mon choix vers les
technologies ressente comme java (sprint) au côté serveur et Angulare au côté
client qui va m’aider à exploiter des fonctionnalités déjà développer. Mais aussi
travailler avec des technologies comme PHP et javascript en native m’a permis
de bien s’avoir comment ces Frameworks fonctionnent en termes de sécurité et
pour quoi ils implémentent des designs pattern afin d’arriver à faire des
applications robustes.

TABLE DE FIGURES
Figure 1: lieu géographique de la société BSA CONSEIL............................................................9
Figure 2: Logo de la société BSA CONSEIL..............................................................................10
Figure 3: PWA logo ...............................................................................................................16
Figure 4: MLD donner par l'entreprise BSA CONSEIL..............................................................17
Figure 5: Comparaissent entre InnoDB et MyISAM................................................................17
Figure 6: Diagramme de Gantt..............................................................................................18
Figure 7: use case d'administrateur.......................................................................................20
Figure 8: Diagramme de classe..............................................................................................21
Figure 9: use case d'auditeur, auditeur en chef et client ........................................................21
Figure 10: MLD réaliser.........................................................................................................22
Figure 11: La représentation des pièces jointe du rapport .....................................................23
Figure 12: Type de données JSON en MySQL SGBD................................................................23
Figure 13: La représentation de document JSON ...................................................................23
Figure 14: Fonction de manipulation des documents JSON dans MySQL ................................24
Figure 15: Logo HTML ...........................................................................................................24
Figure 16: Logo css................................................................................................................24
Figure 17: Logo JavaScript.....................................................................................................25
Figure 18: Logo JQuery .........................................................................................................25
Figure 19: Logo get Bootstrap ...............................................................................................25
Figure 20: Logo Photoshop ...................................................................................................25
Figure 21: Logo PHP Storm IDE..............................................................................................25
Figure 22: Logo PHP..............................................................................................................25
Figure 23: Logo MySQL .........................................................................................................25
Figure 24: Shema de fonctionement d'une api ......................................................................26
Figure 25: Logo JSON ............................................................................................................26
Figure 26: Logo ECMA SCRIPT ...............................................................................................27
Figure 27: Information sur PWA............................................................................................28
Figure 28: Le fichier Manifest................................................................................................29
Figure 29: Detection du service worker sur le navigateur ......................................................29
Figure 30: Logo Composer.....................................................................................................30
Figure 31: Logo du package php Mailer .................................................................................30
Figure 32: Logo desktop et web site de l'application réalisée.................................................31
Figure 33: Logo d'application Android...................................................................................31
Figure 34: Formulaire d'authentification...............................................................................31
Figure 35: Alerte aux cases d'erreur ......................................................................................32
Figure 36: alerte d'envoie avec succès...................................................................................32

Figure 37: Formulaire de récupération du mot de passe........................................................32
Figure 38: L’apparence de courrier dans la boit .....................................................................33
Figure 39: L'email de récupération du mot de passe..............................................................33
Figure 40: Formulaire de réinitialisation de mot de passe......................................................33
Figure 41: Accueil page.........................................................................................................34
Figure 42: À-propos page......................................................................................................34
Figure 43: Profile page..........................................................................................................35
Figure 44: section de gestion des administrateurs.................................................................36
Figure 45: Formulaire d'ajout des admins .............................................................................36
Figure 46: Alerte de confirmation .........................................................................................36
Figure 47: Section de gestion des auditeurs ..........................................................................37
Figure 48: Formulaire d'ajout d'un auditeur ..........................................................................37
Figure 49: Section de gestion des clients ...............................................................................38
Figure 50: Formulaire de manipulation de client ...................................................................38
Figure 51: Section de gestion des rapports............................................................................39
Figure 52: Menu des options du rapport ...............................................................................39
Figure 53: Section de manipulation du rapport .....................................................................40
Figure 54: Identification & CMU : Caractéristiques pièce jointe .............................................40
Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe...................................................41
Figure 56:Inspection du Palan pièce jointe ............................................................................41
Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe ...............................................41
Figure 58: Aspect Documentaire pièce jointe ........................................................................41
Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE (Indiquer Conforme ou Non conforme)
pièce jointe ..........................................................................................................................41
Figure 60: Formulaire d'ajout d'une remarque ......................................................................42
Figure 61: Espace des remarques ..........................................................................................42
Figure 62: L'espace de trace des rapports..............................................................................43
Figure 63: L'espace de gestion des questions des pièces jointes.............................................43
Figure 64: L'email envier au client.........................................................................................45
Figure 65: Boite de dialogue d'installation ............................................................................45
Figure 66: PWA sur le Desktop..............................................................................................46
Figure 67: Alerte d'information de processuce ......................................................................46
Figure 68: Boite de dialogue sur Android d'installation..........................................................46
Figure 69: Boite de dialogue sur Android de suggestion ........................................................46
Figure 70: Splash screen d'application...................................................................................47
Figure 71: Fenêtre d'installation ...........................................................................................47
Figure 72: Fenêtre d'ouverture .............................................................................................47
Figure 73: L'apparence de PWA dans l’Android .....................................................................47

LIST DES TABLES
Tableau 1: Les information de société...................................................................................10
Tableau 2: Les partenaire de la société BSA CONSEIL.............................................................13
Tableau 3: Comparaissent entre native app, responsive et progressive web app ...................28

TABLE D’ACRONYMES
Api: Application programming interface .......................................................................... 25
COVID: coronavirus disease.................................................................................................3
FSDM: Faculté des Sciences Dhar El Mehraz ...................................................................1
JSON: JavaScript Object Notation ...................................................................................21
MLD: modélisation logique des données .......................................................................21
PWA: Progressive Web Apps ...........................................................................................15
SGBD: Système de gestion de base de données .............................................................22
USMBA: Université Sidi Mohamed Ben Abdellah......................................................47

WEBOGRAPHIE / BIBLIOGRAPHIE
https://www.bsa-conseil.com/ 23-04-2020
https://www.directinfo.ma/fiche-detail/2357043/BSA-CONSEIL 23-07-2020
https://fr.wikipedia.org 02-05-2020
https://developer.mozilla.org/ 15-05-2020
https://getbootstrap.com/ 22-05-2019
https://www.youtube.com/c/TraversyMedia/playlists 23-05-2020
https://dev.mysql.com/doc/refman/5.7/en/json-function-
reference.html
24-05-2020
https://database.guide/json_replace-replace-values-in-a-json-
document-in-mysql/
24-05-2020
https://medium.com/aubergine-solutions/working-with-mysql-
json-data-type-with-prepared-statements-using-it-in-go-and-
resolving-the-15ef14974c48
26-05-2020
https://github.com/dompdf/dompdf 28-05-2020
https://www.restapitutorial.com/ 30-05-2020
https://www.php.net/ 06-06-2020
https://www.opentechguides.com/how-
to/article/apache/115/htaccess-file-dir-security.html
15-09-2020
https://help.dreamhost.com/hc/en-us/articles/216363167-How-do-I-
deny-access-to-my-site-with-an-htaccess-file-
30-09-2020

NB. Ce rapport est joignable d’un CD qui contient les différents
documents du projet de la PWA d’audit avec un QR code qui fait référence
à le projet, rapport de stage.docx, presentation.ppt.
Le lien : https://link.oaz-tech.tk/b

ANNEXES 1
LE RAPPORT STATIQUE ELABORER PAR
MICROSOFT WORD

ANNEXES 2
LE RAPPORT DYNAMIQUE ELABORER
PAR LA SOLUTION ; PWA

MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

Similaire à MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit (20)

MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit