MIT App Inventor - konnamängu äpp

Proovime Progetiigri töölehe järgi teha mängu, kus tuleb tabada hüppavaid konni. Punast konna tuleb vältida, selle puudutamine nullib kõik kogutud punktid!

Tööleht asub siin, lumehelveste asemel on siis konnad:
http://www.progetiiger.ee/sites/default/files/AppInventor2.pdf


Konnapildid saate alla laadida siit:

MIT App Inventor - kooliäpi tegemine

Täna proovime MIT App Inventoriga teha äpi, mis koondaks kokku meid huvitavad leheküljed ja lingid.

Näiteks midagi sellist:

Idee siit: http://www.progetiiger.ee/content/2-tutvume-app-inventoriga

MIT App Inventor - sissejuhatus

MIT App Inventor on keskkond, kus on võimalik teha nutiseadmetele äppe ning neid samas ka testida.

http://appinventor.mit.edu/explore/

Keskkonda saab kasutada Google kontoga (Viimsi Kooli õpilaste e-post või gmail.com lõpuga meiliaadress). NB! Kellel ei ole Google kontot, siis küsige selle tegemiseks abi õpetajalt!

Keskonna tutvustus ja tööleht: http://www.progetiiger.ee/content/1-sissejuhatus

Ülesanne 1
Loo äpp, mis vastamise nupule vajutades kuvaks kasutajale erinevaid vastuseid (vt Progetiigri materjali linki ülalpool).
Täiusta oma äppi nii, et nupule vajutamisel mängitakse helinat ja vastus kuvatakse telefoni raputamise peale.

NB! Äppi saad katsetada oma nutiseadmes. Selleks klõpsa menüüribal sõna "Build" ja vali loetelust "App (provide QR code for .apk)".

Nüüd kuvatakse mõne aja pärast arvuti ekraanile QR kood, mida telefoniga lugedes saate käivitada rakenduse allalaadimise.

Oma seadmes pead selle rakenduse installimiseks lubama installimise tundmatutest allikatest pärit rakendustele - selle võite nutiseadme seadete alt korraks sisse lülitada ja siis tunni lõpus panna peale jälle piirangu, et see poleks lubatud (telefoni turvalisuse huvides).

Objektid ja meetodid Javascriptis

Codecombati mängu mängides puutusid kokku sellega, et tegelase liigutamiseks pidid kasutama süntaksit this.moveRight(); või this.attack(enemy); selles mängus on tegelased kirjeldatud objektidena ning neile saab mängu käigus lisada uusi omadusi ja funktsioone.

Objekte kasutataksegi Javascriptis selleks, et andmeid organiseerida. Objektiks sisuks olevad omadused võivad muutuda (nii nagu mängus saab tegelane järjest tugevamaks). 

Objekti defineerimisel on üheks võimaluseks panna objekti omadused loogeliste sulgude vahele

var objektinimi = {};

var mina = {
  nimi: "Minu Nimi",
  vanus: 10
};

Teine võimalus on kõigepealt defineerida tühi objekt (new Object();) ja siis täida see sisuga.

var mina = new Object();
mina.nimi = "Minu Nimi";
mina.vanus = 10;


Meetodid

Meetodid on objektiga seotud funktsioonid. Neid saab kasutada objekti omaduste väärtuste muutmiseks (näiteks uus vanus) ja objekti omaduste põhjal arvutuste tegemiseks.

Meetod muudab ära kasutaja vanuse:

mina.muudaVanus = function (uusVanus){

  mina.vanus = uusVanus;

};

Meetod arvutab vanuse järgi inimese sünniaasta:

mina.leiaSynniAasta = function () {

  return 2014 - mina.vanus;

};

console.log(mina.leiaSynniAasta());

Võtmesõna this 

toimib kohatäitjana ja viitab meetodi kasutamisel meetodi välja kutsunud objektile.

Taimer (MobileNations)

Juhend MobileNations keskkonnas taimeri äppi loomiseks.

Näiteks midagi sellist:

Analoogse äpi loomiseks tuleb alustada MobileNations keskkonnas uut projekti (Blank Phone App).

Kõigepealt loome äpi, mis alustaks allapoole loendamist arvust 20.

Selleks:

• lohistame tööriistakastist mobiilile ühe "label" sildi.
  
• lisame mobiilile ka nupu, mis taimerit käivitaks. 
  
• nüüd lisame javascripti, mis nupule vajutades hakkaks arvust 20 allapoole loendama ning lõpetaks, kui väärtuseks saab 0 

Javascripti sisestatav kood võiks olla selline:

"taimer":function(){
    if (window.theCount == null)
    {window.theCount = 20}
  if (window.theCount >=0) {
     MN.find("Default View/label").text = window.theCount;
     window.theCount--;
   }

• Edasi tuleb äpp töökorda seada. Selleks lisame veel valmis programmi numbrite mahaloendamiseks (Timer). Selleks leia "Tools palette" valikust "Timer" ja lohista see mobiilile.
• Taimeri seadistamine 
  
• Javascripti sidumine taimeriga 
  
• klõpsa nupul "Preview" ja vaata, kas äpp töötab!

Täiendus - kasutaja saab sisestada arvu, millest hakatakse numbreid allapoole loendama!

• Kasutaja käest andmete küsimiseks on vaja sisestada vastav tekstikast 

• Asenda javascripti koodis arv 20 järgmise kirjega: MN.find("Default View/arv").text;
• Kustuta ära ka sildi väärtus (20), sest muidu kuvatakse äppi laadides endiselt seda arvu.
• Kirjuta arvu sisestamiseks ka kasutajat juhendav tekst.

Keskkond Appide loomiseks (javascripti baasil) - MobileNations

http://www.mobilenationhq.com/

Keskkonda tuleb esmalt kasutajakonto luua. Tasuta kontoga saab 25 MB salvestusruumi ning võimaluse teha 10 appi. Harjutamiseks sellest piisab.

Valmis appe saab testida kohe oma nutiseadmes, selleks on vajalik QR koodi lugeja olemasolu. QR koodiga saab oma appi ka teistele jagada.

Proovime täna valmis teha ühe lihtsa arvutamise äppi, mis teeks sisestatud arvudega mõned arvutamistehted (näiteks liidaks, lahutaks ja korrutaks).

Peale sisselogimist saate valida, millist projekti soovite luua. Tänase projekti jaoks vali "Blank Phone App".

Edasi tuleb menüüst sobivad vidinad lihtsalt virtuaalse nutiseadme ekraanile lohistada ning neile tegevusi määrata.

Komponentide lisamise kohta vaadake allolevat videot

Kui kompnendid on lisatud, tuleb nad Javascripti abil ka tööle panna. Selleks lohistame komponentide paneelist telefonipildile Javascripti.

Skript, mille lisame peab olema selline:

"arvuta":function(x,y) {

var X = parseFloat(x); //teisendab väljale x sisestatu arvuks

var Y = parseFloat(y); //teisendab väljale y sisestatu arvuks

MN.find("Default View/liitmise välja nimetus").text = X + Y;

MN.find("Default Vier/lahutamise välja nimetus").text = X - Y;

}

Edasi tuleb nupule lisada tegevus (vt videot, kuidas seda teha!).