SOUTENANCE DE STAGE — BUT INFORMATIQUE 2E ANNEE DACS

Conception, cadrage et lancement d'une plateforme d'apprentissage gamifiee

avec monde 3D immersif et assistant IA

SITDL — Serious IT Development Learning

David ENOKIANBUT Informatique 2e annee, parcours DACS

IUT Montpellier-SeteHolding Toutim

Tuteur : Samir FOUNOU29 avril — 24 juin 2026

PLAN DE LA PRESENTATION

Sommaire

1. Introduction→ 2. Contexte→ 3. Analyse→ 4. Cadrage & Specs→ 5. Rapport technique→ 6. Organisation→ 7. Conclusion

BLOC 1-2

Introduction & Contexte

Constat, entreprise, ecosysteme

BLOC 3

Analyse

Probleme, solution, personas

BLOC 4-5

Cadrage & Technique

SDD, artefacts, POC, code

BLOC 6-7

Orga & Conclusion

Methodes, bilan, perspectives

INTRODUCTION

Un double constat

CONSTAT 1

IA generative = code accessible

Mais sans cadre methodologique. Le code genere n'a ni architecture, ni tests, ni specs.

CONSTAT 2

Formations IT = engagement faible

Exercices generiques, pas de projet reel, decrochage rapide.

Ce stage repond a ce double constat.

CONTEXTE — L'ENTREPRISE

La holding Toutim

1CTO & cofondateur

1Stagiaire DACS

∞Agents IA specialises

Montpellier — modele SaaS, equipe augmentee par l'IA
Philosophie : equipe reduite + agents IA = productivite maximale

CONTEXTE — PRODUITS

3 solutions complementaires

FEEDBACK ORCHESTRATOR

Gestion de feedback

Collecte, tri et priorisation des retours utilisateurs

SITDL

Apprentissage gamifie

Plateforme d'apprentissage IT avec monde 3D — objet du stage

KINDIAI

Assistant IA enfants

IA conversationnelle educative pour les 6-12 ans

CONTEXTE — SYNERGIE

Un investissement sert les trois

SITDL↔Feedback Orchestrator↔KindiAI

SSO JWT RS256

Authentification partagee entre les 3 plateformes

Workspaces partages

Espaces de travail communs

GPU mutualise

Ressources IA partagees entre les produits

CONTEXTE — MISSIONS

5 enjeux, 5 missions

Cadrage SDD→ Montee competences→ Infra Docker→ Module Auth→ Prototype 3D

Cadrage SDD : specifier 12 modules metier avec la methodologie Spec Driven Development
Montee competences : maitriser l'architecture hexagonale, Docker, React, Three.js
Infra Docker : 8 services conteneurises, CI/CD, SonarQube
Module Auth : JWT, magic link, register, login, verify email
Prototype 3D : salle de classe immersive, avatar anime

CONTEXTE — ORGANISATION

Tout est dans Git

TELETRAVAIL

Autonomie

Travail quotidien a distance, taches assignees, reporting via commits

PRESENTIEL

Sessions binome

Pair programming, revue de code, alignement technique

Tout est versionne et trace dans Git.

ANALYSE — LE PROBLEME

Deux publics, meme impasse

PUBLIC 1

Porteurs de projet non-tech

Code par morceaux
Pas d'architecture
Pas de vision systeme

PUBLIC 2

Devs juniors

Code sans recul
Pas de conduite de projet
Pas de specs

ANALYSE — LA SOLUTION

SITDL : apprendre en construisant

8phases de parcours

Projet reel, de l'idee au pitch

3curseurs IA

Profondeur d'aide adaptable

3Dmonde immersif

Jeu serieux + gamification

Jeu serieux : l'apprenant construit son vrai projet, pas des exercices
Gamification : XP, badges, streaks, leaderboard

ANALYSE — PERSONAS

2 utilisateurs cibles

PERSONA 1

Alex D. — porteur non-tech

A une idee de produit tech
Veut comprendre comment ca se construit
IA en mode guide pas a pas

PERSONA 2

Karim L. — dev junior

Sait coder mais sans cadre
Veut l'autonomie et la rigueur
IA en mode superviseur

ANALYSE — TECHNIQUE

Environnement technique

BackendSymfony 8.1, PHP 8.4
FrontendReact 18, TypeScript, Vite
3DThree.js, React Three Fiber
InfraDocker, 8 services

MONOREPO

4 applications

API + Web + Landing + 3D dans un seul depot versionne

ANALYSE — EXISTANT

Le stage ne part pas de zero

GDD fondateur (2022) — Game Design Document a l'origine du jeu serieux
Feedback Orchestrator — produit deja en production
Framework SDD — methodologie formalisee et outillee
KindiAI — assistant IA enfants en developpement
Standards d'architecture — hexagonal, CQRS, SOLID deja etablis

CADRAGE — METHODOLOGIE

Spec Driven Development

Spec → Code → Test. Jamais l'inverse.

La spec est la source de verite. Si le code diverge, c'est un bug de code, jamais un bug de spec.

Spec-as-contract

Une spec approuvee est un contrat formel entre le donneur d'ordre et le realisateur

Agent IA + gate humain

L'IA propose, l'humain valide, l'IA execute

CADRAGE — WORKFLOW

7 etapes, 7 gates

LIREgate→ CLARIFIERgate→ FRAMINGgate→ USgate→ UCgate→ SPECSgate→ TR

Chaque gate = validation humaine obligatoire
Aucune etape ne s'enchaine automatiquement
L'agent propose, le Product Owner valide, l'agent execute

CADRAGE — TRACABILITE

Tracabilite bidirectionnelle

US↔UC↔SPEC↔TR

Liaisons sortantes declarees en YAML dans le frontmatter de chaque artefact
Liaisons entrantes calculees automatiquement par script

validate-specs.js

Verifie la coherence bidirectionnelle

audit-orphans.js

Detecte les artefacts isoles

traceability.js

Genere la matrice de tracabilite

CADRAGE — MODULES

12 modules metier

AUTH

LEARNING

ASSESSMENT

GAMIFICATION

AIASSISTANT

BILLING

SCHOOL

INTEGRATION

WORKSPACE

IMMERSIVE

VOICE

PRESENTATION

MUST SHOULD COULD

Decomposition par domaine metier, pas par couche technique. Chaque module = un perimetre autonome.

CADRAGE — GAME DESIGN

Etat de Flow & curseurs

ANXIETE
trop dur

FLOW
zone optimale

ENNUI
trop facile

Serious learning + etat de flow = curseurs de profondeur IA

Studio

Espace de creation

Labo

Espace d'experimentation

Classe

Espace d'apprentissage

CADRAGE — PRODUCTION

432 artefacts traces

98user stories

108use cases

192specs techniques

34cahiers de recette

Tous valides par schema JSON, identifiants stables a vie
Exemples : AUTH-US-001 LEARNING-CTR-003 ASSESSMENT-TR-007

CADRAGE — PLANIFICATION

8 phases, 75 jours

P1 Auth + Infra P2 Learning P2 Assessment P3 Gamification P4 School P5 Billing P6 Voice P7 Workspace P8 QA + Deploy

28%

GitLab Kanban, pas de sprints — flux continu
Livraison continue, chaque feature est testee et deployee

TECHNIQUE — FORMATION

D'abord maitriser, ensuite produire

POC Backend→ POC Frontend→ POC Docker→ POC 3D→ StudyAssist

4 POC progressifs pour monter en competence avant la production
StudyAssist : application personnelle comme preuve d'appropriation
Chaque POC documente et versionne dans un depot dedie

TECHNIQUE — ARCHITECTURE

Architecture hexagonale

UserInterfaceControllers API REST
InfrastructureDoctrine, JWT, Mailer, Redis
ApplicationCQRS : commands, queries, handlers
DomainEntites, value objects, ports

Les dependances pointent vers l'interieur. PHPStan verifie.

SOLID

5 principes respectes dans chaque couche

CQRS

Separation commandes / queries

DDD

1 entite = 1 repository

TECHNIQUE — POC 1

POC Backend : "Pitch ton idee"

AVANT

Symfony classique

Controllers → ORM direct
Logique metier dans les controllers
Code couple

→

APRES

Architecture hexagonale

Domain → Ports → Adapters
Separation stricte des couches
2 depots distincts

2 depots = preuve du refactoring complet. Le POC cle du stage.

TECHNIQUE — POC 2

POC Frontend : React + TypeScript

React 18

Composants fonctionnels, hooks

TypeScript strict

Typage statique complet

Vite + Zustand

Build rapide, state management

Composants : IdeaForm, IdeaList, store
API REST consommee proprement via services types
Architecture feature-based, miroir du backend

TECHNIQUE — POC 3

POC Docker : 8 services

API

Symfony 8.1

WEB

React SPA

LANDING

Next.js

MYSQL

Base de donnees

REDIS

Cache + sessions

MAILHOG

Emails dev

SONARQUBE

Qualite

SCANNER

Analyse code

Reseau Docker dedie, ports reserves et documentes.

TECHNIQUE — POC 4

POC 3D temps reel

TECHNOLOGIE

Three.js → React Three Fiber

Rendu 3D temps reel dans le navigateur

CONTENU

Salle de classe interactive

Avatar anime (GLB + Mixamo), environnement explorable

React Three Fiber : integration native avec l'ecosysteme React
Modeles GLB avec animations Mixamo
Interactions : deplacement, camera, objets cliquables

TECHNIQUE — INNOVATION

Scenes 3D via MCP

Blender→ Export GLB→ Three.js

Model Context Protocol

Protocole standardise pour connecter les LLM a des outils externes

Pipeline 3D automatise

Generation de scenes 3D pilotee par l'IA via MCP → Blender

TECHNIQUE — PROJET PERSONNEL

StudyAssist

MODULE 1

Identity

Authentification, profil utilisateur

MODULE 2

Course

Gestion des cours, extraction PDF

MODULE 3

Review

Repetition espacee, algorithme SM-2

LLM local via Ollama — pas de dependance cloud
SM-2 : algorithme de repetition espacee pour memorisation optimale
MON application : code que je maitrise et que je peux montrer

TECHNIQUE — DIFFICULTE

Code couple → hexagonal

AVANT

Code couple

Controllers → ORM direct
Logique metier eparpillee
Tests impossibles

→

APRES

Hexagonal

Domain → Ports → Adapters
Chaque couche testable
Inversion de dependance

Le passage formateur du stage.

TECHNIQUE — DIFFICULTE

Sortie LLM non fiable

PROBLEME

Sorties imprevisibles

JSON malformed
Hallucinations
Formats incoherents

SOLUTIONS

Robustesse pragmatique

Regex de nettoyage
Retry avec backoff
Fallback + validation schema

TECHNIQUE — DIFFICULTE

LLM sur GPU

CONTRAINTE

VRAM limitee

Memoire GPU = goulot d'etranglement

SOLUTION

Quantisation

Reduire la precision pour tenir en memoire

COMPROMIS

Qualite / Performance

Latence a gerer cote UX

TECHNIQUE — QUALITE

4 piliers, rien d'optionnel

STATIQUE

PHPStan niv. 8

Analyse statique stricte, 0 erreur

CONTINUE

SonarQube

Quality gate bloquant en CI

TESTS

Pyramide

Unit → Integration → E2E

E2E

data-testid

Selecteurs normalises Playwright

TECHNIQUE — PROGRES

SonarQube : progres mesurables

AVANT

5.6%couverture de code

5.6%

APRES

51.5%couverture de code

51.5%

Quality gate bloquant : pas de merge sans couverture.

ORGANISATION

Flux continu, pas de sprints

GitLab

Issues, labels, milestones

Conventional Commits

feat(), fix(), docs(), test()

Kanban

Backlog → In Progress → Review → Done

Pas de sprints : flux continu adapte a une equipe de 2
Chaque issue tracee depuis la spec jusqu'au merge request

ORGANISATION — AUTONOMIE

Exercice SDD en autonomie

Spec complete d'un mini-projet

Menee seul, de bout en bout, avec la methodologie SDD

Evaluation esprit critique

Capacite a questionner les artefacts generes par l'IA

Preuve d'autonomie methodologique.

ORGANISATION — INITIATIVE

Autonomie et proactivite

PROJET 1

StudyAssist

Application de revision avec LLM local et repetition espacee

PROJET 2

SecureChat

Messagerie chiffree — exploration de la securite

Appropriation reelle, pas simple execution.

ORGANISATION — IA

Equipe augmentee par l'IA

AGENT

architecte-sdd

Genere les artefacts SDD

AGENT

backend-developer

Developpe le code backend

AGENT

frontend-developer

Developpe le code frontend

L'agent propose, l'humain valide.

Le tuteur orchestre, les agents produisent. Division du travail claire.

ORGANISATION — COMPETENCE CLE

Superviser, pas deleguer aveuglement

Ce que l'IA fait bien

Generer du code boilerplate
Proposer des structures
Accelerer la production

Ce que l'humain garantit

Coherence architecturale
Adequation au besoin metier
Qualite et rigueur

La competence emergente du stage.

CONCLUSION — COMPETENCES

Bilan des acquis

BC1 — BC2

Realiser / Optimiser

Architecture hexagonale
SOLID, CQRS
Tests pyramide

BC3 — BC4

Systemes / Donnees

Docker 8 services
MySQL, Redis
CI/CD, SonarQube

BC5 — BC6

Conduire / Collaborer

SDD, cadrage produit
Git, Kanban
Binome, autonomie

CONCLUSION — BILAN

3 dimensions de progression

TECHNIQUE

Savoir-faire

Archi hexagonale
SOLID, Docker
3D, IA locale

METHODOLOGIQUE

Savoir structurer

SDD, specs
Qualite mesuree
Pair programming

HUMAIN

Savoir-etre

Autonomie
Esprit critique
Rigueur

CONCLUSION — SUITE

Et apres ?

Alternance 3e annee BUT

Continuite naturelle du stage. Competences directement reinvestissables.

Phases suivantes SITDL

Gamification, Billing, School, Voice, Workspace...

P1-P2 Stage→ P3 Gamification→ P4-P8 Alternance