Idea loppuprojektista

Saimme Tero Karviselta (http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ) seuraavan läksyn:

ideasuunnitelma

– Idean nimi: Mobiililemmikki
– Yhden lauseen kuvaus: Valitset eläinhahmon, jota alat hoitaa, kouluttaa, pelata ja leikkiä sen kanssa: tavoitteena on kasvattaa sitä ja kehittää sitä paremmaksi.
– Asiakkaat/Kohderyhmä: Nuoret, lapset, varhaisteinit
– Kilpailijat: lemmikinhoitopelit ja muut vastaavat
– Muut ajatukset projektista: Haluaisin tehdä ohjelmaan ominaisuuden, joka mahdollistaisi “ottelemisen” toisten samaa sovellusta käyttävien kanssa ja pisteiden kerryttämisen tätä kautta. En ole vielä varma, miten tämän toteuttaa, mutta mikäli aikaa ja osaamista riittää, olisi mahtavaa saada ohjelma toimimaan niin. Ehkä ehdin tämän kurssin aikana, ehkä myöhemmin.

– omalla kohdalla kurssin teemana ollu piirrustukset, joten aion piirtää hahmot tähänkin peliin

– suunnattu lapsille, about 11-wee

– valitse 1 hahmoista, jota alat hoitaa ja kehittää

– 4(?) pientä minipeliä, joiden avulla kehität hahmoa

– kun saa tietyn verran pisteitä, hahmo kasvaa ja unlock palkintoja/leluja sille

– näyttö: hahmo liikkuu kännykän kallistamisen mukaan eri puolille ruutua

– extrajuttuja, esim hahmon klikkaus

Advertisements

Neljäs läksy

Neljänneksi läksyksi saimme seuraavan tehtävän ( http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ):

“Tee “Hello Cordova Device”: ohjelma, joka näyttää mahdollisimman yksinkertaisesti, että Cordova APIt toimivat. Voit käyttää mitä vain helppoa APIa, esim. Device tai Connection.

Kirjoita jokin peli tai ohjelma, joka hyödyntää valitsemiasi Cordova API:a. Ohjelmalla tulee olla jokin selkeä tarkoitus, mutta vaativuuden voit valita taitojesi ja kunnianhimosi mukaan.”

Tein tehtävän Ubuntulla, jolla aloitin käynnistämällä Eclipsen. Loin uuden Android-ohjelman ja toimin muutenkin samoin kuin ensimmäisen läksyn kohdalla. Kokeilin ensin jälleen Device-APIa ja se näytti tältä (ohje: http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#Device):

device

Sitten testasin Connectionia ja se näytti tältä (ohje: http://docs.phonegap.com/en/2.1.0/cordova_connection_connection.md.html#Connection):

connection
Sain nämä toimimaan ja tein koodin omaan softaani:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<title>Aden Cordova</title>
<link href=’http://fonts.googleapis.com/css?family=Bubbler+One&#8217; rel=’stylesheet’ type=’text/css’>
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script&gt;
<script type=”text/javascript” charset=”utf-8″ src=”cordova-2.1.0.js”></script>
<meta charset=”utf-8″ />
<script type=”text/javascript” charset=”utf-8″>
var munKuvat_y = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png&#8221;
];
var counter = 0;
var Intervalli;

function vaihdaKuvat_y() {
$(‘#hahmo2’).attr(‘src’, munKuvat_y[counter]);
counter += 1;

if (counter == munKuvat_y.length) {
clearInterval(Intervalli);
}
}

var munKuvat_k = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa1.png&#8221;
];

function vaihdaKuvat_k() {
$(‘#hahmo1’).attr(‘src’, munKuvat_k[counter]);
counter += 1;

if (counter == munKuvat_k.length) {
clearInterval(Intervalli);
}
}

function onLoad() {
document.addEventListener(“deviceready”, onDeviceReady, false);
$(“#hahmo3”).click(function(){
alert(“Testi!”);
});
}

function onDeviceReady() {
document.addEventListener(“volumedownbutton”, onVolumeDownKeyDown, false);
document.addEventListener(“volumeupbutton”, onVolumeUpKeyDown, false);
}

function onVolumeDownKeyDown(){
counter = 0;
Intervalli = setInterval(vaihdaKuvat_y, 50);
}
function onVolumeUpKeyDown(){
counter = 0;
Intervalli = setInterval(vaihdaKuvat_k, 50);
}

</script>
<style>
body {
background-image: url(“http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/tk.pdf&#8221;);
font-family: ‘Bubbler One’;
text-align: center;
}

kaikki {
margin: 30px auto auto auto;
text-align: center;
width: 300px;
}

#hahmo1 { margin: 10px 50px 10px 50px; }
#hahmo2 { margin: 10px 50px 10px 50px; }
#hahmo3 { margin: 10px 50px 10px 50px; }
#hahmo4 { margin: 10px 50px 10px 50px; }

</style>
</head>

<body onload=”onLoad()”>
<div id=’kaikki’>
<img id=”hahmo1″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa1.png”&gt;
<img id=”hahmo2″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png”&gt;
<br>
<img id=”hahmo3″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/poikaorava.png”&gt;
<img id=”hahmo4″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/tyttoorava.png”&gt;
</div>
</body>
</html>

Tavoitteena olisi ollut saada 2 ylintä kuvaa liikkumaan, kun VolumeUp ja VolumeDown-nappuloita käytetään. En kuitenkaan onnistunut saamaan softaa toimimaan halutulla tavalla, joten pitänee yrittää vielä koulussa uudestaan.

Lopullisen pelin tavoitteena olisi ollut tehdä peli, jossa minihahmo liikkuu läpi ruudukon ja väistää isompia hahmoja. y-suuntainen liike olisi ollut automaattinen ja x-suuntaa tulisi säädella VolumeUp/VolumeDown-nappuloilla.

Siirryin käyttämään koulussa xubuntu-käyttöjärjestelmää. Ratkaisin VolumeUp ja VolumeDown-nappien toimimattomuuden! Googlailin ohjeita ja löysin seuraavan:

http://stackoverflow.com/questions/12890170/android-volume-key-event-capture

Lisäsin siis MainActivity.java-tiedostoon sivulla annetun koodin. Testasin nappeja ensin yksinkertaisesti Hello Wordilla ( ohje: http://docs.phonegap.com/en/2.1.0/cordova_events_events.md.html#volumedownbutton ) ja ohjelma toimi moitteitta!

ylos
alas

Seuraavaksi yritin aiemmin koodaamassani kuvasarjassa volumenappien toimintaa. Kun klikkaa lisää äänenvoimakkuutta, minikissa liikkuu. Kun klikkaa äänenvoimakkuutta pienemmälle, miniapina liikkuu.

kuva

Seuraavaksi pelin kimppuun.
Suunnitelmanani on siis tehdä ns. tammenterhopeli.
“Pelaajan hahmo on pieni tammenterho, jonka tarkoituksena on päästä turvallisesti puunoksalta maahan. Puunoksa on ruudun yläkulmassa ja koko alareuna on “maali”. Matkalla on kuitenkin ongelmia: (pienet) oravat, jotka haluavat popsia tammenterhon parempiin suihin. Niitä kuuluu väistellä!
Peli toimii yksinkertaisesti niin, että Start-napin painamisen jälkeen tammenterho alkaa liikkua (suht nopeasti) pystysuoraan läpi ruudun eli siis tippuu puusta. Terhon sivuttaissuuntaista liikettä voi ohjailla VolumeUp ja VolumeDown-napeilla. VolumeUp siirtää terhoa oikealle ja VolumeDown vasemmalle. Liikkumisen tehtävänä on väistellä oravahahmoja, jotka liikkuvat ympäriinsä ruudulla. Oravien liike on x-suuntaista.”

Päätin kodata ohjelman ensin vain selaimelle, sillä tällä tavoin pystyin käyttämään Mac OS X-käyttöjärjestelmääni ja sitä kautta TextWrangler-tekstieditoriani. Aloitin piirtämällä tammenterhon

ja koodamalla sen liikkeen. Alaspäin se putoaa (hieman fysiikan lakeja uhmaten) tasaista vauhtia ja vaakatasoliikettä voi säädellä nuolinäppäimillä.

Screen Shot 2013-09-28 at 11.20.50 AMScreen Shot 2013-09-28 at 11.20.56 AMScreen Shot 2013-09-28 at 11.21.09 AM

Seuraavaksi lisäsin oravat. Niiden paikat säädin randomeiksi offset-funktion avulla:

var tpaikka = $(“#tytto”).offset();
tpaikka.left = Math.floor((Math.random()*500)+1);
tpaikka.top = Math.floor((Math.random()*600)+1);
$(“#tytto”).offset(tpaikka);

Sitten halusin saada hahmot liikkumaan edestakas ja käytin sivostolta suoraan kopioimaani esimerkkiä animate-funktiosta:

http://stackoverflow.com/questions/10729968/jquery-animate-movement-left-and-right

Seuraavaksi seurasikin koko koodin vaikeimmat osuudet: hahmojen oma liike sekä terhon osumisen tunnistaminen. Loin funktion vaihdaKuvat jo oppimallani tekniikalla, mutta tällä kertaa jouduin lisäämään if-elsen vaihtamaan kuvia riippuen siitä, kumpaan suuntaan hahmo liikkuu. Loin siis erillisen muuttujan “suunta” sekä funktion “liike” esim.

function poikaliike(){
suunta_poika = “oikea”;
$(‘#poika’).animate({
left: ‘+=220’ }, 900,
function () {
suunta_poika = “vasen”;
$(‘#poika’).animate({
left: ‘-=220’ }, 900,
function() {
poikaliike()
}
)
}
)
}

jossa muuttujan suunta arvoa vaihdetaan aina, kun hahmo vaihtaa suuntaa. Tämän jälkeen vaihdaKuvat-funktioon

function vaihdaKuvat() {
if (suunta_poika === “vasen”) { $(‘#poika’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika’).attr(‘src’, munKuvatOik[laskin]); }
if (suunta_poika2 === “vasen”) { $(‘#poika2’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika2’).attr(‘src’, munKuvatOik[laskin]); }
if (suunta_poika3 === “vasen”) { $(‘#poika3’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika3’).attr(‘src’, munKuvatOik[laskin]); }
laskin += 1;
if (laskin == munKuvat.length) {
laskin = 0;
}

}

jossa hahmojen liikkuessa vasemmalle, kuvat valitaan muuttujasta munKuvat, jossa on siis vasempaan suuntaan liikkuvat hahmojen kuvat. Vastaavasti munKuvatOik-muuttujaan on talletettu kuvat, jossa hahmo liikkuu oikealle.

(Seuraavaan tarvitsin hieman neuvoja kokeneemmalta koodarilta:) Tämän jälkeen täytyi tehdä funktio, joka tarkistaisi, törmääkö tammenterho johonkin hahmoon. Funktion nimeksi annoin tarkistaTormays ja parametriksi “id”. Tämä mahdollisti myöhemmin funktion käytön usealle eri hahmolle. Funktio näytti tältä:

function tarkistaTormays(id) {
var paikka = $(“#” + id).offset();
var terhonpaikka = $(“#terho”).offset();
var idVasen = paikka.left;
var idYla = paikka.top;
var idAla = paikka.top + $(“#” + id).height();
var idOikea = paikka.left + $(“#” + id).width();

var terhoVasen = terhonpaikka.left;
var terhoYla = terhonpaikka.top;
var terhoAla = terhonpaikka.top + $(“#terho”).height();
var terhoOikea = terhonpaikka.left + $(“#terho”).width();
if (idOikea < terhoVasen) return false;
if (terhoOikea < idVasen) return false;
if (idAla < terhoYla) return false;
if (terhoAla < idYla) return false;
return true;
}

Ensin määrittelin siis muuttujiksi niin tammenterhon kuin hahmon ylä-, ala- ja sivupaikat. Tämän jälkeen vain vertailin, että mikäli hahmon oikean reunan arvo on pienempi kuin terhon vasemman reunan arvo eli hahmo on kokonaan lähempänä vasempaa reunaa kuin terho, funktio palauttaa false. Tein tämän sekä ylä- että sivupuolelle ja loppuun return true, eli jos joku näistä ei pidä paikkaansa, terho osuu johonkin kohtaan hahmoa. Tämän jälkeen loin uuden funktion, jossa laitoin jokaiselle hahmolle erikseen tarkistuksen, onko palautettu true.

function tarkistaKaikki() {
if (tarkistaTormays(“poika”)) {
alert(“H�visit! LOOOOSEEEER!”);
}

}

Lisäsin myös hide-funktiot liikkuvien oravien kohdalle sekä clearIntervalit tarkistaTormayksen sisälle. Piirsin häviötilanteen kuvat ja lisäsin show-funktiot tarkistaTormays-funktioiden sisälle. Laitoin myös, että tammenterhoa pitää klikata, ennen kuin se alkaa tippua.

Tällä hetkellä peli on pelattavissa osoitteessa

http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/cordovasofta.html

Seuraavaksi tehtävinä on:

– piirtää ja lisätä voittokuva

-tehdä pelistä versio Cordovalle

 

Sain pelin toimimaan myös Androidilla!!!!! Tein koodiin muutamia muutoksia, lisäsin MAinActivity.javaan aiemmin lisäämäni linkin mukaisen pätkän, lisäsin Cordova-ominaisuudet (mm.eventlistener)  ja vaihdoin keyboard-nappien paikalle onVolumeUpKeyDown- ja onVolumeDownKeyDown- funktiot. Tässä muokattu versio koodista (ei toimi selaimessa):

http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/adensofta.html

 

 

Kolmas läksy

Kolmannella tunnilla jatkoimme JavaScript- ja JQuery- harjoitteluja. Saimme tuntitehtäväksi koodata yksinkertaisen pelin. Minä koodasin pienen Noppapelin, jonka laitoin julkiseksi osoitteeseen

http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/peli.html

Pelissä on ideana yksinkertaisesti ensin syöttää numero 1-6 ja heittää sen jälkeen noppaa. Mikäli on arvannut nopan heittämän luvun, voittaa pelin. Muussa tapauksessa häviää.

Aloitusnäkymä:

Image

Virheellinen arvo:
Image

Uusi yritys…
Image

…ja häviö
Image

Tämä oli siis yksinkertainen tuntitehtävä. Läksyksi saimme ( http://terokarvinen.com/2013/aikataulu-–-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ) seuraavat tehtävät

h3: Tee yksinkertainen jQuery-peli
– Lisää siihen grafiikkaa (esim. vaihtamalla $(“img”).attr(‘src’, ‘tero.jpg’))
– Laita pelisi weppisivulle pelattavaksi
– Tee pelistä Android-projekti ja kokeile sitä emulaattorissa

 Ajattelin laajentaa hiukan tuota tunnilla tekemääni peliä. Halusin jälleen piirtää ja koska läksyyn kuuluu grafiikka, päädyin seuraavaan ideaan.
Tavoitteena olisi tehdä seuraavanlainen pelisovellus:
-Aloitustilassa hahmo seisoo noppa käsissään ja sanoo: “Hei, pelataan noppapeliä! Sinä arvaat luvun, ja minä heitän noppaa. Jos olet arvannut oikein, voitat! Muussa tapauksessa minä voitan. Noniin, arvaa!” (teksti “liukuisi” näkyviin)
– Sitten ilmestyy input-boxi, jonne käyttäjä syöttää numeron ja boxi, josta painaa “heitä noppaa”. (kuten alkuperäisessäkin pelissä)
– Sitten lyhyt animaatio, jossa hahmo heittää noppaa. Viimeinen kuva valikoituu randomisti (6 erilaista, jokaiselle nopan asennolle).
– Mikäli kuva ja käyttäjän numero samat, käyttäjä voittaa ja hahmo näyttää nyrpeää naamaa ja sanoo: “Pah, voitit!”. Muussa tapauksessa vahingoniloinen naama/nauru ja: “HAhaa! Minä voitin!!”

Päätin tällä kertaa koodata ohjelman helpommin, TextWrangler-ohjelman ( http://www.barebones.com/products/textwrangler/ ) avulla käyttäen “Open from SFTP Server”-ominaisuutta. Näin sain myyllä olevat tiedostot helposti muokattaviksi.

Pohjaksi otin valmiin pelin koodin peli.html, mutta tallensin sen uudelleen nimelle noppapeli.html. Näin molemmat pelit säilyvät myy-hakemistossani. Vaihdoin myös taustakuvan ja nimen. Tämän jälkeen pääasiassa yhdistelin edellisen läksyn ja pelin ominaisuuksia. Lisäsin peliin seuraavat toiminnot:

$(‘#hahmo’).animate( {
height : ‘134px’,
width : ‘141px’,
},
1000, function() {
$(‘#oa’).animate({ opacity : 1.0 }, 1000, function () {
$(“#lukusi”).show();
$(“#laheta”).show();
});
});

Laitoin siis  laittoi hahmon “liikkumaan” kuvaan. Eli olin määritellyt css-osioon (style-osioon) kuvan korkeudeksi ja leveydeksi 0, mutta softan käynnistyessä, se suurenee oikeaan kokoonsa. Tämän jälkeen ilmestyy teksti ja sen jälkeen vasta input-boxi ja lähetä-nappi. Nämä olin piilottanut aluksi stylessä ja nyt toin näkyviin.

$(‘#laheta’).click(function(){
var luku = $(‘#lukusi’).val();
var randomNumero = 1 + Math.floor(Math.random() * 6);
if (luku > 0 && luku < 7) {
var munKuvat = [
“panda2.png”,
“panda3.png”,
“panda2.png”,
“panda1.png”,
];
var laskin = 0;

function vaihdaKuvat() {
$(‘#hahmo’).attr(‘src’, munKuvat[laskin]);
laskin += 1;

if (laskin == munKuvat.length) {
clearInterval(vaihdaKuvat);
$(“#noppa”).text(“Sinä annoit ” + luku + “. Noppa antoi ” + randomNumero);
if (luku == randomNumero) {
$(“#tulos”).text(“Pah, voitit!”);
}
else {
$(“#tulos”).text(“Hahaa! Minä voitin!”);
};
$(“#laheta”).hide();
$(“#oa”).css(“visibility”,”hidden”);
$(“#lukusi”).hide();

}
}

setInterval(vaihdaKuvat, 100);

}
else {
$(“#noppa”).text(“Tyhmä! Ei nopassa ole tollasta lukua!”);
};
});

Sitten tein samoin kuin edellisessä kotiläksyssä, eli lisäsin animaation. Kuva liikkuu, mikäli syötetty arvo on kelvollinen.

Seuraavaksi piirsin kuvat, skannasin, Photoshoppasin ja talletin ne myylle.

kuvat

Tässä vaiheessa koodi näytti tältä:

Picture 1 Picture 2 Picture 3
Ja selaimessa tältä:

Picture 4

Seuraavaksi muokkasin kuusi erilaista kuvaa ja lisäsin if-elseen voitto- ja häviöposeeraukset. Koodiin:

if (luku == randomNumero) {
$(“#tulos”).text(“Pah, voitit!”);
$(‘#hahmo’).attr(‘src’, ‘hp’ + randomNumero + ‘.png’);
}
else {
$(“#tulos”).text(“Hahaa! Minä voitin!”);
$(‘#hahmo’).attr(‘src’, ‘vp’ + randomNumero + ‘.png’);
};

Kuva on eri riippuen nopan heitosta.

Picture 5

Seuraavaksi lisäsin alkutekstit liukuviksi. Tein SetInterval-funktion:

myInterval = setInterval( function () { kirjoita()} , 40);

Määrittelin aiemmin muuttujan teksti ja funktion kirjoita:

var teksti = “Hei, pelataan noppapeliä! Sinä arvaat luvun, minä heitän noppaa. <br> Jos arvaat oikein, voitat! Jos väärin, minä voitan. Noniin, arvaa!”;
var n = 0;
function kirjoita(){
n++;
$(‘#oa’).html(teksti.substr(0,n));
if (n == teksti.length) {
clearInterval(myInterval);
$(“#lukusi”).show();
$(“#laheta”).show();
}
}

Lopuksi hienosäädin vielä tyyliä eli määrittelin uuden divin “kaikki”, jolle stylessä arvot:

#kaikki {
margin: 30px auto auto auto;
text-align: left;
width: 500px;
}

ja bodylle

text-align: center;

Picture 6Picture 7

Sitten vaan pari kertaa tallettelua ja peli on nyt pelattavissa (!!!!) osoittessa
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/noppapeli.html

Testautin peliä luokkatovereillani ja he olivat sitä mieltä, että on turhauttavaa reloadata sivu joka kerta, jos haluaa pelata uudestaan. Tästä syystä lisäsin vielä yhden button elementin ( input id=’nappi’ type=”button” value=”Pelaa uudestaan?” ) ja Javascript-puolelle click-funktion, jonka sisällä näytin ja piilotin tarvittavat elementit niin, että kuva näyttää jälleen samalta kuin aloittaessa.

$(‘#nappi’).click(function(){
$(“#oa”).css(“visibility”, “visible”);
$(“#lukusi”).show();
$(“#laheta”).show();
$(“#noppa”).hide();
$(“#tulos”).hide();
$(“#nappi”).hide();
$(‘#hahmo’).attr(‘src’, ‘panda1.png’);
});

Ainoa ongelma oli enää, että input-boxi säilytti jo aiemmin annetun arvon. Halusin tyhjentää sen joka peliin uudelleen, joten etsin ohjeita. Löysin Googlaamalla seuraavan: http://stackoverflow.com/questions/1868773/jquery-clearing-an-input-text-field ja lisäsin click-funktion sisälle vielä

$(“#lukusi”).val(“”);

Seuraavaksi vaihdoin Ubuntun puolelle ja kokeilin softaa vielä Android-emulaattorissa. Loin uuden projektin “Noppispeli”,ja muuten toimin samoin kuten ensimmäisessä postauksessani. Laitoin oman koodini index.html-tiedostoon ja ajoin ohjelman.

Screenshot from 2013-09-17 16:18:32 Screenshot from 2013-09-17 16:18:49 Screenshot from 2013-09-17 16:19:04

Ohjelma oli rajautunut huonosti ja animaatio emulaattorissa oli kovin kömpelöä. Ohjelma kuitenkin toimi.

Toinen läksy: JavaScript ja JQuery

Kurssin toisella tunnilla kertasimme JavaScriptin alkeita ja koodailimme sillä yksinkertaisia ohjelmia. Läksyksi saimme seuraavan tehtävän ( http://terokarvinen.com/2013/aikataulu-–-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ):

– Hello jQuery

– Lue ja kirjoita arvoja lomakkeen kenttiin, reagoi napin painalluksiin (jQueryllä)

– Keksi oma ohjelma ja toteuta se jQuerylla

Tämänkin läksyn tein iMac2011-tietokoneellani, mutta tällä kertaa päätin tehdä sen Mac OS X Lion-käyttöjärjestelmällä. Aloitin käynnistämällä Terminalin ja luomalla kotihakemistooni tiedoston harjoitus.html komennolla

$ nano harjoitus.html

Tämän jälkeen kirjoitin html-Hello Worldin:

<!DOCTYPE HTML>
<html>
<head>
<title>HeiMaailma</title>
</head>

<body>
Hei Maailma!
</body>
</html>

Avasin tiedoston Safari-selaimessani File-kohdasta “Open File…” ja sieltä valitsemalla juuri luomani tiedoston. Selaimeen avautui näkymä:
Image

Tämän jälkeen Googlasin “Hello World jQuery” ja löysin helposti ymmärrettävän ohjeen jQueryn käyttöä varten: http://blog.createbrilliance.com/blog/getting-started-with-jquery-hello-world/

Kopion ensimmäisestä kohdasta <script src>-osuuden, jossa siis opeteltiin viittaaamaan jQuery-kirjastoon. Lisäsin tämän pätkän omaan koodiini headin sisälle. Lisäksi opettelin luomaan HelloWorld-funktion sivun ohjeiden mukaan. Halusin sekä HTML- että JavaScript- HelloWorldit näkymään, joten tein uuden divin “js”, jolle laitoin JavaScript -Hello Worldin. HTML- Hello World jäi näin näkyviin bodyyn.
Tässä koodi:
Image

ja tässä kuva selaimesta. Ylempi on siis “HTML Hello World” ja alempi “jQuery Hello World”.
Image

Seuraavaksi opettelin lomakkeen luomisen jälleen Googlaamalla “form jQuery”. Löysin nettisivun http://malsup.com/jquery/form/ , jonka ohjeiden mukaan lisäsin koodiini seuraavat kohdat:
– bodyyn uuden lomakkeen eli fprm-elementin, jossa text-kohta Nimi ja textarea Kommentointi sekä Lähetä-nappulan
– scriptiin loin funktion, joka hälyttää “Kiitos”, kun Lähetä-nappia klikataan.

Koodi näytti nyt tältä:

Screen Shot 2013-09-08 at 10.37.50 PM

Sivu puolestaan tältä:

Screen Shot 2013-09-08 at 10.38.00 PM
Ja click-tapahtuman jälkeen

Screen Shot 2013-09-08 at 10.38.13 PM

Seuraavaksi aloin koodata omaa miniohjelmaa. Loin uuden tiedoston

$ nano minisofta.html

ja kopion sinne kaikki aiemmin tekemäni harjoitukset. Päätin aloittaa lisäämällä taustakuvan, jonka löysin googlaamalla  osoitteesta http://www.hdwallpapersplus.com/free-wallpaper-background.html

Mietiskelin ideaa miniohjelmalleni ja koska pidän kovasti piirtämisestä ( ;P ), tulin ajatelleeksi seuraavaa:
Tavoittena on tehdä ohjelma, joka käynnistyessään tuo ruudulle kolme hahmoa. Ylhäällä lukee “Anna hahmoille nimet” ja joka hahmon alla on nimilaatikko. Kun nimi on syötetty, input-boxin tilalle muuttuu kiinteä teksi, jossa lukee hahmon nimi. Tämän jälkeen hahmoja voi vielä klikkailla ja ne tekevät jonkin pienen liikkeen (kuten vilkutus tms).

Poistin Hei Maailmat ja aloitin lisäämällä kaksi nimiboxia kuten yllä opin. Nimesin ne nimi1, nimi2 ja nimi3. Tämän jälkeen lisäsin bodyyn (testivaiheen vuoksi) kolme Internetistä Googlattua hahmoa. Lisäksi loin divit, jotka edustaisivat lomakkeisiin annettuja nimiä. Näille annoin tunnuksiksi hnimi1, hnimi2 ja hnimi3. Style-osiossa määrittelin nyt nämä alkuun näkymättömiksi.

Tämän jälkeen lisäsin Lähetä-funktion sisään seuraavat tapahtumat:
$(“#nimi1”).hide(); joka piilottaisi input-tekstikentät
$(“#hmimi1”).html($(‘#nimi1’).val()); joka antaisi nimi-inputtiin kirjoitetun arvon hnimi:lle (löysin ohjeen tästä http://api.jquery.com/val/ )
$(“#hnimi1”).show(); joka laittaisi nyt hnimi:t näkyviin

Tässä vaiheessa koodi näytti tältä, mutta ei toiminut vielä oikein, sillä se ei näyttänyt kirjoitettuja nimiä.
Screen Shot 2013-09-09 at 2.50.03 PM

Syy koodin toimimattomuuteen ei selvinnyt minulle, joten kysyin neuvoa. Sain vastaukseksi, että form-elementti on tässä tapauksessa ongelma. Olin jättänyt “action”-kentän tyhjäksi, mikä tarkoitti, että selain latasi nyt esillä olevan sivun uudelleen eli palasi alkutilanteeseen. Normaalisti action-kenttään laitetaan sivu, jonka kuuluisi latautua seuraavaksi.
Tästä syystä poistin koko form-osuuden ja jätin vain input id:t.

Koodi toimi nyt moitteitta, mutta sivun ulkoasu oli ruma ja nimet tulivat allekkain, vaikka halusin ne riviin. Päätin siis asettaa kuvat ja nimet taulukoksi, jolloin ne olisivat kohdakkain. Lisäsin tablen, jonne kaksi riviä tr, jonne kumpaankin kolme solua td. Laitoin Styleen määrittelyn text-align: center;, jolloin nimet näkyivät tasaisesti.

Nyt koodi näytti tältä:
Screen Shot 2013-09-09 at 4.02.11 PM

Ja selaimessa tältä:

Screen Shot 2013-09-09 at 4.02.57 PM
Screen Shot 2013-09-09 at 4.04.07 PM
Screen Shot 2013-09-09 at 4.03.07 PM

Lisäsin vielä  $(“#laheta”).hide(); click-funktion sisään, jolloin viimeisestä kohdasta häipyi “Lähetä”-nappi.

Mielestäni yllä näkyvä fontti ei ole kovin tyylikäs, joten muutin sen. Googlasin fontteja ja löysin kivan. Sivustolta http://www.google.com/fonts valitsin Bubbler Onen ja lisäsin alkuun pyydetyn määrittelyn: link href=’http://fonts.googleapis.com/css?family=Bubbler+One&#8217; rel=’stylesheet’ type=’text/css’
Tämän jälkeen vain Stylen kohtaan body font-family: ‘Bubbler One’;Screen Shot 2013-09-09 at 4.15.58 PM

Seuraavaksi päätin lisätä omat kuvani. Piirsi ja skannasin ne, jonka jälkeen väritin kuvat Photoshopilla. Sitten lisäsin kahdelle ensimmäiselle kuvalle muutaman uuden version, ja tavoitteena olisi yhdistää ne animaatioksi.

piirrokset

apinat kissat

Tämän jälkeen pienensin kuvat ja siirsin ne haaga-helian myy-serverille. Kirjauduin ensin sisään ja loin uuden kansion. Tämän jälkeen avasin uuden Terminal-ikkunan, siirryin omalla koneellani vastaavaan kansioon ja siirsin kuvat ko. kansioon. Sen jälkeen siirsin vielä tämän kansion public_html-kansioon, jolloin kuvat olivat Internetissä.

$ ssh a*******@myy.haaga-helia.fi
$ ls -l
$ mkdir MOBIILITUOTEKEHITYS
$ exit
(Toisella Terminalilla)
$ pwd

$ cd Desktop
$ cd MOBIILIKUVAT/
$ scp *.jpg a*******@myy.haaga-helia.fi:MOBIILITUOTEKEHITYS/

ensimmäisellä Terminalilla
$ mv MOBIILITUOTEKEHITYS/ public_html/

Tämän jälkeen vaihdoin koodissani olevan img src-kohdan vastaamaan myy-palvelimella olevia kuvia.

Nyt koodi näytti tältä:
Screen Shot 2013-09-09 at 11.38.54 PM

ja selaimessa tältä:

Screen Shot 2013-09-09 at 11.41.06 PM

Screen Shot 2013-09-09 at 11.41.12 PM

Kuvat on talletettu jpg-tiedostoiksi, joten tausta näkyy valkoisena. Seuraavaksi täytyi tehdä kuvista PNG-versiot ja siirtää ne samalla tavalla myylle kuin nämäkin kuvat.

Nyt annoin vain yhden komennon:

$ scp *.png a1102086@myy.haaga-helia.fi:public_html/MOBIILITUOTEKEHITYS/

ja kuvat siirtyivät. Menin takaisin koodiini ja vaihdoin .jpg:t .png:ksi. Nyt selain näytti tältä:

Screen Shot 2013-09-10 at 11.49.08 AM

Hiukan valkoista on havaittavissa kuvien reunoilla, joten vaihdoin taustakuvan hiukan erilaiseksi.

Screen Shot 2013-09-10 at 12.04.09 PM

Viimeinen tavoite olisi saada hahmot liikkumaan, kun niitä klikkaa.
Kokeilin klikkaus-funktiota niin, että klikatessa hahmo alerttaa pienen lausahduksen. Lisäsin

$(“#hahmo2”).click(function(){

alert(“Haivy!”);
});
klikkausfunktion “lähetä” sisälle. Toimi moitteitta. (0hje click-funktioon: http://api.jquery.com/click/ )

tämän jälkeen lisäsin hover-ominaisuuden (http://api.jquery.com/hover/) eli kun kursorin vie hahmon päälle, nuoli muuttuu tassuksi eli käyttäjä huomaa heti, että kuvasta voi klikata.

$(“#hahmo1”).hover(
function() { $(this).css(‘cursor’,’pointer’); },
function() { $(this).css(‘cursor’,’default’); }
);

Toimi moitteitta. Seuraavaksi haasteena on vaihtaa alert-kohdat kuva-animaatioksi. Googlailin ja löysin sivuston:
http://stackoverflow.com/questions/5864294/jquery-animate-images

Kopioin sivulta löytyneen koodin omaan koodiini, vaihdoin vain kuvien osoitteet ja animaatio alkoi toimia!

$(“#hahmo1”).click(function(){
var myImages = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png&#8221;,
];
var counter = 0;

function switchImage() {
$(‘#hahmo1’).attr(‘src’, myImages[counter]);
counter += 1;

if (counter == myImages.length) {
counter = 0;
}
}

$(document).ready(function() {
setInterval(switchImage, 5000);
});
});

Ongelmat:
– animaatio oli kovin hidas
– haluaisin, että liike tehtäisi vain yhden kerran. Nyt animaatio jatkuu ikuisesti.

Ensimmäisen ongelman sain ratkaistua muuttamalla kohdan setInterval(switchImage, 5000); -lukua 5000:sta 50:een.
Toisen ongelman ratkaisin muuttamalla kohtaa if (counter == myImages.length) {
counter = 0;
}
}

Löysin Googlaamalla “JQuery stop Interval” linkin: http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript
Huomasin funktion clearInterval ja päätin kokeilla sitä. Vaihdoin kohdan counter = 0 —> clearInterval(switchImage);
Nyt siinä tapauksessa kun counter on sama kuin läpikäytyjen kuvien määrä, Intervalli stoppaantuu. 🙂 Ohjelma toimii nyt halutulla tavalla!!!

Lopuksi vaihdoin vielä suoraankopioidut muuttujien nimet suomeksi. Näin koodia on mielestäni helpompi lukea.

Sitten latasin koodin myylle komennolla
$ scp minisofta.html a*******@myy.haaga-helia.fi:public_html/MOBIILITUOTEKEHITYS/

ja nyt minisofta on nähtävissä netissä osoitteessa
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minisofta.html

EDIT: HUOM!!!!!!!!!!!
Kokeiltuani useammilla käyttöjärjestelmillä ja selaimilla, vaikuttaisi siltä, että animaatio ei toimi kaikissa. Jatkan testailua ja raportoin myöhemmin tuloksia. Pyrin saamaan softan toimimaan kaikilla… Kuvasin kuitenkin videon, jossa näkyy, miten ohjelman pitäisi toimia. Käytössä siis Safari-selain.

Koodi softaan seuraavassa:
Screen Shot 2013-09-10 at 4.36.56 PM

Kurssin aloitus ja ensimmäinen läksy

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. 🙂