📚 Guide de Présentation CDA

Slide 0 : Page de garde

Ce que vous dites :
"Bonjour à tous. Je m'appelle Bruno Guns et je me présente aujourd'hui dans le cadre du titre professionnel de niveau 6 Concepteur Développeur d'Application, aboutissement de ma formation de 9 mois au sein de SEM Numérica."

Slide 1 : Introduction aux 11 compétences

Ce que vous dites :
"Durant cette présentation de 40 minutes, je vais vous démontrer ma maîtrise des 11 compétences requises pour l'obtention de ce titre professionnel, à travers des expériences concrètes que j'ai vécues durant ma formation."

"Vous remarquerez que sur chaque slide, en haut à droite, j'indique par un numéro à quelle compétence je fais référence. Voici la liste complète de ces compétences..."

Slide 2 : Présentation du projet FailDaily

Pas de compétence spécifique - Contexte général

Ce que vous dites :
"Laissez-moi vous présenter FailDaily - un réseau social mobile pour partager ses galères du quotidien."

Présentation rapide (pointez les 4 cartes) :

• Publier : "Les utilisateurs peuvent publier leurs fails avec texte, photo, choix de catégorie et mode anonyme"
• Réagir : "4 réactions positives uniquement - pas de négativité, c'est important pour l'ambiance bienveillante"
• Gamification : "Points et badges pour encourager l'engagement"
• Sécurité : "Modération active et accord parental pour les mineurs - j'y reviendrai"

Slide 3 : Analyser les besoins

Compétence 5 : Analyser les besoins et maquetter une application

Ce que vous dites :
"La première étape : analyser les besoins. J'ai identifié les fonctionnalités essentielles."

Parcourez rapidement la liste en insistant sur 2-3 points :

• "Inscription avec vérification email - important pour la sécurité"
• "Mode anonyme ou visible - l'utilisateur choisit pour chaque fail"
• "4 réactions positives uniquement - pas de dislike, pas de négativité"
• "Modération - pour protéger la communauté, j'ai prévu un système de modération que je détaillerai"

Slides 4, 4B, 4C : Créer les maquettes

Compétence 5 : Analyser les besoins et maquetter une application

Ce que vous dites :
"Une fois les besoins identifiés, j'ai créé des maquettes de toutes les pages de l'application. C'est comme un architecte qui dessine une maison avant de la construire."

Slide 4 - Inscription et Connexion :
"Voici les deux premières pages que l'utilisateur voit : l'inscription et la connexion. J'ai veillé à ce que les formulaires soient simples et clairs, avec des icônes pour guider l'utilisateur."

Slide 4B - Liste des fails et Création :
"Ensuite, j'ai conçu le fil d'actualité où les utilisateurs voient les fails publiés, et le formulaire de création pour publier un nouveau fail. Vous remarquerez les réactions en bas de chaque carte, et les catégories colorées."

Slide 4C - Badges et Profil :
"Enfin, j'ai designé la page des badges qui montre la progression de l'utilisateur avec une barre de niveau, et la page profil qui affiche ses statistiques et ses fails publiés."

Slide 5 : Définir l'architecture technique

Compétence 6 : Définir l'architecture logicielle d'une application

Ce que vous dites :
"Maintenant que je savais à quoi l'application devait ressembler, j'ai dû définir son architecture technique. C'est la Compétence 6."

"J'ai choisi une architecture 3-tiers classique, qui sépare l'application en 3 grandes parties :"

• Frontend (Angular + Ionic) : C'est ce que l'utilisateur voit sur son téléphone. Interface graphique, interactions, navigation entre les pages.
• Backend (Node.js + Express) : C'est le cerveau de l'application. Il gère toute la logique métier : authentification, validation des données, calcul des points, attribution des badges.
• Base de données (MySQL) : C'est la mémoire de l'application. Elle stocke tous les utilisateurs, les fails, les réactions, les commentaires.

Slides 6 et 6B : Concevoir la base de données

Compétence 7 : Concevoir et mettre en place une base de données relationnelle

Ce que vous dites :
"Passons maintenant à la Compétence 7 : concevoir la base de données."

Slide 6 - Code SQL :
"J'ai créé des tables pour ranger toutes les informations de l'application. Voici par exemple la table 'fails' qui stocke chaque fail publié : un identifiant unique, l'auteur, le titre, la description, la catégorie, l'image, et un indicateur pour savoir si c'est anonyme ou non."

Slide 6B - Schéma relationnel :
"Voici le schéma complet de ma base de données. J'ai créé 8 tables qui sont reliées entre elles :"

• USERS : Stocke les utilisateurs (email, mot de passe hashé, pseudo, points, niveau)
• FAILS : Stocke tous les fails publiés. Chaque fail appartient à un utilisateur (relation 1:*)
• REACTIONS : Stocke les réactions. Un fail peut avoir plusieurs réactions (relation 1:*)
• COMMENTS : Stocke les commentaires d'encouragement
• MODERATION : Enregistre les décisions de modération sur les fails
• BADGES : Liste des badges disponibles (nom, description, icône, points requis)
• USER_BADGES : Table de liaison qui enregistre quels utilisateurs ont débloqué quels badges
• PARENTAL_CONSENTS : Gère les autorisations parentales pour les mineurs

Slide 7 : Installer l'environnement de travail

Compétence 1 : Installer et configurer son environnement de travail

Ce que vous dites :
"Avant de commencer à coder, j'ai dû installer tous les outils nécessaires. C'est la Compétence 1."

"J'ai installé :"

• Node.js version 20 : Pour exécuter le code JavaScript côté serveur
• MySQL version 8 : Pour la base de données
• Visual Studio Code : Mon éditeur de code principal
• Git : Pour la gestion de versions
• Docker : Pour containeriser l'application et faciliter le déploiement

"J'ai vérifié que tout fonctionnait correctement en lançant des commandes comme node --version et mysql --version."

Slide 8 : Gérer le projet avec Git

Compétence 4 : Contribuer à la gestion d'un projet informatique

Ce que vous dites :
"Pour gérer mon code et sauvegarder mon travail, j'ai utilisé Git. C'est la Compétence 4."

"Git me permet de créer des 'points de sauvegarde' appelés commits. À chaque fois que je termine une fonctionnalité, je fais un commit avec un message clair qui explique ce que j'ai fait."

Exemples de commits que j'ai faits :

• "Ajout système d'authentification" → Quand j'ai terminé l'inscription et la connexion
• "Création formulaire publication fail" → Quand j'ai développé le formulaire de création
• "Ajout système de réactions" → Quand j'ai codé les 4 réactions
• "Correction bug anonymat" → Quand j'ai corrigé un problème sur le mode anonyme

Slide 9 : Développer l'accès aux données (API REST + MySQL)

Compétence 8 : Développer des composants d'accès aux données SQL

Ce que vous dites :
"Maintenant, entrons dans le code. Commençons par les composants d'accès aux données - la Compétence 8. J'ai développé une API REST avec Node.js et Express qui communique avec MySQL."

Stack technique :

• Node.js : Choisi pour son modèle asynchrone non-bloquant, parfait pour gérer les réactions en temps réel
• Express.js : Framework minimaliste pour créer les routes API RESTful
• mysql2 : Driver MySQL avec support des Promises pour utiliser async/await

Exemple concret : Route GET /api/fails

• Requête SQL avec JOIN entre fails et users pour récupérer les informations auteur
• JOIN avec reactions + COUNT pour afficher le nombre total de réactions
• Filtrage WHERE status = 'approved' : seuls les fails modérés sont affichés
• GROUP BY sur fail.id pour grouper les réactions
• LIMIT 50 pour optimiser les performances

"Le résultat est retourné en JSON avec la structure { success: true, data: [...] }. Ce format standardisé facilite la consommation par le frontend Angular."

Slide 10 : Logique métier - Gamification (Points & Badges)

Compétence 3 : Développer des composants métier

Ce que vous dites :
"Passons à la logique métier - Compétence 3. J'ai implémenté un système de gamification pour encourager l'engagement des utilisateurs."

Système de points :

• Chaque réaction donne des points différents : courage=5pts, laugh=3pts, empathy=2pts, support=3pts
• Les points s'accumulent dans la table users (colonne points)
• Fonction givePoints(failId, reactionType) : calcule les points selon le type de réaction
• UPDATE automatique : UPDATE users SET points = points + ? WHERE id = ?

Système de badges :

• Badges débloqués selon des seuils : "Premier Fail" (1 fail), "Social" (10 réactions), "Fail Master" (100 fails), etc.
• Fonction checkBadges(userId) : vérifie après chaque action si un nouveau badge est débloqué
• Affichage visuel : barre de progression avec niveaux, badges débloqués en couleur, badges verrouillés en gris

Code expliqué :
"Dans le code, je définis d'abord un objet POINTS qui associe chaque type de réaction à un nombre de points. Ensuite, j'exécute une requête SQL pour ajouter ces points au total de l'utilisateur. Enfin, j'appelle checkBadges() pour voir si un nouveau badge doit être débloqué."

Slide 11A : Interface Angular + Ionic (Composants réutilisables)

Compétence 2 : Développer des interfaces utilisateur

Ce que vous dites :
"Passons au frontend. J'ai développé l'interface utilisateur avec Angular 17 et Ionic 7. C'est la Compétence 2."

Choix du stack frontend :

• Angular : Framework TypeScript avec architecture MVC, injection de dépendances, et data binding bidirectionnel
• Ionic : Framework UI cross-platform - même code pour iOS, Android, et Web (PWA)
• TypeScript : Typage statique pour détecter les erreurs avant l'exécution

Exemple concret : Composant fail-card

• Classe TypeScript avec @Component decorator
• @Input() fail: Fail : Reçoit les données du fail depuis le composant parent
• Méthode async react(type: string) : Appelle le service failService.addReaction()
• Affiche un toast Ionic pour confirmer l'action utilisateur
• Incrémente le compteur de réactions en temps réel

"L'interface utilise le data binding d'Angular : {{ fail.username }} affiche automatiquement le pseudo. Quand les données changent, l'affichage se met à jour instantanément."

Slide 11B : Panel Admin + Modération des fails

Compétence 10 : Collaborer à la gestion d'un projet informatique

Ce que vous dites :
"Pour gérer l'application en production et protéger la communauté, j'ai développé un panel d'administration avec système de modération - Compétence 10."

Dashboard Admin - Statistiques en temps réel :

• 1,245 Utilisateurs : Total inscrits dans la plateforme
• 523 Fails publiés : Nombre de fails approuvés et visibles
• 12 En attente : Fails en modération (status='pending')
• 8,431 Réactions : Total des réactions de tous types
• Chaque carte a un gradient de couleur différent pour une lecture rapide

File de modération :

• Liste tous les fails avec status='pending'
• Affiche : numéro du fail, catégorie, extrait du texte
• Deux boutons pour chaque fail : ✅ Approuver (vert) et ❌ Rejeter (rouge)
• Interface simple et rapide pour traiter les fails rapidement

Sécurité : Middleware requireAdmin

• Fonction requireAdmin(req, res, next) vérifie le rôle de l'utilisateur
• Requête SQL : SELECT role FROM users WHERE id = ?
• Si role !== 'admin' → Retourne erreur 403 "Accès refusé"
• Sinon → Appelle next() pour continuer vers la route protégée

Route de modération :
"La route POST /admin/moderate/:id est protégée par le middleware. Elle reçoit l'action ('approved' ou 'rejected') et met à jour le statut du fail dans la base de données."

Code expliqué :

• Ligne 1-10 : Le middleware vérifie d'abord si l'utilisateur est admin
• Ligne 13-16 : La route récupère l'ID du fail et l'action depuis la requête
• Ligne 18-22 : UPDATE SQL pour changer le status du fail
• Ligne 24 : Retourne une confirmation JSON

Slide 12 : Tests unitaires + intégration (Jest + Supertest)

Compétence 9 : Préparer et exécuter les plans de tests

Ce que vous dites :
"Une fois l'application développée, il faut la tester. C'est la Compétence 9. J'ai utilisé Jest pour écrire mes tests."

Exemples de tests simples :

Test 1 : Bloquer les enfants -13 ans

• Je crée un faux utilisateur avec une date de naissance de 2015 (10 ans)
• J'envoie une requête POST /api/auth/register
• Résultat attendu : status 403 (refusé)
• Résultat obtenu : ✅ PASS - L'inscription est bien refusée
• Pourquoi c'est important : Conformité RGPD

Test 2 : Système de points

• Je crée un fail, j'ajoute une réaction 'courage'
• Résultat attendu : L'utilisateur a +5 points
• Résultat obtenu : ✅ PASS

Test 3 : Modération

• Je crée un fail, un modérateur le rejette
• Résultat attendu : Le fail a status='rejected'
• Résultat obtenu : ✅ PASS

Résultat obtenu : ✅ PASS