Időjárás Budapesten

Talált időjárás Widget

A Widgets constructor – OpenWeatherMap weblapon nézelődve megtetszett ez a Widget:

aktuális időjárás Budapest

Főleg az volt nagyon szimpatikus, hogy milyen egyszerűen beépíthető mindez egy webes/mobil felületre az alábbi JavaScript forráskóddal:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="openweathermap-widget-15"></div>
  window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];
  window.myWidgetParam.push({
    id: 15,
    cityid: '3054643',
    appid: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    units: 'metric',
    containerid: 'openweathermap-widget-15',
  });
  (function() {
    var script = document.createElement('script');
    script.async = true;
    script.charset = "utf-8";
    script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();

Mindössze egy regisztráció szükséges hozzá a Members OpenWeatherMap weboldalon a fenti forráskódba behelyettesítendő API kódért. Az egy sorba ömlesztve kapott forráskódot a Javascript Viewer, Beautifier and Formatter, Editor weblapon formáztam könnyen olvashatóvá.
 

Saját fejlesztés

Kedvet kaptam ezt a funkcionalitást összerakni úgy, hogy a hálózati kommunikációra helyeztem a hangsúlyt.
A nézet réteg ezért igen egyszerű, Java swing felületen, JFrame form-ként varázsolt az alábbiak szerint, mindössze JPanel és JLabel vizuális komponensekből áll. Egy JLabel osztályú komponens képes szöveg és/vagy kép megjelenítésére is.

aktuális időjárás Budapest
 

1. feladat

A modell rétegben tárolt település nevét és a szolgáltatás igénybevételéhez szükséges API kulcsot összerakva a Current weather data – OpenWeatherMap oldal specifikációját követve, megkapjuk az adatok lekérdezéséhez szükséges URL-t:

időjárás API URL
 

2. feladat

A hálózati kapcsolatot felépítve el kell kérni (GET) az URL-ről kapott JSON formátumú adatot és tárolni kell azt a modellben (jsonPuffer). A kivételkezelést nem részleteztem, mert most nem ezen van a hangsúly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  private void setJsonPuffer() {
    jsonPuffer=new StringBuilder();
    try {
      HttpURLConnection c=
       (HttpURLConnection)(new URL(API_URL_KEY)).openConnection();
      c.setRequestMethod("GET");
      c.connect();
      InputStream is=c.getInputStream();
      BufferedReader br=new BufferedReader(new InputStreamReader(is));
      String line;
      while((line=br.readLine())!=null)
        jsonPuffer.append(line+"\r\n");
      is.close();
      c.disconnect();
    }
    catch(MalformedURLException e) {
      System.out.println("Hiba: JSON URL...");
    }
    catch(ProtocolException e) {
      System.out.println("Hiba: http, https, ftp...");
    }
    catch(IOException e) {
      System.out.println("Hiba: JSON parser...");
    }
  }

 
A jsonPuffer objektum ezt tartalmazza:

IdojarasJSON

A könnyen átlátható formátumot a JSON FORMATTER & VALIDATOR weblapon állítottam elő.
 

3. feladat

A JSON-t fel kell dolgozni és a különböző adatokat formázni/konvertálni kell, alkalmazkodva a megjelenítés igényeihez (például hőmérséklet Celsius fokban egész számra kerekítve, szélsebesség egytizedes pontossággal, hónap neve angolul, szükségesek a megfelelő mértékegységek). Külön gondoskodni kell arról, hogy az aktuális időjárást szimbolizáló ikonhoz (képként külön letöltve) is hozzájussunk, mert az API csupán az útvonalát jelentő URL-ből csak a fájl nevét (azonosítóját) adja meg. A kivételkezelést itt sem fejtettem ki.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  private void jsonProcessing() {
    try {
      JSONObject json=new JSONObject(jsonPuffer.toString());
      name=json.getString("name"); //település
      country=json.getJSONObject("sys").getString("country"); //ország
      weatherDescription=json.getJSONArray("weather").
        getJSONObject(0).getString("description"); //leírás
      JSONObject main=json.getJSONObject("main");
      temp=(int)Math.round(main.getDouble("temp")-273.15); //hőmérséklet
      wind=Double.parseDouble(new DecimalFormat("#,#").format(
        json.getJSONObject("wind").getDouble("speed"))); //szélsebesség
      humidity=main.getInt("humidity"); //páratartalom
      pressure=main.getInt("pressure"); //légnyomás
      dateTime=new SimpleDateFormat("hh:mm MMM dd", Locale.ENGLISH).
        format(new Date(json.getLong("dt")*1000)); //dátum és idő
      URL weatherIconURL=new URL("http://openweathermap.org/img/w/"+
        json.getJSONArray("weather").getJSONObject(0).
        getString("icon")+".png"); //ikon      
      weatherIcon = ImageIO.read(weatherIconURL);
    }
    catch(JSONException e) {
      System.out.println("Hiba: JSON elemzése");
    }  
    catch(MalformedURLException e) {
      System.out.println("Hiba: icon URL...");
    }
    catch(IOException e) {
      System.out.println("Hiba: icon...");
    }
  }

 

4. feladat

Végül a modelltől elkért adatokkal frissíteni kell a nézetet.

1
2
3
4
5
6
7
8
9
10
11
  private void revalidateData() {
    lbNameCountry.setText(modell.getOWMNameCountry());
    lbWeatherDescription.setText(modell.getWeatherDescription());
    lbWeatherIdIcon.setText("");
    lbWeatherIdIcon.setIcon(new ImageIcon(modell.getWeatherIcon()));
    lbTemp.setText(modell.getOWMTemp());
    lbWind.setText(modell.getOWMWind());
    lbHumidity.setText(modell.getOWMHumidity());
    lbPressure.setText(modell.getOWMPressure());
    lbDateTime.setText(modell.getOWMDateTime());
  }

 

Az eredmény

IdojarasBudapest
 


IdojarasLondon
 
IdojarasHouston
 
IdojarasTokyo

Aki kedvet kapott, annak többféle API is rendelkezésére áll, dokumentációval és példákkal együtt a https://openweathermap.org/api weboldalon. Kísérletezni bátran szabad, illetve érdemes megnézni és értelmezni azokat az adatokat, amiket JSON formátumban visszakapunk, de ehhez a feladathoz nem volt rájuk szükség.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A feladat a Java EE szoftverfejlesztő tanfolyam 9-12. óra: XML feldolgozás és 13-16. óra: JSON feldolgozás alkalmaihoz kapcsolódik.

Szólj hozzá!