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.5 7.3.2014 Pöyry Päivitetty dokumentti vastaamaan tehtyjä muutoksia. 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ää Korkea Kohtalainen Kohtalainen
Skaalautuvuus Käyttäjät Sovelluksen pitää toimia 5000 yhtäaikaisella 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. Kohtalainen Kohtalainen 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. Toteutimme kehykset Android ja ios alustuille. StatbeatMobile-sovellukselle riittää hyvin rajoittunut kehysohjelma, joten sovelluksen porttaaminen myös alustoille onnistuu 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 ladataan JSON-muodossa Statbeat API - palvelimelta jonka rajapinnat ovat asiakkaan toteuttamia. Jouduimme laajentamaan asiakkaan tarjoamaa rajapintaa muutamissa tapauksissa käyttökokemuksen parantamiseksi. Käytimme myös jonkin verran aikaa asiakkaan rajapinnan virheiden selvittelyyn ja raportointiin. Asiakkaan toiveesta sovellus käyttää AngularJS-kirjastoa, vaikka ryhmän kehittäjillä ei ole aiempaa kokemusta kyseisestä kirjastosta. AngularJS-kirjasto tuntui ihan hyvä valinta, vaikka joidenkin asioiden kohdalla törmäsimme korkeaan aloituskynnykseen. Varsinkin testausjärjestelmän käyttöönotto voi paljon ennakoitua enemmän aikaa.
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. Toteutimme tämän pollaamalla, eli kyselemällä Statbeat API -palvelimelta uusista muutoksista tietyin aikavälein (kuva 3). Suunnitelmissa oli myös tämän toiminnallisuus toteutuksen siirto Google Cloud Messaging for Android -palvelun huolehdittavaksi Android alustalla ja Apple Push Notification service -palvelulle ios puolella. Tämä ratkaisu säästää päätelaitteen virrankulutusta, sekä on nopeampi huomaamaan muutokset. Koska palveluiden käyttöönotto vaatii pientä byrokratiaa ja muutoksia Statbeat API -palvelimeen, emme päättäneet toteuttaa näitä ominaisuutta. Natiivien ohjelmien rakenne on niin yksinkertainen, että tämän ominaisuuden toteuttaminen ei vaadi niihin merkittäviä muutoksia, jos ne päätetään toteuttaa tulevaisuudessa. Natiivi applikaatio huolehtii uusien muokkausten hakemisesta serveriltä. Käyttäjätestauksen perusteella päätimme koota kaikki eri viestit yhteen mobiililaitteessa näkyvään notifikaatioon. Kyseisen viestin sisältö rakennetaan jo serverin puolella, joten sen muokkaus on hyvin helppoa. Tämä ratkaisu on hyvin yksinkertainen natiivin ohjelman näkökulmasta, ohjelmalla on maksimissaa vain yksi näkyvä notifikaatio. Lisäksi se mahdollistaa viestien rakenteen muokkausen suoraan serverin lähdekoodista.
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 onnotificationactivate() Kun käyttäjä aktivoi notifikaation HTML5 -> Native isapplicationactive() clearnotificationmessages() getcurrentplatform() setloginstatus(id) Onko ohjelma auki Poistaa ilmoituksen näkyvistä Palauttaa tiedon natiivista kerroksesta Ilmoittaa natiiville kerrokselle sisäänkirjautumisen onnistumisen