Mobiilisovelluksia on saatavilla kaikenlaiseen tarpeeseen. On pelejä ja arkea helpottavia sovelluksia, mutta myös hauskoiksi tarkoitettuja, mutta käytännössä turhia sovelluksia. Parhaimmillaan mobiilisovellusten puolella käyty kauppa on miljoonaluokkaa, etenkin pelien puolella myynti voi kasvaa suureksi.

Eri alustoille on omat koodauskielensä. Windows Phonelle käytetään yleensä .NET-alustaa ja #C-kieltä, kun taas iPhone-sovellukset tehdään yleensä Objective C:llä. Androidin puolella kehitys on vapaampaa. Androidille sovelluksia voi tehdä esimerkiksi javalla tai käyttämällä javascript-pohjaisia Cordova-kirjastoja. Käytännössä siis Androidille koodaaminen vaatii sitä, että kehittäjä hallitsee javascriptin sekä jqueryn hyvin. Tässä artikkelissa tarkastellaan joitain Cordova-kirjastoja omien koulussa harjoitustyönä tehtyjen projektien kautta.

Kehitysympäristö

Kehitysympäristön olen pystyttänyt Linuxille Eclipseen, mutta esimerkiksi Dreamweaveriltä löytyy PhoneGap-mahdollisuus. Androidille koodaaminen ei onnistu Eclipsellä suoriltaan, mikäli ei tee puhtaasti java-ohjelmaa, vaan kehitysympäristö vaatii erillisen pluginin asentamista. Kehitysympäristön pystyyn laittaminen on työläs projekti ja vie aikaa, kun aloittaa Androidille koodaamisen. Lisäosan voi asentaa suoraan Eclipsestä valitsemalla Help ja tämän jälkeen Install New Software.

Lisäosan asennuksen jälkeen Eclipseen tulee kaikki tarvittavat Androidille ohjelmoimiseen vaadittavat ominaisuudet. Kirjoitetun ohjelman voi ajaa jo tässä vaiheessa emulaattorissa, joka näyttää esimerkin, miltä se näyttäisi puhelimessa. Monimutkaisempien ohjelmien asentaminen vaatii kuitenkin cordova-kirjaston käyttöönottoa. Kirjastot pystyy lataamaan joko suoraan Phonegapin-sivuilta tai komentutulkin kautta. On hyvä muistaa, että kirjastot tulee asentaa jokaiseen projektiin erikseen. Jokainen projekti vaatii myös oman Android-manifestinsa, eli käyttöoikeudet ohjelmalle, jotka ladataan XML-tiedostoksi projektiin. Manifestin voi kopioida PhoneGapilta, ja samalta sivulta löytyvät tarkemmat ohjeet kehitysympäristön pystyttämiseen.

Hello World!

Kun kehitysympäristö on saatu valmiiksi, on tehtävä enää yksi asia: Pitää testata toimiiko se. Hello World-tasoisen ohjelman voi kirjoittaa laittamalla seuraava koodi javascript-tagien sisään:


// Wait for Cordova to load

document.addEventListener(“deviceready”, onDeviceReady, false);

// Cordova is ready

function onDeviceReady() {
var element = document.getElementById(‘deviceProperties’);

element.innerHTML = ‘Device Name: ‘     + device.name     + ‘<br />’ +
‘Device Cordova: ‘  + device.cordova + ‘<br />’ +
‘Device Platform: ‘ + device.platform + ‘<br />’ +
‘Device UUID: ‘     + device.uuid     + ‘<br />’ +
‘Device Version: ‘  + device.version  + ‘<br />’;
}

Koodi tulostaa laitteen tiedot puhelimen näytölle. Tässä tapausessa siis virtuaalisen puhelimen tiedot emulaattorissa. Ohjelma tulee ajaa projektin luomisen yhteydessä muodostuneen main.java-tiedoston kautta, muuten ohjelma ei käynnisty. Mikäli emulaattori ei käynnisty, kannattaa kokeilla Eclipsen uudelleenkäynnistämistä. Jos emulaattori antaa ilmoituksen, että se vain hakee tietoja, on vika joko cordova-kirjastojen asennuksessa tai koodissa.

Hello Cordova

Ohjelmoi mieluisesi Android-softa

Kun Hello World-toimii, ei enää puutu kuin oma mielikuvitus koodaamisen tieltä. PhoneGapilla on valtavasti erilaisia koodiesimerkkejä, jotka auttavat alkuun. Jos ohjelma vaatii paikannusta, valitse esimerkeistä Geolocation. Jos taas ohjelma tarvitsee tietokantaa, valitse Storage ja niin edelleen.

Luonnollisesti useampaa cordova-kirjastoa voi käyttää samaan aikaan. Tällöin ohjelmasta saa aina kattavamman. Seuraavassa esimerkissä on käytetty yhteydenmäärittämistä sekä median soittamista:


<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for Cordova to load

function checkConnection() {
var networkState = navigator.network.connection.type;

var states = {};
states[Connection.UNKNOWN]  = ‘Tuntematon yhteys’;
states[Connection.ETHERNET] = ‘Ethernet yhteys’;
states[Connection.WIFI]     = ‘WiFi yhteys’;
states[Connection.CELL_2G]  = ‘2G yhteys’;
states[Connection.CELL_3G]  = ‘3G yhteys’;
states[Connection.CELL_4G]  = ‘4G yhteys’;
states[Connection.NONE]     = ‘Ei verkkoyhteyttä’;

alert(‘Yhteystyyppi: ‘ + states[networkState]);

playAudio(“http://myy.haaga-helia.fi/~a1100333/wilhelmscream.mp3”);
}

// Play audio

function playAudio(url) {
// Play the audio file at url
var my_media = new Media(url,
// success callback
function() {
console.log(“playAudio():Audio Success”);
},
// error callback
function(err) {
console.log(“playAudio():Audio Error: “+err);
});

// Play audio
my_media.play();
}

// Cordova is ready

function onDeviceReady() {

// checkConnection();
// playAudio(“lisää tähän äänitiedostosi lähde”);

}

document.addEventListener(“deviceready”, onDeviceReady, false);

</script>

Ohjelma pyytää tarkistamaan yhteystyypin

Ylläoleva esimerkki toimii siten, että laite pyytää käyttäjää tarkistamaan yhteyden tilan. Laite antaa tilan huomiona, ja paluun yhteydessä ääni-ilmoituksen.

Ohjelma antaa huomion ja Ok-painikkeesta ääni-ilmoituksen

Useat ohjelmat vaativat tietokannan käyttämistä. Cordovaan on rakennttu SQLite-tuki, joten kevyen, mutta tarvittaessa jopa laajan SQL-tietokannan käyttäminen on mahdollista. Riittää, että kehittäjä tuntee SQL:n perusteet, eli kuinka kanta luodaan, kuinka sinne lisätään tietoja, niiden päivittäminen ja tulostaminen emulaattoriin sekä poistaminen.


<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
//luodaan kanta kun laite käynnistetään ensimmäisen kerran
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
var db = window.openDatabase(“Database”, “1.0”, “MamaDb”, 200000);
db.transaction(createDatabase, errorCB);
}

function createDatabase(tx) {
//tx.executeSql(‘DROP TABLE IF EXISTS mama’);
tx.executeSql(‘CREATE TABLE IF NOT EXISTS mama (date, info, value, unit)’);
}

function errorCB(err) {
alert(“Error processing SQL: “+err);
}
</script>

Emulaattori ilmoittaa kannan olevan tyhjä ja pyytää käyttäjää lisäämään tiedot

Kun kanta on luotu, tulee sinne lisätä tiedot. Tiedot voi tarvittaessa syöttää itse valmiiksi tai pyytää käyttäjää syöttämään ne, riippuen täysin siitä, miten ohjelma toimii. Syötetyt tiedot saa kantaan sijoittamalla tiedot tietotyyppeihin.

Käyttäjä syöttää tiedot


tx.executeSql('INSERT INTO mama (date, tietue, value, unit) VALUES (date(), ' + myDue.info+', ' + myDue.value +',' + dueUnit.value +')');


Esimerkissä tiedot on tulostettu sovelluksen etusivulle, jotta käyttäjä pääsee tarkastelemaan niitä nopeasti.

Tiedot lisätty kantaan ja tulostettu näytölle

Ohjelman julkaisu

Valmis ohjelma tulee pakata apk-paketiksi. Tämä tapahtuu valitsemalla oma projekti Eclipsestä ja Export Android Application. Ohjelma pyytää luomaan suojausavaimet, mikäli niitä ei ole tehty. Suojausavainten tulee olla vähintään 40 vuotta voimassa, mutta pidemmän ajan voi laittaa huoletta.