KIMMO YLI-ROHDAINEN Sääaseman selainkäyttöliittymä

KIMMO YLI-ROHDAINEN Sääaseman selainkäyttöliittymä Kandidaatintyö Tarkastaja: Mikko Salmenperä

II TIIVISTELMÄ TAMPEREEN TEKNILLINEN YLIOPISTO Automaatiotekniikan koulutusohjelma KIMMO YLI-ROHDAINEN: Sääaseman selainkäyttöliittymä Kandidaatintyö, 20 sivua Helmikuu 2011 Pääaine: Automaation tietotekniikka Tarkastaja: Mikko Salmenperä Avainsanat: sääasema, käyttöliittymä, HTML5, AJAX Tampereen Teknillisen Yliopiston systeemitekniikan laitoksella on Vaisala Rosa - sääasema mittaamassa lämpötilaa, tuulen nopeutta ja suuntaa, sademäärää sekä ilmankosteutta. Tässä kandidaatintyössä kehitetään sääasemaa varten uusi dynaaminen selainkäyttöliittymä, joka mahdollistaa sääaseman mittaustulosten tarkkailun. Työssä käytettäviä toteutustekniikoita ovat muun muassa Java, AJAX-tekniikat, HTML5 ja JavaScript. Työssä määritellään ensin vaatimukset toteutettavan selainkäyttöliittymän ulkonäölle ja toiminnallisuudelle. Seuraavaksi esitellään suunnitelma sovelluksen arkkitehtuurille, rakenteelle ja toiminnalle. Viimeiseksi kuvataan toteutuksen keskeiset ratkaisut ja tutustutaan lyhyesti toteutuksessa käytettyyn kehitteillä olevaan HTML5-spesifikaatioon.

III SISÄLLYS 1. Johdanto..................................... 1 2. Vaatimusmäärittely............................... 3 2.1 Käyttötapaukset.............................. 3 2.1.1 KT1: Uusimpien mittausten hakeminen............... 4 2.1.2 KT2: Kuvaajien näyttämän aikavälin vaihtaminen......... 4 2.1.3 KT3: Kuvaajan suurentaminen.................... 4 2.1.4 KT4: Kuvaajan tallentaminen.................... 5 2.2 Käyttöliittymä............................... 5 3. Suunnittelu.................................... 7 3.1 Sovellusarkkitehtuuri............................ 7 3.2 Rakenne................................... 8 3.3 Toiminta.................................. 10 4. Toteutus..................................... 12 4.1 Kehitysympäristö.............................. 12 4.2 Toteutuksen keskeiset ratkaisut...................... 12 4.3 HTML5................................... 14 5. Yhteenveto.................................... 17 Lähteet....................................... 19

IV TERMIT JA LYHENTEET Termi Selitys AJAX Asynchronous JavaScript And XML. Kokelma tekniikoita, joiden avulla luodaan vuorovaikutteisia websovelluksia. Apache Tomcat Java Servlet ja JavaServer Pages tekniikoita käyttävä palvelin. API Application Programming Interface. Ohjelmointirajapinta. DAO Data Access Object. Ohjelmiston olio, joka toteuttaa tiedon hakemisen tietokannasta. GPS Global Positioning System. Satelliittipaikannusjärjestelmä. Hibernate ORM-kirjasto Java-ohjelmointikielelle. HTML Hyper Text Markup Language. Websivujen kuvauskieli. HTML5 HTML:n uusin spesifikaatio [13]. HTTP Hypertext Transfer Protocol. Selaimien ja WWWpalvelimien käyttämä tiedonsiirtoprotokolla. Java Ohjelmointikieli ja ohjelmistoalusta. JavaScript Selaimessa ajettava ohjelmointikieli. JSON JavaScript Object Notation. Kevyt tekstipohjainen tiedonsiirtomuoto [5]. JSP JavaServer Pages, staattista ja dynaamista sisältöä HTTP-vastaukseen yhdistelevä tekniikka [6]. MySQL Tietokannan hallintajärjestelmä. ORM Object Relational Mapping. Olio-relaatio mallinnus. PNG Portable Network Graphics. Häviötön bittikarttagrafiikan tallennusformaatti. RGraph JavaScript-kirjasto kuvaajien piirtämiseen HTML5:n canvas-elementille. servletti Java Servlet, HTTP-vastaukseen dynaamista sisältöä tuottava Java-luokka [9]. UML Unified Modeling Language. Standardi graafinen mallinnuskieli ohjelmistokehitykseen. W3C World Wide Web Consortium. W3C kehittää webin teknologioita. WHATWG Web Hypertext Application Technology Working Group. Keskittyy HTML-standardin kehittämiseen.

1 1. JOHDANTO Tampereen Teknillisen Yliopiston systeemitekniikan laitoksella on tutkimusprojektissa (Vaisala Rosa -sääaseman etäkäyttö Telit GE863-GPS moduulin avulla) toteutettu sääpalvelu www-sovelluksena. Työssä käytettiin Vaisala Rosa -sääasemaa, jolla voidaan mitata lämpötilaa, tuulen nopeutta ja suuntaa, sademäärää sekä ilmankosteutta. Lisäksi sääasemassa on GPS-anturi (Global Positioning System), jolta saadaan sääaseman sijainnin koordinaatit. Sovellus tallentaa sääasemalta saamansa mittaustulokset MySQL-tietokantaan. Sovelluksen selainkäyttöliittymä näyttää uusimman mittauksen lisäksi historiakuvaajat edellisten 24 tunnin ja viikon ajalta. [10] Tämän kandidaatintyön tarkoituksena on määritellä, suunnitella ja toteuttaa tälle sääasemalle uusi ja parempi selainpohjainen käyttöliittymä. Mittaustulosten hakemista ja tallentamista ei ole tarkoitus muuttaa, vaan uuden käyttöliittymän tulee hakea mittaustulokset olemassa olevan järjestelmän tietokannasta. Koska nykyinen käyttöliittymä näyttää uusimman mittauksen lisäksi historiakuvaajat vain edellisten 24 tunnin ja viikon ajalta, tulee toteutettavan käyttöliittymän mahdollistaa mittaustulosten tarkastelu myös pidemmiltä ajanjaksoilta. Työn tavoitteena on myös tehdä uudesta käyttöliittymästä dynaamisempi lisäämällä interaktiota. Tärkeimpiä toteutettavia ominaisuuksia ovat kuvaajien suurentaminen, kuvaajien tallentaminen ja kuvaajan esittämän aikavälin valinta. Lisäksi käyttöliittymään lisätään sääaseman sijainnin näyttävä kartta. Käyttöliittymä on tarkoitus toteuttaa niin, että sitä ei ensimmäisen latauskerran jälkeen tarvitse ladata enää uudelleen selaimeen, vaan vain mittaustuloksia ladataan sovelluksen palvelimelta ja ne päivitetään näkyviin käyttöliittymään. Tämä onnistuu, kun totetuksessa käytetään AJAX-tekniikoita (Asynchronous JavaScript And XML). Näin saadaan palvelimen rasitusta vähennettyä ja siten pystytään palvelemaan suurempaa käyttäjäjoukkoa. Työn tavoitteena on myös tutustua HTML5:n (HyperText Markup Language) tarjoamiin uusiin ominaisuuksiin ja käyttää osaa niistä käyttöliittymän toteutuksessa. HTML on standardoitu kuvauskieli, jota käytetään erityisesti webbisivujen kuvaukseen. HTML5 on seuraava versio standardista ja se on vielä keskeneräinen. [13] Tämän dokumentin luvussa 2 esitetään vaatimukset toteutettavalle sovelluksel-

1. Johdanto 2 le. Seuraavaksi luvussa 3 esitellään suunnitelma sovelluksen arkkitehtuurille, rakenteelle ja toiminnallisuudelle. Suunnitelman kuvaamiseen käytetään UML:n (Unified Modeling Language) mukaisia kaavioita. UML on graafinen mallinnuskieli, joka on tarkoitettu käytettäväksi ohjelmistokehityksessä. Tämän jälkeen luvussa 4 kuvataan sovelluksen toteuttamiseen käytetyt työkalut ja keskeiset ratkaisut. Lisäksi tässä luvussa tutustutaan HTML5-standardiin. Lopuksi tehdään yhteenveto toteutetusta sovelluksesta luvussa 5.

3 2. VAATIMUSMÄÄRITTELY Tässä luvussa esitellään toteutettavalle sovellukselle asetettavat vaatimukset. Sovelluksen toimintoja kuvataan käyttötapauksilla luvussa 2.1. Sovelluksen käyttöliittymää käsitellään luvussa 2.2. 2.1 Käyttötapaukset Sovelluksen toiminnot kuvataan käyttötapauksilla. Kaikki käyttötapaukset on esitetty UML:n mukaisessa käyttötapauskaaviossa kuvassa 2.1. Kuva 2.1: Sovelluksen käyttötapauskaavio.

2. Vaatimusmäärittely 4 2.1.1 KT1: Uusimpien mittausten hakeminen Suorittajat: Käyttäjä Esiehdot: Sääaseman käyttöliittymä on onnistuneesti latautunut käyttäjän selaimeen. Kuvaus: Käyttäjä painaa Update -nappia. Näkyviin päivittyvät uusimmat mittaustulokset. Uusimmat mittaustulokset haetaan myös automaattisesti 5 minuutin välein. Poikkeukset: Jos mittaustuloksien hakeminen palvelimelta epäonnistuu, ilmoitetaan virheestä käyttäjälle viestilaatikolla. Lopputulos: Näkyvissä ovat uusimmat mittaustulokset. 2.1.2 KT2: Kuvaajien näyttämän aikavälin vaihtaminen Suorittajat: Käyttäjä Esiehdot: Sääaseman käyttöliittymä on onnistuneesti latautunut käyttäjän selaimeen. Kuvaus: Käyttäjä painaa haluamaansa aikaväliä vastaavaa nappia. Aikavälivaihtoehdot ovat vuorokausi, viikko, kuukausi ja vuosi. Kaikki kuvaajat päivittyvät näyttämään mittauksia valitulta aikaväliltä. Poikkeukset: Jos mittaustuloksien hakeminen palvelimelta epäonnistuu, ilmoitetaan virheestä käyttäjälle viestilaatikolla. Lopputulos: Kaikki kuvaajat näyttävät mittauksia valitulta aikaväliltä. 2.1.3 KT3: Kuvaajan suurentaminen Suorittajat: Käyttäjä Esiehdot: Sääaseman käyttöliittymä on onnistuneesti latautunut käyttäjän selaimeen. Kuvaus: Käyttäjä avaa kuvaajan kontekstivalikon. Tämä tehdään eri selaimissa eri tavoin, yleensä hiiren vasemmalla tai oikealla napilla. Käyttäjä valitsee kontekstivalikosta toiminnon Zoom. Valittu kuvaaja tulee näkyviin suurennettuna. Kun käyttäjä painaa hiiren nappia uudelleen, kuvaaja palautuu alkuperäisen kokoiseksi. Poikkeukset: - Lopputulos: Kuvaajan suurentamisen ja pienentämisen jälkeen näkymä on samanlainen kuin ennen toiminnon suorittamista.

2. Vaatimusmäärittely 5 2.1.4 KT4: Kuvaajan tallentaminen Suorittajat: Käyttäjä Esiehdot: Sääaseman käyttöliittymä on onnistuneesti latautunut käyttäjän selaimeen. Kuvaus: Käyttäjä avaa kuvaajan kontekstivalikon. Tämä tehdään eri selaimissa eri tavoin, yleensä hiiren vasemmalla tai oikealla napilla. Käyttäjä valitsee kontekstivalikosta toiminnon Get PNG. PNG-muotoinen (Portable Network Graphics) kuva valitusta kuvaajasta voidaan tallentaa käyttäjän valitsemaan tiedostoon. Poikkeukset: - Lopputulos: Valittu kuvaaja on tallennettu käyttäjän tietokoneelle PNGmuodossa. 2.2 Käyttöliittymä Sovelluksen käyttöliittymä on selainpohjainen ja siinä on yksi näkymä. Käyttöliittymä toteutetaan käyttäen hyödyksi AJAX-tekniikoita, jotka mahdollistavat käyttöliittymän osien päivittämisen lataamatta koko sivua uudelleen. Tätä hyödynnetään kuvaajien ja mittaustulosten päivittämisessä. Käyttöliittymän hahmotelma on esitetty kuvassa 2.2. Käyttöliittymän yläosan vasemmassa laidassa on esitettynä kaikkien mitattavien suureiden viimeisimmät mittausarvot sekä mittauksien suoritusaika. Näiden alapuolella on nappi, jolla voidaan hakea uusimmat mittaustulokset palvelimelta. Tämä toiminto on kuvattu käyttötapauksessa KT1 luvussa 2.1.1. Uudet mittaustulokset haetaan myös automaattisesti 5 minuutin välein. Käyttöliittymän yläosan oikeassa laidassa on kartta. Kartalle on merkitty sääaseman sijainti. Kartan näyttämää aluetta voidaan siirtää, tarkentaa ja loitontaa vapaasti, jolloin kartta päivittyy dynaamisesti eikä koko sivua tarvitse ladata uudelleen. Käyttöliittymän alaosassa ovat ensin napit, joilla voidaan valita kuvaajien näyttämä aikaväli. Kuvaajien näyttämän aikavälin vaihtaminen on kuvattu käyttötapauksessa KT2 luvussa 2.1.2. Myös kuvaajien päivittyminen tapahtuu dynaamisesti, eikä koko sivua tarvitse ladata uudelleen. Näiden nappien alapuolella ovat mittausten historiatietoja esittävät kuvaajat. Jokaiselle mitattavalle suurelle on oma kuvaajansa. Kuvaajaa voidaan suurentaa tai se voidaan tallentaa käyttäjän tietokoneelle. Nämä toiminnot on kuvattu käyttötapauksissa KT3 ja KT4 luvuissa 2.1.3 ja 2.1.4.

2. Vaatimusmäärittely 6 Kuva 2.2: Sovelluksen käyttöliittymähahmotelma.

7 3. SUUNNITTELU Tässä luvussa esitetään suunnitelma sovelluksen toteuttamiseksi. Järjestelmän rakenteen ja toiminnan havainnollistamiseen käytetään UML:n mukaisia kaavioita, kuten sijoittelukaaviota, luokkakaaviota ja tapahtumasekvenssikaavioita. Ensin kuvataan järjestelmän arkkitehtuuri korkealla tasolla luvussa 3.1. Sitten kuvataan järjestelmän rakenne tarkemmin luvussa 3.2. Lopuksi kuvataan järjestelmän toimintaa luvussa 3.3. 3.1 Sovellusarkkitehtuuri Järjestelmä käyttää asiakas-palvelin -arkkitehtuuria. Palvelimen vastuulla on tarvittavien mittaustulosten noutaminen tietokannasta, niiden käsittely ja lähettäminen asiakkaalle. Asiakkaan vastuulla on käyttöliittymän esittäminen, mittaustulosten pyytäminen palvelimelta ja niiden esittäminen käyttäjälle. Käyttöliittymä ja sen toiminnot on kuvattu vaatimusmäärittelyssä luvussa 2. Järjestelmän komponenttien sijoittelu eri laitteille on esitetty järjestelmän sijoittelukaaviossa kuvassa 3.1. Käyttöliittymä toimii asiakaskoneen selaimessa. Tietokanta ja mittaustulosten käsittelystä vastaavat komponentit toimivat palvelinkoneella. Kuva 3.1: Järjestelmän sijoittelukaavio. Järjestelmän palvelin on kerrosarkkitehtuurin mukainen. Kerrosarkkitehtuurissa

3. Suunnittelu 8 järjestelmän komponentit sijoitellaan eri kerroksille niiden abstraktiotason mukaan. Ylemmän kerroksen komponentit käyttävät alempien kerrosten alemman abstraktiotason komponentteja omien toimintojensa toteuttamiseen. Kerrosarkkitehtuuri jakaa järjestelmän pienempiin osiin, jotka ovat siten helpommin hallittavia. Kerrosarkkitehtuuri myös rajoittaa komponenttien välisiä riippuvuuksia. [4] Tässä järjestelmässä palvelimen rakenne koostuu kolmesta kerroksesta, jotka ovat ylhäältä alas lueteltuina palvelukerros, tiedonhakukerros ja mallikerros. Kerroksien tarkoitus ja rakenne on kuvattu tarkemmin luvussa 3.2. Järjestelmän tietokanta sijaitsee myös palvelimella. 3.2 Rakenne Palvelimen rakenne on kerrosarkkitehtuurin mukainen ja se on esitetty luokkakaaviossa kuvassa 3.2. Kerrokset ovat ylhäältä alas lueteltuina palvelukerros, tiedonhakukerros ja mallikerros. Seuraavaksi käsitellään kaikkien kerrosten tarkoitus ja rakenne aloittaen alimmalta abstraktiotasolta. Alin kerros on mallikerros. Se pitää sisällään mittauksiin liittyvän kohdealueen mallin. Siihen kuuluvat Weather-, Measurement-, ja MeasurementType-luokat. Weather-luokka kuvaa yhteen mittausjoukkoon liittyvät tiedot kuten aika, paikka ja siihen kuuluvat mittaukset. Measurement-luokka kuvaa yhteen mittaukseen liittyvät tiedot kuten mittausarvon ja mittaustyypin. MeasurementType-luokka kuvaa mittaustyypin ja siihen liittyvän suureen ja yksikön. Kaikki luokat ovat käytettävän tietokantaskeeman mukaisia ja jokaista luokkaa vastaa tietokannassa yksi taulu. Luokat ovat vain tiedon tallentamista varten, eikä niillä ole mitään toiminnallisuutta. Keskimmäinen kerros on tiedonhakukerros. Se vastaa tiedon hakemisesta tietokannasta. Tämän toiminnallisuuden toteuttaa WeatherDao-luokka (Data Access Object), joka on kerroksen ainoa luokka. Tällä luokalla on metodit mittaustyyppien hakemiseen, uusimpien mittausten hakemiseen ja mittausten hakemiseen halutulta aikaväliltä. Tämän kerroksen tarkoituksena on olla ainoa tietokantaa käsittelevä kerros, jolloin muut kerrokset eivät ole riippuvaisia tietokannasta. Tällöin tietokantaa käsittelevä koodi on keskitetty yhteen paikkaan, jolloin tämä koodi ja muutokset siihen ovat helpommin hallittavissa. Ylin kerros on palvelukerros. Se tarjoaa asiakaskomponentin vaatimat palvelut. WeatherNowService- ja WeatherHistoryService-luokat tuottavat nämä palvelut. WeatherNowService-luokka tarjoaa palvelun, jolta asiakas voi pyytää uusimmat mittaustulokset. WeatherHistoryService-luokka tarjoaa palvelun, jolta asiakas voi pyytää mittaustuloksia tietyltä aikaväliltä. Mahdollisia aikavälejä ovat vuorokausi, viikko, kuukausi ja vuosi. Lisäksi kerrokseen kuuluu Serializer-luokka, joka vastaa olioiden serialisoinnista. Oliot on serialisoitava, jotta ne voidaan lähettää teks-

3. Suunnittelu 9 Kuva 3.2: Palvelinohjelmiston luokkakaavio. timuodossa verkon yli asiakkaalle. WeatherNowService- ja WeatherHistoryServiceluokat käyttävät tiedonhakukerrosta mittausten hakemiseen ja Serializer-luokkaa niiden serialisointiin. Lisäksi WeatherHistoryService-luokka tekee keskiarvojen laskentaa mittauksilla, jotta verkon yli lähetettävien mittaustulosten määrää voidaan rajoittaa. Muuten mittausten lähettäminen olisi hidasta, kun haettaisiin mittauksia esimerkiksi vuoden ajalta. Asiakas koostuu kolmesta komponentista. Karttakomponentti vastaa käyttöliittymän kartan lataamisesta, alustamisesta ja toiminnasta. Grafiikkakomponentti vastaa käyttöliittymän kuvaajien piirtämisestä ja päivittämisestä. Yhteyskomponentti vastaa mittaustulosten hakemisesta palvelimelta ja niiden käsittelystä. Yhteyskomponentti pyytää mittaustulokset palvelimen tarjoamilta WeatherNowService- ja

3. Suunnittelu 10 WeatherHistoryService-palveluilta HTTP-pyyntöinä (HyperText Transfer Protocol). Kuvaajien päivittämiseen yhteyskomponentti käyttää grafiikkakomponenttia. 3.3 Toiminta Palvelimen tärkeimpiä toimintoja ovat uusimpien mittaustulosten hakeminen ja mittaustulosten hakeminen joltain aikaväliltä. Näihin toimintoihin liittyvien tapahtumien kulku on kuvattu tapahtumasekvenssikaavioilla kuvissa 3.3 ja 3.4. Kuva 3.3: Uusimpien mittaustulosten hakeminen palvelimelta. Uusimpien mittaustulosten hakeminen on kuvattu tapahtumasekvenssikaaviolla kuvassa 3.3. Tapahtuma alkaa siitä, kun asiakkaan yhteyskomponentti lähettää HTTP-pyynnön palvelimelle. WeatherNowService-luokka käsittelee pyynnön hakemalla ensin uusimmat mittaukset tietokannasta käyttäen WeatherDao-luokkaa. Seuraavaksi saatu vastaus serialisoidaan Serializer-luokan avulla tekstimuotoon. Sitten serialisoitu vastaus lähetetään asiakkaalle HTTP-vastauksena. Lopuksi asiakkaan yhteyskomponentti päivittää uudet mittaukset näkyviin käyttöliittymään. Tietyn aikavälin mittaustulosten hakeminen on kuvattu tapahtumasekvenssikaaviolla kuvassa 3.4. Tapahtuma alkaa siitä, kun asiakkaan yhteyskomponentti lähettää HTTP-pyynnön palvelimelle. WeatherHistoryService-luokka käsittelee pyynnön hakemalla ensin aikavälin mittaukset tietokannasta käyttäen WeatherDao-luokkaa. Jos mittauksia on liikaa kerralla lähetettäväksi, niin mittauksista lasketaan keskiarvoja lyhyemmiltä aikaväleiltä. Näin saadaan rajoitettua lähetettävien mittausten lukumäärää. Seuraavaksi saadut mittaustulokset serialisoidaan Serializer-luokan avul-

3. Suunnittelu 11 Kuva 3.4: Tietyn aikavälin mittaustulosten hakeminen palvelimelta. la tekstimuotoon. Sitten serialisoidut mittaustulokset lähetetään asiakkaalle HTTPvastauksena. Lopuksi asiakkaan yhteyskomponentti ja grafiikkakomponentti päivittävät uudet mittaukset näkyviin käyttöliittymän kuvaajiin.

12 4. TOTEUTUS Tässä luvussa kuvataan sovelluksen toteutus. Ensin esitellään työssä käytetty kehitysymparistö luvussa 4.1. Seuraavaksi esitellään työn toteutuksessa käytetyt keskeiset ratkaisut ja kirjastot luvussa 4.2. Lopuksi tutustutaan vielä tarkemmin käyttöliittymän toteutuksessa käytettyyn HTML5:een luvussa 4.3. 4.1 Kehitysympäristö Sovelluksen palvelinohjelmisto toteutettiin Java-ohjelmistoalustalle. Javaan kuuluu itse ohjelmointikielen lisäksi laajat luokkakirjastot ja virtuaalikone, jossa ohjelmat ajetaan. Sovelluksen kehitykseen käytettiin avoimen lähdekoodin Eclipse Helios (3.6) -kehitysympäristöä, joka sisältää koodieditorin, kääntäjän ja debuggerin. Eclipse on laajennettavissa lisäosilla, joita onkin saatavilla suuri määrä. Tässä työssä käytettiin Eclipse Web Tools Platform -lisäosaa helpottamaan sovelluksen kehittämistä. Sovelluksen käyttöliittymä toteutettiin HTML5-kuvauskielellä ja selaimessa ajettavalla JavaScript-ohjelmointikielellä. HTML5 on esitelty tarkemmin luvussa 4.3. Myös käyttöliittymän kehittämiseen käytettiin jo mainittua Eclipse-kehitysympäristöä ja erityisesti sen Web Tools Platform -lisäosaa. Käyttöliittymän testaamiseen käytettiin Mozilla Firefox -selainta ja sen Firebug-lisäosaa, joka mahdollisti suoritettavan JavaScript-koodin debuggaamisen. Palvelinohjelmistoa ajetaan Apache Tomcat 6 -palvelimessa, joka tukee Javan servlettejä ja JSP-teknologiaa (JavaServer Pages). Servletti on Java-luokka, joka käsittelee HTTP-pyyntöjä ja tuottaa HTTP-vastauksen dynaamisesti [9]. JSP-teknologia on menetelmä HTML-sivun tuottamiseen yhdistelemällä staattista sisältöä ja dynaamisesti Java-koodilla tuotettua sisältöä [6]. Ohjelmistoa voidaan ajaa ja debugata Tomcat-palvelimessa suoraan Eclipse-kehitysympäristön avulla. Jo olemassa oleva järjestelmä tallentaa mittaustulokset MySQL-relaatiotietokantaan, joten myös nyt toteutettu järjestelmä käyttää sitä. Tarvittaessa käytettävää tietokannan hallintajärjestelmää voitaisiin kuitenkin vaihtaa helposti 4.2 Toteutuksen keskeiset ratkaisut Sovelluksen näyttämät mittaustulokset haetaan relaatiotietokannasta. Nämä relaatiot muunnetaan luvussa 3.2 esitellyn mallikerroksen mukaisiksi MeasurementType-,

4. Toteutus 13 Weather-, ja Measurement-luokkien olioiksi. Tähän olio-relaatio muunnokseen ja tietokantahakujen suorittamiseen käytetään Hibernate-kirjaston versiota 3.5.5. Hibernate on ORM-kirjasto (Object Relational Mapping) Java-ohjelmointikielelle. Tietokannan taulujen ja mallikerroksen luokkien väliset vastaavuudet kuvataan XML-tiedostoihin, joiden mukaan Hibernate osaa tehdä olio-relaatio muunnokset. [7] Luvussa 3.2 esiteltyyn tiedonhakukerrokseen kuuluva WeatherDao-luokka vastaa tarvittavien tietokantakyselyiden suorittamisesta. Se suorittaa tietokantakyselyt käyttäen Hibernate-kirjaston tarjoamaa rajapintaa ja tuloksena saadaan mallikerroksen mukaisia olioita. Koska suurien tietomäärien hakeminen tietokannasta ja muuntaminen olioiksi on melko hidasta, tallennetaan pitempien aikavälien mittaustulokset muistiin. Seuraavilla kerroilla tulokset ovat nopeasti saatavissa muistista. Tulokset haetaan uudelleen tietokannasta kerran vuorokaudessa, jotta saadaan aina uudetkin mittaukset mukaan tuloksiin. Palvelukerroksen WeatherNowService- ja WeatherHistoryService-luokat toteutettiin Javan servletteinä, joita käyttöliittymä käyttää HTTP-pyynnöillä. Nämä luokat hakevat tarvittavat mittaukset tietokannasta WeatherDao-luokan metodeilla. Saadut mittaukset serialisoidaan Serializer-luokan avulla JSON-muotoon (JavaScript Object Notation) ennen kuin ne lähetetään käyttöliittymälle. JSON on kevyt tekstimuotoinen tiedonsiirtomuoto, joka sopii käytettäväksi erityisesti JavaScript-ohjelmointikielen kanssa [5]. Serialisointiin Serializer-luokka käyttää Flexjson 2.0 - kirjastoa [1]. Käyttöliittymä toteutettiin yhtenä JSP-sivuna, joka tuottaa HTML5-dokumentin. Sen yläosan vasemmassa laidassa on tietokannasta haettujen viimeisimpien mittausten tiedot. Yläosan oikeassa laidassa on interaktiivinen kartta, johon on merkitty sääaseman sijainti. Kartta toteutettiin Google Maps JavaScript API V3 - ohjelmointirajapinnan ja siihen liittyvän JavaScript-kirjaston avulla [8]. Tämä mahdollisti helpon ja nopean tavan kartan upottamiseen sivulle. Käyttöliittymän latauksen yhteydessä suoritetaan JavaScript-koodi, joka alustaa kartan toimintakuntoon. Mittausten historiatietoja esittäviä kuvaajia varten käyttöliittymäsivulla on viisi canvas-elementtiä. Canvas-elementti on HTML5:n uusi elementti, joka tarjoaa skripteille bittikartta-alueen, jolle voidaan piirtää grafiikkaa dynaamisesti [13]. Kuvaajien piirtämiseen käytetään RGraph-kirjastoa, joka mahdollistaa erilaisten kuvaajien ja graafien helpon piirtämisen canvas-elementille. Piirtäminen tapahtuu JavaScriptohjelmointikielellä. Tässä työssä käytettiin Scatter chart -tyyppistä kuvaajaa. [3] Käyttöliittymän latauksen jälkeen ajetaan JavaScript-koodi, joka alustaa kuvaajat ja asettaa halutut asetukset. Myöhemmin kuvaajiin päivitetään palvelimelta ladatut mittaustulokset. Koska kuvaajat piirretään vasta käyttäjän selaimessa, on palvelimen rasitus selvästi pienempi. Tämä pienentää sekä tarvittavaa tiedonsiirtokapasiteettiä että laskentatehoa.

4. Toteutus 14 RGraph-kirjasto tukee myös kuvaajien kontekstivalikkoon lisättäviä komentoja [3]. Tässä työssä käytettiin komentoja, jotka mahdollistavat kuvaajien suurentamisen sekä tallentamisen PNG-muodossa. Näiden komentojen tarkempi toiminta on kuvattu käyttötapauksissa KT3 ja KT4 luvuissa 2.1.3 ja 2.1.4. Mittaustulokset ladataan käyttöliittymään AJAX-tekniikalla WeatherNowServiceja WeatherHistoryService-luokkien toteuttamilta servleteiltä HTTP-pyynnöillä. Nämä pyynnöt toteutettiin jquery-kirjaston tarjoamalla getjson()-metodilla [2]. Näin toteutettiin viimeisimpien mittausten päivittäminen käyttöliittymän yläosaan sekä mittaustulosten noutaminen ja piirtäminen kuvaajiin. Nämä toiminnot on kuvattu tarkemmin käyttötapauksissa KT1 ja KT2 luvuissa 2.1.1 ja 2.1.2. Kuvaajien päivittäminen tehdään tyhjentämällä canvas-elementin sisältö RGraph.Clear-funktiolla, sijoittamalla kuvaajaa vastaavaan muuttujaan uudet piirrettävät pisteet ja piirtämällä kuvaaja uudelleen Draw-funktiolla [3]. Lopputuloksena saadaan luvun 2.2 mukainen käyttöliittymä vaaditulla toiminnallisuudella. Lopullinen käyttöliittymä on esitetty kuvassa 4.1. Käyttöliittymässä on näkyvissä satunnaisesti tuotettua mittausdataa, jota käytettiin sovelluksen testaamiseen. 4.3 HTML5 HTML on standardoitu kuvauskieli, jota käytetään erityisesti webbisivujen rakenteen ja sisällön kuvaukseen. Standardin kehitys pysähtyi pitkäksi aikaa versioon 4, kun sen kehittäjä W3C (World Wide Web Consortium) keskittyi XML-pohjaisiin standardeihin. Kuitenkin vuonna 2004 Apple, Mozilla ja Opera halusivat jatkaa HTML-standardin kehitystä, joten ne aloittivat HTML5:n kehittämisen. Nämä organisaatiot perustivat kehitystyötä varten WHATWG-organisaation (Web Hypertext Application Technology Working Group). Vuonna 2007 myös W3C alkoi kehittää HTML5-standardia, joten nyt nämä kaksi organisaatiota kehittävät sitä yhteistyössä. [13] HTML5 tuo joukon uusia ominaisuuksia standardiin. Uusia elementtejä tulee esimerkiksi dokumentin rakenteen kuvaamiseen, multimedian näyttämiseen ja tiedon visualisointiin. Dokumentin rakenteeseen liittyviä uusia elementtejä ovat esimerkiksi section-, header- ja footer-elementit. Multimediaa varten lisättyjä elementtejä ovat esimerkiksi audio-, video- ja canvas-elementit. Niillä voidaan näyttää selaimessa multimediaa ilman erillisiä plugineita. Lisäksi esimerkiksi progress- ja meter-elementtejä voidaan käyttää tiedon visualisointiin. Myös joitain vanhentuneita elementtejä jätetään uuden standardin ulkopuolelle. Myös lomakkeissa voidaan käyttää monia uusia tietotyyppejä. Nämä mahdollistavat käyttäjän syöttämän tiedon tarkistamisen ennen niiden lähettämistä palvelimelle. Esimerkkejä näistä ovat email-, url-, date- ja time-tietotyypit. [12] Lisäksi uusi standardi tuo mukanaan muutamia ohjelmointira-

4. Toteutus 15 japintoja, jotka mahdollistavat esimerkiksi videon ja äänen toiston uusien audio- ja video-elementtien kanssa. Drag & Drop API (Application Programming Interface) yhdessä draggable- ja dropzone-elementtien kanssa mahdollistaa vedä ja pudota toiminnallisuuden. [13] Tässä työssä käytettiin canvas-elementtiä kuvaajien piirtämiseen. Sillä merkitään tietyn kokoinen bittikartta-alue, jolle voidaan dynaamisesti piirtää grafiikkaa. Alueen koko valitaan halutuksi width- ja height-attribuuteilla. [13] Alueelle voidaan piirtää monipuolisen JavaScript-ohjelmointirajapinnan avulla. Tämä ohjelmointirajapinta tarjoaa metodit muun muassa suorakulmioiden, viivojen ja erilaisten käyrien piirtämiseen. Piirtää voidaan erilaisilla viivanleveyksillä, väreillä ja varjoilla. Koska piirtäminen tapahtuu JavaScript-ohjelmointikielellä, voidaan piirrettyä kuvaa muuttaa esimerkiksi käyttäjän syötteiden perusteella tai ajan kuluessa. Tämä mahdollistaa interaktiiviset sovellukset ja animaatiot. Rajapinta tukee myös piirretyn alueen muuntamista PNG-kuvaksi. [11] Koska HTML5-spesifikaatio on tällä hetkellä (helmikuussa 2011) vielä luonnosvaiheessa (Working Draft), tulee siihen vielä suuriakin muutoksia. Tästä huolimatta monet suosituimmista selaimista tukevat ainakin joitakin uusia ominaisuuksia. Kaikkien selainten HTML5-tuki on vielä hyvin puutteellista, mutta ne päivittyvät nopeasti tuoden tukea uusille elementeille ja ominaisuuksille.

4. Toteutus 16 Kuva 4.1: Sovelluksen käyttöliittymä.

17 5. YHTEENVETO Tässä kandidaatintyössä määriteltiin, suunniteltiin ja toteutettiin sääasemalle uusi selainpohjainen käyttöliittymä. Käyttöliittymälle asetettuja tavoitteita olivat muun muassa interaktiivisuus, dynaamisuus, AJAX-tekniikoiden käyttö, kuvaajien suurentaminen ja tallentaminen sekä historiakuvaajien näyttämän aikavälin valinta. Sovellus määriteltiin kuvaamalla vaadittu toiminnallisuus käyttötapauksin. Lisäksi määriteltiin käyttöliittymään kuuluvat elementit ja niiden sijainnit käyttöliittymäsivulla. Sovelluksen suunniteltu arkkitehtuuri, rakenne ja toiminta kuvattiin UML:n mukaisilla luokka-, sijoittelu- ja tapahtumasekvenssikaavioilla. Sovelluksen arkkitehtuurissa hyödynnettiin asiakas-palvelin -mallia ja kerrosarkkitehtuuria. Sovelluksen kehitystyö tehtiin Eclipse-kehitysympäristössä. Sovelluksen palvelinohjelmisto toteutettiin Javalla ja sitä ajetaan Apache Tomcat -palvelimella. Käyttöliittymän totetuksessa käytettiin HTML5-kuvauskieltä, erityisesti sen canvas-elementtiä, sekä JavaScript-ohjelmointikieltä. Lisäksi HTML5-kuvauskielen uudet ominaisuudet esiteltiin lyhyesti. Havaittiin selaimien HTML5-tuen olevan tällä hetkellä vielä puutteellinen, mutta tärkeimmät ominaisuudet, kuten canvas-elementti, ovat jo hyvin tuettuina. Sovelluksen kehittämisessä käytettiin useita kolmannen osapuolen kirjastoja, sekä palvelinohjelmistossa että käyttöliittymässä. Palvelinohjelmistojen Java-kirjastot ja -tekniikat ovat nykyään vakiintuneita, hyvin dokumentoituja ja helppokäyttöisiä. AJAX-tekniikoiden käyttö on myös nykyään helppoa, sillä monet vakiintuneet JavaScript-kirjastot helpottavat kehittämistä. Erityisesti tässä työssä käytetty jquery-kirjasto tarjoaa helppokäyttöiset funktiot AJAX-kutsujen tekemiseen. JQuery-kirjasto ottaa myös huomioon selainten erilaisuuden, jolloin kehittäjän ei tarvitse kirjoittaa koodia monelle selaimelle erikseen. HTML5:n ja canvas-elementin käyttöä helpottavia kirjastoja löytyy myös, mutta niiden suurimpina ongelmina ovat keskeneräisyys ja muuttuvat rajapinnat. Ne kyllä helpottavat huomattavasti grafiikan piirtämistä, kun kehittäjän ei tarvitse piirtää kaikkia kuvioita ja kuvaajia itse alusta lähtien. Tässä työssä kuvaajien piirtämiseen käytetty RGraph-kirjasto päivittyi sovelluksen kehitysaikana moneen kertaan saaden korjauksia ja uusia ominaisuuksia. Sillä on myös erittäin hyvä dokumentaatio, joka sisältää monia esimerkkejä kirjaston käytöstä. Määritelty ja suunniteltu sovellus toteutettiin onnistuneesti. Kaikki sovellukselle

5. Yhteenveto 18 asetetut tavoitteet ja vaatimukset saavutettiin ja toiminnot toteutettiin. Sovelluksen heikkoudeksi havaittiin tietokantahakujen ja mittaustulosten käsittelyn hitaus, kun mittaustuloksia haettiin pitkältä aikaväliltä. Myös sovelluksen muistinkulutus oli näissä tapauksissa melko suurta.tämä ongelma pystyttiin kuitenkin osittain kiertämään tallentamalla hitaiden tietokantahakujen tulokset muistiin, josta ne voitiin lukea seuraavilla kerroilla nopeasti. Myöskään käyttöliittymän ulkoasuun ei keskitytty juurikaan, joten se jäi melko karuksi. Siinä on aihetta jatkokehitykselle. AJAX-tekniikoiden ja HTML5:n yhteiskäytöllä saatiin käyttöliittymästä dynaaminen, nopea ja mukava käyttää. Toisaalta saatiin myös siirrettyä laskentakuormaa palvelimelta käyttäjän selaimelle, kun siirretäänkin enimmäkseen vain mittaustuloksia palvelimelta selaimeen kuvatiedostojen sijaan ja kuvaajat piirretäänkin vasta selaimessa. Täten pystytään palvelemaan suurempaa käyttäjäjoukkoa samoilla resursseilla.

19 LÄHTEET [1] Flexjson Documentation, 2011. Viitattu 27.2.2011. Saatavissa: http:// flexjson.sourceforge.net/. [2] jquery Documentation, 2011. Viitattu 27.2.2011. Saatavissa: http://docs. jquery.com/main_page. [3] RGraph Documentation, 2011. Viitattu 27.2.2011. Saatavissa: http://www. rgraph.net/docs/index.html. [4] Frank Buschmann, Regine Meunier, Hans Rohner, Peter Sommerlad, and Michael Stal. Pattern-Oriented Software Architecture, Volume 1: A System of Patterns. John Wiley & Sons, Chichester, UK, 1996. 476 p. [5] Douglas Crockford. RFC4627: JavaScript Object Notation, 2006. Viitattu 6.2.2011. Saatavissa: http://www.ietf.org/rfc/rfc4627.txt. [6] Pierre Delisle, Jan Luehe, and Mark Roth. JavaServer Pages Specification Version 2.1, 2006. Viitattu 6.2.2011. Saatavissa: http://jcp.org/aboutjava/ communityprocess/final/jsr245/index.html. [7] Gavin King and Christian Bauer and Max Rydahl Andersen and Emmanuel Bernard and Steve Ebersole. Hibernate Reference Documentation, 2010. Viitattu 27.2.2011. Saatavissa: http://docs.jboss.org/hibernate/core/3.5/ reference/en-us/pdf/hibernate_reference.pdf. [8] Google. Google Maps JavaScript API V3 Documentation, 2011. Viitattu 27.2.2011. Saatavissa: http://code.google.com/apis/maps/documentation/ javascript/. [9] Rajiv Mordani. Java Servlet Specification Version 3.0, 2009. Viitattu 6.2.2011. Saatavissa: http://jcp.org/aboutjava/communityprocess/final/jsr315/ index.html. [10] Mikko Salonen. Vaisala Rosa -sääaseman etäkäyttö Telit GE863-GPS moduulin avulla. Technical report, Tampere University of Technology, 2009. [11] W3C. HTML Canvas 2D Context, 2011. Viitattu 12.2.2011. Saatavissa: http: //www.w3.org/tr/2011/wd-2dcontext-20110113/. [12] W3C. HTML5 differences from HTML4, 2011. Viitattu 12.2.2011. Saatavissa: http://www.w3.org/tr/2011/wd-html5--diff-20110113/.

LÄHTEET 20 [13] W3C. HTML5 Specification, 2011. Viitattu 12.2.2011. Saatavissa: http:// www.w3.org/tr/2011/wd-html5-20110113/.