01 - JS Monorepo : Wild Series, la genèse

Objectifs

• Comprendre et analyser les spécifications techniques et fonctionnelles
• Concevoir un wireframe
• Créer un styleguide

Pré-requis

1. 1

   Valider les quêtes suivantes

   Quêtes liées

   • Quête 1301
   • Quête 504 (hors archive)
2. 2

   Savoir te repérer sur un "scrum board"

   

3. 3

   Identifier les entités et leurs relations sur un MCD

   

Sommaire

Introduction

Cette quête est le point de départ d'un long parcours avec beaucoup d'Express. Ce parcours te guidera dans le développement d'un projet fil rouge : l'application web Wild Series.

Kick-off meeting

Ça y est ! Tu es dev web ! Et aujourd'hui, tu assistes au kick-off du nouveau projet d’application web présenté par le product owner.

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)

↗

Kick-off meeting

manager-go.com

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.

↗

Exemple de spécifications fonctionnelles

Spécifications fonctionnelles issues du cahier des charges de la réalisation du site web de l’hôtel Paradis

docs.google.com

Wild Series, ce qui est attendu

✔️ Création d’une application web responsive et dynamique.

Les principales fonctionnalités

✔️ Pouvoir afficher les séries par catégorie ✔️ Pouvoir afficher la distribution artistique 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 techniques

Les spécifications techniques abordent les aspects techniques de l’application. Elles sont rédigées par des profils techniques (devs, 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).

↗

Exemple de spécifications techniques

Spécifications techniques issues du cahier des charges de la réalisation du site web de l’hôtel Paradis

docs.google.com

La stack technique

• Côté Serveur : Express
• Côté client : React
• Côté style : CSS Modules (tu peux aussi donner une chance à pico.css qui est un bon outil d'apprentissage).

User stories et wireframes

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 fourni directement par le client.

Modélisation de la 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.

Mais le wireframe n'est que la première étape dans le cycle "wireframe > maquette > prototype".

Bien que le wireframe de base soit fourni, tu dois encore :

• 🏗️ Réaliser le wireframe de la page d’accueil (en utilisant Figma par exemple).

  Info

  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.

• Préparer le passage vers la maquette, ce qui te permettra de démarrer ton prototype. Tu dois :

  • 🎨 Choisir les couleurs principales et secondaires de ton application
  • 🖌️ Choisir tes typographies

À ton tour de réfléchir à la conception !

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.

Critères de validation

• Le lien vers le wireframe de la page d’accueil est disponible
• Le styleguide comporte a minima une palette de couleurs et une typographie et est fourni avec le wireframe.