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

6
- https://www.w3schools.com/js/default.asp

- www.fr.wikipedia.org

- https://qunitjs.com