Téléchargé parAHMEDBELGHITH4
Conception et réalisation d'une application web et mobile de e-commerce
Ce document présente un projet de fin d'étude consistant en la création d'une application web et mobile de e-commerce, soulignant les problèmes de navigation et d'ergonomie rencontrés dans l'application précédente. Il propose des solutions comme le développement d'un espace client et l'implémentation d'un module de paiement, tout en décrivant le processus méthodologique et les diagrammes UML utilisés pour la conception. Le projet est conclu par une évaluation des réalisations et des perspectives d'amélioration, notamment le développement d'une version iOS de l'application.
Conception et réalisation d'une application web et mobile de e-commerce
- 1. MINISTERE DE L’ENSEIGNEMENTSUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE UNIVERSITE TUNIS EL MANAR INSTITUT SUPERIEUR D’INFORMATIQUE Présentation du projet de fin d ’étude 2020-2021 Encadré par: Mr. DRIDI SKANDER Mme. KAROUI WAFA Conception et réalisation d’une application Web et mobile Réalisé par AHMED BELGHITH
- 2. Plan 2 2 CONTEXTE GÉNÉRAL CONCEPTION ANALYSEET SPECIFICATION DES BESOINS RÉALISATION CONCLUSION ET PERSPECTIVES 1 2 3 4 5
- 3. Contexte générale 3 L’organisme d’accueil Problématique Solution Méthodologie du projet
- 4. Problématique 4 La navigation n’estpas fluide et l’informations n’est pas hiérarchisée Les fonctionnalités et les boutons ne répondent pas à l’UX. Les produits professionnels ne sont pas exposés Accès limité aux fonctions du téléphone Lenteur du traitement de demandes. Retour constant de développeur à la bd et au code.
- 5. Solution proposée 5 5 1 23 4 5 refaire l’application avec une meilleure composition. Développement d’un espace client L’implémentation d’un module de paiement. L’instauration d’un back end pour l’administrateur Parvenir à une navigation fluide et optimisée.
- 6. 6 Méthodologie du projet: Cycle en V Détails Temps
- 7. Analyse et spécificationdes besoins 7 Identification des acteurs Identification des besoins Modélisation du projet Diagramme des cas d’utilisation
- 8.
- 9. IDENTIFICATION DES BESOINS 9 9 Inscriptionet authentification Exposition des produits L’ajout de produit au panier Confirmation de commande Paiement Authentification Exposition des différents éléments de boutique Gestion de différents éléments Visiteur et Client Administrateur LES BESOINS FONCTIONNELS
- 10. IDENTIFICATION DES BESOINS 10 Ergonomie Performance Gestiondes erreurs Sécurité Modularité LES BESOINS NON FONCTIONNELS
- 11. MODÉLISATION DU PROJET: UML 11 un langage visuel constitué d’un ensemble de schémas, appelés des diagrammes, donnant chacun d’eux une différente vision du projet à traiter. Diagrammes utilisés : • Diagramme de déploiement • Diagramme de classe • Diagramme de cas d’utilisation • Diagramme de séquence
- 12. DIAGRAMMES DES CASD’UTILISATION : VISITEUR 12 Consulter les produits Visteur Client Contacter la société Inscription Newsletter Créer un compte Installer l’application mobile Gérer panier
- 13. DIAGRAMMES DES CASD’UTILISATION : CLIENT 13 Consulter les produits Client Effectuer commande Consulter commande Gérer son compte Consulter produits professionnels Gestion panier Modifier Supprimer Contacter la société Paiement en ligne S’authentifier
- 14. DIAGRAMMES DES CASD’UTILISATION : ADMINISTRATEUR 14 Gérer users Administrateur Consulter commandes Consulter contacts Consulter Newsletters Gérer catégories Gérer produits S’authentifier
- 15. Conception 15 Architecture logique Architecture physique Diagrammede classes Diagramme de séquences
- 16.
- 17.
- 18.
- 19. DIAGRAMME DE SÉQUENCE«Effectuer commande». 19
- 20. DIAGRAMME DE SÉQUENCE«Ajouter produit». 20
- 21. RÉALISATION 21 Environnement et choixtechnologiques Travail réalisé
- 22.
- 23.
- 24.
- 25. CONCLUSION 25 Réalisation L’application a étébien réalisée elle nécessite juste des retouches Fin Conception et réalisation d’une application web et mobile de E- commerce Atouts Savoir-faire et connaissances utiles Découverte de nouvelles technologies Difficultés Nouvelle technologie à maitriser Mise en évidence de notre savoir faire et l’intégration dans le monde professionnel
- 26. PERSPECTIVES 26 26 Réaliser une versionIOS Ajouter une fonction de mailing après la confirmation de commande Améliorer le tableau de bord administrateur
- 27. Merci de votreattention !
Notes de l'éditeur
- #9 Notre application donc est basée principalement par trois acteurs.
- #10 notre application web et mobile regroupe des différentes besoins fonctionnels tels que :
- #12 Il a pour but de représenter le fonctionnement, la mise en route et les actions susceptibles d’être effectuées par le logiciel à développer.
- #13 Le client est un visiteur ayant déjà créer un compte c’est pour ca il hérite le visiteur
- #14 Juste il a d’autre action que le visiteur telles: Effectuation d’une commande Consultation des produits professionnels Consultation des commandes Gestion de compte puisque il est inscrit Effectuation d’une commande
- #15 Notre administrateur est responsable de gérer tous les éléments de l'application sur son tableau de bord
- #17 Pour notre architecture logique, nous avons utilisé le patron de conception MVC du Framework spring, donc notre architecture est composée principalement par trois parties, Model View et controller
- #18 ce diagramme de déploiement nous donne une vision sur l’architecture physique de la solution, donc notre diagramme se décompose principalement par l’architecture 3 tiers, c’est l’architecture qui décrit le transfert des requêtes requête et réponse entre le client, le serveur d’application et le serveur base de données, le type de ces requêtes sont http,
- #20 l’architecture logique est de type mvc donc notre diagramme va être composer principalement par 3 parties view, controller et model
- #22 Passant maintenant à l’implémentation de projet, dans cette partie nous allons présenter Environnement et choix technologiques et le travail réalisé
- #23 Notre application est realisée
- #24 Voici 3 captures pour montrer les interface mobile créés a travers le capaciteur de l’ionic
- #25 Démonstration Les différentes catégories avant et après l’authentification Fiche produit Remplir formulaire contact Le panier avec passation d’une commande et paiement Client profil et commande Tableau de bord supprimer ajouter modifier
- #27 En perspective, on peut toujours apporter des améliorations pour rendre l’application plus performante.
- #28 Nous tenons finalement à vous remercier tous sans exception pour votre attention.