MIKKO HAAPANEN AJAX-TEKNIIKOIDEN HYÖDYNTÄMINEN VAISALA ROSA -SÄÄASEMAN SELAINKÄYTTÖLIITTYMÄSSÄ

Transkriptio

1 MIKKO HAAPANEN AJAX-TEKNIIKOIDEN HYÖDYNTÄMINEN VAISALA ROSA -SÄÄASEMAN SELAINKÄYTTÖLIITTYMÄSSÄ Kandidaatintyö Tarkastaja: Mikko Salmenperä

2 II TIIVISTELMÄ TAMPEREEN TEKNILLINEN YLIOPISTO Automaatiotekniikan koulutusohjelma MIKKO HAAPANEN: AJAX-tekniikoiden hyödyntäminen Vaisala ROSA - sääaseman selainkäyttöliittymässä Kandidaatintyö, 16 sivua, 1 liitesivu Heinäkuu 2010 Pääaine: Automaation tietotekniikka Tarkastaja: Mikko Salmenperä Avainsanat: AJAX, JavaScript, selainkäyttöliittymä AJAX (Asynchronous JavaScript and XML) tarkoittaa yhdistelmää verkkosivujen tekemiseen käytetyistä tekniikoista, kuten kuvaus- ja scriptikielestä, joiden yhteiskäytöllä luodaan verkkosivusta dynaaminen. AJAX-tekniikoiden avulla on mahdollista ladata palvelimelta ja päivittää käyttäjälle näkyvän verkkosivun osia ilman, että koko verkkosivua tarvitsee ladata uudelleen. Tämän ansiosta verkkosivuista on mahdollista tehdä enemmän normaalia tietokoneohjelmaa muistuttava ja käyttäjäystävällisempi. Tämä työ jakaantuu kahteen osaan: Aiheen esittelyosassa esitellään AJAXtekniikan periaatteet ja siihen liittyvät osatekniikat. Selainkäyttöliittymän toteutuskuvauksessa esitellään tähän työhön liittyen tehty AJAX-tekniikoita hyödyntävä Vaisala ROSA -sääaseman selainkäyttöliittymä ja arvioidaan käytettyjä tekniikoita sen pohjalta. Toteutettua selainkäyttöliittymä ei tästä työstä riippumattomista ongelmista johtuen saatu kaikin osin toimimaan toivotulla tavalla. Kuitenkin toteutettu selainkäyttöliittymä, sekä useat yleisesti tunnetut AJAX-tekniikoita hyödyntävät verkkosivut osoittavat, että AJAX-tekniikoilla on mahdollista toteuttaa dynaamisia ja sujuvatoimisia verkkosivuja.

3 III SISÄLLYS 1. Johdanto Selainpohjainen käyttöliittymä Käytetyt tekniikat XHTML XML DOM JavaScript Vaisala ROSA -sääasema Web Service WSDL ja SOAP Selainkäyttöliittymän toteutus Käyttöliittymäkuvaus Ongelmia toteutuksessa Johtopäätökset Yhteenveto Lähteet A.FakeSOAPMaker-luokan käyttödokumentaatio

4 IV TERMIT JA NIIDEN MÄÄRITELMÄT Alasivu Pääsivun sisällä oleva tietyn asiakokonaisuuden sisältävä sivu. Alasivujen välillä voidaan liikkua Pääsivun valikkopainikkeiden avulla. Asiakas Eng. client. Ohjelma, yleensä selainohjelma, joka käyttää palvelimen tarjoamaan palvelua. CSS Cascading Style Sheets (suom. kaskadiset tyyliohjeet). CSS-kielen avulla on mahdollista eristää tyyliin liittyvät määritelmät muusta, esimerkiksi verkkosivuun liittyvästä rakenteen kuvaustiedostosta erilleen. HTML Hypertext Markup Language. Tässä työssä HTML-termillä tarkoitetaan yleisesti kaikkia HTML-kielen versioita, myös XHTML:ä. HTTP(S) Hypertext Transfer Protocol (Secure). Siirtoprotokolla, jota selainohjelmat ja palvelimet käyttävät tiedonsiirtoon. JavaScript Lyh. JS. Tässä työssä JavaScript-termillä tarkoitetaan ECMAScriptmäärityksen mukaista scriptiä. JavaScript-termiä käytetään selvyyden vuoksi, sillä sitä käytetään myös lähteissä. Käyttäjä Ihmiskäyttäjä, joka selaa esimerkiksi verkkosivua tai käyttää tietokoneohjelmaa. Palvelin Eng. server. Palvelinohjelma, joka tarjoaa verkon välityksellä palveluaan asiakkaille. Pääsivu Toteutetun selainkäyttöliittymän index.htm niminen XHTML-tiedosto, joka toimii selainkäyttöliittymän rankana. SGML Standard Generalized Markup Language. SGML on tekniikka, jonka avulla kuvataan tekstin rakennetta tai esitystapaa. Esimerkiksi HTML on määritetty SGML:n avulla. Verkko Eng. World Wide Web (lyh. WWW), Web Verkkosivu Eng. webpage. Verkkotekniikoilla toteutettu dokumentti, jota usein tarkastellaan selainohjelmalla. Verkkotekniikka Tekniikka, jota käytetään verkossa esimerkiksi tiedon siirtoon tai tiedon esittämiseen.

5 1 1. JOHDANTO Perinteisesti verkkosivu muodostuu tiedostoista, jotka kuvaavat sen sisällön ja tyylin. Tiedon siirron kannalta koko verkkosivu on voitu ajatella yhdeksi paketiksi siinä mielessä, että käyttäjän on täytynyt aina ladata koko paketti kerralla. Poikkeuksen tähän on tehnyt selainohjelman mahdollisuus tallentaa verkkosivun osia, kuten kuvia tai tyylitiedostoja välimuistiin, jolloin kokonaisia muuttumattomia tiedostoja ei ole aina ollut tarvetta ladata uudelleen palvelimelta. Ongelmana silti on, että jos käyttäjä haluaa päivittää pienen osan aiemmin lataamaansa verkkosivua, on hänen täytynyt ladata koko tämän pienen tiedon sisältävä tiedosto uudelleen. Hyvänä esimerkkinä tällaisesta tarpeesta ja tilanteesta on säätietoja esittävä verkkosivu, jonka perusrunko pysyy muuttumattomana, mutta sen sisällä esitettävät tiheästi muuttuvat säätiedot olisi syytä pitää ajantasalla. Toinen perinteisen verkkosivun ominaisuus on staattisuus. Kerran ladattu verkkosivu pysyy täysin muuttumattomana ja kaikenlainen käyttäjän vuorovaikutus on pohjautunut siihen, että palvelimelta ladataan kulloinkin käyttäjälle esitettävä uusi kokonainen verkkosivu, oli muuttuvan esitettävän tiedon määrä sitten suuri tai pieni. Ensimmäinen helpotus verkkosivujen staattisuuteen on ollut mahdollisuus sisällyttää verkkosivulle scriptikielellä toteutettua toiminnallisuutta. Perinteisesti kuitenkin kaikki scriptin saatavilla oleva tieto on täytynyt ladata muun verkkosivun latauksen yhteydessä palvelimelta, jonka jälkeen uutta tietoa ei ole voinut saada ilman koko verkkosivun uudelleen noutoa. Joihinkin tarkoituksiin tämä on riittävää. Esimerkiksi scriptikielellä verkkosivulle toteutettu kello tarvitsee vain muuttumattoman scriptikoodinsa, sekä pääsyn asiakastietokoneen aikatietoihin, jotka selainohjelma tarjoaa. Kuitenkin esimerkiksi tuoreita säätietoja esittävän verkkosivun säätiedot on ladattava palvelimelta joka kerta, kun asiakasohjelma tarvitsee uuden tiedon. Scriptikielen avulla verkkosivun esittämää tietoa voi muuttaa ilman verkkosivun uudelleen latausta, mutta tämä kaikki tieto on silti täytynyt ladata aiemmin palvelimelta, vaikka vain osa siitä esitettäisiin käyttäjälle tiettynä hetkeneä. Verkkosivun toiminnallisuuden toteutus ilman scriptikieltä ja uuden tiedon haku palvelimelta on siis perinteisin menetelmin vaatinut koko verkkosivun uudelleen latausta. Haittana tässä tavassa on suuri verkkoliikenne, joka lisää kustannuksia ja josta suuri osa on usein saman tiedon uudelleen latausta. Toisena haittana on verkkosivun huono käyttömukavuus, sillä verkkosivu uudelleen ladattaessa siirtymä

6 1. Johdanto 2 vanhasta verkkosivusta uuteen ei ole saumaton, eikä aina edes kovin nopea. Käyttäjä joutuu siis katsomaan tyhjää tai latautuvaa ruutua mahdollisesti suurenkin osan verkkosivulla viettämästään ajasta. AJAX-tekniikoiden käyttö tarjoaa mahdollisuuden päästä eroon näistä huonoista puolista. AJAX:n avulla käyttäjän lataaman verkkosivun on mahdollista vaihtaa taustatoimintana pieniäkin tietomääriä palvelimen kanssa. AJAX muodostaa käyttäjän ja palvelimen väliin lisäkerroksen, jonka avulla uutta tietoa palvelimelta ladataan käyttäjälle huomaamattomasti ja joka pystyy scriptikielen avulla manipuloimaan käyttäjälle näkyvän verkkosivun sisältöä dynaamisesti. Näin verkkosivusta saadaan sulavampi ja mukavampi käyttää. Tässä työssä esitellään AJAX-tekniikat ja AJAX:n keskeinen toimintaidea sekä tutkitaan ja arvioidaan AJAX:n tarjoamia mahdollisuuksia toteuttamalla Tampereen teknillisen yliopiston Systeemitekniikanlaitoksen ylläpitämään Vaisala ROSA -sääasemaan selainkäyttöliittymä. Sääaseman käyttöliittymäksi on olemassa myös muita toteutuksia.

7 3 2. SELAINPOHJAINEN KÄYTTÖLIITTYMÄ Selain on tietokoneohjelma, joka on tarkoitettu esittämään käyttäjälle verkkotekniikoilla toteutettua sisältöä. Usein tieto sijaitsee verkossa, mutta tiedon lähde voi olla myös paikallinen, kuten lähiverkko tai sama tietokone, jolla selainohjelmaa käytetään. Selainpohjainen käyttöliittymä tarkoittaa verkkotekniikoilla toteutettua verkkosivua, jota voidaan käyttää selainohjelmalla ja joka on tarkoitettu toimimaan käyttöliittymänä. Selainpohjainen käyttöliittymä voi tarjota mahdollisuuden vaikuttaa tarkkailtavaan kohteeseen tai pelkästään pääsyn kohteesta kerättyihin tietoihin, kuten tähän työhön liittyen toteutetussa selainkäyttöliittymässä. Selainpohjainen käyttöliittymä on usein mielekästä sijoittaa verkkoon kytketylle palvelimelle, jolloin sitä voidaan käyttää useilla erilaisilla päätteillä, joissa on verkkoyhteys ja selainohjelma. Suurinpana etuna käyttöliittymän selainpohjaisuudessa onkin juuri käyttöliittymän laaja, helppo ja järjestelmäriippumaton saatavuus. Tällä on kuitenkin myös kääntöpuolensa; tietoturvasta huolehtiminen on selainkäyttöliittymän toteutukseen liittyen tärkeässä asemassa etenkin, jos tarkkailtava tieto on luonteeltaan salassa pidettävää, tai käyttöliittymän avulla on mahdollisuus vaikuttaa järjestelmän toimintaan. Tietoturva ja sen toteuttaminen selainkäyttöliittymään rajattiin tämän työn ulkopuolelle. Perusvaatimuksena toteutettavalle selainkäyttöliittymälle oli AJAX-tekniikoiden hyödyntäminen sen toteutuksessa. Käyttöliittymältä vaadittava toiminnallisuus rajoittui sääasemalta saatavien säätietojen esittämiseen käyttäjälle. Selainkäyttöliittymältä edellytetään, että Tampereen teknillisen yliopiston Systeemitekniikan laitos voi käyttää sitä edustuskäytössä AJAX:n esittelytarkoituksessa. Varsinaiseen käyttöön selainkäyttöliittymän ei ole tarkoitus tulla, vaan toteutettavan käyttöliittymän avulla on vain tarkoitus tutkia AJAX-tekniikoiden käyttöä ja toimivuutta. Koska selainkäyttöliittymän ei ole tarkoitus päätyä todelliseen käyttöön, rajataan toteutuksesta pois toiminnallisuutta, jota sääaseman selainkäyttöliittymässä olisi hyvä olla, mutta jonka toteuttaminen ei tuo lisäarvoa AJAX-tekniikoiden käytön tutkimiseen. Tällaisia toteutuksesta poisjätettyjä toimintoja ovat esimerkiksi sään historiatietojen esittäminen graaen avulla. Säätiedot selainkäyttöliittymä saa valmiiksi toteutetulta palvelinpuolen rajapinnalta, jonka tarjoamia mahdollisuuksia on tarkoitus hyödyntää sellaisenaan. Oman

8 2. Selainpohjainen käyttöliittymä 4 palvelinpuolen toteutuksen tekeminen tätä työtä varten olisi mahdollista, mutta palvelintoiminta päätettiin rajata työn ulkopuolelle.

9 5 3. KÄYTETYT TEKNIIKAT AJAX:lla (Asynchronous JavaScript and XML) tarkoitetaan tekniikkakokoelmaa, jonka avulla on mahdollista päivittää osia verkkosivusta taustatoimintana, niin että koko verkkosivua ei tarvitse ladata uudestaan. Ensimmäisiä kertoja AJAX-termiä tässä yhteydessä käytti Jesse James Garrett artikkelissaan [1]. Garrett määritteli AJAX:iin kuuluvaksi seuraavat tekniikat: XHTML sekä CSS tiedon esittämiseen, DOM verkkosivun näkymän dynaamiseen muokkaamiseen, XML tiedon välittämiseen ja manipuloimiseen, XMLHttpRequest assynkroniseen tiedonsiirtoon ja JavaScript sitomassa eri osatekniikoita yhteen. Luetellut tekniikat esitellään oleellisin osin tarkemmin seuraavissa alaluvuissa. Mikä tahansa näitä tekniikoita käyttävä verkkosivu ei kuitenkaan käytä AJAXtekniikkaa. AJAX tarkoittaa nimenomaan tiettyä tapaa käyttää edellä mainittuja tekniikoita. Toisaalta AJAX-termillä ei aina tarkoiteta tiukasti lyhenteen alkuperän mukaista toimintaa, vaan toteutustapaa yleisemmin [2]. Siirrettävän tiedon ei siis tarvitse olla XML muotoista ja tiedonsiirtotapa voi olla niin asynkroninen kuin synkroninenkin. Samoin esimerkiksi XHTML:n tilalla voidaan käyttää aiempaakin HTML standardia. Mikään AJAX-tyylisessä toteutuksessa käytettävistä tekniikoista ei ole uusi; vain vanhojen tekniikoiden uudenlainen käyttö on mahdollistanut uudenlaisen dynaamisuuden luonnin verkkosivuille [1]. AJAX:n voidaan ajatella luovan uuden kerroksen palvelimen ja käyttäjän välille [1]. AJAX-kerroksen sijoittumista asiakas-palvelin -malliin on havainnollistettu kuvassa 3.1. AJAX-kerros toteutetaan JavaScriptillä asiakkaan puolelle. AJAXkerroksen tarkoitus on taata nopea vaste käyttäjän toiminnoille ja hoitaa tietojen vaihto palvelimen kanssa kätketysti taustalla. Käyttäjälle tarjottava nopea vaste ei aina tarkoita välitöntä uuden informaation esittämistä, vaan voi myös olla esimerkiksi latausanimaation käynnistäminen uudelle tiedolle varattuun tilaan samalla kun muu verkkosivu kuitenkin pysyy luettavana ja käytettävänä. Käyttäjän ei siis tarvitse katsella tyhjää tai kokonaan uudelleen latautuvaa selainikkunaa käyttäessään verkkosivua. Tämän ominaisuuden ansiosta AJAX:n avulla on mahdollista toteuttaa verkkosivuja tai selainkäyttöliittymiä, jotka muistuttavat normaalia, ei selaimessa toimivaa ohjelmaa. AJAX-kerroksen sijoittumisen lisäksi huomion arvoista kuvassa 3.1 on, että AJAXtekniikoita hyödyntävä verkkosivu ei edellytä erityistä tukea palvelin puolelta, vaan

10 3. Käytetyt tekniikat 6 Kuva 3.1: AJAX-kerroksen sijoittuminen asiakas-palvelin malliin. palvelinpään rakenne voi olla jopa identtinen perinteisellä ja AJAX-verkkosivulla. Perinteinen verkkosivu vastaanottaa palvelimelta aina kokonaisen HTML-kielellä toteutetun verkkosivun. AJAX-verkkosivu voi saada palvelimelta niin XML kuin muunkin muotoista tietoa, kuten kuvia, jonka AJAX-kerroksen toiminnallisuus osaa upottaa aikaisemmin ladattuun, käyttäjälle näytettävään HTML-runkoon. Lisäksi käyttäjän toiminnot AJAX-sivulla eivät välttämättä aiheuta välittömästi pyyntöä palvelimelle, vaan AJAX-kerros toimii rajapintana ja puskurina verkkosivun käyttöliittymän ja palvelimen välillä. AJAX-kerroksen toiminnallisuus voisi esimerkiksi pyrkiä arvaamaan mitä tietoa käyttäjä tulee seuraavaksi tarvitsemaan ja lataamaan sitä jo etukäteen varastoon. 3.1 XHTML XHTML (Extensive Hypertext Markup Language) on verkkosivujen tekemiseen tarkoitettu kuvauskieli, jossa verkkosivujen rakennetta kuvataan elementtien avulla. XHTML on HTML:n seuraaja [3]. XHTML merkintätapa on täysin XML pohjainen. Verrattuna HTML:än tämä tarkoittaa tiukempia ja yksiselitteisiä sääntöjä elementtien merkitsemiseen. XHTML:n etu onkin juuri merkintätavan yksiselitteisyys, sekä se, että XHTML dokumenttia voidaan käsitellä millä tahansa XML:n käsittelyyn tarkoitetulla ohjelmalla tai ohjelmakomponentilla.

11 3. Käytetyt tekniikat XML XML (Extensible Markup Language) on SGML:stä johdettu tiedon säilyttämiseen ja siirtämiseen tarkoitettu merkintäkieli, joka mahdollistaa tiedon jäsentelyn elementtien avulla. XML-elementtien nimet tai attribuutit eivät ole XML standardissa määritettyjä, vaan jokaiseen käyttösovellukseen voidaan ottaa käyttöön parhaiten soveltuvat nimet. [4] Tämä edellyttää, että käyttäjälle välitetään aina tieto siitä, kuinka sisältöä tulisi käsitellä, sillä XML:lle ei ole tiettyä rajattua käyttötarkoitusta. Joissain tapauksissa elementin nimi itsessään voi dokumentoida sen sisältämän tiedon tyypin riittävästi ihmislukijaa varten. Myös XML pohjaisissa merkintäkielissä, kuten XHTML, elementtien on oltava ennalta sovitun mukaiset. XML:n vahvuus on sen järjestelmäriippumattomuus ja laaja käyttö. [4] 3.3 DOM DOM (Document Object Model) on rajapinta, jonka avulla ohjelmien ja scriptien on mahdollista nähdä ja muokata kuvauskielellä, kuten XML, HTML tai XHTML, toteutetun dokumentin sisältöä. [5] DOM esittää dokumentin sisällön puumaisena rakenteena, joka muodostetaan dokumentin elementeistä. Tässä työssä DOM antaa esimerkiksi JavaScript scriptille mahdollisuuden muokata käyttäjälle esitettävän XHTML dokumentin sisältöä dynaamisesti. 3.4 JavaScript Jos käyttäjälle näytettävästä verkkosivusta halutaan muuttaa jotain, esimerkiksi käsitellä käyttäjän syöttämää tietoa ja muuttaa näkymää syötteen mukaisesti, täytyy puhtaasti HTML dokumenttina toteutetulle verkkosivulle syötetty tieto aina lähettää palvelimelle, joka käsittelee tiedon ja lähettää kokonaan uuden HTML verkkosivun takaisin käyttäjälle vastauksena. JavaScriptin avulla toiminnallisuutta voidaan siirtää asiakaspäähän selainohjelman suoritettavaksi. JavaScript on syntaksiltaan löyhästi C++- tai Java-ohjelmointikieltä muistuttava scriptikieli. JavaScript koodia ei käännetä, vaan selainohjelma tulkkaa sen. JavaScriptin XMLHttpRequest-luokka tarjoaa rajapinnan, jonka avulla on mahdollista siirtää tietoa asiakkaan ja palvelimen välillä tai yli [6]. XMLHttpRequest-olion palvelimelta lataama tieto voi olla esimerkiksi XMLmuotoinen, jonka XMLHttpRequest-olio palauttaa DOM-parsittuna tai tekstiä, joka palautetaan string-oliona muun scriptin käsiteltäväksi. XMLHttpRequest-luokan määritelmä ei suosittele sallittavaksi XMLHttpRequestolion yhteyttä palvelimeen, joka on eri alkuperää kuin käytettävän XMLHttpRequestolion sisältävä scriptitiedosto [6, kpl ]. Syynä tähän on tietoturvariski.

12 3. Käytetyt tekniikat 8 XMLHttpRequest-olion rajapintafunktio open antaa asettaa käytettävän HTTPpyyntö metodin, esimerkiksi get tai post, pyynnön kohde URL:n sekä sen, käytetäänkö synkronista vai asynkronista tiedonsiirtotapaa. Asynkronista tiedonsiirtotapaa käytettäessä scriptin suoritus ei pysähdy odottamaan palvelimen vastausta. Sen sijaan XMLHttpRequest-olion onreadystatechange tapahtumatarkkailija (eng. event listener) herättää käyttäjän toteuttaman tapahtuman käsittelijäfunktion, kun tiedonsiirrossa on saavutettu uusi tila. Synkronisessa tiedonsiirtotavassa scriptin suoritus pysähtyy kunnes palvelimelta on saatu vastaus. Kun esimerkiksi tiedetään ohjelmointivaiheessa siirrettävien tietomäärien olevan suuria, on usein parempi käyttää asynkronista tiedonsiirtotapaa, jotta verkkosivun toiminnasta saadaan sujuvampaa. XMLHttpRequest-olion setrequestheader rajapintafunktio antaa määrittää HTTPotsikkotiedot (eng. header), jotka lähetetään pyynnön mukana. XMLHttpRequest-olion send rajapintafunktion kutsu käynnistää pyynnön lähetyksen palvelimelle. Parametrina voidaan antaa palvelimelle lähetettävä viesti, mutta kaikissa käyttötarkoituksissa viestiä ei tarvita, jolloin viestin voi jättää myös tyhjäksi.

13 9 4. VAISALA ROSA -SÄÄASEMA Vaisala ROSA -sääasema mittaa ilman lämpötilaa, sademäärää, tuulennopeutta, tuulensuuntaa ja ilmankosteutta. Tähän työhön liittyvä sääasema on sijoitettu Tampereen teknillisen yliopiston katolle. Sääasema on kytketty sarjaportin välityksellä Telit GE863-GPS moduuliin, johon voidaan ottaa yhteys palvelimelta. Mittaustietoja talletetaan tietokantaan. [7] 4.1 Web Service Web Service on ohjelmamoduli, jonka tarjoama palvelu on saatavilla tietoverkon välityksellä. Web Service tietää mitä palveluita se voi toteuttaa ja mitä sisääntuloja se tarvitsee tuottaakseen ulostulonsa. Web service myös pystyy kertomaan nämä tiedot asiakkaalle rajapintakuvauksensa avulla. [8, s. 5] Web service hyödyntää avoimia protokollia tiedon välityksessä asiakkaan ja palvelun välillä sekä rajapintakuvauksessa. Tietoa Web Servicen ja asiakkaan välillä voidaan välittää esimerkiksi XML muotoisena avulla. [8, s. 33] Web Servicen tarjoama resurssi sellaisenaan ei ole suoraan ihmisen käytettävissä tai ymmärrettävissä. Web Servicen palvelua käyttää aina toinen ohjelma joko ihmisen aloitteesta tai ilman. Web Servicen on mahdollista käyttää toisia Web Servicejä. [8, s. 10] 4.2 WSDL ja SOAP WSDL (Web Service Description Language) on Web Servicen rajapintakuvaus, joka esitetään XML-muotoisena tietona [8, s. 149]. WSDL ei ole ensisijaisesti tarkoitettu ihmisen luettavaksi ja ymmärtämäksi, vaan ohjelmien keskenäiseen keskusteluun. SOAP (Simple Object Access Protocol) on protokolla, jonka avulla ohjelmat voivat vaihtaa XML pohjaisesti esitettyä tietoa yli. SOAP-viestin avulla ohjelma voi olla yhteydessä Web Serviceen ja päinvastoin. [8, s ] XMLpohjaisuuden ansiosta SOAP-viesti on järjestelmäneutraali eli sen avulla on mahdollista siirtää tietoa monien erilaisten järjestelmien välillä.

14 10 5. SELAINKÄYTTÖLIITTYMÄN TOTEUTUS Selainkäyttöliittymän toteutus AJAX-tekniikoita hyödyntäen rajaa jo aiheena työssä käytettävissä olevat tekniikat tarkasti. Selainkäyttöliittymä toteutettiin XHTMLdokumenttina, jonka tyylitiedot on eristetty CSS-tiedostoon. Alasivujen XHTMLkoodi kirjoitettiin omiin dokumentteihin, jotta niitä on mahdollista hakea palvelimelta erillisinä paloina AJAX-periaatteen mukaisesti. Sivun toiminnallisuus on toteutettu JavaScript kielellä. Mahdollisin osin scripti on eristetty erillisiin tiedostoihin. Selainkäyttöliittymä on testattu Mozilla Firefox -selaimen versiolla Työtä aloittaessa säätietojen noutaminen ja päivittäminen päätettiin toteuttaa AJAX-tekniikoiden avulla ja siten, että säätiedot päivittyvät käyttöliittymäsivulle automaattisesti tietyin aikavälein ilman, että koko verkkosivua ladataan palvelimelta uudelleen. Käyttöliittymän toteutusvaiheessa päädyttiin lisäksi toteuttamaan valikko- ja alasivurakenne AJAX-tekniikoiden avulla. Säätiedot noudetaan XMLHttpRequest-olion avulla Salosen raportissa kuvatulta Web Serviceltä [7] lähettämällä sille SOAP-muotoinen pyyntö, johon Web Service vastaa SOAP-muotoisella vastauksella. Vastauksen rakenne on vakio, joten siitä on helppoa poimia käyttöön halutut numeeriset säätietoja kuvaavat arvot. Valikon toteutuksessa päädyttiin käyttämään menetelmää, jossa käytetään myös XMLHttpRequest-oliota, mutta tässä tapauksessa sen avulla lähetetään palvelimelle HTTP-pyyntö, johon vastauksena saadaan halutun alasivun XHTML-kooditiedosto. Molemmissa yllä kuvatuissa tilanteissa käytetään asynkronista tiedonsiirtotapaa. Asiakasselainohjelman ladatessa käyttöliittymäsivu, latautuu asiakkaalle pääsivu, tyylitiedosto sekä scriptitiedostot. Pääsivua index.htm suoritettaessa kutsutaan sille sisällytetyn scriptin takia funktiota paivitasivu, jolla ladataan palvelimelta tässä tapauksesa tiedosto saa.htm. Kun saa.htm on onnistuneesti ladattu, päivitetään sen sisältö näkymään pääsivun alasivuille varattuun tilaan. Selainkäyttöliittymän valikko on osa pääsivua. Valikon painikkeita napsautettaessa kutsutaan paivitasivu-funktiota, jonka avulla ladataan kunkin tilanteen mukainen alasivu samoin kuin edellisessä kappaleessa on kuvailtu. Valikko- ja alasivurakenne on toteutettu luomalla pääsivurunkoon alasivuille varattuun kenttään XHTML:n div-elementillä tila, jonka sisälle voidaan ladata XHTMLmuotoista tietoa erillisestä tiedostosta. Selain esittää div-elementin sisään ladatun XHTML tiedon kuten muunkin XHTML-muotoisen tiedon. Tässä käyttöliittymäto-

15 5. Selainkäyttöliittymän toteutus 11 Kuva 5.1: Toteutetun selainkäyttöliittymän pää- ja aloitussivu. teutuksessa kaikkia alasivuja ei noudeta palvelimelta verkkosivua ladattaessa. Alasivut noudetaan palvelimelta vain tarvittaessa XMLHttpRequest-olion avulla. Toteutustavan verkkoliikenteen säästöhyödyt jäävät pieniksi näin suppealla käyttöliittymäsivulla, mutta enemmän dataa sisältävillä verkkosivustoilla tällä tekniikalla voidaan nopeuttaa verkkosivun latausaikaa ja vähentää turhaa verkkoliikennettä huomattavasti verrattuna tilanteeseen, jossa kaikki alasivujenkin data ladattaisiin aina kerralla asiakkaan saataville verkkosivun ensilatauksen yhteydessä, tai tilanteeseen, jossa uutta alasivua ladattaessa ladattaisiin myös pääsivun tieto uudelleen. Selainkäyttöliittymään toteutettiin JavaScriptillä luokka, joka huolehtii säätietojen hankkimisesta palvelimelta ja tarjoaa rajapintansa kautta muulle selainkäyttöliittymän scriptille mahdollisuuden päästä käsiksi säätietoihin. Tässä selainkäyttöliittymän toteutuksessa luokasta luodaan yksi olio, joka varastoi sisälleen kaikki olion elinaikana Web Serviceltä noudetut säätiedot. Vanhojen säätietojen varastointi toteutettiin mahdollista käyttöliittymässä näytettävää säähistoriatietoa varten, mutta tällaista ominaisuutta lopulliseen käyttöliittymään ei tehty. Kaikkien historiatietojen tallettaminen olion sisäiseen muuttujataulukkoon voi muodostua ongelmaksi, jos asiakaslaitteen muisti on hyvin pieni tai sivua pidetään auki hyvin pitkiä aikoja. Käytännössä selainkäyttöliittymän tarkoituksen mukaisessa demokäytössä ongelmaa ei muodostu. 5.1 Käyttöliittymäkuvaus Selainkäyttöliittymän aloitussivulla (kuva 5.1) näkyy käyttäjälle taulukoituna säätiedot. Oletuksena tietoja yritetään hakea Web Serviceltä ja päivittää verkkosivun näkymään automaattisesti tietyin väliajoin. Aloitussivulla oleva teksti kertoo päivitysvälin sekä ilmoittaa mikäli Web Serviceen ei saatu yhteyttä edellisellä päivityksen

16 5. Selainkäyttöliittymän toteutus 12 yrityskerralla. Säätiedot-välilehti avaa aloitussivuna näytettävän säätiedot esittävän alasivun. Info-välilehti avaa alasivun, jossa on yleistä tietoa toteutetusta selainkäyttöliittymästä ja sen toiminnasta. Debugnäkymä-välilehden kautta on mahdollista tarkkailla säätietoja kuten pääsivullakin. Fake-valinnalla voi valita haetaanko säätietoja Web Serviceltä, vai käytetäänkö testisäätietoja. Debug-valinnalla voi kytkeä debug-tulosteiden esittämisen päälle. Debug viestejä tulostetaan debugnäkymä-alasivun alaosaan. Debug tulosteiden avulla on mahdollista tarkkailla ohjelman sisäistä toimintaa. Debug-toiminto sisällytettiin myös lopulliseen selainkäyttöliittymään, sillä se toimii esimerkkinä dynaamisesta verkkosivun toiminnasta ja sisällön päivittämisestä DOM:n avulla. Säätietojen päivitysväli -ruudun avulla on mahdollista vaihtaa automaattisen säätietojen päivityksen väliä tai kytkeä automaattinen päivitys pois käytöstä tyhjentämällä kenttä tai syöttämällä siihen 0. Debugnäkymä-alasivulla on mahdollista myös päivittää tietoja manuaalisesti Päivitä-painiketta napsauttamalla. Debugnäkymäalasivun fake- ja säätietojen päivitysväli -valinnat ovat voimassa myös Säätiedotalasivulla. 5.2 Ongelmia toteutuksessa Suurin vastaan tullut ongelma selainkäyttöliittymän toteuttamisessa oli kun XMLHttpRequest-olion avulla yritettiin saada yhteyttä Web Serviceen. Vikaa selvitettäessä kävi ilmi, että XMLHttpRequest-luokka ei salli yhteyttä muuhun kuin sen omaan alkuperäpalvelimeen. (ks. 3.4) Testejä suoritettiin siten, että selainkäyttöliittymään liittyvät tiedostot olivat paikallisella tietokoneella, jonka selaimella käyttöliittymää käytettiin, ja Web Service, jota yritettiin käyttää oli omalla palvelimellaan. Testijärjestelyn takia yhteyden saaminen ei siis ollut mahdollista, vaan toivottu toiminta olisi edellyttänyt, että selainkäyttöliittymän tiedostot olisivat olleet sijoitettuna samalle palvelimelle, jossa Web Service sijaitsee. Työtä toteutettaessa Web Serviceen oltiin yhteydessä ainoastaan aikaisemmin toteutetun ohjelman avulla. Tämä tarjosi kuitenkin mahdollisuuden testata Web Servicen toiminnallisuutta ja SOAP-viestien muotoa. Koska tiedettiin, ettei Web Service kyennyt tarjoamaan oikeita säätietoja tätä työtä toteutettaessa, päätettiin ettei selainkäyttöliittymän tiedostoja edes yritetä testata samalla palvelimella, jolla Web Service sijaitsee. Tämän takia säätietojen noutamiseen liittyvä AJAX-tekniikka jäi testaamatta. Selainkäyttöliittymää toteutettaessa hyödynnettäväksi ajateltu Web Service ei pystynyt tästä työstä riippumattomista syistä palauttamaan todellisia mitattuja säätietoja sääasemalta, ja välillä Web Service ei muutoinkaan palauttanut kuvauksensa mukaista vastausviestiä. Tämän takia selainkäyttöliittymän kehitystä ja testausta varten toteutettiin FakeSOAPMaker-luokka, jonka avulla voidaan tuottaa testisäätietoja. Luokan palauttamat testisäätiedot ovat SOAP-muotoisen viestin sisällä.

17 5. Selainkäyttöliittymän toteutus 13 Testisäätietoja käsitellään scriptissä samalla tavalla kuin Web Serviceltä saatavaa vastausviestiä tulisi käsitellä. Testikäytössä tämän luokan avulla luetaan säätietojen numeroarvot paikallisesta tekstitiedostosta. Kellonaika- ja päivämäärätiedot luokan palauttaman SOAP-muotoiseen viestiin muodostetaan asiakastietokoneen omasta kellosta. Luokka toteutettiin siten, että se on helppo ottaa käyttöön myös muissa opinnäytetöissä, joiden olisi tarkoitus käyttää samaa Web Serviceä. Toteutetun valikko- ja alasivurakenteen toteutustavan takia selainohjelmien takaisin (eng. back) -painike ei toimi toivotulla tavalla. Tämä johtuu siitä, että selaimissa takaisin-toiminto on yleisesti toteutettu viemään takaisin edelliselle verkkosivulle, jolla käsitetään osoiterivillä nykyistä edeltävän URL:n mukaista verkkosivua [9, 10]. AJAX-tekniikoilla toteutettu rakenne päivittää yhden, ja takaisin-toiminnon näkökulmasta samana pysyvän, verkkosivun sisältämiä osia. Toisin sanoen verkkosivun URL on muuttumaton, vaikka esitettävä sisältö saattaa vaihtua. Samasta syystä myöskään muita AJAX-tekniikoilla päivitettyjä verkkosivun osia ei voi selata taaksepäin selaimen takaisin-toiminnon avulla. Esimerkiksi tässä selainkäyttöliittymässä menneiden säätietojen tarkastus takaisin-toiminnon avulla ei ole mahdollista. Samasta syystä aiheutuu myös esimerkiksi se, ettei tiettyä alasivua voi lisätä selaimen kirjanmerkiksi (eng. bookmark).

18 14 6. JOHTOPÄÄTÖKSET Vaikka säätietojen noutoon liittyvä tekniikka jäi testaamattomaksi, voidaan AJAXtekniikkaa pitää toimivana ja hyvänä ratkaisuna tämän kaltaisiin tarkoituksiin. Toteutetun selainkäyttöliittymän alasivun AJAX-rakenteen hyödyntämä XMLHttpRequest-olio toimii odotetulla tavalla. Säätietoja noutavan XMLHttpRequest-olion merkittävin ero alasivun vastaavaan olioon oli, että se yritti olla yhteydessä palvelimeen, joka ei ollut toteutetun selainkäyttöliittymän scriptin alkuperä testejä suoritettaessa. Toisaalta tehdyn testiluokan avulla saatiin testattua, että toteutettu selainkäyttöliittymä pystyi käsittelemään suunnitellulla tavalla Web Servicen SOAP muotoisia vastausviestejä ja päivittämään viestien sisällön käyttäjälle esitettävään näkymään. On perusteltua olettaa, että jos käytetty Web Service toimisi oikein ja selainkäyttöliittymän tiedostot sijoitettaisiin käytetyn Web Servicen kanssa samalle palvelimelle, toimisi myös toteutettu selainkäyttöliittymä toivotulla tavalla, sillä kaikki Web Servicen käyttöön liittyvä toteutettu toiminnallisuus selainkäyttöliittymässä on todettu toimivaksi. Virheiden mahdollisuus on silti olemassa, koska toteutetun selainkäyttöliittymän säätietojen noutokokonaisuutta ei ole testaamalla todettu toimivaksi. Toteutettu verkkosivun valikko- ja alasivurakenne toimii halutulla tavalla. Toteutus oli verrattain yksinkertainen ja sellaisenaan tai pienin muutoksin hyödynnettävissä muissakin kohteissa. Tämän työn puitteissa toteutetun selainkäyttöliittymän ohella ei ole syytä jättää käytettyjen tekniikoiden toimivuutta arvioitaessa huomiotta muita AJAX-tekniikoita käyttäviä verkkosivuja. Näyttönä AJAX-tekniikoiden toimivuudesta toimii verkkosivut kuten Google Maps ja Gmail. Mainittujen verkkosivujen toiminnallisuus perustuu AJAX-tekniikoihin, ja niiden voidaan sanoa olevan hyvin dynaamisia, sujuvatoimisia ja normaalin tietokoneohjelman kaltaisia toiminnallisuudessaan. Eräs AJAX-tekniikoilla toteutettujen verkkosivujen huono puoli on tässäkin toteutuksessa havaittu selainohjelmien takaisin-toiminnon rikkoontuminen. Ongelma on yleisesti tunnettu ja siihen on olemassa ratkaisuja, joihin ei kuitenkaan tämän työn puitteissa tutustuta tai puututa [11, 12]. Tätä voidaan kuitenkin pitää pienenä huonona puolena verrattuna saavutettaviin etuihin.

19 15 7. YHTEENVETO Tämän työn tarkoituksena oli tutustua AJAX-tekniikoihin ja tutkia niiden käyttöä ja toimivuutta toteuttamalla Tampereen teknillisen yliopiston Systeemitekniikanlaitoksen ylläpitämään Vaisala ROSA -sääasemaan selainkäyttöliittymä. Selainkäyttöliittymään toteutettiin AJAX-tekniikoita hyödyntäen seka valikko- ja alasivurakenne, että verkkosivulla esitettävien säätietojen automaattinen päivitys. Säätietojen hankkimisessa suunniteltiin käytettäväksi aiemmin toteutettua Web Serviceä, joka ei kuitenkaan tätä työtä ja siihen liittyvää selainkäyttöliittymää tehdessä ja testatessa toiminut oikein. Tästä syystä osa suunnitellusta toiminnallisuudesta jäi testaamatta. Toteutettu valikko- ja alasivurakenne sen sijaan toimi odotusten mukaisesti. Johtopäätöksenä tehdyn selainkäyttöliittymän sekä muun tutkimuksen pohjalta voidaan todeta AJAX-tekniikoiden olevan käyttökelpoisia ja niiden järkevän käytön parantavan verkkosivun käyttömukavuutta ja lisäävän dynaamisuutta. Lisäksi AJAX-tekniikoiden avulla voidaan vähentää verkkoliikenteen määrää.

20 16 LÄHTEET [1] Jesse James Garrett. Ajax: A New Approach to Web Applications [WWW] Saatavissa: Viitattu [2] Ajax (programming) [WWW]. Saatavissa: Viitattu [3] XHTML2 Working Group Home Page. Saatavissa: Viitattu [4] Extensible Markup Language (XML). Saatavissa: Viitattu [5] Document Object Model (DOM). Saatavissa: Viitattu [6] XMLHttpRequest, W3C Working Draft 19 November Saatavissa: Viitattu [7] Mikko Salonen. Vaisala Rosa -sääaseman etäkäyttö Telit GE863-GPS moduulin avulla. Erikoistyö. Versio: Saatavissa verkkosivulta [8] Michael P. Papazoglou. Web Services: Principles and Technology Pearson. Dorchester, Great Britain. 1. painos. 752 s. [9] Mozilla Firefox -selaimen käyttäjän tukidokumentaatio. Saatavissa: Viitattu [10] Opera-selaimen käyttäjän tukidokumentaatio. Saatavissa: Viitattu [11] Brad Neuberg. AJAX: How to Handle Bookmarks and Back Buttons [WWW] Saatavissa: Viitattu [12] Mike Stenhouse. Fixing the Back Button and Enabling Bookmarking for AJAX Apps [WWW] Saatavissa: Viitattu