Cycle de Formation LMD

Université de Manouba Institut Supérieur des Art Multimèdias de Manouba CONCEPTION ET RÉALISATION D’UNE APPLICATION Androïd : Passion Beauté 1.0 Présenté par : Encadré par : Doufani Saif Allah M. Waddey Moez (ISAMM) EL Heni Nazih M. Kaddour Ahmed (NETISSE) Cycle de Formation LMD Année universitaire :2010/2011 Résume Le m-Commerce n’a pas de vocation pour remplacer les canaux traditionnels, y compris l’Internet sur ordinateur, il convient particulièrement à certains types d’achat basés sur la simplicité des produits et l’urgence de la demande. D’après une étude Gartner, les consommateurs vont dépenser cette année 6,2 milliards de dollars en téléchargements d’applications mobiles Androïd, soit une progression de près de 60 % par rapport à 2010. La progression ne devrait pas s’arrêter en si bon chemin puisqu’en 2013 qui devrait dépasser le chiffre de 21,6 milliards de téléchargements. Le projet que nous présentons aborde précisément une application conçu pour fonctionner sur la plate-formeAndroïd. Le projet permet la commercialisation des produits d’une société qui agit dans le domaine de beauté. L’application permet l’affichage des produits selon la catégorie et les produits du mois. L’application proposera l’achat sur site du Passion Beauté. – Augmenter le trafic du site passion-Beaute.com. – Fidéliser les abonnés du Passion Beauté. – Attirer des prospects en leur facilitant l’acte d’achat (produits du mois). L’application nécessite un espace administrateur Back-office qui permet de faire des mises à jour du catalogue de produit. L’espace administrateur nécessite également la mise en place des interfaces de gestion des commandes. Par ailleurs, nous proposons dans notre application une nouvelle forme d’achat et sélection des produits en vue d’améliorer les méthodes de navigation dans l’application. En effet, il est nécessaire de disposer d’outils pour gérer les achats, les commandes, les stocks, la logistique et tous les autres aspects liés à la gestion commerciale, gestion du catalogue, gestion des achats, logistique, gestion du marque, gestion du contenu et la logistique. Abstract M-Commerce is not intended to replace the traditional channels, including the Internet on a computer, it is particularly suited to certain types of purchases based on product simplicity and urgency of the request. According to Gartner, consumers will spend this year 6.2 billion in Androïd mobile applications downloads, an increase of nearly 60 % over 2010. The growth should not stop there way since 2013 should exceed the figure of 21.6 billion downloads. These are of course trade online tops. Our project presented here specifically application designed to run on the Androïd platform. The project allows the marketing of products of a company acting in the beauty product’s field. The application allows the display of products by category and offers of month. The application offers on-site purchase of Passion Beauty. – Increase site traffic passion-beaute.com. – Retain subscribers Passion Beauty. – Attracting prospects in facilitating the act of purchase (products of month). The application requires an administrator space (Back Office), which should provide an interface for management and updating the product catalog through a Back-office. Furthermore, we propose a new form of purchasing and product selection to improve the methods of navigation within the application. Indeed, it is necessary to have tools to manage purchasing, ordering, inventory and all other aspects of business management, catalog management, purchase management, logistics, brand management and content management. Remerciement Avant d’entamer ce rapport de projet de fin d’études, nous tenons à exprimer notre sincère gratitude envers tous ceux qui nous ont aidé ou ont participé au bon déroulement de ce projet. Tout d’abord, nous tenons à remercier NETISSE qui nous a bien accueillis. En effet nous avons eu le plaisir de travailler dans une entreprise de grande valeur. Nous nous devons remercier M. Waddey Moez pour sa générosité, sa compréhension et son aide inestimable. Nous sommes reconnaissant également à M. Ahmed Kadour notre encadreur durant le déroulement du projet pour son aide à la mise en place de ce modeste travail. Dédicace A MA MÈRE Tu m’as donné la vie, la tendresse et le courage pour réussir .Tout ce que je peux t’offrir ne pourra exprimer l’amour et la reconnaissance que je te porte. En témoignage, je t’offre ce modeste travail pour te remercier pour tes sacrifices et pour l’affection dont tu m’as toujours entouré. A MON PÈRE L’épaule solide, l’œil attentif compréhensif et la personne la plus digne de mon estime et de mon respect. Aucune dédicace ne pourrait exprimer mes sentiments, que Dieu te préserve et te procure Santé et longue vie. A mes frères A ma sœur A ma famille A mes amis ... Doufani Saif Allah Dédicace A mes chers parents, Que nulle dédicace ne puisse exprimer ce que je leurs dois, pour leur bienveillance, leur affection et leur soutien Trésors de bonté, de générosité et de tendresse, en témoignage de mon profond amour et ma grande reconnaissance « Que Dieu vous garde ». A mes chers frères et sœur, En témoignage de mes sincères reconnaissances pour les efforts qu’ils ont consenti pour l’accomplissement de mes études. Je leur dédie ce modeste travail en témoignage de mon grand amour et ma gratitude infinie. A tous mes amis, Pour leur aide et leur soutien moral durant l’élaboration du travail de fin d’étude. A toute ma Famille A tout ceux qui m’aiment El Heni Nazih Table des matières Introduction générale 1 1 Etude préalable 3 1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.2 Étude de l’existant . . . . . . . . . . . . . . . . . . . . . . 3 1.3 Analyse de l’application Amazon.fr . . . . . . . . . . . . . 4 1.3.1 Présentation de l’application Amazon pour Androïd 4 1.3.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 4 1.3.3 Analyse technique . . . . . . . . . . . . . . . . . . . 6 1.4 Analyse de l’application eBay officielle pour Andrïd . . . 6 1.4.1 Présentation générale . . . . . . . . . . . . . . . . . 7 1.4.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 7 1.4.3 Analyse technique . . . . . . . . . . . . . . . . . . . 9 1.5 Analyse du l’application Best Buy pour Androïd . . . . . 9 1.5.1 Présentation de Best Buy . . . . . . . . . . . . . . . 9 1.5.2 Analyse fonctionnelle . . . . . . . . . . . . . . . . . 10 1.5.3 Analyse technique . . . . . . . . . . . . . . . . . . . 12 1.6 Spécification des besoins fonctionnels . . . . . . . . . . . . . 12 1.6.1 Identification des acteurs . . . . . . . . . . . . . . . 12 TABLE DES MATIÈRES 1.6.2 ii Description des exigences fonctionnelles . . . . . . . 13 1.7 Modèle de navigation . . . . . . . . . . . . . . . . . . . . . 14 1.7.1 Modèle linéaire . . . . . . . . . . . . . . . . . . . . 14 1.7.2 Modèle hiérarchique . . . . . . . . . . . . . . . . . . 15 1.7.3 Modèle composite . . . . . . . . . . . . . . . . . . . 16 2 Conception technique 17 2.1 introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.2 Conception graphique . . . . . . . . . . . . . . . . . . . . . 17 2.2.1 Synopsis . . . . . . . . . . . . . . . . . . . . . . . . 17 2.2.2 Charte graphique . . . . . . . . . . . . . . . . . . . 18 2.2.3 Gabarit . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.3 Conception détaillée . . . . . . . . . . . . . . . . . . . . . . 19 2.4 Description de la vue statique . . . . . . . . . . . . . . . . 20 2.4.1 Base de données Back-office . . . . . . . . . . . . . 21 2.4.2 Base de données Application . . . . . . . . . . . . . 21 2.4.3 Diagramme de classe du Back-office . . . . . . . . . 22 2.4.4 Diagramme de classe de l’application . . . . . . . . 22 2.4.5 Cas d’utilisation global . . . . . . . . . . . . . . . . 23 2.5 Cas d’utilisation global relatif à un client . . . . . . . . . . 23 2.6 Le diagramme de cas d’utilisation recherche et sélection des produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.7 Cas d’utilisation gérer son panier du site Passion Beauté . . 24 2.8 Cas d’utilisation partage de l’application . . . . . . . . . . . 24 2.9 Cas d’utilisation global relatif à l’administrateur . . . . . . 25 TABLE DES MATIÈRES iii 2.10 Cas d’utilisation mise à jour des produits, des catégories et des marques . . . . . . . . . . . . . . . . . . . . . . . . . . 26 2.11 Cas d’utilisation diagramme de composants . . . . . . . . . 26 2.12 Description de la vue dynamique . . . . . . . . . . . . . . . 27 2.13 Les diagrammes de séquence . . . . . . . . . . . . . . . . . 27 2.14 Diagramme de séquence d’affichage de galerie des images . . 27 2.15 Diagramme de séquence détail produits . . . . . . . . . . . 28 2.16 Diagramme de séquence gérer panier du site . . . . . . . . . 28 2.17 Diagramme de séquence de mise à jour des catégories . . . . 28 2.18 Diagramme de séquence de mise à jour des marques . . . . 28 2.19 Diagramme de séquence de mise à jour des produits . . . . 28 2.20 Diagramme de séquence d’affichage des produits triées par marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.21 Diagramme de séquence de partage 29 . . . . . . . . . . . . . 29 2.21.1 Conclusion : . . . . . . . . . . . . . . . . . . . . . . 29 3 Réalisation et Test 44 3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 44 3.2 Environnement du travail . . . . . . . . . . . . . . . . . . . 44 3.2.1 Environnement matériel . . . . . . . . . . . . . . . . 44 3.2.2 Environnement logiciel . . . . . . . . . . . . . . . . 45 3.3 Tests et réalisation . . . . . . . . . . . . . . . . . . . . . . 46 3.3.1 Diagramme de déploiement . . . . . . . . . . . . . . 46 3.3.2 Scénario d’exécution . . . . . . . . . . . . . . . . . . 47 Conclusion et Perspectives 69 TABLE DES MATIÈRES 4 ANNEXES iv 71 4.1 Le formalisme d’UML . . . . . . . . . . . . . . . . . . . . . 71 4.2 Les diagrammes . . . . . . . . . . . . . . . . . . . . . . . . 72 4.3 Les modèles d’élément . . . . . . . . . . . . . . . . . . . . . 72 4.4 Les diagrammes . . . . . . . . . . . . . . . . . . . . . . . . 73 4.4.1 Diagrammes Structurels ou Diagrammes statiques (cf. Structure Diagram) . . . . . . . . . . . . . . . . . . 73 4.5 Standardisation et Certification UML : . . . . . . . . . . . . 75 4.6 Exemple de séquence de création des diagrammes . . . . . . 75 4.7 Logiciels de modélisation UML . . . . . . . . . . . . . . . . 75 Bibliographie et Netographie 76 Table des figures 1.1 application Amazon . . . . . . . . . . . . . . . . . . . . . . 5 1.2 Application eBay . . . . . . . . . . . . . . . . . . . . . . . 8 1.3 Application BestBuy . . . . . . . . . . . . . . . . . . . . . 11 1.4 modele lineaire . . . . . . . . . . . . . . . . . . . . . . . . . 14 1.5 Modèle Hiérarchique . . . . . . . . . . . . . . . . . . . . . . 15 1.6 Modèle Composite . . . . . . . . . . . . . . . . . . . . . . . 16 2.1 Gabarit de notre boutique . . . . . . . . . . . . . . . . . . 20 2.2 Base de données Back-office . . . . . . . . . . . . . . . . . 21 2.3 Base de données Application . . . . . . . . . . . . . . . . . 21 2.4 Diagramme de Classe du Back-office . . . . . . . . . . . . . 22 2.5 Diagramme de Classe de l’application . . . . . . . . . . . . 22 2.6 Cas d’utilisation global . . . . . . . . . . . . . . . . . . . . 30 2.7 Diagramme de cas d’utilisation global relatif à un client . . 31 2.8 Cas d’utilisation recherche et sélection des produits . . . . . 32 2.9 Diagramme de cas d’utilisation accéder au site passion-beauté.com 33 2.10 Cas d’utilisation partage de l’application . . . . . . . . . . . 33 2.11 Cas d’utilisation global administrateur . . . . . . . . . . . . 34 2.12 Cas d’utilisation mise à jour produits, catégories et marques 35 TABLE DES FIGURES vi 2.13 Diagramme de composants . . . . . . . . . . . . . . . . . . 36 2.14 diagramme de Séquence galerie image . . . . . . . . . . . . 36 2.15 Diagramme de Séquence détail produits . . . . . . . . . . . 37 2.16 Diagramme de séquence gérer panier du site . . . . . . . . . 38 2.17 diagramme de séquence de mise à jour des catégories . . . . 39 2.18 supprimer une ligne du panier . . . . . . . . . . . . . . . . 40 2.19 Diagramme de séquence de mise à jour des produits . . . . 41 2.20 Diagramme de séquence d’affichage des produits triées par marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 2.21 Diagramme de séquence de partage . . . . . . . . . . . . . . 43 3.1 Diagramme de déploiement . . . . . . . . . . . . . . . . . . 46 3.2 Capture d’écran : page inscription . . . . . . . . . . . . . . 47 3.3 Capture d’écran : page connexion . . . . . . . . . . . . . . 48 3.4 Capture d’écran : ajout catégorie . . . . . . . . . . . . . . . 49 3.5 Capture d’écran : page catégorie . . . . . . . . . . . . . . . 49 3.6 Capture d’écran : ajout marque . . . . . . . . . . . . . . . 50 3.7 Capture d’écran : page marque . . . . . . . . . . . . . . . . 51 3.8 Capture d’écran : page produit . . . . . . . . . . . . . . . . 51 3.9 Capture d’écran : page produit . . . . . . . . . . . . . . . . 52 3.10 Capture d’écran : la première page de chargement . . . . . . 53 3.11 Capture d’écran : la deuxième page de chargement . . . . . 53 3.12 Capture d’écran : page d’accueil de l’application embarqué . 54 3.13 Capture d’écran : page à propos . . . . . . . . . . . . . . . 55 3.14 Capture d’écran : page des catégories . . . . . . . . . . . . 56 3.15 Capture d’écran : liste des accessoires . . . . . . . . . . . . 57 TABLE DES FIGURES vii 3.16 Capture d’écran : liste des pinceaux . . . . . . . . . . . . . 58 3.17 Capture d’écran : liste des produits de bain . . . . . . . . . 59 3.18 Capture d’écran : page de partage . . . . . . . . . . . . . . 60 3.19 Capture d’écran : partage sur facebook . . . . . . . . . . . 61 3.20 Capture d’écran : partage sur twitter . . . . . . . . . . . . . 62 3.21 Capture d’écran : envoyer un mail . . . . . . . . . . . . . . 63 3.22 Capture d’écran : galerie des marques . . . . . . . . . . . . 64 3.23 Capture d’écran : galerie des marques . . . . . . . . . . . . 65 3.24 Capture d’écran : galerie des marques . . . . . . . . . . . . 66 3.25 Capture d’écran : galerie des marques . . . . . . . . . . . . 67 3.26 Capture d’écran : galerie d’image . . . . . . . . . . . . . . . 68 4.1 Les vues . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Liste des tableaux 1.1 Connotation et dénotation du l’application Amazon.fr. . . . 6 1.2 Connotation et dénotation du l’application eBay officielle. . 9 1.3 Connotation et dénotation du l’application Best Buy. . . . . 12 2.1 Description du cas d’utilisation global relatif à un client . . 23 2.2 Description du cas d’utilisation recherche et sélection des produits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2.3 Description de cas d’utilisation gérer son panier du site Passion Beauté . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2.4 Description de cas d’utilisation partage de l’application . . . 25 2.5 Description du cas d’utilisation global relatif à l’administrateur 26 2.6 Description de cas d’utilisation mise à jour produits, catégories et marques . . . . . . . . . . . . . . . . . . . . . . . 27 Introduction Générale Dans le cadre de notre projet de fin d’étude, nous nous intéressons à développer une application qui sert à l’achat en ligne des produits de beauté, reconnu dans le domaine informatique par le nom ” E-commerce ”, cette application peut être développer sur plusieurs plate-forme notamment : Androïd , Mac OS et BlackBerry etc. Les supports de notre application Ecommerce sont les téléphones portable mené, d’un système d’exploitation Androïd. L’OS 1 Aïndroïd est gratuit et open source fondé sur un noyau Linux destiné aux Smartphones, PDA 2 et autres terminaux mobile comme les tablettes tactiles. La plateforme 3 Androïd ne cesse d’accroitre sa part du marché, il occupe la première place en terme de vente au niveau mondiale avec 33.3 million d’unité en 4 ème trimestre 2010 l’équivalant de 370 téléphones/jour.[1] Le rythme de nos jours est accéléré et les gens ont besoin de réduire leurs déplacements, ainsi le nombre des utilisateurs d’Androïd ne cesse d’accroître donc on a décidé de développer une application sur le système d’exploitation Androïd pour commercialiser les produits de beauté la société ’Passion Beauté’ 1. L’OS est l’acronyme de operaiting system 2. PDA est l’acronyme de Personal Digital Assistant 3. le mot plateforme dans ce manuscrit désigne l’ensemble des ressources logicielles qui sont fournies par les systèmes embarqué LISTE DES TABLEAUX 2 Cadre du projet Ce travail s’inscrit dans le cadre de notre projet de fin d’études pour l’obtention du diplôme universitaire en Informatique et Multimédias effectué au sein de la Société NETISSE. Au cours de ce stage la société NETISSE nous a confié la conception et la réalisation d’une application Androïd dans un milieu pur professionnelle. Organisation du Rapport Au niveau de ce manuscrit, nous décrivons la mise en place d’une application Androïd permettant, grâce à un catalogue des produits, l’achat en ligne via paiement sécurisé (carte de crédit, e-dinar). Le rapport présente aussi les impacts opérationnels, internes et externes, du lancement d’une boutique en Ligne. Dans un premier chapitre nous présentons le cadre général. Dans le deuxième, nous Analyserons quelques applications spécialisés dans la vente afin de dégager les besoins de notre application. Ensuite, nous détaillerons les spécifications des besoins. Dans le troisième Chapitre, nous procéderons à la description de la conception de la solution. La réalisation et Les tests se situeront au niveau du quatrième chapitre de notre rapport. Nous terminons le rapport par une conclusion générale en nous présentons quelques perspectives et futur améliorations concernant notre application. Chapitre 1 Etude préalable 1.1 Introduction Dans ce chapitre, nous présentons l’étude préalable qui doit être élaborer avant d’entamer la mise en place de notre application. Pour cela, nous présenterons l’étude des applications de vente en ligne pour Androïd [4]. Nous détaillerons ensuite les exigences fonctionnelles de la boutique, à savoir les fonctionnalités requises par l’utilisateur. Nous ajouterons enfin des exigences non fonctionnelles et des contraintes de conception pour nous placer dans l’optique du démarrage d’un projet réel. 1.2 Étude de l’existant L’étude de l’existant permet de déterminer les points faibles et les points forts d’un produit actuel pour pouvoir déterminer les besoins du client, en vue d’en prendre en considération lors de la conception et la réalisation de la boutique en ligne. Dans cette section, nous présentons une analyse de quelques exemples d’applications marchands. Ensuite, nous formulerons une solution de la problématique. 1.3 Analyse de l’application Amazon.fr 1.3 4 Analyse de l’application Amazon.fr Dans cette section, nous présentons l’application Amazon.fr. Ensuite nous procédons à une analyse fonctionnelle, technique et graphique de l’application étudié. 1.3.1 Présentation de l’application Amazon pour Androïd L’application Amazon permet aux consommateurs de chercher des produits, de lire des commentaires et de faire des achats sur Amazon.fr depuis leur téléphone portable. Elle permet aussi à un produit d’obtenir immédiatement des informations sur celui-ci, dont son prix et sa disponibilité sur Amazon.fr. Les consommateurs d’Amazon ont accès à leurs panier, leurs listes d’envie, leurs options de paiement, l’historique de leurs achats. Toutes les commandes sont effectuées via les serveurs sécurisés d’Amazon. Tous les prix sont en euro et les produits se retrouvent sur le site Amazon.fr. 1.3.2 Analyse fonctionnelle Tel que le montre la figure 1.1, l’application Amazon offre plusieurs fonctionnalités au visiteur. Il lui permet de : 1. Effectuer immédiatement des achats parmi la sélection des produits de l’application Amazon.fr et ce ci via les serveurs sécurisés du site. 2. Consulter des images de produits et lire des commentaires de consommateurs où que vous soyez et au moment que vous choisirez. 3. Suivre le statut d’une commande récente depuis votre téléphone. 4. Obtenir immédiatement des informations sur le produit, dont son prix et sa disponibilité (pour les téléphones avec un appareil photo autofocus) compatible avec les versions 1.6, 2.0, 2.1, ou 2.2 d’Androïd. 1.3 Analyse de l’application Amazon.fr (a) 5 (b) (c) (d) Figure 1.1 – application Amazon 1.4 Analyse de l’application eBay officielle pour Andrïd 6 – La figure 1.1 (a) illustre la page d’accueil de l’application Amazon – La figure 1.1 (b) illustre la liste des produits proposé par l’application Amazon – La figure 1.1 (c) illustre les informations détaillé d’un produit – La figure 1.1 (d) illustre la page commentaires clients 1.3.3 Analyse technique L’application Amazon.fr est développé avec le langage Java (SDK Androïd). Les images contenues dans l’application sont des images dont le format est JPEG. Dénotation Connotation La page d’accueil est disposée Cette disposition donne un sens précis de lecture en deux parties horizontales. qui rend la page plus large. Les formes utilisées sont des Les formes rectangulaires donnent de la stabil- formes rectangulaires avec des ité à l’interface et les coins arrondis ajoutent du coins arrondis. dynamisme. La gamme des couleurs util- L’utilisation du contraste entre le bleu, le noir et isées sont les tons du bleu, l’o- l’orangé ravive l’interface. L’utilisation du noir rangé et noir. et de l’orangé pour réveiller le bleu et empêcher sa continuité. Table 1.1 – Connotation et dénotation du l’application Amazon.fr. 1.4 Analyse de l’application eBay officielle pour Andrïd Dans cette section nous présentons l’application eBay.fr. Ensuite nous procédons à une analyse fonctionnelle, technique et graphique. 1.4 Analyse de l’application eBay officielle pour Andrïd 1.4.1 7 Présentation générale Avec l’application eBay, nous pouvons parcourir les annonces, achetez des objets et consultez les activités eBay. Ainsi, l’application eBay permet de recevoir des alertes lorsque les objets sont en ventraux enchère ou vos Affaires à suivre se terminent bientôt. 1.4.2 Analyse fonctionnelle Cette application permet aux utilisateurs de : 1. Accéder facilement au compte eBay. 2. Consulter la description et les détails de l’objet. 3. Recevoir des notifications lorsqu’une de vos Affaires à suivre se termine bientôt. 4. Afficher les détails sur le vendeur, notamment son profil d’évaluation et ses évaluations récentes par les autres utilisateurs. 1.4 Analyse de l’application eBay officielle pour Andrïd 8 (a) (b) (c) (d) Figure 1.2 – Application eBay 1.5 Analyse du l’application Best Buy pour Androïd 9 – La figure 1.3 (a) illustre la page d’accueil de l’application eBay – La figure 1.3 (b) illustre les votes des clients pour le produit ”HARLEY DAVIDSON” – La figure 1.3 (c) illustre la liste des produits gagnés – La figure 1.3 (d) illustre le résultat de la recherche pour ” pantech 7000 ” 1.4.3 Analyse technique L’application eBay est développé avec le langage Java (SDK ANDROÏD). Les images contenues dans l’application sont des images dont le format est JPEG. Dénotation Connotation La page d’accueil est disposée Cette disposition donne un sens précis de lecture en deux parties horizontales. qui rend la page plus large Les formes utilisées sont des Les formes rectangulaires donnent de la stabil- formes rectangulaires avec des ité à l’interface et les coins arrondis ajoutent du coins arrondis. dynamisme. La typographie utilisée est Cette typographie facilite la lecture de la page sans empattement. de l’application. Table 1.2 – Connotation et dénotation du l’application eBay officielle. 1.5 Analyse du l’application Best Buy pour Androïd Dans cette section présentant l’application Best Buy, nous procédons à une analyse fonctionnelle et technique. 1.5.1 Présentation de Best Buy Acheteur Be Happy. 1.5 Analyse du l’application Best Buy pour Androïd 10 L’application de Best Buy offre une nouvelle façon d’achat des technologies dernière cri.Elle permet ainsi de parcourir le catalogue de produits complet Best Buy, comparer les spécifications des produits, et créer une liste de produit. – l’application Best Buy est menu d’un système de recherche avancé qui permet de trouver rapidement les produits préférés, lire les commentaires, et de trouver la disponibilité en magasin. – Achat des téléphones et des produits qui sont livrés directement à domicile. – La fonction de mise à jour permet d’afficher vos derniers achats, le suivi des points, et le découvert des dernières offres. 1.5.2 Analyse fonctionnelle Recherchez, suivez et achetez des objets, où vous soyez 1. Accédez facilement à Best Buy 2. Consultez la description et les détails de l’objet 3. Recevez des notifications lorsqu’une de vos Affaires à suivre se termine ou lorsqu’un membre a surenchéri 4. Affichez les détails sur le vendeur, notamment son profil d’évaluation et ses évaluations récentes 5. Affichez les autres objets du vendeur 1.5 Analyse du l’application Best Buy pour Androïd 11 (a) (b) (c) (d) Figure 1.3 – Application BestBuy 1.6 Spécification des besoins fonctionnels 12 – La figure 1.5 (a) illustre la page de la description détaillé d’un produit – La figure 1.5 (b) illustre la page de la comparaison entre deux produit – La figure 1.5 (c) illustre la liste des services offertes par l’application – La figure 1.5 (d) illustre le résultat d’une recherche 1.5.3 Analyse technique L’application Best Buy est développée avec le langage Java (SDK Androïd). Les images contenues dans l’application sont des images dont le format est JPEG et GIF. Dénotation Connotation La page d’accueil est disposée Cette disposition donne un sens précis de lecture en deux parties horizontales. qui rend la page plus large. Les formes utilisées sont des Les formes rectangulaires donnent de la stabil- formes rectangulaires avec des ité à l’interface et les coins arrondis ajoutent du coins arrondis. dynamisme. La typographie utilisée est Cette typographie facilite la lecture de la page sans empattement. de l’application. Table 1.3 – Connotation et dénotation du l’application Best Buy. 1.6 Spécification des besoins fonctionnels Dans cette partie nous identifions les acteurs de notre boutique en ligne afin de pouvoir dégager les besoins fonctionnels. 1.6.1 Identification des acteurs L’application doit fournir un ensemble de fonctionnalités aux clients. En effet, l’application Permettra aux clients d’effectuer leurs achats et de lancer des commandes. Cependant, nous Parvenons à dégager deux acteurs 1.6 Spécification des besoins fonctionnels 13 principaux qui sont : – Le client qui utilise l’application et procède à l’achat d’un article. – L’administrateur qui doit gérer le bon fonctionnement de l’application. 1.6.2 Description des exigences fonctionnelles L’application doit permettre au client de : 1. Rechercher des produits – Trier par marque. – Trier par catégorie – Trier par produits de mois. 2. Visualiser des échantillons de produits – Via le galerie d’image. 3. Gérer son panier – Accéder au panier du site. – Modifier le panier du site. 4. Partager l’application – Sur twitter – Sur facebook – Par mail – Par sms L’application doit permettre à l’administrateur de : 1. Gérer les catégories – Ajouter une catégorie. – Modifier une catégorie. – Supprimer une catégorie. 1.7 Modèle de navigation 14 – Lister les catégories. 2. Gérer les marques – Ajouter une marque. – Modifier une marque. – Supprimer une marque. – Lister les marques. 3. Gérer les produits – Ajouter un produit. – Modifier un produit. – Supprimer un produit. – Lister les produits. 1.7 Modèle de navigation Le modèle de navigation permet de définir la manière de navigation dans la boutique. Les principaux modèles de navigation sont les suivants : 1.7.1 Modèle linéaire Dans le modèle linéaire la page comporte un lien qui nous amènera à la page suivante (i.e., quand on ne peut pas naviguer de la même page aux autres pages du site). En générale, les liens sont des pages dites page suivants et page précédents. Figure 1.4 – modele lineaire 1.7 Modèle de navigation 1.7.2 15 Modèle hiérarchique Dans le modèle hiérarchique la navigation est plus souple puisqu’elle est une navigation verticale (i.e., ce modèle permet le passage d’un niveau hiérarchique à un autre). En utilisant ce modèle on peut atteindre à partir d’une seul page (exemple page d’accueil) toutes les autres pages présentées par des liens. Figure 1.5 – Modèle Hiérarchique 1.7 Modèle de navigation 1.7.3 16 Modèle composite C’est une navigation à la fois verticale et horizontale. C’est une combinaison du modèle linéaire et du modèle hiérarchique. Ce modèle permet encore une navigation plus souple puisque nous pouvons accéder aux différentes pages d’un niveau hiérarchique inférieur et supérieur en plus d’une navigation horizontale. Dans notre travail, nous avons eu recours au modèle composite pour assurer une navigation plus souple pour l’utilisateur et un minimum de clique pour atteindre une page. Après avoir analysé les modèles de navigation existants, nous avons opté pour le modèle composite car il présente la navigation la plus pratique. La figure 1.7.3 illustre l’organigramme de notre boutique. Figure 1.6 – Modèle Composite Chapitre 2 Conception technique 2.1 introduction Dans cette partie nous présentons une modélisation de notre futur application. Nous construisons une vue statique de la solution sous forme de diagramme de classes et aussi une vue dynamique sous forme de diagramme de séquence. 2.2 Conception graphique Lors de cette étape, nous essayerons de mettre en harmonie les couleurs, les formes, et la typographie. Nous présentons dans cette partie le produit et la charte graphique de l’établissement. 2.2.1 Synopsis Tout projet multimédia commence par la rédaction du synopsis, l’information qui le contient doit permettre au lecteur d’imaginer ce que pourrait être le produit et de connaître ainsi son intérêt. 2.2 Conception graphique 18 Présentation du produit Sujet : application mobile e-commerce sous Androïd. Type et support : Smartphone. Objectifs : – Développer l’activité e-commerce et l’usage de l’achat en ligne sur site Web Passion Beauté. – Développer la rentabilité du site et favoriser le ROI. – Augmenter le trafic du site Passion Beauté. – Fidéliser les abonnés Passion Beauté. – Contribuer au renouvellement du parc mobile. – Attirer des prospects en leur facilitant l’acte d’achat. – Fournir une information pertinente et fraîche sur les produits disponibles. Public et marché visés – Type de lecteurs visés : les internautes. – Marché visé : Marché français. – Contexte d’utilisation : vente de la gamme de produits via l’application . 2.2.2 Charte graphique La charte graphique est un document de travail comprenant les recommandations d’utilisation et les caractéristiques des différents éléments graphiques qui peuvent être utilisés sur les différents supports de communication de l’entreprise. La charte graphique permet de garantir l’homogénéité de la communication visuelle au sein de l’entreprise. Certes Passion Beauté a déjà sa propre charte graphique, cependant nous sommes obligés de la respecter. 2.3 Conception détaillée 19 Choix des couleurs En vue du respect de la charte graphique imposée par la société, nous avons été obligés de garder les mêmes couleurs de la charte. Choix des formes et des lignes Pour concevoir notre interface nous avons opté pour les formes rectangulaires à coins arrondis qui symbolisent la stabilité, la vérité et le dynamisme. Ces formes sont utilisées pour contenir des informations, représenter l’animation et encadrer certains objets. Les rectangles sont présentés à l’horizontale pour produire un effet panoramique. Nous avons utilisé les coins arrondies des formes pour dynamiser l’interface car ils symbolisent le mouvement et l’interaction. Choix de la typographie Nous n’avons pas choisi de typographie pour la boutique, car nous avons repris celle qui est utilisée par le site de Passion Beauté. 2.2.3 Gabarit Avant de concevoir une page de point de vue couleurs, graphismes ou animations, il faut concevoir un gabarit pour les pages principales du site qui seront par la suite hérité par les autres pages du site. La figure 2.1 montre le gabarit de notre boutique. 2.3 Conception détaillée La conception détaillée de la boutique est composée de deux vues à savoir la vue statique et la vue dynamique. Dans une première parti, nous 2.4 Description de la vue statique 20 Figure 2.1 – Gabarit de notre boutique introduisons une modélisations des diagrammes statique(i.e., diagramme de classe et diagramme d’objets). Par suite, nous décrivons le comportement des classes et des entités dans les diagrammes dynamiques . 2.4 Description de la vue statique Le diagramme de classes décrit l’architecture du système. Il représente les classes et les relations entre elles. Les figures ci-dessous montre le diagramme de classes de notre application 2.4 Description de la vue statique 2.4.1 Base de données Back-office La figure 2.2 illustre la base de donné du Back-office. Figure 2.2 – Base de données Back-office 2.4.2 Base de données Application La figure 2.3 illustre la base de donné de l’application. Figure 2.3 – Base de données Application 21 2.4 Description de la vue statique 2.4.3 Diagramme de classe du Back-office La figure 2.4 illustre le diagramme de Classe du Back-office : Figure 2.4 – Diagramme de Classe du Back-office 2.4.4 Diagramme de classe de l’application La figure2.5 illustre le diagramme de classe de l’application : Figure 2.5 – Diagramme de Classe de l’application 22 2.5 Cas d’utilisation global relatif à un client 2.4.5 23 Cas d’utilisation global La figure 2.6, illustre le cas d’utilisation global de l’application Androïd et du Back-office. 2.5 Cas d’utilisation global relatif à un client La figure 2.7 illustre le cas d’utilisation global relatif au client. Le tableau 2.1 décrit le cas d’utilisation global relatif à un client. Acteur Client Pré-condition Le client lance l’application. Post-condition Le client utilise manipule l’application Principal Scénario Le client consulte les produits et les ajoute au panier et gère son panier. Le client peut accéder à la galerie des images qui contient des échantillons de produits. Le client peut partager l’application sur twiter, facebook, par mail et par sms. Le client peut effectuer une commande Le client peut accéder au site du passion-beauté.com. alternatif Néant Table 2.1 – Description du cas d’utilisation global relatif à un client 2.6 Le diagramme de cas d’utilisation recherche et sélection des produits La figure 2.8 illustre le diagramme de cas d’utilisation relatif à la fonction recherche et sélection des produits. Le tableau 2.2 décrit le cas d’utilisation recherche et sélection des produits. 2.7 Cas d’utilisation gérer son panier du site Passion Beauté Nom du cas 24 Cas d’utilisation recherché et sélection des produits Acteur Client Pré-condition liste des produits Disponible. Post-condition Le client a trouvé le produit qu’il cherchait,il peut accéder au site pour terminer la fonction d’achat Scénario Principal. - Le client lister Les produits qui sont triés soit par catégorie,marque ou produits du mois. -Le client sélectionne le produit pour voir une fiche détaille du produit. -Le client a le choix d’ajouter d’accéder au site et compléter la procédure d’achat. Table 2.2 – Description du cas d’utilisation recherche et sélection des produits 2.7 Cas d’utilisation gérer son panier du site Passion Beauté La figure 2.9 présente le diagramme de cas d’utilisation relatif à la fonction accéder au site passion-beauté.com pour compléter la procédure d’achat. Le tableau 2.3 décrit le cas d’utilisation d’un client qui gère son panier à partir du site passion beauté 2.8 Cas d’utilisation partage de l’application La figure 2.10 illustre le diagramme de cas d’utilisation de partage sur facebook, sur twitter, par mail ou par sms. Le tabbleau 2.4 décrit le cas d’utilisation de partage de l’application. 2.9 Cas d’utilisation global relatif à l’administrateur Nom du cas Gérer son panier du site passion beauté Acteur Client Pré-condition Le client appuyé sur le bouton accéder au site 25 dans le page description détaillée de l’application. Post-condition - Le Client entré dans le site de la passion beauté pour acheter un produit sélectionné dans l’application Scénario Principal. -Le client entrer dans le site « passion-beauté ». -le client terminer le procédure du commande d’une produit dans le site. Table 2.3 – Description de cas d’utilisation gérer son panier du site Passion Beauté Nom du cas Cas d’utilisation gérer l’option de partage Acteur Client Pré-condition Le client s’authentifier Post-condition Partager sur Facebook et twitter ou par mail et sms Scénario Principal. -Le client s’authentifie. -le client partage l’application sur Facebook. -le client partage l’application sur Twiter. -le client partage l’application par mail. -le client partage l’application par sms. Table 2.4 – Description de cas d’utilisation partage de l’application 2.9 Cas d’utilisation global relatif à l’administrateur La figure 2.11 représente le cas d’utilisation global relatif à l’administrateur. Le tableau 2.5 décrit le cs d’utilisation global relatif à l’administrateur. 2.10 Cas d’utilisation mise à jour des produits, des catégories et des marques Nom du cas Utilisation global relatif a l’administrateur Acteur Administrateur Pré-condition L’administrateur est authentifié Post-condition Mettre à jour les catégories, les marques et les 26 produits Scénario Principal. -L’administrateur met à jour les produits. -L’administrateur modifie,ajoute ou supprime des marques. -L’administrateur met à jour les catégories. Table 2.5 – Description du cas d’utilisation global relatif à l’administrateur 2.10 Cas d’utilisation mise à jour des produits, des catégories et des marques La figure 2.12 illustre le cas d’utilisation de la fonction de mise à jour des produits, des catégories et des marques. Le tableau 2.6 décrit le cas d’utilisation de mise à jour des produits, des catégories et des marques. 2.11 Cas d’utilisation diagramme de composants La figure 2.13 illustre le diagramme de composant, les composants de notre projet sont back-office(coté administrateur) et application Androïd(coté client). 2.12 Description de la vue dynamique Nom du cas 27 Mettre les produits, les catégories et les marques à jour Acteur Administrateur Pré-condition L’administrateur est authentifié Post-condition Mettre à jour les données de back-office Scénario Principal. -L’administrateur s’authentifie. -L’administrateur consulte les produits, il peut modifier ou supprimer un ou plusieurs produits. -L’administrateur consulte les catégories, il peut modifier ou supprimer un ou plusieurs catégories. -L’administrateur consulte les marques, il peut modifier ou supprimer un ou plusieurs marques Table 2.6 – Description de cas d’utilisation mise à jour produits, catégories et marques 2.12 Description de la vue dynamique Dans ce paragraphe nous présentons une modélisation conceptuelle des traitements moyennant les diagrammes de séquence qui mettent en œuvre les différents objets. 2.13 Les diagrammes de séquence Un diagramme de séquence présente une collaboration avec une interaction superposée. En général une séquence porte sur un type spécifique d’action dont la description devrait être renforcée. 2.14 Diagramme de séquence d’affichage de galerie des images La figure 2.14 illustre le scénario d’affichage de la catégorie d’image. 2.15 Diagramme de séquence détail produits 2.15 28 Diagramme de séquence détail produits La figure 2.15 illustre la procédure d’affichage de détailles des produits. Comme montre la figure, le client sélectionne l’une des produit, la classe détail prend la main et affiche la fiche détaille de ce produit. 2.16 Diagramme de séquence gérer panier du site La figure 2.16 présente le séquencement à suivre pour accéder au site et gérer le panier du site. 2.17 Diagramme de séquence de mise à jour des catégories La figure 2.17 illustre le diagramme de séquence d’ajout, suppression et modification d’une catégorie. 2.18 Diagramme de séquence de mise à jour des marques La figure 2.18 illustre le diagramme d’ajout, suppresion et modification des marques. 2.19 Diagramme de séquence de mise à jour des produits La figure 2.19 illustre le diagramme d’ajout, suppression et modification des produits. 2.20 Diagramme de séquence d’affichage des produits triées par marque 2.20 29 Diagramme de séquence d’affichage des produits triées par marque La figure illustre le scénario d’affichage de détaille de produit en choisissant le classement des produits par marque. 2.21 Diagramme de séquence de partage Le bouton menu affiche le menu de l’application, le bouton partager lance une boite de dialogue, qui permet de faire le partage de l’application sur facebook et twitter ou l’envoyer par mail ou sms. La figure 2.21 illustre ce diagramme de séquence. 2.21.1 Conclusion : Dans ce chapitre, nous avons détaillé les phases de conception : conception graphique et conception technique qui nous a permis de dégager la structure de la base de données à fin qu’on puisse réaliser notre solution dans le chapitre suivant. 2.21 Diagramme de séquence de partage Figure 2.6 – Cas d’utilisation global 30 2.21 Diagramme de séquence de partage Figure 2.7 – Diagramme de cas d’utilisation global relatif à un client 31 2.21 Diagramme de séquence de partage Figure 2.8 – Cas d’utilisation recherche et sélection des produits 32 2.21 Diagramme de séquence de partage Figure 2.9 – Diagramme de cas d’utilisation accéder au site passion-beauté.com Figure 2.10 – Cas d’utilisation partage de l’application 33 2.21 Diagramme de séquence de partage Figure 2.11 – Cas d’utilisation global administrateur 34 2.21 Diagramme de séquence de partage Figure 2.12 – Cas d’utilisation mise à jour produits, catégories et marques 35 2.21 Diagramme de séquence de partage Figure 2.13 – Diagramme de composants Figure 2.14 – diagramme de Séquence galerie image 36 2.21 Diagramme de séquence de partage Figure 2.15 – Diagramme de Séquence détail produits 37 2.21 Diagramme de séquence de partage Figure 2.16 – Diagramme de séquence gérer panier du site 38 2.21 Diagramme de séquence de partage Figure 2.17 – diagramme de séquence de mise à jour des catégories 39 2.21 Diagramme de séquence de partage 40 2.21 Diagramme de séquence de partage Figure 2.19 – Diagramme de séquence de mise à jour des produits 41 2.21 Diagramme de séquence de partage Figure 2.20 – Diagramme de séquence d’affichage des produits triées par marque 42 2.21 Diagramme de séquence de partage Figure 2.21 – Diagramme de séquence de partage 43 Chapitre 3 Réalisation et Test 3.1 Introduction Ce chapitre est consacré à la présentation de l’environnement matériel et logiciel utilisés pour le développement de la solution proposé, nous expliquerons éventuellement nos choix techniques relatif aux langages de programmation et des outils utilisés. Nous donnons ensuite une description des résultats aboutis approuvés par quelques imprimes écrans. 3.2 Environnement du travail Dans cette section nous décrirons l’environnement du travail. 3.2.1 Environnement matériel L’application a été développée sur la machine possédant les caractéristiques suivantes : 3.2 Environnement du travail 3.2.2 45 Processeur Intel Centrino duo Mémoire 1 Go Ecran 15,4 ” Fréquence d’horloge 1 .73 GHZ Disque dur 230 Go Processeur Intel Centrino duo Mémoire 4 Go Ecran 17,4 ” Fréquence d’horloge 3 GHZ Disque dur 640 Go Environnement logiciel Pour réaliser notre application de vente de produits en ligne, nous avons eu recours aux logiciels suivants : – Eclipse (l’environnement de développement Androïd [4]) : Outil de développement d’application. – Adobe Photoshop CS3 : Logiciel pour le traitement et les retouches d’images. – Apache 2.2.14 : Serveur web. – MySQL : Sytème de gestion de base de donnée. – notepad++ : Éditeur simple pour l’écriture du code PHP [5]. Pour réaliser notre rapport nous avons eu recours au logiciel suivant : – kile : application sous Linux pour la rédaction du rapport en Latex – Dia et Gimp : deux application dédiées à la gestion des images et la génération des images vectorielles. 3.3 Tests et réalisation 3.3 3.3.1 46 Tests et réalisation Diagramme de déploiement Le diagramme de déploiement montre la disposition physique des matériels qui composent le système. Les ressources matérielles sont représentées sous forme de n’œuds. Notre application est hébergée sur un serveur Web et les postes clients peuvent y accéder. Ceci est illustré dans la figure suivante : Figure 3.1 – Diagramme de déploiement 3.3 Tests et réalisation 3.3.2 47 Scénario d’exécution À ce stade, nous présentons notre application à travers les divers imprimes écrans réalisés. Nous présentons, au début l’interface de la page d’inscription du Back-office. En effet, pour s’inscrire, l’utilisateur doit choisir un login et un mot de passe. Capture d’écran : page inscription Figure 3.2 – Capture d’écran : page inscription 3.3 Tests et réalisation 48 Capture d’écran : page connexion Figure 3.3 – Capture d’écran : page connexion La figure 3.3 illustre la page de connexion du Back-office. Comme montre la figure, l’utilisateur doit saisir un login et un mot de passe valides pour accéder aux interfaces qui suivent. Capture d’écran : ajout catégorie La figure 3.4 illustre la page d’ajout d’une catégorie. une fois le champ ’libelle catégorie’ est remplis, on valide l’ajout par le bouton submit. Capture d’écran : page catégorie La figure 3.5 illustre les différentes catégorie existantes. À partir du champ action on peut modifier ou supprimer les catégories. Capture d’écran : ajout marque Comme le montre la figure 3.6 l’ajout d’une marque, se fait par le saisi du nom de la marque et l’appui sur le bouton submit pour la validation. 3.3 Tests et réalisation Figure 3.4 – Capture d’écran : ajout catégorie Figure 3.5 – Capture d’écran : page catégorie 49 3.3 Tests et réalisation 50 Figure 3.6 – Capture d’écran : ajout marque Capture d’écran : page marque La figure 3.7 illustre toutes les marques existantes. Dans le champ action on a deux boutons qui nous permet de supprimer ou modifier les marques. Capture d’écran : ajout produit La figure 3.8, mentionne, l’ajout d’un produit. En effet, chaque produit s’inscrit sous une catégorie et une marque. Ainsi chaque produit est caractérisé par un prix, la quantité disponible, une image, une description et un libellé. Capture d’écran : page produit La figure 3.9 illustre la page des produits du Passion Beauté. Chaque ligne identifie un produit. Le champ action permet de supprimer un produit ou modifier ses données relative. 3.3 Tests et réalisation Figure 3.7 – Capture d’écran : page marque Figure 3.8 – Capture d’écran : page produit 51 3.3 Tests et réalisation 52 Figure 3.9 – Capture d’écran : page produit À ce stade, nous présentons notre application embarquée à travers différentes imprimes écrans réalisés. Nous présentons, au début les deux pages du chargement, illustré dans les figures 3.10 et 3.11, Au cours du chargement l’application se connecte au Back-office via le Web service et met à jour la base SQLite du téléphone. 3.3 Tests et réalisation 53 Figure 3.10 – Capture d’écran : la première page de chargement Figure 3.11 – Capture d’écran : la deuxième page de chargement Capture d’écran : page d’acceuil de l’application embarqué La figure 3.12 représente la page d’accueil de l’application. Le menu de l’application contient des sous menu qui donne à l’utilisateur l’opportunité 3.3 Tests et réalisation 54 Figure 3.12 – Capture d’écran : page d’accueil de l’application embarqué de partager l’application, visualiser les produits, les marques et la galerie d’images. 3.3 Tests et réalisation 55 Capture d’écran : page à propo Figure 3.13 – Capture d’écran : page à propos La figure 3.13 représente la page A propos qui permet de passer à partir de l’application vers le site Passion Beauté. Ainsi à partir de cette page on peut avoir des renseignements concernant cette société. 3.3 Tests et réalisation 56 Capture d’écran : page des catégories Figure 3.14 – Capture d’écran : page des catégories La figure 3.14 affiche les différentes catégories des produits commercialisés par la société. En choisissant une catégorie on aura la listes des produits qui s’inscrivent sous cette catégorie. 3.3 Tests et réalisation Capture d’écran : liste des accessoires Figure 3.15 – Capture d’écran : liste des accessoires la figure 3.15 illustre la liste des produits accessoires. 57 3.3 Tests et réalisation 58 Capture d’écran : liste des pinceaux Figure 3.16 – Capture d’écran : liste des pinceaux La figure 3.16 illustre les pinceaux disponible. En choisissant un pinceau on passe vers la page détaille de ce produit. 3.3 Tests et réalisation 59 Capture d’écran : liste des produits de bain Figure 3.17 – Capture d’écran : liste des produits de bain La figure 3.17 illustre la liste des produits qui existe sous la catégorie produit de bain. La liste est mise à jour moyennant un back-office. 3.3 Tests et réalisation 60 Capture d’écran : page de partage Figure 3.18 – Capture d’écran : page de partage La figure 3.18 illustre les choix de partage. À partir de cette page le client peut partager l’application sur facebook et twiter, envoyer un mail ou un sms. 3.3 Tests et réalisation 61 Capture d’écran : partage sur facebook Figure 3.19 – Capture d’écran : partage sur facebook La figure 3.19 représente l’interface de connexion sur le site facebook afin de partager l’application. 3.3 Tests et réalisation 62 Capture d’écran : partage sur twitter Figure 3.20 – Capture d’écran : partage sur twitter La figure 3.20 illustre l’interface de connexion sur le site twitter afin de partager l’application. 3.3 Tests et réalisation Capture d’écran : envoyer un mail Figure 3.21 – Capture d’écran : envoyer un mail La figure 3.21 illustre l’interface de l’envoie de l’application par mail. 63 3.3 Tests et réalisation 64 Capture d’écran : Page des marques Figure 3.22 – Capture d’écran : galerie des marques La figure 3.22 illustre les marques des produits. En choisissant une marque on passe vers les produits de cette marque. 3.3 Tests et réalisation 65 Capture d’écran : Produits de la marque lacoste Figure 3.23 – Capture d’écran : galerie des marques La figure 3.23 illustre la liste des produits qui s’incrivent sous la marque lacoste. En choisissant un produit on passe vers la page détaille de ce produit. 3.3 Tests et réalisation 66 Capture d’écran : Produits de la marque Dior Figure 3.24 – Capture d’écran : galerie des marques La figure 3.24 illustre la liste des produits qui s’incrivent sous la marque Dior. En choisissant un produit on passe vers la page détaille de ce produit. 3.3 Tests et réalisation 67 Capture d’écran : Produits de la marque Boss Figure 3.25 – Capture d’écran : galerie des marques La figure 3.25 illustre la liste des produits qui s’incrivent sous la marque Boss. En choisissant un produit on passe vers la page détaille de ce produit. 3.3 Tests et réalisation 68 Capture d’écran : galerie d’image Figure 3.26 – Capture d’écran : galerie d’image La figure 3.26 illustre les images de quelques échantillons de produits. Conclusion et Perspectives Au cours de ce travail, nous avons tout d’abord mené une recherche sur les applications e-commerce et leurs systèmes de fonctionnement (paiement, livraison, etc..). Nous sommes intéressés en particulier à l’application des opérateurs privés de télécommunication en France et en Amérique du nord. Nous avons donc essayé de dégager leurs fonctionnalités et leurs choix adoptés, ce qui nous a permis de déterminer les grands axes que nous allons suivre pour concevoir notre solution. Notre problématique consiste donc à développer l’application en ligne de Passion Beauté. Pour atteindre ces objectifs nous avons choisi le langage UML pour modéliser notre Application, aussi bien dans les activités de capture des besoins, de conception ou d’analyse. Nous avons cependant tenu à être plus simplistes et moins exigeants en termes de méthodes de conception et de logistique, dans le but de nous concentrer plus sur la pratique de la réalisation du projet. L’application que nous avons réalisé, permettra de : – Développer l’activité e-commerce et l’usage de l’achat en ligne sur le site Web. – Augmenter le trafic du site passion-beauté.com. – Fidéliser les abonnés de Passion Beauté. – Attirer des prospects en leur facilitant l’acte d’achat. 3.3 Tests et réalisation 70 – Fournir une information pertinente et fraîche sur les produits disponibles. Malgré son intérêt comme solution indispensable pour développer les chiffres de ventes de Passion Beauté et malgré la difficulté de la tâche d’autocritique, nous ne pouvons pas prétendre que ce travail est une solution complète et définitive. Nous mentionnons que notre projet de fin d’étude s’arrête à l’étape ou le client accède au catalogue du produits car Passion Beauté s’est réservé le droit d’effectuer totalement et seul cette tâche. En effet, il y a toujours des améliorations. Nous citons à titre d’exemple : – Ajouter un module de paiement depuis l’application mobile. – Développer un web service (côté serveur) pour rendre, la tâche de la mise à jour (côté mobile), possible l’accés à l’application indépendamment du plateforme. – Publier l’application Passion Beauté 1.0 sur Androïd marquet et capter les améliorations possible à partir des réclamations clients. Chapitre 4 ANNEXES UML 1 est un Langage graphique de modélisation des données et des traitements. C’est une formalisation très aboutie et non propriétaire de la modélisation objet utilisée en génie logiciel. L’OMG diffuse depuis Novembre 2007 la version UML 2.1.2, et travaille à présent sur la version 2.2. 4.1 Le formalisme d’UML Le modèle UML [2, 3] est composé de 13 types de diagrammes (9 en UML 1.3). UML n’étant pas une méthode, leur utilisation est laissée à l’appréciation de chacun, même si le diagramme de classes est généralement considéré comme l’élément central d’UML, des méthodologies, telles que l’UnifiedProcess, axent elles l’analyse en tout premier lieu sur les diagrammes de cas d’utilisation (Use Case). De même, on peut se contenter de modéliser (seulement) Partiellement un système, par exemple certaines parties critiques. UML se décompose en plusieurs sous-ensembles Les vues : Les vues sont les observables du système. Elles décrivent le système d’un point de Vue donné, qui peut être organisationnel, dynamique, 1. UML est l’acronyme de en anglais Unified Modeling Language et en français« langage de modélisation unifié » 4.2 Les diagrammes 72 temporel, architectural, géographique, Logique, etc. En combinant toutes ces vues il est possible de définir (ou retrouver) le système Complet. 4.2 Les diagrammes Les diagrammes sont des éléments graphiques. Ceux-ci décrivent le Contenu des vues, qui sont des notions abstraites. Les diagrammes peuvent faire partie de plusieurs vues. 4.3 Les modèles d’élément Les modèles d’élément sont les briques des diagrammes UML, ces Modèles sont utilisés dans plusieurs types de diagramme. Exemple d’élément : cas d’utilisation, classe, association, etc. Mise en œuvre d’une démarche à l’aide d’UML : les vues Une façon de mettre en œuvre UML est de considérer différentes vues qui peuvent se Superposer pour collaborer à la définition du système. Figure 4.1 – Les vues 4.4 Les diagrammes 73 – Vue des cas d’utilisation : c’est la description du modèle "vue" par les acteurs du système. Elle correspond aux besoins attendus par chaque acteur (c’est le QUOI et le QUI). Vue logique : c’est la définition du système vu de l’intérieur. Elle explique comment peuvent Être satisfaits les besoins des acteurs (c’est le COMMENT). – Vue d’implémentation : cette vue définit les dépendances entre les modules. – Vue des processus : c’est la vue temporelle et technique, qui met en œuvre les notions de tâches concurrentes, stimuli, contrôle, synchronisation, etc. – Vue de déploiement : cette vue décrit la position géographique et l’architecture physique de chaque élément du système (c’est le OÙ). Note : le POURQUOI, n’est pas défini dans UML. 4.4 Les diagrammes Les 13 diagrammes UML sont dépendants hiérarchiquement et se complètent La hiérarchie des diagrammes UML 2.0 sous forme d’un diagramme de classes 4.4.1 Diagrammes Structurels ou Diagrammes statiques (cf. Structure Diagram) – Diagramme de classes :(cf. Class Diagram) : il représente les classes intervenant dans Le système. – Diagramme d’objets :(cf. Object Diagram) : il sert à représenter les instances de Classes (objets) utilisées dans le système. – Diagramme de composants :(cf. Component Diagram) : il permet de montrer les Composants du système d’un point de vue physique, tels 4.4 Les diagrammes 74 qu’ils sont mis en œuvre (Fichiers, bibliothèques, bases de données...). – Diagramme de déploiement :(cf. Deployment Diagram) : il sert à représenter les Éléments matériels (ordinateurs, périphériques, réseaux, systèmes de stockage...) et la Manière dont les composants du système sont répartis sur ces éléments matériels et Interagissent avec eux. – Diagramme des paquetages :(cf. Package Diagram) : un paquetage étant un conteneur Logique permettant de regrouper et d’organiser les éléments dans le modèle UML, le Diagramme de paquetage sert à représenter les dépendances entre paquetages, c’est à dire Les dépendances entre ensembles de définitions. – Diagramme de structure composite :(cf. Composite Structure Diagram) : permet de Décrire sous forme de boîte blanche les relations entre composants d’une classe. – Diagrammes Comportementaux – Diagramme des cas d’utilisation :(use cases) (cf. Use Case Diagram) : il permet d’identifier les possibilités d’interaction entre le système et les acteurs (intervenants extérieurs au système), c’est-à-dire toutes les fonctionnalités que doit fournir le système. – Diagramme états-transitions :(cf. State Machine Diagram) : permet de décrire sous forme de machine à états finis le comportement du système ou de ses composants. – Diagramme d’activité :(cf. Activity Diagram) : permet de décrire sous forme de flux ou d’enchaînement d’activités le comportement du système ou de ses composants. – Diagramme d’interactions ou Diagrammes dynamiques : (cf. Interaction Diagram) – Diagramme de séquence : (cf. Sequence Diagram) : représentation 4.5 Standardisation et Certification UML : 75 séquentielle du déroulement des traitements et des interactions entre les éléments du système et/ou de ses acteurs. – Diagramme de communication : (cf. Communication Diagram) : représentation simplifiée d’un diagramme de séquence se concentrant sur les échanges de messages entre les objets. – Diagramme global d’interaction : (cf. Interaction Overview Diagram) : permet de décrire les enchaînements possibles entre les scénarios préalablement identifiés sous forme de diagrammes de séquences (variante du diagramme d’activité). – Diagramme de temps : (cf. Timing Diagram) : permet de décrire les variations d’une donnée au cours du temps. Les modèles d’éléments. 4.5 Standardisation et Certification UML : UML n’est pas un standard de fait mais un standard « industriel » de l’OMG (novembre 1997). Ceci étant, vu le succès initial de ce langage, il aurait Pu tout aussi bien être simplement « standard de fait ». Depuis juillet 2005, la première Version 2.* de UML est validée par l’OMG. Par ailleurs, depuis 2003, l’OMG a mis en place un programme de certification à la pratique et La connaissance d’UML : OCUP (OMG Certified UML Professional) 4.6 Exemple de séquence de création des diagrammes 4.7 Logiciels de modélisation UML Il existe de nombreux outils logiciels de modélisation UML. Malheureusement aucun d’entre Eux ne respectent strictement aucune des versions d’UML, particulièrement UML2 : beaucoup De ces outils introduisent des notations 4.7 Logiciels de modélisation UML Diagramme de cas d’utilisation 76 Spécification, cahier des charges Diagramme de séquence Diagramme d’objet Conception Architecturale Diagramme d’activité Diagramme de classe Diagramme de communication Diagramme de déploiement Diagramme de composant particulières non conformes, très peu supportent les différents types de diagrammes définis par le standard. Beaucoup en revanche incluent des Outils de génération de squelette de code, particulièrement à partir du diagramme de classes, qui est celui qui se prête le mieux à une telle automatisation. Les outils plus réputés, à défaut d’être conformes, sont les outils d’openModelSphere. Bibliographie [1] Android numéro 1. http Disponible sur Internet à l’adresse ://www.infobidouille.com/actualites/2011/02/01/Android-est- numero-un-mondial, 2010. [2] Xavier Blanc. UML2 pour les pour les développeurs. EYROLLES, 2006. [3] Xavier Blanc. UML 2 de l’apprentissage à la pratique. 2009. [4] Cyril Mottier et Ludovic Perrier. Développez pour Android. 2010. [5] Christophe Villeneuve. PHP et MySQL - MySQLi - PDO. 2008.