Compétence 01 / 06 — BUT Informatique

Réaliser un
développement d'application

Concevoir, coder, tester et intégrer une solution informatique pour un client. Composantes essentielles : communiquer avec les acteurs, respecter les besoins, appliquer les principes algorithmiques, assurer la qualité du code, respecter la législation.

Voir les preuves
2026
Vue d'ensemble

3 projets,
3 contextes
de développement.

Cette compétence est illustrée par trois projets complémentaires : une plateforme web full-stack (MyPulse), l'audit et l'amélioration d'une application héritée (SAE S4), et une scène 3D temps réel (WebGL). Ensemble, ils couvrent le cycle complet — de la conception à l'intégration, en passant par la sécurité et les tests.

MyPulse — SAE S3 Application de vote — SAE S4 WebGL Tableau Médiéval
Preuves d'acquisition
Preuve 01 / 03 — SAE S3, Janvier 2026

MyPulse — Plateforme de vote musical

Développement full-stack en binôme (HOJA & SCHMITT) d'une plateforme communautaire de vote musical : architecture MVC PHP, gestion de rôles, vote asynchrone AJAX et conformité RGPD.

PHP 8.3 MySQL Bootstrap AJAX Git

Contexte et ressources mobilisées

SAE S3 — créer une plateforme permettant de soumettre et voter pour des contenus musicaux (musiques, artistes, groupes). Stack : PHP 8.3 MVC, MySQL/PDO, Bootstrap, AJAX, Apache/Wampserver, Git/GitHub, Trello.

Activités et implication

  • Conception et implémentation du système d'authentification multi-rôles (Invité / Basique / Certifié / Admin)
  • Workflow complet des contenus : soumission → validation admin → classement → archivage
  • Vote asynchrone AJAX avec contrainte d'unicité (une voix par utilisateur par catégorie)
  • Tableau de bord admin pour la modération et la gestion des membres certifiés
  • Système de gestion des consentements cookies (RGPD)

Apprentissages clés

  • Maîtrise de l'architecture MVC PHP artisanale et de la séparation des responsabilités
  • Gestion d'états complexes (5 statuts de contenu, 4 rôles) modélisés directement en base
  • Première implémentation AJAX en production : callbacks, mise à jour partielle du DOM, gestion d'erreurs réseau
  • Application concrète du RGPD : minimisation des données, consentements, durées de rétention

Traces sélectionnées

Rapport final (24 pages)

Architecture MVC, roadmap MVP1/MVP2, modèle de données et choix techniques justifiés — livrable cosigné HOJA & SCHMITT.

Interface MyPulse — découverte des artistes et musiques Interface de découverte

Page de navigation : recherche d'artistes, musiques et groupes avec affichage en cartes et filtres par onglets.

Rapport final (PDF) Dossier descriptif (PDF) Retour en haut
Preuve 02 / 03 — SAE S4

Application de vote — Audit et amélioration

Reprise d'une application PHP héritée : implémentation complète de la sécurité, optimisations de performance mesurées et containerisation Docker. Score Mozilla Observatory F → A.

PHP 8.0 MariaDB Docker Tailwind PDO

Contexte et ressources mobilisées

SAE S4 — hériter d'une application de vote et la rendre conforme à une grille de 29 critères (sécurité, performance, infrastructure, robustesse). Référentiels : OWASP Top 10, Mozilla Observatory, Google Lighthouse.

Activités et implication

  • Sécurité (12/12) : headers CSP, tokens CSRF, rate-limiting (5 tentatives/5 min), reCAPTCHA v2, session httponly + SameSite
  • Performance (8/8) : cache applicatif TTL, requête N+1 par JOIN, index SQL, pagination server-side, minification
  • Infrastructure (4/4) : containerisation Docker Compose (app PHP + MariaDB), génération de tokens sécurisée
  • Robustesse (5/5) : gestion centralisée des erreurs, valeurs par défaut sûres

Apprentissages clés

  • Capacité à lire, comprendre et améliorer une base de code inconnue de façon méthodique
  • Mesure objective de la qualité : LCP −33%, CLS −100%, score Observatory F → A
  • Défense en profondeur : chaque couche (HTTP, applicatif, session) apporte sa protection propre

Traces sélectionnées

Rapport SAE S4

Les 29 modifications documentées avec justification technique et métriques avant/après pour chaque point.

Score Lighthouse 99/100 — MMA Fighter Election Score Lighthouse 99/100

Résultats après optimisation : Performance 99, FCP 0.7s, LCP 0.8s, CLS 0 — tous les indicateurs dans le vert.

Rapport SAE S4 (PDF) Retour en haut
Preuve 03 / 03 — R4-13, 2025-2026

WebGL — Tableau Médiéval

Scène 3D temps réel avec Three.js reproduisant une nature morte médiévale : géométries procédurales, textures canvas, effets de post-processing et panneau de contrôle interactif. Contrainte : projet entier limité à 2 Mo.

Three.js WebGL HTML5 Canvas lil-gui OBJ Loader

Contexte et ressources mobilisées

Module R4-13 (supervisé par M.Villard) — concevoir une scène 3D médiévale validant une checklist de 20+ critères (géométries, textures, éclairage, effets) avec un poids total inférieur à 2 Mo. Documentation Three.js, techniques de texture mapping avancées, HTML5 Canvas API.

Activités et implication

  • Géométries : LatheGeometry (verre), ExtrudeGeometry (épée), Box/Plane/Sphere, import OBJ (casque médiéval)
  • Textures procédurales HTML5 Canvas : pierre, bois, parchemin, acier, flamme, skybox — aucune image externe
  • Effets : brouillard exponentiel, miroir physique (Reflector), tone mapping ACES Filmic, vignetage, particules, filtre Kuwahara
  • Interaction : caméra orbitale (OrbitControls), panneau lil-gui pour régler lumières et effets en temps réel

Apprentissages clés

  • Pipeline 3D temps réel : render loop, gestion GPU, optimisation pour maintenir un framerate stable
  • Génération procédurale : textures entièrement créées par code pour respecter la limite de 2 Mo
  • Post-processing : chaîne de passes (EffectComposer) sans impacter la scène 3D principale

Traces sélectionnées

Scène 3D WebGL Tableau Médiéval Scène 3D rendue

Table médiévale, casque OBJ, verre à vin, bougie avec flamme en particules, miroir physique et brouillard exponentiel.

Comparaison reconstitution 3D et tableau de référence Reconstitution vs. tableau de référence

Comparaison côte à côte : scène 3D WebGL (gauche) et peinture originale de référence (droite) — fidélité de la reconstitution médiévale.

Ouvrir le projet WebGL Retour en haut
← Toutes les compétences C1 / 06 C2 — Optimiser →