Technologie Web. Conception de sites Web. Alexandre Pauchet. INSA Rouen - Département ASI. INSA - ASI TechnoWeb : Rappels UML 1/21

Transcription

1 INSA - ASI TechnoWeb : Rappels UML 1/21 Technologie Web Conception de sites Web Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr

2 INSA - ASI TechnoWeb : Rappels UML 2/21 Plan 1 Démarche 2 Cas d utilisation 3 Navigation 4 Interaction 5 Modèle objet 6 Conclusion

3 INSA - ASI TechnoWeb : Rappels UML 3/21 Démarche (1/4) Rappel cycle en V du développement logiciel Besoin exprimé Logiciel recetté Spécification Plan de Tests de Validation (PTV) Validation Documents de Spécification (DSE, DSI) Conception globale Plan de Tests d'intégration (PTI) Intégration Architecture testée Document de Conception Préliminaire (DCP) Plan de Tests Unitaires (PTU) Composants testés Conception détaillée Tests unitaires Document de Conception Détaillée (DCD) Composants déterminés Codage

4 INSA - ASI TechnoWeb : Rappels UML 4/21 Démarche (2/4) Approche Système Cas d'utilisation Diagrammes de séquence système classe1 methode() classe2 Besoins utilisateurs Modèle du domaine methode() classe3 methode() Diagramme de classes participantes Diagrammes d'interaction CODE Maquette Diagramme de navigation Diagrammes de classes

5 INSA - ASI TechnoWeb : Rappels UML 5/21 Démarche (3/4) Documentation Spécifications Externes : formalisation du besoin, contractuel Internes : points non nécessaires au client (domaine de compétence) Artefacts UML : maquette, diagramme de navigation, cas d utilisation Plan de tests de validation et Cahier de recette réalisés // à la spécification Conception Préliminaire : modèle du domaine, diagramme de classes participantes, diagrammes de séquences et d interaction, diagramme de packages Plan de tests d intégration et Journal des tests d intégration réalisés // à la conception préliminaire Conception Détaillée : diagramme de classes, pseudo-code Plan de tests unitaires et Journal des tests unitaires réalisés // à la conception détaillée

6 INSA - ASI TechnoWeb : Rappels UML 6/21 Démarche (4/4) Approche simplifiée Besoins utilisateurs Cas d'utilisation Diagrammes de séquence Maquette Diagrammes de collaboration Diagrammes de classes CODE Diagramme de navigation

7 INSA - ASI TechnoWeb : Rappels UML 7/21 Spécification des exigences (cas d utilisation) (1/5) Cas d étude Librairie en ligne Ex : etc. Exigences fonctionnelles : recherche, présentation d ouvrages, sélection, commande Exigences non fonctionnelles : ergonomie, simplicité d utilisation, performance, etc. Contraintes de conception : Mise à jour des données de référence Mise à jour depuis les formulaires du site Panier Paiement sécurisé

8 INSA - ASI TechnoWeb : Rappels UML 8/21 Spécification des exigences (cas d utilisation) (2/5) Démarche Structuration en cas d utilisation Cas d'utilisation Identifier les acteurs Identifier les cas d utilisation Structurer les cas d utilisation en package Étudier les relations entre cas d utilisation Hiérarchiser les cas d utilisation

9 INSA - ASI TechnoWeb : Rappels UML 9/21 Spécification des exigences (cas d utilisation) (3/5) Exemple : cas d utilisation de l internaute Généralisation Consulter ses commandes en cours << include >> << extends >> Inclusion Extension Internaute Effectuer une recherche rapide Effectuer une commande << extends >> Effectuer une recherche avancée << include >> Gérer son panier Consulter l'aide en ligne S'identifier Rechercher des ouvrages Effectuer une recherche par thème Effectuer une recherche par rubrique éditoriale

10 INSA - ASI TechnoWeb : Rappels UML 10/21 Spécification des exigences (cas d utilisation) (4/5) Scenarios Exemple : Effectuer une commande Acteur principal : l internaute Objectifs : À tout moment, le client doit pouvoir accéder au formulaire du bon de commande, dans lequel il peut saisir ses coordonnées et les informations nécessaires au paiement et à la livraison. Préconditions : Le panier n est pas vide et l Internaute a pu accéder au formulaire de commande (cf. Gérer son panier). Postconditions : Une commande a été enregistrée et transmise au service Commandes. Scénario nominal : 1. L Internaute saisit l ensemble des informations nécessaires au paiement et à la livraison : - son adresse , - son adresse de facturation, - son adresse de livraison si elle est différente de son adresse de facturation, - son numéro de carte de crédit. 2. Le Système affiche un récapitulatif de la commande. 3. L internaute valide sa commande. 4. Le Système envoie la commande validée au service Clients. 5. Le Système confirme la prise de commande à l Internaute. Extensions : 1a. L Internaute est déjà client. 1. L internaute s identifie avec son et son mot de passe. 2. Le Système affiche les données concernant l Internaute. 2a. Le Système ne reconnaît pas le client Le Système prévient l Internaute du problème (retour en 1a.1). 1-3a. L Internaute annule sa commande. 1. Le Système revient à l affichage du panier (cas d utilisation terminé). Exigences supplémentaires : Utilisation de SSL.

11 INSA - ASI TechnoWeb : Rappels UML 11/21 Spécification des exigences (cas d utilisation) (5/5) Planification Remarque importante Scenarios diagrammes de séquence système Packages UC de l internaute UC des employés Acteurs UC secondaires Classement des cas d utilisation Cas d utilisation Priorité Risque Itération Rechercher des ouvrages Haute Moyen 2 Gérer son panier Haute Bas 3 Effectuer une commande Moyenne Haut 4 Consulter ses commandes en cours Basse Moyen 6 Consulter l aide en ligne Basse Bas 7 Maintenir le catalogue Haute Bas 1 Maintenir les informations éditoriales Moyenne Bas 5 Maintenir le site Moyenne Bas 5

12 INSA - ASI TechnoWeb : Rappels UML 12/21 Navigation (1/2) Approche Approche Maquette Diagramme de navigation Maquette Dessins/canevas pouvant intégrer des fonctionnalités de navigation Vue concrète mais non définitive de l IHM Support de discussion avec le client

13 INSA - ASI TechnoWeb : Rappels UML 13/21 Navigation (2/2) Diagramme de navigation Nouveautés Meilleurs ventes... Page d'accueil <<exception>> erreur [non] Aide Recherche avancée [oui] livre trouvé? <<frame>> Recherche rapide <<action>> Recherche <<action>> Recalculer <<action>> Mettre dans le panier <<frame>> Résultat de recherche <<action>> Classement [il reste au moins 1 livre] Panier Fiche client remplie [plusieurs pages] <<action>> Parcours des pages [client identifié] <<action>> Établir un devis <<action>> Commander <<action>> Modification compte Fiche détaillée d'ouvrage Fiche client vide <<action>> Saisir infos commande Fiche d'auteurs <<frame>> Devis Fiche de commande <<action>> Acheter [Fin normale avec achat]

14 INSA - ASI TechnoWeb : Rappels UML 14/21 Interaction (1/3) Approche Diagrammes d interaction Diagrammes de séquence Diagrammes de collaboration Approche Système Cas d'utilisation (scénarios) Diagrammes de séquence Système Système Diagrammes de séquence système Diagrammes de collaboration

15 INSA - ASI TechnoWeb : Rappels UML 15/21 Interaction (2/3) Diagramme de séquence Exemple : Recherche avancée Internaute RechercheAvancée ContrôleRecherche Catalogue tous les : Livre chercher(phrase) vérifiersyntaxerecherche(phrase) chercherlivres(phrase) résultats : Livre chercherlivresparauteur(a) create résultats find() RésultatRecherche create(resultats) pagesuivante() pageprécédente()

16 INSA - ASI TechnoWeb : Rappels UML 16/21 Interaction (3/3) Diagramme de collaboration Exemple : Recherche avancée 1.1. vérifiersyntaxerecherche(phrase) 1. rechercher(phrase) 1.2. chercherlivres(phrase) RechercheAvancée chercherlivresparauteur(a) Internaute create(résultats) ContrôleRecherche résultats Catalogue find() create 2. pagesuivante() 3. pageprécédente() RésultatRecherche tous les : Livre résultats : Livre

17 INSA - ASI TechnoWeb : Rappels UML 17/21 Modèle objet (1/2) Rappel : MVC MVC : Modèle-Vue-Contrôleur observateur Vue services de mise à jour Notification d'évènements de mise à jour + données modifiées Contrôleur observable Modèle services du modèle Choix du paradigme Au moment de l analyse du problème (Cas d utilisation, modèle du domaine, diagramme de navigation) 3 approches : 1 Fonctionnelle/Procédurale 2 Objets 3 Composants

18 INSA - ASI TechnoWeb : Rappels UML 18/21 Modèle objet (2/2) Diagramme de classes Gestion du panier Page total : real contenu Panier PageResultatRecherche mettredanspanier() PagePanier quantite [0...*] : integer=1 + afficher(idsession, code) + modifierquantiteligne(code, nombre) + supprimerligne(code) + recalculer() viderpanier() + demanderdevis() + commander() + verifiernombre() : booléen + ajouterligne(code, nombre=1) + modifierquantiteligne(code, nombre) + supprimerligne(code) + viderpanier() Session id nom : string prenom : string 1 string ErreurPanierVide messageerreur : string...

19 INSA - ASI TechnoWeb : Rappels UML 19/21 Conclusion (1/3) Limites du modèle UML Qualités Simple Expressif Méthodologique Limites Ne représente pas les états du système Rapidement limité (gros systèmes) Pas d interconnexion de systèmes Pas dynamique (Agents informatiques, composants, etc.) Pas de vérification

20 INSA - ASI TechnoWeb : Rappels UML 20/21 Conclusion (2/3) Alternatives e1 t1 e2 t2 e4 p1 p2 t4 e3 t3 2 t1 p3 Alternatives Approche SMA Repésentation des interactions par automates/réseaux de Petri Vérification logique Contrainte : évènements discrets

21 INSA - ASI TechnoWeb : Rappels UML 21/21 Conclusion (3/3) Références UML : Modéliser un site e-commerce, Pascal Roques, Eyrolles. index.html