Olen Adeliina Sorvari, tietojenkäsittelyn opiskelija Haaga-Helia ammattikorkeakoulusta. Perustin tämän blogin tueksi Tero Karvisen (http://terokarvinen.com) Mobiilituotekehitys-kurssille, jolle osallistun syksyllä 2013. Blogissa aion julkaista läksyni ja raportit niiden suorittamisesta. Läksyjä tulee pääasiassa kerran viikossa ja pyrin tekemään ne iMac2011-tietokoneellani joko siinä valmiina olleella Mac OS X Lion-käyttöjärjestelmällä tai Ubuntu 10.04:lla, jonka olen dualbootannut siihen.

Kurssin aikataulu löytyy osoitteesta http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ja ensimmäisellä tunnilla käsittelimme lähinnä kehitysympäristön asentamista eli asensimme tarvittavat ohjelmat kuten Eclipsen, Android SDK ja PhoneGapin. Kotitehtäväksi tuli tehdä sama kotikoneella ja raportoida tekemiset.

Kotitehtävä h1: asenna kehitysympäristö ja tee Cordova “Hei maailma”.

Bonus: Käytä jotain helppoa Cordova API:a, esim. Device.

Bonus 2: Tee pieni kirjanen, jonka voi asentaa Androidille. Voit käyttää pohjana omia kirjoituksiasi tai jotain vapaasti kopioitavaa materiaalia.

Bonus 3: Asenna Cordova-kehitysympäristö toimimaan komentokehotteesta, ilman Eclipseä.”

Tein tehtävän Ubuntu 10.04:llä seuraten ohjeita ( http://terokarvinen.com/2012/hello-phonegap-from-xubuntu-12-04-live-cd ) melkeinpä täsmällisesti.
Ennen varsinaista raporttia haluan mainita parista suurehkosta takaiskusta, jotka kohtasin tehtäviä tehdessäni. Ensinnäkin, käyttämäni Applen langaton näppäimistö ei toiminut Ubuntulla laisinkaan, ja langallinen puolestaan toimi ainoastaan joitakin minuutteja ennen kuin seisahtui kokonaan. Ainoa keino seisahtumisen korjaamiseksi oli tietokoneen uudelleenkäynnistys, ja lienee selvää, että tämä hidasti työntekoa ja teki läksyn tekemisestä aluksi äärimmäisen turhauttavaa. Jouduin siis hankkimaan uuden näppämistön, joka onneksi toimi moitteitta. Toinen takaisku puolestaan oli varmuuskopioinnin.. unohtaminen, sillä julkaistuani tämän artikkelin ensimmäisen kerran WordPressissä, halusin vielä käydä parantelemassa sitä, minkä yhteydessä jokin meni vikaan ja koko raportti katosi ns. Bittiavaruuteen. Tässä siis raportti, versio 2.0:

Asennukset

Aloitin tehtävvän tekemisen käynnistämällä Terminalin ja asettamalla näppäimistön kieleksi suomen komennolla $ setxkbmap fi. Tämän jälkeen suoritin ohjeiden mukaan komennon $ sudo apt-get update && sudo apt-get -y install ia32-libs eclipse eli päivitys ja lataus paketinhallinnasta. Käynnistin Eclipseen ja valitsin Help-valikosta Install New Software ja Work With-kohtaan laitoin https://dl-ssl.google.com/android/eclipse/. Raksitin Developer Tools ja hyväksyin ehdot. Klikkasin pari kertaa Next, hyväksyin ehdot, asennus alkoi ja onnistui moitteitta. Uudelleenkäynnistin Eclipsen varmuuden vuoksi ja avautui kysely Android SDK:sta. Ohjelma kysyi, haluanko asentaa uusimman version vai version 2.2. Valitsin ohjeiden mukaan version 2.2., joka toimi miltei kaikissa laitteissa, ja latasin kaikki paketit kotihakemistooni. En halunnut lähettää tietoja Googlelle, hyväksyin ehdot ja lopuksi klikkasin “Finish”.

Hello Android!

Seuraavaksi loin uuden Android-projektin Eclipsen File-valikosta New ja Project. Kohdasta Android valitsin Android Application Project ja nimesin sen “Hello Android”. Klikkalin muutaman kerran Nextiä ja hyväksyin lisenssin.

Siirryin Eclipsessä src-kansion ja avasin MainActivity.java, joka valitti ongelmaa. Koodissa oli sama virhe, jonka olimme kohdanneet myös tunnilla “R cannot be resolved”. Ratkaisin ongelman samoin kuin tunnilla eli hoidin jutun Terminalissa. Suoritin seuraavat komennot:
$ ls -l
$ cd android-sdks
$ cd tools

$ ./android sdk

Screenshot from 2013-09-01 20:47:08
(kuva virheilmoituksesta)

Tarkisin, että korihakemistostani löytyi kansio android-sdks, siirryin siihen ja sen sisällä olevaan tools-kansioon. Tämän jälkeen suoritin komennon ./android sdk, joka avasi Android SDK Manager-ohjelman. Raksitin Tools-kansion viimeisimmäksi lisätyt kohdat (Android SDKBuild-tools) ja installoin paketit. Virhe “R cannot be resolved” hävisi, sillä R.java oli nyt generoitu. Tämän jälkeen ajoin ohjelman ja Eclipse kysyi, haluanko lisätä uuden Android Virtual Devicen. Raksitin kyllä ja klikkasin Launch New. Nimesin sen ohjeiden mukaan api8 ja kohteeksi (Target) laitoin API Level 8. Valitsin laitteeksi Nexus 4:n ja valitsin Ok. Suljin ikkunat ja ajoin ohjelman. Emulaattori käynnistyi ja ajoin ohjelman uudelleen. Puhelinta muistuttavaan ruutuun ilmestyi pieni teksti “Hello World!” Android Hello World onnistui!!Screenshot from 2013-09-01 22:11:03
(Android Hello World!)

Hello PhoneGap!

Valitsin jälleen uuden Android Applicationin ja nimesin sen ohjeiden mukaan Ade Runs Cordovaksi.
Screenshot from 2013-09-02 20:58:47

Tämän jälkeen siirryin Terminalin puoleen ja suoritin komennot:

$ cd workspace
$ cd AdeRunsCordova
$ mkdir assets/www

Siirryin AdeRunsCordova-kansioon, johon loin kansion assets, johon kansion www. Nyt ne näkyvät myös Eclipsen puolella. Tämän jälkeen asensin PhoneGapin ohjeiden mukaan suorittamalla komennot:

$ wget https://github.com/phonegap/phonegap/zipball/2.1.0
$ unzip 2.1.0
$ rm 2.1.0
$ cp -i phonegap*/lib/android/cordova*.jar libs/
$ cp -i phonegap*/lib/android/cordova*.js assets/www/
$ cp -ri phonegap*/lib/android/xml/ res/
$ rm -r phonegap-phonegap*/

ja refresh (F5), jonka jälkeen myös kansio cordova-2.1.0.jar näkyi Eclipsessä. Seuraavaksi hiiren oikealla painikkeella Build Path, josta Configure Build Path, josta Libraries ja Add JARs. Valitsin Ade Runs Cordovasta Libs/cordova-2.1.0.jar. Tämän jälkeen noudatin ohjeita, jotka löytyvt sivustolta http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android . Editoin projektini MainActivity.java-koodia seuraavasti:
1) lisäsin import org.apache.cordova.*;
2) vaihdoin extends-kohdan Activitystä DroidGapiin
3) Korvasin setContentView():n super.loadUrl(“file:///android_asset/www/index.html”);

Ohjelma valitti vielä protected void-kohdasta, joten vaihdoin sen public voidiin.Screenshot from 2013-09-03 13:56:55

Screenshot from 2013-09-03 13:57:17

Jatkoin PhoneGap-sivuston ohjeiden mukaan ja valitsin tiedoston AndroidManifest.xml –> Open With Text Editor. Avautui kasa koodia, johon kopioin suoraan sivustolta ottamani rivit.
Seuraavaksi loin tiedoston index.html assets/www-kansioon ja kopioin jälleen Tero Karvisen sivuilla annetun linkin ( http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#device.name_full_example ) mukaisen koodin.

Tämän jälkeen ajoin projektin: Run as Android Application. Avautui iso ikkuna, jossa vilkkui hetken kiiltelevä teksti android ja tämän jälkeen Eclipsen puolella ikkuna, jossa kysyttiin “Would you like ADT to automatically monitor logcat
output for messages from applications in the workspace?” Vastasin kyllä ja käynnistin ohjelman uudelleen. Ajoin ohjelman.

Emulaattori avautui ja näkymä oli tällainen:
Screenshot from 2013-09-03 14:21:21

HUOM!!! Nähdäksesi, toimiiko ohjelma, sinun tulee pyyhkäistä emulaattori auki, samalla tavoin kuin älypuhelin!!!!! Cordova API ei siis avaudu itsestään vaan puhelin on ikään kuin aukaistava. Lopputulos näytti joka tapauksessa tältä:

Screenshot from 2013-09-03 15:14:29

Kehitysympäristö on nyt asennettu ja olen valmis luomaan ja koodaamaan mitä mielenkiintoisimpia älypuhelinohjelmia. 🙂

Advertisements