iPhone rakenduse tegemine

Eelmises postituses mainisin, et minu matemaatiliste valemite rakendust on praeguseks alla laetud 1000 korda, siinkohal siis valgustaks veidi tagamaid.

Ma ei teinud seda rakendust erilise eesmärgiga, soov oli vaid proovida läbi kogu töövoog alates sellest et on idee, kuni selleni, et rakendust saab AppStorest alla laadida. Idee teket täpselt ei mäleta, igatahes sai selleks matemaatika valemite kuvamine - sisuliselt on tegu spikriga, valid teema ning näed vastavaid valemeid (nt. ruutvõrrandi valemit). Kuna eeldatav sihtrühm krediitkaarti ei oma (tegu siiski kooliõpilastega), siis oli plaaniks teha rakendus tasuta ja selle eest mitte raha küsida.

C keeles ma suurt ei orienteeru, viimased katsetused jäid aastate taha kui tegin TTÜ’s mingeid kodutöid, seega sellele väga keskenduda ei tahtnud. Õnneks on praeguseks saada ka erinevaid toolkit‘e, mis võimaldavad mugavamalt hakkama saada. Minu esimeseks valikuks sai PhoneGap, mis on sisuliselt UIWebView wrapper. Teed HTML lehe, paned selle JavaScriptiga “elama” ja pakid rakenduseks kokku.

Twitterist sain vihje, et on olemas ka parem süsteem nimega Appcelerator, mis sisuliselt on sama, aga ainult UIWebView asemel pakub ehitusklotsidena kõiki native UI elemente ning selmet veebilehena asja kuvada, kompileerib eraldiseisvas failis oleva JavaScripti koodi iPhonele arusaadavaks - ühesõnaga veebilehe asemel kompileeritakse programm native app‘iks.

Struktuur

Rakenduse struktuur on väga lihtne. Põhivaade koosneb kahe elemendiga TabGroup objektist. Esimene element sisaldab “sisukorda”, teine valitud teema valemeid.

Sisukorravaade koosneb TableView elemendist, mille sees on üksikud TableViewRow elemendid. Kusjuures, igale reale on seatud eraldi “onclick” kuular, nii et kui mõnel real vajutada, avatakse valemite vaates vastavad valemid.

Valemite vaates on põhielemendiks WebView, mis kuvab lokaalseid HTML faile. Kõik valemid on GIF pildid, mis asuvad HTML failidega samas kaustas rakenduse sees. Uue teema valimisel näidatakse kasutajale aktiivsuse indikaatorit, mille kaotab WebView küljes olev onload sündmus.

Administreerimine

Valemite sisestamiseks kirjutasin lihtsa veebiliidese, mis võimaldab tekitada kategooriad ning nende alla valemeid sisestada. Kui valemid on sisestatud, käivitan täiendava skripti, mis genereerib rakenduse jaoks vajalikud HTML failid ning koostab ka JSON formaadis sisukorrafaili, mille alusel rakendus faile näidata oskab.

Sisukorrafaili sisu on järgmine:

[
    {
        "title": "Aritmeetika",
        "file": "f3f80b155d7d9af6c53bcfe23f1ea1a5.html"
    },
    {
        "title": "Algebra",
        "file": "589e1e9e690257c13858583381062e49.html"
    },
    {
        "title": "Võrrandite lahendid",
        "file": "54a2708351b891702815e787feed5f69.html"
    },
    {
        "title": "Planimeetria",
        "file": "7a1970deec26f4b79b4c245c03c5f345.html"
    },
    ......
]

Nii on rakenduse sisu lihtne uuendada - tuleb genereerida uued failid (iga kord on failinimed unikaalsed, et vältida puhverdamist) ja rakendus loeb need andmed kindla nimega JSON failist kenasti sisse.

Kood

Kood on kirjutatud täielikult JavaScriptis (lisaks standardsetele võimalustele on kasutusel Appceleratori API’id). Toon siin ära põhiloogika bloki, mis laeb JSON failist sisukorra ja genereerib selle alusel sisukorra tabeli read.

// funktsioon laeb sisukorrafaili ja genereerib
// massiivi tabeli rea elementidega
function generateIndex(){
    var data = [], json, rows = [], row,
        file = Titanium.Filesystem.getFile(
            Titanium.Filesystem.resourcesDirectory,
            "topics", "quefile.json");

    // lae failist JSON
    if (file.exists()) {
        json = file.read();
        try{
            data = JSON.parse(json);
        }catch(E){}
    }

    // koosta tabeli read
    for(var i=0; i<data.length; i++){
        if(!i){
            // globaalne muutuja
            firstpage = data[i].file;
        }
        row = Titanium.UI.createTableViewRow({
            title: data[i].title
        });

        // kuna tegu on tsükliga, loo lokaalne kontekst
        // kahjuks bind puudub, seega vaja nikerdada
        (function(f, t){
            row.addEventListener("click", 
                function(){displayPage(f, t)},
                false);    
        })(data[i].file, data[i].title);

        rows.push(row);

    }
    return rows;
}

Kusjuures rakenduse skriptiosa on ainult 99 rida pikk ja saaks ka veel lühemalt, kuna see on optimeerimata, sisaldab katsete käigus tekkinud jäänukelemente jne.

Valmis rakenduse saab iPhone, iPod ja iPad seadmesse laadida siit.

NB! Et saada õigus iseenda(!!!) telefonis rakendust katsetada ning hiljem valmis rakendus AppStore‘i üles laadida, tuli liituda Apple Developers programmiga, mille aastatasu on $99. Kusjuures, makset ei saa teha online vaid tuleb välja printida avalduse vorm, täita see ära (sh. kanda vormile krediitkaardi andmed) ja see faksida (!!!) Apple numbrile. Kasutasin faksimiseks online teenust, kuhu laadisin üles PDF faili (allkirja ei pannud ise, vaid kopeerisin eesti.ee portaalist enda rahvastikuregistri andmete juurest). Kahjuks ei kasutanud SEB virtuaalkaarti vaid reaalset kaarti ning et igaks juhuks vältida tulevasi probleeme panin kasutatud krediitkaardi hiljem kinni. SEB virtuaalkaardiga seda muret poleks tekkinud.