260302 Mise en place du Frontend Nous allons créer une page web contenant une carte interactive (basée sur OpenStreetMap). Quand tu cliqueras n'importe où sur cette carte, la page web enverra les coordonnées à ton API (que nous avons codée la semaine dernière). Ton serveur vérifiera si le clic est dans la zone "Paris Test" et affichera le résultat directement sur la carte sous forme de petite bulle (popup). Pour cela, nous allons utiliser Leaflet.js, qui est la bibliothèque standard, légère et gratuite pour faire de la cartographie sur le web. Voici les 3 étapes pour y parvenir. Étape 1 : Créer le dossier "public" Sur ton VPS, nous allons créer un dossier qui contiendra les fichiers visibles par les utilisateurs (comme les pages HTML). Connecte-toi à ton VPS et place-toi dans le dossier du projet : Bash cd /var/www/alteris-geomatic Crée le dossier public : Bash mkdir public Étape 2 : Créer la page web ( index.html) C'est ici que nous allons intégrer la carte. Crée et ouvre le fichier HTML dans le dossier public : Bash nano public/index.html Copie et colle ce code complet. J'ai ajouté des commentaires pour t'expliquer exactement ce que fait chaque partie : HTML Alteris - Carte Interactive
Sauvegarde et quitte ( Ctrl+O, Entrée, Ctrl+X). Étape 3 : Indiquer au serveur Node.js d'afficher cette page Actuellement, notre serveur server.js ne sait faire que de l'API. Nous allons lui dire de "servir" notre nouveau dossier public lorsqu'un visiteur arrive sur le site. Ouvre ton fichier serveur : Bash nano server.js Trouve ces lignes au début de ton fichier : JavaScript app.use(bodyParser.json()); // Route de vérification simple app.get('/', (req, res) => { res.send('Serveur Alteris Géomatique opérationnel 🟢'); }); Remplace la route app.get(...) par cette simple ligne de code qui indique le dossier public : JavaScript app.use(bodyParser.json()); // On demande à Express de servir les fichiers du dossier "public" app.use(express.static('public')); Sauvegarde et quitte ( Ctrl+O, Entrée, Ctrl+X). Étape 4 : Redémarrer et Tester Pour que Node.js lise ton fichier server.js mis à jour, il faut le relancer via PM2 : Bash pm2 restart alteris-api C'est l'heure du test visuel ! 🗺️ Ouvre ton navigateur web (Chrome, Firefox, etc.) et rends-toi sur l'adresse de ton projet : 👉 https://alteris.juxjux.ovh Tu devrais voir une magnifique carte s'afficher.