Pyry-Pekka Kujala. jqtouch-sovelluskehys

Transkriptio

1 Pyry-Pekka Kujala jqtouch-sovelluskehys Liiketalous ja matkailu 2012

2 2 VAASAN AMMATTIKORKEAKOULU Tietojenkäsittely TIIVISTELMÄ Tekijä Pyry-Pekka Kujala Opinnäytetyön nimi jqtouch-sovelluskehys Vuosi 2012 Kieli suomi Sivumäärä 38 Ohjaaja Klaus Salonen Opinnäytetyöni käsittelee jqtouch-sovelluskehyksen käyttöä. jqtouch on mobiililaitteille kehitetty alusta, jonka avulla verkkosivujen teko mobiililaitteille optimoituun muotoon on helppoa ja nopeaa. Monet valmiit elementit auttavat sivuston suunnittelussa ja rakentamisessa. Toteutan opinnäytetyönä yksinkertaisen sovelluksen, joka esittelee jqtouchin päätoiminnot. Niihin kuuluu mm. valikkojen rakentaminen ja komentosarjakielen käyttö. Työssä käydään läpi myös kuva-albumin tekoa ja sijainnin määrittämistä. Työ sisältää valmiita koodiosioita varsinaisesta mobiilisovelluksesta. jqtouch-sovelluskehyksen, HTML:n ja CSS-tyylitiedoston avulla voidaan rakentaa yksinkertaisia verkkosovelluksia. Monimutkaisten sovellusten kehittämiseen tarvitaan vahva osaaminen Javascript-komentosarjakieltä. Avainsanat mobiililaitteet, sovelluskehykset, HTML, ohjelmointi

3 3 VAASAN AMMATTIKORKEAKOULU UNIVERSITY OF APPLIED SCIENCES Tietojenkäsittely ABSTRACT Author Pyry-Pekka Kujala Title jqtouch framework Year 2012 Language Finnish Pages 38 Name of Supervisor Klaus Salonen This thesis covers the use of jqtouch framework. jqtouch is developed for mobile devices, which helps building web sites optimized for handheld devices. Many existing elements help in designing and building web sites. A simple application that presents the main features of jqtouch was developed for this thesis. These features consist of developing a menu structure and the use of script language. The application also includes the development of a gallery and geolocation. This thesis includes examples of complete code snippets. With jqtouch, HTML and CSS it is possible to build simple mobile web applications. When there is a need to build more complicated applications, good knowledge of Javascript is necessary. Keywords Mobile Devices, Application Framework, HTML, Programming

4 4 SISÄLLYS TIIVISTELMÄ ABSTRACT 1 JOHDANTO JQTOUCH Yhteinen kieli jqtouchin luoja Hyödyt ja haitat SUUNNITTELU jqtouch-sovelluskehyksen lataaminen Perusrakenne Sivurakenne Videon toisto Sijainti Yhteydenottolomake Canvas-elementti Musiikkisoitin TOTEUTUS Kohderyhmät ja toimeksiantaja Lähtötilanne Esimerkkisivun lataaminen Etusivu ja painikkeiden teko Mediasivut Kuva-albumi Paikkatiedon hakeminen Yhteydenottolomake Kellon toteuttaminen canvas-elementillä Musiikkisoittimen toteutus JOHTOPÄÄTÖS LÄHTEET... 38

5 5 KUVA- JA TAULUKKOLUETTELO Kuva 1. Mobiilialustojen ohjelmointikielet. 9 Kuva 2. Pöytäkonenäkymä Facebook-kirjautumisikkunasta. 11 Kuva 3. Mobiiliselainnäkymä Facebook-kirjautumisikkunasta. 12 Kuva 4. Yläpalkki. 15 Kuva 5. Listat. 17 Kuva 6. Etusivu. 27 Kuva 7. Kuva-albumin pikkukuvat. 29 Kuva 8. Kuva-albumin kuva. 30 Kuva 9. Sijainti kartalla. 31 Kuva 10. Yhteydenottolomake. 33 Kuva 11. Canvas-elementti. 34 Kuva 12. Musiikkisoitin. 36 Taulukko 1. Yläpalkin lisääminen ja määrittely. 14 Taulukko 2. Listat. 15 Taulukko 3. Yksittäisten painikkeiden teko. 16 Taulukko 4. Listaelementti. 18 Taulukko 5. Määränpääsivu. 19 Taulukko 6. Video-tunnisteen käyttö. 19 Taulukko 7. Sijainnin määrittäminen. 20

6 6 Taulukko 8. Sijainnin näyttäminen. 21 Taulukko 9. Virheiden esittäminen. 21 Taulukko 10. Kartan esittäminen sivulla. 22 Taulukko 11. Lomakkeen lähetys. 23

7 7 1 JOHDANTO Työn tavoitteena on perehtyä jqtouch-sovelluskehyksen toimintaan ja sen käyttöön. Älypuhelimien yleistymisen takia aihe on ajankohtainen. Monet yritykset haluavat erottua tietokoneille suunnattujen verkkosivujen lisäksi myös mobiililaitteille optimoiduilla verkkosivuilla. Toimeksiantajana työlle toimii työn tekijä. Kohderyhmä työlle on ystäväpiiri. Tarkoituksena on esitellä jqtouchin käyttömahdollisuuksia. Työssä käydään läpi sivustojen perusrakennetta ja muutamia toimintoja, joita voidaan toteuttaa hyödyntäen HTML5:ttä, CSS-tyylitiedostoja ja Javascript-komentosarjakieltä.

8 8 2 JQTOUCH 2.1 Yhteinen kieli Maailma on täynnä eri päätelaitteita ja monia eri ohjelmointikieliä. Kukaan ei osaa kaikkia kieliä ja näin ollen pitää suuntautua tiettyyn kieleen tai alustaan. HTML on yhteinen kieli, jota kaikki alustat ymmärtävät riippumatta siitä, onko kyseessä puhelin, taulutietokone tai pöytätietokone Internetin yleisin merkintäkieli HTML on päässyt jo viidenteen versioonsa. Tämä versio tuo mukanaan huimia uudistuksia liittyen juuri tähän yhtenäistämiseen eri alustojen välillä. HTML merkintäkielenä on siitä hyvä, että se on kieli, joka on helppo omaksua, dokumentteja ja ohjeita löytyy valtavasti ja sen kirjoittaminen ei vaadi muuta kuin tekstinkäsittelyohjelman ja internetselaimen. HTML5:n yleistyessä tarjolle on tullut monia helpottavia kehitystyökaluja mobiilialustoille, jotka hyödyntävät juuri HTML-, CSS- ja Javascript-kieliä. jqtouch on yksi suosituimmista iphonelle käytettävistä sovelluskehyksistä, joka toimii yhteistyössä HTML5:n kanssa. Kuvassa 1 on esiteltynä eri mobiilialustat ja niiden ohjelmointikielet. iphonen pääasiallinen ohjelmointikieli on Objective-c, Androidin ja Blackberryn Java ja Windows-puhelinten C#. Jos oman sovelluksensa haluaa toimivan jokaisella alustalla, tulee se kääntää usealle eri kielelle. Tämä aiheuttaa sen, että sovellukseen käytettävä aika ja raha on monelle yritykselle liikaa, jolloin tulee valita vain tietty alusta, jolle sovellus kehitetään. Verkkosovelluksen hyötynä on sen käyttämä kieli. Jokainen mobiilialusta ymmärtää verkossa yleisimmin käytettäviä kieliä, HTML, CSS ja Javascript. Kun sovellus on tehty, se toimii lähes kaikilla alustoilla ja sen kääntäminen natiiviksi sovellukseksi onnistuu PhoneGap-kehitystyökalulla.

9 9 Kuva 1. Mobiilialustojen ohjelmointikielet 2.2 jqtouchin luoja jqtouch on David Kanedan luoma ja Jonathan Starkin ylläpitämä kehitystyökalu mobiilialustoille. Sen avulla pystyy vaivattomasti luomaan kämmenlaitteille optimoituja verkkosivuja ja verkko-ohjelmia. jqtouch hyödyntää HTML-, CSS- ja jquery -tekniikoita. Käyttäen vain näitä tekniikoita pystyy luomaan lähes yhtä rikkaita sovelluksia ominaisuuksiltaan kuin varsinaisilla ohjelmointikielillä kirjoitetuissa sovelluksissa. jqtouch on osa Sencha Labs -yritystä, joiden tuotteita ovat mm. Sencha Touch ja Sencha Animator. Sencha Touch on hieman vastaava kuin jqtouch, mutta on suunnattu enemmän ohjelmistokehittäjille. Sen ydin mahdollistaa tekemään optimoidumpia ja kevyempiä sovelluksia kuin jqtouch. Sencha Touch tarjoaa suuremman määrän ominaisuuksia ja komponetteja, joten se sopii täten paremmin mobiilikehittäjille, jotka haluavat rakentaa monipuolisempia ulkoasuja ja toimintoja sovellukseensa.

10 Hyödyt ja haitat Mikä on verkkosovellus? Verkkosovellus on selaimessa toimiva sivusto, jonka sisällöllä ei sinänsä ole merkitystä. Se voi olla kaikkea mainossovelluksien ja monimutkaisten kuntoilusovelluksien väliltä. Verkkosovelluksia ei siis asenneta itse laitteeseen, vaan ne toimivat verkkopohjaisesti selaimessa. Etuna on, että voit käyttää sovellusta missä vain ja miltä laitteelta vain. Verkkosovellukset on kehitetty niin, että ne skaalautuvat näytölle riippuen käytössä olevan laitteen ominaisuuksista. Tämä tarkoittaa sitä, että pöytätietokoneella sovellus näyttää version, joka on optimoitu suurelle näytölle ja käytettäväksi hiirellä (Kuva 2.). Mobiililaitteella sovellus on optimoitu pienemmälle näytölle ja käytettäväksi koskettamalla näyttöä (Kuva 3.). Verkkosovelluksia ei voi myydä sovelluskaupoissa. Miten verkkosovellukset eroavat natiivisovelluksista? Natiivisovellus on kirjoitettu käyttäen ohjelmointikieltä, joka on tarkoitettu tietylle alustalle, esimerkiksi ios käyttää Objective-C-ohjelmointikieltä. Tämä tarkoittaa sitä, että jos haluaa tehdä sovelluksen, tulee osata tietty ohjelmointikieli. Jos haluaa sovelluksen useammalle alustalle toimivaksi, tulee osata myös niiden ohjelmointikielet. Natiivisovellusten etuna on se, että niiden avulla on mahdollista käyttää laitteen ominaisuuksia paremmin hyväksi, esimerkiksi kameraa. Natiivisovelluksille on myös oma kanava, jonka kautta kehittäjät voivat levittää niitä. Applen sovelluskauppa on nimeltä App Store, Android-sovelluksille on Google Play ja Windows Phonelle on Marketplace. Haittoina voidaan luetella kynnys opiskella uusi kieli, elleivät esimerkiksi ios:n ja Androidin ohjelmointikielet ole entuudestaan tuttuja, kehittäjiltä vaadittava vuosimaksu tai kertamaksu, päivitysten hitaus ja hyväksymisprosessi. Jotta sovelluksen saa myyntiin sovelluskauppaan, tulee maksaa joko vuosimaksu tai kertamaksu. Apple- ja Windows Phone-kehittäjien vuosimaksu on 99 dollaria ja Androidilla 25 dollarin suuruinen kertamaksu. Jokainen sovellus käy läpi hyväksymisprosessin, ennen kuin ne päätyvät kauppaan. Pahimmillaan siihen prosessiin menee viikoista kuukausiin.

11 11 Verkkosovellusten hyöty on siinä, että ne ovat alustariippumattomia. Sovellus toimii kaikissa laitteissa, joissa on internet ja selain. Sovellusten päivittäminen on paljon helpompaa ja nopeampaa. Jos huomaa sovelluksessa ohjelmavirheen, pystyy sen välittömästi korjaamaan. Suurimpina haittoina on, että verkkosovellukset eivät voi hyödyntää samalla lailla kaikkia päätelaitteen ominaisuuksia. Toinen ongelma verkkosovelluksissa on niistä saatava raha. Natiivisovelluksilla on kauppa, josta raha tulee, mutta verkkosovelluksiin tulee kehittää oma maksusysteemi, jos aikoo ansaita niillä. Kuva 2. Pöytäkonenäkymä Facebook-kirjautumisikkunasta.

12 k-kirjautumisikkunasta. 12

13 13 3 SUUNNITTELU Sovelluksen tavoite on esitellä jqtouchin ja HTML5:n keskeisimmät ominaisuudet. Näihin lukeutuu mm. videon ja äänen toisto, lomake, kuva-albumi, sijaintitiedon hakeminen ja muokattujen määritelmien lisäys. 3.1 jqtouch-sovelluskehyksen lataaminen Sivuston valmistus aloitetaan lataamalla jqtouch-sovelluskehys osoitteesta Haettu sovelluskehys sisältää kaiken tarpeellisen mobiiliverkkosovelluksen tekoon. Tärkeimmät tiedostot, jotka tekevät sovelluksen rakentamisesta nopeaa ja helppoa ovat: CSS-tyylitiedostot. Nämä sisältävät valmiiksi määritellyt tyylit mm. listoille ja painikkeille. Kaikki tyylit ovat tehty noudattaen Applen ios-tyyliä ja tehty mahdollisimman tarkkaan jäljittelemään alkuperäistä. Tyylien muokkaaminen oman näköiseksi on helppoa hyödyntäen valmiita määrittelyjä. JQueryn Javascript-kirjasto sisältää funktioita, joilla mm. käyttäjän vaihtaessa sivua, saadaan liikkuva siirtymä sivujen väliin. Tämän kirjaston avulla sovelluksiin saadaan samaa käyttäytymistä kuin natiiveissa iossovelluksissa. Laajennukset sisältävät valmiit JQuery-funktiot mm. paikantamiselle ja yhteydettömälle tilalle. 3.2 Perusrakenne Sovelluksen perusrakenne koostuu kahdesta pääkohdasta. Jokaisen sivun ylälaidassa on palkki (toolbar), joka sisältää sen hetkisen sivun nimen ja mahdollisia painikkeita. Palkin lisääminen onnistuu muutamalla rivillä koodia (Taulukko 1).

14 14 Taulukko 1. Yläpalkin lisääminen ja määrittely. <div class="toolbar"> <h1>otsikko</h1> <a href="# " class="back">sivun nimi</a> </div> Yläpalkin lisääminen tapahtuu lisäämällä div-elementti, jonka luokkana toimii toolbar. Toolbar-luokka on määritelty jqtouchin tyylitiedostoissa ja sen käyttäytyminen jquery-tiedostoissa. Yläpalkki on määritelty sivun yläreunaan. Otsikko laitetaan h1-tunnisteisiin. Otsikko on valmiiksi muotoiltu ja tulee oikeaan kohtaan. Painikkeiden lisääminen yläpalkkiin onnistuu a-tunnisteella. Sen avulla määritellään, mille sivulle painike vie ja mitä siirtymää käytetään. Jos halutaan sivun siirtyvän edelliselle sivulle, luokaksi laitetaan back. (Kuva 4).

15 15 Kuva 4. Yläpalkki. Perusrakenteeseen kuuluu myös listat, joiden avulla sivulle saadaan painikeryhmiä. Seuraavassa koodissa nähdään, kuinka listojen luominen jqtouchissa onnistuu (Taulukko 2). Taulukko 2. Listat. <ul class="rounded"> <li class="arrow"> <a href="#eka"><img src="kuvat/bird.png">linnut</a> </li> <li class="arrow">

16 16 </ul> <a href="#eka"><img src="kuvat/coffee.png">kahvit</a> </li> <li class="arrow"> <a href="#eka"><img src="kuvat/box.png">laatikot</a> </li> Listat aloitetaan ul-tunnisteella, jonka luokaksi määritellään rounded. Roundedluokka on valmiiksi määritelty luokka, joka tekee listoista pyöreäreunaisia ja tasaisia (Kuva 5). Listaan saadaan lisää painikkeita lisäämällä li-tunnisteita. Painikkeisiin saadaan nuolet määrittelemällä listan luokaksi arrow. Se lisää jokaisen painikkeen oikeaan reunaan nuolen, joka antaa ymmärtää, että painiketta painamalla päästään eteenpäin. Jokaisen listaelementin muokkaaminen erikseen onnistuu tyylitiedostojen avulla. Yksittäisten painikkeiden teko onnistuu myös listaelementillä. Seuraavassa koodissa nähdään, kuinka yksittäisten painikkeiden teko onnistuu (Taulukko 3). Taulukko 3. Yksittäisten painikkeiden teko. <ul class="individual"> <li><a "> </a></li> <li><a href="# ">Yhteydet</a></li> </ul> Tällä kertaa ul-tunnisteen luokaksi määritellään individual. Se tekee painikkeista yksittäisiä ja laittaa niitä kaksi rinnakkain (Kuva 5). Yhden ul-tunnisteen sisään voidaan laittaa vain kaksi listaelementtiä, mutta tarvittaessa ul-tunnisteita voi olla monta peräkkäin.

17 17 Halutessaan sivulle infotauluja, se onnistuu luomalla div-elementin, jonka luokaksi määritellään info. Kun tämän div-elementin sisään kirjoitetaan tekstiä, saadaan valmiiksi muotoiltu infopalkki (Kuva 5). jqtouch tarjoaa monta valmiiksi määriteltyä elementtiä, joiden avulla pystyy helposti ja nopeasti rakentamaan mobiililaitteille optimoituja sivustoja. Edellä kuvatut elementit ovat sivuston rakenteen kannalta olennaisimpia. Niiden avulla pystytään rakentamaan perussivusto, jossa on painikkeita sivuille ja staattista sisältöä. Kuva 5. Listat.

18 Sivurakenne jqtouch tekee navigoinnin sivujen välillä helpoksi. Koko sivusto on kirjoitettu yhteen tiedostoon yksinkertaisissa sivustoissa. Perussivusto sisältää painikkeita ja linkkejä eri sivuston osioihin. Edellä esitetyssä koodissa on esitelty listaelementin rakenne (Taulukko 3). Tutkitaan tarkemmin yhden listaelementin rakennetta (Taulukko 4). Taulukko 4. Listaelementti. <li class="arrow"> <a href="#eka">laatikot</a> </li> Listan elementillä voi olla kolme eri luokkaa. Ensimmäinen on luokaton lista, eli listan elementti ilman nuolta, jolloin sulkeisiin kirjoitetaan vain li. Luokatonta listaa käytetään yleensä, jos painikkeista ei ole tarkoitus painaa tai se ei ole linkki. Seuraavana on li.arrow ja li.forward. Nämä osoittavat listan elementin olevan painettavissa ja johtavan toiselle sivulle. Ylemmässä esimerkissä on käytetty li.arrow- luokkaa. Listan sisällä on ankkurielementti, johon määritellään linkin määränpää. Jos käytetään samassa tiedostossa olevaa määränpäätä, määränpää merkitään käyttäen ristikkomerkkiä (#). Yllä olevassa tapauksessa painike vie sivulle, jonka tunniste on #eka. Jos määränpääsivu on ulkoinen sivu, käytetään suoraa polkua sivuun, esimerkiksi../hinnat.html. Nämä sivut haetaan hyödyntäen AJAX-tekniikkaa. Jotta linkki toimisi, määränpää tulee olla määritelty. Taulukon 4 esimerkissä laatikot-painike vie #eka-sivulle. Tämä sivu tulee merkitä koodiin seuraavalla tavalla (Taulukko 5). Sivun aloittaa <div>-elementti, jonka id:n tulee olla sama kuin siihen johtava linkki. Tässä tapauksessa <div id= eka >. Seuraavaksi sivuston rakenne seuraa perussivun rakennetta (Taulukko 2). Aluksi tulee yläpalkki, jota seu-

19 19 raa otsikko. Yläpalkissa on takaisin-painike edelliselle sivulle. Sivulla ei ole muuta sisältöä. Taulukko 5. Määränpääsivu. <div id="eka"> <div class="toolbar"> <h1>laatikot</h1> <a href="#" class="back">takaisin</a> </div> </div> 3.4 Videon toisto HTML5 tuo mukanaan paljon uusia ominaisuuksia, joita hyödynnän sovelluksessani. Yksi isoimmista uudistuksista HTML5:ssa on videotunniste. Tavoitteena on saada yksinkertainen videosoitin toistamaan videota. Videot on listattuna omalle sivulleen, josta valitsemalla saadaan video näkyviin hyödyntäen ios:n omaa videosoitinta. Aluksi tehdään videoille tarkoitettu sivu ja linkki sivulle. HTML5 tuo videon toistamiseen uuden video-tunnisteen. Sen avulla videoiden lisääminen sivuille on helppoa. Taulukon 6 koodiesimerkki näyttää videotunnisteen käyttöä. Taulukko 6. Videotunnisteen käyttö. <video controls="controls" class="video" poster="poster.png"> <source src="iphone.m4v" media= video/m4v /> </video> Video-osio aloitetaan <video>-tunnisteella, jonka sisälle annetaan attribuutteja, mm. poster, joka antaa videolle kuvan ennen sen toistamista. Controls-attribuutti on boolean-attribuutti, eli se on joko tosi tai epätosi, videolla joko näytetään kont-

20 20 rollit tai ei. Taulukko 6:ssa controls= controls on annettu, joten kontrollit näkyvät videota toistettaessa. Seuraavaksi annetaan polku, josta video löytyy. Polun tunnisteena toimii <source>. Source-tunnisteelle voidaan antaa attribuuteiksi mm. median tyyppi. 3.5 Sijainti jqtouch ei voi hyödyntää ios:n omia sijainninmääritysominaisuuksia, mutta HTML5:n yksi uusista ominaisuuksista on sijaintipalvelut. jqtouchille on kehitetty oma sijaintipalvelu, jonka kehittäminen on kuitenkin lopetettu sen monimutkaisuuden takia. Google tarjoaa valmista ratkaisua, niin verkkosivuille kuin myös mobiilisovelluksille. Koodi koostuu kahdesta osasta. Javascript-osio, joka hakee sijainnin ja määrittää kartan. Ensimmäiseksi määritellään sijainti (Taulukko 7). Tässä osiossa yritetään hakea käyttäjän sijainti ja jos sitä ei saada, näytetään virheilmoitus. Seuraavaksi näytetään saatu sijainti kartalla (Taulukko 8). Kartta sijoitetaan elementtiin, jonka Id on mapholder. Kartan kokoa, karttatyyppiä ja muita asetuksia voidaan määritellä tässä osiossa. Jos sijainnin määrittämisessä, kartan esittämisessä tai joku muu virhe ilmenee, se esitetään käyttäjälle tekstinä (Taulukko 9). Taulukko 7. Sijainnin määrittäminen. function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition,showerror); } else { x.innerhtml="selaimesi ei tue paikkatietoja."; } }

21 21 Taulukko 8. Sijainnin näyttäminen. function showposition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.latlng(lat, lon) mapholder=document.getelementbyid('mapholder') mapholder.style.height='87%'; mapholder.style.width='100%'; } var myoptions={ center:latlon,zoom:15, maptypeid:google.maps.maptypeid.roadmap, maptypecontrol:false, navigationcontroloptions: style:google.maps.navigationcontrolstyle.small} }; var map=new google.maps.map(document.getelementbyid("mapholder"),myoptions); var marker=new google.maps.marker({position:latlon,map:map,title:"olet täällä!"}); Taulukko 9. Virheiden esittäminen. function showerror(error) { switch(error.code) { case error.permission_denied: x.innerhtml="käyttäjä esti sijainnin esittämisen." break; case error.position_unavailable: x.innerhtml="sijaintitieto ei saatavilla." break; case error.timeout: x.innerhtml="sijaintia ei voitu määrittää."

22 22 } } break; case error.unknown_error: x.innerhtml="tuntematon virhe." break; Kun sijainti on saatu haettua ja kartta muokattua halutun näköiseksi, se esitetään omalla sivullaan (Taulukko 10). Kun käyttäjä avaa sivun Sijainti, sen hetkinen sijainti haetaan ja näytetään kartalla. Sivulle märitellään div-elementti, jonka id on mapholder, johon kartta tulee. Jos ilmenee virheitä kartan haussa tai sijainnin määrittämisessä, virheet esitetään tällä sivulla. Taulukko 7 Kartan esittäminen sivulla. <div id="sijainti"> <div class="toolbar"> <h1>sijainti</h1> <a href="#" class="back">takaisin</a> </div> <div id="mapholder"></div> </div> 3.6 Yhteydenottolomake Viestin lähetys on kaksiosainen toiminto. Aluksi käyttäjä kirjoittaa viestin, jonka jälkeen painaa Lähetä-painiketta. Kun Lähetä-painiketta on painettu, viestin lähetys käsitellään palvelimella ja viesti lähetetään. Tämän palvelinpuolen lähettämisen hoitaa process.php-tiedosto. Lomake koostuu viidestä eri tiedosta, joita käyttäjältä pyydetään, etunimi, sukunimi, puhelin, sähköposti ja viesti. Jokaiselle kentälle tulee antaa nimi, jonka mukaan process.php osaa hakea tiedot ja lähettää ne eteenpäin. Nimeämisellä on tär-

23 23 keä merkitys kenttien automaattisessa täytössä. Etunimen tulee olla nimeltään firstname, sukunimen lastname ja sähköpostin . Lähetä-painikkeessa käytetään Javascript-komentoa, jolla lomake lähetetään. Yleensä Lähetä-painikkeelle määritellään arvo submit, mutta koska halusin käyttää jo valmista yksittäispainiketta, en voinut käyttää tavallista button-määritystä (Taulukko 3). Käyttäjän painaessa Lähetä-painiketta, sovellus käynnistää Javascript-koodin (Taulukko 11), jossa on määritelty lomakkeen nimi ja submitkomento. Taulukko 11. Lomakkeen lähetys. function submitform() { document.myform.submit(); } 3.7 Canvas-elementti Canvas-elementin avulla sivuille pystytään piirtämään kuvioita komentosarjakielen avulla, yleensä Javascript. Canvas-elementti on alue, johon kuviot tulee, mutta itse piirtäminen tapahtuu komentosarjakielellä. Canvas-elementillä voidaan tehdä yksinkertaisista liikkumattomista kuvioista aina monimutkaisiin kaavioihin ja liikkuviin kuvioihin. Canvas on yksi HTML5:n uusista ominaisuuksista. 3.8 Musiikkisoitin Soitin koostuu kahdesta osasta, ensimmäinen on komentosarjakieliosa, joka sisältää itse soittimen toiminnon ja toisena osiona on näkyvä osuus, jonka käyttäjä näkee. Komentosarjakieliosuus on valmis koodi, joka sisältää yksinkertaiset toiminnot soittimelle: toisto, tauko ja seuraava kappale.

24 24 Käyttäjälle näkyvä osa eli musiikkisoittimen käyttöliittymä on toteutettu jqtouchin listalla (Taulukko 2). Lista sisältää soitettavat musiikkikappaleet ja siitä voi myös valita soitettavan kappaleen. Toista-, tauko- ja seuraava-painike on toteutettu käyttäen yksittäispainiketta (Taulukko 3). Soittimessa ei ole mahdollista mennä edelliseen kappaleeseen tai lopettaa toistoa. Jos tauko-painiketta painetaan, kappale keskeytyy ja kun painiketta painetaan uudelleen, kappale jatkuu siitä kohdasta, johon se jäi.

25 25 4 TOTEUTUS 4.1 Kohderyhmät ja toimeksiantaja Työn toimeksiantajana toimin minä itse. Halusin käydä läpi jqtouchsovelluskehyksen ja oppia verkkosovellusten tekoa mobiililaitteille. Pääasiallisena kohderyhmänä toimii lähipiirini, mutta työ toimii apuna myös niille, jotka ovat kiinnostuneita verkkosovellusten teosta käyttäen verkkostandardeja. 4.2 Lähtötilanne Näen sovellukselle olevan tarvetta älypuhelinten yleistymisen takia. Monet yritykset haluavat suuntautua myös mobiililaitteille ja antaa asiakkailleen mahdollisuuden asioida verkkosivuilla älypuhelimilla. jqtouch ei ole ainoa sovelluskehys, joka keskittyy mobiililaitteisiin. Muita samankaltaisia kehyksiä ovat mm. jquery Mobile, Sencha Touch ja Titanium Mobile. Keskityn kuitenkin jqtouchiin sen helppouden takia. Minulla ei ole aikaisempaa kokemusta jqtouch-sovelluskehyksestä, mutta HTML- ja CSS-kielissä minulla on hyvät pohjatiedot. Varsinaisista ohjelmointikielistä eri alustoille minulla ei ole niin paljon kokemusta, että pystyisin toteuttaamaan monipuolisia sovelluksia. Tämänkin takia halusin tutustua eri vaihtoehtoihin mobiililaitteille ohjelmoitaessa. 4.3 Esimerkkisivun lataaminen Aloitin sovelluksen tekemisen miettimällä sovelluksen sisällön. Halusin sovellukseen tärkeimmät ominaisuudet ja niille jokaiselle omat sivut. Jokaiselta sivulta tulisi olla painikkeet takaisin etusivulle. jqtouch- paketin lataamisessa ei sinänsä ollut ongelmia. Ongelmat ilmenivät vasta, kun aloin tutkimaan paketin sisältöä. Paketti sisältää esimerkkisivuston, jonka pohjalta voidaan omaa sivustoa rakentaa. Aluksi karsin esimerkkisivustolta kaiken turhan pois ja rakensin perusrungon. Tässä rungossa ei ole mitään sisältöä, vain

26 26 tarvittavat tiedostot ja niihin linkit. Olisin toivonut tyhjää aloituspohjaa jo valmiina, kun paketin latasi jqtouchin sivulta. 4.4 Etusivu ja painikkeiden teko Lähdin tekemään sivustolle etusivua ja siihen tarvittavat painikkeet jokaiselle sivulle. Jaoin etusivun muutamaan osioon, joissa jokaisessa on muutama listapainike (Taulukko 2). Ensimmäiseen osioon tein linkit mediasivuille. Tähän osioon kuuluvat videot ja musiikkisoitin. Toiseen osioon laitoin sekalaisia, esimerkiksi kellon ja sijainnin. Viimeiseen osioon käytin yksittäispainikkeita (Taulukko 3). Tähän osioon kuului yhteydenottolomake ja linkki mobiililaitteen karttasovellukseen. Teemana käytin jqtouchin mukana tullutta Apple-teemaa, jota yksinkertaistin ja muokkasin (Kuva 6). Teeman muokkaaminen onnistui CSS-tyylitiedoston avulla helposti. Ongelmaksi muodostui lähinnä oikean kohdan löytäminen koodista.

27 27 Kuva 6. Etusivu. 4.5 Mediasivut Aluksi aloin tekemään Videotsivua. Käytin tässä HTML5:n videotunnistetta, jonka avulla sain videot näkymään helposti mobiililaitteella. Videoiden listaamiseen sivulla kokeilin aluksi omaa tapaa, jonka huomasin nopeasti huonoksi. Päädyin käyttämään jqtouchin valmista listaelementtiä, jota muokkasin videoille sopivaksi (Taulukko 2). Videoiden listaukseen käytin mm. varjostusta ja reunuksia, jolla sain videot ikään kuin irtautumaan taustasta. Tämä onnistui tekemällä oman CSStyylitiedoston, johon määrittelin videoluokalle arvot. Videoiden muoto tulee olla

28 28.m4v. Aluksi kokeilin.mov-muotoa, joka ei toiminut ollenkaan, samoin.avi- tai.wmv eivät ole tuettuna ios-käyttöjärjestelmässä. Uusien videoiden lisääminen sovellukseen onnistuu helposti lisäämällä listaelementtejä. Videoiden toistoon käytetään puhelimen omaa videosoitinta ja siihen minun ei tarvinnut puuttua. 4.6 Kuva-albumi Kuva-albumin tekemiseen jouduin käyttämään paljon aikaa. Aluksi yritin käyttää jqtouchin valmista albumia, mutta sen kehittäminen oli lopetettu ja se ei enää toiminut uuden version kanssa. Jouduin siis etsimään vaihtoehtoja sille. Internet on pullollaan valmiita ratkaisuja niin verkkosivuille kuin mobiililaitteille. Selasin niitä läpi ja joka kerta törmäsin samoihin ongelmiin, eli koko albumin rakenne hajosi. Kuva-albumien valmiit CSS-tyylitiedostot sekoitti jqtouchin tyylitiedostoja rikkoen albumin. Tästä syystä jouduin hylkäämään valmiit ratkaisut kerta toisensa jälkeen. Lopulta päädyin rakentamaan albumin itse. Käytin albumin rakentamiseen valmiita koodeja, joiden avulla sain albumiin näkymään pikkukuvakkeet (Kuva 7) sekä kuvaketta painaessa kuvan näkymään suurempana (Kuva 8). Sain myös toimimaan pyyhkäisyn, jonka avulla sain kuvan vaihtumaan. Ratkaisu ei ole hyvä, mutta sen avulla kuitenkin sain kuva-albumin toimimaan. Suurin ongelma kuva-albumissa on painikkeiden puute. Käyttäjä ei helposti ymmärrä pyyhkäisemällä vaihtaa kuvaa. Myös yläpalkin näkyminen rajaa kuvasta osan pois.

29 Kuva 7. Kuva-albumin pikkukuvat. 29

30 30 Kuva 8. Kuva-albumin kuva. 4.7 Paikkatiedon hakeminen Halusin sovellukseeni mahdollisuuden nähdä oma sijainti kartalla. Lähtökohtana oli näyttää käyttäjälle kartta, joka näyttää sen hetkisen sijainnin perustuen GPS:ään. Aluksi yritin käyttää jqtouchin omaa sijainnin määrittämistä, mutta sen kehittäminen oli lopetettu, joten jouduin etsimään vaihtoehtoja sille. Käytin sovelluksessani Googlen tarjoamaan valmista koodia, jonka lisäsin sovellukseeni. Sen avulla pystyin määrittelemään, miten käyttäjä näkee kartan ja mitä muokkaamisvaihtoehtoja kartalla näkyy. Koodin suhteen ei oikeastaan ollut on-

31 31 gelmia ja se osasi heti käyttää puhelimen GPS:ää sijainnin määrittämiseen. Kun käyttäjä valitsee valikosta Sijanti-osion, puhelin kysyy, haluaako käyttäjä jakaa sijaintinsa. Kun sijainnin jako on hyväksytty, puhelin hakee sijainnin ja näyttää sen kartalla käyttäjälle (Kuva 9). Kuva 9. Sijainti kartalla. 4.8 Yhteydenottolomake Tarkoitus oli tehdä sivulle lomake, jonka kautta käyttäjät voivat ottaa yhteyttä. Helpompi tapa toteuttaa se olisi käyttää sähköpostilinkkiä, joka avaisi puhelimen oman sähköpostiohjelman. Tämä ei kuitenkaan tunnu hyvältä ratkaisulta käyttäjän

32 32 kannalta, joten tein yhteydenottolomakkeelle oman sivun, jonka kautta käyttäjät pystyvät ottamaan yhteyttä (Kuva 10). Halusin käyttää jqtouchin yksittäispainikkeita Lähetä- ja Kumoa-painikkeina (Taulukko 3). Koska näitä yksittäispainikkeita ei ole määritelty painikkeiksi (button), en voinut käyttää niissä toimintoa submit. Tämä aiheutti ongelmia, koska en saanut lomaketta lähtemään palvelimelle. Löysin ongelmaan ratkaisuksi komentosarjakielellä toteutettavan koodin, joka suoritetaan, kun tiettyä painiketta on painettu, tässä tapauksessa Lähetä-painiketta. Komentosarjakoodi lähettää submit-käskyn lomakkeelle. Näin sain pienellä määrällä koodia hoidettua saman asian kuin, jos painike olisi valmiiksi määritelty buttoniksi. Jos olisin käyttänyt valmiiksi määriteltyä painiketta submit-komennolla, olisin joutunut määrittelemään painikkeiden tyylit alusta, enkä olisi voinut käyttää valmiita yksittäispainikkeita. Viestin tarkistamiseen ja lähettämiseen käytin valmista koodia, jonka olin kirjoittanut aikaisemmin koulutyönä. Jouduin muokkaamaan sitä hieman, jotta sain sen toimimaan sovellukseni kanssa.

33 33 Kuva 10. Yhteydenottolomake. 4.9 Kellon toteuttaminen canvas-elementillä Canvas-elementin tekemiseen minulla ei ole minkäänlaista kokemusta ja tutustuin siihen ensimmäisen kerran sovellusta tehdessäni. Canvas-elementtien piirtämiseen käytetään komentosarjakieltä, josta minulla ei myöskään ole vahvaa osaamista, joten käytin esimerkin havainnollistamiseen valmista koodia. Tein omaan sovellukseeni yksinkertaisen kello-esimerkin, joka esittelee canvaselementin käyttöä (Kuva 11). Käytin tähän valmista Javascript-koodia, jonka avulla piirsin kellon sille varattuun alueeseen. HTML-koodi on vain muutama rivi

34 34 koodia ja on erittäin yksinkertainen toteuttaa. Jos haluaa tehdä monimutkaisia canvas-elementtejä, se vaatii hyvää komentosarjakielen tuntemista. Kuva 11. Canvas-elementti Musiikkisoittimen toteutus Tarkoituksena oli tehdä yksinkertainen musiikkisoitin, joka soittaa musiikkikappaleita ja mahdollistaa kappaleiden vaihdon (Kuva 12). Ajatuksena oli käyttää HTML5:n uutta audio-elementtiä, mutta koska en saanut sitä toimimaan sovelluksessani, jouduin luopumaan siitä ja käyttämään sen sijaan komentosarjakielellä toteutettua soitinta.

35 35 Löysin internetistä valmiin koodin, jolla saisin musiikin soimaan ja listan, jossa olisi eri kappaleita sekä painike, jolla saan seuraavan kappaleen soimaan. Itse soittimen sain toimimaan nopeasti, mutta koska siitä puuttuivat kaikki muotoilut, päätin käyttää jqtouchin omaa listaa (Taulukko 2) ja yksittäispainikkeita (Taulukko 3). Näin sain nopeasti tehtyä selkeän listan, jossa näkyy soitettavat kappaleet ja painikkeet ohjaamaan niitä. Yritin saada musiikkisoitinnäkymään myös soitettavan kappaleen nimen ja etenemisen, mutta en onnistunut siinä. Nyt käyttäjä ei tiedä, mikä kappale soi tai näe kuinka kappale etenee. Tiesin teoriassa, miten olisin saanut ratkaistua ongelman, mutta jostain syystä en saanut sitä käytännössä toimimaan. Minun olisi pitänyt määritellä elementit, jossa kappaleen eteneminen ilmenee. Näille elementeille olisi pitänyt määritellä CSS-tyylit, mutta kun yritin tehdä sitä, tyylit ei kuitenkaan toiminut. Tästä syystä jouduin jättämään sen pois.

36 Kuva 12. Musiikkisoitin. 36

37 37 5 JOHTOPÄÄTÖS jqtouch on hyvä ja helppo sovelluskehys. Sillä voi tehdä monipuolisia sovelluksia mobiililaitteille helposti. HTML-kielen tuntemuksella on mahdollista toteuttaa teknisiä sivuja, mutta monimutkaisemmat sivut vaativat komentosarjakielen osaamista. Oman sovelluksen tarkoitus oli esittää jqtouchin pääpiirteitä ja kuinka päästä alkuun. Vaikka minulla ei ole paljon tuntemusta komentosarjakielestä, pystyin tekemään monimutkaisempia toimintoja sovellukseeni. Sijainnin määrittäminen, canvas-elementti, galleria ja musiikkisoitin oli toteutettu hyödyntäen yksinkertaisia komentosarjoja. Ongelmia ilmeni musiikkisoittimessa ja galleriassa. Musiikkisoittimeen olisin halunnut tehdä lisää toimintoja, mm. soitettavan kappaleen esittäminen ja kappaleen soiton eteneminen. Nämä kuitenkin jouduin jättämään pois, koska taitoni loppuivat komentosarjakielen suhteen. Olisin myös halunnut muokata soittimen ulkoasua pidemmälle. Kuva-albumin kanssa oli suurimmat ongelmat. Kokeilin aluksi useaa eri vaihtoehtoa, mutta useimmat saivat muun sivuston toimimaan oudosti tai käyttöliittymän hajoamaan. Lopulta päädyin yksinkertaiseen ratkaisuun, jossa ilmeni pieniä ongelmia. En saanut yläpalkkia piiloon, kun kuvia selaillaan, joten se peittää osan kuvasta. Olisin myös toivonut animaation, kun kuvia vaihdetaan pyyhkäisemällä. jqtouch on erittäin hyvä vaihtoehto niille, jotka eivät haluat opetella monimutkaisia ohjelmointikieliä, vaan haluavat käyttää HTML-, CSS- ja komentosarjakieltä. Valmiin sovelluksen pystyy jatkokäsittelemään PhoneGapsovelluskehyksellä natiiviksi sovellukseksi, jonka voi levittää mobiilisovelluskaupoissa. Vaikka jqtouchissa on puutteensa, sillä voidaan tehdä monimutkaisiakin ratkaisuja.

38 38 LÄHTEET Kirjat Stark, Jonathan. Building iphone Apps With HTML, CSS, and Javascript. O Reilly, Elektroniset julkaisut Apple Developer. ios Dev Center Google Developers. Static Maps API V2 Developer Guide