CategoryMobiilituotekehitys – BUS4TN008-2

Tero Karvisen vetämä kurssi jossa harjoitellaan mobiilituotteiden kehittämistä phonegapillä.

Julkiset 0.2 Android-mobiilisovellus

Julkiset on pk-seudun julkiseenliikenteeseen suunnattu mobiilipalvelu, joka toimii reittioppaan tavoin. Julkiset -sovelluksen uutena ominaisuutena on pysäkkihälytys. Julkiset-sovelluksen kehittymistä voit seurata tästä blogista tai lataamalla sovelluksen Google Play:stä.

Sovelluksen kehittäminen aloitettiin 1.12. jolloin lähdin listaamaan sovelluksessa tarvittavat toiminnot. Samalla harjoittelin myös OpenLayersin käyttöä, ja kokeilin kuinka se istuu kännykän näytölle. Tein myös muita pienempiä projekteja OpenLayersin kanssa, ja julkaisin siitä muutaman myös tänne luettavaksi.

5.12-9.12. Aloin kokoamaan osia yhteen, ja hakemaan kaikkia toimintoja. Ongelmitta ei myöskään selvitty. Ensinä heti tuli esille, etten koneeltani saanut haetuksi reittioppaan API:sta mitään. Ongelman syyksi myöhemmin selvisi Same Origin Policy, joka estää käyttäjän tehdä cross-domain pyyntöjä. PhoneGap:llä Same Policy Origin salli oletuksena kaikki yhteydet, ja niitä pystyi myös helposti hallinnoimaan whitelist:stä. Sain kuitenkin lokaalisti firefoxilla haettua dataa normaalisti, ja näin pystyttiin jatkamaan debuggaamista tietokoneelta käsin.

10.12-13.12. Aloin keskittymään hieman ulkoasuun, jotta saisin 13.12. järjestettävään sovelluksien demo-tilaisuuteen toimivan ja näyttökelpoisen version valmiiksi. Valitsin ulkoasuksi jQueryMobilen, jolla saa helposti hienoja kännykkäkäyttöliittymiä tehdyksi. Ongelmaksi kuitenkin piakkoin astui yhteensopivuus ongelma OpenLayersin kanssa. Löysin pitkän etsinnän jälkeen jonkin näköisen fiksin, kuinka tämän sai korjatuksi.

14.12-16.12. Jatkoin kehittämistä, jotta saisin sunnuntaille version jonka saisin julkaistua Google Play:hin, ja palautettua sen Terolle mobiilituotekehitys kurssin pitäjälle. Paikannuksessa tuli jotain hämäriä ongelmia, etten saanut käyttäjän sen hetkistä sijaintia millään selvitettyä. Jouduin ensimmäiseen beta-version näin ollen julkaisemaan ilman pysäkkihälytystä. Kehitys jatkuu ensi viikolla, jolloin tavoitteena on saada toimiva kunnon versio jakeluun.

Nimi: Julkiset
Kuvaus: Julkiset on pk-seudun julkiseen liikenteeseen suunnattu mobiilipalvelu, joka toimii reittioppaan tavoin. Julkiset -sovelluksen uutena ominaisuutena on pysäkkihälytys (ei toiminnassa vielä beta-vaiheessa).
Status: beta
Asennuspaketti: http://nikokiuru.com/apk/julkiset20.apk
Lähdekoodit: https://github.com/kiuru/Julkiset
Google Play: https://play.google.com/store/apps/details?id=com.nikokiuru.julkiset
Tekinen toteutus: Sovellus hakee reittitiedot hsl:n reittiopas api:sta, ja tulostaa eri välipysäkit kartalle. Ohjelma käyttää hyväkseen OpenLayerssiä, joka tulostaa näytölle OpenStreetMapin. Ulkoasu on toteutettu jQueryMobilella.
Ruutukaappaus:

Screenshot_2012-12-16-19-23-33:Screenshot_2012-12-16-19-23-53 Screenshot_2012-12-16-19-24-37 Screenshot_2012-12-16-19-24-47

Mobiilituotekehitys -kurssin oma projekti, PysäkkiHäly

Tero Karvisen vetämä mobiilituotekehitys (http://terokarvinen.com/2012/aikataulu-mobiilituotekehitys-bus4tn008-2) -kurssin omaksi projektiksi aion tehdä PysäkkiHälytyksen, joka ilmottaa käyttäjälleen milläin hänen täytyy jäädä julkisenliikenteen ajoneuvosta. Ohjelma toimii vain pääkaupunkiseudulla, koska pysäkkien sijainnit tarjoaa HSL joka on rajoittunut vain pk-seudulle. Tein pienimuotosen “Hei Maailma!” tyyppisen ohjelman OpenLayersin käytöstä.

Tämä koodi tulostaa näytölle OpenLayersin.

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

Lähde: OpenLayers http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

Kilpailijakatsaus:
Reittioppaan tyyppinen kännykkäsovellus nimeltään Andropas sekä pysäkkihälytystä mainostava Droidpas ovat lähimmät kilpailukumppanit.

Animaatio Processing.js -kirjastolla

Viikon mobiiilituotekehitys tehtävänä oli luoda animaatio hyväksikäyttämällä Processin.js -javascript-kirjastoa. Ensimmäiseksi teokseksi loin liikkuvan Hello World! näytönsäästäjän.

Ensiksi lataat processing javascript-kirjaston osoitteesta http://processingjs.org/download/
Processing tiedosto pitää hakea html dokumentissa tagilla:Lopulta voit kirjottaa processing kieltä script tagien välissä, lisäämällä attribuutin type=”text/processing” ja data-processing-target=”processing-canvas”

<!DOCTYPE HTML>
<html>
<head>
<title>Processing näytönsäästäjä</title>
</head>
<body>
<script src="processing-1.4.1.min.js"></script>
<script type="text/processing" data-processing-target="processing-canvas">
var x = 10;
var y = 60;
var xDirec = 4;
var yDirec = 4;

// Setup the Processing Canvas
void setup(){
	size( 400, 400 );
}

// Main draw loop
void draw(){
	background( 200 );
	x = x + xDirec
	y = y + yDirec;
	PFont font;
	font = loadFont("BebasNeue.ttf");
	textFont(font, 40); // font size
	fill(100, 150, 400); // color
	text("Hello World!", x, y);
	
	if(x>190) {
		xDirec=-4;
	}
	else if(x<0) {
		xDirec=4;
	}
	if(y>390) {
		yDirec=-4;
	}
	else if(y<25) {
		yDirec=4;
	}
	
}
</script>
<canvas id="processing-canvas"> </canvas>
</body>
</html>

Mobiilisovellus AavikkoKotka

Kolmanneksi kurssitehtäväksi sain keksiä sovelluksen käyttämällä hyväksi 4:stä ennakkoon arvotusta cordova api:sta kahta. Sovellukseni tuli lopulta käyttämään Mediaa ja Accelerometeriä. Sovelluksen nimi oli AavikkoKotka viitaten Desert Eaglea. Sovelluksessa siis pysty lataamaan virtuaali pistoolin, ja leikkimielisesti ampumaan sillä ääni efectien kera.

Nimi: AavikkoKotka
Kuvaus: Sovelluksessa pystyy lataamaanaan virtuaali pistoolin sekä ampumaan sillä ääni efecteillä.
Status: beta (Accelerometrin conffauksissa hieman häikkää)
Lisenssi: GPL v2
Asennuspaketti: http://nikokiuru.com/apk/AavikkoKotka.tar.bz2
Lähdekoodit: http://nikokiuru.com/apk/aavikkokotka/AavikkoKotka.tar.bz2
Tekinen toteutus: Sovellus käyttää hyväksi cordovan media ja Accelerometeriä.
Ruutukaappaus: Kuvaksi en nopealla googlettamisella löytänyt mitään vapaasti levitettävää Desert Eaglen kuvaan, jolloin näyttö jäi vain ankeaksi kiihdytysanturin tuleiden näyttäjäksi. Korjataan tämä ensimmäiseen kunnon versioon sitten.

Phonegap testailua – OmaSoitin

Toiseksi tehäväksi mobiilikehitys kurssilla sain käyttää kahta cordova apista löytyvää ominaisuutta – media ja notification. Tein oppimismielessä soittimen, joks kylläkin soitti vain yhtä kappaletta verkon yli. Siltä pystyi myös kysymään mistä osoitteesta kappaletta kuunnellaan. Alla on linkki apk asennustiedostoon sekä lähdekoodit.

Nimi: OmaSoitin
Kuvaus: Sovelluksen tarkoitus on soittaa musiikkia. Beta versiossa ei ole vielä mahdollista valita kappaletta.
Status: beta
Lisenssi: GPL v2
Asennuspaketti: http://nikokiuru.com/apk/omasoitin.tar.bz2
Lähdekoodit: http://nikokiuru.com/apk/omasoitin.jar
Tekinen toteutus: Sovellus käyttää hyväksi cordovan media ja notification ominaisuuksia.
Ruutukaappaus:

© 2017 Niko Kiuru

Theme by Anders NorenUp ↑