01 - Symfony : Wild Series, la genèse
Objectifs
- ✅ Comprendre et analyser les spécifications techniques et fonctionnelles
- ✅ Concevoir un wireframe
- ✅ Créer un styleguide
Introduction
Cette quête est le point de départ de ton parcours Symfony. Cette expédition sera un projet fil rouge basé sur la création d’une application web : Wild Series.
Mais, comme dans la vraie vie, nouveau projet ne veut pas dire foncer tête baissée dans le code ! 🐑
Tu le sais déjà, tout projet démarre par une phase de conception.
Sommaire
🚀 Kick-off meeting
Ça y est ! tu es développeur web ! Et aujourd’hui tu as été convié au kick-off du nouveau projet d’application web présenté par le product owner.
Si tu ne connais pas CommitStrip jettes-y un œil, ces planches humoristiques sont malheureusement souvent assez proches de la réalité 😂.
Voici le debrief de la présentation du PO :
-
Le client souhaite une application web similaire à Betaseries
-
Les user stories et wireframes seront fournies par le client (sauf le wireframe de la page d’accueil pour lequel il nous laisse carte blanche)
Spécifications fonctionnelles
Les spécifications fonctionnelles décrivent les fonctionnalités de l’application. Elles sont rédigées avant le développement de l’application pour un projet en cycle en V et prendront corps tout au long de son déroulement en gestion de projet agile.
Dans le cadre d’une gestion de projet en cascade ou cycle en V, le périmètre fonctionnel est parfaitement cadré dès le début.
En méthode agile, les développeurs s’appuient plutôt sur un product backlog. Cependant, il arrive que des spécifications fonctionnelles soient fournies. Dans ce cas, elles permettent d’aider au découpage des user stories et de leur répartition en différentes tâches.
Les principales caractéristiques et fonctionnalités sont :
✔️ Création d’une application web responsive et dynamique ✔️ Pouvoir afficher les séries par catégories ✔️ Pouvoir afficher le casting des séries ✔️ Pouvoir ajouter des séries en favori ✔️ Pouvoir administrer tout le contenu du site ✔️ Pouvoir gérer les comptes utilisateurs
Parcours utilisateur (arborescence) :
Spécifications fonctionnelles issues du cahier des charges de la réalisation du site web de l’hôtel Paradis
Spécifications techniques
Les spécifications techniques abordent les aspects techniques de l’application. Elles sont rédigées par des profils techniques (Équipe de développeurs, tech lead, etc.), après avoir pris connaissance des spécifications fonctionnelles de l’application.
Elles comportent généralement les choix technologiques et les raisons de ces choix, les besoins matériels (serveurs, base de données, etc).
Pour Wild Series, ces grands points y sont évoqués :
- Choix technologiques : PHP / Symfony
- Gestion des assets : Symfony Vite
- Library UI : Bootstrap ou un framework front de ton choix (Pico CSS par exemple 🤓).
Spécifications techniques issues du cahier des charges de la réalisation du site web de l’hôtel Paradis
User stories, wireframes et base de données
Voici le scrum board réalisé suite aux users stories. Nous l’utiliserons tout le long de nos quêtes Wild Series. Certaines user stories pourront représenter une quête entière, d’autres pourront être découpées en plusieurs quêtes. De la même façon qu’une user story peut être découpée en plusieurs tâches. Tu le retrouveras mis à jour au début de chaque quête.
Et ci-dessous, le wireframe d'une page interne fourni directement par le client.
Base de données
Tu as de la chance, pour ce qui est de la base de données, tu n’as pas trop à te creuser la tête. L’équipe d’architectes DB de la Wild Code School a pris le temps de te soumettre une ébauche de schéma. Attention, le visuel ci-dessous n’est pas contractuel ! Comme tu le sais déjà, une base de données, c’est vivant ! Ça peut évoluer au cours du temps selon les besoins. Mais cela te permet d’avoir un aperçu de ce dans quoi tu t’embarques :
💪 Challenge
Homepage Wireframe & Style Guide
Pour ce projet, les user stories et le wireframe principal sont déjà réalisés. À ton tour de réfléchir à la conception !
Bien que le wireframe de base soit fourni, il faut encore :
- 🏗️ Réaliser le wireframe de la page d’accueil (en utilisant Figma ou Excalidraw par exemple).
Donne libre cours à ta créativité, sans ajouter sur la page d’accueil des fonctionnalités qui ne sont pas présentes dans les user stories.
Enfin, comme cette application sera finalement unique et la tienne, nous te laissons le choix de la charte graphique ! Crée un styleguide à ton goût ! Pour exemple, voici ce à quoi peut ressembler un StyleGuide.
Bien que cette ressource t'amène vers un dépôt Github te permettant de générer ton propre styleguide nous n'attendons pas de toi que tu le réutilises. Seulement que tu t'en inspires pour présenter les élèvements essentiels de ta charte graphique !
Il te faut alors :
- 🎨 Choisir les couleurs principales et secondaires de ton application
- 🖌️ Choisir tes typographies
Critères de validation
- Le lien vers le wireframe de la page d’accueil est disponible
- Le styleguide comporte à minima une palette de couleurs et une typographie et est fourni avec le wireframe.