Widget Meteo
Presentation
Objectif principal : Un widget meteo embeddable sur n'importe quel site. Il affiche la meteo actuelle et les previsions sur 5 jours, avec geolocalisation ou recherche de ville.
Technologies utilisees : JavaScript vanilla encapsule dans un Web Component. OpenWeatherMap API pour les donnees. CSS custom properties pour permettre le theming.
Fonctionnalites cles : Geolocalisation automatique, recherche de ville, meteo actuelle (temp, humidite, vent), previsions 5 jours, icones animees, theme clair/sombre.
Livrables attendus : Un script JS a inclure + un custom element
Calendrier previsionnel : Une semaine. L'API OpenWeatherMap est bien documentee, le plus long c'est les icones animees.
Parties prenantes & criteres de succes : Projet perso pour apprendre les Web Components. Je voulais un widget que je pourrais reutiliser partout.
Le Defi
Faire un composant vraiment encapsule. Le CSS ne doit pas leaker vers le parent et vice versa. Et il faut gerer le cas ou l'utilisateur refuse la geolocalisation sans casser le widget.
La Solution
Shadow DOM pour l'encapsulation CSS complete. Pour la geoloc, je fallback sur une ville par defaut (Paris) avec un message pour rechercher sa ville. L'API key est passee en attribut du custom element.
Architecture Technique
Classe WeatherWidget extends HTMLElement. connectedCallback qui init le shadow DOM et fetch les donnees. Methodes privees pour le rendu (renderCurrent, renderForecast). Attributs observes : api-key, city, units (metric/imperial). CSS variables pour le theming externe.
Points Cles
- Web Component standard
- Shadow DOM encapsule
- Theming via CSS variables
Apercu
Resultats & Apprentissages
Le widget est sur mon portfolio et sur quelques projets perso. Les Web Components c'est puissant et sous-utilise. Le Shadow DOM resout vraiment les problemes de CSS global. J'utiliserai plus souvent cette techno.
Evolutions Futures
Alertes meteo (tempetes, canicule). Graphique de temperature sur la semaine. Cache des donnees pour limiter les appels API. Version npm pour faciliter l'installation.