Chapitre 3 : La conception détaillée Introduction Dans le cadre de ce chapitre, nous intéressons à la conception détaillée qui est essentielle pour la phase de réalisation avec laquelle on va distinguer entre la conception fonctionnelle qui sera décomposé en deux vues statique et dynamique ainsi la conception technique dans laquelle nous jetons l’œil sur les techniques utilisées. Pour entamer la conception nous avons choisis UML « Unified Modeling Language » comme un langage de modélisation, le plus connu et le plus utilisé. I. La conception fonctionnelle UML propose une décomposition des diagrammes selon trois axes : Un axe fonction qui englobe le diagramme de cas d’utilisation. Un axe statique qui englobe le diagramme de classe, le diagramme de déploiement et le diagramme de composant. Un axe dynamique qui comporte le diagramme de séquence, le diagramme de collaboration et le diagramme d’activités. 1. Vue statique Dans la vue statique, on va s’intéresser au diagramme de classes qui est le plus utilisé pour la modélisation. Par la suite, on va présenter le diagramme de déploiement et à travers lequel on va découvrir la disposition physique et logiciel pour les ressources matérielles et les programmes. On termine par le diagramme de composant afin de décrire l’architecture statique du site. a) Le diagramme de classes Un diagramme de classes dans le langage de modélisation unifié (UML) est un type de diagramme possédant une structure statique qui décrit la structure d’un système en montrant le système de classe, leurs attributs, leurs méthodes et les relations entre les classes. Figure 17 : Diagramme de classe 2. Vue dynamique a. Diagramme de séquence Les diagrammes des séquences de l’UML servent à représenter les échanges des messages entre les objets afin de fournir un fonctionnement particulier au système en développant et analysant les scénarios d’utilisation de ce système. Diagramme de séquence d’authentification Figure 18 : Diagramme de séquence d’authentification Les objets principaux objets de diagramme : Client IHM Connexion Base de données Les étapes de ce scénario : 1) Le client demande la connexion en saisissant son nom d’utilisateur et son mot de passe. 2) Dans l’IHMConnexion va se produit la vérification du formulaire, si les champs sont vides l’IHM va envoyer un message au client pour qu’il remplie les champs, sinon, il va envoyer un message à la base de données pour que la vérification des données se produit. 3) Dans la base de données se fait la vérification des données entrées par le client, si les données ne sont pas correctes, la base de données va envoyer un message d’erreur à l’IHMConnexion, et ce dernier va informer l’utilisateur qu’il y’a une erreur de données. 4) Le client a 3 possibilités de vérification de ses données s’il n’arrive pas à les vérifier alors le système lui demande d’essayer ultérieurement. 5) Si les données du client sont valides, l’IHM d’accueil va être affichée. Diagramme de séquence de recherche d’un produit par marque et modèle Figure 19 : Diagramme de séquence de recherche d’un produit par marque et modèle Les objets principaux de ce diagramme sont : L’utilisateur L’IHM d’accueil La marque du produit Le modèle du produit Le produit Les étapes de ce scénario de ce scénario sont : 1) L’utilisateur accède à l’IHM d’accueil 2) L’IHMAccueil va être chargée et affichée à l’utilisateur 3) L’utilisateur choisit une marque 4) Puis il choisit un modèle 5) Enfin il clique sur le bouton rechercher dans l’IHMAccueil 6) Dans l’IHMAccueil se produit la vérification du formulaire, s’il est vide alors un msg d’erreur va être envoyé vers l’utilisateur, si non un message va être envoyé à l’objet produit 7) Les produits vont être chargées et affichés à l’utilisateur Diagramme de séquence de recherche d’un produit par une catégorie Figure 20 : Diagramme de séquence de recherche d’un produit par une catégorie b) Diagramme d’activités Un diagramme d’activité est un diagramme comportemental qui permet de modéliser un processus interactif, global ou partiel pour un système donné (logiciel, système d’information). Il est recommandable pour exprimer une dimension temporelle sur une partie de modèle, à partir d’un diagramme de classe ou de cas d’utilisation comme exemple. Les objets du diagramme d’activités : Accéder à l’IHM d’accueil Afficher l’IHM Choisir la marque du véhicule Choisir le modèle de la marque Cliquer sur le bouton « rechercher » Alerte formulaire vide Choisir produit Afficher produit Figure 25 : Diagramme d’activités de sous cas d’utilisation « Ajouter catégorie » II. La conception technique 1) Arborescence du site Page d’accueil Pièces détachées Marques des pièces Nouveaux produits A propos de nous Catégories Sous-catégories Figure 26 : Arborescence du site 2) La charte graphique La charte graphique d’un site e-commerce permet au site d’un côté d’être cohérant dans sa communication et d’un autre côté de travailler à la bonne qualité de son image. Elle assoit la crédibilité d’une entreprise, donne des repères aux visiteurs et facilite la prise de l’information. La charte graphique se compose de plusieurs éléments essentiels qu’on va les présenter par la suite. A. Le logo Le logo d’un site e-commerce doit être parfaitement intégré de façon qu’il doit apparaitre de la même façon sur tous les autres supports. Il s’agit de l’élément central de l’identité visuelle Figure 27 : Logo du site B. La typographie La police d’écriture d’un site e-commerce joue un rôle majeur dans la communication visuelle car une typographie Georgia par exemple n’aura pas la même signification qu’une typographie Calibri ou Times New Roman. Figure 28 : Typographie du site C. Les couleurs Les choix des couleurs permettent de transmettre des messages différents aux visiteurs du site. Afin de maximiser l’impact des couleurs, leurs nombres doit être limité à 4 voire 5 maximum. Trois ou quatre couleurs pour un site sont ainsi préférables pour faciliter la mémorisation. Figure 29 : Les couleurs dominants du site D. Les icones Les icones ne sont pas à négliger loin de là car ces petits éléments visuels parlent aux visiteurs. Une bonne méthode consiste à s’adresser à un seul prestataire pour s’assurer que l’ensemble des icones soient cohérents entre eux. E. Les images Les photos, images et autres illustrations insérés sur un site e-commerce mettent en valeur un produit et valorisent l’entreprise. Les choisir avec soin aura donc un impact positif pour la marque envers sa cible. En effet, une image peut dire beaucoup ! 1) La conception des données La conception des données est une étape primordiale qu’il faut l’élaborer afin de donner un aperçu général sur le site développé et sert à organiser les données d’une façon hiérarchique Définition d’un attribut et d’une caractéristique d’un produit Ils servent tous les deux à décrire le produit en détails pour les clients mais pas en globale, en effet, ils mettent en avant une liste des principales spécifiés susceptibles d’intéresser les clients. Différence entre attribut et caractéristique L’attribut d’un produit définie la possibilité d’avoir ce produit avec des personnalisations de choix d’un client quant à la caractéristique, c’est une exigence qui décrit le produit qui ne peut pas être choisi par le client, ça veut dire que le produit ne se trouve qu’avec cette caractéristique. Pièces détachées Freinage Embrayage/ Transmission Plaquettes de frein Produit : Jeu de 4plaquettes. Attributs : -Avant -A disque Caractéristiques : -Type -Montage -Epaisseur -Largeur -Hauteur -Indicateur d’usure -Syst. de freinage Disques de frein Produit : Jeu de 2 disques de frein. Caractéristiques : -Type -Epaisseur -Type de disque de frein -Diamètre -Nombre de trous Compartiment moteur Suspension /direction Kit d’emb rayage Produit : Kit d’embrayage Caractéristiques : -Type -Diamètre -Composition du kit -Nombre de dents -Code moteur -Butée Cardan Produit : Cadran Caractéristiques : -Type -Montage -Coté d’assemblage -Longueur -Denture extérieure, coté roue -Dynamique de mouvement et de freinage Amorti -sseurs Produit : Amortisseurs Caractéristiqu es : -Type -Coté d’assemblage -Système d’amortisseur -A partir d’année de construction -Jusqu’à année de construction Kit de distribu tion Produit Kit de distribution Caractéristiques -Type -Nombre de dents Courroie Echappements et silencieux Filtre à air Produit Filtre à air Caractéristiques -Type -Hauteur -Remplaçant de Silencieux arrière Produit Silencieux arrière Caractéristiques -Type -Code moteur -Informations techniques -Remplaçant de Filtre à huile Refroidi ssement moteur Pompe à eau Produit Pompe à eau Attribut : -Poulie Caractéristiques -Type -Taille -Informations complémentaires Radiateur moteur Nos autres pièces Alternateur Produit Alternateur Attributs -Equipement véhicule - Echange standard -Poulie Caractéristiques -Type -Ampérage -Code moteur -Type de réseau de bord -ID de version Catalyseur Barre stabilisatrice Produit : Cadran Caractéristiques -Type -Montage -Coté d’assemblage -Longueur -Dimension de filetage Filtre Produit Courroie d’accessoire Caractéristiques -Type -Nombre de nervures -Longueur Produit Filtre à huile Caractéristiques -Type -Diamètre extérieur -Diamètre intérieur -Hauteur -Dimension de filetage -Remplaçant de Démarreur Produit Catalyseur Caractéristiques -Type -Longueur -Code moteur -Modèle type -Informations complémentaires Produit Radiateur moteur Attribut -Gamme Caractéristiques -Type -Hauteur -Epaisseur -Largeur -Admission -Sortie Produit Démarreur Attribut -Echange standard Caractéristiques -Type -Puissance nominale Etirer de frein Produit : Etirer de frein. Caractéristiques : -Type -Diamètre de piston de cylindre -Echange standard -Diamètre -Nombre de trous Triangle /bras de suspension Produit Triangle de suspension Caractéristiques -Type -Montage -Coté d’assemblage Roulement de roue Kit de frein à tambour Produit : Kit de freins arrière(prémonté s) Caractéristiques : -Type -Largeur -Système de freinage -Diamètre de tambour -Informations techniques Produit : Roulement de roue Caractéristiques : -Type -Largeur -Diamètre extérieur -Diamètre Intérieur Rotule de direction Produit : Rotule de direction Caractéristiques : -Type -Montage -Coté d’assemblage -Dimension de filetage -Jusqu’à année de construction -Informations techniques Bobine d’allumage Produit : Bobine d’allumage Caractéristiques -Type -Code moteur -Syst. d’allumage -Nombre d’E/S -Nombre de connexions -Bobine d’allumage -Poids -Remplaçant de Filtre à carburant Produit : Filtre à carburant Caractéristiques -Type -Diamètre extérieur -Diamètre intérieur -Hauteur -A partir d’année de construction Bougies Filtre habitacle Produit : Bougie Caractéristiques : -Type -Dimension de filetage -Ecartement des électrodes -Nombre de pôles -Type de carburant - Remplaçant de Figure 26 : La conception des données Sonde lambda Produit : Sonde lambda Caractéristiques -Type -Longueur -Nombre de contacts utilisés -Sonde lambda -Code moteur -A partir d’année de construction -jusqu’à année de construction Ventilateur Produit : Ventilateur Attributs -Equipement véhicule -Chauffage et refroidissement Caractéristiques -Type -Informations Complémentaires -Diamètre 1/Diam2 -Diamètre -Matériau -Forme Liquide de refroidissement Produit : Filtre habitacle Caractéristiques -Type -Hauteur -Longueur -Type de filetage -à partie d’année de construction Produit : Liquide de refroidissement Attribut -Température Caractéristique -Type -Informations Techniques -Capacité Lève-vitre Produit : Lève vitre Attributs -Type de fonctionnement -Moteur Caractéristiques -Type -Côté d’assemblage -Nombre de portes -Fonction du constructeur -A partir d’année de construction -Jusqu’à année de construction Conclusion Dans ce chapitre, nous sommes parvenus à décrire notre cahier des charges en précisant d’une part la conception fonctionnelle et la conception technique d’une autre part qui servent tous les deux à faciliter la compréhension du site et cela va ébaucher vers la phase d’implémentation.