TITRE PROFESSIONNEL DÉVELOPPEUR WEB ET WEB MOBILE
Soutenance
Bernard ARROUES – Tout’O’Poils
Paris - 31/03/2023
Qui suis-je?
Parcours Pourquoi ?
- effacé - Intérêt depuis tout jeune pour les
Ø 2015 – 2017 nouvelles technologies
- effacé - La programmation en hobby
Ø 2017 – 2020
- O’clock - Lassitude + covid = changement de voie
Ø décembre 2022 – février 2023
Ø Spécialisation back-end
SOMMAIRE
I. ÉQUIPE ET II. CONCEPTION III. DÉVELOPPEMENT IV. RÉALISATIONS
PRÉSENTATION DU PERSONNELLES
PROJET
V. DÉMONSTRATION VI. EXEMPLE DE VII. CONCLUSION
DU PROJET RECHERCHE
Notre équipe
AP LG MB DF
Angélique Luis Mathilde Denise
Product owner Dev front Dev front Dev back
Scrum master
Dev back
BA
Git master
Dev back
Tout’O’Poils - Genèse
CONSTAT
les antennes locales de la SPA manque d’outils de suivi efficace des
animaux.
AUDIENCE
🐾 Antennes locales de la SPA
🐾 Bénévoles
🐾 Employés
🐾 Refuges animaliers
Organisation du travail
- 4 sprints, du jeudi au jeudi
- Utilisation de Trello, communication via Discord
- Daily meeting à 9 heure
- Journée type de 9h à 18h, possibilité de travailler seul hors horaires
Sprint 0 Sprint 1 Sprint 2 Sprint 3
CONCEPTION DÉVELOPPEMENT DÉVELOPPEMENT FIX
- User stories - Fix des bugs restants
- Wireframe - Ajout de petites
- Réflexions sur le MVP fonctionnalités
- Etc…
Merge sur la branche main et déploiement le jeudi midi
CONCEPTION
User stories
- 3 types d’utilisateurs
- Visiteur
- Bénévole
- Administrateur (= employé de la
SPA)
- En vert: MVP
- En jaune: versions futures
Extrait des user stories
Arborescence
Wireframes
Extrait des wireframes
Maquettes
Mobile (rogné) Desktop
MCD
MCD
MCD
MLD
user (id, email, password, name, firstname, phone_number, url_image, admin, experience)
box (id, type, number, nb_of_places)
animal (id, species, name, url_image, age, bio, gender, size,volunteer_experience,#box_id)
walk (id, date, end_date, comment, feeling, #user_id, #animal_id)
tag (id, name)
animal_has_tag (#animal_id, #tag_id )
visit (id, date, end_date, comment, feeling, #user_id, #box_id)
MLD
user (id, email, password, name, firstname, phone_number, url_image, admin, experience)
box (id, type, number, nb_of_places)
animal (id, species, name, url_image, age, bio, gender, size,volunteer_experience,#box_id)
walk (id, date, end_date, comment, feeling, #user_id, #animal_id)
tag (id, name)
animal_has_tag (#animal_id, #tag_id )
visit (id, date, end_date, comment, feeling, #user_id, #box_id)
DICTIONNAIRE DES DONNEES
Extrait du dictionnaire des données
Stack technique
FRONT BACK DEVELOPER EXPERIENCE
- React - Express - Github
- Boostrap - Prisma - Eslint
- Sass - PostgreSQL - Prettier
- Redux - Envoi de mail:
- Nodemailer
- SendInBlue (fournisseur SMTP)
- Handlebars (templates)
- Upload d’images:
- Multer
- AWS S3
- SDK S3
Gitflow
Branche de feature: contient les features sur lesquelles les membres de l’équipe travaillent
Branche staging: merge des branches de feature, réalisation d’essais
Branche main: merge de la branche staging, version de l’application en production
Le merge ne se fait que par le biais d’une Pull Request, et revue de code par le Git Master
DÉVELOPPEMENT
Architecture
Back end – API Rest
Front end Controller Prisma
PostgreSQL
Création de la base de données
Extrait du fichier schema.prisma
Extrait d’un fichier migration.sql
A chaque modification du schema: prisma migrate dev et prisma generate
Accès aux données
- Pas de nécessité de créer des models
- Permet de réaliser des opérations CRUD
Réalisation du back-end
ROUTER MIDDLEWARES CONTROLLERS
Exemple: POST https://api.toutopoils.fr/animals
Extrait du fichier /routes/animals.route.js
Extrait du fichier /src/controllers/animals.controller.js
Réalisation du front-end
partie « statique »
Application découpée en pages et composants
Router avec React-router
Structure du projet Extrait de composant
Réalisation du front-end
Style
Extrait de la page Dashboard
Extrait du fichier /styles/_vars.scss
Front
partie « dynamique »
- Gestion du state
- Redux
- Redux Toolkit
- Requêtes
- Axios
- React Query
- Gestion des formulaires
- React hook forms
- Yup (validation)
Exemple de requête
Sécurité
FAIT A FAIRE
- Validation des données - Rate limiting au niveau de l’API
- Yup (front) & Joi (back)
- Meilleure configuration du CORS
- Mot de passe hashés
- Utilisation d’un captcha en front
- XSS: React sécurisé « par défaut »
- Prisma: éviter les injections SQL
RÉALISATIONS PERSONNELLES
Front
Mise en place des requêtes vers le back
- base: instance axios
- Requêtes groupées dans des objets
- Utilisation de React Query
Amélioration possible
- Utiliser React Query de façon plus efficace
Back
Controller de récupération du JWT
- Mot de passe hashés avec bcrypt
- Comparaison du mot de passe
- Génération d’un JWT
- Séparation des méthodes dans un service
dédié
Amélioration possible:
- En cas d’erreur, une seule et unique erreur,
par exemple « INVALID_CREDENTIALS »
DÉMO DU PROJET
EXEMPLE DE RECHERCHE
Présentation d’une recherche
- Recherche en anglais, avec des mots
simples
- Sélection des sources:
- Classement « personnel »
- Vérification de la date de création
ou de mise à jour
Présentation d’une recherche
Classement personnel:
1. Documentation
2. Un acteur ou un groupe
d’acteurs connus
- ex: OWASP
3. Sites ayant attrait à la
programmation
- ex: blox LogRocket
4. Stackoverflow
- questions théoriques
- éviter le code
Présentation d’une recherche
Dans cet exemple
- Doc de Prisma
- Pourquoi utiliser Prisma
- Point de vigilance: sujet à
discussion
Présentation d’une recherche
Conclusion
- Satisfaction du travail accompli
- Bonne équipe
- Appréciation du travail en équipe
- Réflexions sur la poursuite du projet
A vos questions !
