Afficher la météo avec P5.js

Bonjour,

La bibliothèque P5.js  est très sympa, et j’en profite pour vous montrer une application météo.

Pour la mettre en oeuvre il vous faudra vour inscrire sur Open Weather Map pour récupérer votre clé d’API.

En effet, cette API est gratuite, mais il est nécessaire de s’inscrire pour l’utiliser. Et votre identification se fait via la clé d’API.

Voici à quoi doit ressembler votre page HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>P5 weather</title>
    </head>

    <body>
        <p>
            City : <input type="text" id="city" value="London"/><br/>
            <button id="submit">Submit</button>
        </p>
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
        <script src="weather_api.js"></script>
    </body>
</html>

 

Le script qu’il faut mettre en oeuvre pour faire fonctionner notre application est weather_api.js dont voici le code :

var api = "http://api.openweathermap.org/data/2.5/weather?";
var apiKey = "votre clé";
var units = "metric";

var weather;
var input;

function setup() {
    createCanvas(400,200);
    var button = select('#submit');
    button.mousePressed(weatherAsk);
    input = select('#city');
}

function weatherAsk() {
    var city = input.value();
    var urlApi = api + "q=" + city + "&APPID=" + apiKey + "&units=" + units;
    console.log("URLApi : ", urlApi);
    console.log("API key : ", apiKey);
    loadJSON(urlApi, gotData);
}

function gotData(data) {
    weather = data;
    createElement("h1", weather.name);
    createP("Temp. : " + weather.main.temp);
    createP("Humidity. : " + weather.main.humidity);
    createP("Pressure. : " + weather.main.pressure);
}

function draw() {
    // -
}

SMARTFUL

Publié dans JS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *