1
1. INTRODUCTION
Aujourd’hui, avec l’évolution rapide des technologies web, les applications météo en
ligne sont devenues indispensables pour fournir des informations climatiques en temps
réel. Ce projet a pour objectif de développer une application météo simple, interactive
et responsive en utilisant HTML, CSS et JavaScript, tout en intégrant une API météo
(OpenWeatherMap).
Ce travail s’inscrit dans le cadre de la validation des compétences acquises durant la
première année de la Licence à la Faculté des Sciences Informatiques (FASI) de
l’Université Protestante au Congo.
L’application permet à l’utilisateur de saisir le nom d’une ville et d’obtenir des
informations météo en temps réel telles que la température, l’humidité et la description
du ciel. Ce projet allie programmation front-end, interaction utilisateur et
consommation d’une API REST.
2. CAHIER DES CHARGES
2.1. Présentation générale du projet
Le projet consiste à développer une application web simple permettant à un utilisateur
de connaître la météo actuelle dans une ville donnée. L’interface doit être intuitive,
légère et accessible depuis un navigateur.
2.2. Objectifs du projet
- Afficher la météo actuelle d’une ville saisie par l’utilisateur.
- Consommer une API publique (OpenWeatherMap) pour obtenir les données météo
en temps réel.
- Offrir une interface responsive avec une interaction fluide.
- Appliquer les notions de base du HTML, CSS et JavaScript.
2
2.3. Fonctionnalités attendues
- Champ de saisie pour entrer le nom d’une ville.
- Bouton pour déclencher la recherche.
- Affichage des résultats : température, humidité, description du temps.
- Gestion des erreurs (ville non trouvée, problème de réseau, etc.).
2.4. Contraintes techniques
- Utilisation uniquement du HTML5, CSS3 et JavaScript.
- Consommation de l’API OpenWeatherMap en version gratuite.
- L'application doit fonctionner sur les principaux navigateurs modernes.
- Pas d’utilisation de frameworks lourds (React, Angular, etc.) pour garder le projet
simple.
2.5. Public cible
- Étudiants ou personnes souhaitant consulter rapidement la météo depuis un
navigateur web.
- Débutants en programmation souhaitant comprendre l’utilisation d’API avec
JavaScript.
2.6. Livrables
- Code source complet (HTML, CSS, JS).
- Fichier de documentation technique.
- Présentation PowerPoint (si demandée).
- Rapport de projet (la présente monographie).
3. ÉTUDE DE FAISABILITÉ
3.1. Faisabilité technique
3
Le projet repose sur des technologies web de base :
- HTML5 : pour structurer la page.
- CSS3 : pour la mise en forme.
- JavaScript : pour les interactions dynamiques.
- API OpenWeatherMap : pour accéder aux données météo en ligne.
Ces technologies sont libres d’accès, ne nécessitent aucun serveur complexe ni de base
de données locale. Le projet peut être développé sur n’importe quel ordinateur avec un
éditeur de texte et un navigateur.
3.2. Faisabilité financière
Le projet ne nécessite aucun investissement financier important :
- L’API météo est gratuite (avec clé API personnelle).
- Aucun achat de licence ou de logiciel.
- Outils de développement gratuits (Visual Studio Code, Chrome, Firefox, etc.).
3.3. Faisabilité humaine
Le projet est mené par un étudiant de première année, avec encadrement académique.
Les compétences exigées (HTML, CSS, JS de base) sont abordables et déjà vues en
cours.
3.4. Faisabilité temporelle
Durée estimée :
- Analyse & préparation : 7 jours
- Codage de la structure : 14 jours
- Intégration de l’API : 2 jours
- Tests & correction : 14 jours
- Rédaction du rapport : 14 jours
Soit environ 50 à 52 jours au total, compatible avec le calendrier académique.
4
4. ANALYSE FONCTIONNELLE
4.1. Entrées utilisateur
- Nom d’une ville saisie dans un champ texte.
4.2. Traitement
- Appel de l’API météo avec la ville.
- Récupération des données météo en JSON.
- Traitement de la réponse avec JavaScript.
4.3. Sorties
- Température (°C)
- Humidité (%)
- Description du temps (ex. : ciel dégagé)
- Message d’erreur si la ville n’existe pas.
5. CONCEPTION TECHNIQUE
- Fichier [Link] : structure du site.
- Fichier [Link] : mise en forme de l'interface.
- Fichier [Link] : logique JavaScript et appel API.
- Organisé selon une architecture simple MVC (Modèle-Vue-Contrôleur) :
- Modèle : données météo récupérées.
- Vue : interface HTML.
5
- Contrôleur : script JS gérant les interactions.
6. TECHNOLOGIES UTILISÉES
- HTML5 : balises sémantiques, formulaires.
- CSS3 : responsive design, boîte flexible.
- JavaScript Vanilla : manipulation DOM, fetch().
- API OpenWeatherMap : données météo en JSON.
- Outils : VS Code, Google Chrome, Git (facultatif).
7. PRÉSENTATION DU CODE
- HTML : zone de saisie, bouton, div d’affichage.
- CSS : styles simples, centrage, couleurs douces.
- JavaScript : fonction getWeather(), gestion d’erreurs, innerHTML pour afficher les
résultats.
- API Key à protéger en version publique.
8. INTERFACE UTILISATEUR (CAPTURES)
À insérer : capture de la page vide, de la recherche en cours, et de l’affichage de
résultats météo pour une ville comme "Kinshasa".
9. TESTS ET VALIDATION
- Tests avec villes valides (Paris, Kinshasa, Tokyo)
- Test avec ville inexistante (message d’erreur)
- Déconnexion réseau (test d’erreur d’API)
- Test sur différents navigateurs (Chrome, Firefox)
6
10. PROBLÈMES RENCONTRÉS
- Mauvaise écriture de l’URL de l’API (2.5 mal tapé)
- API Key oubliée ou expirée
- Encodage UTF-8 non respecté → caractères spéciaux
- Affichage non responsive au début
11. PERSPECTIVES D’AMÉLIORATION
- Ajouter des icônes météo selon le temps
- Ajouter la météo sur plusieurs jours (prévisions)
- Stocker l’historique des recherches
- Utiliser une géolocalisation automatique
- Créer une version mobile dédiée (PWA)
12. CONCLUSION
Ce projet a permis de mettre en pratique les notions de base du développement web
tout en intégrant une API tierce. L’objectif de concevoir une mini-application météo
fonctionnelle a été atteint avec succès. Ce travail a renforcé les compétences en
programmation, logique et structuration.
13. BIBLIOGRAPHIE
- OpenWeatherMap API Docs
- Mozilla Developer Network (MDN)
- W3Schools
- Cours internes FASI – UPC
- Stack Overflow (résolution de bugs)
7
