Retour au portfolio
📋 Informations générales
Nom du projet : Weather API - Application Météo
Date de création : Projet BTS SIO SLAM
Auteur : Abdelmalek Elidrissi
Type : Application web météo avec géolocalisation
🎯 Objectifs du projet
- Consultation de la météo en temps réel basée sur la géolocalisation
- Affichage des prévisions météorologiques (horaires et 7 jours)
- Sauvegarde de l'historique des localisations consultées
- Affichage de la qualité de l'air
- Interface utilisateur moderne et responsive
🛠️ Technologies utilisées
Backend
Node.js
Express.js 5.2.1
SQLite3 5.1.7
Node-fetch 2.7.0
Dotenv 17.2.3
Frontend
HTML5
CSS3
JavaScript ES6+
Bootstrap 5
Google Fonts
API externe
WeatherAPI.com
📁 Structure du projet
Projet-Weather-API-master/
├── index.js # Serveur Express principal (292 lignes)
├── package.json # Configuration npm et dépendances
├── package-lock.json # Version verrouillée des dépendances
├── .gitignore # Fichiers ignorés par Git
├── weatherApp.db # Base de données SQLite (créée automatiquement)
├── weatherApp.db-journal # Journal SQLite
├── weatherApp.sqbpro # Projet SQLite
├── README.md # Documentation principale
├── README_LOCAL.md # Documentation locale
└── public/
├── index.html # Page principale (~1450 lignes)
├── all.html # Page d'affichage de l'historique
├── Images/
│ └── Meteo.jpg # Images du projet
└── Meteo.jpg # Image météo
🔧 Fonctionnalités implémentées
1. Géolocalisation automatique
- Détection de la position via l'API Geolocation du navigateur
- Récupération des coordonnées GPS (latitude/longitude)
- Gestion des erreurs avec messages explicites
- Demande de permission utilisateur avec gestion des refus
2. Récupération des données météo
Météo actuelle :
- Température (en Celsius)
- Conditions météorologiques (description, icônes)
- Humidité
- Vitesse et direction du vent
- Pression atmosphérique
- Visibilité
- Indice UV
Prévisions météo :
- Prévisions horaires (prochaines 24 heures)
- Prévisions sur 7 jours
- Températures maximales et minimales
- Probabilité de précipitations
Qualité de l'air :
- Indice DEFRA (UK Air Quality Index)
- Concentration de PM2.5 (particules fines)
- Niveaux de pollution
3. Base de données SQLite
Structure de la table geoloc :
| Colonne |
Type |
Description |
| id |
INTEGER PRIMARY KEY AUTOINCREMENT |
Identifiant unique |
| latitude |
REAL NOT NULL |
Coordonnée latitude |
| longitude |
REAL NOT NULL |
Coordonnée longitude |
| timestamp |
INTEGER NOT NULL |
Date et heure (Unix timestamp) |
| mood |
TEXT NOT NULL |
Humeur de l'utilisateur |
| pays |
TEXT |
Nom du pays |
| ville |
TEXT |
Nom de la ville |
| temperature |
REAL |
Température enregistrée |
| condition |
TEXT |
Conditions météorologiques |
| defra |
REAL |
Indice qualité de l'air DEFRA |
| pm25 |
REAL |
Concentration de PM2.5 |
4. Configuration API
- Configuration via l'interface web (recommandé)
- Alternative : configuration via fichier .env
- Sauvegarde de la clé API dans la session serveur
- Validation de la clé API avant utilisation
5. Historique des localisations
- Page dédiée (/all.html) affichant toutes les localisations
- Affichage formaté avec Bootstrap cards
- Tri par date (du plus récent au plus ancien)
- Affichage des informations météo enregistrées
🌐 Routes API exposées
| Route |
Méthode |
Description |
Paramètres |
| / |
GET |
Page principale |
Aucun |
| /all.html |
GET |
Page historique |
Aucun |
| /weather |
GET |
Données météo actuelles et prévisions |
lat, lon, apiKey, country (optionnel) |
| /forecast |
GET |
Prévisions météo uniquement |
lat, lon, apiKey |
| /all |
GET |
Toutes les localisations (JSON) |
Aucun |
| /api |
POST |
Sauvegarde localisation |
Body JSON |
Exemples d'utilisation
GET /weather
GET /weather?lat=48.8566&lon=2.3522&apiKey=YOUR_API_KEY
POST /api
{
"lat": 48.8566,
"long": 2.3522,
"timestamp": 1234567890,
"mood": "Happy",
"country": "France",
"city": "Paris",
"temperature": 15.5,
"condition": "Sunny",
"defra": 2,
"pm25": 10.5
}
📊 Schéma de base de données
CREATE TABLE IF NOT EXISTS geoloc (
id INTEGER PRIMARY KEY AUTOINCREMENT,
latitude REAL NOT NULL,
longitude REAL NOT NULL,
timestamp INTEGER NOT NULL,
mood TEXT NOT NULL,
pays TEXT,
ville TEXT,
temperature REAL,
condition TEXT,
defra REAL,
pm25 REAL
);
Migrations : Le code gère automatiquement l'ajout de colonnes si elles n'existent pas déjà (condition, defra, pm25).
🚀 Installation et démarrage
Prérequis
- Node.js version 14 ou supérieure
- npm (généralement inclus avec Node.js)
- Clé API WeatherAPI gratuite sur weatherapi.com
Étapes d'installation
- Installer les dépendances
cd Projets/Projet-Weather-API-master
npm install
- Configurer la clé API
Option 1 - Via l'interface web (recommandé) :
- Lancer le serveur :
node index.js
- Ouvrir http://localhost:3000
- Entrer la clé API dans la section "Configuration API"
Option 2 - Via fichier .env :
WEATHER_API_KEY=votre_cle_api_ici
- Lancer le serveur
node index.js
- Accéder à l'application
- Page principale : http://localhost:3000
- Page historique : http://localhost:3000/all.html
💡 Points techniques remarquables
Architecture
- Architecture REST
- Séparation backend/frontend
- Base de données SQLite légère
Gestion des erreurs
- Erreurs de géolocalisation
- Erreurs d'API externe
- Validation des paramètres
Sécurité
- Protection SQL injection
- Gestion sécurisée clé API
- Gestion CORS
Performance
- Requêtes SQL optimisées
- Gestion de session
- Interface responsive
🐛 Difficultés rencontrées et solutions
Problème 1 : Géolocalisation non disponible
L'API de géolocalisation nécessite une autorisation explicite de l'utilisateur.
Solution : Ajout d'un message d'erreur explicite demandant à l'utilisateur d'autoriser la géolocalisation dans son navigateur. Gestion des cas où la géolocalisation n'est pas disponible.
Problème 2 : Gestion des erreurs CORS
Les requêtes directes depuis le navigateur vers l'API WeatherAPI génèrent des erreurs CORS.
Solution : Utilisation d'un serveur Express pour servir les fichiers statiques et agir comme proxy vers l'API externe, évitant ainsi les problèmes CORS.
Problème 3 : Migration de schéma de base de données
Ajout de nouvelles colonnes à la table existante sans perdre les données.
Solution : Ajout de colonnes conditionnelles avec gestion des erreurs pour les colonnes déjà existantes. Utilisation d'ALTER TABLE avec vérification des erreurs.
Problème 4 : Gestion de la clé API
Stockage sécurisé de la clé API côté client ou serveur.
Solution : Stockage de la clé API dans la session serveur Express, permettant une configuration unique par utilisateur sans exposer la clé dans le code client.
📈 Améliorations possibles
Fonctionnalités
- Authentification utilisateur
- Graphiques de données
- Notifications météo
- Export de données
- Recherche de ville
Technique
- Mode hors-ligne (Service Workers)
- PWA (Progressive Web App)
- Tests unitaires (Jest, Mocha)
- Documentation Swagger/OpenAPI
- Multi-langue (i18n)
📚 Compétences développées
Backend
- API REST avec Node.js et Express
- Gestion de base de données SQLite
- Intégration d'API externes
- Gestion des sessions
- Gestion des erreurs et logs
Frontend
- Interfaces web interactives
- Bootstrap 5 responsive
- Géolocalisation navigateur
- Manipulation DOM moderne
- Gestion asynchrone (fetch, async/await)
Base de données
- Modélisation SQLite
- Création et migration de schémas
- Requêtes SQL optimisées
- Gestion de l'historique
Général
- Architecture REST
- Sécurité web
- Documentation de projet
- Gestion de projet
🎓 Conclusion
Ce projet a permis de mettre en pratique les compétences en développement web full-stack. L'application combine efficacement les technologies backend (Node.js, Express) et frontend (HTML, CSS, JavaScript) pour créer une solution fonctionnelle et utilisable.
Points forts :
- Architecture bien structurée
- Interface utilisateur moderne et responsive
- Gestion complète des erreurs
- Documentation claire
Prochaines étapes : Amélioration de l'interface utilisateur, ajout de fonctionnalités avancées (graphiques, notifications), optimisation des performances et transformation en PWA.