HTML5 as a cross platform technology for the mobile application development

Abstract

Mobile phone industry is at its best in today’s world. Since the launch f iPhone in 2007 and introduction of various new operating systems, the world has seen a rapid development in new dimensions of technology. HTML5 originally build for web technologies is one of them. HTML5 with its extended features over its previous version, projects its potential beyond just web applications. This thesis is focused on the potentiality of HTML5 to develop cross platform mobile application.

The research topic on the field of HTML5’s two important elements Canvas and Geo-location was assigned to me by a Finland based company, Comvise. An extensive research was done to illustrate HTML5’s capabilities and compatibilities across different mobile operating systems.

A hybrid application was developed using web technologies HTML, JavaScript and CSS. JQuery mobile was used for the user interface framework and PhoneGap’s PhoneGap Builder for the compilation of source codes. In addition to verifying the HTML5’s cross-platform nature on mobile operating systems, this thesis explained the ability to compile a source code without having to install separate SDK and IDE for each operating systems.

The developed demonstrative application utilizes the compatible features of HTML5 canvas to make animation rendering. HTML5 geo-location with PhoneGap API is used to extract geographical co-ordinates from the mobile device through an abstraction layer. The obtained geographical co-ordinates are used to show the device location in the Google “road type” map. Features like Google’s satellite map and street-view are enabled within the application. The application was built across iOS, Android, Windows Phone, BlackBerry, Symbian and WebOS.

Matkapuhelinteollisuus on parhaimmillaan nykymaailmassa. iPhonen julkaisusta vuonna 2007 ja uusien käyttöjärjestelmien käyttöönotosta, maailma on nähnyt nopeaa kehitystä sekä uusia ulottuvuuksia tekniikassa. HTML5, alunperin rakennettu web-teknologia, on yksi niistä. HTML5:ssä ja sen lisäosissa on paljon potentiaalia muuhunkin kuin vain verkkosovelluksiin. Tämä työ keskittyy HTML5:n kehitysmahdollisuuksiin mobiilisovellusten tuottamiseen eri alustoille.

Työn aiheena on HTML5:n kaksi tärkeintä osa-aluetta, Canvas ja Geo-paikannus, ja se tuli suomalaiselta yritykseltä Comvise. Eri mobiilikäyttöjärjestelmien yhteensopivuuden ja mahdollisuuksien esittäminen HTML5:llä vaati laajaa tutkimustyötä.

Hybridisovellus kehitettiin HTML:ää, JavaScriptiä ja CSS:ää käyttämällä. JQuery mobilea käytettiin käyttöliittymän luomisessa, ja PhoneGapin PhoneGap Builderia lähdekoodin kääntämisessä. HTML5:n mobiilikäyttöjärjestelmien alustojen osoittamisen lisäksi tämä työ selittää lähdekoodin kääntömahdollisuuden ilman, että erillisiä SDK:ta ja IDE:tä tarvitsee asentaa käyttöjärjestelmään.

Kehitetty havainnollinen sovellus hyödyntää yhteensopivat ominaisuudet HTML5 kankaalle tehdäkseen animaatiomallin. HTML5 geo-paikantajaa on käytetty erottamaan maantieteelliset koordinaatit mobiililaitteen kautta PhoneGap API:n kanssa. Maantieteellisiä koordinaatteja käytetään näyttämään laitteen sijainti Googlen”road type”- kartalla. Ominaisuudet kuten Googlen satelliittikartta ja katunäkymä ovat käytössä sovelluksessa. Sovellus on rakennettu iOS:lle, Androidille, Windows Phonelle, BlackBerrylle, Symbianille ja WebOS:lle.