CHAPITRE

4 Phase de développement

Introduction
L’objectif de ce chapitre est de présenter le travail d’architecture et de mise en place de
différentes phases de notre projet.
Nous détaillons aussi l’environnement de travail matériel et logiciel utilisé pour la réalisation
des solutions proposés et nous présentons les configurations de notre solutions adaptée avec
quelques aperçus d’écran montrant les différentes étapes de mise en place de notre solution.

Environnement de travail
Dans cette partie, nous présentons brièvement les technologies et les logiciels employés
pendant notre projet.

Environnement matériel

Pour le développement de notre application, nous avons utilisé un ordinateur Dell avec les
caractéristiques suivantes :
Processeur : Intel(R) Core(TM) i5-8250U CPU @1.60GHz 1.80 GHz
RAM : 8Go

Environnement logiciel

Concernant l’environnement logiciel, nous allons utiliser :

Système d’exploitation : Windows 10
Outils de développement : Visual Studio Code

La rédaction du rapport : Microsoft Word

Conception UML : PaceStar UML Diagrammer
Outils de travail

Visual Studio Code : est un éditeur de code extensible développé par Microsoft .

Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la

syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code
et Git intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les
préférences et installer des extensions qui ajoutent des fonctionnalités supplémentaires.

Le code source de Visual Studio Code provient du projet logiciel libre et open
source VSCode de Microsoft publié sous la licence MIT permissive, mais les binaires
compilés sont des logiciels gratuits pour toute utilisation.

Dans le Stack Overflow 2019 Developer Survey, Visual Studio Code a été classé comme
l'outil d'environnement de développement le plus populaire, avec 50,7% des 87317
répondants déclarant l'utiliser.

React JS : est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but

principal de cette bibliothèque est de faciliter la création d'application web monopage, via
la création de composants dépendant d'un état et générant une page (ou portion) HTML à
chaque changement d'état.

React est une bibliothèque qui ne gère que l'interface de l'application, considéré comme la
vue dans le modèle MVC. Elle peut ainsi être utilisée avec une autre bibliothèque ou
un framework MVC comme AngularJS. La bibliothèque se démarque de ses concurrents
par sa flexibilité et ses performances, en travaillant avec un DOM virtuel et en ne mettant à
jour le rendu dans le navigateur qu'en cas de nécessité

Node.js : est une plateforme logicielle libre en JavaScript orientée vers les

applications réseau événementielles hautement concurrentes qui doivent pouvoir monter en
charge.

Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements, et

implémente sous licence MIT les spécifications CommonJS.

Parmi les modules natifs de Node.js, on retrouve http qui permet le développement
de serveur HTTP. Il est donc possible de se passer de serveurs web tels
que Nginx ou Apache lors du déploiement de sites et d'applications web développés avec
Node.js.
 Concrètement, Node.js est un environnement bas niveau permettant l’exécution
de JavaScript côté serveur.

Express.js : est un framework pour construire des applications web basées sur Node.js2. C'est

de fait le framework standard pour le développement de serveur en Node.js3. L'auteur
original, TJ Holowaychuck, le décrit comme un serveur inspiré de Sinatra4 dans le sens
qu'il est relativement minimaliste tout en permettant d'étendre ses fonctionnalités via des
plugins.

MongoDB : (de l'anglais humongous qui peut être traduit par « énorme ») est un système

de gestion de base de données orienté documents, répartissable sur un nombre quelconque
d'ordinateurs et ne nécessitant pas de schéma prédéfini des données. Il est écrit en C++. Le
serveur et les outils sont distribués sous licence SSPL, les pilotes sous licence Apache et la
documentation sous licence Creative Commons5. Il fait partie de la mouvance NoSQL.
 Implémentation

Étapes de réalisation

Cette partie sera réalisée dans la partie annexe Prise en main de l’environnement de
développement

Interface homme machine

—Accueil du site

FIGURE 4.1 – Page d’accueil

—Authentification
A travers cette interface chaque utilisateur saisit son login et son mot de passe.
 FIGURE 4.2 – Fenêtre d’authentification

A une tentative d’erreur, une notification sera affichée sur l’écran.

FIGURE 4.3 – Page d’erreur d’accès

—Inscription
A travers cette interface, l’utilisateur saisit ses données personnelles.
 FIGURE 4.4 – Formulaire d’inscription

—Création d’un évènement

FIGURE 4.5 – Création des évènements

 L’organisateur peut ajouter d’autres informations à un évènements comme piéce
jointe.

FIGURE 4.6 – Création des évènements

—Paiement des frais de participation à un évènement

A travers cette fenêtre, un participant paie ses frais de participation à un tel
évènement.

FIGURE 4.7 – Interface de paiement

Conclusion
Ce chapitre est achevé avec la partie interface
Homme/Machine. Nous passons par la suite à la
conclusion générale.