Talált időjárás Widget
A Widgets constructor – OpenWeatherMap weblapon nézelődve megtetszett ez a Widget:
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.
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:
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:
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
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.
Én is szívesen használom ezt az API-t: https://openweathermap.org/api
Nagyon jó példakódokat nyújt, amivel sokféleképpen ad lehetőségeket adatok lekérdezésére. A Maps collection a kedvencem.
A http://www.idokep.hu oldalán kifejezetten magyar településekre vonatkozó adatok weboldalba illesztéséhez elérhető néhány beépülő az https://www.idokep.hu/thirdparty oldalán. Például szmogtérkép, felhőkép, hőtérkép, UV térkép, széltérkép. Ezek többnyire animáltak. Ez az időkép doboz: