Pet Foster TP DWWM

Romain Navarro - Pet Foster

TITRE PROFESSIONNEL DÉVELOPPEUR WEB ET WEB MOBILE

Soutenance

• Game design
• Modélisation 3D

Une lassitude des problématiques marketing

Un poste de webmaster qui s'est étendu au développement.

• MAO
• Motion design

Qui suis-je ?

Attrait depuis toujours pour la création numérique

2024

O Clock - TP DWWM

2017

Consogarage - Webmaster

2011

Bacatà - Webmaster

2003

2006

ETPA - Multimédia

DUT - Communication

L'équipe et le projet

Conclusion

Sommaire

Conception

Développement

Réalisation personnelles

Démonstration et tests

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

Pet Foster propose des pages profil et un système de messagerie, de profil d'accueil et de demande d'adoption.

Principe général

Geolocalisation et cartes interactives

Lead dev. back

Scrum master

ProductOwner

Responsabledoc

Lead dev. front

Matteo Monterosso

Sandrine Bussi

Sonia Ouallouche

Johan Arredondo

Romain Navarro

Lead dev. back

Lead dev. back

Lead dev. back

Lead dev. back

Lead dev. back

L'équipe Pet Foster

Matteo Monterosso

Matteo Monterosso

Matteo Monterosso

Matteo Monterosso

Matteo Monterosso

Merge en équipe le jeudi

Journée type 9h à 18h

Daily meeting à 9h

FIX

Conception

Développement

Développement

• Répartition des tâches avec Trello
• Partage de fichiers par Google Drive

Sprint #3

Sprint #2

Sprint #1

Sprint #0

4 sprints d'une semaine

• Organisation en méthode agile

• Communication via Discord

Organisation

Phase de conception

• Visiteur
• Association
• Famille d'accueil
• Adoptant

User Stories

4 types d'utilisateur

Arborescence

Wireframes & Maquettes

N:N

1 relationmany to many

Cardinalités

11 relations

8 entités

MCD

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

Modules de sécurité

Les outils de travail

Github Eslint / Prettier Docker Axe accessibility linter

Developper experience

Developper experience

BDD et API

Node.js / Express PostgreSQL Sequelize (ORM) Geolib

Back end

Back end

Le client dynamique

SPA React Framework Bulma Cartes Leaflet Geolocalisation navigateur JWT React Routeur Helmet

Front end

Front End

Stack technique

Develop

Main

Gitflow

Phase de développement

Architecture

SQL

Sequelize

Connexion

Modèles

Scripts de création

Création de la base de données

Via Sequelize

Opérations

Accès aux données

Serveur back end

Router

Controllers

Middlewares

Architecture statique

Réalisation du front end

Router

Composants

+ Surcharges CSS

Framework bulma

Thème & responsive

Affichage dynamique de la carte

Soumission en temps réél

Partage global des données

Contextes React

Formulaire contrôlé

Composant Leaflet

Partie dynamique

• POST
• PUT
• PATCH
• DELETE

Menace Cross Site

Transmission dans les headers

CSRF

CSRF Token

Password validator Schémas Joi Sequelize

Argon2

Brute force et surcharge

Limite la fréquence des requêtes

En back

Attaques DDOS

Rate Limiter

Hachage

Injection de code malveillant

Contrôle des inputs

Injection SQL

Fuite de données et authentification

En front

• Authentification
• Données utilisateur

Authentification

JWT token

Sécurité

Réalisations personnelles

Back End

Page de recherche d'animaux

Front end

Composants

Flux de données

Structure responsive

main.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

Partage global des données

composant.tsx

composant.tsx

Contextes et providers

page.tsx

page.tsx

page.tsx

page.tsx

Demo

Extraction des Paramètres de Position et de Périmètre

Envoi de la réponse JSON

Filtrage des Utilisateurs en Fonction de la Distance

Récupération des Utilisateurs et de Leurs Données Associées

userController.getAllUsers

Front end

Controller

Back end

Routeur

Controller

Conversion (Sharp) et stockage

Upload avec multer

Stockage et conversion

Upload d'images

Démonstration et tests

Merci de votre attention,

à vos questions

Points à travailler

Portes ouvertes

Améliorations possibles

Conclusion

Écrans ≥ 1216px :

Écrans ≥ 769px :

Par défaut (mobile-first) :

Exemple d'association

Exemple de modèle

• 1 fichier par table
• 1 Fichier associations.ts
• 1 Fichier index.ts

Modèles Sequelize

• Boutons & inputs
• Système de colonnes :

• Menu responsive
• Modals

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 non filtrée

Réponse filtrée

Middlewares

Appel

Composant

Provider

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

Contexte de gestion des modales (ModalContext.tsx)

Routeur

• Boutons & inputs
• Système de colonnes :

• Menu responsive
• Modals

Bulma.css

Framework responsive

React Router

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.

Contexte des notifications (ToastContext.tsx)

Composant et déclinaisons

Composant et déclinaisons

Appel API lors de la soumission

Formulaires contrôlés

variable Formdata mise à jour onChange

Mise à jour onChange

Appel API (useEffect)

Modules de sécurité

• Argon2i
• Token CSRF
• Express Rate Limit
• CORS
• Dotenv
• email-validator
• password-validator
• Joi

• Selon le profil

• useEffect
• Axios

Filtrage en local

Consommation de l'API

Composant Leaflet

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.

Contexte de géolocalisation (GeolocationContext.tsx)

• AddFosterlingRequestForm.tsx
• AddFosterlingProfileForm.tsx
• ContactUserForm.tsx
• ContactUserMessagerieForm.tsx
• CreateAnimalProfileForm.tsx
• EditAnimalProfileForm.tsx
• EditProfileForm.tsx
• Login.tsx
• UpdateFosterlingProfileForm.tsx
• UploadImageForm.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

• 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

Formulaires

Partials

Pages

Composants

Connexion sécurisée à la base de données

Connexion Sequelize

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

composant.tsx

Mise en place des contextes

main.tsx

page.tsx

page.tsx

page.tsx

app.tsx

Partage des données à travers les composants

Contextes React

ControllerWrapper

Controllers

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.

Contexte d'authentification (AuthContext.tsx)