BUT SD - Marvel App

Construction de l'application Marvel

Mettre en oeuvre les différents concepts manipulés au cours du développement d'une application web.

BUT SD - Marvel App

Objectifs

Travailler de manière professionnelle

  • Travailler en équipe: agilité, versionning, historique, branches, tags, issues, pull requests...
  • Utiliser les bons outils: IDE, Source Control, linters, formatters...
  • Respecter les bonnes pratiques et normes : qualité, tests, CI/CD...
  • Documenter son travail: README, Documentation...
BUT SD - Marvel App

Concepts manipulés

  • agilité : méthode de développement
  • développement web : html, css, javascript, typescript, react
  • aide au développement: vscode, github copilot, eslint, prettier
  • travail collaboratif: git, github
  • tests unitaires, tests d'intégration: jest, cypress, playwright
  • intégration continue: github actions
  • déploiement continu: github actions
  • documentation: markdown, mkdocs
  • qualimétrie: sonarqube
BUT SD - Marvel App

Initialisation du projet marvel-app

  • Créer un dépôt sur GitHub avec le nom marvel-app. Cocher la case Initialize this repository with a README

    • Le fichier README.md permet de décrire le projet, son objectif, son fonctionnement, les prérequis, les étapes d'installation, de configuration et de lancement. Nous y reviendrons plus tard.
  • Cloner le dépôt sur votre machine locale avec la commande:

    • git clone https://github.com/<votre-login>/marvel-app.git
    • Ne pas utiliser le lecteur réseau Z: pour travailler sur le projet. Utiliser un répertoire local sur votre machine pour éviter les problèmes.
BUT SD - Marvel App

Version 0.1.0 - Objectif

  • Gestion de version - semver
  • Préparation du projet
    • Utilisation de npm pour gérer les dépendances du projet
    • Utilisation de browser-sync pour créer un serveur web local
  • Implémentation d'une page web
    • Contenu statique de la page HTML (HyperText Markup Language)
    • Application du style avec CSS (Cascading Style Sheets)
BUT SD - Marvel App

Version 0.1.0 - Objectif (suite)

Version 0.1.0

Voir les slides de la version 0.1.0

BUT SD - Marvel App

Version 0.2.0 - Objectif

  • Utilisation de git pour travailler sur plusieurs fonctionnalités en même temps
    • Gestion des branches
    • git flow
  • Ajout de contenu JavaScript pour récupérer des données depuis un fichier JSON
  • Ajout de style CSS pour améliorer l'affichage
BUT SD - Marvel App

Version 0.2.0 - Objectif (suite)

Version 0.2.0

Voir les slides de la version 0.2.0

BUT SD - Marvel App

Version 0.3.0 - Objectif

  • Transformation de la page statique en application web dynamique
    • Utilisation de React pour créer des composants réutilisables
  • Détection d'un bug dans la version 0.3.0
    • Création d'une branche de type correctif
BUT SD - Marvel App

Version 0.3.1 - Objectif (suite)

Version 0.3.1

Voir les slides de la version 0.3.0

BUT SD - Marvel App

Version 0.4.0 - Objectif

  • Création de plusieurs pages (Home, About, Contact)
  • Utilisation de react-router pour gérer la navigation entre les pages
  • Mise en oeuvre d'un layout pour les pages (header, footer, etc...)
BUT SD - Marvel App

Version 0.4.0 - Objectif (suite)

Version 0.4.0
BUT SD - Marvel App

Version 1.0.0 - Objectif

  • Création de la page de détail d'un personnage
  • Sécurisation de l'application
    • Création d'un workflow de CI/CD avec GitHub Actions
    • Protection des branches main et develop
  • Création d'une release 1.0.0 et déploiement de l'application
BUT SD - Marvel App

Version 1.0.0 - Objectif (suite)

Version 1.0.0

Add this CSS in your Markdown file to style the two-column layout

Add script to support mermaid

```mermaid gitGraph checkout main commit id:"initial" commit id:"prepare" commit id:"hello-world" commit id:"characters" commit id:"style" tag: "v0.1.0" ```

```mermaid gitGraph checkout main commit tag: "v0.1.0" branch develop checkout develop branch feature-style branch feature-data checkout feature-style commit id: "style" checkout feature-data commit id: "data" commit id: "characters" checkout develop merge feature-style merge feature-data checkout main merge develop commit tag: "v0.2.0" ```

```mermaid gitGraph checkout main commit tag: "v0.2.0" branch develop checkout develop branch feature-react checkout feature-react commit id: "add-react" commit id: "static list" commit id: "dynamic list" commit id: "CharactersList" commit id: "NumbersOfCharacters" checkout develop merge feature-react checkout main merge develop commit tag: "v0.3.0" branch hot-fix commit id: "fix" checkout main merge hot-fix checkout develop merge main ```

```mermaid gitGraph checkout main commit tag: "v0.3.0" branch develop checkout develop branch feature-routers checkout feature-routers commit id: "create-pages" commit id: "use-router" checkout develop merge feature-routers checkout main merge develop commit tag: "V.0.4.0" ```

```mermaid gitGraph checkout main commit tag: "v0.4.0" branch develop checkout develop branch feature-character-detail checkout feature-character-detail commit id:"page" commit id:"workflow" checkout develop merge feature-character-detail branch release-1.0.0 checkout release-1.0.0 commit id:"1.0.0.rc1" commit id:"doc" commit id:"redirects" commit id:"1.0.0.rc2" commit id:"1.0.0" checkout main merge release-1.0.0 commit tag: "v1.0.0" checkout develop merge main ```