Documentation JavaScript - RocketBuilder

Documentation JavaScript - RocketBuilder#

Cette section décrit l’organisation et le rôle des différents scripts JavaScript de l’application.

đź“‚ Dossier public/js/#

Le JavaScript est organisé en trois sous-dossiers principaux :

1. đź“š Api/#

Contient des classes utilitaires pour communiquer avec l’API.

Fichier

RĂ´le

RocketAuthentication.js

Gère l’authentification via JWT, stockage du token et headers d’authentification.

Extrait :

static async login(username, password) {
    const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ username, password }),
        headers: { 'Content-Type': 'application/json' }
    });
    const data = await response.json();
    this.token = data.token;
}

2. đź“š Component/#

Composants d’interface utilisateur.

Fichier

RĂ´le

NavBar.js

Composant de barre de navigation dynamique.

RocketForm.js

Formulaire de création de module/sous-module avec validation des champs.

Extrait :

export default function NavBar() {
    return `
        <nav class="bg-gray-800 p-2 text-white">
            RocketBuilder Navigation
        </nav>
    `;
}

3. đź“š Pages/#

Pages de l’application accessibles aux utilisateurs.

Fichier

RĂ´le

LoginPage.js

Gère l’affichage du formulaire de connexion utilisateur.

DashboardPage.js

Affiche les modules et sous-modules existants après connexion.

Extrait :

export default function LoginPage() {
    return `
        <form id="login-form">
            <input type="text" id="username" placeholder="Nom d'utilisateur">
            <input type="password" id="password" placeholder="Mot de passe">
            <button type="submit">Connexion</button>
        </form>
    `;
}

📢 Remarques#

  • Tout est codĂ© en ES6+ (import/export, arrow functions).

  • Les appels API utilisent fetch nativement avec Authorization: Bearer automatiquement ajoutĂ©.

  • Les composants sont purs (pas de framework type React ou Vue).

🚀 À retenir#

  • Api/ âž” communication avec l’API

  • Component/ âž” composants rĂ©utilisables d’interface

  • Pages/ âž” pages principales

Contents