VernouVélo

Site officiel du service de vélos électriques en libre-service de Vernou-en-Sologne. C'est une application web sur une seule page, multilingue et responsive, qui présente le service, les parcours touristiques et les monuments de la région.

Projet réalisé pendant mon stage chez KPICREATION, pour la Mairie de Vernou-en-Sologne.

Ce que fait le site

• Quatre langues : français, anglais, allemand et néerlandais, avec détection automatique et sélecteur manuel
• Nombre de vélos disponibles en temps réel, récupéré depuis l'API GBFS d'EcoVelo
• Météo locale du jour via l'API météo-concept
• Formulaire de contact qui envoie un e-mail au support (PHPMailer et SMTP Brevo)
• Détection de l'appareil (Android, iOS ou ordinateur) pour proposer le bon lien de téléchargement de l'application
• Cartes de parcours et de monuments qu'on peut afficher ou masquer facilement

Stack technique

Élément	Technologie
Backend	PHP, sans framework
Envoi d'e-mails	PHPMailer
Front	HTML et CSS
APIs externes	EcoVelo (GBFS), météo-concept, Brevo (SMTP)

Installation

1. Cloner le dépôt

git clone https://github.com/Louis-dmm/VernouVelo.git
cd VernouVelo

2. Renseigner les clés

Les identifiants ne sont pas versionnés (voir .gitignore). Crée un fichier .env à la racine avec tes propres valeurs :

SMTP_HOST=smtp-relay.brevo.com
SMTP_USERNAME=votre-identifiant@smtp-brevo.com
SMTP_PASSWORD=votre-mot-de-passe-smtp
SMTP_PORT=587

MAIL_FROM=expediteur@exemple.com
MAIL_TO=destinataire@exemple.com

METEO_TOKEN=votre-token-meteo-concept

Le fichier config.php lit ces variables au démarrage, sans aucune dépendance à installer.

3. Lancer en local

php -S localhost:8000

Puis ouvre http://localhost:8000.

Déploiement

Le .env n'étant pas dans le dépôt, il faut le déposer à la main à la racine du site sur le serveur (Plesk, o2switch, etc.). Sans lui, le formulaire de contact et la météo ne fonctionnent pas.

Guide d'administration

Cette partie s'adresse à toute personne qui doit gérer le contenu de la page, même sans savoir coder. Le site est édité par KPICREATION avec la Mairie de Vernou-en-Sologne.

Les fichiers à connaître

• index.php : le cœur du site (textes, images, boutons, formulaires). C'est le seul fichier à toucher pour masquer un monument ou un château.
• style.css : l'apparence (couleurs, disposition, animations).
• languages/ : quatre fichiers (lang_fr.php, lang_en.php, lang_de.php, lang_nl.php) qui contiennent toutes les traductions.

Masquer une carte (monument ou parcours)

Dans index.php, chaque monument ou parcours est une boîte appelée « carte », entre <article class="carte_itineraire"> et </article>.

Pour en cacher une, ajoute disabled à sa classe :

<!-- Carte visible -->
<article class="carte_itineraire">

<!-- Carte masquée -->
<article class="carte_itineraire disabled">

Voici une carte complète en exemple :

<article class="carte_itineraire">
    <img src="chambord.jpg" alt="Château de Chambord">
    <div class="contenu_carte">
        <h4>CHÂTEAU DE CHAMBORD</h4>
        <ul class="caracteristiques_itineraire">
            <li><strong>Distance :</strong> 41 km</li>
        </ul>
    </div>
</article>

---

Réalisé par KPICREATION avec la Mairie de Vernou-en-Sologne.