Ma première application Météo

Création d'une application météo simple avec intégration API

Alors que je continue d'apprendre et d'améliorer mes compétences en codage, j'ai décidé de créer une application météo de base à l'aide d'une API pour obtenir des données en temps réel. Ce projet m'a aidé à comprendre comment interagir avec les API, gérer les opérations asynchrones et mettre à jour dynamiquement l'interface utilisateur. Dans ce blog, je vais vous expliquer le code que j'ai utilisé pour créer l'application.

---

Aperçu du projet

L'application météo récupère les données météorologiques pour un emplacement donné et affiche la météo actuelle et des prévisions sur 3 jours. Il utilise WeatherAPI pour collecter des données et JavaScript gère la fonctionnalité.

---

Fonctionnalités clés

1. Recherche d'emplacement : les utilisateurs peuvent saisir le nom d'une ville pour obtenir des données météorologiques.

2. Météo actuelle : affichez la température actuelle, les conditions météorologiques et bien plus encore.

3. Prévisions : afficher les prévisions météorologiques pour les 3 prochains jours.

Jetons un coup d'œil aux éléments clés du code qui font fonctionner cette application.

---

1. Récupération de données météorologiques à l'aide d'une API

La première étape consiste à récupérer les données météorologiques de WeatherAPI. Voici comment j'ai configuré la fonction pour gérer l'appel API :

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

Cette fonction utilise fetch() pour faire une requête asynchrone à WeatherAPI. Il récupère la météo actuelle et une prévision sur 3 jours, puis transmet ces données aux fonctions displayCurrent() et displayForecast().

---

1. Gestion des entrées utilisateur

L'application écoute les entrées de l'utilisateur via le champ de recherche. Lorsque l'utilisateur saisit un lieu (par exemple "Londres"), cela déclenche la recherche météo :

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

De plus, j'ai ajouté un bouton pour déclencher la recherche lorsqu'on clique dessus :

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

Cela permet à l'utilisateur de taper dans le champ de recherche ou de cliquer sur le bouton de recherche pour récupérer des données météorologiques.

---

1. Affichage de la météo actuelle

Une fois les données récupérées, la fonction displayCurrent() se charge d'afficher les détails météorologiques actuels sur la page. Voici comment cela fonctionne :

fonction displayCurrent(emplacement, currentWeather) {
    si (météoactuelle) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        laissez cardHTML = `
            <div>



<p>Cette fonction génère une carte affichant la température actuelle, les conditions météorologiques et des détails supplémentaires tels que la vitesse du vent et l'humidité. Il met à jour dynamiquement la page en insérant le HTML généré dans le DOM.</p>


<hr>

<ol>
<li>Affichage des prévisions sur 3 jours</li>
</ol>

<p>Ensuite, j'affiche les prévisions météo pour les trois prochains jours. Ceci est géré par la fonction displayForecast() :<br>
</p><pre class="brush:php;toolbar:false">fonction displayForecast(forecastData) {
    laissez prévisionHTML = '';
    pour (soit i = 1; i < ForecastData.length; i ) {
        prévisionHTML = `
            <div>



<p>Cette fonction parcourt les données de prévision et génère des cartes pour chacun des deux prochains jours, affichant les températures maximales et minimales, les conditions météorologiques et les icônes.</p>


<hr>

<p>Conclusion</p>

<p>Créer cette application météo a été un excellent exercice pour moi car j'ai appris à interagir avec les API, à traiter les données JSON et à mettre à jour dynamiquement une page Web. Le projet m'a aidé à consolider mes connaissances en JavaScript asynchrone, en manipulation DOM et en gestion d'événements.</p>

<p>Si vous débutez avec JavaScript et les API, cette application météo est un moyen simple mais puissant de mettre en pratique vos compétences. Vous pouvez étendre ce projet en ajoutant plus de fonctionnalités comme la gestion des erreurs, des prévisions plus détaillées ou même un mode sombre pour l'interface utilisateur.</p>


<hr>

<p>N'hésitez pas à essayer le code et à l'adapter à vos besoins. Faites-moi savoir si vous avez des questions ou des suggestions !</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!