📅 SAISON C Semaine 1 Épisode 1 - Conception et Gestion de Projet

📚 Notions du jour

Aujourd’hui, nous attaquons la dernière saison de la formation : Expert JavaScript ! 🎉 Cette saison promet d’être intense et passionnante, car nous allons plonger encore plus profondément dans les notions avancées de la programmation, la gestion de projet, l’architecture logicielle, les tests, et la sécurité.

La première semaine est dédiée à l’analyse et la conception de projet, une étape cruciale pour tout développeur. Aujourd’hui, nous avons abordé deux thèmes principaux : la gestion de projet et la modélisation UML.

Gestion de projet :
- Recueil du besoin
- Clarifications et échanges
- Récits utilisateurs (user stories)
Modélisation UML :
- PlantUML et extension VSCode
- Différents types de diagramme
- Réalisation : diagramme « cas d’utilisation »

📋 Gestion de Projet : Les Fondamentaux

La gestion de projet est une compétence essentielle pour tout développeur. Elle permet de structurer le travail, de clarifier les attentes et de livrer un produit qui répond aux besoins des utilisateurs.

1️⃣ Recueil du Besoin

Le recueil du besoin est la première étape d’un projet. Il s’agit de comprendre les attentes du client ou des utilisateurs finaux. Pour cela, plusieurs méthodes peuvent être utilisées :

Entretiens : Discuter directement avec les parties prenantes pour recueillir leurs besoins.
Questionnaires : Envoyer des formulaires pour obtenir des retours structurés.
Observation : Analyser les processus existants pour identifier les points d’amélioration.

Au début du cours, l'enseignant nous a partagé une vidéo fictive d'un client qui nous présente son besoin. Il s'agissait d'un chef d'établisement qui nous demandait de développer une application de Quiz afin que les élèves puissent s'y connecter et réaliser des quiz.

2️⃣ Clarifications et Échanges

Une fois les besoins recueillis, il est crucial de clarifier et valider ces informations avec le client. Cela permet d’éviter les malentendus et de s’assurer que tout le monde est sur la même longueur d’onde.

Dans l'exemple du chef d'établissement, il fallait clarifier beaucoup de choses car il avait beaucoup d'idées mal ordonnées.
Il fallait donc recadrer les choses.

Bonnes pratiques :

Reformuler les besoins pour vérifier la compréhension.
Documenter les échanges pour avoir une trace écrite.
Prioriser les fonctionnalités en fonction de leur importance.

3️⃣ Récits Utilisateurs (User Stories)

Les user stories sont des descriptions courtes et simples des fonctionnalités d’un projet, du point de vue de l’utilisateur. Elles suivent généralement le format suivant :

En tant que [rôle], je veux [fonctionnalité] afin de [bénéfice].

Exemples de user stories :

# User Story 1
En tant que membre, je veux pouvoir lancer un quiz.

# User Story 2
En tant qu’auteur, je veux pouvoir ajouter de nouveaux quiz.

# User Story 3
En tant qu'administrateur, je veux pouvoir gérer les thèmes des quiz afin de limiter la création par les auteurs.

Avantages des user stories :

Clarté : Elles sont faciles à comprendre pour tous les membres de l’équipe.
Flexibilité : Elles permettent d’ajuster les priorités en fonction des retours.
Collaboration : Elles favorisent la communication entre les développeurs, les designers et les clients.

📊 Modélisation UML : Comprendre et Appliquer

La modélisation UML (Unified Modeling Language) est un outil puissant pour visualiser et concevoir des systèmes logiciels. Elle permet de représenter graphiquement les différentes composantes d’un projet et leurs interactions.

1️⃣ PlantUML et Extension VSCode

PlantUML est un outil qui permet de créer des diagrammes UML à partir de code texte. C’est une solution pratique et efficace pour intégrer la modélisation dans un workflow de développement. C'est l'outil que nous a conseillé l'enseignant d'utiliser.

Extension VSCode recommandée :

PlantUML : Cette extension permet de prévisualiser et générer des diagrammes directement dans VSCode.

2️⃣ Différents Types de Diagrammes

UML propose plusieurs types de diagrammes, chacun ayant un objectif spécifique. Voici les plus courants :

Type de Diagramme	Utilité
Diagramme de cas d’utilisation	Décrit les interactions entre les utilisateurs et le système.
Diagramme de classes	Représente la structure des classes et leurs relations.
Diagramme de séquence	Montre les interactions entre les objets dans un ordre chronologique.
Diagramme d’activité	Illustre les flux de travail et les processus métiers.
Diagramme d’états	Décrit les différents états d’un objet et les transitions entre eux.

3️⃣ Réalisation : Diagramme « Cas d’Utilisation »

Le diagramme de cas d’utilisation est l’un des plus utilisés en gestion de projet. Il permet de visualiser les fonctionnalités principales d’un système et les acteurs qui interagissent avec lui.

Exemple de diagramme de cas d’utilisation pour une application de gestion de bibliothèque :

Plant UML Diagram

@startuml

left to right direction

actor "Utilisateur" as User
actor "Bibliothécaire" as Librarian



rectangle "Système gestion bibliothèque" {
  User --> (Rechercher un livre)
  User --> (Emprunter un livre)
  User --> (Retourner un livre)

  Librarian --> (Ajouter un livre)
  Librarian --> (Supprimer un livre)
  Librarian --> (Gérer les utilisateurs)
}

User <|-- Librarian

@enduml

Rendu visuel du diagramme :

exemple diagramme de cas d'utilisation UML

Explications du diagramme :

Acteurs : Utilisateur et Bibliothécaire sont les acteurs qui interagissent avec le système.
Cas d’utilisation : Les ellipses représentent les fonctionnalités du système (ex: Rechercher un livre, Emprunter un livre).
Relations : Les flèches montrent qui utilise quelle fonctionnalité.
Enxtension d'un cas d'utilisation : Les flèches entre les acteurs montrent qu'un acteur étend ses fonctions (exp: User <|-- Librarian le Bibliothécaire possède les fonctions de l'Utilisateur et d'autres fonctions).

Comment générer le diagramme avec PlantUML ?

Installer PlantUML et l’extension VSCode.
Créer un fichier avec l’extension .puml.
Coller le code PlantUML ci-dessus.
Prévisualiser le diagramme avec l’extension.

💡 Ce Que J’ai Appris Aujourd’hui

Gestion de projet :
L’importance du recueil du besoin pour comprendre les attentes du client.
Comment clarifier et documenter les échanges pour éviter les malentendus.
L’utilisation des user stories pour décrire les fonctionnalités de manière simple et collaborative.
Modélisation UML :
Les différents types de diagrammes UML et leurs utilités.
Comment utiliser PlantUML pour créer des diagrammes directement depuis VSCode.
La réalisation d’un diagramme de cas d’utilisation pour visualiser les interactions entre les acteurs et le système.

⌨️ Challenge du jour : "O'vitrine" – Conception d'un Site Vitrine

📋 Présentation du Challenge

Le challenge du jour nous a permis de mettre en pratique ce que nous avons vu dans la journée. Nous avons travaillé sur la conception d'un projet pour un client fictif. L’objectif était de concevoir un site vitrine pour exposer leurs projets digitaux et faciliter la prise de contact avec les clients potentiels.

Contexte :

Le client souhaite un site vitrine pour présenter ses projets publics et charitables.
Les projets doivent être affichés sous forme de cartes avec les technologies utilisées.
Un formulaire de contact doit être disponible pour les visiteurs.
Un espace administrateur est nécessaire pour gérer les projets.

🎯 Objectifs du Challenge

Préparer des questions pour éclaircir les zones d’ombre avec le client.
Apporter une expertise en matière de conception, d’architecture et de réalisation technique.
Prévoir des récits utilisateurs (user stories) pour décrire les fonctionnalités.
Concevoir un diagramme de cas d’utilisation UML pour préciser les différents cas d’usage.

📌 Étapes Réalisées

1️⃣ Questions Complémentaires au Client

Pour mieux comprendre les attentes du client, j’ai préparé une liste de questions complémentaires :

Les différents acteurs :

À partir des notes récupérées je dégage 2 acteurs qui utiliseront le site vitrine :

Visiteur
Administrateur

Questions qui découlent de l'analyse des notes :

Qu'entendez-vous par un "logo customisable" ?
Souhaitez-vous une fonctionnalité de recherche/filtrage des projets par technologie, date, ou autre critère ?
Les projets doivent-ils être classés par ordre chronologique (du plus récent au plus ancien) ou par ordre alphabétique ?
Voulez-vous une fonctionnalité de "projet mis en avant" ou "projet à la une" ?
Les administrateurs doivent-ils pouvoir gérer les technologies disponibles (ajout/suppression/modification) ?
Souhaitez-vous une politique de conservation des données pour les messages de contact ?
Le site doit-il être disponible en plusieurs langues ? Si oui, quelles langues souhaitez-vous supporter ?
Lorsque l'on clique sur un projet :
Ouverture d'une nouvelle page avec les détails du projet ?
Apparation d'une modale avec les détails du projet ?
Les pastilles représentant les technologies utilisées dans un projet :
Couleur représentative d'une techno avec une légende pour dire quelle couleur correspond à quelle techno ?
Logo de chaque techno utilisée ?
Formulaire de contact : voulez-vous mettre en place une case à cocher pour que le visiteur s'inscrive à une newletter ?

2️⃣ Expertise en terme de conception à apporter au client

Le client souhaite utiliser des technologies raw HTML/CSS/JS (sans frameworks) pour le développement du projet. Cela suggère qu'il n'a pas de réelle vision en terme de coneption et d'architecture concernatn les technologies à utiliser pour le développement de son projet.
Il ne fait aucune disctinction entre le front-end et le back-end. Pourant il va falloir à minima prévoir un back-end avec une BDD afin de gérer le CRUD des projets qui seront affichés sur le site vitrine.

Proposition technique :

Mise en place d'une API avec Express.js qui communique avec une BDD PostgreSQL.
Pour le front-end on pourra effectivement rester simple avec HTML/CSS/JS.
Nous aurons donc une architecture API + SPA (Single Page Application).

3️⃣ Récits Utilisateurs (User Stories)

Voici une liste de user stories pour décrire les fonctionnalités du site :

User Stories :

Usecase ID	En tant que	Je souhaite/je veux	Afin de (facultatif)
UC01	Visiteur	accéder à la page d'accueil	consulter la liste des cartes différents projets
UC02	Visiteur	cliquer sur la carte d'un projet	voir les détails d'un projet
UC03	Visiteur	remplir un formulaire de contact	demander des informations
UC04	Visiteur	accéder aux mentions légales
UC05	Visiteur	pouvoir demander la suppression de mes données personnelles
UC06	Visiteur	rechercher un projet par mot-clé	trouver rapidement un projet spécifique
UC07	Administrateur	accéder à la page de connexion de la page d'administration	accéder à la page d'administration
UC08	Administrateur	accéder à la page d'administration	afin de pouvoir gérer les projets
UC09	Administrateur	ajouter une carte projet
UC10	Administrateur	modifier une carte projet
UC11	Administrateur	supprimer une carte projet
UC12	Administrateur	consulter les emails des visiteurs	contacter un visiteur
UC13	Administrateur	supprimer un email visiteur	supprimer les données personnelles d'un visiteur qui en fait la demande
UC14	Administrateur	gérer la liste des technologies disponibles	maintenir à jour les technologies utilisées par l'entreprise
UC15	Administrateur	consulter les statistiques de visite	analyser l'audience du site vitrine
UC16	Administrateur	recevoir des notifications pour les nouveaux messages	répondre rapidement aux demandes des visiteurs

4️⃣ Diagramme de Cas d’Utilisation UML

Enfin, j’ai conçu un diagramme de cas d’utilisation UML pour visualiser les interactions entre les acteurs et le système avec l'extension VS Code plantUML.

Voici ma proposition :

ovitrine-usecases.puml

@startuml Ovitrine
left to right direction

actor Visiteur as v
actor Administrateur as a

package "Site vitrine" {
  usecase "accéder à la page d'accueil" as UC1
  usecase "cliquer sur la carte d'un projet" as UC2
  usecase "remplir un formulaire de contact" as UC3
  usecase "accéder aux mentions légales" as UC4
  usecase "pouvoir demander la suppression de mes données personnelles" as UC5
  usecase "rechercher un projet par mot-clé" as UC6
}

usecase "accéder à la page de connexion de la page d'administration" as UC7
usecase "accéder à la page d'administration" as UC8

package "Page d'administration" {
  usecase "ajouter une carte projet" as UC9
  usecase "modifier une carte projet" as UC10
  usecase "supprimer une carte projet" as UC11
  usecase "consulter les emails des visiteurs" as UC12
  usecase "supprimer un email visiteur" as UC13
  usecase "gérer la liste des technologies disponibles" as UC14
  usecase "consulter les statistiques de visite" as UC15
  usecase "recevoir des notifications pour les nouveaux messages" as UC16
}

v --> UC1
v --> UC2
v --> UC3 
UC3 .> UC16 : <<extends>>
v --> UC4
v --> UC5 
UC5 .> UC16 : <<extends>>
v --> UC6

a --> UC7
UC7 .> UC8 : <<includes>>
UC8 .> (Page d'administration) : <<extends>>
a --> UC9
a --> UC10
a --> UC11
a --> UC12
a --> UC13
a --> UC14
a --> UC15
a --> UC16

@enduml

Explications du diagramme :

Acteurs : Visiteur et Administrateur sont les acteurs qui interagissent avec le système.
Cas d’utilisation : Les ellipses représentent les fonctionnalités du système (ex: accéder à la page d'accueil, remplir un formulaire de contact).
Relations : Les flèches montrent qui utilise quelle fonctionnalité.

🖥️ Rendu Final du Diagramme

Diagramme de cas d'utilisation pour O'vitrine

💡 Ce Que J’ai Appris avec ce Challenge

Analyse des besoins : Comment poser les bonnes questions pour clarifier les attentes du client.
Architecture technique : Réflexion sur l’architecture back-end et front-end pour répondre aux besoins du client.
User Stories : Rédaction de récits utilisateurs pour décrire les fonctionnalités du projet.
Conception UML : Utilisation de PlantUML pour créer des diagrammes de cas d’utilisation.