ECF projet garage aut

TITRE PROFESSIONEL:DEVELEPPEUR WEB ET WEB MOBILE Présentation d'AutoproSolution : un site de garage sécurisé

Presentation

Martinaise

SOMMAIRE

I)Introduction

II)Organisation du travail(méthode agile)

1. Objectif du projet
2. Context

1. Trello
2. Github

III)Conception

1. Cahier de charge, Charte graphique et police
2. Maquette
3. Les diagrammes

IV)La stack technique

1. HTML
2. CSS
3. JS
4. React
5. node.js

V)Fonctionalités du site web

1. Front-end

• Liste à puces
• Liste à puces

2.Back-end

VI)Presentation du site

• Liste à puces
• Liste à puces

Conclusion

Remerciements

L'ojectif principale de ce projet est de créer une application dynamique web et mobile qui permet aux utilisateurs de :

Introduction

• Voir les services qu'offres le site autoprosolution.
• Contacter l'entreprise.
• Interagir avec autoprosolution

Objectif du projet

M. vincent Parrot, expert en réparation automobile, souhaite créer un site web Autoprosolution offrant des services de réparation , d'entretien automobiles en ligne ainsi que la vente de véhicules d'occasion. L'objectif principal est d'attirer une clientèle connectée et d'assurer une expérience client améliorée, contribuant ainsi à la croissance de l'entreprise.

Contexte

Organisation du travail

Outils utilisés Trello ,Figma, vs code, Github

TRELLO

Un outil de gestion de projet en ligne qui permet d'organiser et de suivre les tâches de manière collaborative et visuelle.

GitHub

GitHub est une plateforme de développement collaboratif qui facilite le stockage, la gestion et la collaboration autour des projets de développement de logiciels en utilisant le système de contrôle de version Git.

Back

Front

CONCEPTION

CONCEPTION

CAHIER DE CHARGES

Cahier de charge

CAHIER DE CHARGE SUITE

CAHIER DE CHARGE. SUITE

CAHIER DE CHARGE FIN

CHARTE GRAPHIQUE

CHARTE GRAPHIQUE

COULEUR

Choisir les bonnes couleurs pour un site web est essentiel pour créer une identité visuelle forte, susciter des émotions positives, garantir la lisibilité et l'accessibilité, ainsi que pour guider efficacement les utilisateurs à travers le contenu du site.

POLICE D'ECRITURE

Les polices sélectionnées doivent garantir une lisibilité optimale à travers différentes tailles et écrans, tout en créant une hiérarchie visuelle claire pour guider les utilisateurs à travers le contenu. En limitant le nombre de polices utilisées.

SANS SERIF

VERDANA

MAQUETTE AVEC FIGMA

ZONING ET WIREFRAME WEB

Wireframe

Les wireframes sont des schémas simples qui mettent en évidence la disposition générale des éléments d'une interface, tels que les zones de contenu, les menus de navigation, les boutons et les champs de formulaire, sans se concentrer sur les détails esthétiques ou les éléments graphiques complexes.

Zonning

Le zonage web divise une page en zones spécifiques pour présenter clairement différents contenus, améliorant ainsi l'expérience utilisateur en facilitant la navigation et la compréhension. Il optimise l'espace et s'adapte à différents appareils, assurant une cohérence visuelle et une accessibilité efficace des informations importantes.

MAQUETTE WEB

Page côté admin

Page d'accueil

Page d'inscription

Lorem ipsum dolor sit

MAQUETTE MOBILE

Page connexion

Page d'accueil

Page contact

LES DIAGRAMMES (UML)

UML(Unified Modeling Language) est un langage de modélisation graphique permet de modéliser les structures de données. de Concevoir l'architecture générale du site. Représenter les interactions utilisateur. Faciliter la communication et la documentation du projet.

DIAGRAMME DE CAS D'UTILISATION CONNEXION ET MODIFIER VOITURE

les diagrammes de cas d'utilisation fournissent une vue globale des interactions entre les utilisateurs et le système, ce qui aide à comprendre les besoins fonctionnels du système et à concevoir des solutions logicielles appropriées.(Système,acteurs,cas utilisation,relation)

DIAGRAMME DE SEQUENCE INSCRIPTION CONNEXION

les diagrammes de cas d'utilisation fournissent une vue globale des interactions entre les utilisateurs et le système, ce qui aide à comprendre les besoins fonctionnels du système et à concevoir des solutions logicielles appropriées.(Système,acteurs,cas utilisation,relation)

La méthode MERISE (Méthode d'Étude et de Réalisation Informatique pour les Systèmes d'Entreprise

M D P

M C D

M L D

MCD :Modèle Conceptuel de Données ou modèle entité assosiation

MLD: modèle phisique de données

MDP: n Modèle Logique des Données

• Le MDP aest la manière dont les données sont stockées dans un SGBD (Système de Gestion de Base de Données).

• lI prend en compte les détails techniques de mise en œuvre tels que les types de données, les index, les contraintes de clés étrangère.

• Le SCD représente graphiquement les relations entre les attributs

• Il respecte la 3NF pour éviter la redondance et les anomalies.

• Chaque attribut dépend uniquement de la clé primaire de son entité.Cela garantit l'intégrité des données et leur efficacité.
• On met les entitées,les attrbuts,les associations,les cartinalités

• Représentation abstraite des données et de leurs relations dans une BDD.

• Définit la structure logique des données, indépendamment du SGBD.

• Étape intermédiaire entre le MCD et le MPD.

• Facilite la conception et le développement de la base de données.

M C D

Modèle Conceptuel de Données ou modèle entité assosiation

MCD Relation SGBD Entité Relation Table Association Relation Table Identifiant Clé primaire Clé primaire Clé étrangère Clé étrangère Attribut, propriété Attribut Champs, colonne Occurence, instance Occurence Occurence, enregistrement

Entité ,attributs, associations, cardinalités.

M L D

M L

Modèle logique des donées

Tables,Champs, associations, cardinalités.

M D P

M L D

Regroupe MCD et MLD

Diagramme de classe

M L D

attributsméthodes - = privé + = public # = protégé ~ =package default ı~ıı~

BASES DE DONNEES

M L D

STACK TECHNIQUE

My sql

React

Node

FONCTIONALITÉS DU SITE WEB

FRONT TOKEN

FRONT AUTHENTIFIVATION

Formulaire creationn ou de mise a jour d'un service

BACK

Titre 2Page création service représente la vue de la création de service

BACK

US1. Se connecter

Conclusion

US2. Présenter les services

US3. Définir les horaires d’ouverture

US4. Exposer les voitures d'occasion

US5. Filtrer la liste des véhicules d’occasion

US6. Permettre de contacter l'atelier

US7. Recueillir les témoignages des clients

Got an idea?

Use this space to add awesome interactivity. Include text, images, videos, tables, PDFs... even interactive questions! Premium tip: Get information on how your audience interacts with your creation:

• Visit the Analytics settings;
• Activate user tracking;
• Let the communication flow!

Got an idea?

Use this space to add awesome interactivity. Include text, images, videos, tables, PDFs... even interactive questions! Premium tip: Get information on how your audience interacts with your creation:

• Visit the Analytics settings;
• Activate user tracking;
• Let the communication flow!