Blog

Une fois mon API opérationnelle avec Symfony et API Platform, j’ai pu me concentrer sur la construction de l’interface utilisateur, en JavaScript, pour permettre une interaction fluide avec l’API. L’objectif était de proposer une expérience complète : connexion, consultation des modèles de fusées, lancement de simulations, et enregistrement des résultats.

Le point de départ a été la page de connexion. Plutôt que d’utiliser un formulaire Symfony classique avec form_login, j’ai opté pour un fonctionnement 100% JavaScript, en envoyant les identifiants à la route /api/login via fetch(). En réponse, le serveur retourne un JWT (JSON Web Token) que je stocke côté client et que je réutilise pour authentifier les requêtes suivantes. Ce choix rend l’application stateless, donc plus simple à maintenir et plus flexible à déployer.

Pour centraliser toute cette logique, j’ai créé une classe JavaScript nommée RocketAuthentication, contenant des méthodes statiques comme :

• login(username, password),
• logout(),
• isAuthenticated(),
• fetchWithAuth(url, options).

Cette classe gère le stockage du token, l’ajout automatique du header Authorization, et la redirection vers la page de login en cas d’échec. Cela m’a permis de sécuriser toutes les requêtes sans dupliquer le code partout.

Ensuite, j’ai construit différentes pages ou composants :

• un tableau listant les RocketModules appartenant à l’utilisateur connecté,
• des formulaires pour en ajouter ou modifier,
• une interface pour composer une simulation en combinant un module, des sous-modules et un script de mouvement,
• une visualisation en temps réel du vol à l’aide de Canvas,
• et une possibilité d’enregistrer les résultats de la simulation pour les consulter plus tard.

Tout cela repose sur des appels fetch() à l’API, enrichis avec le token d’authentification, et des réponses JSON que je transforme dynamiquement en éléments HTML. L’interface utilise Tailwind CSS, ce qui m’a permis de gagner du temps sur le style tout en gardant un rendu propre et lisible.

J’ai aussi mis en place une gestion des erreurs utilisateur : messages si un champ est mal rempli, si l’identifiant est déjà pris, ou si une requête échoue. Cela donne à l’application un aspect plus professionnel, et évite les frustrations pour les utilisateurs.

Enfin, j’ai intégré un système de déconnexion simple, qui efface le token du stockage local et redirige vers la page de login. Ce genre de détail peut sembler mineur, mais il est essentiel pour offrir une application complète et cohérente.