Tagphonegap

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

Origin null is not allowed by Access-Control-Allow-Origin

Every developers who coding with javascript will get sooner or later “Origin null” error, when they tried loading json/xml data from their local computer (working in firefox), or from external server. That is not allowed with new modern browsers for better security. You can watch your http request header and see “Origin: null” because browser block automatically these cross-domain request.

You have some issues to solve this problem:

1. If target server service JSONP use it. You only have to add param callback=? end of url. “getJSON()” jQuery request add callback parameter automatically.

2. Install some http-server, and run your javascript code from there. Ex. Linux: Apache2, Windows: Mongoose (only for developing).

3. Not recommend but could issue which working is try to some older browsers versions where origin policy is not so tight.

4. This issues still working on firefox:
Do your cross-domain json request in browser and copy-paste response for file ex. “name.json” and save. Now you can locally get this files working (in jQuery: $.getJSON(‘name.json’)).

Hox for PhoneGap developers!
If you made apps with PhoneGap, you can easily develop your app with one trick. Let see this guide: http://docs.phonegap.com/en/2.2.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

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:

Minun ensimmäinen PhoneGap Android-ohjelma

Aloitin Tero Karvisen vetämän mobiilituotekehitys kurssin (Kurssin sivut), jossa harjoittelemme PhonenGapin käyttöä ja applicaatioiden tekemistä mobiililaitteille. Ensimmäisen viikon tehtäväksi saimme tehdä omavalintaisen ensimmäisen ohjelman. Ensimmäinen ohjelma tietty oli Hello World, jonka tekemiseen löytyvät ohjeet Teron kotisivuilta: http://terokarvinen.com/2012/hello-phonegap-from-xubuntu-12-04-live-cd.

Hello Worldin lisäksi kokeilin vielä kuinka näppärästi OpenStreetMapin sai näytetyksi kännykän näytölle. Alkuperänen tarkoitus oli rakentaa ohjelma, joka hyväksikäyttää TieInfon json-rajapintaa, josta olisin saanut koko Suomen kattavan sää mittauspisteiden datat. Kuitenkin monien yritysten jälkeen en saanut jostain syystä javascriptillä haettua yhtikäs mitään dataa. Ongelma ei vielä ehtinyt ratketa, mutta tulen myöhemmin päivittämään mistä se jäi kiinni.

Mutta itse OpenStreetMap ohjelman tekoon. Aluksi sinun tarvitsee hakea OpenLayer.js -kirjasto osoitteesta: http://openlayers.org/download/OpenLayers-2.12.tar.gz ja viedä se assets/www/OpenLayers-2.12 -hakemistoon. Seuraavaksi lisäät seuraavan koodin index.html.

<!DOCTYPE HTML>
<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script type="text/javascript" src="OpenLayers-2.12/OpenLayers.js">
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

Seuraavaksi voit ajaa koodin ja sinulle generoituu valmis ohjelma, joka näyttää vain OpenStreetMapin. Ohjelmaan olisi hyvin voinut lisätä vielä paikannuksen, mutta sisäoloissa en joko saanut kännykälläni gps yhteyttä taikka se ei muuten vain pelittänyt. Kokeillaan myöhemmin uudemman kerran.

Nimi: Kartta
Kuvaus: Ohjelma näyttää OpenStreetMapin
Status: alpha
Lisenssi: GPL v2
Asennuspaketti: http://myy.haaga-helia.fi/~a1102088/mobiilituotekehitys/Kartta.apk
Lähdekoodit: Näkyvissä ylhäällä
Tekinen toteutus: Ohjelma avaa OpenLayerin, joka näyttää OpenStreetMap:n kartan.

© 2017 Niko Kiuru

Theme by Anders NorenUp ↑