Svelte: Une application météo avec Svelte

Dans ce nouvel article, je vous propose de découvrir une mini application originale : une Application Météo développée avec Svelte. Cette application affiche les conditions météo actuelles pour une ville donnée et selon Mansoor, l’application météo permet de basculer facilement entre les unités de température.[1] Inspirée de son exemple publié sur DEV Community[1], cette application démontre la puissance de Svelte pour créer des interfaces réactives et concises. La documentation Svelte présente un tutoriel détaillé sur la création de composants réactifs.[2]

Fonctionnalités

• Affichage de la météo actuelle pour une ville (par défaut « Paris » dans l'exemple).
• Basculement des unités de température (Celsius / Fahrenheit).
• Gestion des erreurs lors du chargement des données.

Code de l'application

Le composant ci-dessous illustre la logique principale de l'application. Il utilise la fonction onMount pour récupérer les données météo via l'API OpenWeatherMap dès le chargement du composant. Le bouton permet de changer d'unité de température et de rafraîchir les données.

<script>
  import { onMount } from 'svelte';

  let weather = null;
  let city = 'Paris';
  let unit = 'metric'; 
  let error = '';

  async function fetchWeather() {
    error = '';
    try {
      const apiKey = 'VOTRE_API_KEY'; // Remplacez par votre clé OpenWeatherMap
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=${unit}&appid=${apiKey}`);
      if (!response.ok) throw new Error('Erreur lors du chargement des données météo');
      weather = await response.json();
    } catch (err) {
      error = err.message;
      weather = null;
    }
  }

  onMount(fetchWeather);

  function toggleUnit() {
    unit = unit === 'metric' ? 'imperial' : 'metric';
    fetchWeather();
  }
</script>

<main>
  <h1>Météo actuelle pour {city}</h1>
  <button on:click={toggleUnit}>
    Afficher en {unit === 'metric' ? 'Fahrenheit' : 'Celsius'}
  </button>

  {#if error}
    <p class="error">{error}</p>
  {:else if weather}
    <p>Température : {weather.main.temp}° {unit === 'metric' ? 'C' : 'F'}</p>
    <p>Conditions : {weather.weather[0].description}</p>
    <p>Humidité : {weather.main.humidity}%</p>
  {:else}
    <p>Chargement...</p>
  {/if}
</main>

<style>
  main {
    max-width: 600px;
    margin: 0 auto;
    padding: 1em;
    font-family: Arial, sans-serif;
    text-align: center;
  }
  button {
    padding: 0.5em 1em;
    background-color: #ff3e00;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1em;
  }
  .error {
    color: red;
  }
</style>

Explications

Dans ce composant Svelte :

• La fonction fetchWeather() récupère les données météo depuis l'API d'OpenWeatherMap pour la ville spécifiée et dans l'unité choisie.
• La directive onMount permet de lancer cette récupération dès l'initialisation du composant.
• Le bouton déclenche la fonction toggleUnit() qui bascule l'unité de température et relance la récupération des données.
• La structure conditionnelle {#if} affiche soit les informations météo, soit un message d'erreur ou un indicateur de chargement.

Réflexions personnelles

Cette application météo démontre à quel point Svelte permet de construire rapidement des applications web réactives. Je trouve cette approche idéale pour des projets nécessitant la simplicité.

Références

[1]: MANSOOR, Syed Ali, « Weather app built with Svelte on Vite » [billet], dans Dev Community, 10 mai 2022, https://dev.to/alimansoorcreate/weather-app-built-with-sveltets-2mjl

[2]: SVELTE DOCUMENTATION, « Tutoriel officiel Svelte » [page Web], Récupéré le 28 février 2025, de https://svelte.dev/tutorial

N’hésitez pas à laisser vos commentaires.

À bientôt,

Walid Gharbi