project-57ad200a

bySebastien Drure

Construit moi une application "France Activités Enfants" : VPS + Node.js + PostgreSQL/PostGIS + PWA (Vue.js/Leaflet) + modèle collaboratif + emails + géocodage local. 📌 Spécifications Techniques Finales Objectif : Cartographier les activités extra-scolaires en France avec : Carte interactive (Leaflet + OpenStreetMap). Filtres (type, âge, rayon autour d’un code postal/géolocalisation). Modèle collaboratif : Ajout par les utilisateurs + validation manuelle. Signalements : Possibilité de signaler une activité obsolète. Partage par lien pour chaque activité. Emails : Notifications aux admins pour les ajouts/signalements. Géocodage local : Table codes_postaux pour éviter les APIs externes. 🏗️ Architecture Composant Technologie Rôle Frontend Vue.js 3 + Vite + Pinia PWA avec carte Leaflet, filtres, formulaires. Backend Node.js + Express API REST pour gérer les activités, utilisateurs, signalements. Base de données PostgreSQL + PostGIS Stockage des activités, codes postaux, utilisateurs, signalements. Carte Leaflet + OpenStreetMap Affichage interactif avec marqueurs personnalisés. Emails Nodemailer + Mailgun Notifications aux admins (ajouts/signalements). Hébergement Ton VPS Backend (Node.js) + Frontend (fichiers statiques) + Base de données. Reverse Proxy Nginx Routing des requêtes API (/api) et frontend. HTTPS Certbot (Let’s Encrypt) Sécurisation du site. 🗃️ Base de Données (PostgreSQL + PostGIS) Tables Principales 1. codes_postaux (Géocodage local) Champ Type Description code_postal VARCHAR(10) Clé primaire (ex: "75001"). ville VARCHAR(100) Nom de la ville. latitude FLOAT Coordonnée GPS. longitude FLOAT Coordonnée GPS. geom GEOMETRY Point géospatial (PostGIS). 2. types_activites (Catégories) Champ Type Description id SERIAL Clé primaire. nom VARCHAR(50) Nom du type (ex: "Sport"). icone VARCHAR(50) Nom du fichier SVG (ex: "sport.svg"). 3. utilisateurs (Comptes utilisateurs) Champ Type Description id SERIAL Clé primaire. email VARCHAR(255) Email unique. mot_de_passe VARCHAR(255) Mot de passe haché (bcrypt). role VARCHAR(20) utilisateur ou admin. date_inscription TIMESTAMP Date de création. 4. activites (Activités extra-scolaires) Champ Type Description id SERIAL Clé primaire. nom VARCHAR(100) Nom de l’activité. description TEXT Description détaillée. id_type INTEGER Clé étrangère → types_activites.id. age_min INTEGER Âge minimum. age_max INTEGER Âge maximum. adresse VARCHAR(255) Adresse postale. code_postal VARCHAR(10) Clé étrangère → codes_postaux.code_postal. ville VARCHAR(100) Ville. latitude FLOAT Coordonnée GPS. longitude FLOAT Coordonnée GPS. horaires VARCHAR(255) Horaires d’ouverture. telephone VARCHAR(20) Numéro de téléphone. email VARCHAR(255) Email de contact. site_web VARCHAR(255) URL du site web. validee BOOLEAN TRUE si validée par un admin. id_utilisateur INTEGER Clé étrangère → utilisateurs.id. date_ajout TIMESTAMP Date de création. geom GEOMETRY Point géospatial (PostGIS). 5. signalements (Signalements d’activités obsolètes) Champ Type Description id SERIAL Clé primaire. id_activite INTEGER Clé étrangère → activites.id. id_utilisateur INTEGER Clé étrangère → utilisateurs.id. raison VARCHAR(100) Raison du signalement. message TEXT Message de l’utilisateur. statut VARCHAR(20) en_attente ou resolu. date_signalement TIMESTAMP Date du signalement. Index et Extensions sql Copier -- Activer PostGIS CREATE EXTENSION postgis; -- Index géospatiaux pour les requêtes de proximité CREATE INDEX idx_activites_geom ON activites USING GIST(geom); CREATE INDEX idx_codes_postaux_geom ON codes_postaux USING GIST(geom); -- Mettre à jour les colonnes geom UPDATE codes_postaux SET geom = ST_SetSRID(ST_MakePoint(longitude, latitude), 4326); UPDATE activites SET geom = ST_SetSRID(ST_MakePoint(longitude, latitude), 4326); 🔌 Backend (Node.js + Express) Fonctionnalités Endpoint Méthode Description Authentification /api/activites GET Liste toutes les activités validées. Non /api/activites/proches GET Liste les activités dans un rayon autour d’un point (lat/long). Non /api/activites POST Ajouter une activité (en attente de validation). Oui (utilisateur) /api/activites/:id/valider PATCH Valider une activité (admin seulement). Oui (admin) /api/activites/:id DELETE Supprimer une activité (admin seulement). Oui (admin) /api/signalements POST Signaler une activité. Oui (utilisateur) /api/signalements/en-attente GET Liste les signalements en attente (admin seulement). Oui (admin) /api/signalements/:id/resoudre PATCH Marquer un signalement comme résolu (admin seulement). Oui (admin) /api/utilisateurs/login POST Connexion (retourne un token JWT). Non /api/utilisateurs POST Inscription (créer un compte utilisateur). Non /api/codes-postaux/:code GET Récupérer les coordonnées GPS d’un code postal. Non Exemple de Requêtes SQL Utilisées 1. Récupérer les activités dans un rayon de X km sql Copier SELECT a.*, t.nom as type_nom, t.icone as type_icone FROM activites a JOIN types_activites t ON a.id_type = t.id WHERE ST_DWithin( a.geom, ST_SetSRID(ST_MakePoint(:longitude, :latitude), 4326), :rayon * 1000 -- Convertir km en mètres ) AND a.validee = TRUE; 2. Récupérer les coordonnées d’un code postal sql Copier SELECT latitude, longitude, ville FROM codes_postaux WHERE code_postal = :code_postal; 🖥️ Frontend (PWA avec Vue.js + Leaflet) Pages/Composants Composant Description Home.vue Page principale : carte + barre de filtres + fiche détaillée des activités. Map.vue Carte Leaflet avec marqueurs (icônes personnalisées). FilterBar.vue Filtres : type, âge, rayon, code postal. ActivityCard.vue Fiche détaillée d’une activité (affichée dans une modale). AddActivityForm.vue Formulaire pour ajouter une activité (utilisateurs connectés). AdminDashboard.vue Tableau de bord admin : validation des activités + gestion des signalements. LoginForm.vue Formulaire de connexion/inscription. Fonctionnalités Clés Carte interactive : Centrage par géolocalisation ou code postal. Marqueurs avec icônes personnalisées (ex: ⚽ pour le sport). Cliquer sur un marqueur → affiche la fiche détaillée. Filtres : Type d’activité (liste déroulante). Âge (plages : 0-3 ans, 3-6 ans, etc.). Rayon (curseur de 0 à 50 km). Code postal (recherche + centrage automatique). Partage : Bouton "Partager" → copie le lien de l’activité (ex: ton-domaine.fr/activite/123). Ajout d’activité : Formulaire avec géocodage automatique (via code postal). Validation manuelle par un admin. Signalement : Bouton "Signaler un problème" → formulaire avec raison + message. 📂 Structure des Fichiers Backend (/backend) text Copier backend/ ├── config/ │ ├── db.js # Configuration PostgreSQL │ └── email.js # Configuration Nodemailer ├── controllers/ │ ├── activites.js │ ├── utilisateurs.js │ └── signalements.js ├── models/ │ ├── Activite.js │ ├── Utilisateur.js │ └── Signalement.js ├── routes/ │ ├── activites.js │ ├── utilisateurs.js │ └── signalements.js ├── middlewares/ │ └── auth.js # Middleware JWT ├── .env # Variables d'environnement ├── app.js # Configuration Express └── server.js # Lancement du serveur Frontend (/frontend) text Copier frontend/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ │ └── icons/ # Icônes SVG (sport.svg, music.svg, etc.) │ ├── components/ │ │ ├── Map.vue │ │ ├── FilterBar.vue │ │ ├── ActivityCard.vue │ │ ├── AddActivityForm.vue │ │ └── AdminDashboard.vue │ ├── stores/ │ │ └── activites.js # Gestion des données (Pinia) │ ├── views/ │ │ ├── Home.vue │ │ └── Admin.vue │ ├── App.vue │ └── main.js ├── package.json └── vite.config.js