Guide Technique & Tutoriel

Sommaire

• 1. Architecture Globale
• 2. Flux d'Authentification (Deep Dive)
• 3. Base de Données (Firestore)
• 4. Tutoriel : Créer votre propre App Firebase

1. Architecture Globale

Cette plateforme est une Single Page Application (SPA) "légère". Contrairement aux SPAs complexes utilisant React ou Angular, nous utilisons ici du Javascript Vanilla (natif) pour manipuler le DOM. Cela permet de garder le code simple, lisible et extrêmement performant.

/
├── index.html          # Point d'entrée (Login/Landing)
├── dashboard.html      # Tableau de bord sécurisé
├── assets/
    ├── js/
        ├── app.js          # Cerveau de l'application
        ├── firebase-config.js # Configuration
        └── sidebar.js      # Composant UI réutilisable

2. Flux d'Authentification (Deep Dive)

L'authentification est la partie la plus critique. Voici comment elle fonctionne, étape par étape, dans app.js.

Firebase maintient une session persistante (comme un cookie). Pour savoir si un utilisateur est connecté, on n'utilise pas de simple variable, mais un Listener qui se déclenche à chaque changement d'état.

// app.js
initAuthObserver() {
    // On "écoute" les changements (connexion, déconnexion)
    window.auth.onAuthStateChanged(async (user) => {
        if (user) {
            // 1. Utilisateur connecté
            // -> On charge ses données depuis Firestore
            const doc = await db.collection('users').doc(user.uid).get();
            
            // -> On vérifie s'il est banni ou en attente
            if (userData.status === 'pending') showPendingModal();
            
        } else {
            // 2. Utilisateur déconnecté
            // -> On protège les pages sensibles
            if (isProtectedPage()) window.location.href = 'index.html';
        }
    });
}

L'inscription se fait en deux temps atomiques :

1. Création de l'utilisateur dans Firebase Auth (Email/Mot de passe sécurisé).
2. Création du document profil dans Firestore (Nom, Prénom, Rôle).

// Exemple simplifié
const cred = await auth.createUserWithEmailAndPassword(email, password);

// Une fois Auth réussi, on crée le profil en BDD
await db.collection('users').doc(cred.user.uid).set({
    email: email,
    firstName: "Hugo",
    role: "student",
    createdAt: new Date()
});

3. Base de Données (Firestore)

Nous utilisons Firestore, une base de données NoSQL orientée documents. Imaginez-la comme un énorme fichier JSON géant organisée en Collections.

Collection: users (Chaque document = 1 utilisateur)
{
    uid: "xyz123...",
    firstName: "Jean",
    role: "student" | "admin",
    watchedModules: ["course1_intro", "course1_chap1"], // Suivi progression
    xp: 150
}

Collection: courses (Chaque document = 1 formation)
{
    title: "Devenir Développeur Python",
    image: "url_image.jpg",
    curriculum: [ ...JSON complexe des chapitres... ]
}
            

4. Tutoriel : Créer votre App Firebase

Vous voulez créer une application similaire ? Suivez ce guide pour configurer l'infrastructure backend en moins de 10 minutes.

const firebaseConfig = {
    apiKey: "AIzaSy...",
    authDomain: "mon-projet.firebaseapp.com",
    projectId: "mon-projet",
    // ...
};
firebase.initializeApp(firebaseConfig);

# Dans votre terminal
npm install -g firebase-tools
firebase login
firebase init hosting
# Sélectionnez votre projet et le dossier "public" (ou racine)
firebase deploy