TITRE PROFESSIONNEL DÉVELOPPEUR WEB ET WEB MOBILE
Soutenance
Romain Navarro - Pet Foster
O Clock - TP DWWM
2024
Qui suis-je ?
Consogarage - Webmaster
2017
Attrait depuis toujours pour la création numérique
- Game design
- Modélisation 3D
Bacatà - Webmaster
2011
Un poste de webmaster qui s'est étendu au développement.
ETPA - Multimédia
2006
Une lassitude des problématiques marketing
DUT - Communication
2003
Sommaire
Démonstration et tests
Réalisation personnelles
Développement
Conception
Conclusion
L'équipe et le projet
Pet Foster
Dédiée à trouver un foyer pour chaque animal.L'application met en relation trois types d'utilisateurs :
- Associations de protection animale
- Familles d'accueil
- Adoptants
Principe général
Pet Foster propose des pages profil et un système de messagerie, de profil d'accueil et de demande d'adoption.
Geolocalisation et cartes interactives
L'équipe Pet Foster
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Lead dev. back
Lead dev. back
Lead dev. back
Lead dev. back
Lead dev. back
Romain Navarro
Johan Arredondo
Sonia Ouallouche
Sandrine Bussi
Matteo Monterosso
Lead dev. front
Responsabledoc
ProductOwner
Scrum master
Lead dev. back
Organisation
- Organisation en méthode agile
- Communication via Discord
- Répartition des tâches avec Trello
- Partage de fichiers par Google Drive
4 sprints d'une semaine
Sprint #0
Sprint #1
Sprint #2
Sprint #3
Développement
Développement
Conception
FIX
Daily meeting à 9h
Journée type 9h à 18h
Merge en équipe le jeudi
Phase de conception
User Stories
4 types d'utilisateur
- Visiteur
- Association
- Famille d'accueil
- Adoptant
Arborescence
Wireframes & Maquettes
MCD
8 entités
N:N
11 relations
Cardinalités
1 relationmany to many
Modèle logique de données (MLD)
- Espèce(id, Nom,)
- Utilisateur(id, TypeUtilisateur, Nom, Description, Email, MotDePasse, Pays, CodePostal, Ville, Longitude, Latitude, Téléphone, Adresse, SiteWeb)
- Animal(id, Nom, DateNaissance, Sexe, Race, HistoireCourte, HistoireLongue, Santé, #idEspèce, #idCréateur)
- PhotoAnimal(id, URLPhoto, #idAnimal)
- Accueil(id, #idAnimal, #idUtilisateur, DateDébut, DateFin)
- Message(id, #idExpéditeur, #idDestinataire, Contenu, LuParDestinataire)
- ProfilAccueil(id, Age, Sexe, Quantité, ZoneRecherche, #idUtilisateur, #idEspèce)
- PhotoUtilisateur(id, URLPhoto, #idUtilisateur)
- DemandeAccueil(id, StatutDemande, ContenuDemande, #idAnimal, #idUtilisateur)
Dictionnaire de données
Dictionnaire de données
Stack technique
Developper experience
Front End
Back end
Developper experience
SPA React Framework Bulma Cartes Leaflet Geolocalisation navigateur JWT React Routeur Helmet
Front end
Back end
Node.js / Express PostgreSQL Sequelize (ORM) Geolib
Les outils de travail
Github Eslint / Prettier Docker Axe accessibility linter
Le client dynamique
BDD et API
Modules de sécurité
Gitflow
Develop
Main
Phase de développement
Architecture
Création de la base de données
SQL
Sequelize
Scripts de création
Modèles
Connexion
Accès aux données
Opérations
Via Sequelize
Serveur back end
Middlewares
Controllers
Router
Réalisation du front end
Architecture statique
Composants
Router
Thème & responsive
Framework bulma
+ Surcharges CSS
Partie dynamique
Composant Leaflet
Formulaire contrôlé
Contextes React
Partage global des données
Soumission en temps réél
Affichage dynamique de la carte
Sécurité
En front
Rate Limiter
CSRF Token
JWT token
Injection SQL
Attaques DDOS
CSRF
Authentification
Contrôle des inputs
- Authentification
- Données utilisateur
Transmission dans les headers
Limite la fréquence des requêtes
En back
Injection de code malveillant
Brute force et surcharge
Menace Cross Site
Fuite de données et authentification
Hachage
Password validator Schémas Joi Sequelize
Argon2
Réalisations personnelles
Front end
Page de recherche d'animaux
Structure responsive
Composants
Flux de données
Back End
Contextes et providers
Partage global des données
main.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
Back end
Front end
Controller
userController.getAllUsers
Extraction des Paramètres de Position et de Périmètre
Récupération des Utilisateurs et de Leurs Données Associées
Filtrage des Utilisateurs en Fonction de la Distance
Envoi de la réponse JSON
Demo
Upload d'images
Stockage et conversion
Upload avec multer
Conversion (Sharp) et stockage
Routeur
Controller
Démonstration et tests
Conclusion
Améliorations possibles
Portes ouvertes
Points à travailler
à vos questions
Merci de votre attention,
Par défaut (mobile-first) :
Écrans ≥ 769px :
Écrans ≥ 1216px :
Modèles Sequelize
Exemple de modèle
Exemple d'association
- 1 fichier par table
- 1 Fichier associations.ts
- 1 Fichier index.ts
Bulma.css
Framework responsive
- Boutons & inputs
- Système de colonnes :
Script de création des tables
Exécuté sur le container petfoster-db via un script npm présent dans le fichier package.json
Réponse filtrée
Réponse non filtrée
Middlewares
Provider
Contexte de gestion des modales (ModalContext.tsx)
Responsabilité : Contrôle l'ouverture, la
fermeture et le contenu des fenêtres modales. Fonctionnement :
Gère les modales via openModal et closeModal
pour des affichages dynamiques
Composant
Appel
Routeur
Bulma.css
Framework responsive
- Boutons & inputs
- Système de colonnes :
React Router
Contexte des notifications (ToastContext.tsx)
Responsabilité : Gère les notifications (toasts)pour informer l'utilisateur. Fonctionnement :Utilise react-toastify pour afficher des messages de succès ou d'erreur via le hook useToast.
Composant et déclinaisons
Composant et déclinaisons
Formulaires contrôlés
variable Formdata mise à jour onChange
Appel API lors de la soumission
Appel API (useEffect)
Mise à jour onChange
Modules de sécurité
- Argon2i
- Token CSRF
- Express Rate Limit
- CORS
- Dotenv
- email-validator
- password-validator
- Joi
Composant Leaflet
Consommation de l'API
Filtrage en local
Contexte de géolocalisation (GeolocationContext.tsx)
Responsabilité : Gère les coordonnées GPS de
l'utilisateur. Fonctionnement :
Utilise l'API navigator.geolocation pour récupérer
la latitude et la longitude. Fournit un accès rapide aux coordonnées via le
hook useGeolocation.
Composants
Pages
Partials
Formulaires
- 404.tsx
- Accueil.tsx
- Connexion copy.tsx
- Connexion.tsx
- Contact.tsx
- Information.tsx
- MesAnimaux.tsx
- MesDemandes.tsx
- PolitiqueDeConfidentialite.tsx
- ProfilAnimal.tsx
- ProfilUtilisateur.tsx
- TrouverAnimal.tsx
- AnimalItemList.tsx
- Footer.tsx
- FosterlingProfile.tsx
- GalleryComponent.tsx
- GenderIcon.tsx
- GeolocNotification.tsx
- Header.tsx
- IdToSpecies.tsx
- InterlocuteurItemList.tsx
- LazyImage.tsx
- MapComponent.tsx
- Message.tsx
- Messagerie.tsx
- Miniature.tsx
- Modal.tsx
- ScrollToTop.tsx
- UserImages.tsx
- UserTypeInfo.tsx
- AddFosterlingRequestForm.tsx
- AddFosterlingProfileForm.tsx
- ContactUserForm.tsx
- ContactUserMessagerieForm.tsx
- CreateAnimalProfileForm.tsx
- EditAnimalProfileForm.tsx
- EditProfileForm.tsx
- Login.tsx
- UpdateFosterlingProfileForm.tsx
- UploadImageForm.tsx
Connexion Sequelize
Connexion sécurisée à la base de données
Contextes React
composant.tsx
composant.tsx
composant.tsx
page.tsx
main.tsx
Mise en place des contextes
composant.tsx
composant.tsx
composant.tsx
app.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
Partage des données à travers les composants
Controllers
ControllerWrapper
Contexte d'authentification (AuthContext.tsx)
Responsabilité : Gère l'état de connexion de
l'utilisateur en utilisant des tokens JWT.Fonctionnement :
Vérifie la validité du token au chargement de
l'application via localStorage.
Fournit des fonctions login et logout pour la
gestion de l'authentification.
Pet Foster TP DWWM
Romain NAVARRO
Created on November 29, 2024
Diaporama de présentation Titre professionnel
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Modern Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Explore all templates
Transcript
TITRE PROFESSIONNEL DÉVELOPPEUR WEB ET WEB MOBILE
Soutenance
Romain Navarro - Pet Foster
O Clock - TP DWWM
2024
Qui suis-je ?
Consogarage - Webmaster
2017
Attrait depuis toujours pour la création numérique
Bacatà - Webmaster
2011
Un poste de webmaster qui s'est étendu au développement.
ETPA - Multimédia
2006
Une lassitude des problématiques marketing
DUT - Communication
2003
Sommaire
Démonstration et tests
Réalisation personnelles
Développement
Conception
Conclusion
L'équipe et le projet
Pet Foster
Dédiée à trouver un foyer pour chaque animal.L'application met en relation trois types d'utilisateurs :
Principe général
Pet Foster propose des pages profil et un système de messagerie, de profil d'accueil et de demande d'adoption.
Geolocalisation et cartes interactives
L'équipe Pet Foster
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Matteo Monterosso
Lead dev. back
Lead dev. back
Lead dev. back
Lead dev. back
Lead dev. back
Romain Navarro
Johan Arredondo
Sonia Ouallouche
Sandrine Bussi
Matteo Monterosso
Lead dev. front
Responsabledoc
ProductOwner
Scrum master
Lead dev. back
Organisation
4 sprints d'une semaine
Sprint #0
Sprint #1
Sprint #2
Sprint #3
Développement
Développement
Conception
FIX
Daily meeting à 9h
Journée type 9h à 18h
Merge en équipe le jeudi
Phase de conception
User Stories
4 types d'utilisateur
Arborescence
Wireframes & Maquettes
MCD
8 entités
N:N
11 relations
Cardinalités
1 relationmany to many
Modèle logique de données (MLD)
Dictionnaire de données
Dictionnaire de données
Stack technique
Developper experience
Front End
Back end
Developper experience
SPA React Framework Bulma Cartes Leaflet Geolocalisation navigateur JWT React Routeur Helmet
Front end
Back end
Node.js / Express PostgreSQL Sequelize (ORM) Geolib
Les outils de travail
Github Eslint / Prettier Docker Axe accessibility linter
Le client dynamique
BDD et API
Modules de sécurité
Gitflow
Develop
Main
Phase de développement
Architecture
Création de la base de données
SQL
Sequelize
Scripts de création
Modèles
Connexion
Accès aux données
Opérations
Via Sequelize
Serveur back end
Middlewares
Controllers
Router
Réalisation du front end
Architecture statique
Composants
Router
Thème & responsive
Framework bulma
+ Surcharges CSS
Partie dynamique
Composant Leaflet
Formulaire contrôlé
Contextes React
Partage global des données
Soumission en temps réél
Affichage dynamique de la carte
Sécurité
En front
Rate Limiter
CSRF Token
JWT token
Injection SQL
Attaques DDOS
CSRF
Authentification
Contrôle des inputs
Transmission dans les headers
Limite la fréquence des requêtes
En back
Injection de code malveillant
Brute force et surcharge
Menace Cross Site
Fuite de données et authentification
Hachage
Password validator Schémas Joi Sequelize
Argon2
Réalisations personnelles
Front end
Page de recherche d'animaux
Structure responsive
Composants
Flux de données
Back End
Contextes et providers
Partage global des données
main.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
Back end
Front end
Controller
userController.getAllUsers
Extraction des Paramètres de Position et de Périmètre
Récupération des Utilisateurs et de Leurs Données Associées
Filtrage des Utilisateurs en Fonction de la Distance
Envoi de la réponse JSON
Demo
Upload d'images
Stockage et conversion
Upload avec multer
Conversion (Sharp) et stockage
Routeur
Controller
Démonstration et tests
Conclusion
Améliorations possibles
Portes ouvertes
Points à travailler
à vos questions
Merci de votre attention,
Par défaut (mobile-first) :
Écrans ≥ 769px :
Écrans ≥ 1216px :
Modèles Sequelize
Exemple de modèle
Exemple d'association
Bulma.css
Framework responsive
Script de création des tables
Exécuté sur le container petfoster-db via un script npm présent dans le fichier package.json
Réponse filtrée
Réponse non filtrée
Middlewares
Provider
Contexte de gestion des modales (ModalContext.tsx)
Responsabilité : Contrôle l'ouverture, la fermeture et le contenu des fenêtres modales. Fonctionnement : Gère les modales via openModal et closeModal pour des affichages dynamiques
Composant
Appel
Routeur
Bulma.css
Framework responsive
React Router
Contexte des notifications (ToastContext.tsx)
Responsabilité : Gère les notifications (toasts)pour informer l'utilisateur. Fonctionnement :Utilise react-toastify pour afficher des messages de succès ou d'erreur via le hook useToast.
Composant et déclinaisons
Composant et déclinaisons
Formulaires contrôlés
variable Formdata mise à jour onChange
Appel API lors de la soumission
Appel API (useEffect)
Mise à jour onChange
Modules de sécurité
Composant Leaflet
Consommation de l'API
Filtrage en local
Contexte de géolocalisation (GeolocationContext.tsx)
Responsabilité : Gère les coordonnées GPS de l'utilisateur. Fonctionnement : Utilise l'API navigator.geolocation pour récupérer la latitude et la longitude. Fournit un accès rapide aux coordonnées via le hook useGeolocation.
Composants
Pages
Partials
Formulaires
Connexion Sequelize
Connexion sécurisée à la base de données
Contextes React
composant.tsx
composant.tsx
composant.tsx
page.tsx
main.tsx
Mise en place des contextes
composant.tsx
composant.tsx
composant.tsx
app.tsx
page.tsx
composant.tsx
composant.tsx
composant.tsx
page.tsx
Partage des données à travers les composants
Controllers
ControllerWrapper
Contexte d'authentification (AuthContext.tsx)
Responsabilité : Gère l'état de connexion de l'utilisateur en utilisant des tokens JWT.Fonctionnement : Vérifie la validité du token au chargement de l'application via localStorage. Fournit des fonctions login et logout pour la gestion de l'authentification.