ECF projet garage aut

Martinaise

Presentation

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

• Liste à puces
• Liste à puces

• Liste à puces
• Liste à puces

2.Back-end

VI)Presentation du site

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

Conclusion

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

1. Front-end

1. Trello
2. Github

1. Objectif du projet
2. Context

V)Fonctionalités du site web

III)Conception

Remerciements

II)Organisation du travail(méthode agile)

IV)La stack technique

I)Introduction

SOMMAIRE

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

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

Objectif du projet

Introduction

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

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

TRELLO

Back

Front

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.

GitHub

CONCEPTION

CONCEPTION

CAHIER DE CHARGES

Cahier de charge

CAHIER DE CHARGE SUITE

CAHIER DE CHARGE. SUITE

CAHIER DE CHARGE FIN

CHARTE GRAPHIQUE

VERDANA

SANS SERIF

POLICE D'ECRITURE

CHARTE GRAPHIQUE

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.

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.

COULEUR

MAQUETTE AVEC FIGMA

Zonning

ZONING ET WIREFRAME WEB

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.

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.

Wireframe

Page côté admin

Page d'inscription

Page d'accueil

MAQUETTE WEB

Lorem ipsum dolor sit

Page connexion

Page contact

Page d'accueil

MAQUETTE MOBILE

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.

LES DIAGRAMMES (UML)

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 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

M D P

M L D

M C D

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.

MLD: modèle phisique de données

• 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.

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

• 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

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

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.

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

M C D

Modèle logique des donées

Tables,Champs, associations, cardinalités.

M L

M L D

Regroupe MCD et MLD

M L D

M D P

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

M L D

Diagramme de classe

M L D

BASES DE DONNEES

Node

React

My sql

STACK TECHNIQUE

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

US6. Permettre de contacter l'atelier

US7. Recueillir les témoignages des clients

US4. Exposer les voitures d'occasion

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

US3. Définir les horaires d’ouverture

US1. Se connecter

US2. Présenter les services

Conclusion

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!