- PROJET E-COMMERCE -

 HUSSON - LABAT - MARIAGE - PEREA

SOMMAIRE

• Présentation du projet

• Partie IHM

  • Conception

  • Développement

• Partie Système

  • La base de donnée

  • Les Websockets

• Organisation du projet

• Démonstration

PRESENTATION DU PROJET

• Site pour louer des serveurs informatique

• Accès sur l'utilité des services offerts

• Cible les particuliers, groupe d'utilisateurs et entreprisess

PARTIE IHM

I. CONCEPTION

ENQUÊTE UTILISATEURS ET CIBLES DÉFINIES

• 54 personnes

• de 18 a 30 ans

Participants :

ARBRE DE TÂCHE PRINCIPAL

IHM FIL DE FER

MAQUETTES

CHARTE GRAPHIQUE

• Polices d'écriture

• Couleurs du site

• Couleurs alertes

• Couleur logo

• Logo

• Boutons

II. DÉVELOPPEMENT ET TESTS

Langages utilisés : HTML5, CSS3 et Javascript

OBJECTIF : utiliser le maximum de librairies de fonctions, outils… déjà existants pour construire le site

Problèmes :  1. rechercher rapidement les différentes librairies utiles

                2. les mettre à jour rapidement à long terme

Outil BOWER

- ngModules.org permet de rechercher les outils intéressants + démo

- Bower permet de les installer et gérer les dépendances

ORGANISATION DU CODE

    - index.jsp

    - css

    - bower-components

    - contollers         

    ------ fichiers .js

    - views                

    ------ fichiers .jsp

Angular : concepts de vues et de controllers

difficulté : communiquer entre les vues

ÉVALUATION DU l'IHM DU SITE

Site testé tout au long du projet avec trois navigateurs (Chrome, Firefox et Internet Explorer)

Compatibilité avec les écrans des appareils de type smartphone

Site disponible en 3 langues (Français/Anglais et Espagnol)

Respect des critères Bastien & Scapin

• Groupement des éléments visuels qui ont des caractéristiques semblables

• Feedback pour l'utilisateur à l'aide de notifications

• Orienter et conduire l'utilisateur lors de sa navigation sur le site

ÉVALUATION DE L’UTILISABILITÉ DU SITE

La recherche d’un service dans le catalogue doit pouvoir être effectuée en moins de 5 clics.

Le processus de commande doit pouvoir être effectué en moins de 10 clics.

S'effectue en 2 clics sur Rentech

S'effectue en 6 clics si utilisateur connecté, 9 clics sinon

OBJECTIFS QUANTITATIFS :

QUESTIONNAIRE DE SATISFACTION

Participants :

- 12 personnes

- entre 23 et 69 ans (experts/non experts)

Métriques

Total code : 7402 lignes

PARTIE SYSTEME

I. LA BASE DE DONNEE

I. LA BASE DE DONNEE et CIE

Aspect technique

• Type de base de données : Derby via le serveur Glassfish
• Utilisation du serveur de mail James Apache
• Automatisation du déploiement :
  • Utilisation de maven pour compiler et produire un ear
  • Utilisation de scripts sql pour supprimer la base de données et créer un compte admin
  • Utilisation d'un script shell permettant d'automatiser les étapes précédentes

I. LA BASE DE DONNEE et CIE

Shell

Outil d'accès à la base de données en ligne de commande :

• un accès utilisateur : permet l'accès au mode root
• un accès root : permet de modifier la base de données

En mode root : 

• génération aléatoire de x utilisateurs
• possibilité de voir la liste des utilisateurs
• création de commande
• possibilité de voir la liste des commandes
• création/suppression de comptes utilisateur

II. LES WEBSOCKETS

Principe et utilisation

• Envoie de messages par le client sur le serveur

• Messages dispatchés par la classe Service

• Traités par les classes :

  • ServiceUser

  • ServiceMail

  • ServiceCommande

II. LES WEBSOCKETS

Service

Initialise les façades à l'ouverture de session

Dispatche les messages de la façon suivante :

• si on reçoit "connectUser" => ServiceUser.onConnectUser

• si on reçoit "createUser" => ServiceUser.onCreateUser

• si on reçoit "pushCommande" => ServiceCommande.onPushCommande

• si on reçoit "modifyCommande" => ServiceCommande.onModifyCommande

• si on reçoit "changeInfos" => ServiceUser.onChangeInfos

• si on reçoit "deleteAccount" => ServiceUser.onDeleteAccount

• si on reçoit "getUsers" => ServiceUser.onGetUsers

• si on reçoit  "getInfosUser" => ServiceUser.onGetInfoUser

• si on reçoit "changePassword" => ServiceUser.onChangePassword

II. LES WEBSOCKETS

ServiceUser

• onCreateUser(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

• onConnectUser(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

• onDeleteAccount(UtilisateurFacadeRemote ufi, Session session, JsonObject jsonObject)

• onChangeInfos(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

• onChangePassword(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

• onGetInfoUser(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

• onGetUsers(UtilisateurFacadeRemote ufi,Session session, JsonObject jsonObject)

II. LES WEBSOCKETS

ServiceMail

• sendMailNewUser(Utilisateur User)

• sendMailCompteActive(String email)

• sendMailDeleteUser(Utilisateur User)

• sendMailModifyUser(Utilisateur User)

• sendMailCommande(Utilisateur User,Commande commande)

II. LES WEBSOCKETS

ServiceCommande

• onPushCommande(CommandeFacadeRemote cfi, OffreFacadeRemote ofi,GitFacadeRemote gfi,Session session, JsonObject jsonObject)

• onModifyCommande(CommandeFacadeRemote cfi, Session session,JsonObject jsonObject)

III. LES FACADES

Principe des façades

• Permettent de faire un lien entre EJB et BDD

• Contiennent chacunes les fonctions suivantes :

  • create

  • remove

  • edit

  • contains

  • getUser (pour la façade Utilisateur)

  • getUsers (pour la façade Utilisateur)

GESTION PROJET

Démonstration