Université d’Abomey Calavi (UAC)
Institut de Mathématique et de Sciences Physiques (IMSP)
PROJET SCIENTIFIQUE
Pour l’obtention de la Licence spéciale en Informatique
des Classes Préparatoires aux Grandes Ecoles (CPGE)
CREATION DES DIAGRAMMES BPMN AVEC LE
FRAMEWORK AYAJS.
Présenté par :
Abel KPOHINTO
Sous la direction :
Dr Henock SOUDE
Année Universitaire : 2021-2022
Dédicace
A
mes chers parents.
i
Remerciements
Je tiens à exprimer ma gratitude à tous les enseignants de l’Institut de
Mathématiques et de Sciences Physiques de l’Université d’Abomey Calavi pour
m’avoir partagé toutes leurs expériences et connaissances tant scientifiques que
sociales. Un remerciement particulier à Monsieur Henock SOUDE pour avoir proposé
ce projet et l’avoir suivi de très près.
Je remercie aussi mes très chers parents et familles pour leur sacrifice, leur
amour, leur tendresse, leur soutien, leur encouragement et leur appui de tous les
jours de mon existence. Je leur reconnais le sacrifice de m’avoir donné un
magnifique modèle de labeur et de persévérance.
Je témoigne également ma reconnaissance à mes amis et à toutes les personnes
qui de près ou de loin m’ont aidé à réaliser ce travail.
ii
Résumé
Dans ce travail, nous avons débuté la conception d’une application de
modélisation de diagrammes BPMN. Tout le travail c’est fait en Javascript, AyaJs (un
Framework implémenté par un étudiant de l’IMSP) et QUnit (Framework Js de tests
unitaires). Nous nous sommes servis de AyaJs pour créer les composants de base de
BPMN de sorte à pouvoir créer des diagrammes simples dans un premier temps.
iii
Abstract
In this work, we started the design of a BPMN diagram modeling application. All
the work was done in Javascript, AyaJs (a framework implemented by an IMSP
student) and QUnit (Js framework for unit testing). We used AyaJs to create the
basic components of BPMN so that we could create simple diagrams at first.
iv
Sommaire
Introduction …………………………………………………………………………………………………3
1 Cahier de charge ………………………………………………………………………………… 1
1.1 Objectifs……………………………………………………………………………………………2
1.1.1 Exigences globales……………………………………………………………………….. 1
1.1.2 Exigences spécifiques…………………………………………………………………… 1
1.2 Exigences fonctionnelles ………………………………………………………………….2
1.3 Exigences non fonctionnelles……………………………………………………………2
1.4 Contraintes techniques…………………………………………………………………….2
2 Conception de l’application…………………………………………………………………3
2.1 Modélisation……………………………………………………………………………………3
2.1.1 Diagramme de classe……………………………………………………………………3
2.2 Réalisation………………………………………………………………………………………3
2.2.1 Technologies utilises……………………………………………………………………3
2.2.2 Logique du code………………………………………………………………………….4
2.3 Quelques vues de notre site Web…………………………………………………..6
Conclusion………………………………………………………………………………………………….7
Webographie…………………………………………………………………………………………….. 8
2
Introduction
Le standard Business Process Management and Notation (BPMN) est la norme
de notation qui encadre la modélisation des processus de l’automatisation des
workflows dans une organisation, elle est maintenue par l’Object Management
Group (OMG). Il s’agit plus concrètement d’un langage graphique et intuitif pour
représenter des processus métier, les rendre plus clairs et compréhensible auprès
de tout parti prenant d’une entreprise, notamment les utilisateurs, les analystes, les
développeurs de logiciels ; les architectes de données, etc. Le suivi et la popularité
grandissante de la norme BPMN, font d’elle un outil de plus en plus prise par les
entreprises, les développeurs et même de simples personnes lambda.
Notre travail propose ainsi une interface utilisateur très ergonomique qui
permet à tout utilisateur de concevoir les diagrammes de la norme BPMN le plus
simplement possible.
3
1 Cahier de charge
L’analyse et la conception sont des procédés qui ont pour objectif de
permettre de formaliser les étapes préliminaires du développement d’un système
afin de rendre ce développement plus fidèle aux besoins de l’utilisateur.
Nous expliquerons les résultats attendus, en termes de fonctionnalités, de
performances et de sécurité puis finissons par exposer l’environnement de
développement dans lequel notre projet sera implémenté.
1.1 Objectifs
1.1.1 Exigences globales
En ce qui concerne les objectifs globaux, il s’agit de :
— Permettre à chaque utilisateur de réaliser tous les diagrammes proposés par la
norme BPMN
— Permettre à chaque utilisateur de de pouvoir sauvegarder son travail en lui
donnant la possibilité de télécharger un fichier XML.
— A partir d’un fichier téléchargé depuis notre application, l’utilisateur pourra
continuer son travail
1.1.2 Exigences spécifiques
En ce qui concerne les objectifs spécifiques, il s’agit de :
— Pouvoir modéliser une séquence de processus le plus simplement possible avec
les éléments de base () du BPMN
— Prendre en compte tous les éléments BPMN
— Permettre d’importer et exporter son travail depuis l’application
— Rendre chaque composant BPMN customisable, l’utilisateur sera capable de définir
ses propres couleurs, la taille des textes, etc. ;
1.2 Exigences fonctionnelles
Les exigences fonctionnelles du projet se concentrent majoritairement sur
chaque composant de base du BPMN. Nous avons entre autres :
Chaque composant doit posséder une taille fixe mais pourra être redimensionné par
l’utilisateur.
Un panel devra apparaitre lorsque le curseur de l’utilisateur passe sur un composant
présent à l’écran, ce panel lui proposera une liste d’éléments sur lesquels il pourra
faire un clic pour instancier le composant de son choix. Une fois le curseur est cliqué
1
sur l’élément, le panel disparaitra automatiquement après 3 secondes. L’élément
instancié sera directement lié au précédent.
Un double clic sur un composant BPMN sur l’écran donnera la possibilité à
l’utilisateur d’entrer un texte descriptif à l’élément cliqué.
Un simple clic sur un élément affichera une liste d’option du composant.
Les composants non consécutifs pourront être liés entre eux.
Un fichier JSON ou XML pourra être téléchargé ou importé pour sauvegarder ou
récupérer l’état d’un diagramme.
1.3 Exigences non fonctionnelles
L’expérience utilisateur doit être meilleure que possible.
Le choix des couleurs et la typographie du site doivent permettre à un utilisateur de
repérer les différentes fonctionnalités qui s’offrent à lui.
1.4 Contraintes techniques
L’application n’utilisera que le Framework AyasJs comme technologie externe
et tout le reste du travail se fera en Javascript. Toute la logique du code devra au
préalable être testé avec le Framework QUnit
2 Conception de l’application
2.1 Modélisation
Pour une meilleure vulgarisation des aspects liés à la conception et
l’architecture, propre à notre application nous utiliserons la norme UML créée aussi
par l’organisme OMG. Nus présenterons le diagramme de classe associé à notre
projet.
Rappel : Le UML (Unified Modeling Language) est un langage de modélisation
graphique à base de pictogrammes conçus pour fournir une méthode normalisée pour
visualiser la conception d’un système.
2.1.1 Diagramme de classe
Un diagramme de classe est fondamental dans le processus de modélisation des
objets et modélisent la structure statique d’un système. On les utilise pour modéliser
2
les objets qui constituent le système, pour afficher les relations entre les objets et pour
décrire ce que ces objets font et les services qu’ils fournissent.
La figure 1 illustre le diagramme de classe de notre projet.
2.2 Réalisation
Abordons maintenant l’implémentation de notre application.
2.2.1 Technologies utilisées
— Javascript : est un langage de programmation qui constitue l’une des
technologies de base du World Wide Web, aux côtés du HTML et du CSS. En
2022, 98% des sites web utilisent JavaScript du coté client pour le
comportement des pages web, en intégrant souvent des bibliothèques tierces.
— AyaJs : Framework Javascript de création de formes géométriques basées
— QUnit : Framework de test unitaire Javascript de création de formes
géométriques basées
3
Figure1 : Diagramme des classes
. 2.2.2 Logique du code
Structure des fichiers sources
Tout au long de ce travail nous avons utilisé le design patter Factory dont le principe
est d’avoir une super classe qui permet d’atteindre les autres classes.
Description : Avant toute chose, il est important de souligner que toute la logique du
code a été testé avant l’implémentation proprement parlé. Tous les composant BPMN
de notre application sont des composants dessinés avec AyaJs sur lesquels nous avons
ajouté des évents tels que : ”onmouseover”, ”onclick”, ”onmouseleave” et
”ondblclick”.
4
Figure2 : Structure des fichiers sources
— ”onmouseover” : Quand le curseur est sur un composant BPMN ce dernier fait
apparaitre un panel qui n’est rien d’autre qu’un ensemble d’images enfants du
composant cible. Le panel apparait et disparait grâce à la propriété CSS
‘visibility’ que l’on change à ‘visible’ ou à ‘hidden’
— ”onmouseleave” : Lorsque le curseur quitte un composant, l’attribut class des
éléments du panel est mis à ’hidden’ après 3 secondes, ce qui a pour effet de
faire disparaitre le panel.
— ”onclick” : Le clic sur un élément du panel crée automatiquement un
nouveau composant BPMN correspondant à l’élément cliqué lié au
composant précédent grâce à la class link de ayajs.
— ”ondblclick” : un double clic sur un composant fait apparaitre un input html
qui permet ainsi de commenter le composant cible.
5
2.3 Quelques vues de notre site Web
Le figure 3 Composants de base du BPMN.
Figure3 : Gestion des Articles - Dashboard
Le figure 4 exemple de panel lié à un composant.
Figure 4 : Page de création d’article-Dashboard
Conclusion
6
webographie
- [Link]
- [Link]
- [Link]
