Tekninen suunnitelma - StatbeatMOBILE Versio Päivämäärä Henkilö Kuvaus 1.0 13.12.2013 Pöyry Alustava rakenne ja sisältö 1.1 22.12.2013 Pöyry Lisätty tekstiä ilmoituksiin, turvallisuuteen ja sisäiseen API:in 1.2 1.1.2014 Raivio Lisätty tekstiä HTML5 sovelluksen sisäiseen rakenteeseen, korjattu kirjoitusvirheitä 1.3 17.1.2014 Westin Pieniä viilauksia, korjattu kirjoitusvirheitä 1.4 24.1.2014 Westin Viilattu lukua 1. Päivitetty dokumentin formaattia ja lisätty sisällysluettelo. 1. Johdanto 1.1 Sidosryhmät/Osakkaat 1.2 Arkkitehtuurilliset huolet 2. Käytetyt teknologiat 3. Korkean tason arkkitehtuuri 3.1 Ilmoitusten tekninen toteutus 4. Tietoturva 5. HMTL5-sovelluksen sisäinen rakenne 6. Lista sovelluksen sisäisen API:n rajapinnan funktioista 1. Johdanto Tämä dokumentti sisältää StatbeatMobile-sovelluksen teknisen kuvauksen. Sovelluksen arkkitehtuurissa on huomioitu sovelluksen jatkokehitystarpeet, jotta jatkokehitys olisi mahdollisimman helppoa. Asiakkaan toiveiden mukaisesti kaikki natiivit komponentit on rakennettu mahdollisimman kevyiksi ja yksinkertaisiksi, jottei niihin tarvitsisi jatkokehityksessä
koskea. Mahdollisimman suuri osa sovelluksesta on päivitettävissä ilman että natiiveihin komponentteihin tarvitsee koskea. 1.1 Sidosryhmät/Osakkaat Rakennettavalla sovelluksella tulee olemaan kaksi eri sidosryhmää, kehittäjät ja käyttäjät, joiden vaatimukset vaikuttavat sovelluksen arkkitehtuuriin. Sidosryhmä Kehittäjät Käyttäjät Kuvaus Fastmonkeys yrityksen työntekijät, jotka kehittävät Statbeat-palvelua ja jotka ottavat myöhemmin StatbeatMobile-sovelluksen jatkokehityksen vastuulleen. Statbeat palvelun käyttäjät (asiakkaat), jotka haluavat käyttää palvelua mobiililaitteella. 1.2 Arkkitehtuurilliset huolet Huoli Sidosryhmä Kuvaus Arkkitehtuurinen merkittävyys Toiminnallisuus Kehittäjät, Käyttäjät Sovelluksen pitää täyttää vaatimusmääri ttelyssä listatut toiminnallisuudet Jatkokehitys Kehittäjät Sovelluksen pitää olla mahdollisimman helposti jatkokehitettävissä. Sovelluksen nopeus Käyttäjät Sovelluksen pitää toimia mahdollisimman nopeasti, jotta sen käyttö on miellyttävää Skaalautuvuus Käyttäjät Sovelluksen pitää toimia 5000 yhtäaikaisella Korkea
käyttäjällä Tuki eri alustoille Käyttäjät Käyttäjillä on mobiililaitteita, joissa on eri käyttöjärjestelmä. Sovelluksen pitäisi toimia mahdollisimman monella laitteella. Tuki eri näyttökoille Käyttäjät Sovelluksen tulee toimia hyvin eri kokoisilla laitteilla. Alhainen 2. Käytetyt teknologiat Asiakkaan vaatimusten pohjalta päädyimme rakentamaan sovelluksen päätoiminnallisuuden html5-teknologioilla. StatbeatMobile-sovellus koostuu siis natiivista kehyksestä, jonka sisällä on html5-sovellus (Kuvassa 1. on kuvattu käytetyt teknologiapinot). Suurin osa toiminnallisuudesta on html5-sovelluksessa ja natiivi kehys vain tarjoaa html5-sovellukselle sen tarvitsevat tiedot. Emme käyttäneet valmiita hybridi-applikaatiokirjastoja vaan päädyimme rakentamaan oman kehyksen, koska mikään testatuista hybridi-applikaatiokirjastoista ei ollut tarpeeksi sulava. StatbeatMobile-sovellukselle riittää hyvin rajoittunut kehysohjelma, joten sovelluksen porttaaminen muille alustoille pitäisi onnistua helposti. Html5-sovellus on rakennettu yksittäisen verkkosivun päälle, jota muokataan serveriltä pyydettyjen tietojen pohjalta. Tämän ratkaisun tarkoituksena on vähentää sovelluksen käyttäjälle näkyvää tietojen hausta johtuvaa hitautta. Kun sovelluksen ei tarvitse ladata jokaista näytettävää sivua, vaan haetaan vain tarvittavat tiedot, vie tietojen haku vähemmän aikaa ja käyttäjän havaitsema viive on pienempi. Tiedot ladataaan JSON-muodossa Statbeat API - palvelimelta jonka rajapinnat ovat asiakkaan toteuttamia. Asiakkaan toiveesta sovellus käyttää AngularJS-kirjastoa, vaikka ryhmän kehittäjillä ei ole aiempaa kokemusta kyseisestä kirjastosta. Html5-sovellus ladataan ohjelman käynnistyksen yhteydessä Statbeat Mobile -palvelimelta, joka on hyvin yksinkertainen staattisia sivuja jakava palvelin ja käyttää Ngix-palvelinohjelmistoa. Alunperin tarkoituksena oli käyttää Amazon S3 -tiedostopalvelua, mutta asiakkaan SSLsertifikaattiongelmien takia päädyimme käyttämään Herokua. Palvelinta siis ajetaan Herokun pilvipalvelussa, jonka asiakas tarjosi käyttöömme. Herokun käyttö mahdollistaa palvelinkapasiteetin kasvattamisen tarvittaessa todella helposti selaimella.
Kuva 1. Asiakas- ja serveriohjelmistojen teknologiapinot 3. Korkean tason arkkitehtuuri Sovelluksen yleisnäkymä on kuvattu kuvassa 2. Kuva 2. Applikaation yleisnäkymä
Sisäinen API tarkoittaa kaikkia kehysohjelman tarjoamia asioita, joita html5-sovellus voi käyttää. Tämä sisältää esimerkiksi natiivien ilmoitusten luonnin ja sovelluksen aktiivisuuden kyselyn. Tarkempi listaus kaikista rajapinnan ominaisuuksista lisätään tämän dokumentin loppuun. 3.1 Ilmoitusten tekninen toteutus Sovelluksen pitää saada tieto uusista ilmoituksista mahdollisimman nopeasti. Aluksi tämä toteutetaan pollaamalla, eli kyselemällä Statbeat API -palvelimelta uusista muutoksista tietyin aikavälein (kuva 3). Myöhemmin tämä toiminnallisuus voidaan siirtää Google Cloud Messaging for Android -palvelun huolehdittavaksi. Tämä ratkaisu säästää päätelaitteen virrankulutusta, sekä on nopeampi huomaamaan muutokset. Tämän palvelun käyttöönotto vaatii kuitenkin pientä byrokratiaa ja muutoksia Statbeat API -palvelimeen, minkä takia tämä ominaisuus toteutetaan vasta tärkeämpien ominaisuuksien jälkeen. Natiivi applikaatio huolehtii uusien muokkausten hakemisesta, mutta Html5-sovellus tekee päätöksen siitä, näytetäänkö saatu ilmoitus sovelluksen käyttäjälle. Tämä ratkaisu mahdollistaa ilmoitusten näkyvyyden muuttamisen ilman, että natiiviin applikaatioon tarvitsee koskea. Näin helpotetaan ohjelman toiminnallisuuden muokkausta asiakkaalle, kun logiikan muutos on mahdollista tehdä helposti muokattavan html5-sovelluksen puolella. Kuva 3. Ilmoitusten haku pollaamalla
Kuva 4. Ilmoitusten haku Googlen Cloud Messaging palvelun kautta 4. Tietoturva Kaikki kommunikaatio Statbeat Mobile- ja Statbeat API- palvelimien kanssa tapahtuu HTTPSprotokollaa käyttäen. Tämä estää sovelluksen tai sen tietojen peukaloinnin käytettäessä sovellusta salaamattomissa verkoissa. Ohjelma tunnistautuu Statbeat API palvelimelle evästeen avulla. Evästeelle asetetaan secure-lippu päälle, jolloin javascriptilla ei pääse käsiksi evästeen sisältöön. Palvelin asettaa evästeen onnistuneen kirjautumisen yhteydessä, ja sovellus lähettää evästeen jokaisen pyynnön yhteydessä. Kaikki sovelluksessa näkyvät linkit, jotka johtavat sovelluksen ulkopuolelle, avataan aina uudessa selainikkunassa. Tällä ratkaisulla pyritään selkeyttämään ohjelman toimintaa, sekä välttämään mahdollisia tietoturvaongelmia. Harkitsemme myös mahdollisuutta jakaa sovelluksen kirjautumisen yhteydessä saatu eväste natiivin selaimen kanssa, koska tämä mahdollistaisi siirtymisen sovelluksesta selaimen puolelle ilman erillistä kirjautumista. 5. HMTL5-sovelluksen sisäinen rakenne Single page app -> Tarpeellisia osia sivusta päivitetään käyttäjän toiminnan mukaan Tarvittavat tiedot haetaan Statbeat API -palvelimelta json muodossa Angular.js kirjasto hoitaa tiedon hakemisen serveriltä ja dynaamisen päivittämisen sivulle
6. Lista sovelluksen sisäisen API:n rajapinnan funktioista Native -> HTML5 OnServerEvent(msg) OnLogin() OnNotificationActivate(event) Kun serverillä on tapahtunut jokin muutos Kun natiivi ohjelma on suorittanut kirjautumisen Kun käyttäjä aktivoi jonkin notifikaation HTML5 -> Native isapplicationactive() createnotificationmessage(msg) removenotificationmessage(msg) getcurrentplatform() setloginstatus(id) Onko ohjelma auki Luo natiivin ilmoituksen käyttäjälle Poistaa ilmoituksen Palauttaa tiedon natiivista kerroksesta Ilmoittaa natiiville kerrokselle sisäänkirjautumisen onnistumisen