Année scolaire : 2020/2021

Réalisé par :

-EL ACHHAB Fatima Ezzahrae

-CHAHID Fatima-Ezzahra

-BOUAOUDA Zakaria

-El OUHABI Reda

Encadré par : Mme El Kassiri Asmae

Introduction générale………………………………………………………………………..3

I-cadre général

Cadre du projet …………………………………………………………………………………………………4

Présentation du sujet ……………………………………………………………………………………………4

Plan de travail …………………………………………………………………………………………………...4

Conclusion ……………………………………………………………………………………………………….4

II -Analyse et conception :

Introduction……………………………………………………………………………………………………..5

Choix d'UML……………………………………………………………………………………………………5

Diagramme des cas d'utilisation ………………………………………………………………………………5

Descriptif des scénarios ………………………………………………………………………………………...6

Modèle statique des données …………………………………………………………………………………. 9

Diagramme de classe …………………………………………………………………………………………...9

Description des classes …………………………………………………………………………………………10

Diagrammes de séquences …………………………………………………………………………………….11

III : Réalisation

1-Site web :

Environnement technique …………………………………………………………………………………….15

Outils de développement ……………………………………………………………………………………..16

Les principales interfaces graphiques** ……………………………………………………………………...18**

2-Realisation de L'application mobile :

Les outils et technologies utilisées ………………………………………………………………………….35

Aperçu du projet …** …………………………………………………………………………………………36**

IV -Lien des Livrables :

Projet sur GitHub …………………………………………………………………………………………...66

Site Web ……………………………………………………………………………………………………...66

Lien de l'app mobile sous forme APK ……………………………………………………………………...66

V-Conclusion générale …………………………………………………………………...67

Introduction générale

Des ventes de mains en mains, vers des ventes virtuelles, passent les priorités des opérations de ventes des biens et des services, ce qui nous rend obligés de donner plus d'importance à la vente électronique. Les boutiques en ligne sont depuis des années, largement conseillés pour les sociétés qui se basent sur la vente des produits et même des services Les sites de vente en ligne permettent aux clients de profiter d'une foire virtuelle disponible et quotidiennement mise à jour sans la moindre contrainte, ce qui leur permettrai de ne jamais rater les coups de cœur, ainsi une foire sans problèmes de distance géographique, ni d'horaire de travail ni de disponibilité de transport.

I-Cadre général :

1-1Cadre du projet :

Durant le 3éme semestre au sein de l'Ecole Mohammadia d'ingénieurs, nous sommes appelés à réaliser un projet dont le fruit est ce rapport. Notre projet portera sur la conception et la réalisation d'un site web commercial pour la vente et l'achat des produits proposés.

1-2 Présentation du sujet

Le sujet de notre projet consiste à développer un site web en ligne pour présenter, commercialiser et livrer nos produits à nos clients. L'objectif de ce projet est de concevoir et développer un site web commercial qui doit permettre l'inscription des visiteurs pour devenir clients, le suivi des commandes effectuée, la gestion des payements en lignes et le suivi des livraisons.

1-3 plan de travail :

Nous allons organiser notre présent rapport de la manière suivante :

Dans le premier chapitre « Cadre général », nous allons mettre notre projet dans son cadre général.

Dans le deuxième chapitre « Conception » nous abordons la phase de conception. Nous spécifions d'abord la méthode de conception adaptée, après, nous présentons les différents diagrammes de notre site web.

Au niveau du troisième chapitre intitulé « Réalisation », nous allons présenter notre site web, en mentionnant les différents environnements de travail matériels et logiciels utilisés pour entamer le projet, ainsi qu'en citant les principales interfaces réalisées.

Conclusion

Dans ce premier chapitre nous avons mis le sujet dans son cadre général. Nous allons commencer un deuxième chapitre intitulé « Conception » dans lequel nous allons spécifier d'abord la méthode de conception adaptée, après, nous présentons les différents diagrammes de notre site web.

II - Analyse et conception

Cette partie traitera l'architecture fonctionnelle réalisée par les différents diagrammes conceptuels selon le formalisme UML.

Introduction

Dans ce chapitre, on va présenter l'architecture fonctionnelle du système, il s'agit de formaliser les besoins fonctionnels du système à l'aide des diagrammes UML.

Pour bien éclaircir les fonctionnalités du système on a élaboré quelques scénarios formalisés à l'aide de diagramme de séquence. En outre, on présente le modèle statique de données à l'aide du diagramme de classes.

On a choisi un outil de modélisation facile à comprendre par tout le monde : UML, c'est un langage qui permet une modélisation orienté objet, prenant en considération les avantages de la proche orienté objet. Ainsi, UML est aujourd'hui un standard, adopté par les grands constructeurs de logiciel du marché.

L'étude de conception comprendra trois diagrammes UML. Il s'agit de diagrammes de cas d'utilisation, de séquences détaillées et le diagramme de classe.

Le diagramme des cas d'utilisation sert à donner une vision globale du comportement fonctionnel d'un système. Il représente une unité discrète d'interaction entre un utilisateur et un système.

Dans cette approche, il est question dans ce paragraphe de présenter les principaux cas d'utilisation du système.

Figure : Diagramme Cas d'utilisations

Afin d'éclaircir le diagramme ci-dessus, on représente ci-dessous la fiche descriptive qui explique chaque cas d'utilisation à part, avec les scénarios possibles.

_ Descriptif des scénarios _

UC : S'inscrire

Objectif : l'utilisateur crée un compte en tant que client

Acteur : Internaute

Scénarios nominaux :

• Remplir le formulaire

• Vérifier le formulaire

• Choisir un mot de passe

• Préciser le type d'utilisateur

• Enregistrer le compte

Scénarios alternatifs :

• Remplir le formulaire à nouveaux s'il est mal rempli

Exception :

• Annuler l'inscription

• Utilisateur déjà inscrit

UC : se connecter

Objectif : l'utilisateur doit être authentifié en tant que client ou administrateur

Acteurs : client, administrateur

Scénarios nominaux :

• Le système affiche le formulaire d'authentification (pseudo, mot de passe)

• Entrer le nom d'utilisateur et mot de passe

• Le système vérifie les données

• Vérifier le type 'utilisateur connecté

Exception :

• Annuler l'authentification

• Identificateur ou mot de passe incorrect

UC : acheter un produit

Acteur(s) : responsable d'chat

Description : L'achat comme une phase indispensable dans le site, il doit être bien gérer par le responsable d'achat(client)

Préconditions : S'authentifier

Les scénarios nominaux :

• Parcourir le catalogue des produits
• Sélectionner un produit et l'ajouter au panier
• Déterminer la quantité du produit

Les scénarios alternatifs :

• Retourner au catalogue et ajouter autres produits au panier
• Supprimer des produits du panier
• Annuler l'achat
• Modifier la quantité souhaitée

UC : Gérer les ventes

Acteurs : administrateur

Préconditions : authentification

Scénarios nominaux :

-Le système vérifie le type d'utilisateur connecté

• Le système affiche une page d'accueil

-Le vendeur choisit l'option ajouter un produit

-Entrer les informations et les caractéristiques du produit

-Ajouter des photos du produit et sa catégorie

-Préciser le nombre d'articles disponibles

-Valider

-Le système met à jour la liste des produits de vendeur

Scénarios alternatifs :

-Modification d'un produit

-Supprimer un produit

-Ajouter des promotions

Exceptions :

-Fermer la session

UC : consulter catalogue produit

Acteurs : client

Préconditions : Accès à la plateforme

Scénarios nominaux :

• Afficher la liste des produits

• Afficher une description et une photo pour chaque produit

• Afficher des informations du produit

• Sélectionner des catégories

Scénarios alternatifs :

• Quitter la consultation du produit choisie

• Quitter la consultation du catalogue

Exception :

• Pas de produit du catalogue

UC : gérer les réclamations

Objectif : l'utilisateur peut réclamer l'administrateur des problèmes technique au niveau du site web.

Acteurs : Client –administrateur

Préconditions : s'authentifier

Scénarios nominaux :

• Réclamer

*postconditions : le formulaire doit contenir des informations sur l'utilisateur afin d'éviter les fausses réclamations

Après une étude détaillée des fonctionnalités, on a pu aboutir au diagramme de classe ci-dessous.

Figure : Diagramme de classe

Ce paragraphe a pour but de décrire les différentes classes figurant dans le diagramme de classe précédent.

• La classe utilisateur correspond à l'utilisateur de l'application qui peut être soit un administrateur du site ou un client.
• La classe produit correspond aux produits qui sont offert, elle contient les informations nécessaires du produit tel que le prix, la description, la quantité disponible.

Cette classe est lié avec une liaison d'agrégation forte avec la classe catalogue

• Classe catalogue représente la catégorie et le type du produit, en effet chaque produit correspond à un catalogue précis.
• Classe panier correspond au panier crée par un client, il représente l'achat qui sera effectué après un payement. Il contient le produit sélectionné et la quantité souhaitée.

On élabore des diagrammes de séquences simulant pour mieux comprendre les cas d'utilisation, et afin de trouver l'architecture la plus convenable

Le diagramme ci-dessous présente les différentes étapes pour que l'utilisateur s'authentifie.

Le diagramme ci-dessous présente les différentes étapes pour que le client effectue achat tout en se basant sur le panier.

Le diagramme ci-dessous présent les différentes étapes pour gérer les produits du catalogue par l'administrateur, en effet il peut ajouter, modifier ou supprimer des produits.

Le diagramme ci-dessous présent les différentes étapes pour réclamer dans le cas d'un client. Ainsi l'administrateur va parcourir ces réclamations.

Conclusion

Dans ce chapitre, on a représenté les différents diagrammes qui ont servi à modéliser le projet. Cette modélisation sera la base de la phase de réalisation faisant sujet de la partie suivante.

III : Réalisation

1-Site web :

1. Environnement technique

I l s'agit dans cette partie d'identifier les différentes caractéristiques de l'environnement matériel et logiciel qui nous ont servi à l'implémentation de notre site internet

1.1 environnement matérielle :

Les machines utilisées pour réaliser ce projet :

Ordinateurs portable Lenovo qui dispose de la configuration suivante :

– Système d'exploitation : Windows 8;

– Processus Intel(R) Core(TM) i7 CPU;

– 8 Go de RAM;

– 1 To de disque dur

Ordinateur portable HP qui dispose de la configuration suivante :

– Système d'exploitation : Windows 8;

– Processus Intel(R) Core(TM) i5 CPU;

– 6 Go de RAM;

– 750 Go de disque dur

1.2 environnement logiciel

1.2.1 Visual Studio code:

Visual Studio code : est un éditeur de code extensible développé par Microsoft pour Windows, Linux et MacOs.

Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et installer des extensions qui ajoutent des fonctionnalités supplémentaires.

1-2.2 XAMPP :

_ XAMPP _ est un ensemble de logiciels permettant de mettre en place un serveur Web local, un serveur FTP et un serveur de messagerie électronique.Il s'agit d'une distribution de logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne souplesse d'utilisation, réputée pour son installation simple et rapide, et contient la distribution de MySQL en utilisant l'interface de phpMyAdmin,

1.2.3 GITHUB & GIT

GITHUB: est un service web d'hébergement et de gestion de développement de logiciels, utilisant le logiciel de gestion de versions Git.

GitHub propose des comptes professionnels payants, ainsi que des comptes gratuits pour les projets de logiciels libres. Le site assure également un contrôle d'accès et des fonctionnalités destinées à la collaboration comme le suivi des bugs, les demandes de fonctionnalités, la gestion de tâches et un wiki pour chaque projet.

Git est un système de contrôle de version distribué gratuit et open source conçue pour gérer tout, des petits projets aux très grands projets avec rapidité et efficacité.

Lien GitHub :

https://github.com/Projet-Integre-II/OurProject

1. Outils de développement:

2-1 HTML:

Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est le langage de balisage conçu pour représenter les pages web.C'est un langage permettant d'écrire de l'hypertexte, d'où son nom. Il permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il est souvent utilisé conjointement avec des langages de programmation (PHP, JavaScript…) et des formats de présentation (feuilles de style en cascade).

2-2 CSS:

_ Cascading Style Sheets _ c'est un langage informatique qui sert à décrire la présentation des documents HTML et XML.Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

2-3 PHP:

_ PHP: Hypertext Preprocessor _, plus connu sous son sigle PHP, est un langage de programmation principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n'importe quel langage interprété de façon locale. PHP est un langage impératif orienté objet. PHP a permis de créer un grand nombre de sites web célèbres, comme Facebook, Wikipédia, etc. Il est considéré comme la base de la création des sites Internet dits dynamiques.

2-4 Bootstrap :

Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.

2-5 MySQL:

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde3, autant par le grand public (applications web principalement) que par des professionnels.

2-6 JavaScript:

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web. Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur du World Wide Web.

On va l'utiliser principalement pour implémenter la fonctionnalité de "Dark Mode".

1. Les principales interfaces graphiques :

3.1 Espace Admin

Lorsque l'admin se connecte, il a l'accès à une interface composé des utiles

Présenter dans la figure ci-dessous :

Cette interface offre à l'administrateur la possibilité de consulter les statistiques des produits, supprimer ou modifier des champs concernant ce produit en appuyant sur le bouton approprié.

3.1.1 Bouton update

Lorsque l'administrateur clique sur le bouton update il est dirigé vers la page suivant ou il peut modifier le nom du produit, la quantité, le prix ou la catégorie

3.1.2 boutons delete

Lorsque l'admin clique sur le bouton delete le produit va être supprimé

3.1.3 Ajout des produits

L'administrateur est responsable ainsi sur l'ajout des produits, le bouton items dans le navbar vas lui permettre d'effectuer cette tache

La figure ci-dessous montre comment l'ajout s'effectue

3.1.4 gérer les utilisateurs :

L'administrateur peut consulter et gérer la liste des utilisateur inscrit à l'aide du bouton user

La page qui va lui permettre d'effectuer sa gestion est représenter dans la figure ci-dessous

3.1.5 Déclaration :

L'administrateur à le droit de consulter les réclamations des utilisateurs afin de répondre à leur besoin

La figure ci-dessous montre la page correspondante à la gestion des réclamations

3.2 Espace Utilisateur/Visiteur

Cette partie dénombre la présentation des Scénarios applicatifs de l'application. Nous allons présenter dans ce qui suit, les captures d'écran des principales interfaces réalisées dans notre site web.

C'est la page d'accueil qui s'affiche dès l'accès à notre site web, le visiteur peut consulter le catalogue, se connecter s'il est déjà inscrit pour pouvoir effectuer des achats.

Barre Menu : Cette barre est constituée de :

1-Catégories :

Cette page permet d'afficher les différentes catégories des produits de notre site web.

2-S'inscrire :

Cette page permet à tout nouveau client de s'inscrire pour pouvoir, par la suite, effectuer un achat.

Si l'inscription est réussie, un message de confirmation s'affiche.

Si l'utilisateur ne remplit pas tous les champs demandés, un message d'erreur s'affiche :

3-Se connecter :

Cette page permet au visiteur de se connecter s'il possède déjà un compte.

Les causes possibles d'échec de la connexion sont :

• Mot de passe invalide
• Login inexistant

4-A propos :

L'utilisateur peut choisir soit :

-A propos de nous : pour avoir plus d'informations sur les administrateurs du site.

-Conditions généraux d'utilisation : pour savoir les conditions d'utilisation du site.

-Contacter nous : pour envoyer un message à l'administrateur du site

Si la connexion réussie, la page suivante s'affiche au client :

Le client peut consulter les différentes catégories de produits proposées par le site :

• Catégorie Homme :

• Catégorie Femmes :

• Catégorie enfant :

Le client peut cliquer sur un produit pour voir plus d'informations sur lui :

Il peut aussi l'ajouter à son panier en cliquant sur le bouton "ajouter au panier" et afficher le panier en cliquant sur le bouton "afficher panier".

Le client peut consulter son panier aussi en cliquant sur Panier dans la barre Menu :

Interface Panier :

Lorsque le client veut consulter son panier la page suivante s'affiche :

Le client peut à tout moment supprimer un produit du panier en cliquant sur Delete s'il ne souhaite plus l'acheter.

Il peut également retourner au catalogue en cliquant sur le bouton "Retourner au catalogue".

Enfin, s'il est satisfait il peut confirmer son achat en cliquant sur le bouton "Confirmer l'achat".

S'il clique sur le dernier bouton, la page suivante s'affiche :

En effet, notre site web propose 3 méthodes de paiements :

• Paiement par PayPal :

• Paiement par carte bancaire :

En choisissant cette option, le client doit entrer son nom et prénom, son adresse mail et le numéro de sa carte bancaire puis valider son paiement.

• Paiement à la livraison :

En choisissant ce mode de paiement, un message de confirmation s'affiche au client :

Profil client :

Le client peut aussi accéder à son profil pour consulter ses informations et peut également les modifier :

4-Realisation de L'application mobile :

4-1 : Les outils et technologies utilisées :

4-1-1 : Flutter

Flutter est un kit de développement de logiciel (SDK) d'interface utilisateur open-source créé par Google en 2017. Il est utilisé pour développer des applications pour Android, iOS, Linux, Mac, Windows, Google Fuchsia et le web à partir d'une seule base de code.

Pourquoi flutter :

Flutter est plus rapide que de nombreux autres frameworks de développement d'applications. Avec sa fonction de "Hot Reload", vous pouvez expérimenter, créer des interfaces utilisateur, ajouter / supprimer des fonctionnalités, tester et corriger les bogues plus rapidement. Réduisant ainsi le temps de développement global de l'application.

4-1-2 : Dart

Dart est un langage de programmation optimisé pour les applications sur plusieurs plateformes. Il est développé par Google et est utilisé pour créer des applications mobiles, de bureau, de serveur et web.

4-1-3 : VS Code

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS2.

On a utilisé Visual studio code comme environnement de développement car il facilite plusieurs taches, grâce aux plugins qu'on peut l'installer ;

4-2 : Aperçu de l'environnement du projet :

Avec :

Main.dart :

La classe d'accueil, qui réoriente l'application vers la première interface : MyApp().

Main_page.dart:

C'est le fichier qui contient notre classe : MyApp

Qui est la première interface pour l'utilisateur, avant de passer au contenu de notre site web

Et on a un Floating Action Button pour aller vers l'interface de notre site web :

Advices.dart:

Il contient la classe qui implémente notre site web ;

On a pu héberger notre site sur un serveur avec notre base de données

Gratuitement sur 000webhost.com

Notre nom de domaine :

https://e-m-i-shop.000webhostapp.com

Et notre application mobile extrait le contenu de ce site et le visualise.

En utilisant un flutter widget nome WebView();

Avec l'initialisation des dépendances spécifiques pour cette widget.

On a utilisé un Emulateur Android (Pixel 2 API 27)

Pour tester le fonctionnement sur la machine :

Aperçu des pages de notre application mobile multiplateformes (Android , iOS)

Si on passe à notre shop par le Floating Action Button On trouve :

(Toujours avec la possibilité de retour vers la page d'accueil)

Le menu (Nav bar) de l'utilisateur :

Les trois catégories de nos produits :

L'aperçu des produits :

On simule une vente :

Ajouter ce produit au panier, et puis l'afficher :

Confirmer l'achat :

Aperçu des pages avec le mode nuit qui est disponible sur le site web et l'application mobile :

1er scénario : achat avec le CMI PayPal :

Et notre compte PayPal :

2eme scenario : achat via une carte bancaire :

Pour ceci on a utilisé Stripe , comme plateforme qui gère les payements par carte bancaire

Enfaite, Stripe est une société américaine d'origine irlandaise, destinée au paiement par internet pour professionnels2.

Et qui offre une grande flexibilité dans la phase de l'implémentation des APIs.

Avec bien des tests de validité du numéro de la carte :

3eme scenario : Paiement à la livraison :

On passe maintenant à d'autres pages/simulation :

Inscription :

-validité des champs

-vérification de la force des mots de passes

Connection :

Le Footer de toutes les pages :

Le bouton de donation qu'on a dans le menu nous dirige vers une donation par le compte PayPal de notre site web :

La partie CDU, pour conserver nos droits judicaires :

La partie Contacter nous, dont les messages sont envoyés vers l'interface administrateur :

IV

Projet sur GitHub :

Contient : code source (web & Mobile) + les diagrammes + les tables et les base de données :

https://github.com/Projet-Integre-II/OurProject

Site Web :

https://e-m-i-shop.000webhostapp.com

Lien de l'app mobile sous forme APK :

https://github.com/Projet-Integre-II/OurProject/tree/main/Mobile%20App

Au terme de la réalisation de ce rapport de projet qui s'intitule « Développement d'un site web pour l'achat et vente en ligne ». Nous avons, situer le projet dans son cadre général tout en mettant l'accent sur son originalité.

Nous avons ensuite étudié les solutions possibles pour atteindre l'objectif par rapport à la situation existante. En effet, notre application a réussi à automatiser les processus d'achat en ligne et de réduire sa durée réelle.

En fait, la réalisation de ce projet, nous a donné une véritable occasion pour rencontrer les difficultés du travail qu'un informaticien devra affronter lors de la conception et de la réalisation d'un projet. Ce projet nous a demandé beaucoup d'efforts afin de le finaliser.

Finalement, ce projet nous a offert l'opportunité de nous intégrer et de découvrir le travail en groupe et ainsi d'améliorer nos capacités dans le domaine du web. Il nous a aussi permis d'enrichir nos connaissances et notre formation théorique et pratique acquise tout au long de nos années de formation.

| | | 0 | | --- | --- | --- |