Puuhailua Android-sovellus https://www.youtube.com/watch?v=_m4_wjviupw Jussi Parkkinen INTINU13A6 Sovelluksen aloitusruutu KitKat- tabletilla Xcover 2 Jelly Bean- puhelimen aloitusruutu ja sovelluksen kuvake Sovelluksen aloitusruutu Xcover Gingerbread puhelimessa
Sisältö Esittely... 1 Config.xml... 2 AndroidManifest.xml... 3 Alkuruutu... 4 Kamera/kuva-sovellus... 5 Matikkapeli... 6 Lumiukkopeli... 7 Piano... 8 Sanapeli... 9 Väritys-peli... 10 Tietovisa... 11
Esittely Puuhailua -sovellus on Apache Cordovalla Android-alustalle luotu applikatio lapsille ja lapsenmielisille jotka kaipaavat pientä puuhastelua arjen iloksi Disneyn Frozen-hengessä. Tekijänoikeudellisista syistä sovellusta ei ole tarkoitettu mitenkään levitettäväksi. Sovelluksen luontiin on käytetty mm. seuraavia ohjelmia: Gimp, Audacity, Android Studio, PSPad Editor, Microsoft PowerPoint, Microsoft Excel ja Google Chrome. Sovellusta on testailtu erilaisilla Android-puhelimilla mitä kaveriporukasta on löytynyt ja parilla tabletilla. Apache Cordova on kehitysympäristö mobiiliapplikaatioiden luomiseen käyttäen perus webohjelmointikieliä; HTML, CSS ja JavaScript. Apache Cordova vaatii toimiakseen Node JS:n, itse Apache Cordovan ja tämän applikaation tapauksessa Android SDK:n. Lisäksi asensin Git-ohjelman, jonka avulla projektiin voi hakea lisäosia GitHubista. Asentaminen on työlästä puuhaa ja asentamiseen menikin monta monituista tuntia ja paljon Googlen käyttöä, kun kaikki tarvittavat kilkkeet ja polut piti saada oikein. Lisäksi Cordovan lisäosien, joilla käytetään laitteen eri toimintoja, tutkimiseen ja opetteluun sai käyttää todella paljon aikaa ja kokeilemista. Pääpiirteissään asentaminen tapahtui seuraavasti: Asennetaan Node JS, asennetaan Cordova, asennetaan Android Studio ja SDK-Managerissa tarvittavat SDK:t ja API. Sitten asetetaan polut oikein, luodaan sovellus, lisätään alusta, lisätään tarvittavat lisäosat, luodaan sisältö ja lopuksi käännetään projekti aplikaatioksi. npm install -g cordova set ANDROID_HOME=C:\Users\Jussi\AppData\Local\Android\sdk set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools set ANT_HOME=C:\Users\Jussi\AppData\Local\Ant\apache-ant-1.9.4 set PATH=%PATH%;%ANT_HOME%\bin cordova create Puuhailua hamk.jussi.puuhailua Puuhailua cd Puuhailua cordova platform add android //Lisätään lisäosia cordova plugin add org.apache.cordova.media cordova plugin add org.apache.cordova.vibration cordova plugin add org.apache.cordova.device cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.camera cordova plugin add https://github.com/gitawego/cordova-screenshot.git cordova plugin add https://github.com/zoxxx/phonegap-keepscreenon-plugin.git <Luodaan sisältö www-kansioon ja muokataan config.xml tiedot oikeiksi> cordova build Ja näin sovellus on valmis 1
Config.xml config.xml tiedostossa määritellään sovelluksen asetukset <?xml version='1.0' encoding='utf-8'?> <widget id="hamk.jussi.puuhailua" version="8.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>puuhailua</name> <description> Mukava pikku sovellus </description> <author email="https://github.com/juigeli/"> Jussi Parkkinen </author> <content src="index.html" /> <access origin="*" /> <icon src="icon.png" /> <!-- Pakotetaan ruutu vaakatasoon --> <preference name="orientation" value="landscape" /> <!-- Asetetaan sovellus kokoruututilaan --> <preference name="fullscreen" value="true" /> <!-- Eri lisäosien määritys, jotta ne saadaan käyttöön --> <plugin name="storage" value="org.apache.cordova.storage" /> <plugin name="media" value="org.apache.cordova.audiohandler" /> <plugin name="notification" value="org.apache.cordova.notification"/> <plugin name="camera" value="org.apache.cordova.cameralauncher" /> <feature name="device"> <param name="android-package" value="org.apache.cordova.device.device" /> </feature> <feature name="accelerometer"> <param name="android-package" value="org.apache.cordova.devicemotion.accellistener" /> </feature> </widget> 2
AndroidManifest.xml AndroidManifest.xml tiedostossa määritellään mm. sovelluksen oikeudet <?xml version='1.0' encoding='utf-8'?> <manifest android:hardwareaccelerated="true" android:versioncode="80001" android:versionname="8.0.1" package="hamk.jussi.puuhailua" xmlns:android="http://schemas.android.com/apk/res/android"> <supports-screens android:anydensity="true" android:largescreens="true" android:normalscreens="true" android:resizeable="true" android:smallscreens="true" android:xlargescreens="true" /> <uses-permission android:name="android.permission.internet" /> <application android:hardwareaccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:configchanges="orientation keyboardhidden keyboard screensize locale" android:label="@string/activity_name" android:launchmode="singletop" android:name="cordovaapp" android:screenorientation="landscape" android:theme="@android:style/theme.black.notitlebar" android:windowsoftinputmode="adjustresize"> <intent-filter android:label="@string/launcher_name"> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> <uses-sdk android:minsdkversion="10" android:targetsdkversion="19" /> <uses-permission android:name="android.permission.write_external_storage" /> <uses-permission android:name="android.permission.record_audio" /> <uses-permission android:name="android.permission.modify_audio_settings" /> <uses-permission android:name="android.permission.read_phone_state" /> <uses-permission android:name="android.permission.vibrate" /> <uses-permission android:name="android.permission.wake_lock" /> </manifest> 3
Alkuruutu Alkuruudusta pääsee navigoimaan sovelluksen eri osa-alueisiin: otsikosta klikkaamalla kamera/kuvasovellus ja otsikon oikealla puolella sutta klikkaamalla matematiikkapeli. Alhaalla napit vasemmalta oikealla: lumiukkopeli, piano, sanapeli, värityspeli ja tietovisa. Värityspeli näkyy vain, jos laitteen Androidversio on vähintään 4, koska peli käyttää SVG-grafiikkaa ja se ei ole tuettu vanhemmissa laitteissa. Versionumeron saamiseksi, tarvitaan Device-lisäosaa. Lisäksi alkuruudussa otetaan näytön automaattinen himmennys pois päältä (KeepScreenOn-lisäosa), jotta näyttö ei pimenisi kesken pelailun (lumiukkopelissä ohjaaminen tapahtuu kallistelemalla, jolloin näyttö saattaisi sammua, kun näyttöä tai nappeja ei naputella). Sovelluksen aloitusruutu Gingerbreadissa 4
Kamera/kuva-sovellus Sovelluksessa voit asettaa oman kuvan kehykseen joko kamerasta tai galleriasta. Sovellus käyttää Cameralisäosaa, jolla saadaan pääsy kameran ja galleriaan. Sovellus käyttää canvas-elementtiä. Kuvaa voidaan zoomata, pyörittää ja siirtää ja lopputuloksen voi tallentaa kuvana Screencapture-lisäosan ansiosta. Lisäksi pop-up -ilmoitusten luomiseen on käytetty Notification-lisäosaa. Ilmoitus kuvan onnistuneesta tallennuksesta Tallennettu kuva 5
Matikkapeli Käyttäjän tarkoituksena on sovittaa suora sopimaan mahdollistaman hyvin pistejoukkoon. Kun käyttäjä on mielestään saanut suoran edustamaan pistejoukkoa mahdollisimman hyvin, Tarkista nappia klikkaamalla näkee, missä oikea suora kulkisi. Arvo uusi peli-napista peli arpoo uudet pisteet. Käyttäjä on asettanut suoran pistejoukkoon Tarkista-nappia painettu 6
Lumiukkopeli Elsaa ohjataan puhelinta kallistelemalla (Accelerometer-lisäosa) ja ampuminen tapahtuu ruutua näpäyttämällä. Aina kun ammus osuu lumiukon ylimmäiseen palloon, pistelaskuria kasvatetaan yhdellä. Pisteet tallentuvat laitteen muistiin ja saadut pisteet säilyvät tallessa ja ne ladataan laitteen muistista aina kun peli käynnistetään. Pelissä on taustamusiikki ja ampuminen ja liikkuminen ja osuma saavat aikaan ääniefektin soittamisen (Media-lisäosa). Kun peli käynnistetään, pyydetään pelaajaa asettamaan laite sopivaan alkutilaan, josta luetaan sitten laitteen kallistelu. Alkuasennon varmistus 7
Piano Piano käyttää myös Media-lisäosaa ja näpäyttämällä koskettimia, sovellus soittaa kyseisen nuotin. Sovelluksesta löytyvät nuotit C, C#, D, D#, E, F, F#, G, G#, A, A#, H, C2, C2#, D2, D2# ja E2 mp3-tiedostoina. Lisäksi alhaalta löytyy valmiita kappaleita ; napauttamalla haluttua nuottia, sovellus soittaa nuotteja määrätyssä järjestyksessä. 8
Sanapeli Sanapelissä käyttäjä arvailee ennaltamäärättyjä sanoja naputtelemalla kirjaimia. Kyseessä on hirsipuutyyppinen peli. Puhelimen muistiin tallennetaan lukumäärä pelatuista peleistä ja niistä voitot ja tappiot. Ääniefektit toimivat jälleen Media-lisäosan avulla. Jos pelaaja arvaa kirjaimen väärin, laite värisee 100 ms käyttäen Notification-lisäosaa. Käyttäjä on arvaillut kirjaimia Sana arvattu onnistuneesti 9
Väritys-peli Värityspelissä käyttäjä voi ruutua napauttelemalla värittää kuvaa. Väri valitaan alhaalla olevasta värilistasta, kysymysmerkki näyttää esimerkkivärityksen, paletti piilottaa/näyttää värilistan, pyyhekumi tyhjentää värityksen varmistaen käyttäjältä asian ja kansio tallentaa kuvan Screencapture-lisäosan avulla. Pop-up - ilmoitusten luomiseen on käytetty Notification-lisäosaa ja kuvan värit tallentuvat laitteen muistiin, joten värittämistä voi jatkaa myöhemmin. Myös Pinch Zoom -ominaisuus lisätty, mutta se ei toimi kaikilla laitteilla. Näin ollen zoomaus onnistuu myös ylhäällä nurkissa olevista plus- ja miinus-napeista. Valmis väritys Varmistus, haluaako käyttäjä varmasti aloittaa alusta Ilmoitus onnistuneesta kuvan tallennuksesta Tallennettu kuva 10
Tietovisa Tietovisassa käyttäjä voi naputtelemalla vastata kysymyksiin ja sitten tarkistaa, miten meni. Vastauksia Tarkista nappia painettu ja tulos saatu Näytä vastaukset -nappia painettu Varmistus, halutaanko aloittaa alusta 11